Background of disabled control in wpf

Question

I've created custom button user control. It must works on touch screen so I must use Animations instead of set property on IsClicked trigger. It works fine, but I also have to make gray background gradient of border when UserControl IsEnabled property is setted to false.

That is my code:

<UserControl x:Class="TicketApplication.Controls.RectangleButton"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         x:Name="button"
         Width="255"
         Height="85"
         mc:Ignorable="d">
<Grid x:Name="grid"
      HorizontalAlignment="Stretch"
      VerticalAlignment="Stretch">
    <Border x:Name="border"
            Width="Auto"
            Height="Auto"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            CornerRadius="20">
        <Border.Background>
            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                <GradientStop Offset="0.138" Color="{Binding Path=BackgroundGradientTopColor}" />
                <GradientStop Offset="0.982" Color="{Binding Path=BackgroundGradientBottomColor}" />
            </LinearGradientBrush>
        </Border.Background>
        <TextBlock x:Name="text"
                   Width="Auto"
                   Height="Auto"
                   Margin="0"
                   HorizontalAlignment="Stretch"
                   VerticalAlignment="Center"
                   FontFamily="Open Sans"
                   FontSize="{Binding Path=TextSize,
                                      FallbackValue=40}"
                   FontWeight="Bold"
                   Foreground="White"
                   ScrollViewer.VerticalScrollBarVisibility="Disabled"
                   Text="{Binding Path=Text,
                                  FallbackValue='Test'}"
                   TextAlignment="Center"
                   TextWrapping="Wrap" />
        <Border.Style>
            <Style TargetType="{x:Type Border}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=IsEnabled}" Value="false">
                        <Setter Property="Background">
                            <Setter.Value>
                                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                    <GradientStop Offset="0.138" Color="#3d4144" />
                                    <GradientStop Offset="0.982" Color="#3d4144" />
                                </LinearGradientBrush>
                            </Setter.Value>
                        </Setter>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Border.Style>
    </Border>
    <Grid.Triggers>
        <EventTrigger RoutedEvent="Grid.MouseDown">
            <BeginStoryboard>
                <Storyboard Completed="Storyboard_Completed">
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)">
                        <EasingColorKeyFrame KeyTime="0:0:0:0.0" Value="#3d4144" />
                        <EasingColorKeyFrame KeyTime="0:0:0:0.15" Value="{Binding Path=BackgroundGradientTopColor}" />
                    </ColorAnimationUsingKeyFrames>
                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)">
                        <EasingColorKeyFrame KeyTime="0:0:0:0.0" Value="#3d4144" />
                        <EasingColorKeyFrame KeyTime="0:0:0:0.15" Value="{Binding Path=BackgroundGradientBottomColor}" />
                    </ColorAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>
</Grid>

As you can see I made trigger for IsEnabled property, but it doesn't work.

Answer 1

LocalValue take higher precedence than the value coming from triggers. For more information, please visit this link . To solve your problem, instead of setting the default background directly, set it through Style setter. Following is the modified style of Border.

<Style TargetType="{x:Type Border}">
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0.5,0"
                                    EndPoint="0.5,1">
                <GradientStop Offset="0.138"
                                Color="{Binding Path=BackgroundGradientTopColor}" />
                <GradientStop Offset="0.982"
                                Color="{Binding Path=BackgroundGradientBottomColor}" />
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <DataTrigger Binding="{Binding Path=IsEnabled}"
                        Value="false">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0.5,0"
                                            EndPoint="0.5,1">
                        <GradientStop Offset="0.138"
                                        Color="#3d4144" />
                        <GradientStop Offset="0.982"
                                        Color="#3d4144" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </DataTrigger>
    </Style.Triggers>
</Style>