按钮悬停上的蓝色方块答案

【问题标题】：Blue Square on Button Hover按钮悬停上的蓝色方块
【发布时间】：2014-04-06 17:01:45
【问题描述】：

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

谢谢

【问题讨论】：

标签： c# xml wpf button user-interface

【解决方案1】：

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

查看示例：WPF - How to create image button with template

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

将Image 添加为Button 的内容，并改为在Image 上应用触发器。

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

【讨论】：