Avoid inheritance of opacity between nested Grids

Question

I have a Grid with its background as black an opacity to 0.5 and in it is there another grid with opacity to 1 and background as White. But the inner grid still shows as its opacity was 0.5

    <Grid Grid.ColumnSpan="2" Grid.RowSpan="2" Background="Black" Opacity="0.5" Visibility="{Binding Alertar, Converter={cnv:boolToVisibilityConverter}}">
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"></RowDefinition>
            <RowDefinition Height="5*"></RowDefinition>
            <RowDefinition Height="2*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid Grid.Row="1" Background="Black" Opacity="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="3*"/>
                <ColumnDefinition Width="7*"/>
                <ColumnDefinition Width="3*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="10*"/>
                <RowDefinition Height="1.5*"/>
            </Grid.RowDefinitions>
            <Rectangle Grid.ColumnSpan="3" Grid.RowSpan="2" Fill="Black" Opacity="1"/>

            <TextBlock Grid.Column="1" Margin="0,15,0,0" Text="{Binding ReporteInconsistencias}" />
            <Button Grid.Column="1" Grid.Row="1" Content="Aceptar" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10"/>
        </Grid>
    </Grid>

I'm trying to emulate a win8 alert screen there is another way to do this? or How to prevent this inheritance? why this happen?

Answer 1

A little messy but this should work i think. Basically controls are stacked. So having the grid come after the first grid it shouldn't effect the opacity. May need to be tweaked, but something along the lines of this should work:

  <Grid Grid.ColumnSpan="2" Grid.RowSpan="2" Visibility="{Binding Alertar, Converter={cnv:boolToVisibilityConverter}}">
    <Grid.RowDefinitions>
        <RowDefinition Height="2*"></RowDefinition>
        <RowDefinition Height="5*"></RowDefinition>
        <RowDefinition Height="2*"></RowDefinition>
    </Grid.RowDefinitions>

    <Grid Grid.RowSpan="3" Background="Black" Opacity="0.5" />        

    <Grid Grid.Row="1" Background="Black" Opacity="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="3*"/>
            <ColumnDefinition Width="7*"/>
            <ColumnDefinition Width="3*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="10*"/>
            <RowDefinition Height="1.5*"/>
        </Grid.RowDefinitions>
        <Rectangle Grid.ColumnSpan="3" Grid.RowSpan="2" Fill="Black" Opacity="1"/>

        <TextBlock Grid.Column="1" Margin="0,15,0,0" Text="{Binding ReporteInconsistencias}" />
        <Button Grid.Column="1" Grid.Row="1" Content="Aceptar" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10"/>
    </Grid>
</Grid>