Blog

posts

Windows 8 XAML Tips - App Background Image

11 Comments
By Fons Sonnemans, 28-12-2012

Adding a background image to a Windows 8 Store application in XAML can be done in a few different ways. If your app supports navigation between pages you don't want to reload the background image when you navigate to a different page. This doesn't look right on slower ARM devices like the Surface, you will see the image flicker. In this blog I will demonstrate how to set the background image in 3 different ways. The last one without the image flickering.

Setup Demo App

I created a new project in Visual Studio using the 'Grid App (XAML)' template. This creates a project in which 3 pages are defined. The user can navigate between those pages.

Then I added a background image to the Assets folder and named it 'Background.jpg'. I found this image by using this Bing Image search in which I searched for 'Background Black'. Instead of using the default black background I want to use my 'Background.jpg' for all my pages.

Solution 1 - Set Grid.Background property in XAML

The root control of all pages (GroupDetailPage.xaml, GroupDetailPage.xaml and ItemDetailPage.xaml) is a Grid control. You can set the Background property of this Grid control to an ImageBrush. The ImageSource is set to the '/Assets/Background.jpg' image. Make sure you do this for all pages in your project.

<Grid Style="{StaticResource LayoutRootStyle}">
    <Grid.RowDefinitions>
        <RowDefinition Height="140"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
        
    <Grid.Background>
        <ImageBrush ImageSource="/Assets/Background.jpg"
                    Stretch="UniformToFill" />
    </Grid.Background>

Solution 2 - Set Grid.Background property in the LayoutRootStyle

Instead of setting the Grid.Background property in each page you can also set it once in the 'LayoutRootStyle' style. The All my pages have this style set on the root Grid control. This style is defined in the 'StandardStyles.xaml' which can be found in the 'Common' folder. The 'Background' property of the style is set to the 'ApplicationPageBackgroundThemeBrush' static resource which makes it black. You have to replace it with the ImageBrush.

<Style x:Key="LayoutRootStyle"
        TargetType="Panel">
    <!--<Setter Property="Background"
            Value="{StaticResource ApplicationPageBackgroundThemeBrush}" />-->

    <Setter Property="Background">
        <Setter.Value>
            <ImageBrush ImageSource="/Assets/Background.jpg"
                        Stretch="UniformToFill" />
        </Setter.Value>
    </Setter>

Don't forget to remove the Grid.Background from all pages.

    <Grid Style="{StaticResource LayoutRootStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        
        <!--<Grid.Background>
            <ImageBrush ImageSource="/Assets/Background.jpg"
                        Stretch="UniformToFill" />
        </Grid.Background>-->

Solution 3 - Set Frame.Background property in the App.xaml.cs

Each time you navigate to a new page in Solution 1 and 2 the background image is loaded and shown. On slow devices you will see the image flicker. To solve this problem you can use my preferred solution.

Navigation is implemented using a Frame control which is set as the root of the application in the App.xaml.cs file. You can set the Background of this Frame to an ImageBrush (lines 13 - 18).

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)
    {
        // Create a Frame to act as the navigation context and navigate to the first page
        rootFrame = new Frame();

        // Set the application background Image
        rootFrame.Background = new ImageBrush {
            Stretch = Windows.UI.Xaml.Media.Stretch.UniformToFill,
            ImageSource =
                new BitmapImage { UriSource = new Uri("ms-appx:///Assets/Background.jpg") }
        };

        //Associate the frame with a SuspensionManager key                                
        SuspensionManager.RegisterFrame(rootFrame, "AppFrame");

Don't forget to remove the Grid.Background from the style.

<Style x:Key="LayoutRootStyle"
        TargetType="Panel">
    <!--<Setter Property="Background"
            Value="{StaticResource ApplicationPageBackgroundThemeBrush}" />-->

    <!--<Setter Property="Background">
        <Setter.Value>
            <ImageBrush ImageSource="/Assets/Background.jpg"
                        Stretch="UniformToFill" />
        </Setter.Value>
    </Setter>-->

The background image is now shown on each page and only loaded once on startup. This makes navigation fast en fluid.

Closure and download

I hope you like my solution. You can download my code below.

Cheers,

Fons

ShareMediaTask on Windows Phone 8

9 Comments
By Fons Sonnemans, 3-12-2012

The new Windows Phone 8 SDK has a new ShareMediaTask class which can be used to share your pictures from code. I wanted to use this class to share a WriteableBitmap. You can use it to share the picture using NFC (Tap+Send), apps or to social media like Twitter or Facebook. In this post I will explain how to implement this.

Demo App

I have created a demo app in which a Rectangle and a Ellipse are drawn inside the default ContentPanel grid. When you tap the Share button the ContentPanel is used as the input for a WriteableBitmap. This WriteableBitmap is than saved so it can be shared using the ShareMediaTask().

The XAML

The XAML is really basic.

<Grid x:Name="LayoutRoot"
      Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <StackPanel x:Name="TitlePanel"
                Grid.Row="0"
                Margin="12,17,0,28">
        <TextBlock Text="SHARE MEDIA DEMO"
                    Style="{StaticResource PhoneTextNormalStyle}"
                    Margin="12,0" />
        <TextBlock Text="mainpage"
                    Margin="9,-7,0,0"
                    Style="{StaticResource PhoneTextTitle1Style}" />
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel"
          Grid.Row="1"
          Margin="12,0,12,0"
          Grid.RowSpan="2">
        <Rectangle Fill="Blue"
                    HorizontalAlignment="Left"
                    Height="253"
                    Margin="101,113,0,0"
                    Stroke="Black"
                    VerticalAlignment="Top"
                    Width="192" />
        <Ellipse Fill="#FF42B51B"
                  HorizontalAlignment="Left"
                  Height="236"
                  Margin="175,237,0,0"
                  Stroke="Black"
                  VerticalAlignment="Top"
                  Width="226" />
    </Grid>
        
    <Button Content="Share"
            VerticalAlignment="Top"
            Grid.Row="2"
            Click="ButtonShare_Click" />

</Grid>

The code

In the ButtonShare_Click() method a screenshot of the ContentPanel is created using a WriteableBitmap. This WriteableBitmap is then saved to the MediaLibrary. The Path of the ShareMediaTask object is set using the GetPath() extension method on the picture class. The Microsoft.Xna.Framework.Media.PhoneExtensions namespace is brought into scope using a 'using' statement in the header of the class. Finally I called the Show() method on the ShareMediaTask object.

using Microsoft.Xna.Framework.Media.PhoneExtensions;

...

private void ButtonShare_Click(object sender, RoutedEventArgs e) {
    var bmp = new WriteableBitmap(this.ContentPanel, null);
    var width = (int)bmp.PixelWidth;
    var height = (int)bmp.PixelHeight;
    using (var ms = new MemoryStream(width * height * 4)) {
        bmp.SaveJpeg(ms, width, height, 0, 100);
        ms.Seek(0, SeekOrigin.Begin);
        var lib = new MediaLibrary();
        var picture = lib.SavePicture(string.Format("test.jpg"), ms);

        var task = new ShareMediaTask();

        task.FilePath = picture.GetPath();

        task.Show();
    }
}

I have also tried to save the WriteableBitmap to the IsolatedStorage. But the ShareMediaTask couldn't cope with that (bummer). I hope Microsoft will fix that in a future version of the SDK.

I really want to thank Clemens Schotte for solving this part of the puzzle.

Closure and download

I hope you like my solution. You can download my code here.

Cheers,

Fons

Windows 8 XAML Tips - Rotated GridViewItems

0 Comments
By Fons Sonnemans, 1-11-2012

I'm working on a new Windows 8 Store app and in this app I needed a GridView in which the GridView items are rotated a few degrees randomly. In this blog I will explain how I implemented this using Styling and Templating and a few lines of C# code.

The result of this all will look like this.

Create project and GridViewItem style

To demonstrate my solution I created a new project in Blend for Visual Studio using the 'Grid App (XAML)' project template. This template creates a project in which the start page (GroupedItemsPage.xaml) shows a GridView with some sample data. In this page I selected the itemGridView control. From the Object menu I selected the Edit Additional Styles -> Edit Generated Item Container -> Edit a Copy... option. This will create a GridViewItem style including a copy of the Template.

In the Create Style Resource dialog I didn't change the 'Define in' radio buttons. It must be set to 'This document' because I will implement an event in the GridViewItem Template which is not allowed when you select another option.

The ItemContainerStyle property of the GridView is set to the new GridViewItem style.

Rotate randomly

Blend shows me the Template of each GridViewItem. I selected the OuterContainer (Border) in the Objects and Timeline window. In the Property window I changed the RenderTransform rotation angle to 5. This created a CompositeTransform item inside the RenderTransform property of the border.

Then I saved the project and edited it in Visual Studio. I do this because I want to write some code which is much easier in VS2012 because of its better IntelliSense support.

In Visual Studio I added the Loaded event to the OuterContainer (Border). In the OuterContainer_Loaded_1 event handler I can rotate the angle randomly using a few lines of code. I have tried other solutions like Binding and TemplateBinding but that didn't work.

The code of the OuterContainer_Loaded_1 event handler is relatively simple. It just generated a random angle value from -6 to + 6. and sets it on the CompositeTransform.

private static Random random = new Random((int)DateTime.Now.Ticks);

private void OuterContainer_Loaded_1(object sender, RoutedEventArgs e) {
    var border = sender as Border;
    var transform = border.RenderTransform as CompositeTransform;
    transform.Rotation = random.Next(12) - 6;
}

The Catch

As is often the case, there is a limitation with this solution. If the GridView has a SelectionMode set other than None you cannot use the 'Swipe to Select' touch gesture. Using the right mouse button to select an item works perfectly. I hope I can find a solution for this problem.

Closure and download

I hope you like my solution. You can download my code here.

Cheers,

Fons

Windows 8 Javascript Tips - TypeScript support

0 Comments
By Fons Sonnemans, 9-10-2012

Microsoft announced TypeScript last week. TypeScript is a superset of JavaScript that combines type checking and static analysis, explicit interfaces, and best practices into a single language and compiler. It is an open source programming language developed by Microsoft. If you haven't investigated yet make sure you do. The related links below might help you.

What Microsoft didn't do (yet) is add TypeScript support to JavaScript Windows Store apps. In this blog I will explain how to add this support to Visual Studio so you can use TypeScript in all your Windows 8 apps.

Step 1 - Install TypeScript

You can install TypeScript for Visual Studio 2012 using an MSI setup which you can download here. Make sure you first close all Visual Studio instances to avoid installation problems.

Step 2 - Install Web Essentials 2012

The latest version of Web Essentials 2012 extension adds support for TypeScript preview and compilation. When you save a TypeScript (.ts) file it will be compiled into a JavaScript (.js) file. So make sure you install it using the Visual Studio menu Tools, Extensions and Updates. If you already installed it make sure you update it to the latest version.

Step 3 - Add TypeScript ItemTemplate

If you try to add a TypeScript item to the 'js' folder you will see that there is no TypeScript template available. The setup from Microsoft did not (yet) add this template to Visual Studio. My solution for this problem was quite easy. I copied the following file 'C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\Extensions\msfz1qy5.oca\~IC\IT\CSharp\1033\f.zip' to my '\My Documents\Visual Studio 2012\Templates\ItemTemplates\JavaScript' folder. I also renamed the file to TypeScript.zip. Next I opened the zip file and edited the 'f.vstemplate' file. In the file I changed the ProjectType element from CSharp to JavaScript.

To make life easy you can download my TypeScript.zip file so you don't have to repeat my steps. Make sure you place it in the right ItemTemplate folder.

Step 4 - Create a JavaScript Project

This step is really easy. Just create a Project in Visual studio using one of the JavaScript Windows Store templates.

Step 5 - Add TypeScript item

When you add a new Item to the 'js' folder you can now select the TypeScript template.

The preview feature of Web Essentials 2012 shows you how your TypeScript file is compiled into JavaScript.

You should also change the Package Action of the Demo.ts file to 'None'. Otherwise the file will also be included in the APPX file which will make it larger. Only the Demo.js file is required.

TypeScript options

Web Essentials 2012 also supports some options which you might want to change. I only want to compile my TypeScripts on Build and not on every Save. You can also turn preview off but that didn't work on my computer. I hope they will fix it.

Closure

Now it is up to you to write your own TypeScript files. I love the ability to write clean OO code using: classes, interfaces, modules (namespaces), type annotations, compile time type checking and arrow functions (similar to Lambda Expression in C#). I hope this blog will help you write great Windows Store apps.

Cheers,

Fons

Related Links

Windows 8 XAML Tips - Detect App Deactivation

1 Comments
By Fons Sonnemans, 17-9-2012

Detecting when an Windows 8 Store app is deactivated isn't as easy as you would expect. In the Windows Phone project templates you get the Application_Launching(), Application_Activated(), Application_Deactivated() and Application_Closing() methods in the App.xaml.cs. But those methods don't exists in the Windows Store project templates. There is an OnSuspending() method but you can't use it to detect deactivation. You use it to store your data when suspending the app. This will problably go off a few seconds later than deactivation.

Solution

To solve this problem I have used the Activated event of the CoreWindow class. This event can also be used to detect deactivation inspite of it's name. The WindowActivatedEventArgs has a WindowActivationState property of the type CoreWindowActivationState. This enum holds the values CodeActivated, Deactivated and PointerActivated. This event also is fired when the app is closed.

Example

In the following example I have created an app in which a Timer updates a counter every second. In the constructor I have subscribed the page on the Activated event of the CoreWindow object using the GetForCurrentThread() method. The eventhandler stops the timer when the app is deactivead or closed. It restarts the timer when the app is activated again. The counter value is written to the LocalSettings on deactivation and close of the app. In the constructor of the MainPage the value is read from the LocalSettings so the app continues with the last used counter value.

public sealed partial class MainPage : Page {

    private DispatcherTimer _timer = new DispatcherTimer();
    private int _counter;
    private const string Key = "Counter";

    public MainPage() {
        this.InitializeComponent();

        this._timer.Interval = TimeSpan.FromSeconds(1);
        this._timer.Tick += _timer_Tick;

        object value;
        if (ApplicationData.Current.LocalSettings.Values.TryGetValue(Key, out value)) {
            _counter = (int)value;
            this.textBlockCounter.Text = _counter.ToString();
        }

        CoreWindow.GetForCurrentThread().Activated += MainPage_Activated;
    }

    void _timer_Tick(object sender, object e) {
        this._counter++;
        this.textBlockCounter.Text = _counter.ToString();
    }

    void MainPage_Activated(CoreWindow sender, WindowActivatedEventArgs args) {

        if (args.WindowActivationState == CoreWindowActivationState.Deactivated) {
            _timer.Stop();
            Windows.Storage.ApplicationData.Current.LocalSettings.Values[Key] = _counter;
        } else {
            _timer.Start();
        }
    }
}

The MainPage.xaml only contains a Grid and the TextBox which displays the counter value.

<Page
    x:Class="DetectAppDeactivation.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DetectAppDeactivation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="textBlockCounter"
                   Text="0"
                   FontSize="150"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center" />
    </Grid>
</Page>

Closure and download

I hope you like my solution. You can download my code here.

Cheers,

Fons

Windows 8 XAML Tips - Async Search Suggestions

3 Comments
By Fons Sonnemans, 22-8-2012

There are a lot of examples on the web how you can add Search Suggestions to the Search Charm of a Windows 8 Metro application. But all the examples I found only demonstrate how to implement a synchronous version. In this blog I will show you how you can do this also asynchronous. I use this technique to fill my Search Suggestion by calling a web service asynchronous. Something which is very common because your data will problably be stored in the Web/Cloud.

Implement Search Charm

To demonstrate the solution I created a new project in Visual Studio 2012 using the 'Grid App (XAML)' project template. Next I added the 'Search Contract' item template to the project. This adds an SearchResultsPage to the project and adds the Search Declaration to the Package.appxmanifest.

In my App.cs file I added the InitSearch() method which I call from the OnLaunched() method. In this InitSearch() method I subscribe the app on SuggestionsRequested event of the current SearchPane view.

sealed partial class App : Application
{
    /// <summary>
    /// Initializes the singleton Application object.  This is the first line of authored code
    /// executed, and as such is the logical equivalent of main() or WinMain().
    /// </summary>
    public App()
    {
        this.InitializeComponent();
        this.Suspending += OnSuspending;
    }

    /// <summary>
    /// Invoked when the application is launched normally by the end user.  Other entry points
    /// will be used when the application is launched to open a specific file, to display
    /// search results, and so forth.
    /// </summary>
    /// <param name="args">Details about the launch request and process.</param>
    protected override async void OnLaunched(LaunchActivatedEventArgs args)
    {
        // Do not repeat app initialization when already running, just ensure that
        // the window is active
        if (args.PreviousExecutionState == ApplicationExecutionState.Running)
        {
            Window.Current.Activate();
            return;
        }

        // Create a Frame to act as the navigation context and associate it with
        // a SuspensionManager key
        var rootFrame = new Frame();
        SuspensionManager.RegisterFrame(rootFrame, "AppFrame");

        if (args.PreviousExecutionState == ApplicationExecutionState.Terminated)
        {
            // Restore the saved session state only when appropriate
            await SuspensionManager.RestoreAsync();
        }

        if (rootFrame.Content == null)
        {
            // When the navigation stack isn't restored navigate to the first page,
            // configuring the new page by passing required information as a navigation
            // parameter
            if (!rootFrame.Navigate(typeof(GroupedItemsPage), "AllGroups"))
            {
                throw new Exception("Failed to create initial page");
            }
        }

        // Place the frame in the current Window and ensure that it is active
        Window.Current.Content = rootFrame;
        Window.Current.Activate();

        InitSearch();
    }

    private void InitSearch() {
        var view = SearchPane.GetForCurrentView();
        view.SuggestionsRequested += view_SuggestionsRequested;

        //view.QueryChanged += view__QueryChanged;
        //view.QuerySubmitted += view_QuerySubmitted;
        //view.ResultSuggestionChosen += view_ResultSuggestionChosen;
        //view.VisibilityChanged += view_VisibilityChanged;
    }

    private void view_SuggestionsRequested(SearchPane sender, 
                                    SearchPaneSuggestionsRequestedEventArgs args) {
        try {
            var list = Enumerable.Range(1, 4).Select(n => args.QueryText + " " + n);
            args.Request.SearchSuggestionCollection.AppendQuerySuggestions(list);
        } catch (Exception ex) {
            Debug.WriteLine(ex.Message);
        }
    }

In this example the SuggestionsRequested() method creates 4 query suggestions which are the querytext with the suffix 1 to 4. This will look like this if you run the app and start a search for the word 'demo'.

Problem

To simulate an async network call I added an awaited call to the Task.Delay() method in my view_SuggestionsRequested() method (line 5). I also added the async keyword to make the compiler happy. It is required if you use the await keyword.

private async void view_SuggestionsRequested(SearchPane sender, 
                                             SearchPaneSuggestionsRequestedEventArgs args) {
    try {
        // Simulate an async network call
        await Task.Delay(100);
        var list = Enumerable.Range(1, 4).Select(n => args.QueryText + " " + n);

        args.Request.SearchSuggestionCollection.AppendQuerySuggestions(list);
    } catch (Exception ex) {
        Debug.WriteLine(ex.Message);
        // A method was called at an unexpected time. (Exception from HRESULT: 0x8000000E)
    }
}

If I run the app the Search Suggestions don't work anymore. The catch blocks writes this message of the exception to the output window: 'A method was called at an unexpected time. (Exception from HRESULT: 0x8000000E)'.

Solution

The solution is quite simple but badly documented in the MSDN documentation of the SearchPane.SuggestionsRequested event. It states in a note that if you want to respond to this event asynchronously, you must use SearchPaneSuggestionsRequestedEventArgs.Request.GetDeferral. So in my code I retrieved the Deferral (line 5). And I called the Complete() method on it after the list is appended to the SearchSuggestionCollection (line 14).

private async void view_SuggestionsRequested(SearchPane sender,
                                             SearchPaneSuggestionsRequestedEventArgs args) {
    try {
        // Get the deferral
        var deferral = args.Request.GetDeferral();

        // Simulate an async network call
        await Task.Delay(100);
        var list = Enumerable.Range(1, 4).Select(n => args.QueryText + " " + n);

        args.Request.SearchSuggestionCollection.AppendQuerySuggestions(list);

        // Mark the deferral as Complete
        deferral.Complete();
    } catch (Exception ex) {
        Debug.WriteLine(ex.Message);
    }
}

This fixed the problem and my app runs like a charm ;-)

Closure and download

I hope you like my solution. You can download my code here.

Cheers,

Fons

Windows 8 XAML Tips - Settings Demo

0 Comments
By Fons Sonnemans, 10-8-2012

In my previous blog post I explained how you can use the PaneThemeTransition from the Animation Library to show a task pane. In this blog post I want to use this technique to open my Settings and About task panes from the Settings Charm. I will try to make it easier by introducing a TaskPanePopup helper class.

TaskPanePopup

You construct an instance of the TaskPanePopup class using a task pane, in most cases this will be a user control. In the constructor a Popup control is created and initialized with the Child (the task pane) and the ChildTransitions (PaneThemeTransition coming from the right). The Width of the task pane must be set to calculate the position of the Popup. The task pane will be shown in a Popup using the animation when you call the Show() method on the instance.

public class TaskPanePopup {

    private Popup _popup;
    public FrameworkElement TaskPane { get; private set; }

    public TaskPanePopup(FrameworkElement taskPane) {
        if (double.IsNaN(taskPane.Width)) {
            throw new ArgumentException("TaskPane width must be set");
        }
        this.TaskPane = taskPane;

        this._popup = new Popup {
            IsLightDismissEnabled = true,
            ChildTransitions = new TransitionCollection(),
            Child = taskPane,
        };

        this._popup.ChildTransitions.Add(new PaneThemeTransition {
            Edge = EdgeTransitionLocation.Right
        });
    }

    public void Show() {
        this.TaskPane.Height = Window.Current.Bounds.Height;
        this._popup.SetValue(
                Canvas.LeftProperty,
                Window.Current.Bounds.Width - this.TaskPane.Width
        );
        this._popup.IsOpen = true;
    }

}

Settings Charm

To demonstrate the use of my class I have created a sample appliation. This app must have a Settings and About command in the Settings Charm. Therefore I have subscribed the app on the CommandsRequested event of the current SettingsPane (line 30). In the event handler I have created two SettingsCommand objects and added them to the ApplicationCommands. These Commands create the TaskPanePopup objects in their handlers and shows them.

sealed partial class App : Application
{
    /// <summary>
    /// Initializes the singleton Application object.  This is the first line of authored code
    /// executed, and as such is the logical equivalent of main() or WinMain().
    /// </summary>
    public App()
    {
        this.InitializeComponent();
        this.Suspending += OnSuspending;
    }

    /// <summary>
    /// Invoked when the application is launched normally by the end user.  Other entry points
    /// will be used when the application is launched to open a specific file, to display
    /// search results, and so forth.
    /// </summary>
    /// <param name="args">Details about the launch request and process.</param>
    protected override async void OnLaunched(LaunchActivatedEventArgs args)
    {
        // Do not repeat app initialization when already running, just ensure that
        // the window is active
        if (args.PreviousExecutionState == ApplicationExecutionState.Running)
        {
            Window.Current.Activate();
            return;
        }

        // Init SettingsPane
        SettingsPane.GetForCurrentView().CommandsRequested += App_CommandsRequested;

        // Create a Frame to act as the navigation context and associate it with
        // a SuspensionManager key
        var rootFrame = new Frame();
        SuspensionManager.RegisterFrame(rootFrame, "AppFrame");

        if (args.PreviousExecutionState == ApplicationExecutionState.Terminated)
        {
            // Restore the saved session state only when appropriate
            await SuspensionManager.RestoreAsync();
        }

        if (rootFrame.Content == null)
        {
            // When the navigation stack isn't restored navigate to the first page,
            // configuring the new page by passing required information as a navigation
            // parameter
            if (!rootFrame.Navigate(typeof(GroupedItemsPage), "AllGroups"))
            {
                throw new Exception("Failed to create initial page");
            }
        }

        // Place the frame in the current Window and ensure that it is active
        Window.Current.Content = rootFrame;
        Window.Current.Activate();
    }

    private TaskPanePopup _settings;
    private TaskPanePopup _about;

    private void App_CommandsRequested(SettingsPane sender,
                                       SettingsPaneCommandsRequestedEventArgs args) {
            
        SettingsCommand cmd = new SettingsCommand("Settings", "Settings", (command) => {
            if (_settings == null) {
                _settings = new TaskPanePopup(new SettingsControl());
            }
            _settings.Show();
        });

        args.Request.ApplicationCommands.Add(cmd);

        cmd = new SettingsCommand("About", "About", (command) => {
            if (_about == null) {
                _about = new TaskPanePopup(new AboutControl());
            }
            _about.Show();
        });

        args.Request.ApplicationCommands.Add(cmd);
    }

If you start the application and open the Settings Charm (WinKey-I) you will get the following Settings Charm.

If you select the Settings command the SettingsControl will popup using the correct animation.

Task Pane User Control

A task pane is in my case a User Control with a back button, title and content. This content is shown using an EntranceThemeTransition from the Animation Library. This will bring this app to life.

XAML of my SettingsControl user control

<UserControl
    x:Class="SettingsDemo.SettingsControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SettingsDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="768"
    Width="350">

    <Grid
        Background="Crimson">
        <Grid.ColumnDefinitions>
            <ColumnDefinition
                Width="45" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition
                Height="100" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid
            VerticalAlignment="Bottom"
            Grid.Column="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition
                    Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Button
                Click="ButtonBack_Click"
                HorizontalAlignment="Stretch"
                Margin="0"
                Style="{StaticResource SnappedBackButtonStyle}"
                VerticalAlignment="Bottom" />
            <TextBlock
                Text="Settings"
                Grid.Column="1"
                VerticalAlignment="Top"
                Style="{StaticResource SubheaderTextStyle}"
                FontFamily="Segoe UI Semibold" />
        </Grid>
        <StackPanel
            Grid.Row="1"
            Grid.Column="1">
            <StackPanel.ChildrenTransitions>
                <TransitionCollection>
                    <EntranceThemeTransition
                        FromHorizontalOffset="100" />
                </TransitionCollection>
            </StackPanel.ChildrenTransitions>
            <TextBlock
                TextWrapping="Wrap"
                Text="Place your content here"
                Style="{StaticResource BasicTextStyle}" />
        </StackPanel>
    </Grid>
</UserControl>

C# code behind of my SettingsControl user control

public sealed partial class SettingsControl : UserControl {

    public SettingsControl() {
        this.InitializeComponent();
    }

    private void ButtonBack_Click(object sender, RoutedEventArgs e) {
        var popup = this.Parent as Popup;
        if (popup != null) popup.IsOpen = false;
        SettingsPane.Show(); 
    } 
}

Closure

I hope you like my solution. You can download my code below.

Cheers,

Fons

Windows 8 XAML Tips - Show a task pane

1 Comments
By Fons Sonnemans, 25-6-2012

You can integrate the look and feel introduced in Windows 8 Release Preview into your Metro style app by using the Animation Library suite of Windows-provided animations. Use of the Animation Library animations provides these benefits:

  • Motions that align to Metro style animation principles
  • Fast, fluid transitions between UI states that inform but do not distract the user
  • Clearer visuals to show the user transitions within an app

One of the animations that are supplied in the Animation Library is the show hide panel animation. You use it to show and hide a panel, which is large edge-based UI such as a custom keyboard or a task pane. This 'Windows Animation (Metro styled apps)' article shows you how you can use the PaneThemeTransition animation class in XAML. The article also contains the video below in which the animation is shown. Sadly there is no code sample how to use it in your XAML/C# application. With this blog I want to fill in the gap. I will explain you how you get the animation as shown in the video.

Show a task pane video

If you play this video you will see a task plane appear from the right side of the screen.

My Solution

In my solution I have a page with only one button. If you click this button a red Rectangle will appear from the right side of the screen. You can off course replace this Rectangle with your own User Control.

I use a Popup control to show my red Rectangle with a with of 300 pixels. The Child property of the Popup is set to the Rectangle. The Popup has a ChildTransitions which is filled with a PaneThemeTransition animation object. The PaneThemeTransition object has a Edge property set to the Right. The left position of the Popup is calculated using the actual width of the page minus the width of the rectangle. This position and the height of the Rectangle are set every time the pane is shown because it can differ due to view changes (filled, landscape, portrait).

public sealed partial class MainPage : Page {

    private Popup _popup;

    public MainPage() {
        this.InitializeComponent();
    }

    private void ButtonShow_Click(object sender, RoutedEventArgs e) {
        ShowTaskPane();
    }

    /// <summary>
    /// Show and hide a task pane or other large UI container from the edge of the screen.
    /// http://msdn.microsoft.com/en-US/library/windows/apps/hh975420
    /// </summary>
    private void ShowTaskPane() {
        const int width = 300;

        if (_popup == null) {

            var rect = new Rectangle {
                Fill = new SolidColorBrush(Colors.Red),
                Width = width,
            };

            _popup = new Popup {
                IsLightDismissEnabled = true,
                ChildTransitions = new TransitionCollection(),
                Child = rect,
            };

            _popup.ChildTransitions.Add(new PaneThemeTransition 
                                        { Edge = EdgeTransitionLocation.Right });
        }

        (_popup.Child as FrameworkElement).Height = this.ActualHeight;
        _popup.SetValue(Canvas.LeftProperty, this.ActualWidth - width);
        _popup.IsOpen = true;
    }
}

Closure

I hope you like my solution. I my next blog I will try to create a more generic one. I will then use it to show task panes from the Settings charm.

Cheers,

Fons

Windows 8 XAML Tips – Custom Fonts

1 Comments
By Fons Sonnemans, 12-6-2012

It is time for me to write a series of blog items on writing XAML applications for Windows 8. I plan to write one every two weeks. I hope I can keep up the promise.

Custom Fonts

I have developed XAML applications in Silverlight (Browser and Phone) for a couple of years. I used custom fonts in those Apps using Expression Blend. It contains a Font Manager which you can use to embed a font into the application (project/assembly). Blend for Visual Studio doesn’t allow you to use the Font Manager. The menu option is disabled in this Release Candidate. I hope to get it back in a future version.

The default FontFamily in a Metro app is ‘Segoe UI’ which is called ‘Global User Interface’ in Blend. You can of course use Blend or Visual Studio to select another FontFamily. But if your user doesn’t have this font installed you will get the default font. That’s why you will have to add the font to the application.

Luckily it is possible to add it to the application manually. For this demo I will be using a free true type font called 123Sketch which I downloaded here: http://www.dafont.com/123sketch.font. First I created a new folder in my project named ‘Fonts’. I added my font file to this folder. The Build Action for the file is set to ‘Content’ which is required.

123Sketch.ttf added to the Fonts folder

You reference the font file and font name in your XAML using the following format:
FontFamily="/<path to font file>/<font file>#<font name>"

So in my case a TextBlock would be defined like this.

<TextBlock
    Text="Hello World"
    FontSize="45"
    FontFamily="/Fonts/123Sketch.ttf#123Sketch" />

FontFamily Resource

It is smart to create a Resource for this FontFamily property. This will make it easier for you if you want to change the font for another one. In Blend you can convert the FontFamily by clicking on the white square next to the dropdown.

Convert FontFamily to New Resource

You will get a dialog in which you can set the name (key) of the resource and the location where it will be defined. In this demo I named it ‘MyCustomFont’ and defined it in ‘This Document’. Choosing the ‘Application’ or a ‘Resource Dictionary’ would make this resource reusable in other documents.

Create FontFamily Resource

You can now use the resource for the FontFamily property in other elements. Just pick it from the ‘Local Resource’.

Assign Local Resource

Result

The XAML of the Page including the static resource and two TextBlock elements would look like this.

<Page
    x:Class="FontDemo.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FontDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <!-- TODO: Move the next line to App.xaml or a ResourceDictionary -->
        <FontFamily            
            x:Key="MyCustomFont">/Fonts/123Sketch.ttf#123Sketch</FontFamily>
    </Page.Resources>

    <Grid
        Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <TextBlock
            HorizontalAlignment="Left"
            Margin="65,48,0,0"
            TextWrapping="Wrap"
            Text="Hello"
            VerticalAlignment="Top"
            FontSize="45"
            FontFamily="{StaticResource MyCustomFont}" />

        <TextBlock
            HorizontalAlignment="Left"
            Margin="65,118,0,0"
            TextWrapping="Wrap"
            Text="World"
            VerticalAlignment="Top"
            FontSize="45"
            FontFamily="{StaticResource MyCustomFont}" />

    </Grid>
</Page>

If you start the application in the Simulator you get this result.

Simulator showing the result

I hope this helps you. Fonts often are copyright protected. So if you want to add one make sure you have the rights or use a free one.

Cheers,

Fons

'Sudoku Free' eerste Nederlandse Windows 8 app

1 Comments
By Fons Sonnemans, 7-6-2012

Sudoku Free is het de eerste Nederlandse applicatie in de Windows 8 Store. Het spel is gebaseerd op de Windows Phone Sudoku app die in oktober 2010 in de Marketplace verscheen. Overigens ook als eerste Nederlandse app.

Bij de Windows 8 app heeft Flavour mij geholpen met de grafische vormgeving. Bij het ombouwen heb ik een hergebruik van 90% van de code gerealiseerd. De schermen (XAML) zijn door de grotere schermformaten redelijk veel gewijzigd.

In deze eerste week is de app al ruim 10.000 keer gedownload. De reviews zijn zeer positief. Ik ben dan ook van plan om diverse van mijn WP7 apps om te bouwen naar Windows 8.

Omschrijving

Speel standaard 9x9 Sudoku puzzels. Train en versterk uw hersenen in visueel scannen. Met drie moeilijkheidsgradaties, intuïtieve metro-stijl interface, en alle functies binnen handbereik, is dit Sudoku spel is zeker snel uw favoriet.

Mogelijkheden

    • 3 verschillende moeilijkheidsgradaties (eenvoudig, normaal, moeilijk)
    • willekeurige puzzel generator zodat u altijd een andere puzzel krijgt
    • automatisch opslaan (roaming)
    • ondersteunt touch, muis en toetsenbord
    • ongedaan maken, opnieuw en notities
    • valideren, hint, oplossen
    • Nederlands of Engels

    Download

    Als u de Windows 8 Release Preview geïnstalleerd heeft kunt u het spel nu al downloaden door op de onderstaande afbeelding te klikken.

    Screenshots

    Hoofdvenster Start van een normale puzzel Bij het oplossen kunt u gebruik maken van notities Controleer de puzzel vanuit de applicatiebalk Sudoku instellingen Puzzle opgelost Windows Store

    Groeten,

    Fons

    Tags: Windows 8, Apps

    All postings/content on this blog are provided "AS IS" with no warranties, and confer no rights. All entries in this blog are my opinion and don't necessarily reflect the opinion of my employer or sponsors. The content on this site is licensed under a Creative Commons Attribution By license.