原文:

背水一战 Windows 10 (76) - 控件（控件基类）: Control - 基础知识, 焦点相关, 运行时获取 ControlTemplate 和 DataTemplate 中的元素

作者：

介绍

背水一战 Windows 10 之 控件（控件基类 - Control）

• 基础知识
• 焦点相关
• 运行时获取 ControlTemplate 和 DataTemplate 中的元素

示例

1、演示 Control 的基础知识

Controls/BaseControl/ControlDemo/Demo1.xaml

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

            
                 
                      
                       
                       
                       
                       
                       
                       
                           
            
             Local
                            
            
             Cycle
                            
            
             Once
                        
                       
                       
                           
                                
                                 
                                 
                             
                        
                                   
                       
                       
                       
                           
                                
              
               
                
                 
                  
                   
                    
                   
                  
                  
                  
                 
                
                
                 
                
               
                             
                                                
                       
                           
                                
              
               
                
                 
                  
                  
                  
                 
                
               
                             
                                
              
         
        

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

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
        
         (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