WPF按钮背景问题

Question

我有一个有 25 个按钮的网格控件（网格只包含按钮）。对于每个按钮，我都设置了相同的图像，如下所示：

     ImageBrush brush = new ImageBrush();
     BitmapImage bitmap = new BitmapImage();
     bitmap.BeginInit();
     bitmap.UriSource = new Uri(@"pack://application:,,,/Images/notexplored.jpg", UriKind.RelativeOrAbsolute);
     bitmap.EndInit();
     brush.ImageSource = bitmap;

     foreach (UIElement uie in myGrid.Children)
     {
        var temp = uie as Button;
        temp.Background = brush;
     }

我的问题是，现在当我将鼠标悬停在按钮上时，我得到了这个（这是一个有问题的短视频）：https://www.dropbox.com/s/jb8fb29lrpimue5/ButtonIssue.avi

我该如何纠正这个问题？将图像作为背景应用到按钮后，如果我将鼠标悬停在按钮上，我不想看到默认按钮背景（外观）而不是应用的图像。

Answer 1

为了便于重新创建示例，我在这里将“StackPanel”作为容器。如果您不需要动态设置图像，我希望应用如下所示的样式应该获得具有您期望的外观和感觉的按钮，同时仍然允许使用事件等，就像使用典型的 WPF 按钮。

<StackPanel x:Name="sp">
        <StackPanel.Resources>
            <Style TargetType="{x:Type Button}" x:Key="btnWithImageBgStyle">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border CornerRadius="5" BorderBrush="{TemplateBinding BorderBrush}" >
                                <Border.Background>
                                    <ImageBrush ImageSource="pack://application:,,,/Tulip.jpg"/>
                                </Border.Background>
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </StackPanel.Resources>
        <Button x:Name="btn1" Width="100" Height="50" Content="Button1!" Style="{StaticResource btnWithImageBgStyle}" Click="btn1_Click"/>
        <Button x:Name="btn2" Width="100" Height="50" Content="Button2!" Style="{StaticResource btnWithImageBgStyle}"/>
        <Button x:Name="btn3" Width="100" Height="50" Content="Button3!" Style="{StaticResource btnWithImageBgStyle}"/>

Answer 2

如果您只需要显示图像并响应点击，那么按钮就太过分了。您可以只使用ContentControl。

Answer 3

而不是设置背景，只需添加一个新图像作为按钮的Content。一个小例子：

var b = new Button();

var bitmap = new BitmapImage();
bitmap.BeginInit();
bitmap.UriSource = new Uri(@"pack://application:,,,/floor.png", UriKind.RelativeOrAbsolute);
bitmap.EndInit();

var img = new Image {Source = bitmap};

b.Content = img;

Answer 4

您必须更改按钮的控制模板，使其不再响应MouseOver 事件。最简单的解决方案是这样的

<Window.Resources>
    <Style TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <ContentPresenter />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

这是一种隐式样式，应用于驻留在窗口中的每个按钮。在控件模板中，您可以更改按钮的外观以及它在状态更改时的行为（例如，当鼠标悬停在按钮上时）。

通常，控件模板会包含更多代码，但在此示例中，您只想拥有一个显示某些内容的按钮，但忽略鼠标悬停或悬停时可以看到的所有其他行为内容点击。您可以在 MSDN 上查看 WPF 中按钮的默认模板：http://msdn.microsoft.com/en-us/library/ms753328.aspx

我绝对建议您详细了解 WPF 中的样式和模板。这是一个很好的起点：http://msdn.microsoft.com/en-us/library/ms745683.aspx

如果您有任何问题，请随时发表评论。