Style grid layout cover controls

Question

I'm trying set backcolor for all grid layout in my project using resource dictionary. This is code of file where i modify my grid.

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Theme">

<SolidColorBrush x:Key="GridBackColor" Color="Red"/>
<Style TargetType="Grid">
    <Setter Property="Background" Value="{StaticResource GridBackColor}"/>
    <Setter Property="Opacity" Value="0.5"/>
</Style> 
</ResourceDictionary>

After set Background property all controls on grid were disappear, but when i set opacity i can only say that all controls are under grid layout and any mouse events not work.

Here how it's look like:

this is my window code.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="10*"/>
        <ColumnDefinition Width="125"/>
        <ColumnDefinition Width="20"/>
        <ColumnDefinition Width="125"/>
        <ColumnDefinition Width="10*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="10*"/>
        <RowDefinition Height="40"/>
        <RowDefinition Height="40"/>
        <RowDefinition Height="20"/>
        <RowDefinition Height="30"/>
        <RowDefinition Height="10*"/>
    </Grid.RowDefinitions>

    <Label Content="Name" Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="3" FontSize="20"
           HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
    <TextBox Name="TbName" Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="3" FontSize="20"
              HorizontalAlignment="Stretch" />

    <Button Content="Add" Name="BtAdd" Grid.Column="1" Grid.Row="4" IsDefault="True" 
            HorizontalAlignment="Right" VerticalAlignment="Center" Width="100" Click="BtAdd_Click"/>
    <Button Content="Close" Name="BtClose" Grid.Column="3" Grid.Row="4" IsCancel="True"
            HorizontalAlignment="Left" Width="100" Click="BtClose_Click"/>

</Grid>

Answer 1

When you applied you style globally to all the Grids in your application, the ones used inside other controls will also be affected. For instance take a look at the Window control (from the vs designer, left click on the window > Edit Template > Edit a copy)

<Window.Resources>
    <ControlTemplate x:Key="WindowTemplateKey" TargetType="{x:Type Window}">
        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
            <Grid>
                <AdornerDecorator>
                    <ContentPresenter/>
                </AdornerDecorator>
                <ResizeGrip x:Name="WindowResizeGrip" HorizontalAlignment="Right" IsTabStop="false" Visibility="Collapsed" VerticalAlignment="Bottom"/>
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="ResizeMode" Value="CanResizeWithGrip"/>
                    <Condition Property="WindowState" Value="Normal"/>
                </MultiTrigger.Conditions>
                <Setter Property="Visibility" TargetName="WindowResizeGrip" Value="Visible"/>
            </MultiTrigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <Style x:Key="WindowStyle1" TargetType="{x:Type Window}">
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
        <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Window}">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                        <AdornerDecorator>
                            <ContentPresenter/>
                        </AdornerDecorator>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="ResizeMode" Value="CanResizeWithGrip">
                <Setter Property="Template" Value="{StaticResource WindowTemplateKey}"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</Window.Resources>

Notice the Grid defined in the Border inside the ControlTemplate .

An easy fix to your issue is to assign a key to your style and assign it to the Grid manually:

<Style TargetType="Grid" x:Key="GridStyle">
    <Setter Property="Background" Value="{StaticResource GridBackColor}"/>
    <Setter Property="Opacity" Value="0.5"/>
</Style>

To use it:

<Grid Style="{StaticResource GridStyle}">
...
</Grid>