背水一戰 Windows 10 (6) - 控件 UI: 字體的自動繼承的特性, Style, ControlTemplate

[源碼下載]

背水一戰 Windows 10 (6) - 控件 UI: 字體的自動繼承的特性, Style, ControlTemplate

作者：webabcd


介紹
背水一戰 Windows 10 之 控件 UI

• 字體的自動繼承的特性
• Style 樣式
• ControlTemplate 控件模板

示例
1、演示字體的自動繼承的特性
Controls/UI/FontInherit.xaml

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

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

            <!--
                本例演示字體的自動繼承的特性
                Font 相關的設置來自 Windows.UI.Xaml.Controls.Control
            -->

            <!--
                繼承了 Page 的關於 Font 的設置
            -->
            <TextBlock Text="FontSize = 100" />

            <UserControl FontSize="50">
                <!--
                    繼承了 UserControl 的關於 Font 的設置
                -->
                <TextBlock Text="FontSize = 50" />
            </UserControl>

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

2、演示“Style”相關知識點
Controls/UI/Style.xaml

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

    <Grid Name="grid" Background="Transparent">

        <!--
            注：在 Grid.Resources 指定的資源（支持 ResourceDictionary 方式），其作用域僅在 Grid 之內，全局資源需要在 App.xaml 中配置
        -->
        <Grid.Resources>

            <!--
                Style - 樣式
                    x:Key - 標識（不指定此值，則樣式會應用於所有 TargetType 所指定的類型）
                    TargetType - 目標對象類型
                    BasedOn - 指定當前樣式的父樣式（此樣式會繼承指定的父樣式）
                    Setter - 屬性設置器
                        Property - 需要設置的屬性名稱
                        Value - 需要設置的屬性值
            -->

            <!--
                自定義一個基礎樣式
            -->
            <Style x:Key="TextBoxStyleBase" TargetType="TextBox">
                <Setter Property="Foreground" Value="Red"/>
            </Style>

            <!--
                這是自定義了全局樣式，但是其他的自定義樣式並不會自動繼承這個自定義全局樣式
                所以，此處用 BasedOn 繼承基礎樣式，然后其他自定義樣式也繼承基礎樣式就好（這就相當於繼承了這個自定義全局樣式）
            -->
            <Style TargetType="TextBox" BasedOn="{StaticResource TextBoxStyleBase}">

            </Style>

            <!--
                不會自動繼承上面的自定義全局樣式
            -->
            <Style x:Key="TextBoxStyleBig1" TargetType="TextBox">
                <Setter Property="FontSize" Value="24"/>
                <Setter Property="Height" Value="60"/>
            </Style>

            <!--
                繼承了基礎樣式（相當於繼承了上面的自定義全局樣式）
            -->
            <Style x:Key="TextBoxStyleBig2" TargetType="TextBox" BasedOn="{StaticResource TextBoxStyleBase}">
                <Setter Property="FontSize" Value="24"/>
                <Setter Property="Height" Value="60"/>
            </Style>
            
        </Grid.Resources>


        <StackPanel Margin="10 0 10 10">

            <!--默認使用自定義全局樣式-->
            <TextBox Name="textBox1" Text="我是 TextBox" Margin="5" />

            <!--指定樣式資源-->
            <TextBox Name="textBox2" Text="我是 TextBox" Margin="5" Style="{StaticResource TextBoxStyleBig1}" />

            <!--動態改變 FrameworkElement 的樣式-->
            <Button Name="btnChangeStyle" Margin="5" Content="改變樣式" Click="btnChangeStyle_Click" />

            <!--內聯樣式-->
            <TextBox Name="textBox3" Text="我是 TextBox" Margin="5">
                <ToolTipService.ToolTip>
                    <ToolTip Name="toolTip" Content="ToolTipService.ToolTip" Placement="Bottom">
                        <ToolTip.Style>
                            <Style TargetType="ToolTip">
                                <Setter Property="Foreground" Value="Blue" />
                            </Style>
                        </ToolTip.Style>
                    </ToolTip>
                </ToolTipService.ToolTip>
                <TextBox.Style>
                    <Style TargetType="TextBox">
                        <Setter Property="Background" Value="Green"/>
                    </Style>
                </TextBox.Style>
            </TextBox>

            <!--在 c# 中定義樣式-->
            <TextBox Name="textBox4" Text="我是 TextBox" Margin="5" />

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

Controls/UI/Style.xaml.cs

/*
 * 演示“Style”相關知識點
 *
 * 注：
 * 1、Style 屬性來自 Windows.UI.Xaml.FrameworkElement
 */

using System;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

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

            this.Loaded += Style_Loaded;
        }

        // 在 c# 中定義樣式
        private void Style_Loaded(object sender, RoutedEventArgs e)
        {
            Windows.UI.Xaml.Style style = new Windows.UI.Xaml.Style();
            style.TargetType = typeof(TextBox);

            Setter setter1 = new Setter();
            setter1.Property = TextBox.BackgroundProperty;
            setter1.Value = Colors.Blue;

            style.Setters.Add(setter1);

            textBox4.Style = style;
        }

        // 改變樣式
        private void btnChangeStyle_Click(object sender, RoutedEventArgs e)
        {
            // 獲取 Application 中的資源
            // (Windows.UI.Xaml.Style)Application.Current.Resources["myStyle"];

            // 獲取關聯 xaml 內的資源
            if (textBox2.Style == (Windows.UI.Xaml.Style)grid.Resources["TextBoxStyleBig1"])
            {
                // 指定樣式
                textBox2.Style = (Windows.UI.Xaml.Style)grid.Resources["TextBoxStyleBig2"];
            }
            else
            {
                textBox2.Style = (Windows.UI.Xaml.Style)grid.Resources["TextBoxStyleBig1"];
            }
        }
    }
}

3、演示“ControlTemplate”相關知識點
Controls/UI/ControlTemplate.xaml

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

    <Grid Name="grid" Background="Transparent">

        <!--
            注：在 Grid.Resources 指定的資源（支持 ResourceDictionary 方式），其作用域僅在 Grid 之內，全局資源需要在 App.xaml 中配置
        -->
        <Grid.Resources>

            <!--
                ControlTemplate - 控件模板
                    x:Key - 標識
                    TargetType - 目標對象類型
                ContentPresenter - 相當於一個容器，用於顯示 ContentControl 的 Content 屬性指定的內容
                TemplateBinding - 模板綁定
            -->

            <ControlTemplate x:Key="ButtonControlTemplate1" TargetType="Button">
                <Border BorderBrush="Red" BorderThickness="5">
                    <!--
                        TemplateBinding 是一個簡單版的 Binding，用於在模板中綁定控件的某個屬性，其是 OneWay 的
                        那如果想在控件模板中使用雙向綁定該怎么做呢，參見“綁定”部分
                    -->
                    <Grid Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Right" Foreground="Red" />
                    </Grid>
                </Border>
            </ControlTemplate>

            <ControlTemplate x:Key="ButtonControlTemplate2" TargetType="Button">
                <Border BorderBrush="Purple" BorderThickness="5">
                    <Grid Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Right" Foreground="Blue" />
                    </Grid>
                </Border>
            </ControlTemplate>

            <!--在 Style 中設置 ControlTemplate-->
            <Style x:Key="ButtonStyle" TargetType="Button">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Border BorderBrush="Red" BorderThickness="5">
                                <Grid Background="{TemplateBinding Background}">
                                    <ContentPresenter HorizontalAlignment="Right" Foreground="Green" />
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>

        <StackPanel Margin="10 0 10 10">

            <!--指定控件模板-->
            <Button Name="button1" Content="我是 Button" Width="300" Margin="5" Background="Yellow" Template="{StaticResource ButtonControlTemplate1}" />

            <!--動態改變 Control 的控件模板-->
            <Button Name="btnChangeControlTemplate" Content="改變控件模板" Margin="5" Click="btnChangeControlTemplate_Click" />

            <!--在 Style 中設置 ControlTemplate-->
            <Button Content="我是 Button" Width="300" Margin="5" Background="Yellow" Style="{StaticResource ButtonStyle}" />

            <!--內聯控件模板-->
            <Button Content="我是 Button" Width="300" Margin="5">
                <Button.Template>
                    <ControlTemplate>
                        <Border BorderBrush="Red" BorderThickness="5">
                            <Grid Background="Black">
                                <ContentPresenter HorizontalAlignment="Right" Foreground="Orange" />
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Button.Template>
            </Button>

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

Controls/UI/ControlTemplate.xaml.cs

/*
 * 演示“ControlTemplate”相關知識點
 *
 * 注：
 * 1、控件模板是 xaml 語言使用的一種方案，其無法在 c# 中定義
 * 2、Template 屬性來自 Windows.UI.Xaml.Controls.Control
 */

using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;

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

        private void btnChangeControlTemplate_Click(object sender, RoutedEventArgs e)
        {
            // 獲取 Application 中的資源
            // (Windows.UI.Xaml.Style)Application.Current.Resources["MyControlTemplate"];

            // 獲取關聯 xaml 內的資源
            if (button1.Template == (Windows.UI.Xaml.Controls.ControlTemplate)grid.Resources["ButtonControlTemplate1"])
            {
                // 指定控件模板
                button1.Template = (Windows.UI.Xaml.Controls.ControlTemplate)grid.Resources["ButtonControlTemplate2"];
            }
            else
            {
                button1.Template = (Windows.UI.Xaml.Controls.ControlTemplate)grid.Resources["ButtonControlTemplate1"];
            }
        }
    }
}

OK
[源碼下載]