带有自定义内容模板的 WPF 创建按钮

WPF create button with custom content template

提问by RobertW

I have application in WPF where I need to create a number of buttons with the same content layout. It is currently defined in the Window as:

我在 WPF 中有应用程序，我需要在其中创建许多具有相同内容布局的按钮。它目前在 Window 中定义为：

<Button Grid.Row="0" Grid.Column="0" Margin="4" >
    <Button.Content>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.85*" />
                <RowDefinition Height="0.25*" />
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" TextAlignment="Center" Text="Primary Text that can wrap" TextWrapping="Wrap" FontSize="14.667" />
            <TextBlock Grid.Row="1" TextAlignment="Left" Text="smaller text" FontSize="10.667" />
        </Grid>
    </Button.Content>
</Button>

What I would ideally like to do is change that to:

理想情况下，我想做的是将其更改为：

<controls:MultiTextButton Grid.Row="0" Grid.Column="0" PrimaryText="Primary Text that can wrap" SecondaryText="smaller text" />

Rightly or wrongly I've created the following class:

正确或错误地我创建了以下类：

public class MultiTextButton : Button
{
    public static readonly DependencyProperty PrimaryTextProperty = DependencyProperty.Register("PrimaryText", typeof(String), typeof(MultiTextButton));

    public static readonly DependencyProperty SecondaryTextProperty = DependencyProperty.Register("SecondaryText", typeof(String), typeof(MultiTextButton));

    static MultiTextButton()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(MultiTextButton), new FrameworkPropertyMetadata(typeof(MultiTextButton)));
    }

    public string PrimaryText
    {
        get { return (string)GetValue(PrimaryTextProperty); }
        set { SetValue(PrimaryTextProperty, value); }
    }

    public string SecondaryText
    {
        get { return (string)GetValue(SecondaryTextProperty); }
        set { SetValue(SecondaryTextProperty, value); }
    }
}

I'm now unsure of how to set the 'template' to display the content in the format as the original code in the Window. I've tried:

我现在不确定如何设置“模板”以在窗口中以原始代码的格式显示内容。我试过了：

<ControlTemplate x:Key="MultiTextButtonTemplate" TargetType="{x:Type controls:MultiTextButton}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="0.85*" />
            <RowDefinition Height="0.25*" />
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" TextAlignment="Center" Text="{Binding PrimaryText}" TextWrapping="Wrap" FontSize="14.667" />
        <TextBlock Grid.Row="1" TextAlignment="Left" Text="{Binding SecondaryText}" FontSize="10.667" />

    </Grid>
</ControlTemplate>

but in Blend and Visual Studio the button is not rendered.

但在 Blend 和 Visual Studio 中，不会呈现该按钮。

回答by McGarnagle

You're after TemplateBinding:

你在追求TemplateBinding：

<TextBlock Grid.Row="0" TextAlignment="Center" Text="{TemplateBinding PrimaryText}" TextWrapping="Wrap" FontSize="14.667" />
<TextBlock Grid.Row="1" TextAlignment="Left" Text="{TemplateBinding SecondaryText}" FontSize="10.667" />

This binding is for use specifically in control templates -- it refers to a dependency property in the control. (Note that a regular binding, by contrast, refers to a property in the current DataContext.)

此绑定专门用于控件模板——它指的是控件中的依赖属性。（请注意，相比之下，常规绑定是指当前DataContext. 中的属性。）

---

---

Edit

编辑

To make it look like a button, copy the default control template for Buttonand replace its ContentPresenterwith something like below:

为了使它看起来像一个按钮，复制默认的控件模板Button并将其替换为ContentPresenter如下所示的内容：

<ContentControl Margin="2"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                RecognizesAccessKey="True"
                ContentTemplate="{TemplateBinding ContentTemplate}">
    <ContentControl.Content>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.85*" />
                <RowDefinition Height="0.25*" />
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" TextAlignment="Center" Text="{Binding PrimaryText}" TextWrapping="Wrap" FontSize="14.667" />
            <TextBlock Grid.Row="1" TextAlignment="Left" Text="{Binding SecondaryText}" FontSize="10.667" />

        </Grid>
    </ContentControl.Content>
</ContentControl>