如何仅使用 XAML 更改资源模板元素的属性？

Question

主要思想是有一个带有默认图标"yes.png"和其中文本"Accept"的按钮，但有可能仅使用 XAML 更改这两个属性（在设计过程中，无需编译）。

当前 XAML window 底部有一个区域，只有两个按钮：

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Window.Resources>
        <ResourceDictionary>
            <Style x:Key="tb1" TargetType="{x:Type Button}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Border BorderThickness="1" BorderBrush="#000" Padding="0">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition/>
                                    </Grid.ColumnDefinitions>
                                    <Image Source="Files/Icons/no.png" Margin="10,0,0,0" Height="16" Width="16"></Image>
                                    <TextBlock Grid.Column="1" Margin="10" VerticalAlignment="Center">Cancel</TextBlock>
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="Margin" Value="0,10,10,10"></Setter>
            </Style>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <Border BorderThickness="0, 1, 0, 0" BorderBrush="#e7e7e7" HorizontalAlignment="Stretch" Padding="0,0,0,0" VerticalAlignment="Bottom" Height="61">
            <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Right">
                <Button x:Name="b_Accept" Style="{StaticResource tb1}"></Button> <!-- How to change an icon to "yes.png" and TextBlock's content to "Accept"? -->
                <Button x:Name="b_Cancel" Style="{StaticResource tb1}"></Button>
            </StackPanel>
        </Border>
    </Grid>
</Window>

结果：

请，

1. 如何将第二个按钮的图标更改为"no.png" （源属性）和 TextBlock 的文本（内容）更改为"Cancel" （仅使用 XAML而不是用户控制）？

2. 什么是最正确的方法（最简单的？）？ 例如，在这篇文章中，我们可能会使用DataTemplate ，但这可能不是我们想要的，因为 DataTemplate 会更改整个元素，而我们只需要一个属性。

虽然，我是对的，只有dependency property （C#）可用于预期编译的目的？

谢谢

Answer 1

您可以创建自定义Button class 或附加属性来扩展Button ：

public class IconControl : DependencyObject
{
  #region IconUri attached property

  public static readonly DependencyProperty IconUriProperty = DependencyProperty.RegisterAttached(
    "IconUri", typeof(ImageSource), typeof(IconControl), new PropertyMetadata(default(ImageSource)));

  public static void SetIconUri([NotNull] DependencyObject attachingElement, ImageSource value)
  {
    attachingElement.SetValue(IconControl.IconUriProperty, value);
  }

  public static ImageSource GetIconUri([NotNull] DependencyObject attachingElement) => (ImageSource) attachingElement.GetValue(IconControl.IconUriProperty);

  #endregion

  #region Label attached property

  public static readonly DependencyProperty LabelProperty = DependencyProperty.RegisterAttached(
    "Label", typeof(String), typeof(IconControl), new PropertyMetadata(default(String)));

  public static void SetLabel([NotNull] DependencyObject attachingElement, String value)
  {
    attachingElement.SetValue(IconControl.LabelProperty, value);
  }

  public static String GetLabel([NotNull] DependencyObject attachingElement) => (String) attachingElement.GetValue(IconControl.LabelProperty);

  #endregion
}

Button的修改Style ：

<Style x:Key="IconButtonStyle"
       TargetType="{x:Type Button}">

  <!-- Set the default values -->
  <Setter Property="IconControl.IconUri" Value="/Files/Icons/no.png"/>
  <Setter Property="IconControl.Label" Value="Cancel"/>

  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Button}">
        <Border BorderThickness="1"
                BorderBrush="#000"
                Padding="0">
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(IconControl.IconUri)}"
                   Margin="10,0,0,0"
                   Height="16"
                   Width="16" />
            <TextBlock Grid.Column="1"
                       Margin="10"
                       VerticalAlignment="Center"
                       Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(IconControl.Label)}" />
          </Grid>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
  <Setter Property="Margin"
          Value="0,10,10,10"></Setter>
</Style>

用法：

<!-- Override the default content -->
<Button Style="{StaticResource IconButtonStyle}"
        IconControl.IconUri="/Files/Icons/yes.png"
        IconControl.Label="Accept" />