WPF: I don't want to pass Style to Child Elements - wpf

Question

I have a UserControl that whose Root Element is a Grid which is supposed to take a Style with Red Background Color and an Opacity Animation that makes it flash. There are two Child Grids inside that Root Grid. They are supposed to keep their original Color (and all their Children too), which is working fine. But I don't want them to get the Animation, which they currently do. So the whole UI is flashing right now, but I only want the parts that turn Red to flash, the Rest should not flash. I already tried to apply an empty Style to the Child Grids and also tried a Style with a fixed Opacity of 1. Both didn't work. Here's my XAML:
<UserControl.Resources>
<ResourceDictionary>
<Style TargetType="{x:Type Grid}" x:Key="AdminModeStyle">
<Style.Resources>
<Storyboard x:Key="flashAnimation" >
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" AutoReverse="True" Duration="0:0:0.5" RepeatBehavior="Forever" />
</Storyboard>
</Style.Resources>
<Style.Triggers>
<DataTrigger Binding="{Binding IsAdminMode}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Name="flash" Storyboard="{StaticResource flashAnimation}" />
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="flash"/>
</DataTrigger.ExitActions>
<Setter Property="Background" Value="Red"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsAdminMode}" Value="False">
<Setter Property="Background" Value="{StaticResource PrimaryBackground}"/>
</DataTrigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type Grid}" x:Key="NoStyle">
<Setter Property="Opacity" Value="1"></Setter>
</Style>
</ResourceDictionary>
</UserControl.Resources>
<Grid Style="{StaticResource AdminModeStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Style="{StaticResource NoStyle}" Grid.Column ="0" Grid.Row ="1">
....Content
</Grid>
<Grid Style="{StaticResource NoStyle}" Grid.Column ="1" Grid.Row ="1" >
....Content
</Grid>
</Grid>
Can you please help me?

Answer 1

Opacity is automatically applied to all child items. To fix this, you need to place your content grid on top of the animated grid and not nested inside of it.
<Grid>
<Grid Style="{StaticResource AdminModeStyle}" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid
Grid.Row="1"
Grid.Column="0">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="This is a test..." />
</Grid>
<Grid
Grid.Row="1"
Grid.Column="1">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="This is a test..." />
</Grid>
</Grid>
</Grid>