UWP Custom Control自定义控件开发

Fork Me On Github
zodream 编程技术 C# 2021年04月

Custom Control 又名 Templated Control 模板控件

开发

分为两个文件

一个资源文件 Themes/Generic.xaml 里面,主要放默认的模板及初始化属性

一个cs 文件 控件名.cs,主要放 声明属性及事件

一个简单的控件,由一个图标和文字组成的控件

c#
                                  
public sealed class IconTag : Control
    {
        public IconTag()
        {
            this.DefaultStyleKey = typeof(IconTag);
        }

        /// <summary>
        /// 内容
        /// </summary>
        public string Label
        {
            get { return (string)GetValue(LabelProperty); }
            set { SetValue(LabelProperty, value); }
        }

        // Using a DependencyProperty as the backing store for Label.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty LabelProperty =
            DependencyProperty.Register("Label", typeof(string), typeof(IconTag), new PropertyMetadata(null));


        /// <summary>
        /// 内容字体图标
        /// </summary>
        public string Icon
        {
            get { return (string)GetValue(IconProperty); }
            set { SetValue(IconProperty, value); }
        }

        // Using a DependencyProperty as the backing store for Icon.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty IconProperty =
            DependencyProperty.Register("Icon", typeof(string), typeof(IconTag), new PropertyMetadata(null));
    }
12345678910111213141516171819202122232425262728293031323334
xml
                    
 <Style TargetType="local2:IconTag">
    <Setter Property="FontFamily" Value="Microsoft YaHei"/>
    <Setter Property="Margin" Value="0,0,10,0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local2:IconTag">
                <Grid Margin="{TemplateBinding Margin}" Padding="{TemplateBinding Padding}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <FontIcon Glyph="{TemplateBinding Icon}" FontSize="{TemplateBinding FontSize}" VerticalAlignment="Center"/>
                    <TextBlock Text="{TemplateBinding Label}" 
                                FontFamily="{TemplateBinding FontFamily}"
                                VerticalAlignment="Center" Grid.Column="1" FontSize="{TemplateBinding FontSize}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
1234567891011121314151617181920

ControlTemplate就是放默认模板,

Setter Property= 就是声明一些初始化的属性

代码获取控件模板中的控件

必须先使用 x:Name 声明名称

xml
                  
 <Style TargetType="local2:IconTag">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local2:IconTag">
                <Grid Margin="{TemplateBinding Margin}" Padding="{TemplateBinding Padding}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <FontIcon Glyph="{TemplateBinding Icon}" FontSize="{TemplateBinding FontSize}" VerticalAlignment="Center"/>
                    <TextBlock x:Name="Content" Text="{TemplateBinding Label}" 
                                FontFamily="{TemplateBinding FontFamily}"
                                VerticalAlignment="Center" Grid.Column="1" FontSize="{TemplateBinding FontSize}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
123456789101112131415161718

必须声明模板必须包含 x:Name="Content" 且 类型为 TextBlock

c#
             
    [TemplatePart(Name = "Content", Type = typeof(TextBlock))]
    public sealed class IconTag : Control {
        public IconTag()
        {
            DefaultStyleKey = typeof(IconTag);
            Loaded += IconTag_Loaded;
        }

        private void IconTag_Loaded(object sender, RoutedEventArgs e)
        {
            var tb = GetTemplateChild("Content") as TextBlock;
        }
    }
12345678910111213

通过 GetTemplateChild 获取控件,而且必须等控件加载完了才能获取到。

点击查看全文
标签: uwp
0 482 0
uwp win2d 使用
2021年05月
win2d使用
uwp应用获取应用内的文件内容
UWP 使用语言包
2020年04月
UWP 上传图片
2020年04月
UWP 怎么上传图片