WPF——ICON按钮制作

前言

首先ICON按钮，即带图标按钮，即图标按钮。

图标按钮在开发时，主要是有两种方式来进行。一是在Button的Content内添加Image，然后设置Image的属性Source来实现，这种方式主要是简单易操作，对于初学者来说，很快就能掌握；二是通过Style来实现，此在初学是比较麻烦的，需要对style足够熟悉后才能掌握。

随着技术的发展，目前使用字体图标来替代图片图标已经是一种趋势。使用字体图标的好处：字体图标是矢量图，放大不存在失真问题；再就是字体图标设置颜色，可根据需要，由开发者自行决定，这为美工减少了大量的工作（美工不再需要为同一个图标制作多种颜色的图标，而只需要制作一个），同时软件可以集中管理图标的颜色，便于软件风格的切换。

也就是说当下制作图标按钮，算上字体图标的加入的话，可以说有了3种主要的方法。（本文不讲如何获取或制作字体图标，做法参考文末给出的参考。）

实现

下述代码演示的是以Style的形式来完成IconButon的制作：

<Window
    x:Class="DicomReader.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:DicomReader"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="DicomReader"
    Width="1200"
    Height="800"
    Background="#353535"
    mc:Ignorable="d">
    <Window.Resources>
        <Style x:Key="IconButtonTb" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="pack://application:,,,/DicomReader;component/Fonts/#iconfont" />
            <Setter Property="FontSize" Value="30" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontWeight" Value="Bold" />
        </Style>
        <Style x:Key="IconButton" TargetType="Button">
            <Setter Property="Background" Value="#333337" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid Background="{TemplateBinding Background}">
                            <!--<Ellipse Fill="{TemplateBinding Background}" />-->
                            <TextBlock
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Style="{StaticResource IconButtonTb}"
                                Text="{TemplateBinding Content}" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="Grid">
            <Setter Property="Background" Value="#252525" />
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="4*" />
        </Grid.ColumnDefinitions>
        <StackPanel Orientation="Vertical">
            <Grid Height="50">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Button
                    x:Name="OpenDicom"
                    Grid.Column="0"
                    Content="&#xe662;"
                    Style="{StaticResource IconButton}"
                    ToolTip="打开DICOM文件夹" />
                <Button
                    Grid.Column="1"
                    Content="&#xe995;"
                    Style="{StaticResource IconButton}"
                    ToolTip="快速浏览" />
                <Button
                    Grid.Column="3"
                    Content="&#xe6fc;"
                    Style="{StaticResource IconButton}"
                    ToolTip="3D浏览" />
                <Button
                    Grid.Column="2"
                    Content="&#xe619;"
                    Style="{StaticResource IconButton}"
                    ToolTip="MRP浏览" />
                <Button
                    Grid.Column="4"
                    Content="&#xe61b;"
                    Style="{StaticResource IconButton}"
                    ToolTip="融合浏览" />
            </Grid>

            <Grid Height="Auto" Margin="0,10" />

        </StackPanel>
        <Grid Grid.Column="1" />

    </Grid>
</Window>

显示效果

注意

上述代码中的<Setter Property="FontFamily" Value="pack://application:,,,/DicomReader;component/Fonts/#iconfont" />这句代码中的DicomReader是项目上名，Fonts是项目下的Fonts文件夹，iconfont是字体文件名（注意在字体文件名前的#号，必须要有）。

设置控件的style时，注意StaticResource后写的的style的key值，若你将你所写的style命名时命名的是x:Name，将会导致在写完StaticResource时没有智能提示，强行写下你style名称时也会报错。此请一定要注意。

另就是一定要将字体文件输出，否则字体图标不能正常显示。

其它做法

在正常将字体图标输出的情况下,下述代码也是可行的。但不推荐此做法，原因就不说了。

<Grid Height="Auto" Margin="0,10">
   <Button Background="Aqua">
       <TextBlock Text="&#xe608;" />
   </Button>
</Grid>

字体图标制作方法

关于如何制作自己的字体图标，请参考WPF 字体图标的使用 - lxiamul - 博客园。感谢博主对于字体图标的分享。