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