如何访问WPF自定义按钮样式模板中Image控件的Source属性？

嘿，我明白你的困扰——当按钮用了自定义样式后，想修改里面嵌套的Image确实有点摸不着头脑，尤其是刚接触WPF的时候。下面给你几个实用的方案，从简单快速到优雅可维护都有，你可以根据自己的场景选择：

方案1：后台代码查找控件（快速上手，适合临时场景） #

这种方法直接通过视觉树找到样式里的Image控件，然后手动设置Source。虽然不够优雅，但新手容易理解和实现：

首先写一个辅助方法用来遍历视觉树查找控件：

private Image FindImageInButton(Button button)
{
    return FindVisualChild<Image>(button);
}

private T FindVisualChild<T>(DependencyObject parent) where T : DependencyObject
{
    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
    {
        var child = VisualTreeHelper.GetChild(parent, i);
        if (child is T typedChild)
            return typedChild;
        var foundChild = FindVisualChild<T>(child);
        if (foundChild != null)
            return foundChild;
    }
    return null;
}

然后在窗口加载完成后（比如Loaded事件）调用这个方法设置图片：

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    var settingsImage = FindImageInButton(Settings_Button);
    if (settingsImage != null)
    {
        // 设置图片路径，注意替换成你自己的资源路径
        settingsImage.Source = new BitmapImage(new Uri("pack://application:,,,/YourAppName;component/Images/settings-icon.png"));
        
        // 如果要隐藏图片，设置Visibility即可
        // settingsImage.Visibility = Visibility.Collapsed;
    }
}

⚠️ 注意：必须等控件完全加载后才能找到视觉树里的元素，所以不要在构造函数里调用这个方法。

方案2：使用附加属性（推荐，符合WPF设计理念） #

这是最优雅的方案，通过自定义附加属性，让你可以像设置按钮的普通属性一样控制Image的Source，完全符合WPF的绑定机制，耦合度低且可复用：

第一步：创建附加属性类 #

在你的项目里新建一个类（比如ButtonImageHelper.cs）：

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

namespace YourAppNamespace // 替换成你的项目命名空间
{
    public static class ButtonImageHelper
    {
        // 定义附加属性
        public static readonly DependencyProperty ImageSourceProperty =
            DependencyProperty.RegisterAttached(
                "ImageSource",
                typeof(ImageSource),
                typeof(ButtonImageHelper),
                new PropertyMetadata(null));

        // 设置属性的方法
        public static void SetImageSource(DependencyObject element, ImageSource value)
        {
            element.SetValue(ImageSourceProperty, value);
        }

        // 获取属性的方法
        public static ImageSource GetImageSource(DependencyObject element)
        {
            return (ImageSource)element.GetValue(ImageSourceProperty);
        }
    }
}

第二步：修改样式模板 #

在你的Pagebutton样式里，把Image的Source绑定到这个附加属性：

<!-- 先在XAML顶部引入命名空间，替换成你的项目命名空间 -->
xmlns:local="clr-namespace:YourAppNamespace"

<!-- 修改后的Pagebutton样式 -->
<Style x:Key="Pagebutton" TargetType="Button">
    <Setter Property="Width" Value="200"/>
    <Setter Property="FontFamily" Value="{StaticResource Roboto}"/>
    <Setter Property="Foreground" Value="{DynamicResource FntBtnColor_Page}"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="Margin" Value="5 5 5 5"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="borderBtn" CornerRadius="3" Background="#E00047" >
                    <Grid>
                        <Image x:Name="Pagebutton_Image" 
                               HorizontalAlignment="Right" Height="15" Width="15" Margin="0 0 20 0"
                               Source="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=(local:ButtonImageHelper.ImageSource)}"/>
                        <ContentPresenter x:Name="contentPresenterBtn" HorizontalAlignment="Center" VerticalAlignment="Center" Focusable="False" RecognizesAccessKey="True"/>
                    </Grid>
                </Border>
                <!-- 可选：添加触发器，当ImageSource为null时隐藏图片 -->
                <ControlTemplate.Triggers>
                    <Trigger Property="(local:ButtonImageHelper.ImageSource)" Value="{x:Null}">
                        <Setter TargetName="Pagebutton_Image" Property="Visibility" Value="Collapsed"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

第三步：使用按钮时设置属性 #

现在你可以直接在按钮上设置这个附加属性，就像设置普通属性一样：

<Button x:Name="Settings_Button" 
        Style="{DynamicResource Pagebutton}" 
        Content="{x:Static p:Resources.Menue_settings}" 
        Click="Settings_Click"
        local:ButtonImageHelper.ImageSource="/YourAppName;component/Images/settings-icon.png"/>

如果不需要显示图片，只需要设置local:ButtonImageHelper.ImageSource="{x:Null}"，触发器会自动隐藏Image控件。

方案3：利用Tag属性（最简单的临时方案） #

如果你的场景很简单，不想写额外的C#代码，可以利用按钮自带的Tag属性来传递ImageSource：

修改样式模板 #

把Image的Source绑定到按钮的Tag属性：

<Image x:Name="Pagebutton_Image" 
       HorizontalAlignment="Right" Height="15" Width="15" Margin="0 0 20 0"
       Source="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Tag}"/>

使用按钮时设置Tag #

直接把图片路径赋值给Tag：

<Button x:Name="Settings_Button" 
        Style="{DynamicResource Pagebutton}" 
        Content="{x:Static p:Resources.Menue_settings}" 
        Click="Settings_Click"
        Tag="/YourAppName;component/Images/settings-icon.png"/>

同样可以加触发器，当Tag为null时隐藏图片。这个方法的缺点是Tag是object类型，没有类型检查，容易出错，适合简单场景快速实现。

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