WPF自定义控件(教程含源码)-结束iconfont实现带图标的按钮_wpf 图标按钮

• 先来看看最终效果

• 实现步骤

1. 在阿里巴巴矢量图标库选取需要的图标

阿里巴巴矢量图标库

点击下载至本地后即可获取到 iconfont.ttf 字体文件

将字体文件拷贝到项目内, 如下我放在 Contents 文件夹下

2. 显示这些矢量图标

在项目内新建资源字典“RText.xaml”,将fontfamily 设置为contents文件夹内的字体

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WPFCustomControl.Controls">
 
    <Style TargetType="TextBlock" x:Key="RText">
        <Setter Property="FontFamily" Value="/WPFCustomControl;component/Contents/#iconfont" />
        <Setter Property="TextAlignment" Value="Center"/>
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="FontSize" Value="20" />
        <Setter Property="Text" Value="&#xe601;" />
    </Style>
</ResourceDictionary>

新建一个用户控件, 在里面使用上面新加的样式

<Grid Background="White">
        <StackPanel>
            <WrapPanel >
                <TextBlock Text="&#xe601;" Style="{StaticResource RText}" Margin="10" />
                <TextBlock Text="&#xe602;" Style="{StaticResource RText}" Margin="10" />
                <TextBlock Text="&#xe603;" Style="{StaticResource RText}" Margin="10" />
                <TextBlock Text="&#xe604;" Style="{StaticResource RText}" Margin="10" />
                <TextBlock Text="&#xe605;" Style="{StaticResource RText}" Margin="10" />
            </WrapPanel>
        </StackPanel>
    </Grid>

效果如下

3. 在button 中使用矢量图标

新建一个RButton类,继承Button。添加依赖属性 Icon。

    public partial class RButton:Button {
        static RButton() {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(RButton), new FrameworkPropertyMetadata(typeof(RButton)));
        }
 
        #region Icon 
        public static readonly DependencyProperty IconProperty =
            DependencyProperty.Register("Icon", typeof(string), typeof(RButton), new PropertyMetadata(""));
 
        public string Icon {
            get => (string)GetValue(IconProperty);
            set => SetValue(IconProperty, value);
        }
        #endregion
    }

为RButton 添加新的样式文件， 添加两种样式，一种纯色背景，一种白色背景带边框

    <!--纯色背景-->
    <Style TargetType="local:RButton" x:Key="btn">
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:RButton">
                    <Border SnapsToDevicePixels="True" Background="{TemplateBinding Background}">
                        <WrapPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                            <TextBlock Style="{StaticResource RText}" Text="{TemplateBinding Icon}" Margin="0 0 10 0" FontSize="{TemplateBinding FontSize}"/>
                            <ContentPresenter SnapsToDevicePixels="True"  />
                        </WrapPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
 
    <!--白色背景,带边框-->
    <Style TargetType="local:RButton" x:Key="btnBorder">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:RButton">
                    <Border SnapsToDevicePixels="True" Background="White" BorderThickness="1" BorderBrush="{TemplateBinding Foreground}">
                        <WrapPanel VerticalAlignment="Center" HorizontalAlignment="Center">
                            <TextBlock Style="{StaticResource RText}" Text="{TemplateBinding Icon}" Margin="0 0 10 0" FontSize="{TemplateBinding FontSize}"
                                       Foreground="{TemplateBinding Foreground}"/>
                            <ContentPresenter SnapsToDevicePixels="True"  />
                        </WrapPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

添加用户控件，在界面内使用新增的按钮样式

    <Grid Background="White">
        <StackPanel>
            <WrapPanel >
                <TextBlock Text="&#xe601;" Style="{StaticResource RText}" Margin="10" />
                <TextBlock Text="&#xe602;" Style="{StaticResource RText}" Margin="10" />
                <TextBlock Text="&#xe603;" Style="{StaticResource RText}" Margin="10" />
                <TextBlock Text="&#xe604;" Style="{StaticResource RText}" Margin="10" />
                <TextBlock Text="&#xe605;" Style="{StaticResource RText}" Margin="10" />
            </WrapPanel>
            <WrapPanel >
                <lc:RButton Icon="&#xe601;" Content="更多" Style="{StaticResource btn}" Background="#009688" Height="40" Width="100" Margin="10" FontSize="18"/>
                <lc:RButton Icon="&#xe602;" Content="更多" Style="{StaticResource btn}" Background="#1E9FFF" Height="40" Width="100" Margin="10" FontSize="18"/>
                <lc:RButton Icon="&#xe603;" Content="编辑" Style="{StaticResource btn}" Background="#FF5722" Height="40" Width="100" Margin="10" FontSize="18"/>
                <lc:RButton Icon="&#xe604;" Content="时间" Style="{StaticResource btn}" Background="#FFB800" Height="40" Width="100" Margin="10" FontSize="18"/>
            </WrapPanel>
            <WrapPanel >
                <lc:RButton Icon="&#xe601;" Content="更多" Style="{StaticResource btnBorder}" Foreground="#009688" Height="40" Width="100" Margin="10" FontSize="18"/>
                <lc:RButton Icon="&#xe602;" Content="更多" Style="{StaticResource btnBorder}" Foreground="#1E9FFF" Height="40" Width="100" Margin="10" FontSize="18"/>
                <lc:RButton Icon="&#xe603;" Content="编辑" Style="{StaticResource btnBorder}" Foreground="#FF5722" Height="40" Width="100" Margin="10" FontSize="18"/>
                <lc:RButton Icon="&#xe604;" Content="时间" Style="{StaticResource btnBorder}" Foreground="#FFB800" Height="40" Width="100" Margin="10" FontSize="18"/>
            </WrapPanel>
        </StackPanel>
    </Grid>

最终效果如下