Question

我正在构建一个WPF应用程序并创建一个没有标准标题栏的用户界面。有了这个说我需要处理我自己的WindowState按钮，我认为metroUI / Vs2012使用的将是理想的。我遇到的问题是找到字形（图标），以便我可以将它们添加到按钮中。我用snoop检查了vs2012并且找不到太多，除了它确实使用字体符号而不是图标的图像。我检查了Segoe UI，它似乎没有包含那些。人们究竟用什么来创建他们的地铁ui标题栏按钮图标？

最糟糕的情况我将打开一个地铁应用程序并获取一些屏幕截图，然后在插图画家中回溯字形，然后将矢量导入混合以转换为XAML。或者我甚至可以只剪切图标并使用按钮中的图像，但我更喜欢使用字体字形或xaml解决方案。

任何做过此事的人都可以指导我朝着正确的方向前进吗？

Answer 1

以下是我找到的基础知识。我们通过仅使用具有这些符号的Windows字体类型来完成我们的工作，但是wpf的现代UI在这里使用路径来完成。完整的代码可以在下面的链接中找到，这只是足以显示它工作的代码。

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>

example of what it looks like

Metro UI Titlebar WindowState（最小/恢复/关闭）字形

1 个答案: