Change the Grid Background color with EventTrigger on MouseDown

Question

I want Change the Grid Background in my UserContorl in XAML EventTrigger MouseDown Below is mine code:

<UserControl x:Class="OneCardApp.Ex.EntranceGuard.ControlManager.MapMonitoring.Map.MonitorDoor"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" Loaded="UserControl_Loaded" FontSize="10" MouseDown="UserControl_MouseDown" MouseMove="UserControl_MouseMove" MouseUp="UserControl_MouseUp">
<Grid Height="60" Width="50" Name="content">
    <Grid.Resources>
        <GradientStop x:Name="Stop2" Color="Blue" Offset="1" x:Key="s"></GradientStop>
        <Style TargetType="{x:Type Grid}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="blue"></Setter>
                </Trigger>
                <Trigger Property="IsFocused" Value="True">
                    <Setter Property="Background" Value="red"></Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Grid.Resources>
    <Grid.RowDefinitions>
        <RowDefinition Height="36"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <Image Name="img_door" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="0" Source="/OneCardApp.Ex;component/image/36/companyInfo.png"></Image>
    <Label Name="lbl_name" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1"></Label>
</Grid>

I try to create add IsPressed trigger, but it don't have. so,How do I do that. Thanks.

Answer 1

Try this

and choose color according to your requirement

     <Grid Height="60" Width="50" Name="content" Background="Transparent" Focusable="True">
    <Grid.Resources>
        <GradientStop x:Name="Stop2" Color="Blue" Offset="1" x:Key="s"></GradientStop>
        <Style TargetType="{x:Type Grid}">
            <Style.Triggers>
                <EventTrigger RoutedEvent="MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)">
                                <EasingColorKeyFrame KeyTime="0" Value="Blue" />
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="GotKeyboardFocus">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)">
                                <EasingColorKeyFrame KeyTime="0" Value="Red" />
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseDown">
                    <BeginStoryboard>
                        <Storyboard >
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)">
                                <EasingColorKeyFrame KeyTime="0" Value="Green" />
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Style.Triggers>
        </Style>
    </Grid.Resources>
    <Grid.RowDefinitions>
        <RowDefinition Height="36"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <Image Name="img_door" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="0" Source="/OneCardApp.Ex;component/image/36/companyInfo.png"></Image>
    <Label Name="lbl_name" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1"></Label>
</Grid>