首页 > 代码库 > 背水一战 Windows 10 (45) - 控件(图标类): IconElement, SymbolIcon, FontIcon, PathIcon, BitmapIcon
背水一战 Windows 10 (45) - 控件(图标类): IconElement, SymbolIcon, FontIcon, PathIcon, BitmapIcon
[源码下载]
背水一战 Windows 10 (45) - 控件(图标类): IconElement, SymbolIcon, FontIcon, PathIcon, BitmapIcon
作者: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
[源码下载]
背水一战 Windows 10 (45) - 控件(图标类): IconElement, SymbolIcon, FontIcon, PathIcon, BitmapIcon
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。