WPF 如何将IconFont图标转成Geometry

之前每次使用IconFont图标，都要去下载一个png图片，每次颜色什么的改了，都要重新下载，太苦逼了。

现在好了，终于找到如何方便快速地使用IconFont图标了。

是应该的演示如何从IconFont网站上找到Geometry

先看看效果吧：

如视频中所示，找到图标后，按F12,选中需要的图标，查看页面源码，复制Path中的数据即可。

下面封装一个IconFontButton.加上简单的动画，直接看代码吧：

创建IconFontButton类：

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;namespace WxDemo
{public class IconFontButton:Button{public Geometry Geometry{get { return (Geometry)GetValue(GeometryProperty); }set { SetValue(GeometryProperty, value); }}public static readonly DependencyProperty GeometryProperty =DependencyProperty.Register("Geometry", typeof(Geometry), typeof(IconFontButton), new PropertyMetadata(default(Geometry)));public CornerRadius CornerRadius{get { return (CornerRadius)GetValue(CornerRadiusProperty); }set { SetValue(CornerRadiusProperty, value); }}public static readonly DependencyProperty CornerRadiusProperty =DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(IconFontButton), new PropertyMetadata(default(CornerRadius)));public double IconWidth{get { return (double)GetValue(IconWidthProperty); }set { SetValue(IconWidthProperty, value); }}public static readonly DependencyProperty IconWidthProperty =DependencyProperty.Register("IconWidth", typeof(double), typeof(IconFontButton), new PropertyMetadata(32.0));public double IconHeight{get { return (double)GetValue(IconHeightProperty); }set { SetValue(IconHeightProperty, value); }}public static readonly DependencyProperty IconHeightProperty =DependencyProperty.Register("IconHeight", typeof(double), typeof(IconFontButton), new PropertyMetadata(32.0));}
}

在App.xaml中添加IconFontButton的样式：

<Application x:Class="WxDemo.App"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:WxDemo"StartupUri="IconFontButtonDemo.xaml"><Application.Resources><Style TargetType="local:IconFontButton"><Setter Property="CornerRadius" Value="0"/><Setter Property="Padding" Value="5"/><Setter Property="Background" Value="Transparent"/><Setter Property="Foreground" Value="Gray"/><Setter Property="BorderBrush" Value="Transparent"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="local:IconFontButton"><Border CornerRadius="{TemplateBinding CornerRadius}" Background="{TemplateBinding Background}" BorderThickness="0"><Path x:Name="path" Data="{TemplateBinding Geometry}" Fill="{TemplateBinding Foreground}"Width="{TemplateBinding IconWidth}"Height="{TemplateBinding IconHeight}"SnapsToDevicePixels="True"Stretch="Uniform"RenderTransformOrigin="0.5,0.5"Margin="{TemplateBinding Padding}"><Path.RenderTransform><TransformGroup><ScaleTransform ScaleX="1" ScaleY="1" /></TransformGroup></Path.RenderTransform></Path></Border><ControlTemplate.Triggers><EventTrigger RoutedEvent="UIElement.MouseEnter"><BeginStoryboard ><Storyboard><DoubleAnimation Storyboard.TargetName="path" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" To="1.2" Duration="0:0:0.1" AutoReverse="False" /><DoubleAnimation Storyboard.TargetName="path" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" To="1.2" Duration="0:0:0.1" AutoReverse="False" /></Storyboard></BeginStoryboard></EventTrigger><EventTrigger RoutedEvent="UIElement.MouseLeave"><BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetName="path" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" To="1" Duration="0:0:0.1" AutoReverse="False" /><DoubleAnimation Storyboard.TargetName="path" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" To="1" Duration="0:0:0.1" AutoReverse="False" /></Storyboard></BeginStoryboard></EventTrigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter>
</Style></Application.Resources>
</Application>

创建一个窗体测试我们封装的按钮：

<Window x:Class="WxDemo.IconFontButtonDemo"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:WxDemo"mc:Ignorable="d"Title="IconFontButtonDemo" Height="450" Width="800"><Window.Resources><PathGeometry x:Key="Head" Figures="M510.782777 958.962751C387.376143 958.927959 275.674085 908.807445 194.789916 827.834248 113.94054 746.863099 63.907007 635.005498 63.907007 511.500627c0-123.574457 50.033533-235.465826 130.917702-316.437999 80.886215-80.972173 192.657858-131.059941 316.098261-131.059941 118.024044 0 225.393423 45.855374 305.299311 120.707153 80.432891 75.375711 133.050272 180.131567 140.66674 297.16505 0.035816 0.105401 0.035816 0.24457 0.035816 0.349971l0 0 0 58.551534c0 0.209778 0 0.454348-0.035816 0.700965-7.755638 116.857475-60.305481 221.475184-140.630924 296.745495-79.871095 74.850755-187.205683 120.705106-305.23075 120.739898l0 0L510.782777 958.962751 510.782777 958.962751zM748.511133 826.224588c-0.909719-1.330298-1.888-2.761903-2.933819-4.266164-1.680269-2.449795-3.425006-4.897543-5.033643-7.172353l0-0.032746 0 0-0.140193-0.174985c-5.832845-8.325619-11.704576-16.686031-16.874319-24.836665l0 0c-0.978281-1.257643-13.173021-16.263405-49.264007-28.15627-19.288299-6.367011-45.107337-11.647271-79.20697-13.220093l0 0c-19.531845 0-36.443004-7.345292-48.497551-19.833721-11.984962-12.379958-19.077497-29.729092-19.146059-49.806359l0 0-0.630357-17.943674c-0.174985-0.665149-0.209778-1.39886-0.174985-2.098801 0-0.314155 0.034792-0.593518 0.105401-0.873903l0-19.97289c0-1.469468 0.594541-2.797719 1.572822-3.742231l20.998243-21.021779c0.524956-0.524956 1.154289-0.909719 1.782599-1.188058 7.407714-3.430122 15.792685-8.045233 24.212448-13.187347 8.631588-5.282307 17.259082-11.123338 24.912389-16.929578 0.174985-0.104377 0.315178-0.209778 0.454348-0.279363l2.585895-1.782599c0.067538-0.069585 0.104377-0.106424 0.172939-0.141216l0 0c5.975085-3.812839 13.173021-9.758248 18.97312-15.458063 4.994758-4.898567 8.804527-9.305947 9.608845-11.509125l0.699941-7.519254c0-0.141216 0.032746-0.316202 0.068562-0.490164l0 0c4.470825-23.084765 10.446933-56.977689 14.710027-86.427418 3.214205-21.931498 5.450129-41.378409 5.450129-51.975768 0-48.128137-11.530614-83.770915-34.94079-107.169835-23.373337-23.434735-58.978253-34.977629-107.053178-34.977629-48.77589 0-84.379783 11.192923-107.614973 34.452673-23.199375 23.224957-34.414811 58.865689-34.414811 107.694791 0 10.876722 2.27174 30.359448 5.451152 52.220339 4.26207 29.450752 10.236132 63.168692 14.710027 86.113263 0.069585 0.279363 0.069585 0.560772 0.105401 0.804319l0.663102 6.821359c0.629333 2.308579 4.192485 6.750751 9.118682 11.716856 5.520737 5.561669 12.474103 11.332093 18.974144 15.423271l2.059915 1.331321c0.140193 0.069585 0.279363 0.173962 0.419556 0.278339 8.945743 6.225795 18.832927 12.906961 28.54615 18.853393l0 0 0 0c7.895831 4.860704 15.513322 9.162684 22.11774 12.310374 0.558725 0.245593 1.046842 0.595564 1.466398 1.01512l0.035816 0 21.034059 21.056572c1.01205 1.014096 1.537006 2.37714 1.537006 3.707438l0 0 0 19.901259c0.034792 0.279363 0.068562 0.594541 0.068562 0.873903 0.035816 0.246617 0.035816 0.491187 0 0.734734 0.070608 0.630357 0 1.224898-0.173962 1.818415l-0.62831 17.420765 0.035816 0c0 19.970844-7.02295 37.283138-18.692734 49.665143-11.844769 12.629645-28.405957 20.077268-47.204092 20.077268l-0.068562 0c-0.070608 0-0.105401 0-0.174985 0-98.389868 4.093225-128.402415 39.524179-130.183991 41.694611-2.726088 4.26514-5.41636 8.322549-8.106632 12.238742-2.934842 4.269233-5.833869 8.397251-8.769734 12.522198-0.033769 0.070608-0.105401 0.176009-0.173962 0.279363-1.328251 1.854231-3.109828 4.443196-5.205559 7.486508-0.769526 1.118474-1.64343 2.341325-2.551102 3.671623 33.086559 25.079188 70.193689 45.12064 110.198821 58.902528 39.935548 13.747095 82.771145 21.230534 127.389342 21.230534 44.651966 0 87.487563-7.483438 127.424134-21.230534C678.317445 871.345228 715.424574 851.303776 748.511133 826.224588L748.511133 826.224588zM510.92297 116.608811c-108.941178 0-207.541847 44.210921-278.92257 115.670439C160.618653 303.736723 116.455827 402.442792 116.455827 511.500627c0 54.845119 11.214413 107.030665 31.445176 154.425092 20.230764 47.428196 49.5096 90.064248 85.566818 125.846196 1.642406-2.37714 3.38919-4.930289 5.17179-7.483438 5.345752-7.696286 10.655687-15.389502 15.407921-22.87601l0 0c0.105401-0.172939 36.582173-60.090587 172.495656-65.615417 0.069585 0 0.140193 0 0.209778 0l0-0.035816c5.066389 0 8.769734-1.468444 11.145851-4.126994 2.654456-2.904143 3.983731-7.416923 3.983731-13.045107 0-0.246617 0-0.454348 0.033769-0.630357-0.033769-14.620999-0.033769-18.294668-0.033769-19.064194l0 0 0-0.067538c-0.035816-1.469468-0.140193-2.728134-0.280386-4.024663l-0.034792-0.347924c-6.953366-3.359514-14.394848-7.312546-22.36231-11.927657-8.908904-5.177929-18.481933-11.262508-28.824489-18.502399l0 0c-0.174985-0.070608-52.479235-32.284287-52.968375-69.88465-1.468444-7.590885-21.034059-109.234867-21.034059-147.953703 0-54.984289 12.998035-108.184955 49.963948-145.190777 30.327726-30.360472 76.552513-49.562812 144.580886-49.562812 149.609413 0 194.57758 94.262874 194.57758 194.752566 0 37.740556-19.565615 140.257417-21.069875 147.917888-0.451278 35.398208-49.264007 67.540256-52.68799 69.781296-10.095939 7.622608-19.705807 14.025435-28.755927 19.446911-8.069793 4.826935-15.653515 8.847505-22.779819 12.240789-0.104377 1.047866-0.210801 2.097778-0.210801 3.321652l-0.032746 0c0 0.035816 0 3.603061 0 19.167548 0.032746 0.174985 0.032746 0.350994 0.032746 0.527003l0 0.103354 0 0c0 5.493108 1.257643 9.865695 3.774977 12.766768 2.376117 2.76395 6.079462 4.303003 11.17962 4.338818l0-0.035816 0.106424 0c0.242524 0 0.451278 0.035816 0.663102 0.068562 134.621047 6.158257 170.434717 62.959937 172.005492 65.549925l0 0c4.820796 7.553023 10.203386 15.318894 15.548114 23.082718 1.746784 2.520403 3.459798 5.002944 5.030573 7.311523 36.093033-35.782971 65.373916-78.453816 85.60161-125.846196 20.22974-47.394427 31.446199-99.580996 31.446199-154.425092 0-109.057835-44.164872-207.763904-115.544573-279.221376C718.426955 160.819732 619.829356 116.608811 510.92297 116.608811L510.92297 116.608811zM441.882548 658.893558c0-0.314155 0-0.174985 0-0.067538"/><PathGeometry x:Key="Correct" Figures="M512 960c-247.424 0-448-200.576-448-448 0-247.424 200.576-448 448-448 247.424 0 448 200.576 448 448C960 759.424 759.424 960 512 960L512 960zM512 163.584C319.552 163.584 163.584 319.552 163.584 512c0 192.448 155.968 348.48 348.416 348.48 192.448 0 348.416-156.032 348.416-348.416C860.416 319.68 704.448 163.584 512 163.584L512 163.584zM776 400.576l-316.8 316.8c-9.728 9.728-25.472 9.728-35.2 0l-176-176c-9.728-9.728-9.728-25.472 0-35.2l35.2-35.2c9.728-9.728 25.472-9.728 35.2 0L441.6 594.176l264-264c9.728-9.728 25.472-9.728 35.2 0l35.2 35.2C785.728 375.104 785.728 390.848 776 400.576L776 400.576z"/><PathGeometry x:Key="Heart" Figures="M547.598 739.628c-34.912 30.936-68.616 60.806-98.052 90.073-30.862-30.689-66.083-61.657-102.6-93.707-100.251-88.002-213.86-187.742-213.298-269.704 0.772-110.02 48.978-175.7 129.004-175.7 52.104 0 103.405 28.357 133.862 73.998l53.96 80.844 52.132-82.05c20.317-31.875 52.744-55.604 88.634-66.521l0-65.385c-55.992 11.796-109.007 45.932-142.062 97.952-43.604-65.34-116.393-102.167-186.527-102.167-98.112 0-191.159 71.986-192.302 238.581C69.202 631.01 340.854 788.236 449.608 923.489c103.554-129.738 377.685-294.2 378.394-457.739l-63.407 0C764.071 547.712 644.11 654.04 547.598 739.628L547.598 739.628zM547.598 739.628M828.044 228.992 828.044 102.679l-63.138 0 0 126.313L638.594 228.992l0 63.125 126.313 0L764.907 418.4l63.138 0L828.045 292.117l126.253 0 0-63.125L828.044 228.992zM828.044 228.992"/></Window.Resources><Grid Background="LightBlue"><StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"><local:IconFontButton Geometry="{StaticResource Head}"  IconHeight="50" IconWidth="50"/><local:IconFontButton Foreground="Blue" Geometry="{StaticResource Head}"  IconHeight="50" IconWidth="50"/><local:IconFontButton Foreground="Green" Geometry="{StaticResource Correct}" IconHeight="50" IconWidth="50"/><local:IconFontButton Foreground="Red" Geometry="{StaticResource Heart}" IconHeight="50" IconWidth="50"/></StackPanel></Grid>
</Window>

窗体后台代码无改动。

至此，视频中所演示的效果已经完成啦，是不是很简单哈哈。

截图如下：