自定义控件：如何覆盖默认属性？ [英] Custom control: How to override default properties?

问题描述

我创建了一个类似于按钮的自定义控件。
我想覆盖他的默认属性，但是它的工作方式很奇怪。

I've created a custom control similar to a button. I want to override his default properties, but it works strangely.

UserControl Xaml

UserControl Xaml

<UserControl x:Class="project.MyButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d" 
             d:DesignHeight="50" d:DesignWidth="50">
    <Grid>
        <Ellipse x:Name="structure" Fill="Black" Stroke="White" StrokeThickness="2"/>
        <Label x:Name="content" Content="&#xE081;" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" FontFamily="Segoe MDL2 Assets" FontWeight="Bold" FontSize="16"/>
    </Grid>
</UserControl>

后面的用户控制代码（C＃）

UserControl Code Behind (C#)

    /// <summary>A simple custom button.</summary>
    public partial class MyButton : UserControl
    {
        /// <summary>Background color.</summary>
        public new Brush Background { get => structure.Fill; set => structure.Fill = value; }

        /// <summary>Foreground color.</summary>
        public new Brush Foreground { get => content.Foreground; set => content.Foreground = value; }

        /// <summary>Stroke color.</summary>
        public Brush Stroke { get => structure.Stroke; set => structure.Stroke = value; }

        /// <summary>Stroke thickness.</summary>
        public double StrokeThickness { get => structure.StrokeThickness; set => structure.StrokeThickness = value; }

        /// <summary>Font family.</summary>
        public new FontFamily FontFamily { get => content.FontFamily; set => content.FontFamily = value; }

        /// <summary>Font weight.</summary>
        public new FontWeight FontWeight { get => content.FontWeight; set => content.FontWeight = value; }

        /// <summary>Font size.</summary>
        public new double FontSize { get => content.FontSize; set => content.FontSize = value; }

        /// <summary>Content.</summary>
        public new object Content { get => content.Content; set => content.Content = value; }


        /// <summary>Inizialize new <see cref="MyButton"/>.</summary>
        public MyButton()
        {
            InitializeComponent();
        }
    }

结果

但是，当我尝试设置Background属性时，它会为控件的背景着色。而不是椭圆形，当我尝试设置内容时，它会覆盖按钮，等等...

But, when I try to set the Background property it colors the background of the control, and not the ellipse, when I try to set the Content, it overrides the button, etc...

示例： Background = Red

< img src = https://i.stack.imgur.com/PSOcB.png alt =背景红色>

推荐答案

您可以为 UserControl 定义 ControlTemplate ：

<UserControl x:Class="project.MyButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApp4"
             mc:Ignorable="d" 
             d:DesignHeight="50" d:DesignWidth="50">
    <UserControl.Template>
        <ControlTemplate TargetType="UserControl">
            <Grid>
                <Ellipse x:Name="structure" Fill="{TemplateBinding Background}" Stroke="White" StrokeThickness="2"/>
                <Label x:Name="content" Content="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" FontFamily="Segoe MDL2 Assets" FontWeight="Bold" FontSize="16"/>
            </Grid>
        </ControlTemplate>
    </UserControl.Template>
</UserControl>

使用 TemplateBinding 来获取en的属性模板中的元素，可以设置 UserControl 的此属性来更改模板中元素的属性：

Using a TemplateBinding for a property of en element in the template, you can set this property of the UserControl to change the property of the element in the template:

<local:Button Background="Red" Content="&#xE081;" />

这篇关于自定义控件：如何覆盖默认属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！