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

posted @ 2016-04-14 09:39 webabcd 阅读(1577) 评论(4) 编辑收藏举报

刷新页面返回顶部

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

公告