Apply opacity for Grid and don't apply for its children Controls

Question

I apply opacity 0.75 for the Grid and all children which has Grid also take the opacity.

Is it possible to exclude child Controls and don't apply opacity for them?

Thank you!

XAML

<Grid  x:Name="RootGrid" Opacity="0.75" Visibility="Visible" ClipToBounds="False"
       VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
    <local:MarqueeVer x:Name="marquee1" Duration="30" ClipToBounds="True"
                      RenderTransformOrigin="0.5,0.5" Margin="0,0,0,0"
                      VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
                      Background="Transparent" Opacity="1">
        <StackPanel Name="lstItems" FlowDirection="LeftToRight" Orientation="Vertical"
                    VirtualizingStackPanel.IsVirtualizing="True"
                    VirtualizingStackPanel.VirtualizationMode="Recycling">
        </StackPanel>
    </local:MarqueeVer>
</Grid>

UPDATE:

I found some solution here but is any simpler solution?

You just have to calculate the right alpha channel for each color.

Can you post here your xaml code for a better understanding? — Eduardo Brites, May 17 '12 at 13:24
Why do you want to set the opacity of the grid itself? Grid is generally just used for layout, and isn't visible. — Robaticus, May 17 '12 at 13:38
Maybe this will help: http://stackoverflow.com/questions/2650576/how-do-you-override-the-opacity-of-a-parent-control-in-wpf — Zabavsky, May 17 '12 at 13:39
@Robaticus my grid takes background image, colors. So it is visible. I just need to apply opacity to Grid only and not to its child. — NoWar, May 17 '12 at 13:40
In your example, which controls do you NOT want to have the opacity changed? — Eduardo Brites, May 17 '12 at 13:40
If you only want to change the opacity of the grid's background, then you need to set the opacity=0.75 only in the background image. — Eduardo Brites, May 17 '12 at 13:41
@EduardoBrites Ok. I will try. But what I Apply some Brush to the Grid? WHat I can do in thhat case? Hmmm Perhapc I can create some BitmapImage and apply some Color and then opacity... Hmmm — NoWar, May 17 '12 at 13:45
@EduardoBrites Put your comments like an answer I will mark it as an answer. It works for me! (+++) — NoWar, May 17 '12 at 13:54

score 8 · Accepted Answer · answered May 17 '12 at 13:56

8

If you only want to change the opacity of the grid's background, then you need to set the opacity=0.75 only in the background image.

But what I Apply some Brush to the Grid? WHat I can do in thhat case?

In the that case set the opacity in the brush

answered May 17 '12 at 13:56

Eduardo Brites

4,597
5
36
51

Jesús Otero · Answer 2 · 2015-03-13T19:20:42.717

To achieve this effect, you can add a Rectangle as a child of the Grid (but as a sibling to the other elements) and apply the Background and Opacity to the Rectangle. This way, the change of opacity doesn't affect the other children of the Grid.

<Grid Name="Root">
<Rectangle Name="Background" Opacity="0.75">
<Rectangle.Fill>

</Rectangle.Fill>
</Rectangle>
<Label>Hello World</Label>
</Grid>

I know this is probably a dirty solution, but it did the trick for me.

score 0 · Answer 3 · answered May 17 '12 at 13:41

You can't make child more opaque than parent, but you can use brushes with different opacity, to achieve some overlay effects for example.

Like this:

<Window x:Class="stackoverflowviewbox.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <SolidColorBrush Color="White" Opacity=".5" x:Key="WhiteHalfOpacityBrush"/>
</Window.Resources>
<Grid Background="Green">
    <Border BorderThickness="1" BorderBrush="Black" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Grid Background="{StaticResource WhiteHalfOpacityBrush}">
            <Label>
                Hello world.Hello world.Hello world.Hello world.Hello world.Hello world.
            </Label>
        </Grid>
    </Border>
</Grid>

Apply opacity for Grid and don't apply for its children Controls

3 Answers3

Linked