Gunnar Ulvaeus’ Scrapbook

Gunnar Ulvaeus' Scrapbook running on Surface RT.

If you’re visiting Stockholm I recommend a visit to the newly opened Abba The Museum situated at Djurgården.

I had the pleasure to work on one of the apps for the exhibition; Gunnar Ulvaeus’ Scrapbook. Gunnar is Björn’s father and the app is a digitized version of some of the newspaper and magazine clips he kept during the seventies.

Gunnar Ulvaeus' Scrapbook running on Surface RT.

The app runs on Surface RT tablets at the exhibition. As with most projects we were on a tight schedule and the first version only scratches the surface (no pun intended :P) of the possibilities of Windows Store Apps.

After the initial release we’ve gotten some feedback and are now working on some changes  to improve the app. For instance adding a flip view to make it possible to flip pages by swiping. Once we’re done I’ll get back with some examples on some of the design choices we did.

Meanwhile, get over to the museum and enjoy a piece of music history 😀

Remote Debugging in Visual Studio 2012 on Windows 8

A very handy feature of Visual Studio 2012 is debugging on a remote machine.

Especially if you as I develop on a plain old workstation with few or no sensors available. I came across this issue when playing with the orientation sensors. In this tutorial I will walk you through the steps you need to set up remote debugging.

Remote Tools for Visual Studio 2012

The Remote Tools allow remote debugging, remote testing and performance profiling on computers that don’t have Visual Studio installed.

You’ll find them on the Visual Studio 2012 download page: http://www.microsoft.com/visualstudio/eng/downloads. Scroll down to Additional Software to find the Remote Tools for Visual Studio 2012. Choose language and version (x86/x64/ARM) and hit download from the computer you want to use as remote machine. Once you have downloaded the package the installation procedure is straight forward.

Remote Tools for Visual Studio 2012 installation

Configuring the Remote Debugging Monitor

After the installation finishes start the Remote Debugger (you’ll need administrative privileges for the first run). This will bring up the configuration window.

You will also be taken through the procedure for acquiring a Developer Licence exactly like when you created your first Windows Store App project.

Remote Debugger first run

If the Windows Web Services API is not installed hit the Install button. Now choose at least one type of network for the remote debugger to communicate on.

Click on Configure remote debugging to start the Remote Debugging Monitor. You should see a message that the Msvsmon is running and awaiting connections.

Visual Studio Remote Debugging Monitor

From the Tools menu choose Options for changing port number, authentication method and maximum idle timeout for the monitor. By default the authentication mode is set to Windows Authentication and the idle timeout is set to 0 (= no timeout).

Remote Debugging Monitor Options

When using Windows Authentication mode you can set who can connect to the remote debugger from the Permissions dialog.

Remote Debugging Monitor Permissions Dialog

Setting up Visual Studio 2012

Now go back to your development machine and open up the Properties page for your project and select the Debug tab. In the Debug Start Options section select Remote Machine as target device and click Find to browse for your device. You can also select whether to use authentication or not and if you want to redeploy your app each time you start the debugger. This will allow you to run your app from a clean install each time, but you will loose any app state by doing so.

Remote Debugger Start Options

Select your remote device from the Remote Debugger Connections dialog.

Remote Debugger Connections

Taking it for a spin

Now you’re all set for remote debugging on another device. You’ll be able to configure break points and step through your code as if it was running on your local machine.

Running Remote

If you take a peek at the Remote Debugging Monitor on your device you’ll see the connection from your development computer.

Visual Studio Remote Debugging Monitor

Running the Remote Debugger as a service

Normally the Remote Debugger runs as a Windows application but it’s possible to configure it to run a a service instead (as usual you’ll need administrative privileges to set this up). Start the Remote Debugger Configuration Wizard and follow the screens to set it up. This can be advantageous for instance if you want to be able to debug server applications such as an ASP.NET web site without first having to log in to the remote computer.

First select which account will be used to run the service. The account will need “Log on as a service” privileges and network access rights. It’s also advisable to add this account to the Administrators group.

Visual Studio Remote Debugger Configuration Wizard Page 2

Then configure which networks the service will allow connections from.

Visual Studio Remote Debugger Configuration Wizard Page 3

Wrapping it up

I hope you’ve enjoyed this short tutorial on remote debugging in Visual Studio 2012. If you liked it or found it helpful – share it with your friends. If something seemed quirky – let me know! You can find some more information about the Visual Studio 2012 Remote Debugger at MSDN.

Windows 8 Charm Flyouts

After too much consideration about the looks and other fluff of On Error Resume Next I’m gonna kick off with a post instead.

One of the things that bugged me while writing DeTV was the lack of tools in the toolbox for creating the charm flyouts for the about and privacy policy pages. So after a quick search I stumbled upon the CharmFlyoutLibrary by John Michael Hauck which did the trick. Still a bit tricky to get working with a gridapps due to the fact that they lack a MainPage.xaml. John Michael of course has an in-depth post about this but I though I’d give it a go with a simple tutorial on how to get CharmFlyoutLibrary up and running with a gridapp.

Grid page with the settings flyout opened.
Grid page with the settings flyout opened

You can get hold of CharmFlyoutLibrary from the Windows Dev Center but I prefer using NuGet. I’ll be building an app from scratch in C# but you can of course follow the steps in your own app. We’ll start by creating a new Windows Store Grid App.

Creating a new Windows Store Grid App in MS Visual Studio 2012

From the Solution Explorer in your new project right click the References folder and pick “Manage NuGet Packages…”

Add Reference context menu

Type CharmFlyout in the search box and hit Install for adding the CharmFlyoutLibrary to your project.

Manage NuGet Packages dialog

You should see the CharmFlyoutLibrary under References in the Solution Explorer. Now create a User Control to host your flyouts and call it Flyouts.xaml.

[sourcecode language=”xml”]
<UserControl
x:Class=”CharmFlyoutGrid.Flyouts”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″
xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″
xmlns:cfl=”using:CharmFlyoutLibrary”
mc:Ignorable=”d”>

<Grid>
<cfl:CharmFlyout
x:Name=”cflAbout”
Heading=”About Flyout”
HeadingBackgroundBrush=”Purple”
ContentBackgroundBrush=”{StaticResource ApplicationPageBackgroundThemeBrush}”>
<StackPanel>
<TextBlock FontSize=”14″ TextWrapping=”Wrap” Padding=”0,0,0,7″>
Use Charm Flyouts for About, Privacy Policy and Settings etc.
</TextBlock>
<HyperlinkButton Click=”GotoTutorial” FontSize=”14″>
View Tutorial
</HyperlinkButton>
</StackPanel>
</cfl:CharmFlyout>
<cfl:CharmFlyout
x:Name=”cflSettings”
Heading=”Settings”
HeadingBackgroundBrush=”Purple”
ContentBackgroundBrush=”{StaticResource ApplicationPageBackgroundThemeBrush}”>
<StackPanel>
<CheckBox Content=”Setting 1″ FontSize=”14″ />
<CheckBox Content=”Setting 2″ FontSize=”14″ />
<CheckBox Content=”Setting 3″ FontSize=”14″ />
</StackPanel>
</cfl:CharmFlyout>
</Grid>
</UserControl>
[/sourcecode]

You can get rid of the DesignHeight and DesignWidth attributes from the UserControl tag since the dimensions will be controlled by the flyout. Add the CharmFlyoutLibrary namespace to your control by adding the attribute xmlns:cfl="using:CharmFlyoutLibrary" to the UserControl tag. I chose to call it cfl but you can call it whatever you like as long as it doesn’t interfere with any other namespace in your control.

For each flyout you need you create a <cfl:CharmFlyout>...</cfl:CharmFlyout> tag. You need to supply the x:Name and Heading attributes (well, technically the heading is not required but nice to have). The contents of the flyout will be everything wrapped within the StackPanel inside the CharmFlyout.

In the above example I have two flyouts: cflAbout and cflSettings.

Next you’ll need to add the code behind for handling the flyouts.

[sourcecode language=”csharp”]
using System;
using Windows.UI.ApplicationSettings;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace CharmFlyoutGrid
{
public sealed partial class Flyouts : UserControl
{
public Flyouts()
{
this.InitializeComponent();
// Add an eventlistener.
SettingsPane.GetForCurrentView().CommandsRequested += Flyouts_CommandsRequested;
}

void Flyouts_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
{
// Add commands for handling each flyout.
args.Request.ApplicationCommands.Add(new SettingsCommand(“a”, “About Flyouts”, (p) => { cflAbout.IsOpen = true; }));
args.Request.ApplicationCommands.Add(new SettingsCommand(“s”, “Settings”, (p) => { cflSettings.IsOpen = true; }));
}

// This method will fire whenever the hyperlink in the About flyout is clicked.
private async void GotoTutorial(object sender, RoutedEventArgs e)
{
var uri = new Uri(“http://hsballina.wordpress.com/2012/11/06/windows-8-charm-flyouts/”);
await Windows.System.Launcher.LaunchUriAsync(uri);
}
}
}
[/sourcecode]

There’s actually only two things you need to consider in the code behind:

  • Add an event listener in the constructor and
  • in the event handler method add a command for handling each flyout.

The GotoTutorial method is only for handling the click event for the HyperlinkButton in the about flyout.

The last thing you’ll need is to modify App.xaml.cs to use a frame that supports additional content and add your new flyout user control to it.  CharmFlyoutLibrary has one included; the CharmFrame.

Find the line in the OnLaunched method where the rootframe is assigned to a Frame and modify it to a CharmFrame instead.

[sourcecode language=”csharp”]
protected override async void OnLaunched(LaunchActivatedEventArgs args)
{
Frame rootFrame = Window.Current.Content as Frame;

// Do not repeat app initialization when the Window already has content,
// just ensure that the window is active

if (rootFrame == null)
{
// Assign the rootframe to a CharmFrame and the CharmContent to your flyout UserControl.
rootFrame = new CharmFlyoutLibrary.CharmFrame { CharmContent = new Flyouts() };
[/sourcecode]

Hit Ctrl+F5 to run your app and watch your flyouts by pressing the Windows key+I.

Close up of the settings flyout

CharmFlyoutLibrary is a great and simple tool for adding charm flyouts to your Windows Store app. Find out more about it on John Michael Hauck’s own blog.

Links