Windows 8 WebView - xaml

Question

I have ran into problem, that WebVie is always on top, i have LoadingGrid (black background with image on it) it haz Z.Index =5.
First thing i show Loading screen, and when WebView finishes loading i hide Loading screen and fade in WebView.
But the problem is that WebView even with Opacity set to 0 - IS VISIBLE! And on top of my loading screen - is there a workaround? Because the only way i found to make WebView invisible set to collapsed - but then my effect doesn't have any reason...
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ShowHideWebView">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="HideWebView"/>
<VisualState x:Name="ShowWebView">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="wv1" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="18*"/>
</Grid.RowDefinitions>
<!--
<Button x:Name="bBack" BorderThickness="0" Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Stretch" Click="bBackClick" >
<Button.Background>
<ImageBrush ImageSource="Assets/back_button.png" Stretch="UniformToFill"/>
</Button.Background>
</Button> -->
<WebView x:Name="wv1" HorizontalAlignment="Stretch" Visibility="Collapsed" Grid.Row="1" VerticalAlignment="Stretch" LoadCompleted="wv1_LoadCompleted" Opacity="0" />
<Image HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="0" Source="Assets/back_button.png" Tapped="backClick" />
<Grid x:Name="LoadingScreen" Grid.Row="1" Visibility="Collapsed" Canvas.ZIndex="5">
<Grid.Background>
<SolidColorBrush Color="Black" Opacity="0.5"/>
</Grid.Background>
<Image Height="100" Width="100" Opacity="0.5" Source="Assets/loading.gif" Stretch="Fill">
<Image.RenderTransform>
<RotateTransform x:Name="SpinningRotateTransform" CenterX="50" CenterY="50" />
</Image.RenderTransform>
</Image>
</Grid>
</Grid>

Answer 1

You have to stick to Visibility property because when opacity is 0 at that time WebView would be part of visual tree and hence it will be on top of each element. While if it's collapsed it's no longer part of visual tree. I would recommend to try WebViewBrush to show fade effect. When effect is over show WebView.