具有背景图像和颜色 WPF 的按钮

Question

我的 wpf 应用中有一个按钮，看起来像：

    <Button x:Name="button" Content="" HorizontalAlignment="Left" Margin="402,10,0,0" VerticalAlignment="Top" Width="26" Height="28" BorderBrush="{x:Null}" Grid.Column="1" Foreground="White">
     <Button.Background>
            <ImageBrush ImageSource="cls_blk_btn.png" Stretch="None"/>
        </Button.Background>
    </Button>
  

现在你可以看到按钮有一个背景图像，是否可以有一个背景颜色来保持图像？？

我要做的是在鼠标输入时更改按钮的背景颜色（保持图像原样）：

      <Button.Style>
            <Style TargetType="Button">
                <Style.Triggers>
                    <EventTrigger RoutedEvent="Button.MouseEnter">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetProperty="Color" To="#FF484A4D" Duration="0:0:0.1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Button.MouseLeave">
                        <BeginStoryboard>
                            <Storyboard>
                                <ParallelTimeline  >
                                    <ColorAnimation Storyboard.TargetProperty="Color" To="#FF57626C" Duration="0:0:0.1" />
                                </ParallelTimeline>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Style.Triggers>
            </Style>
            </Button.Style>

问题是，由于背景是图像，我在尝试更改颜色时遇到异常...任何帮助保持图像不变并更改背景颜色？？？

这是我刚刚尝试过的

    <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Setter Property="Background">
                    <Setter.Value>
                        <ImageBrush ImageSource="resources\c_ml.bmp" Stretch="Fill"/>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background">
                            <Setter.Value>
                                <ImageBrush ImageSource="Resources\c_mo.bmp" Stretch="Fill"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>

但它给了我 'Provide value on 'System.Windows.Baml2006.TypeConverterMarkupExtension' 引发了异常。' 在第 45 行。引发异常的行是：

   <Style TargetType="{x:Type Button}">
                <Setter Property="Background">
                    <Setter.Value>
                        <ImageBrush ImageSource="resources\c_ml.png" Stretch="Fill"/>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>

知道怎么解决吗？

我修复了我的第二个错误，但有一个新问题

第二个错误是因为我没有在我的项目中包含图片。包含后，我有一个新问题。现在，在鼠标悬停时，按钮变为白色，我的意思是它改变了背景颜色而不是改变图像......怎么了？

Answer 1

您必须将图像放在背景中吗？如果您只想在按钮中显示带有背景的图像，将图像放入 Button.Content 并为背景设置动画会容易得多，例如：

<Button x:Name="button" HorizontalAlignment="Left" Margin="402,10,0,0" VerticalAlignment="Top" Width="260" Height="280" BorderBrush="{x:Null}" Foreground="White">
    <Button.Content>
        <Image  Source="image.png" Stretch="None" />
    </Button.Content>
    <Button.Background>
        <SolidColorBrush Color="#FF57626C" />
    </Button.Background>
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}" >
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Button.MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetProperty="Background.Color" To="#FF484A4D" Duration="0:0:0.1" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="Button.MouseLeave">
                    <BeginStoryboard>
                        <Storyboard>
                            <ParallelTimeline  >
                                <ColorAnimation Storyboard.TargetProperty="Background.Color" To="#FF57626C" Duration="0:0:0.1" />
                            </ParallelTimeline>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

Answer 2

自己解决了

    <Button.Content>
    <StackPanel>
        <Image Name="image1"  Source="pack://application:,,,/OffPo Diagnostic Tool;component/resources/c_ml.bmp" Stretch="Fill" >
            <Image.Style>
                <Style TargetType="Image">
                    <Setter Property="Visibility" Value="Visible" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="True">
                            <Setter Property="Visibility" Value="Collapsed" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>
        <Image Name="image2" Source="pack://application:,,,/OffPo Diagnostic Tool;component/resources/c_mo.bmp" Stretch="Fill" >
            <Image.Style>
                <Style TargetType="Image">
                    <Setter Property="Visibility" Value="Collapsed" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Value="True">
                            <Setter Property="Visibility" Value="Visible" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>                   
    </StackPanel>
</Button.Content>