如何在具有影像和文本塊XAML的堆疊面板的按鈕上更改滑鼠懸停時的影像

我對 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>

uj5u.com熱心網友回復：

您的Style/ControlTemplate對StackPanel當前設定為當前應用Content的Button元素的元素中的元素一無所知Style。

您可以將內容移動到模板并使用觸發器來更改模板Source中的Image元素：

<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屬性的意義，因為ContentPresenter在Style：

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

另一種選擇是保持Style原樣并添加一個DataTrigger系結到內容中元素的IsMouseOver屬性Button：

<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>

標籤：小白 xaml

上一篇：將命令系結到MAUI中的父視圖模型

下一篇：如何使用c#將單個html行系結到xamarin.forms中的多個標簽