using style in WPF

Question

In my application I use ShinyBlue.xaml resourse Dictionary which has this code for GroupBox control:

    <Style TargetType="{x:Type GroupBox}">

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type GroupBox}">
                <Grid SnapsToDevicePixels="true">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="6" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="6" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="6" />
                    </Grid.RowDefinitions>
                    <Border Grid.ColumnSpan="4" Grid.RowSpan="4" Background="{DynamicResource LightBrush}" CornerRadius="4,4,4,4" BorderThickness="1,1,1,1" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

   </Style>

These style common for all app. But in one of the forms I want to change background to Transparent. I want override only Background Property but it's not work

<Style TargetType="GroupBox" BasedOn="{StaticResource {x:Type GroupBox}}">
    <Setter Property="Background" Value="Transparent"/>
</Style>

code above does not work properly

How can I change GroupBox Background in specific form ?.

Answer 1

Your ControlTemplate does not actually use the Background property, but it assigns a concrete value to the Border's Background property, namely {DynamicResource LightBrush}. Now, when you set the Background property locally, this has no effect because the Border still uses the LightBrush resource.
You have to use TemplateBindings to make the correct Background appear in your control like this:

<Style TargetType="{x:Type GroupBox}">
    <!-- set default value for the template -->
    <Setter Property="Background" Value="{DynamicResource LightBrush}" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type GroupBox}">
                <Grid SnapsToDevicePixels="true">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="6" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="6" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="6" />
                    </Grid.RowDefinitions>
                    <!-- Note the new TemplateBinding for the Background property! -->
                    <Border Grid.ColumnSpan="4" Grid.RowSpan="4" Background="{TemplateBinding Background}" CornerRadius="4,4,4,4" BorderThickness="1,1,1,1" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

</Style>

This way, the Border actually uses the GroupBox's Background property. To make it use the LightBrush by default, I have added a Setter which defines the default value for the Background property. This value can then be overridden by locally setting the Background property on your GroupBox.