xamlwindows-phonepanorama-controlopacitymask

Adding transparent filter to Panorama background like Market place


I am trying to add a transparent layer to my panorama background to dim the background image so the content can be displayed regardless of the colours in the images. Just like in the WP7 Market Place or the Pictures Hub on the phone.

I have played with the Opacity Mask. created a transparent image in paint.net to be used as opacity mask.

<ImageBrush x:Name="MyOpacityBrush" Stretch="Fill" ImageSource="../Images/imageFilter.png" />
    <ImageBrush x:Name="panoramaBrush" ImageSource="../Images/cloudsPanorama.jpg" />

And use it in my Panorama like:

<controls:Panorama x:Name="ViewPanorama" Visibility="Visible" Background="{StaticResource panoramaBrush}" OpacityMask="{StaticResource MyOpacityBrush}" />

However, this dims the whole page including any content displayed as if the transparent image is on top of everything. Is there a trick I am missing here. Perhaps add the opacity to the Grid?


Solution

  • Set the opacity of the background image (in xaml) to 0.6. Black or White text will be readable.