设置内容时覆盖自定义按钮用户控件样式

时间:2013-07-08 18:14:18

标签: wpf xaml button user-controls

我目前正在使用Blend和我在网上找到的一些教程,试图让我自己的按钮用户控制。通常,我会使用自定义样式并将其应用于我想要的控件,但我也写了一些依赖属性,所以我决定编写自己的用户控件。

我无法理解的是如何设置Content属性而不覆盖按钮控件的样式。我以为它可能是我的代码,但我用另一个按钮开始全新,我也有同样的事情发生 - 当设置Content属性时,按钮只是变成白色并且左上角有黑色文本。

以下是Blend为我生成的XAML代码:

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

现在,如果我像这样引用主窗口中的按钮,它将恢复在用户控件中完成的任何样式:

<local:MyButton Content="test" />

为了让按钮接受不同的内容标记,我需要更改什么?

1 个答案:

答案 0 :(得分:2)

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

/// <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上:

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

现在Button的内容绑定到您的UserControl级别内容属性。