c# - 以编程方式更改 WPF 按钮背景图像

Question

我正在尝试创建一个 <Button/>带有 png 图像作为背景和背景颜色。

注意png 图像 来源可能尚不清楚，所以我不能只将它们放在模板中。

我有一个 Style看起来像这样:

<Style x:Key="MyButton" TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border CornerRadius="0">
                    <Image Margin="0" Source="/MyApp;component/Images/my-image.png" Stretch="None" />
                    <Border.Style>
                        <Style TargetType="{x:Type Border}">
                            <Setter Property="Background" Value="LimeGreen" />
                        </Style>
                    </Border.Style>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这给了我一个按钮，在纯 LimeGreen 背景上有一个 png 图像。

我的 MainWindow.xaml看起来有点像这样:

<Button Style="{StaticResource MyButton}" Click="btnMine_Click" /* some other props */ />

其背后的代码是这样的:

private void btnMine_Click(object sender, RoutedEventArgs e)
{
    // TODO: change the image src on this button
    var myButton = sender as Button;

    // This won't work:
    // myButton.Border.Image.Source = getNewImageString();
}

如何从 /MyApp2;component/Images/my-image.png 更改图像源到别的地方？

Answer 1

Sigh, in Windows Forms it was literally one line. In WPF it looks like it will be several hundred.

那是因为它是您唯一可以放在 winforms 按钮中的东西。WPF 是一个真正的 UI 框架，而不是一些随机的半弃用恐龙，它只允许做默认的事情(顺便说一下，这看起来很糟糕)。

选项 1:将图像作为按钮的内容:

如果您只想在按钮中放置一个图像，没有别的，为什么不直接这样做呢？

        <Style TargetType="Button">
            <Setter Property="Background" Value="LimeGreen"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Background="{TemplateBinding Background}">
                            <ContentPresenter ContentSource="Content"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

然后:

     <Button>
        <!-- Background not set, defaults to what's set in the Style -->
        <Image Source="./ChessPieces/BlackKnight.png"/>
    </Button>
    <Button Background="Red">
        <Image Source="./ChessPieces/BlackBishop.png"/>
    </Button>
    <Button Background="Blue">
        <Image Source="./ChessPieces/BlackPawn.png"/>
    </Button>

    <!-- WPF's idea of "Dynamic" is not the same as win(hack)forms' -->
    <Button Background="White">
        <Image Source="{Binding SomeStringPropertyDefinedInAViewModel}"/>
    </Button>

结果:

选项 2(不是很优雅):使用 Tag 属性:

如果除了 Image 之外，您还想在 Button 中放入其他东西，您可以采用一种有点古怪的方法，将 ImageSource 放入 Button 的 Tag 属性中。

        <Style TargetType="Button">
            <Setter Property="Background" Value="LimeGreen"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Background="{TemplateBinding Background}">
                            <StackPanel Orientation="Horizontal">
                                <Image Source="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}"
                                       Height="50" Width="50"/>
                                <ContentPresenter ContentSource="Content"/>
                            </StackPanel>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

然后:

    <Button Tag="./ChessPieces/BlackKnight.png"
            Background="Blue"
            Foreground="White"
            Content="Some Text"/>

    <Button Tag="./ChessPieces/BlackBishop.png"
            Background="LightGray">
        <CheckBox Content="A CheckBox!" VerticalAlignment="Center"/>
    </Button>

结果:

选项 3:使用 Attached Property

与选项 2 相同，但使用在别处声明的属性，例如:

 <Button ButtonImage.Source="./ChessPieces/BlackBishop.png"
         <!-- etc -->

选项 4:创建自定义控件:

创建一个派生自 Button 的类(不带 XAML 的 .cs 文件)并添加一个 DependencyProperty 来保存图像，然后将模板设置为它并使用该值。

选项 5:MVVM

创建一个 ButtonViewModel，或者实际使用一个 DelegateCommand在 ViewModel 中声明以绑定(bind) Button 的属性。

不是一个选项:遍历可视化树并更改代码中的 Image.Source。

这不是您想要做的事情。这根本不是一个好方法。

我可以永远继续下去，但我必须去 sleep 。如果您想让我详细说明这些方法中的任何一种，请告诉我。