更改WPF按钮的背景图像编程 [英] Change WPF button background image programatically

问题描述

我试图创建一个<按钮/方式> 与后台和背景颜色的PNG图像

的 png图片的来源可能还不知道，所以我不能只是把
他们的模板。

我有一个风格，看起来像这样：

 <风格X：键=用作MyButton的TargetType =按钮> 
< setter属性=模板> 
< Setter.Value> 
<的ControlTemplate的TargetType =按钮> 
< BORDER CornerRadius =0> 
<图像保证金=0源=/ MyApp的;组件/图片/我-image.png拉伸=无/> 
< Border.Style> 
<风格的TargetType ={X：边框类型}> 
< setter属性=背景VALUE =暗绿/> 
< /样式和GT; 
< /Border.Style> 
< /边框> 
< /控件模板> 
< /Setter.Value> 
< /二传手> 
< /样式和GT; 
  

这给了我一个按钮，在坚实的暗绿的背景之上的PNG图像。

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

 <按钮样式={StaticResource的用作MyButton}点击=btnMine_Click/ *一些其他道具* / /> 
  

和它背后的代码是这样的：

 私人无效btnMine_Click（对象发件人，RoutedEventArgs E）
 {
 // TODO：更改此按钮
变种的图片src = myButton的发件人作为按钮; 
 
 //这将不工作：
 // myButton.Border.Image.Source = getNewImageString（）; 
} 
  

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

解决方案

感叹，在Windows窗体这是字面上一行。在WPF看起来这将是数百个。

这是因为它是你可以放在一个按钮的WinForms的嘛。
WPF是一个真正的UI框架，而不是一些随机半过时的恐龙，只允许做默认的东西（其中的方式看起来可怕）。

方法1：将图像作为按钮的内容：

如果你只是想？把图像中的按钮，没有别的，为什么不这样做。

 <风格的TargetType =按钮> ; 
< setter属性=背景VALUE =暗绿/> 
< setter属性=模板> 
< Setter.Value> 
<的ControlTemplate的TargetType =按钮> 
<边框背景={TemplateBinding背景}> 
< ContentPresenter ContentSource =内容/> 
< /边框> 
< /控件模板> 
< /Setter.Value> 
< /二传手> 
< /样式和GT; 
  

然后：

 <按钮和GT; 
<！ - 背景没有设置，默认为什么在样式设置 - > 
<图像源=./ ChessPieces / BlackKnight.png/> 
< /按钮> 
<按钮背景=红> 
<图像源=./ ChessPieces / BlackBishop.png/> 
< /按钮> 
<按钮背景=蓝> 
<图像源=./ ChessPieces / BlackPawn.png/> 
< /按钮> 
 
<！ - 的动态WPF的想法是不一样的胜利（黑客）的形式 - > 
<按钮背景=白> 
<图像来源={结合SomeStringPropertyDefinedInAViewModel}/> 
< /按钮> 
  

结果：

选项2（不是很优雅）：使用标签属性：

如果，除了图像，你要把别的按钮里面，你可以求助于把ImageSource的按钮的标签属性有点哈克的方法。

 <风格的TargetType =按钮> 
< setter属性=背景VALUE =暗绿/> 
< setter属性=模板> 
< Setter.Value> 
<的ControlTemplate的TargetType =按钮> 
<边框背景={TemplateBinding背景}> 
< StackPanel的方向=横向> 
<图像来源={绑定标记，的RelativeSource = {的RelativeSource TemplatedParent}}
高度=50WIDTH =50/> 
< ContentPresenter ContentSource =内容/> 
< / StackPanel的> 
< /边框> 
< /控件模板> 
< /Setter.Value> 
< /二传手> 
< /样式和GT; 
  

然后：

 <按钮标签=./ ChessPieces / BlackKnight.png
 =背景的蓝色
前景=白
含量=一些文本/> 
 
将按钮标签=./ ChessPieces / BlackBishop.png
背景=浅灰色> 
<复选框CONTENT =的CheckBox！ VerticalAlignment =中心/> 
< /按钮> 
  

结果：

方法3：使用< A HREF =htt​​p://msdn.microsoft.com/en-us/library/ms749011.aspx相对=nofollow>附加属性

同选项2，但使用其他声明的属性，例如：

 <按钮ButtonImage.Source =./ ChessPieces / BlackBishop.png
<！ - 等 - > 
  

方法4：创建自定义控制：

创建一个类（的.cs没有XAML文件）按钮，从派生，并添加的DependencyProperty 保存图像，然后设置模板。这一点，使用该值

方法5：MVVM

创建一个 ButtonViewModel ，或实际使用 DelegateCommand 在视图模型声明。绑定按钮的属性。

不是一个选项：移动可视树和修改 Image.Source 代码。

这不是你想要做。这不是一个好办法都没有。

我可以永远继续下去，但我必须去睡觉。如果你要我详细说明这些办法只是让我知道。

I'm trying to create a <Button/> with a png image for the background AND a background color.

The png image source may not yet be known, so I can't just put them in the template.

I've got a Style that looks like this:

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

which gives me a button with a png image on top of a solid LimeGreen background.

My MainWindow.xaml looks somewhat like this:

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

and the code behind it is like this:

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();
}

How do I change the image source from /MyApp2;component/Images/my-image.png to something else?

解决方案

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

That's because it was the ONLY thing you could place in a button in winforms. WPF is a true UI framework, not some random semi-deprecated dinosaur that only allows to do the default stuff (which by the way looks horrible).

Option 1: Place the Image as Button's Content:

If you just want to place an Image in the button, and nothing else, why not just do that?

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

Then:

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

Result:

Option 2 (not very elegant): Use the Tag Property:

If, in addition to the Image, you want to put something else inside the Button, you can resort to a somewhat hacky approach of putting the ImageSource in the Button's Tag property.

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

Then:

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

Result:

Option 3: Use an Attached Property

Same as option 2, but using a property declared elsewhere, for example:

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

Option 4: Create a Custom Control:

Create a class (.cs file with no XAML) derived from Button and add a DependencyProperty to hold the image, then set the template to that and use that value.

Option 5: MVVM

Create a ButtonViewModel, or actually use a DelegateCommand declared in the ViewModel to bind the Button's properties.

Not an Option: Traverse the Visual Tree and change the Image.Source in code.

That's not something you will want to do. It's not a good approach at all.

I could go on forever, but I have to go to sleep. If you want me to elaborate on any of these approaches just let me know.

这篇关于更改WPF按钮的背景图像编程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！