WPF当鼠标悬停在按钮上时如何更改背景图像

时间:2014-09-24 14:50:25

标签: c# wpf xaml button background-image

我已编写此代码,用于在Button中插入带文本的背景图像。所以我有这个:

<Button Style="{StaticResource TransparentButton}"
        Grid.Column="0"
        Grid.Row="0"
        Command="{Binding Path=MovePreviousCommand}"
        Width="150">
    <Button.Content>
        <StackPanel Orientation="Horizontal">
            <Grid>
                <Image Source="./Resources/Images/bottone_indietro.png" Width="130"/>
                <Label Content="{x:Static res:Strings.GestoreWizardView_Button_MovePrevious}" 
                        HorizontalAlignment="Center" VerticalAlignment="Center" 
                        Margin="48,10,26,8" Style="{StaticResource LabelStyleButton}"
                        />
            </Grid>

        </StackPanel>
    </Button.Content>
</Button>

这是一个样式按钮

<Style TargetType="Button" x:Key="TransparentButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="Transparent">
                    <ContentPresenter/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

现在我想在鼠标悬停按钮时更改背景图像。

我们可以帮助我吗?

最佳指导。

2 个答案:

答案 0 :(得分:2)

这应该可以提供您想要的图像在资源文件夹中。

<Style x:Key="TransparentButton" TargetType="Button">
    <Setter Property="OverridesDefaultStyle" Value="True"/>
    <Setter Property="Margin" Value="5"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="border" 
                    BorderThickness="0" 
                    Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" TargetName="border">
                        <Setter.Value>
                            <ImageBrush ImageSource="Resources/image.jpg" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

答案 1 :(得分:0)

保持紧凑:

<Image Width="130" >
    <Image.Style>
        <Style TargetType="{x:Type Image}">
            <Setter Property="Source" Value="./Resources/Images/bottone_indietro.png"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Button}}" Value="True">
                    <Setter Property="Source" Value="./Resources/Images/bottone_indietro_altro.png"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Image.Style>
</Image>

我得到一个无害的设计时异常(运行正常),因为只有在运行时检测到按钮作为祖先。如果这是一个问题,您可以尝试this