WPF 使用FontAwesome字体图标

016120

 

image

要搞点小软件，又不想使用图标和图标类库，突然想起FontAwesome,试了一下，还挺方便的，先弄了几个最常用的图标试一下，弄了几个按钮的样式，看一下效果：

image

看一下fontAwesome使用方法：

首先从官网下载字体，地址：http://www.fontawesome.com.cn/

image

下载后，把其中的 fontawesome-webfont.ttf 复制到软件目录，

添加一个几个资源字典：

Base.xaml :

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:sys="clr-namespace:System;assembly=mscorlib">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="Colors.xaml"/>
    </ResourceDictionary.MergedDictionaries>
    <sys:Double x:Key="FontSizeMini" >12</sys:Double>
    <sys:Double x:Key="FontSizeNormal" >14</sys:Double>
    <sys:Double x:Key="FontSizeLarge" >16</sys:Double>

    <FontFamily x:Key="FontAwesome">pack://application;,,,/Fonts/#FontAwesome</FontFamily>
    <!--FontAwesome Icons Strings-->
    <sys:String x:Key="SettingIcon">&#xf013;</sys:String>
    <sys:String x:Key="MinsizeIcon">&#xf2d1;</sys:String>
    <sys:String x:Key="MaxsizeIcon">&#xf2d0;</sys:String>
    <sys:String x:Key="CloseIcon">&#xf00d;</sys:String>
    
    <Style x:Key="BaseStyle" TargetType="{x:Type Control}">
        <Setter Property="FontFamily" Value="微软雅黑"/>
        <Setter Property="FontSize" Value="{StaticResource FontSizeNormal}"/>
        <Setter Property="BorderThickness" Value="0"/>
</Style>

    <Style x:Key="IconButtonBaseStyle" TargetType="Button">
        <Setter Property="FontFamily" Value="{StaticResource FontAwesome}"/>
        <Setter Property="BorderThickness" Value="0"/>
</Style>
</ResourceDictionary>

Colors.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Color x:Key="Black">#000000</Color>
    <SolidColorBrush x:Key="BlackBrush" Color="{StaticResource Black}"/>

    <Color x:Key="White">#FFFFFF</Color>
    <SolidColorBrush x:Key="WhiteBrush" Color="{StaticResource White}"/>

    <Color x:Key="TransWhite">#33dddddd</Color>
    <SolidColorBrush x:Key="TransWhiteBrush" Color="{StaticResource TransWhite}"/>

    <Color x:Key="Gray">#B8BABC</Color>
    <SolidColorBrush x:Key="GrayBrush" Color="{StaticResource Gray}"/>

    <Color x:Key="VeryDarkGray">#C0C0C0</Color>
    <SolidColorBrush x:Key="VeryDarkGrayBrush" Color="{StaticResource VeryDarkGray}"/>

    <Color x:Key="DarkGray">#C3C0C3</Color>
    <SolidColorBrush x:Key="DarkGrayBrush" Color="{StaticResource DarkGray}"/>

    <Color x:Key="LightGray">#ECECEC</Color>
    <SolidColorBrush x:Key="LightGrayBrush" Color="{StaticResource LightGray}"/>

    <Color x:Key="VeryLightGray">#F3F3F3</Color>
    <SolidColorBrush x:Key="VeryLightGrayBrush" Color="{StaticResource VeryLightGray}"/>


    <Color x:Key="ButtonBack">#07BDFD</Color>
    <SolidColorBrush x:Key="ButtonBackBrush" Color="{StaticResource ButtonBack}"/>

    <Color x:Key="ButtonHoverBack">#1FC7FD</Color>
    <SolidColorBrush x:Key="ButtonHoverBackBrush" Color="{StaticResource ButtonHoverBack}"/>
</ResourceDictionary>

ButtonStyles.xaml (重点)

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:GQ">

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="Base.xaml"/>
    </ResourceDictionary.MergedDictionaries>

    <Style TargetType="{x:Type Button}" x:Key="IgnoreHover">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}">
                        <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>

    <Style TargetType="{x:Type Button}" BasedOn="{StaticResource BaseStyle}">
        <Setter Property="Background" Value="{StaticResource ButtonBackBrush}"/>
        <Setter Property="Foreground" Value="{StaticResource WhiteBrush}"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>

        <Setter Property="Padding" Value="20 10"/>
        <Setter Property="Margin" Value="10"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ButtonBase}">
                    <Border x:Name="border"
                            CornerRadius="6"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}" 
                            SnapsToDevicePixels="True">
                        <Grid>
                            <TextBlock Text="{TemplateBinding Content}" 
                                   Focusable="False" 
                                   FontFamily="{TemplateBinding FontFamily}"
                                   FontSize="{TemplateBinding FontSize}"
                                   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                   Margin="{TemplateBinding Padding}" 
                                   SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                   VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="MouseEnter">
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation To="{StaticResource ButtonHoverBack}" Duration="0:0:0.3" Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseLeave">
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation From="{StaticResource ButtonHoverBack}" Duration="0:0:0.3" Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Background" TargetName="border" Value="{StaticResource VeryDarkGrayBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>

    <Style x:Key="IconButton" TargetType="Button" BasedOn="{StaticResource IconButtonBaseStyle}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="{StaticResource WhiteBrush}"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Height" Value="32"/>
        <Setter Property="Padding" Value="5"/>
        <Setter Property="Width" Value="{Binding ActualHeight,RelativeSource={RelativeSource Self}}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ButtonBase}">
                    <Border x:Name="border"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}" 
                            SnapsToDevicePixels="True">
                        <Viewbox>
                            <TextBlock Text="{TemplateBinding Content}" 
                                   Focusable="False" 
                                   FontFamily="{TemplateBinding FontFamily}"
                                   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                   Margin="{TemplateBinding Padding}" 
                                   FontSize="{TemplateBinding FontSize}"
                                   SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                   VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Viewbox>
                    </Border>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="MouseEnter">
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation To="{StaticResource TransWhite}" Duration="0:0:0.2" Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseLeave">
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation From="{StaticResource TransWhite}" Duration="0:0:0.2" Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Background" TargetName="border" Value="{StaticResource VeryDarkGrayBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>

    <Style x:Key="IconGrowButton" TargetType="{x:Type Button}" BasedOn="{StaticResource IconButtonBaseStyle}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="{StaticResource WhiteBrush}"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Height" Value="32"/>
        <Setter Property="Padding" Value="5"/>
        <Setter Property="Width" Value="{Binding ActualHeight,RelativeSource={RelativeSource Self}}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ButtonBase}">
                    <Border x:Name="border"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}" 
                            SnapsToDevicePixels="True"
                            RenderTransformOrigin="0.5,0.5">
                        <Border.RenderTransform>
                            <ScaleTransform/>
                        </Border.RenderTransform>
                        <Viewbox>
                            <TextBlock Text="{TemplateBinding Content}" 
                                   Focusable="False" 
                                   FontFamily="{TemplateBinding FontFamily}"
                                   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                   Margin="{TemplateBinding Padding}" 
                                   FontSize="{TemplateBinding FontSize}"
                                   SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                   VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Viewbox>
                    </Border>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="MouseEnter">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation To="1.3" Duration="0:0:0.2" Storyboard.TargetName="border" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)"/>
                                    <DoubleAnimation To="1.3" Duration="0:0:0.2" Storyboard.TargetName="border" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="MouseLeave">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation To="1" Duration="0:0:0.2" Storyboard.TargetName="border" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)"/>
                                    <DoubleAnimation To="1" Duration="0:0:0.2" Storyboard.TargetName="border" Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Background" TargetName="border" Value="{StaticResource VeryDarkGrayBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>

    <Style x:Key="TextButton" TargetType="{x:Type Button}" BasedOn="{StaticResource BaseStyle}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="{StaticResource WhiteBrush}"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Padding" Value="20 10"/>
        <Setter Property="Margin" Value="0 10"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ButtonBase}">
                    <Border x:Name="border"
                            CornerRadius="6"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}" 
                            SnapsToDevicePixels="True">
                        <TextBlock Text="{TemplateBinding Content}" 
                                   Focusable="False" 
                                   FontFamily="{TemplateBinding FontFamily}"
                                   FontSize="{TemplateBinding FontSize}"
                                   HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                   Margin="{TemplateBinding Padding}" 
                                   SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                   VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" Value="{StaticResource DarkGrayBrush}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Foreground" Value="{StaticResource VeryDarkGrayBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>    
    <!--上述5个样式 参考自 https://www.youtube.com/playlist?list=PLrW43fNmjaQVYF4zgsD0oL9Iv6u23PI6M
        有改动，不完全一样，你可以根据需要自行修改-->
</ResourceDictionary>

然后在App.xaml内添加所有资源字典：

<Application x:Class="GQ.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:GQ"
             StartupUri="/Windows/LoginWindow.xaml"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             xmlns:arr="clr-namespace:System.Collections.Generic;assembly=mscorlib">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Styles/Base.xaml"/>
                <ResourceDictionary Source="/Styles/Panel3DStyle.xaml"/>
                <ResourceDictionary Source="/Styles/ButtonStyles.xaml"/>
            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>
    </Application.Resources>
</Application>

最后，创建一个LoginWindow.xaml，测试这几个样式，并使用FontAwesome：

<Window x:Class="GQ.LoginWindow"
        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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:GQ"
        mc:Ignorable="d"
        AllowsTransparency="True"
        WindowStyle="None"
        Background="Gray"
        WindowStartupLocation="CenterScreen"
        Title="MainWindow" Height="470" Width="497">

    <Grid>
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <Button FontFamily="{StaticResource FontAwesome}" Content="{StaticResource SettingIcon}"/>
                <Button FontFamily="{StaticResource FontAwesome}" Content="{StaticResource MinsizeIcon}"/>
                <Button FontFamily="{StaticResource FontAwesome}" Content="{StaticResource MaxsizeIcon}"/>
                <Button FontFamily="{StaticResource FontAwesome}" Content="{StaticResource CloseIcon}"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <Button Style="{StaticResource IconGrowButton}"  Content="{StaticResource SettingIcon}"/>
                <Button Style="{StaticResource IconGrowButton}"  Content="{StaticResource MinsizeIcon}"/>
                <Button Style="{StaticResource IconGrowButton}"  Content="{StaticResource MaxsizeIcon}"/>
                <Button Style="{StaticResource IconGrowButton}" Content="{StaticResource CloseIcon}"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <Button Style="{StaticResource IconButton}"  Content="{StaticResource SettingIcon}"/>
                <Button Style="{StaticResource IconButton}"  Content="{StaticResource MinsizeIcon}"/>
                <Button Style="{StaticResource IconButton}"  Content="{StaticResource MaxsizeIcon}"/>
                <Button Style="{StaticResource IconButton}" Content="{StaticResource CloseIcon}"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <Button Style="{StaticResource TextButton}" FontFamily="{StaticResource FontAwesome}" Content="{StaticResource SettingIcon}"/>
                <Button Style="{StaticResource TextButton}" FontFamily="{StaticResource FontAwesome}" Content="{StaticResource MinsizeIcon}"/>
                <Button Style="{StaticResource TextButton}" FontFamily="{StaticResource FontAwesome}" Content="{StaticResource MaxsizeIcon}"/>
                <Button Style="{StaticResource TextButton}" FontFamily="{StaticResource FontAwesome}" Content="{StaticResource CloseIcon}"/>
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

这样控件就能使用完成了，虽然看起来很麻烦，但收益还是不小的，以后再添加别的图标，就很方便了。

当然喽，做正经的软件，图标肯定是由设计给的，不是用这些网上的这些图标，只能自己玩玩，嘿嘿

© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
WPF
喜欢就支持一下吧
点赞20 分享
gxy01的头像-WPF中文社区
WPF 制作侧边菜单 SideMenu-WPF中文社区
WPF 制作侧边菜单 SideMenu
WPF 制作侧边菜单 SideMenu
1个月前 563
WPF 修改(优化)Menu菜单的样式-WPF中文社区
WPF 修改(优化)Menu菜单的样式
WPF 修改(优化)Menu菜单的样式
1个月前 274
WPF 使用装饰器给控件添加遮罩层-WPF中文社区
WPF 使用装饰器给控件添加遮罩层
WPF 使用装饰器给控件添加遮罩层
1个月前 239
WPF 自定义DialogWindow弹出方式-WPF中文社区
WPF 自定义DialogWindow弹出方式
WPF 自定义DialogWindow弹出方式
1个月前 225
WPF 制作侧边栏菜单之MenuItem-WPF中文社区
WPF 制作侧边栏菜单之MenuItem
WPF 制作侧边栏菜单之MenuItem
1个月前 210
WPF 修改CheckBox样式-WPF中文社区
WPF 修改CheckBox样式
WPF 修改CheckBox样式
1个月前 201
相关推荐
WPF 制作侧边菜单 SideMenu-WPF中文社区
WPF 制作侧边菜单 SideMenu
WPF 制作侧边菜单 SideMenu
1个月前 563
WPF 修改(优化)Menu菜单的样式-WPF中文社区
WPF 修改(优化)Menu菜单的样式
WPF 修改(优化)Menu菜单的样式
1个月前 274
WPF 使用装饰器给控件添加遮罩层-WPF中文社区
WPF 使用装饰器给控件添加遮罩层
WPF 使用装饰器给控件添加遮罩层
1个月前 239
WPF 自定义DialogWindow弹出方式-WPF中文社区
WPF 自定义DialogWindow弹出方式
WPF 自定义DialogWindow弹出方式
1个月前 225
WPF 制作侧边栏菜单之MenuItem-WPF中文社区
WPF 制作侧边栏菜单之MenuItem
WPF 制作侧边栏菜单之MenuItem
1个月前 210
WPF 修改CheckBox样式-WPF中文社区
WPF 修改CheckBox样式
WPF 修改CheckBox样式
1个月前 201
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
表情
[aoman][baiyan][bishi][bizui][cahan][ciya][dabing][daku][deyi][doge][fadai][fanu][fendou][ganga][guzhang][haixiu][hanxiao][zuohengheng][zhuakuang][zhouma][zhemo][zhayanjian][zaijian][yun][youhengheng][yiwen][yinxian][xu][xieyanxiao][xiaoku][xiaojiujie][xia][wunai][wozuimei][weixiao][weiqu][tuosai][tu][touxiao][tiaopi][shui][se][saorao][qiudale][qinqin][qiaoda][piezui][penxue][nanguo][liulei][liuhan][lenghan][leiben][kun][kuaikule][ku][koubi][kelian][keai][jingya][jingxi][jingkong][jie][huaixiao][haqian][aini][OK][qiang][quantou][shengli][woshou][gouyin][baoquan][aixin][bangbangtang][xiaoyanger][xigua][hexie][pijiu][lanqiu][juhua][hecai][haobang][caidao][baojin][chi][dan][kulou][shuai][shouqiang][yangtuo][youling]

    暂无评论内容

每日一言
近期评论
gxy01的头像-WPF中文社区

gxy011个月前2

沙发是我的了
标签云
wpf