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.

Jawahar Jawahar · Accepted Answer · 2014-12-09T10:15:29

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>

Background of disabled control in wpf

1 Answers