設置按鈕背景圖像WPF

Question

我想設計一個帶有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>

Answer 1

如果要在xaml中執行此操作，則使用畫布在按鈕內有兩個圖像。 使用觸發的編輯樣式可以更改按鈕內所需圖像的可見性。

我認為您可以理解。 如果確實有用，請標記為有用，謝謝

Answer 2

您可以像下面這樣在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中禁用父按鈕時，我將圖像的 不透明度屬性從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>

請注意，我現在不使用任何轉換器！

Answer 3

您可以使用DataTrigger更改按鈕的背景圖像。 以下是該鏈接可能會有所幫助。

單擊WPF更改按鈕背景圖像

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