设置按钮背景图像 wpf答案

【问题标题】：Setting Button background Image wpf设置按钮背景图像 wpf
【发布时间】：2014-02-21 06:00:52
【问题描述】：

我想设计一个带有 2 个背景图像的按钮（启用时第一个，禁用时第二个）。如下所示。我如何在按钮样式中做到这一点？

尝试过这样的事情。但是 Content 不是这里的属性。

   <Style TargetType="{x:Type Button}"  x:Key="LinkButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border x:Name="Overlay" CornerRadius="2">
                        <ContentPresenter/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="True">
                           <!--<Setter TargetName="Overlay" Property="Content" Value="Red"/>-->
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

【问题讨论】：

stackoverflow.com/questions/15892290/…
我希望在 XAML 中完成。

标签： c# .net wpf visual-studio-2010 xaml

【解决方案1】：

如果您想在 xaml 中执行此操作，则使用画布在按钮内放置两个图像。使用编辑样式触发更改按钮内所需图像的可见性。

我想你能明白这一点。如果真的有用就标记有用谢谢

【讨论】：

【解决方案2】：

您可以使用 DataTrigger 更改按钮的背景图像。下面的链接可能会有所帮助。

WPF Change button background image when clicked

【讨论】：

【解决方案3】：

你可以像这样在 Style 和 Converter 的帮助下做到这一点：

不透明度转换器：

using System;
using System.Globalization;
using System.Windows.Data;

namespace EnableButton
{
    public class OpacityConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return (bool) value ? 1 : 0.5;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

您的 Xaml：

<Window x:Class="EnableButton.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:EnableButton"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <local:OpacityConverter x:Key="OpacityConverter"/>
        <Style x:Key="DisableIcon" TargetType="Image">
            <Setter Property="Opacity" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}, Path=IsEnabled, Converter={StaticResource OpacityConverter}}"/>
        </Style>
    </Window.Resources>
    <StackPanel>
        <Button Height="24" IsEnabled="False">
            <Image Style="{StaticResource DisableIcon}" Source="Open_22.png"/>
        </Button>
    </StackPanel>
</Window>

现在，如果您更改按钮的 IsEnable 属性，您将看到结果。当父按钮在 OpacityConverter 中禁用时，我将 Image 的 Opacity 属性从 100% 更改为 50%，因此您可以根据需要修复此问题另一个数字。

更新

我对你的问题稍微思考了一下。我认为如果按钮被禁用，不仅可以更改图像的不透明度，而且可以将图像图片转换为单色。所以我找到了这个解决方案（添加对 Microsoft.Expression.Effects.dll 的引用并将 xmlns:ee="http://schemas.microsoft.com/expression/2010/effects" 添加到表单之前尝试）：

<Window x:Class="EnableButton.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:EnableButton"

        xmlns:ee="http://schemas.microsoft.com/expression/2010/effects"

        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>

        <Style x:Key="DisableImageStyle" TargetType="Image">
            <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Button}}, Path=IsEnabled}" Value="False">
                    <Setter Property="Opacity" Value="0.4"/>
                    <Setter Property="Effect">
                        <Setter.Value>
                            <ee:EmbossedEffect/>
                            <!--This effect is also looks nice-->
                            <!--<ee:MonochromeEffect/>-->
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>

    </Window.Resources>
    <StackPanel>

        <Button Height="40" IsEnabled="False">
            <Image Style="{StaticResource DisableImageStyle}" Source="Open_22.png"/>
        </Button>

    </StackPanel>
</Window>

请注意，我现在不使用任何转换器！

【讨论】：

我可以将此样式存储为资源字典，以便跨按钮使用它。
如果您的意思是创建一个资源字典文件并将其合并到 App.xaml 中，那么肯定 :)
@user1687824 我稍微更新了我的答案。请参阅更新部分
Microsoft.Expression.Effects.dll 在 4.0 中是否可用？
@user1687824 这个库随 Blend 一起提供，有 4.0 和 4.5 版本。确保您已安装 Microsoft Blend。

【解决方案4】：

我不确定您是如何设置按钮样式的，但如果您能够将两个图像都放入样式中，那么您可以在更改 IsEnabled 时更改可见性。

   <Style TargetType="{x:Type Button}"  x:Key="LinkButton">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border x:Name="Overlay" CornerRadius="2">
                    <Image x:Name="Enabled" Source="{StaticResource EnabledImg}"/>
                    <Image x:Name="Disabled" Source="{StaticResource DisabledImg}" Visibility="Collapsed"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                       <Setter TargetName="Disabled" Property="Visibility" Value="Visible"/>
                       <Setter TargetName="Enabled" Property="Visibility" Value="Collapsed"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

【讨论】：