背水一战 Windows 10 (6) - 控件 UI: 字体的自动继承的特性, Style, ControlTemplate

时间：2021-08-17 13:18:54

[源码下载]

背水一战 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
[源码下载]

相关文章