Wednesday 31 October 2012

Updating to Windows 8

Updating ought to have been easy, but I found it incredibly frustrating.

First, I went to the upgrade site, but after getting all the way through the purchase process, it stated that the upgrade wasn’t for commercial use.

OK.  Off to Curry’s to reserve a DVD which also prevents me having to download the whole thing: Get Windows 8 upgrade on DVD from Currys at £49.99 and apparently doesn’t have the commercial restriction, a premium of £25.00.

When I got there I started looking at a new laptop as well, but that’s another story.

So, I’m now installing from the DVD I purchased.

The first thing I need to do is uninstall the incompatible apps (some Dell stuff, an Intel USB3 driver?, and Security Essentials!?) followed by a reboot.

I chose to keep my existing, files, programs and settings.

After quite a long delay, my machine installed devices, then spent quite awhile longer preparing. 

Another reboot, and “Moving your settings” was the next task.

Following that, a personalize choice, followed by connecting to the network via wireless (I’ll do that later).  I then chose express settings, and entered my previous admin password, and chose sign in without a Microsoft account.  After “Finalising your settings” a disconcerting black screen before “Hi” Finally appeared along with the W8 intro stuff.

It eventually booted into W8, so after the initial confusion about licensing, not too bad.

Installing the Windows Phone 8 SDK was a different matter though.  At this moment, still not done, so although I have Windows 8 Pro, it doesn’t do what it needs to.

Wednesday 17 October 2012

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:

transparent

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:


opaque


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:


semitransparent

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.

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

startsnipping

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