设置内容后，自定义按钮用户控件样式将被覆盖 [英] Custom button user control style overwritten when content is set

问题描述

我目前正在使用Blend和我在网上找到的一些教程来尝试制作自己的按钮用户控件.通常，我只会使用自定义样式并将其应用于所需的控件，但是我也写了一些依赖项属性，因此我决定编写自己的用户控件.

I am currently using Blend and some tutorials I found online to try to make my own button user control. Normally, I would just use a custom style and apply it to the controls I want, but I wrote in some dependency properties as well so I decided to write my own user control.

我无法理解的是如何设置Content属性而不覆盖按钮控件的样式.我以为可能是我的代码，但是我用另一个按钮开始了全新的工作，发生了相同的事情-设置Content属性后，该按钮只是变成白色，并且在左上角带有黑色文本.

Something that I can't get my head around is how to set the Content property without overwriting the styling of the button control. I thought it might have been my code, but I started brand new with another button and I have the same thing happen - when the Content property is set, the button simply turns white and has black text in the upper left corner.

这是Blend为我生成的XAML代码:

Here is the XAML code that Blend generated for me:

<UserControl x:Class="MyUI.Controls.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="25" d:DesignWidth="100">
<UserControl.Resources>
    <Style x:Key="MyButtonStyle" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <Rectangle/>
                        <ContentPresenter 
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                        RecognizesAccessKey="True" 
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsFocused" Value="True"/>
                        <Trigger Property="IsDefaulted" Value="True"/>
                        <Trigger Property="IsMouseOver" Value="True"/>
                        <Trigger Property="IsPressed" Value="True"/>
                        <Trigger Property="IsEnabled" Value="False"/>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
<Grid>
    <Button Content="Button" Height="25" Style="{DynamicResource MyButtonStyle}" Width="100"/>
</Grid>

现在，如果我这样在主窗口中引用按钮，它将还原在用户控件中完成的所有样式:

Now, if I reference the button in my main window like this, it reverts any styling that was done within the user control:

<local:MyButton Content="test" />

要使按钮接受不同的Content标签，我需要更改什么?

What do I need to change in order to make the button accept a different Content tag?

推荐答案

您需要的是将UserControl级别的Content属性连接到Button级别的Content属性.默认情况下，UserControl的Content属性是其唯一的子元素，在您的情况下为Grid.您可以创建自己的Content属性，也可以创建另一个具有不同名称的属性.在您的UserControl的.cs文件中:

What you need is to connect your UserControl level Content property to your Button level Content property. By default UserControl's Content property is its only child element, which is Grid in your case. You can either create your own Content property or another one with different name. In your UserControl's .cs file:

/// <summary>
/// Interaction logic for MyButton.xaml
/// </summary>
public partial class MyButton : UserControl
{
    public new static DependencyProperty ContentProperty =
        DependencyProperty.Register("Content", typeof (object),
                                    typeof (MyButton));

    public new object Content
    {
        get { return GetValue(ContentProperty); }
        set { SetValue(ContentProperty, value); }
    }

    public MyButton()
    {
        InitializeComponent();
    }
}

在您的UnserControl的Xaml上:

On your UnserControl's Xaml:

<Button Content="{Binding Path=Content, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" 
            Height="25" Style="{DynamicResource MyButtonStyle}" Width="100"/>

现在按钮的内容绑定到您的UserControl级别的Content属性.

Now Button's Content binds to your UserControl level Content property.

这篇关于设置内容后，自定义按钮用户控件样式将被覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！