如何在具有图像和文本块 XAML 的堆栈面板上更改鼠标悬停时的图像答案

【问题标题】：How to change image on mouseover on a button with stackpanel having an Image and a Textblock XAML如何在具有图像和文本块 XAML 的堆栈面板上更改鼠标悬停时的图像
【发布时间】：2021-12-03 08:08:20
【问题描述】：

我对 WPF/XAML 有点陌生

我有这个按钮，它包含一个堆栈面板，其中包含一个图像和一个文本框控件。

我在 StaticResource 中设置了按钮样式

如何在 MouseOver 上实现图像更改？

我已完成更改背景颜色和前景色（文本）以在鼠标悬停时更改，但我无法让图像更改工作

这是我的按钮：

                <Button Style="{StaticResource mainMenuHomeBtn}">
                    <StackPanel
                        Orientation="Horizontal"
                        HorizontalAlignment="Left">
                        <Image Name="hjemImage" Margin="5" Height="30" Source="/Images/fal-home-lg-alt.png"/>
                        <TextBlock Margin="10" VerticalAlignment="Center" Text="Hjem"/>
                    </StackPanel>
                </Button>

这是我的按钮样式：

        <Style x:Key="mainMenuHomeBtn" TargetType="{x:Type Button}">
            <Setter Property="Width" Value="auto"/>
            <Setter Property="Height" Value="auto"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="Padding" Value="-2"/>
            <Setter Property="Foreground" Value="#e3e3e3"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}" BorderBrush="#cccccc" BorderThickness="0">
                            <ContentPresenter HorizontalAlignment="Left"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Foreground" Value="#696969"/>
                    <Setter Property="Background" Value="#d9d9d9"/>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Background" Value="#e3e3e3"/>
                </Trigger>
            </Style.Triggers>
        </Style>

【问题讨论】：

为了在按钮样式中实现“图像更改”，样式必须声明一个包含图像元素的模板，而不仅仅是一个 ContentPresenter。也许将带有图像的 StackPanel 移动到 ControlTemplate 并使用 ContentPresenter 而不是 TextBlock。
你能举个例子吗，因为我是 XAML 和 WPF 的新手？ =)
stackoverflow.com/a/1933156/1136211 StackOverflow 上有很多类似的东西。
没有任何运气。我会选择下一个最好的东西。只需稍微着色我的鼠标悬停背景，这样我就可以使用相同的图片..

标签： wpf xaml

【解决方案1】：

您的Style/ControlTemplate 不知道恰好位于当前设置为Button 元素的Content 的元素中的StackPanel 的任何信息Style 当前是应用于。

您可以将内容移动到模板并使用触发器来更改模板中Image 元素的Source：

<Style x:Key="mainMenuHomeBtn" TargetType="{x:Type Button}">
    <Setter Property="Width" Value="auto"/>
    <Setter Property="Height" Value="auto"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="Padding" Value="-2"/>
    <Setter Property="Foreground" Value="#e3e3e3"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}" BorderBrush="#cccccc" BorderThickness="0">
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                        <Image Name="hjemImage" Margin="5" Height="30" Source="/Images/fal-home-lg-alt.png"/>
                        <TextBlock Margin="10" VerticalAlignment="Center" Text="Hjem"/>
                    </StackPanel>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="hjemImage" Property="Source" Value="pic.png" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Foreground" Value="#696969"/>
            <Setter Property="Background" Value="#d9d9d9"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Background" Value="#e3e3e3"/>
        </Trigger>
    </Style.Triggers>
</Style>

那么设置Content 属性没有意义，因为Style 中没有ContentPresenter：

<Button Style="{StaticResource mainMenuHomeBtn}" />

另一种选择是保持您的Style 原样并添加一个DataTrigger，它绑定到Button 的IsMouseOver 属性到内容中的一个元素：

<Button Style="{StaticResource mainMenuHomeBtn}">
    <StackPanel Orientation="Horizontal"
                HorizontalAlignment="Left">
        <Image Name="hjemImage" Margin="5" Height="30">
            <Image.Style>
                <Style TargetType="Image">
                    <Setter Property="Source" Value="/Images/fal-home-lg-alt.png" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Button}}"
                                     Value="True">
                            <Setter Property="Source" Value="pic.png" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>
        <TextBlock Margin="10" VerticalAlignment="Center" Text="Hjem"/>
    </StackPanel>
</Button>

【讨论】：

非常感谢。我选择了最后一个选项，您可以在其中为它自己的按钮定义 Datatrigger，因为我拥有的不仅仅是主页按钮，还有不同的图片和文本。它就像一个魅力。