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