WebView Z Order Again–This time with AdControl

Back in October, when I was trying to get our Travel Advisories app release we ran across a problem with flyouts and z-order.

What happened was that when you popped open a flyout, our HTML views would appear on top of the flyout, as we’re working in XAML and not Javascript (Javascript have a flyout that works on the other hand, apparently)

It’s probably old news to some of you, but today we tried to add advertising to a Windows Store app, and came across the same problem.  The flyout has the advertisement floating on top of it.

I started with the samples Developer Walkthroughs (XAML) on the MSDN site, and sure enough my control suffered.  I was certain there had to be a solution, but as is typical for Windows development, it’s never easy to find it.

You end up on pages like this that fleetingly suggest UseStaticAnchor which is of course the actual solution, but the list of properties doesn’t even show it.

Other documentation around the web suggests Resume and Suspend which has now been superseded.

The moral of the story:  Set UseStaticAnchor=”True”  in your XAML.

What Microsoft Should Do

Maybe we’ll be lucky and in 8.1, they’ll get rid of this problem with the WebView Z Order.  I’m not holding my breath, and you probably shouldn’t either.

Windows 8 Selected Item Styles in a GridView control

While building our latest app, Travel Advisories I noticed that our selected items didn’t look a lot like the selected items elsewhere on Modern UI Style Apps.

My app was generating selections that looked like this:

The selection box has the tick, but it isn’t an outline, and it’s completely filled with the color.

Eventually, I worked out that this was caused by my xaml for the ItemTemplate

<GridView.ItemTemplate>
  <DataTemplate>
    <Grid   Width="400" Margin="3" HorizontalAlignment="Left" >
        <TextBlock Margin ="20,0,0,0" FontSize="32" 
          HorizontalAlignment="Left" VerticalAlignment="Top" 
          Text="{Binding Country}" />
    </Grid>
  </DataTemplate>
</GridView.ItemTemplate>

You’ll note that we don’t set any background and leave it transparent.  Having looked at some sample code, I found that most of the samples were setting a background color for the ItemTemplates, so changing the background of the grid to Black makes it look like this:

Now you can see that we have a completely black background, and the corner marked with the tick, much like the other samples.  But that still isn’t the look I was after.  What I wanted was a totally transparent background showing the background behind the text.

To accomplish that requires delving into the default ItemContainerStyle and a trip into blend to do it, so do the following

• Open the project in blend


• Right Click on your GridView in the Objects Window


• Expand Edit Additional Templates


• Expand Edit Generated Item Container


• Select Edit a copy, and edit the 290 additional lines of code

The one line of code your looking for looks like this

<Rectangle x:Name="SelectionBackground" Fill="Transparent" Margin="4" Opacity="0"/>

Where the Fill is set to a StaticResource Binding.

Having made that change, we now get the desired result:

Using the Snipping tool on Metro Style Apps on Windows 8

I was just about to start another blog post, and realized I had no idea how to get a snapshot of a portion of a metro Modern UI Style App screen.

The snipping tool works great, but there isn’t any way to actually see the metro app at the same time, (or so I thought, until I discovered the secret).

First start the snipping tool, by pressing the windows key, and typing snipping.

Next start your Microsoft Store App you want a snapshot of.

Now, the magic.  Press Control+Print Screen and the Snipping tool pops back on top

Finally, drag out your snipping area, just like you would on a desktop app and save the results.