CODEWITHSUNDEEP
xamlwindows-phone-8
Thierry
Thierry

Reputation: 6457

Disable opacity on Textblock when grid's opacity is set for WP8

I've posted a similar question in the past but never quite resolved it and so here I am again.

In my layout grid, I have an image which takes the full area but I also display another grid which is vertically aligned to the bottom, has its background color set and its opacity set to .5.

This part works fine.

Now, I want to display another grid within that grid which will contain another image (a logo) and a TextBlock which contains a description.

My problem is that both the image and textblock are being dimmed. While I have no problem with the logo being dimmed, I do want to keep my description fully opaque but can't seem to be able to do this.

Is there a way to achieve this? Note I'm trying to build a custom tile for WP8.

Here is the code:

<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Image Stretch="UniformToFill"  Source="/Assets/0.jpeg" ></Image>
    <Grid Background="#0F558E" Opacity="0.5" Visibility="Visible" Height="100" VerticalAlignment="Bottom">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Image Source="/Assets/Tiles/FlipCycleTileSmall.png" Width="100" Height="100" Grid.Column="0" Opacity="1" ></Image>
        <TextBlock Foreground="White" FontSize="30" Text="This is a simple description of the article" TextWrapping="Wrap" Margin="10,0,30,0" Grid.Column="1" Opacity="1" />
    </Grid>
</Grid>

Thanks.

Upvotes: 0

Views: 85

Answers (1)

Paul Abbott
Paul Abbott

Reputation: 7211

As you found out, everything that is a child of that grid is going to have a 0.5 opacity, and any opacity settings on the children are going to be relative to that.

Could you just overlay a third grid on top of the second that has the same sizing and contains your image and text? I don't have anything in front of me to test this at the moment, but something like:

<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Image Stretch="UniformToFill"  Source="/Assets/0.jpeg" ></Image>
    <Grid Background="#0F558E" Opacity="0.5" Visibility="Visible" Height="100" VerticalAlignment="Bottom">
    </Grid>
    <Grid Visibility="Visible" Height="100" VerticalAlignment="Bottom">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Image Source="/Assets/Tiles/FlipCycleTileSmall.png" Width="100" Height="100" Grid.Column="0" Opacity="1" ></Image>
        <TextBlock Foreground="White" FontSize="30" Text="This is a simple description of the article" TextWrapping="Wrap" Margin="10,0,30,0" Grid.Column="1" Opacity="1" />
    </Grid>
</Grid>

Upvotes: 2

Related Questions