WPF界面设计-更改按钮样式 自定义字体图标

时间:2024-07-10 10:00:38

一、下载图标文件 


iconfont-阿里巴巴矢量图标库

二、xaml界面代码编辑

文件结构

           对应的图标代码

Fonts/#iconfont   对应文件位置

<Window.Resources>
    <ControlTemplate TargetType="Button" x:Key="CloseButtonTemplate">
        <Grid Background="Transparent" Name="back">
            <TextBlock Text="&#xe653;" FontFamily="Fonts/#iconfont" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="14"/>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="red" TargetName="back"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Window.Resources>
<Grid ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="30" />
        <RowDefinition Height="30"/>
        <RowDefinition Height="50"/>
    </Grid.RowDefinitions>

    <Button HorizontalAlignment="Right" Content="X" Margin="0,0,0,0" Width="60" Height="30" BorderThickness="0" 
    Template="{StaticResource CloseButtonTemplate}"/>
    
</Grid>