首页 > 代码库 > 控件 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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。