C#学习系列之图标使用

C#学习系列之图标使用

提示：这里会使用到ttf相关资源以及阿里图标库

---

---

啰嗦

界面有时候需要比较好看的图标，这里主要介绍界面上的图标使用。

---

图标库

在多个项目的一些图标使用上，都是用到了https://www.iconfont.cn/
这是一个特别强大的图标库，种类多，形式多。好用！
这里需要注册一下。

• 搜索自己喜欢与需要的图标
  

• 找到对应的图标，并加入自己的购物车
  

• 选择下载代码
  

• 在代码中找到ttf文档，这个文档是后续在C#中会使用的。
  

界面代码

主界面显示

图标主要使用如图：

主界面代码

• 样式定义为CloseButtonTemplate

<FontFamily x:Key="iconfont">pack://application:,,,/computer;component/Assets/Fonts/#iconfont</FontFamily>
        <ControlTemplate TargetType="Button" x:Key="CloseButtonTemplate">
            <Grid Background="Transparent" Name="back">
                <TextBlock Text="&#xe668;"
                           FontFamily="{DynamicResource iconfont}"  VerticalAlignment="Center" HorizontalAlignment="Center"
                           FontSize="14"/>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="#DDD" TargetName="back"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

1）代码的第一句就是添加ttf的路径
2）定义一个CloseButtonTemplate的样式，样式可以自己绑定事件，并用于多个按钮的地方
提示：这里会使用到ttf需要设置为资源

• 按钮
  
  1）绑定样式CloseButtonTemplate
  2）绑定事件CloseCommand

绑定事件代码

private CommandBase _closeCommand;
public CommandBase CloseCommand
{
    get
    {
        if (_closeCommand == null)
        {
            _closeCommand = new CommandBase();
            _closeCommand.DoExecute = new Action<object>(obj =>
            {
                (obj as System.Windows.Window).DialogResult = false;
            });
        }
        return _closeCommand;
    }
}

走到这一步，也许你认为成功了。
但是很有可能，你的按钮却一直无法实现关闭的功能。这里也是我找了好久发现的问题。还缺少一个DataContext。
在界面.xaml的文件中需要添加下面的代码：ViewModel是界面后的代码，划分的功能。绑定的事件在这个代码中进行实现。

d:DataContext="{d:DesignInstance Type=vm:ViewModel}"
        mc:Ignorable="d"

但是还需在界面对应的.xaml.cs中添加一句：

this.DataContext = new ViewModel();

使用DataContext属性就好像设置了所有绑定的基础，能够贯穿整个控件层次。这样就节省了手动为每一个绑定定义源。
提示：这里会使用到ttf相关资源以及阿里图标库

总结

想把绑定事件按模块化分开，使用MVVM的模式，在绑定样式中添加绑定，还需要在界面中添加DataContext进行属性绑定。
个人探索，欢迎讨论！

引用

https://www.iconfont.cn/