备案控制台
开发者社区 开发与运维 文章 正文

WPF自定义控件 使用阿里巴巴图标

2018-08-30 1143
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:WPF自定义控件 使用阿里巴巴图标 上一篇介绍了 WPF自定义控件 按钮 的初步使用，在进一步介绍WPF自定义控件 按钮之前，先介绍一下如何在WPF项目中使用阿里巴巴图标，方便以后做示例。
原文: 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>

那么 按钮将变成图标+文字的组合，如图：





文章标签：
C#
关键词：
wpf自定义控件
wpf阿里巴巴
wpf图标
杰克.陈
目录
相关文章
JackWang1987
|
C#
WPF自定义控件05：ToggleButton
本文重点介绍WPF中如何实现自定义ToggleButton控件，它是一个开关控件，通过单击来进行状态的快速切换。
JackWang1987
4376 0
WPF自定义控件05：ToggleButton
老码识途
|
7月前
|
人工智能 C#
WPF自定义控件库之Window窗口
本文以自定义窗口为例，简述WPF开发中如何通过自定义控件来扩展功能和样式，仅供学习分享使用，如有不足之处，还请指正。
老码识途
169 5
步、步、为营
|
XML C# 数据格式
WPF中用户控件和自定义控件
无论是在WPF中还是WinForm中，都有用户控件（UserControl）和自定义控件（CustomControl），这两种控件都是对已有控件的封装，实现功能重用。但是两者还是有一些区别，本文对这两种控件进行讲解。
步、步、为营
288 0
杰克.陈
|
C# 索引
WPF实用指南二：移除窗体的图标
原文:WPF实用指南二：移除窗体的图标 WPF没有提供任何功能来移除窗体上的icon图标。一般的做法是设置一个空白的图标，如下图1: 这种做法在窗体边框与标题之间仍然会保留一片空白。
杰克.陈
1150 0
JackWang1987
|
C# 容器
WPF自定义控件10：FlatListView
在不少的应用程序中，有时候需要使用ListView控件来显示一组集合数据，这样可以从一组数据中进行选择，让数据更加的规范，便于统计和分析。本文将介绍一下自定义的列表控件FlatListView，它与FlatCheckBox实现过程非常类似，它是继承自ListView，但使用自定义的UI样式来美化界面。
JackWang1987
524 0
WPF自定义控件10：FlatListView
JackWang1987
|
C#
WPF自定义控件09：FlatWaveButton
按钮在很多应用程序中都是必不可少的控件，如果给按钮控件添加一些动画效果，比如单击它后会显示一个水波纹扩散的动画效果，那么感觉上更加的高级。本文将介绍一下自定义水波纹按钮控件FlatWaveButton，它是一个UserControl（FlatButton）控件，自身携带UI样式和后台逻辑。
JackWang1987
572 0
WPF自定义控件09：FlatWaveButton
JackWang1987
|
Web App开发 C#
WPF自定义控件08：FlatRoundImage
在不少的应用程序中，用户中心的个人页面经常需要显示头像，这个当前主流的做法就是用户上传一个图片，系统进行截取并显示为一个圆形的轮廓，即圆形的照片。本文将介绍一下自定义的图片控件FlatRoundImage，它是一个UserControl控件，自身携带UI样式和后台逻辑。
JackWang1987
616 0
WPF自定义控件08：FlatRoundImage
JackWang1987
|
C#
WPF自定义控件07：FlatTextBox
本文将介绍一下自定义的文本框控件FlatTextBox，它与FlatCheckBox实现过程非常类似，它是继承自TextBox，但使用自定义的UI样式来美化界面，并添加了特有的一些依赖属性。
JackWang1987
472 0
WPF自定义控件07：FlatTextBox
JackWang1987
|
数据可视化 前端开发 C#
WPF自定义控件的三种方式
某些场景下，我们确实需要创建新的控件。此时，理解 WPF不同控件的创建方法就显得非常重要。 WPF 提供3个用于创建控件的方法，每个方法都提供不同的灵活度。
JackWang1987
799 1
WPF自定义控件的三种方式
JackWang1987
|
C#
WPF自定义控件06：FlatComboBox
在不少的应用程序中，经常需要使用下拉框（ComboBox）控件来从类别字段中选择，这样可以限定值的范围，让数据更加的规范，便于统计和分析。本文将介绍一下自定义的下拉框控件FlatComboBox，它与FlatCheckBox实现过程非常类似，它是继承自ComboBox，但使用自定义的UI样式来美化界面。下面将详细介绍具体的实现细节。
JackWang1987
761 0
WPF自定义控件06：FlatComboBox