Got it, let's tackle this problem step by step. You've created a Button style in Resources.xaml with a ControlTemplate that includes nested controls (StackPanel, Grid, and a Button with an Image), and you want to reuse this style across other Buttons while only changing the Image's URL. Here are a few solid, maintainable approaches to make this work:

Approach 1: Use an Attached Property (Flexible, No Custom Control Needed) #

This is my go-to for scenarios where you don't want to create a custom control but need to add a reusable, bindable property to existing controls.

Step 1: Define the Attached Property (C#) #

Create a helper class to hold your attached property:

using System.Windows;
using System.Windows.Media;

namespace YourNamespace
{
    public static class ButtonImageHelper
    {
        // Register the attached property
        public static readonly DependencyProperty ImageSourceProperty =
            DependencyProperty.RegisterAttached(
                "ImageSource",
                typeof(ImageSource),
                typeof(ButtonImageHelper),
                new PropertyMetadata(null));

        // Getter and setter methods
        public static void SetImageSource(DependencyObject element, ImageSource value)
        {
            element.SetValue(ImageSourceProperty, value);
        }

        public static ImageSource GetImageSource(DependencyObject element)
        {
            return (ImageSource)element.GetValue(ImageSourceProperty);
        }
    }
}

Step 2: Update Your ControlTemplate in Resources.xaml #

Modify the Image in your template to bind to this attached property using RelativeSource to target the parent Button:

<Style x:Key="ReusableButtonStyle" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <!-- Your existing template structure: StackPanel, Grid, etc. -->
                <Button> <!-- The nested Button with the Image -->
                    <Image 
                        Source="{Binding RelativeSource={RelativeSource TemplatedParent}, 
                        Path=(local:ButtonImageHelper.ImageSource)}" />
                </Button>
                <!-- Rest of your template content -->
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

(Note: Replace local: with your actual XML namespace pointing to the C# helper class.)

Step 3: Reuse the Style with a New Image #

When using the style on other Buttons, just set the attached property to your desired image URL:

<Button 
    Style="{StaticResource ReusableButtonStyle}"
    local:ButtonImageHelper.ImageSource="/YourAssemblyName;component/Images/NewButtonImage.png" />

Approach 2: Create a Custom Button Control (For Long-Term Maintainability) #

If you anticipate adding more customizable properties to this Button later, creating a custom control is a cleaner, more scalable solution.

Step 1: Define the Custom Button (C#) #

Inherit from Button and add your ImageSource dependency property:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace YourNamespace
{
    public class ImageButton : Button
    {
        public static readonly DependencyProperty ImageSourceProperty =
            DependencyProperty.Register(
                "ImageSource",
                typeof(ImageSource),
                typeof(ImageButton),
                new PropertyMetadata(null));

        public ImageSource ImageSource
        {
            get => (ImageSource)GetValue(ImageSourceProperty);
            set => SetValue(ImageSourceProperty, value);
        }
    }
}

Step 2: Update the Style in Resources.xaml #

Adjust your style to target the custom ImageButton and use TemplateBinding for the image source:

<Style TargetType="local:ImageButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:ImageButton">
                <!-- Your existing template structure -->
                <Image Source="{TemplateBinding ImageSource}" />
                <!-- Rest of your template content -->
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Step 3: Use the Custom Button #

Now you can directly set the ImageSource property when using the control:

<local:ImageButton 
    ImageSource="/YourAssemblyName;component/Images/AnotherButtonImage.png" />

Approach 3: Quick Fix with the Tag Property (For Simple/Testing Scenarios) #

If you need a quick workaround without writing extra C# code, you can repurpose the Button's built-in Tag property. This is less clean long-term but works for small projects:

Update the Template #

Bind the Image's Source to the parent Button's Tag:

<Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Tag}" />

Use the Style #

Set the Tag property to your image URL:

<Button Style="{StaticResource ReusableButtonStyle}" Tag="/YourAssemblyName;component/Images/TempImage.png" />

Final Recommendations #

• Use Attached Properties if you want flexibility without creating a custom control.
• Use a Custom Button if you plan to extend this control with more properties later (e.g., image size, tooltip text tied to the image).
• Avoid the Tag approach for production code—it's not self-documenting and can lead to confusion down the line.

内容的提问来源于stack exchange，提问作者Mac