WPF自定義控件 使用阿裡巴巴圖示

上一篇介紹了 WPF自定義控件 按鈕 的初步使用，在進一步介紹WPF自定義控件 按鈕之前，先介紹一下如何在WPF項目中使用阿裡巴巴圖示，友善以後做示例。

1.還是在上一篇項目基礎上，在WPF自定義控件類庫項目 Controls 檔案夾下，建立一個資源字典（WPF）檔案，取名： MyIcon.xaml ，并且添加如下代碼:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:WpfCustomControlLibrary.Controls">
    
    <Style x:Key="MyIcon" TargetType="TextBlock">
        <Setter Property="FontFamily" Value="/WpfCustomControlLibrary;component/Resources/#iconfont"></Setter>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="TextAlignment" Value="Center"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="FontSize" Value="20"/>
    </Style>
    
</ResourceDictionary>
           

2.在項目下建立一個 Resources 檔案夾，去阿裡巴巴圖示網站  http://www.iconfont.cn/ 下載下傳 ttf 檔案，放到該檔案夾下，注意将此ttf檔案的生成操作設定成 Resource ；

3.在Generic.xaml檔案中，添加對MyIcon.xaml的引用：

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

    <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/WpfCustomControlLibrary;component/Controls/MyButton1.xaml"/>
            <ResourceDictionary Source="pack://application:,,,/WpfCustomControlLibrary;component/Controls/MyIcon.xaml" />
    </ResourceDictionary.MergedDictionaries>


</ResourceDictionary>
           

4.在測試項目的 app.xaml 檔案中加入MyIcon.xaml的引用：

<Application x:Class="WpfApplication1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfApplication1"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/WpfCustomControlLibrary;component/Controls/MyIcon.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

</Application>
           

5.在測試項目中加入一個textblock用以測試：

<Window x:Class="WpfApplication1.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        xmlns:controls="clr-namespace:WpfCustomControlLibrary.Controls;assembly=WpfCustomControlLibrary"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Grid.Row="0" Grid.Column="0" Content="Default Button" Width="100" Height="50"></Button>
        <controls:MyButton1  Grid.Row="0" Grid.Column="1" Width="80" Height="80" >
            <controls:MyButton1.Content>
                <TextBlock Text="MyButton1" Margin="10,30,10,10"></TextBlock>
            </controls:MyButton1.Content>
        </controls:MyButton1>

        <TextBlock Grid.Row="1" Grid.Column="0" Text="&#xe6f0;" FontSize="50" Foreground="Green" Style="{StaticResource MyIcon}" ></TextBlock>

    </Grid>
</Window>
           

最終效果就是顯示一個微信圖示：

将這個icon圖示和上一篇介紹的 MyButton1 結合起來使用，可以達到 圖示按鈕的效果，如：

1）将 MyButton1.xaml 改成：

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

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="pack://application:,,,/WpfCustomControlLibrary;component/Controls/MyIcon.xaml" />
    </ResourceDictionary.MergedDictionaries>


    <ControlTemplate x:Key="MyButton1_Template" TargetType="{x:Type local:MyButton1}">
        <Border x:Name="border" Background="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path= Background}" 
                                    Height="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Height}" 
                                    CornerRadius="2" 
                                    BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
                                    Width="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Width}">
            <!--Icon/Text-->
            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" 
                        Margin="{TemplateBinding Padding}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
                <TextBlock x:Name="icon"  Margin="3" 
                           RenderTransformOrigin="0.5,0.5" Style="{StaticResource MyIcon}"
                           Text="&#xe6f0;"
                           FontSize="30" 
                           Foreground="Green">
                    <TextBlock.RenderTransform>
                        <RotateTransform x:Name="transIcon" Angle="0"/>
                    </TextBlock.RenderTransform>
                </TextBlock>

                <TextBlock VerticalAlignment="Center"  x:Name="txt" 
                           TextDecorations="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=ContentDecorations}" 
                                               Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Content}" />
            </StackPanel>
        </Border>
    </ControlTemplate>

    <Style TargetType="{x:Type local:MyButton1}">
        <Setter Property="Template" Value="{StaticResource MyButton1_Template}"/>
    </Style>
    
</ResourceDictionary>
           

2）測試代碼改成：

<Window x:Class="WpfApplication1.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        xmlns:controls="clr-namespace:WpfCustomControlLibrary.Controls;assembly=WpfCustomControlLibrary"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Grid.Row="0" Grid.Column="0" Content="Default Button" Width="100" Height="50"></Button>
        <controls:MyButton1  Grid.Row="0" Grid.Column="1" Width="100" Height="50" Content="MyButton1" Background="Orange" />
        <TextBlock Grid.Row="1" Grid.Column="0" Text="&#xe6f0;" FontSize="50" Foreground="Green" Style="{StaticResource MyIcon}" ></TextBlock>

    </Grid>
</Window>
           

那麼 按鈕将變成圖示+文字的組合，如圖：