背水一战 Windows 10 (45) - 控件（图标类）: IconElement, SymbolIcon, FontIcon, PathIcon, BitmapIcon

原文:背水一战 Windows 10 (45) - 控件（图标类）: IconElement, SymbolIcon, FontIcon, PathIcon, BitmapIcon[源码下载]

[align=center]背水一战 Windows 10 (45) - 控件（图标类）: IconElement, SymbolIcon, FontIcon, PathIcon, BitmapIcon[/align]

作者：webabcd

介绍
背水一战 Windows 10 之 控件（图标类）

IconElement

SymbolIcon

FontIcon

PathIcon

BitmapIcon

示例
1、IconElement(基类) 的示例
Controls/IconControl/IconElementDemo.xaml

<Page
x:Class="Windows10.Controls.IconControl.IconElementDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.IconControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="Transparent">
<StackPanel Margin="10 0 10 10">

<!--
SymbolIcon - 符号图标，继承自 IconElement，下面介绍 IconElement 的相关知识点
Foreground - 图标的颜色

注：IconElement 的派生类有: SymbolIcon, FontIcon, PathIcon, BitmapIcon
-->

<SymbolIcon Foreground="Red" Symbol="Accept" HorizontalAlignment="Left" Margin="5" />

</StackPanel>
</Grid>
</Page>

Controls/IconControl/IconElementDemo.xaml.cs

/*
* IconElement(基类) - 图标元素基类（继承自 FrameworkElement, 请参见 /Controls/BaseControl/FrameworkElementDemo/）
*/

using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.IconControl
{
public sealed partial class IconElementDemo : Page
{
public IconElementDemo()
{
this.InitializeComponent();
}
}
}

2、SymbolIcon 的示例
Controls/IconControl/SymbolIconDemo.xaml

<Page
x:Class="Windows10.Controls.IconControl.SymbolIconDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.IconControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="Transparent">
<StackPanel Margin="10 0 10 10">

<!--
SymbolIcon - 符号图标
Symbol - 显示图标的命名常量（枚举值）

注：关于 Symbol 枚举的各种值的显示效果请参见 https://msdn.microsoft.com/zh-cn/library/windows/apps/windows.ui.xaml.controls.symbol.aspx 或者本目录下的“Symbol 枚举.mht”文件
-->

<SymbolIcon Symbol="Accept" HorizontalAlignment="Left" Margin="5" />

<SymbolIcon Symbol="Find" HorizontalAlignment="Left" Margin="5" />

<SymbolIcon Symbol="Favorite" HorizontalAlignment="Left" Margin="5" />

</StackPanel>
</Grid>
</Page>

Controls/IconControl/SymbolIconDemo.xaml.cs

/*
* SymbolIcon - 符号图标（继承自 IconElement, 请参见 /Controls/IconControl/IconElementDemo.xaml）
*/

using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.IconControl
{
public sealed partial class SymbolIconDemo : Page
{
public SymbolIconDemo()
{
this.InitializeComponent();
}
}
}

3、FontIcon 的示例
Controls/IconControl/FontIconDemo.xaml

<Page
x:Class="Windows10.Controls.IconControl.FontIconDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.IconControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="Transparent">
<StackPanel Margin="10 0 10 10">

<!--
FontIcon - 字体图标
FontFamily - 首选字体，多个用“,”分隔，找不到第 1 个就用第 2 个，找不到第 2 个就用第 3 个，以此类推
Glyph - 字符代码
FontSize, FontStyle, FontWeight - 不解释

注：
1、在 xaml 中指定 Glyph 的 Unicode 编码时，不能使用 \u 来指定（code-behind 中可以），而是应该通过 � 的方式来指定
2、在“运行”中输入“字符映射表”，打开后可在其中找到不同字体的不同字符的 Unicode 编码
3、除了通过“字符映射表”查找字符的编码外，如果想要查看“Segoe MDL2 Assets”中的各种编码的显示效果请参见 https://docs.microsoft.com/zh-cn/windows/uwp/style/segoe-ui-symbol-font 或者本目录下的“Segoe MDL2 Assets.mht”文件
4、对于 FontIcon 来说，其 FontFamily 的默认值为 Segoe MDL2 Assets
5、支持自定义字体
-->

<FontIcon Name="fontIcon1" FontFamily="Segoe UI Emoji" Glyph="✓" HorizontalAlignment="Left" Margin="5" />

<FontIcon Name="fontIcon2" FontFamily="Segoe MDL2 Assets" Glyph="" HorizontalAlignment="Left" Margin="5" />

<!--
在 code-behind 中指定 Glyph
FontIcon 的 FontFamily 的默认值为 Segoe MDL2 Assets
-->
<FontIcon Name="fontIcon3" HorizontalAlignment="Left" Margin="5" />

<!--
演示如何只用自定义字体中的字符（以比较流行的 FontAwesome 为例）
1、将字体文件复制到项目中
2、通过 FontFamily 指定字体文件的路径，在路径后加“#”并在其后写上字体名称（通过“Windows 字体查看器”可以查看字体文件的字体名称）
3、关于 FontAwesome 的各种图标的效果及对应的编码请参见：http://fontawesome.io/cheatsheet/
-->
<FontIcon Name="fontIcon4" FontFamily="/Controls/IconControl/FontAwesome.otf#FontAwesome" Glyph="" HorizontalAlignment="Left" Margin="5" />

<!--
用 TextBlock 或 TextBox 之类的，也是可以显示字体图标的
-->
<TextBlock Name="textBlock" FontFamily="Segoe UI Emoji" Text="✓" HorizontalAlignment="Left" Margin="5" />
<TextBox Name="textBox" FontFamily="/Controls/IconControl/FontAwesome.otf#FontAwesome" Text="" HorizontalAlignment="Left" Margin="5" />

</StackPanel>
</Grid>
</Page>

Controls/IconControl/FontIconDemo.xaml.cs

/*
* FontIcon - 字体图标（继承自 IconElement, 请参见 /Controls/IconControl/IconElementDemo.xaml）
*/

using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.IconControl
{
public sealed partial class FontIconDemo : Page
{
public FontIconDemo()
{
this.InitializeComponent();

this.Loaded += FontIconDemo_Loaded;
}

private void FontIconDemo_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
// 在 code-behind 中可以通过 \u 指定 Unicode 编码
fontIcon3.Glyph = "\uEC52";
}
}
}

4、PathIcon 的示例
Controls/IconControl/PathIconDemo.xaml

<Page
x:Class="Windows10.Controls.IconControl.PathIconDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.IconControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="Transparent">
<StackPanel Margin="10 0 10 10">

<!--
PathIcon - 路径图标
Data - 路径的 Geometry 数据（关于 Geometry 请参见：/Drawing/Path.xaml）
-->

<PathIcon Margin="5">
<PathIcon.Data>
<EllipseGeometry Center="50,25" RadiusX="50" RadiusY="25" />
</PathIcon.Data>
</PathIcon>

<PathIcon Margin="5" Data="F1 M 20,20L 24,10L 24,24L 5,24" />

</StackPanel>
</Grid>
</Page>

Controls/IconControl/PathIconDemo.xaml.cs

/*
* PathIcon - 路径图标（继承自 IconElement, 请参见 /Controls/IconControl/IconElementDemo.xaml）
*/

using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.IconControl
{
public sealed partial class PathIconDemo : Page
{
public PathIconDemo()
{
this.InitializeComponent();
}
}
}

5、BitmapIcon 的示例
Controls/IconControl/BitmapIconDemo.xaml

<Page
x:Class="Windows10.Controls.IconControl.BitmapIconDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.IconControl"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="Transparent">
<StackPanel Margin="10 0 10 10">

<!--
BitmapIcon - 位图图标
UriSource - 图片地址
-->

<BitmapIcon UriSource="/Assets/StoreLogo.png" HorizontalAlignment="Left" Width="40" Height="40" Margin="5" />

</StackPanel>
</Grid>
</Page>

Controls/IconControl/BitmapIconDemo.xaml.cs

/*
* BitmapIcon - 位图图标（继承自 IconElement, 请参见 /Controls/IconControl/IconElementDemo.xaml）
*/

using Windows.UI.Xaml.Controls;

namespace Windows10.Controls.IconControl
{
public sealed partial class BitmapIconDemo : Page
{
public BitmapIconDemo()
{
this.InitializeComponent();
}
}
}

OK
[源码下载]