c# - 如何使用 xaml 中的通用模板/控件创建可重用控件并设置嵌套控件的属性

Question

我曾尝试用谷歌搜索此内容，但我对看到人们提出的建议不是很清楚。我在用户控件中有 3 个按钮，除了自动化 ID 和文本外，它们完全相同。我不想在所有按钮上复制此代码，而是想创建一个我可以使用的通用控件或控件模板。我的问题是这些按钮有嵌套控件，我需要更改其文本，但我不确定如何执行此操作。

<UserControl>

<Grid>       
        <StackPanel x:Name="myStackPanel" Grid.Row="1" Padding="0">
            <Button AutomationProperties.AutomationId="CallButton" x:Name="CallButton" Style="{StaticResource ButtonStyle}">
                <RelativePanel>
                    <SymbolIcon AutomationProperties.AutomationId="CallIcon" x:Name="CallIcon" Symbol="Phone" Style="{StaticResource SymbolStyle}" />
                    <StackPanel>
                        <TextBlock AutomationProperties.AutomationId="CallLabel" Text="Call" Style="{StaticResource LabelStyle}"/>
                        <TextBlock AutomationProperties.AutomationId="CallText" Text="123-456-7890" Style="{StaticResource ContentStyle}"/>
                    </StackPanel>
                </RelativePanel>
            </Button>
            <Button AutomationProperties.AutomationId="EmailButton" x:Name="EmailButton" Style="{StaticResource ButtonStyle}">
                <RelativePanel>
                    <SymbolIcon AutomationProperties.AutomationId="EmailIcon" x:Name="EmailIcon" Symbol="Mail" Style="{StaticResource SymbolStyle}"/>
                    <StackPanel >
                        <TextBlock AutomationProperties.AutomationId="EmailLabel" Text="Email" Style="{StaticResource LabelStyle}"/>
                        <TextBlock AutomationProperties.AutomationId="EmailText" Text="meetme@email.com" Style="{StaticResource ContentStyle}"/>
                    </StackPanel>
                </RelativePanel>
            </Button>
            <Button AutomationProperties.AutomationId="WebsiteButton" x:Name="WebsiteButton" Style="{StaticResource ButtonStyle}">
                <RelativePanel>
                    <SymbolIcon AutomationProperties.AutomationId="WebsiteIcon" x:Name="WebsiteIcon" Symbol="Link" Style="{StaticResource SymbolStyle}"/>
                    <StackPanel >
                        <TextBlock AutomationProperties.AutomationId="WebsiteLabel" Text="Website" Style="{StaticResource LabelStyle}"/>
                        <TextBlock AutomationProperties.AutomationId="WebsiteText" Text="http://meetme.com" Style="{StaticResource ContentStyle}"/>
                    </StackPanel>
                </RelativePanel>
            </Button>
        </StackPanel>          
    </Grid>
</Grid>

如您所见，所有 3 个按钮的代码都是相同的。我想要做的就是创建一个控件，我可以在其中设置嵌套控件的自动化 ID 和文本属性。

谢谢!

Answer 1

您可以创建一个基于UserControl 的按钮(添加一个新的UserControl)。它将允许您享受所有默认按钮的属性、事件和状态(OnClick、Command 等)并添加您自己的属性、模板和行为。

如果您想对其使用绑定(bind)或动画，强烈建议使用依赖属性而不是简单属性。

C#:

public partial class CustomButton : Button
{

    #region IconAutomationId

    public string IconAutomationId
    {
        get { return (string)GetValue(IconAutomationIdProperty); }
        set { SetValue(IconAutomationIdProperty, value); }
    }

    public static readonly DependencyProperty IconAutomationIdProperty =
        DependencyProperty.Register("IconAutomationId", typeof(string), typeof(CustomButton), new PropertyMetadata(null));

    #endregion

    #region LabelAutomationId

    public string LabelAutomationId
    {
        get { return (string)GetValue(LabelAutomationIdProperty); }
        set { SetValue(LabelAutomationIdProperty, value); }
    }

    public static readonly DependencyProperty LabelAutomationIdProperty =
        DependencyProperty.Register("LabelAutomationId", typeof(string), typeof(CustomButton), new PropertyMetadata(null));

    #endregion

    #region TextAutomationId

    public string TextAutomationId
    {
        get { return (string)GetValue(TextAutomationIdProperty); }
        set { SetValue(TextAutomationIdProperty, value); }
    }

    public static readonly DependencyProperty TextAutomationIdProperty =
        DependencyProperty.Register("TextAutomationId", typeof(string), typeof(CustomButton), new PropertyMetadata(null));

    #endregion

    #region Symbol

    public object Symbol
    {
        get { return (object)GetValue(SymbolProperty); }
        set { SetValue(SymbolProperty, value); }
    }

    public static readonly DependencyProperty SymbolProperty =
        DependencyProperty.Register("Symbol", typeof(object), typeof(CustomButton), new PropertyMetadata(null));

    #endregion

    #region Label

    public string Label
    {
        get { return (string)GetValue(LabelProperty); }
        set { SetValue(LabelProperty, value); }
    }

    public static readonly DependencyProperty LabelProperty =
        DependencyProperty.Register("Label", typeof(string), typeof(CustomButton), new PropertyMetadata(null));

    #endregion

    #region Text

    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register("Text", typeof(string), typeof(CustomButton), new PropertyMetadata(null));

    #endregion

    public CustomButton()
    {
        InitializeComponent();
    }
}

XAML:

<Button x:Class="WpfApplication1.CustomButton"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Name="customButton">

    <RelativePanel>
        <SymbolIcon AutomationProperties.AutomationId="{Binding IconAutomationId, ElementName=customButton}"
                    Symbol="{Binding Symbol, ElementName=customButton}"
                    Style="{StaticResource SymbolStyle}"/>
        <StackPanel >
            <TextBlock AutomationProperties.AutomationId="{Binding LabelAutomationId, ElementName=customButton}"
                       Text="{Binding Label, ElementName=customButton}"
                       Style="{StaticResource LabelStyle}"/>
            <TextBlock AutomationProperties.AutomationId="{Binding TextAutomationId, ElementName=customButton}"
                       Text="{Binding Text, ElementName=customButton}"
                       Style="{StaticResource ContentStyle}"/>
        </StackPanel>
    </RelativePanel>
</Button>

使用:

<local:CustomButton AutomationProperties.AutomationId="CallButton"
                    x:Name="CallButton"
                    Style="{StaticResource ButtonStyle}"
                    IconAutomationId="CallIcon"
                    LabelAutomationId="CallLabel"
                    TextAutomationId="CallText"
                    Symbol="Phone"
                    Label="Call"
                    Text="123-456-7890"/>