背水一戰 Windows 10 (45) - 控件（圖標類）: IconElement, SymbolIcon, FontIcon, PathIcon, BitmapIcon

本文轉載自查看原文 2017-04-24 10:04 2324 UWP

作者：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 中可以），而是應該通過 &#x0000; 的方式來指定
                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="&#x2713;" HorizontalAlignment="Left" Margin="5" />

            <FontIcon Name="fontIcon2" FontFamily="Segoe MDL2 Assets" Glyph="&#xEC52;" 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="&#xf0e7;" HorizontalAlignment="Left" Margin="5" />

            

            <!--
                用 TextBlock 或 TextBox 之類的，也是可以顯示字體圖標的
            -->
            <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 - 字體圖標（繼承自 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
[源碼下載]

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。