Metro UI Titlebar WindowState(Min/Restore/Close) Glyphs

Question

I am building a WPF application and creating a user interface without the standard titlebar. With this said I need to handle my own WindowState buttons and I was thinking that the ones metroUI/Vs2012 use would be ideal. The issue I am having is finding the glyphs(icons) so I can add them into buttons. I checked vs2012 with snoop and couldn't find much except for the fact that it does use font symbols and not images for the icons. I checked Segoe UI and it doesn't seem to contain those. What exactly are people using to create their metro ui titlebar button icons?

Worst case scenario I will open up a metro app and take some screen caps and then retrace the glyphs in illustrator and then import the vectors into blend to convert to XAML. Or I could even just cut the icons out only and use the images in the buttons, although I would prefer to use a font glyph or xaml solution.

Can anyone who has done this guide me in the right direction?

Answer 1

Here is the basics of one I found. We do ours at work through using just a windows font type that has those symbols, but the Modern UI for wpf does theres here with paths. Full code can be found at the link below this was just enough code to show it working.

https://mui.codeplex.com/SourceControl/latest#1.0/FirstFloor.ModernUI/FirstFloor.ModernUI.WPF4/Themes/ModernDialog.xaml

    <Style x:Key="SystemButtonBase" TargetType="ButtonBase">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="1"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ButtonBase}">
                    <Border Name="Chrome"
                            Background="{TemplateBinding Background}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            SnapsToDevicePixels="true">
                        <ContentPresenter Margin="{TemplateBinding Padding}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          RecognizesAccessKey="True"
                                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="SystemButton" TargetType="ButtonBase" BasedOn="{StaticResource SystemButtonBase}">
        <Setter Property="Foreground" Value="{DynamicResource LinkButtonText}"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Foreground" Value="{DynamicResource LinkButtonTextHover}"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter Property="Foreground" Value="{DynamicResource LinkButtonTextPressed}" />
            </Trigger>
            <Trigger Property="IsEnabled" Value="false">
                <Setter Property="Foreground" Value="{DynamicResource LinkButtonTextDisabled}" />
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,8,6,0" WindowChrome.IsHitTestVisibleInChrome="True">
    <Button Command="{Binding Source={x:Static SystemCommands.MinimizeWindowCommand}}" Style="{StaticResource SystemButton}">
        <Button.Content>
            <Grid Width="13" Height="12" RenderTransform="1,0,0,1,0,1">
                <Path Data="M0,6 L8,6 Z" Width="8" Height="7" VerticalAlignment="Center" HorizontalAlignment="Center"
                                                          Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="2"  />
            </Grid>
        </Button.Content>
    </Button>
    <Grid Margin="1,0,1,0">
        <Button x:Name="Restore" Command="{Binding Source={x:Static SystemCommands.RestoreWindowCommand}}" Visibility="Collapsed" Style="{StaticResource SystemButton}" >
            <Button.Content>
                <Grid Width="13" Height="12" UseLayoutRounding="True" RenderTransform="1,0,0,1,.5,.5">
                    <Path Data="M2,0 L8,0 L8,6 M0,3 L6,3 M0,2 L6,2 L6,8 L0,8 Z" Width="8" Height="8" VerticalAlignment="Center" HorizontalAlignment="Center"
                                                              Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="1"  />
                </Grid>
            </Button.Content>
        </Button>
        <Button x:Name="Maximize" Command="{Binding Source={x:Static SystemCommands.MaximizeWindowCommand}}" Style="{StaticResource SystemButton}" >
            <Button.Content>
                <Grid Width="13" Height="12">
                    <Path Data="M0,1 L9,1 L9,8 L0,8 Z" Width="9" Height="8" VerticalAlignment="Center" HorizontalAlignment="Center"
                                                              Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="2"  />
                </Grid>
            </Button.Content>
        </Button>
    </Grid>
    <Button Command="{Binding Source={x:Static SystemCommands.CloseWindowCommand}}" Style="{StaticResource SystemButton}"  >
        <Button.Content>
            <Grid Width="13" Height="12" RenderTransform="1,0,0,1,0,1">
                <Path Data="M0,0 L8,7 M8,0 L0,7 Z" Width="8" Height="7" VerticalAlignment="Center" HorizontalAlignment="Center"
                                                          Stroke="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" StrokeThickness="1.5"  />
            </Grid>
        </Button.Content>
    </Button>
</StackPanel>