CODEWITHSUNDEEP
wpfbuttonstyles
Fleve
Fleve

Reputation: 401

WPF Button Background when IsEnabled = False

I try to set a style for my button when it is not enabled so that the Background LinearGradientBrush is similar to the one set for the button when it is enabled. I have tried with Triggers but it seems that only the text Color is changing:

<Application x:Class="RSPolar.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <!--Windows style-->
        <Style TargetType="Window">

            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush  StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Color="Gray" Offset="1" />
                        <GradientStop Color="DarkGray" Offset="0.92" />
                        <GradientStop Color="Gray" Offset="0.9" />
                        <GradientStop Color="LightGray" Offset="0.88" />
                        <GradientStop Color="WhiteSmoke" Offset="0" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
        <!--Buttons style-->
        <Style TargetType="Button">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock FontWeight="Bold" FontSize="48" Foreground="#00FF00" Text="{Binding Path=Content,RelativeSource={RelativeSource AncestorType={x:Type Button}}}">
                            <TextBlock.Effect>
                                <DropShadowEffect BlurRadius="1" Color="DarkGray" ShadowDepth="1" Direction="120"/>
                            </TextBlock.Effect>
                        </TextBlock>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush  StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Color="Gray" Offset="1" />
                        <GradientStop Color="DarkGray" Offset="0.52" />
                        <GradientStop Color="Gray" Offset="0.5" />
                        <GradientStop Color="LightGray" Offset="0.48" />
                        <GradientStop Color="WhiteSmoke" Offset="0" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Button.Effect">
                <Setter.Value>
                    <DropShadowEffect Color="Black" Direction="320" ShadowDepth="5" BlurRadius="10" Opacity="0.5" />
                </Setter.Value>
            </Setter>
            <Setter Property="Button.Effect">
                <Setter.Value>
                    <BlurEffect Radius="1"></BlurEffect>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="ContentTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <TextBlock FontWeight="Bold" FontSize="48" Foreground="#FF0000" Text="{Binding Path=Content,RelativeSource={RelativeSource AncestorType={x:Type Button}}}">
                                    <TextBlock.Effect>
                                        <DropShadowEffect BlurRadius="1" Color="DarkGray" ShadowDepth="1" Direction="120"/>
                                    </TextBlock.Effect>
                                </TextBlock>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush  StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="Gray" Offset="1" />
                                <GradientStop Color="DarkGray" Offset="0.52" />
                                <GradientStop Color="Gray" Offset="0.5" />
                                <GradientStop Color="LightGray" Offset="0.48" />
                                <GradientStop Color="WhiteSmoke" Offset="0" />
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Application.Resources>
</Application>

Upvotes: 3

Views: 15962

Answers (1)

Sheridan
Sheridan

Reputation: 69959

You should not be defining the ContentTemplate property. If you want to change what the button looks like, you should define the Template property and add your Triggers into the ControlTemplate you define there instead.

Perhaps it would help if you read the Customizing the Appearance of an Existing Control by Creating a ControlTemplate page on MSDN? You can also find an example of using ControlTemplate.Triggers in the ControlTemplate Class page on MSDN.

However, here is a simple example:

In Resources:

<ControlTemplate x:Key="ExampleButton" TargetType="{x:Type Button}">
    <Border Background="LightGreen" BorderBrush="Black" BorderThickness="1" 
        CornerRadius="5" x:Name="Border" Padding="10">
        <ContentPresenter />    
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter TargetName="Border" Property="Background" Value="LightBlue" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

In XAML page:

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
    <Button Template="{StaticResource ExampleButton}" Content="Click me" />
    <Button Template="{StaticResource ExampleButton}" Content="Click me" 
        IsEnabled="False" />
</StackPanel>

UPDATE >>>

You just need to substitute the 'plain' Background value for your LinearGradientBrush as you have in your example:

In Resources:

<ControlTemplate x:Key="ExampleButton" TargetType="{x:Type Button}">
    <Border BorderBrush="Black" BorderThickness="1" 
        CornerRadius="5" x:Name="Border" Padding="10">
        <Border.Background>
            <LinearGradientBrush  StartPoint="0,0" EndPoint="0,1">
                <GradientStop Color="Gray" Offset="1" />
                <GradientStop Color="DarkGray" Offset="0.52" />
                <GradientStop Color="Gray" Offset="0.5" />
                <GradientStop Color="LightGray" Offset="0.48" />
                <GradientStop Color="WhiteSmoke" Offset="0" />
            </LinearGradientBrush>
        </Border.Background>
        <ContentPresenter />
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter TargetName="Border" Property="Background">
                <Setter.Value>
                    <LinearGradientBrush  StartPoint="0,0" EndPoint="0,1">
                        <GradientStop Color="Gray" Offset="1" />
                        <GradientStop Color="DarkGray" Offset="0.52" />
                        <GradientStop Color="Gray" Offset="0.5" />
                        <GradientStop Color="LightGray" Offset="0.48" />
                        <GradientStop Color="WhiteSmoke" Offset="0" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Why is Target Border setting the color of the Background of the button? Shouldn't it change the color of the border?

The Background of the Button is the Background of the Border.

Upvotes: 9

Related Questions