背水一战 Windows 10 (76) - 控件（控件基类）: Control - 基础知识, 焦点相关, 运行时获取 ControlTemplate 和 D
程序员文章站
2022-06-24 09:31:30
背水一战 Windows 10 之 控件（控件基类 - Control）: 基础知识, 焦点相关, 运行时获取 ControlTemplate 和 DataTemplate 中的元素 ......
[源码下载]
作者：webabcd
介绍
背水一战 Windows 10 之 控件（控件基类 - Control）
示例
1、演示 Control 的基础知识
Controls/BaseControl/ControlDemo/Demo1.xaml
<Page
x:Class="Windows10.Controls.BaseControl.ControlDemo.Demo1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.BaseControl.ControlDemo"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="Orange">
<TextBox Name="textBox" Text="i am webabcd" TextWrapping="Wrap" AcceptsReturn="True" Margin="100" />
</Grid>
</Page>
Controls/BaseControl/ControlDemo/Demo1.xaml.cs
/*
* Control - Control（继承自 UIElement, 请参见 /Controls/BaseControl/FrameworkElementDemo/）
* Background - 背景 Brush
* Foreground - 前景 Brush
* BorderBrush - 边框 Brush
* BorderThickness - 边框 Thickness
* Padding - Padding
* FontSize - 字号大小（单位：像素）
* FontFamily - 首选字体，多个用“,”分隔，找不到第 1 个就用第 2 个，找不到第 2 个就用第 3 个，以此类推
* FontStretch - 字体的拉伸值（FontStretch 枚举），默认值是 Normal（大部分字体都不支持这个属性）
* FontStyle - 字体样式（FontStyle 枚举）
* Normal - 默认值
* Italic - 使用字体自带的斜体
* Oblique - 通过程序让正常字体倾斜（对于自身不带斜体的字体可以使用此值让字体倾斜）
* FontWeight - 字体粗细（FontWeights 实体类），默认值是 Normal
* CharacterSpacing - 用于设置字符间距
* 具体字符间隔像素计算公式如下：字体大小 * CharacterSpacing值 / 1000 = 字符间距像素值
* IsTextScaleFactorEnabled - 是否启用文本自动放大功能（默认值是 true）
* 在“设置”->“轻松使用”中可以调整文本缩放大小，IsTextScaleFactorEnabled 就是用于决定 TextBlock 显示的文本是否跟着这个设置走
* HorizontalContentAlignment - 内容的水平对齐方式
* VerticalContentAlignment - 内容的垂直对齐方式
* IsEnabled - 是否可用
* IsEnabledChanged - IsEnabled 属性的值发生变化时触发的事件
* Template - 控件模板，参见 /Controls/UI/ControlTemplate.xaml
*
*
* 本例用于演示 Control 的基础知识
*/
using System;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Media.Imaging;
using Windows.UI.Text;
namespace Windows10.Controls.BaseControl.ControlDemo
{
public sealed partial class Demo1 : Page
{
public Demo1()
{
this.InitializeComponent();
this.Loaded += Demo1_Loaded;
}
private void Demo1_Loaded(object sender, RoutedEventArgs e)
{
ImageBrush imageBrush = new ImageBrush();
imageBrush.ImageSource = new BitmapImage(new Uri("ms-appx:///Assets/hololens.jpg", UriKind.Absolute));
imageBrush.Stretch = Stretch.Fill;
textBox.Background = imageBrush; // 关于各种类型的 Brush 请参见 /Drawing/Brush.xaml
textBox.Foreground = new SolidColorBrush(Colors.DarkGreen);
textBox.BorderBrush = new SolidColorBrush(Colors.Red);
textBox.BorderThickness = new Thickness(0, 0, 0, 100); // 边框的占用空间是完全是在 Control 内部的
textBox.Padding = new Thickness(20);
textBox.FontSize = 24;
textBox.FontFamily = new FontFamily("微软雅黑,宋体");
textBox.FontStretch = FontStretch.Normal;
textBox.FontStyle = FontStyle.Normal;
textBox.FontWeight = FontWeights.Normal;
textBox.CharacterSpacing = 100;
textBox.IsTextScaleFactorEnabled = true;
// 对于 TextBox 来说 HorizontalContentAlignment 和 VerticalContentAlignment 都是无效的
// 但是对于 Button 来说则可以通过 HorizontalContentAlignment 和 VerticalContentAlignment 来指定按钮上文字的对齐方式
textBox.HorizontalContentAlignment = HorizontalAlignment.Center;// 无效，如果需要设置文字内容的水平对齐方式的话请使用 textBox.TextAlignment
textBox.VerticalContentAlignment = VerticalAlignment.Center; // 无效
textBox.IsEnabledChanged += TextBox_IsEnabledChanged;
textBox.IsEnabled = false; // 注：如果要修 IsEnabled = false 的样式请查看名为 Disabled 的 VisualState
textBox.IsEnabled = true;
}
private void TextBox_IsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
{
textBox.Text += Environment.NewLine;
textBox.Text += $"textBox.IsEnabled, OldValue:{e.OldValue}, NewValue:{e.NewValue}";
}
}
}
2、演示 Control 的焦点相关的知识点
Controls/BaseControl/ControlDemo/Demo2.xaml
<Page
x:Class="Windows10.Controls.BaseControl.ControlDemo.Demo2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.BaseControl.ControlDemo"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="Orange">
<StackPanel Name="stackPanel" Background="Blue" Margin="100">
<!--
用于演示 TabIndex 和 IsTabStop
-->
<TextBox Name="textBox1" TabIndex="5" Margin="5" />
<TextBox Name="textBox2" TabIndex="3" Margin="5" />
<TextBox Name="textBox3" IsTabStop="False" TabIndex="4" Margin="5" />
<TextBox Name="textBox4" TabIndex="1" Margin="5" />
<TextBox Name="textBox5" TabIndex="2" Margin="5" />
<ComboBox Name="cmbTabNavigation" PlaceholderText="HorizontalAlignment" IsTabStop="False" SelectionChanged="cmbTabNavigation_SelectionChanged" Margin="5">
<ComboBoxItem IsSelected="True">Local</ComboBoxItem>
<ComboBoxItem>Cycle</ComboBoxItem>
<ComboBoxItem>Once</ComboBoxItem>
</ComboBox>
<!--
用于演示 TabNavigation
1、Local - 当 focus 至 itemsControl 时，会逐一 focus 其内部的所有 Control 元素，然后退出 focus
2、Cycle - 当 focus 至 itemsControl 时，会逐一 focus 其内部的所有 Control 元素，然后再继续无限循环 focus 其内部的所有 Control 元素
3、Once - 当 focus 至 itemsControl 时，只会 focus 其内部的第一个 Control 元素，然后退出 focus
-->
<ItemsControl Name="itemsControl" Margin="5" HorizontalAlignment="Left">
<ItemsControl.Items>
<TextBox />
<TextBox />
<TextBox />
</ItemsControl.Items>
</ItemsControl>
<!--
用于演示 UseSystemFocusVisuals
1、UseSystemFocusVisuals="False" 获取焦点后，不会有任何效果，如果需要自定义获取焦点后的效果的话请在控件模板中设置
2、UseSystemFocusVisuals="True" 获取焦点后，由系统绘制效果（我这里测试的效果是，有一个虚线的边框显示）
-->
<Button Content="i am button 1" UseSystemFocusVisuals="False" Margin="5" />
<Button Content="i am button 2" UseSystemFocusVisuals="True" Margin="5" />
<Button Content="i am button 3" UseSystemFocusVisuals="False" Margin="5">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<VisualState.Setters>
<Setter Target="border.BorderThickness" Value="5" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unfocused" />
<VisualState x:Name="PointerFocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="border" BorderBrush="Red" BorderThickness="0">
<ContentPresenter x:Name="ContentPresenter"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"/>
</Border>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<!--
IsTemplateFocusTarget - 是否是控件内用于获取焦点的元素（附加属性）
-->
<Button Content="i am button 4" Margin="5">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
<Border x:Name="border" BorderBrush="Red" BorderThickness="0">
<StackPanel>
<ContentPresenter x:Name="ContentPresenter"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"/>
<!--
Control.IsTemplateFocusTarget="True" - 代表此 Button 控件用于获取焦点的元素是此 TextBlock
-->
<TextBlock Control.IsTemplateFocusTarget="True" Text="IsTemplateFocusTarget" />
</StackPanel>
</Border>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
</StackPanel>
</Grid>
</Page>
Controls/BaseControl/ControlDemo/Demo2.xaml.cs
/*
* Control - Control（继承自 UIElement, 请参见 /Controls/BaseControl/FrameworkElementDemo/）
* FocusState - 当前的焦点状态（FocusState 枚举）
* Unfocused - 无焦点
* Pointer - 通过指针获取的焦点
* Keyboard - 通过键盘获取的焦点
* Programmatic - 通过 api 获取的焦点
* bool Focus(FocusState value) - 设置焦点状态
* TabIndex - Tab 键导航顺序（按 tab 键正序导航；按 shift + tab 键倒序导航），默认值为 int.MaxValue
* IsTabStop - 是否包含在 Tab 导航中（即是否可获取到焦点）
* TabNavigation - Tab 键导航至 Control 内部时的效果
* Local - 当 focus 至 Control 时，会逐一 focus 此 Control 内部的所有 Control 元素，然后退出 focus
* Cycle - 当 focus 至 Control 时，会逐一 focus 此 Control 内部的所有 Control 元素，然后再继续无限循环 focus 此 Control 内部的所有 Control 元素
* Once - 当 focus 至 Control 时，只会 focus 此 Control 内部的第一个 Control 元素，然后退出 focus
* UseSystemFocusVisuals - 是否使用系统的焦点效果
* false - 在控件模板中设置焦点效果
* true - 使用系统的焦点效果（我这里测试的效果是，获取焦点后会显示一个虚线边框）
* IsTemplateFocusTarget - 是否是控件内用于获取焦点的元素（附加属性）
* GotFocus - 获取焦点时触发的事件（来自 UIElement）
* LostFocus - 丢失焦点时触发的事件（来自 UIElement）
*
*
* 本例用于演示 Control 的焦点相关的知识点
*/
using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
namespace Windows10.Controls.BaseControl.ControlDemo
{
public sealed partial class Demo2 : Page
{
public Demo2()
{
this.InitializeComponent();
this.Loaded += Demo2_Loaded;
}
private void Demo2_Loaded(object sender, RoutedEventArgs e)
{
textBox1.GotFocus += TextBox1_GotFocus;
textBox2.GotFocus += TextBox2_GotFocus;
textBox3.GotFocus += TextBox3_GotFocus;
textBox4.GotFocus += TextBox4_GotFocus;
textBox5.GotFocus += TextBox5_GotFocus;
}
private void TextBox1_GotFocus(object sender, RoutedEventArgs e)
{
textBox1.Text += textBox1.FocusState;
}
private void TextBox2_GotFocus(object sender, RoutedEventArgs e)
{
textBox2.Text += textBox2.FocusState;
}
private void TextBox3_GotFocus(object sender, RoutedEventArgs e)
{
textBox3.Text += textBox3.FocusState;
}
private void TextBox4_GotFocus(object sender, RoutedEventArgs e)
{
textBox4.Text += textBox4.FocusState;
}
// 这里当 textBox5 获取到焦点时，立刻指定 textBox2 获取焦点，则会达到禁止 textBox5 获取焦点的同时手动指定下一个焦点对象
// 如果只是禁止获取焦点的话可以设置 IsTabStop 为 false
private void TextBox5_GotFocus(object sender, RoutedEventArgs e)
{
textBox5.Text += textBox5.FocusState;
// 设置为 FocusState.Unfocused 时会抛异常
bool success = textBox2.Focus(FocusState.Programmatic);
}
private void cmbTabNavigation_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (itemsControl != null)
{
itemsControl.TabNavigation = (KeyboardNavigationMode)Enum.Parse(typeof(KeyboardNavigationMode), (e.AddedItems[0] as ComboBoxItem).Content.ToString());
}
}
}
}
3、演示如何在运行时获取 ControlTemplate 和 DataTemplate 中的元素
Controls/BaseControl/ControlDemo/Demo3.xaml
<Page
x:Class="Windows10.Controls.BaseControl.ControlDemo.Demo3"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Windows10.Controls.BaseControl.ControlDemo"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:common="using:Windows10.Common">
<Page.Resources>
<!--
ControlTemplate - 控件模板（是 xaml 语言使用的一种方案，其无法在 c# 中定义）
-->
<ControlTemplate x:Key="MyControlTemplate" TargetType="ContentControl">
<Grid x:Name="grid">
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
<!--
DataTemplate - 数据模板（是 xaml 语言使用的一种方案，其无法在 c# 中定义）
-->
<DataTemplate x:DataType="common:Employee" x:Key="MyDataTemplate">
<TextBlock x:Name="textBlock" Text="{x:Bind Name}" />
</DataTemplate>
</Page.Resources>
<Grid Background="Transparent">
<StackPanel Margin="10 0 10 10">
<local:MyContentControl x:Name="myContentControl" DataContext="{x:Bind CurrentEmployee}"
Template="{StaticResource MyControlTemplate}"
ContentTemplate="{StaticResource MyDataTemplate}" />
</StackPanel>
</Grid>
</Page>
Controls/BaseControl/ControlDemo/Demo3.xaml.cs
/*
* Control - Control（继承自 UIElement, 请参见 /Controls/BaseControl/FrameworkElementDemo/）
* GetTemplateChild() - 查找控件模板中的指定名字的元素
* OnApplyTemplate() - 应用控件模板时调用（来自 FrameworkElement）
*
* VisualTreeHelper - 可视化树的实用工具类
*
*
* 本例用于演示如何在运行时获取 ControlTemplate 和 DataTemplate 中的元素
*/
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows10.Common;
namespace Windows10.Controls.BaseControl.ControlDemo
{
public sealed partial class Demo3 : Page
{
public Employee CurrentEmployee { get; set; } = new Employee() { Name = "wanglei", Age = 36, IsMale = true };
public Demo3()
{
this.InitializeComponent();
myContentControl.Loaded += MyContentControl_Loaded;
}
private void MyContentControl_Loaded(object sender, RoutedEventArgs e)
{
// 通过 VisualTreeHelper 获取可视化树结构（借此可以获取数据模板中的元素）
TextBlock textBlock = Helper.GetVisualChild<TextBlock>(myContentControl, "textBlock");
textBlock.FontSize = 48;
}
}
public class MyContentControl : ContentControl
{
// override OnApplyTemplate() - 应用控件模板时调用
protected override void OnApplyTemplate()
{
base.OnApplyTemplate();
// 在 OnApplyTemplate() 中通过 GetTemplateChild() 获取控件模板中的指定名字的元素
Grid grid = (Grid)GetTemplateChild("grid");
grid.Background = new SolidColorBrush(Colors.Orange);
}
}
}
OK
[源码下载]
下一篇： HTML5--应用网页模板