Question

我是WPF的新手，我只是在尝试创建一个gui来加载一堆电影，并随机选择一个。目前，我正在努力让我自己的自定义关闭按钮工作。当鼠标悬停在图像上时，我想用不同的图像替换图像。然而，当我这样做时，我得到一个蓝色方块，而不是我的图像。知道为什么吗？

另外，如何在单击按钮时实现要显示的新图像？

我有以下代码：

<Button x:Name="xbutton" Height="34" Margin="765,0,0,0" VerticalAlignment="Top">
            <Button.Style>
                <Style TargetType="{x:Type Button}">
                    <Setter Property="Background">
                        <Setter.Value>
                            <ImageBrush ImageSource="images\ExNoHover.png"/>
                        </Setter.Value>
                    </Setter>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background">
                                <Setter.Value>
                                    <ImageBrush ImageSource="images/ExHover.png"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>

由于

Answer 1

您需要为按钮创建自定义模板。

请参阅此示例：WPF - How to create image button with template

Answer 2

这篇文章有你问题的答案

<强> button template

我改变了一下以适应你

 <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <ControlTemplate.Resources>
                        <Style x:Key="ShadowStyle">
                            <Setter Property="Control.Background">
                                <Setter.Value>
                                    <ImageBrush ImageSource="../Images/D.png"/>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ControlTemplate.Resources>
                    <Border Name="border" BorderThickness="1" Padding="4,2" BorderBrush="DarkGray" CornerRadius="3" Background="{TemplateBinding Background}">
                        <Grid >
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Name="contentShadow" Style="{StaticResource ShadowStyle}">
                                <ContentPresenter.RenderTransform>
                                    <TranslateTransform X="1.0" Y="1.0" />
                                </ContentPresenter.RenderTransform>
                            </ContentPresenter>
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Name="content"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Control.Background">
                    <Setter.Value>
                        <ImageBrush ImageSource="../Images/F.png"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

将其放入内部并将此样式应用于按钮

 <Button x:Name="xbutton" Height="34"  
         Style="{DynamicResource MouseOverButtonStyle}">
 </Button>

Answer 3

添加Image作为Button的内容，并在图片上应用触发器。

    <Button>
        <Image Stretch="Fill">
            <Image.Style>
                <Style TargetType="Image">
                    <Setter Property="Source" Value="Images/Normal.png"/>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsMouseOver,
                            RelativeSource={RelativeSource Self}}" Value="True">
                            <Setter Property="Source" Value="Images/Hover.png"/>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>
    </Button>

按钮悬停的蓝色方形

3 个答案: