World War I Windows 10 (45) and World War I 45

World War I Windows 10 (45) and World War I 45

[Download source code]

Backwater world war I Windows 10 (45)-Controls (icon class): IconElement, SymbolIcon, FontIcon, PathIcon, BitmapIcon

Author: webabcd


Introduction
Controls for Windows 10 (icons)

• IconElement
• SymbolIcon
• FontIcon
• PathIcon
• BitmapIcon

Example
1. IconElement (base class) Example
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"> <! -- SymbolIcon-symbol icon, inherited from IconElement. The following describes the knowledge points of IconElement: Foreground-color of the icon. Note: The Derived classes of IconElement include SymbolIcon, FontIcon, and PathIcon, bitmapIcon --> <SymbolIcon Foreground = "Red" Symbol = "Accept" HorizontalAlignment = "Left" Margin = "5"/> </StackPanel> </Grid> </Page>

Controls/IconControl/IconElementDemo. xaml. cs

/** IconElement (base class)-Icon element base class (inherited from FrameworkElement, see/Controls/BaseControl/FrameworkElementDemo/) */using Windows. UI. xaml. controls; namespace Windows10.Controls. iconControl {public sealed partial class IconElementDemo: Page {public IconElementDemo () {this. initializeComponent ();}}}

2. SymbolIcon example
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 icon Symbol-name constant (enumeration value) of the display icon NOTE: For the Display Effect of the values of the Symbol enumeration, see https://msdn.microsoft.com/zh-cn/library/windows/apps/windows.ui.xaml.controls.symbol.aspx Or the "Symbol enumeration" in this directory. mht file --> <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-symbol icon (inherited from IconElement, see/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 example
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-preferred font, separated by commas (,). If no 1st characters are found, 2nd are used. If no 2nd characters are found, 3rd are used, similarly, Glyph-character code FontSize, FontStyle, FontWeight-not interpreted Note: 1. When the Glyph Unicode encoding is specified in xaml, \ u cannot be used to specify (code-behind is acceptable). Instead, you should use the & # x0000; Method to specify 2. Enter "character ing table" in "run ", after opening, you can find the Unicode encoding of different characters in different fonts. 3. In addition to searching for character encoding through the "character ing table, if you want to view the display effects of various encodings in "Segoe MDL2 Assets", see https://docs.microsoft.com/zh-cn/windows/uwp/style/segoe-ui-symbol-font Or the "Segoe MDL2 Assets. mht file 4. For FontIcon, the default value of FontFamily is Segoe MDL2 Assets 5. Custom fonts are supported --> <FontIcon Name = "fontIcon1" FontFamily = "Segoe UI Emoji" Glyph = "& # x2713; "HorizontalAlignment =" Left "Margin =" 5 "/> <FontIcon Name =" fontIcon2 "FontFamily =" Segoe MDL2 Assets "Glyph =" & # xEC52; "HorizontalAlignment =" Left "Margin =" 5 "/> <! -- Specify the default value of FontFamily of Glyph FontIcon in code-behind as Segoe MDL2 Assets --> <FontIcon Name = "fontIcon3" HorizontalAlignment = "Left" Margin = "5"/> <! -- Demonstrate how to use only characters in the Custom font (take the popular FontAwesome for example) 1. Copy the font file to the Project 2. Specify the path of the FontFamily font file, add "#" after the path and write the font name (you can view the font name of the font file through "Windows Font viewer) 3. For the effects and codes of various FontAwesome icons, see: http://fontawesome.io/cheatsheet/ --> <FontIcon Name = "fontIcon4" FontFamily = "/Controls/IconControl/FontAwesome. otf # FontAwesome "Glyph =" & # xf0e7; "HorizontalAlignment =" Left "Margin =" 5 "/> <! -- TextBlock or TextBox can also display font icons --> <TextBlock Name = "textBlock" FontFamily = "Segoe UI Emoji" Text = "& # x2713; "HorizontalAlignment =" Left "Margin =" 5 "/> <TextBox Name =" textBox "FontFamily ="/Controls/IconControl/FontAwesome. otf # FontAwesome "Text =" & # xf0e7; "HorizontalAlignment =" Left "Margin =" 5 "/> </StackPanel> </Grid> </Page>

Controls/IconControl/FontIconDemo. xaml. cs

/** FontIcon-font icon (inherited from IconElement, see/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) {// in code-behind, you can use \ u to specify the Unicode encoding fontIcon3.Glyph = "\ uEC52 ";}}}

4. PathIcon example
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-Path icon Data-Path Geometry Data (for more information about Geometry, see/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-path icon (inherited from IconElement, see/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 example
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-bitmap icon UriSource-image address --> <BitmapIcon UriSource = "/Assets/StoreLogo.png" HorizontalAlignment = "Left" Width = "40" Height = "40" Margin = "5 "/> </StackPanel> </Grid> </Page>

Controls/IconControl/BitmapIconDemo. xaml. cs

/** BitmapIcon-bitmap icon (inherited from IconElement, see/Controls/IconControl/IconElementDemo. xaml) */using Windows. UI. xaml. controls; namespace Windows10.Controls. iconControl {public sealed partial class BitmapIconDemo: Page {public BitmapIconDemo () {this. initializeComponent ();}}}

OK
[Download source code]