首页 > 代码库 > 控件 UI: 字体的自动继承的特性, Style, ControlTemplate

控件 UI: 字体的自动继承的特性, Style, ControlTemplate

字体的自动继承的特性

  • 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="http://www.mamicode.com/Red"/>            </Style>            <!--                这是自定义了全局样式,但是其他的自定义样式并不会自动继承这个自定义全局样式                所以,此处用 BasedOn 继承基础样式,然后其他自定义样式也继承基础样式就好(这就相当于继承了这个自定义全局样式)            -->            <Style TargetType="TextBox" BasedOn="{StaticResource TextBoxStyleBase}">            </Style>            <!--                不会自动继承上面的自定义全局样式            -->            <Style x:Key="TextBoxStyleBig1" TargetType="TextBox">                <Setter Property="FontSize" Value="http://www.mamicode.com/24"/>                <Setter Property="Height" Value="http://www.mamicode.com/60"/>            </Style>            <!--                继承了基础样式(相当于继承了上面的自定义全局样式)            -->            <Style x:Key="TextBoxStyleBig2" TargetType="TextBox" BasedOn="{StaticResource TextBoxStyleBase}">                <Setter Property="FontSize" Value="http://www.mamicode.com/24"/>                <Setter Property="Height" Value="http://www.mamicode.com/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="http://www.mamicode.com/Blue" />                            </Style>                        </ToolTip.Style>                    </ToolTip>                </ToolTipService.ToolTip>                <TextBox.Style>                    <Style TargetType="TextBox">                        <Setter Property="Background" Value="http://www.mamicode.com/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 = http://www.mamicode.com/Colors.Blue;"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"];            }        }    }}

控件 UI: 字体的自动继承的特性, Style, ControlTemplate