UWP Custom Control自定义控件开发-zodream梦想开源/个人编程日记

Custom Control 又名 Templated Control 模板控件

开发

分为两个文件

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

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

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

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

 <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 声明名称

 <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

    [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 获取控件，而且必须等控件加载完了才能获取到。

转载请保留原文链接： https://zodream.cn/blog/id/206.html

推荐订阅源

zodream梦想开源/个人编程日记

开发

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