将按钮图像设置为按其样式绑定

Question

我发现我正在为多个按钮创建相同的Button样式，但只更改了一个部分 - 在Button上使用的图像。 一个例子;

<Setter Property="ContentTemplate">
    <Setter.Value>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Source="pack://application:,,,/Resources/MainWindowIcons/Staff.ico" Height="20"/>
                <TextBlock Style="{StaticResource HoverUnderlineStyle}" Text="Staff" Margin="5,0,0,0"/>
             </StackPanel>
         </DataTemplate>
     </Setter.Value>
</Setter>

这是人员Button的代码。 如果我想添加另一个按钮，我会复制整个样式，但只需更改Image的Source 。

有没有一种方法可以让我拥有样式，然后在Button本身上设置它 - 这意味着我不必多次复制样式？

Answer 1

您可以实现两个附加属性 - 一个用于Image源，一个用于文本 - 您可以在任何Button上设置：

public class ButtonProperties
{
    public static readonly DependencyProperty ImageSourceProperty =
        DependencyProperty.RegisterAttached("ImageSource", typeof(Uri), typeof(ButtonProperties));

    public static Uri GetImageSource(Button button)
    {
        return (Uri)button.GetValue(ImageSourceProperty);
    }

    public static void SetImageSource(Button button, Uri value)
    {
        button.SetValue(ImageSourceProperty, value);
    }

    public static readonly DependencyProperty TextProperty = 
        DependencyProperty.RegisterAttached("Text", typeof(Uri), typeof(ButtonProperties));

    public static string GetText(Button button)
    {
        return (string)button.GetValue(ImageSourceProperty);
    }

    public static void SetText(Button button, string value)
    {
        button.SetValue(ImageSourceProperty, value);
    }
}

然后您只需要将ContentTemplate定义为资源一次，例如在您的 App.xaml 中：

<Application x:Class="WpfApplication1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfApplication1"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <DataTemplate x:Key="dataTemplate">
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Path=(local:ButtonProperties.ImageSource), RelativeSource={RelativeSource AncestorType=Button}}" Height="20"/>
                <TextBlock Text="{Binding Path=(local:ButtonProperties.Text), RelativeSource={RelativeSource AncestorType=Button}}" Margin="5,0,0,0"/>
            </StackPanel>
        </DataTemplate>
    </Application.Resources>
</Application>

用法：

<Button local:ButtonProperties.Text="Staff"
                local:ButtonProperties.ImageSource="pack://application:,,,/Resources/MainWindowIcons/Staff.ico"
                ContentTemplate="{StaticResource dataTemplate}" />