CODEWITHSUNDEEP
c#wpfxamlgrid
CaptainMuffin
CaptainMuffin

Reputation: 23

WPF make container background not wash out the contents of children

Simple code:

<UserControl x:Class="MonitravLite.UserControls.Foo"
         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" 
         xmlns:local="clr-namespace:MonitravLite.UserControls"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<StackPanel>
    <!-- 1st example with setting background -->
    <Grid Background="Blue" Opacity="0.5">
        <TextBlock Text="Grid background"/>
    </Grid>
    <!-- 2nd example with grid on top-->
    <Grid>
        <TextBlock Text="Grid on top"/>
        <Grid Background="Blue" Opacity="0.5"/>
    </Grid>
</StackPanel>

Grid vs Grid

I have various child controls that display states. When any of these children are in a error state, I want the background of the of the container to change color. e.g..e. if one of the children is in an error state, the background should be red.

However if I set the container background (grid in this example), it washes out the children.

If I do the second approach and lay a grid over the top - this doesn't happen?

I have tried setting the Panel.Zindex, but this doesn't help.

What am I missing to make the first example render like the second?

Upvotes: 1

Views: 213

Answers (1)

Denis Schaf
Denis Schaf

Reputation: 2727

if you set the opacity of the grid all its children will inherit this property and become transparent as well! So instead of making the grid transparent choose a transparent color as a background.

instead of this line:

    <Grid Background="Blue" Opacity="0.5">

try this:

    <Grid Background="#7f0000FF">

Upvotes: 2

Related Questions