WPF创建自定义内容模板按钮 [英] WPF create button with custom content template

问题描述

我在WPF应用程序，我需要创建一些按钮具有相同内容的布局。这是目前在窗口定义为：

 <按钮Grid.Row =0Grid.Column =0保证金=4> 
< Button.Content> 
<网格和GT; 
< Grid.RowDefinitions> 
< RowDefinition HEIGHT =0.85 */> 
< RowDefinition HEIGHT =0.25 */> 
< /Grid.RowDefinitions> 
< TextBlock的Grid.Row =0TextAlignment =中心文本=主要文本，它可以包含TextWrapping =自动换行字号=14.667/> 
< TextBlock的Grid.Row =1TextAlignment =左文本=较小的文本字号=10.667/> 
< /网格和GT; 
< /Button.Content> 
< /按钮> 
  

我想最好做的是改变为：

 <控制：MultiTextButton Grid.Row =0Grid.Column =0PrimaryText =主要文本，它可以包含SecondaryText =较小的文本/ > 
  

不管正确与否我创建了以下类：

 公共类MultiTextButton：按钮
 {
公共静态只读的DependencyProperty PrimaryTextProperty = DependencyProperty.Register（PrimaryText，typeof运算（字符串）的typeof（MultiTextButton ））; 
 
公共静态只读的DependencyProperty SecondaryTextProperty = DependencyProperty.Register（SecondaryText，typeof运算（字符串）的typeof（MultiTextButton））; 
 
静态MultiTextButton（）
 {
 DefaultStyleKeyProperty.OverrideMetadata（typeof运算（MultiTextButton），新FrameworkPropertyMetadata（typeof运算（MultiTextButton）））; 
} 
 
公共字符串PrimaryText 
 {
 {返回（串）的GetValue（PrimaryTextProperty）; } 
集合{的SetValue（PrimaryTextProperty，值）; } 
} 
 
公共字符串SecondaryText 
 {
 {返回（串）的GetValue（SecondaryTextProperty）; } 
集合{的SetValue（SecondaryTextProperty，值）; } 
} 
} 
  

我现在不能确定如何设置模板来显示的格式如在窗口的原代码的内容。我试过：

 <控件模板X：键=MultiTextButtonTemplate的TargetType ={X：类型控件：MultiTextButton} > 
<网格和GT; 
< Grid.RowDefinitions> 
< RowDefinition HEIGHT =0.85 */> 
< RowDefinition HEIGHT =0.25 */> 
< /Grid.RowDefinitions> 
< TextBlock的Grid.Row =0TextAlignment =中心文本={结合PrimaryText}TextWrapping =自动换行字号=14.667/> 
< TextBlock的Grid.Row =1TextAlignment =左文本={结合SecondaryText}字号=10.667/> 
 
< /网格和GT; 
< /控件模板> 
  

但在Blend和Visual Studio中的按钮没有渲染。

< DIV CLASS =h2_lin>解决方案

您所追求的 TemplateBinding ：

 < TextBlock的Grid.Row =0TextAlignment =中心文本={TemplateBinding PrimaryText}TextWrapping =自动换行字号=14.667/> 
< TextBlock的Grid.Row =1TextAlignment =左文本={TemplateBinding SecondaryText}字号=10.667/> 
  

这是结合了专门的控制模板使用 - 它指的是在控制的依赖项属性。 （请注意，有规律的结合，相反，是指物业的电流的DataContext ）

---

修改

要使它看起来像一个按钮，复制的默认控制按钮模板 并取代其 ContentPresenter 喜欢的东西如下：

 < ContentControl中保证金=2 
的Horizo​​ntalAlignment =中心
 VerticalAlignment =中心
 RecognizesAccessKey =真
的ContentTemplate ={TemplateBinding的ContentTemplate}> 
< ContentControl.Content> 
<网格和GT; 
< Grid.RowDefinitions> 
< RowDefinition HEIGHT =0.85 */> 
< RowDefinition HEIGHT =0.25 */> 
< /Grid.RowDefinitions> 
< TextBlock的Grid.Row =0TextAlignment =中心文本={结合PrimaryText}TextWrapping =自动换行字号=14.667/> 
< TextBlock的Grid.Row =1TextAlignment =左文本={结合SecondaryText}字号=10.667/> 
 
< /网格和GT; 
< /ContentControl.Content> 
< / ContentControl中> 
  

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:

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

解决方案

You're after 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.)

---

Edit

To make it look like a button, copy the default control template for Button and replace its ContentPresenter with something like below:

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

这篇关于WPF创建自定义内容模板按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！