Create your first Windows Store app with Blend, part 1: the master page (XAML & C#)

Article
12/04/2014

You can develop a Windows Store app more quickly and efficiently by using the XAML design tools in Blend for Visual Studio. As you walk through this tutorial, you'll build a simple app, PickaFlick, in which you can browse a list of new movies. The list is generated through an API from Rotten Tomatoes. If you want to complete this tutorial, you must register to get an API key that you'll paste into the code.

In addition, you'll need to use a full or trial version of Microsoft Visual Studio Professional, Premium, or Ultimate in order to install NuGet, which is required to complete this tutorial. NuGet is not available for Visual Studio Express, and a valid Windows Store developer license.

The home page of the PickaFlick app

Blend PickaFlick app

In part 1 of this tutorial, you'll create the home page for the app. Along the way, you'll learn how to:

By downloading this project from the samples gallery, you can review not only the code but also all of its assets so that you can follow along and build the project as you go.

No experience with XAML or C# is necessary to complete this tutorial. However, to be successful using Blend, an intermediate level of experience with XAML and C# is helpful.

Create a project from a project template

Blend and Visual Studio provide the same project templates that help you start to develop your Windows Store app. For more information about templates that Blend and Visual Studio offer for developing other kinds of apps, see Templates to speed up your app development.

To create a project

In Blend, on the File menu, click New Project.

In the New Project dialog box, a list of project types appears on the left side. When you click a project type, the project templates that are associated with it appear on the right side.
In the list of project types, click XAML (Windows Store).
In the list of project templates, click Blank App (XAML).
In the Name text box, type PickaFlick.
In the Location text box, verify the location of the project.
In the Language list, click Visual C#.
In the Version list, click 8.1. Click OK.

View how the Blend UI reflects changes to your app

The default workspace in Blend provides a visual interface for building Windows Store apps: the design surface, panels, workspace configurations, authoring views, and menus. For more information, see Blend app workspace (XAML).

When you are working on a project, changes made in one area of the app are reflected throughout the interface.

In the upper left, click the Projects tab to see the folders and files that are automatically generated when you create a project from the Blank App template:

References Contains project references and files, such as DLL files.
Assets Contains project assets, including the default image assets for your Windows Store app.
Properties Contains general assembly information.
App.xaml Declares shared resources and handles global application-level events. App.xaml is required in order to display the user interface.
MainPage.xaml The default start page of your app.
package.appxmanifest Contains metadata that describes your app, including display name, logos, app description, declarations, capabilities and deployment packaging.

Blend Projects panel

For more information, see Projects panel (XAML).

Below the Projects panel, in the lower left of the interface, is the Objects and Timeline panel. The Objects and Timeline panel shows the structure of MainPage.xaml.

The Objects and Timeline panel gives you a view of the object hierarchy of the page that you are working on. By working directly in the Objects and Timeline panel, you can quickly and easily modify the object hierarchy as you go.

For more information, see Objects and Timeline panel (XAML).

By viewing the project in Split view, you can see both the design surface and the code for MainPage.xaml at the same time. When you change elements that appear on the design surface, the code is automatically updated. If the code for MainPage.xaml doesn't appear, click the Split view icon in the upper-right corner of the design surface.

In this procedure, you'll add a background color to MainPage.xaml, and verify that the code is updated as you work.

To change the background of MainPage.xaml

In the Objects and Timeline panel, click Grid.
In the Properties panel, in the Brush category, click the Solid color brush icon .
In the Hex value text box, type #D5BF9A, and then press Enter.

The Grid tag in the code view now includes the attribute Background="#FFD5BF9A" (the Alpha value defaults to 100%, or FF), and the new background color is displayed on the design surface.

Add the images to your project

The PickaFlick app is built with images that a graphic designer created. In addition to adding visual interest, the ChickenSprite image also serves as the button that the user clicks to start the app.

The following images are included with the sample project:

ChickenSprite
FilmStrip
MainLogo
SmallLogo-Chicken
Temp

You can add the images to the project by:

Using the Add Existing Item command on the Project menu
Copying and pasting
Dragging and dropping

For this example, you'll copy and paste the images.

To add the images to your project

If you downloaded the sample project, open the PickaFlick Assets folder, press Ctrl+A, and then press Ctrl+C.
In Blend, in the Projects panel, right-click the Assets folder, and then click Paste.

You can now add the images to the design surface as you style your app.

Style images and elements

There are three images that make up the visual display of MainPage.xaml: the logo (the shield), a background image (the green filmsrip), and the button (the chicken). Each of these images is implemented in a different way. The first, the logo (MainLogo.png), is a simple Image control. The second, the filmstrip (FilmStrip.png) is a narrow image that is repeated to give the appearance of a much larger image. The filmstrip is implemented using run-time C# code. The third image, the chicken button (ChickenSprite.png) begins as an Image control, but will be made into a Button control by using the Make Into Control option.

When you build an app, you modify the appearance of your app primarily by applying properties to elements that you add to the design surface in the Properties panel. You can arrange properties in the Properties panel in one of three ways: by category, by name, or by source.

Blend Properties panel - Arrange by

If you arrange properties by category, the properties appear grouped by category, with the categories arranged alphabetically. If you arrange the properties by name, you'll see an alphabetical list of all of the available properties. If you arrange the properties by source, the properties will be grouped by Local, Binding, and Resource or by Other, and arranged alphabetically within those categories.

Add and style an Image control

In the following procedure, you'll add and style the main logo for the PickaFlick app using an Image control.

To add and style the main logo

In the Projects panel, double-click MainLogo.png to add it to the design surface.

The image appears on the design surface, and an Image control is added to the Objects and Timeline panel.

In the Properties panel, in the Common category, notice that the Source attribute for the Image control is Assets/MainLogo.png.
To manage the Image control that contains the main logo image more easily, at the top of the Properties panel, in the Name text box, type MainLogo. Notice in the Objects and Timeline panel that the Image control has been renamed MainLogo.
In the Layout category of the Properties panel, to the right of Margin, click the Advanced Properties indicator , and then click Reset.

Tip

The Advanced Properties indicator label changes based on resources and data bindings. In this instance, the label is Local.
In the Common category, in the Stretch list, click None.

The main logo now appears in the center of the design surface.

Add an image that renders at run time

The filmstrip (FilmStrip.png) is a narrow image that is repeated to give the appearance of a much larger image. Because the TileBrush.TileMode property, a property that supports the tiling of images, is not supported in Windows Store apps, the PickaFlick app uses C# code to arrange a series of Image controls in a layout container, in this case, a Grid control named FilmStrip.

Create the filmstrip layout container

Because Blend isn't optimized for working with code, you'll create the main grid in Blend, and then switch to Visual Studio to develop the code.

To create the filmstrip image container

With Grid selected in the Objects and Timeline panel, double-click Grid in the Assets panel to add a Grid control to the design surface.

Tip

Locate Grid by typing Grid in the Search box, or open Controls, click Panels, and then click Grid.
In the Objects and Timeline panel, rename the second Grid control by clicking it and then typing FilmStrip.
With FilmStrip selected, in the Properties panel, in the Layout category, set Width to 2560 (to accommodate wider devices) and Height to 218 (the height of FilmStrip.png).

Notice that the control adorner extends across the top of the design surface.
In the Layout category, set the VerticalAlignment to Center .

Notice that the control adorner is now in the center of the design surface.

Switch to Visual Studio and back again

Now that you've created the filmstrip grid, you're ready to switch to Visual Studio to complete the code.

You can easily switch between Blend and Visual Studio while you're working on a project. You can even have the same project file open in both Blend and Visual Studio at the same time, on the same computer. When you save a change to a file in one tool and then switch to the other tool, you simply reload the file to refresh your view of the project.

Important

You can copy and paste code in either Blend or Visual Studio. However, Visual Studio is the recommended tool for writing or editing C#. This step demonstrates how you can easily switch between Blend and Visual Studio, even when you're working on a single project.

If you add new files to your project while you are working in Visual Studio, you must save the project using Save All (Ctrl+Shift+S), or build and run the app before switching back to Blend. When you switch to Blend, you will receive a message asking if you want to reload your project. Click Yes, and the new files will be added to your project in Blend.

Next, you'll be switching to Visual Studio to create the code that will render the filmstrip image when the main page of the app is loaded.

Create a new class

In this procedure, you'll create a new class file named TileCanvas.cs. This is the code that arranges the series of Image controls that will be contained by the Grid control (FilmStrip) that you created in Blend.

To create TileCanvas.cs

Right-click the project in the Projects panel in Blend, and then click Edit in Visual Studio.
In Visual Studio, in Solution Explorer, right-click the project, click Add, and then click Class.
In the Add New Item dialog box, select Class. In the Name text box, type TileCanvas.cs, and then click Add.

In TileCanvas.cs, add the following using statements after using System.Threading.Tasks;:

using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.UI.Xaml.Media.Imaging;
using Windows.Foundation;

Delete class TileCanvas {}, and replace it with the following code (based upon Rob Fonseca-Ensor’s TileCanvas.cs, available at https://gist.github.com/robfe/3077863#file-tilecanvas-cs and used with permission under the terms of the Apache 2.0 license):

public class TileCanvas : Canvas
    {
        public static readonly DependencyProperty ImageSourceProperty = DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(TileCanvas), new PropertyMetadata(null, ImageSourceChanged));

        private Size lastActualSize;

        public TileCanvas()
        {
            LayoutUpdated += OnLayoutUpdated;
        }

        public ImageSource ImageSource
        {
            get { return (ImageSource)GetValue(ImageSourceProperty); }
           set { SetValue(ImageSourceProperty, value); }
        }

        private void OnLayoutUpdated(object sender, object o)
        {
            var newSize = new Size(ActualWidth, ActualHeight);
            if (lastActualSize != newSize)
            {
                lastActualSize = newSize;
                Rebuild();
            }
        }

        private static void ImageSourceChanged(DependencyObject o, DependencyPropertyChangedEventArgs args)
        {
            TileCanvas self = (TileCanvas)o;
            var src = self.ImageSource;
            if (src != null)
            {
                var image = new Image { Source = src };
                image.ImageOpened += self.ImageOnImageOpened;
                image.ImageFailed += self.ImageOnImageFailed;

                //add it to the visual tree to kick off ImageOpened
                self.Children.Add(image);
            }
        }

        private void ImageOnImageFailed(object sender, ExceptionRoutedEventArgs exceptionRoutedEventArgs)
        {
            var image = (Image)sender;
            image.ImageOpened -= ImageOnImageOpened;
            image.ImageFailed -= ImageOnImageFailed;
            Children.Add(new TextBlock { Text = exceptionRoutedEventArgs.ErrorMessage, Foreground = new SolidColorBrush(Colors.Red) });
        }

        private void ImageOnImageOpened(object sender, RoutedEventArgs routedEventArgs)
        {
            var image = (Image)sender;
            image.ImageOpened -= ImageOnImageOpened;
            image.ImageFailed -= ImageOnImageFailed;
            Rebuild();
        }

        private void Rebuild()
        {
            var bmp = ImageSource as BitmapSource;
            if (bmp == null)
            {
                return;
            }

            var width = bmp.PixelWidth;
            var height = bmp.PixelHeight;

            if (width == 0 || height == 0)
            {
                return;
            }

            Children.Clear();
            for (int x = 0; x < ActualWidth; x += width)
            {
                for (int y = 0; y < ActualHeight; y += height)
                {
                    var image = new Image { Source = ImageSource };
                    Canvas.SetLeft(image, x);
                    Canvas.SetTop(image, y);
                    Children.Add(image);
                }
            }
            Clip = new RectangleGeometry { Rect = new Rect(0, 0, ActualWidth, ActualHeight) };
        }
    }

Press Ctrl+S to save your changes.

Modify MainPage.xaml.cs

By adding a reference to the Windows.UI.Xaml.Media.Imaging namespace to the page, you can use a URI to reference an image source. This URI will point to FilmStrip.png.

To add a reference to the Windows.UI.Xaml.Media.Imaging namespace

In Solution Explorer, expand MainPage.xaml, and then double-click MainPage.xaml.cs to open it. Add the following statement after using Windows.UI.Xaml.Navigation;:
```
using Windows.UI.Xaml.Media.Imaging;
```

Add a PageLoaded event

TileCanvas.cs provides the code that fills the FilmStrip grid with Image controls. Referencing the Windows.UI.Xaml.Media.Imaging namespace provides the ability to point to a specific image URI. To complete the code, you need to add a Page_Loaded event that calls TileCanvas.cs and defines the image URI when MainPage.xaml is loaded.

To add a PageLoaded event to MainPage.xaml

In Solution Explorer, double-click MainPage.xaml to open it.
In XAML view, click inside the Page header at the top of the page. In the Properties panel, click the Events button .
Double-click inside the Loaded text box to add a Page_Loaded event to MainPage.xaml.

MainPage.xaml.cs opens, and the following code is added to the page:
```
private void Page_Loaded(object sender, RoutedEventArgs e) {}
```

Paste the following code between the braces that follow private void Page_Loaded(object sender, RoutedEventArgs e):

            TileCanvas tc = new TileCanvas();
            BitmapImage img = new BitmapImage();
            Uri baseUri = new Uri("ms-appx:///");
            img.UriSource = new Uri(baseUri, "Assets/FilmStrip.png");
            tc.ImageSource = img;
            FilmStrip.Children.Add(tc);

Press Ctrl+Shift+S to save all of your changes to the project.

Switch back to Blend. A message appears asking if you want to reload the project. Click Yes.
Press F5 to build and then run the project. Notice that the filmstrip spans the app display as expected, but it is in front of the main logo, obscuring it from view. Press Alt+F4 to close the app.
In Blend, in the Objects and Timeline panel, note that FilmStrip is below MainLogo in the object hierarchy. The layering of objects (also known as the ZIndex) in a XAML file is determined by the order of the hierarchy. Click FilmStrip and drag it so that appears before MainLogo in the hierarchy.

Tip

As an alternative, you can set the ZIndex in the Properties panel, and then choose to display elements in the Objects and Timeline panel in ZIndex order by clicking Arrange by Z order at the bottom left of the panel.

Tip

The insertion point is indicated by the blue adorner.
Press F5 to build and run the app. Note that the filmstrip now appears behind the main logo as expected. Press Alt+F4 to close the app.

Make the chicken button

The third image in the PickaFlick app is the button image (ChickenSprite.png). You can quickly create a button from an image by adding an Image control to the design surface, and then converting that image into a Button user control. You can then modify the Button template that is automatically generated when you create a Button control.

Make an image into a user control

In the following procedure, you'll add the chicken image to the design surface and then convert it into a Button control by using the Make Into Control command.

To create the ChickenButton control

Make sure that Grid is selected in the Objects and Timeline panel. In the Projects panel, open the Assets folder, and then double-click ChickenSprite.png to add it to the design surface.
In the Objects and Timeline panel, rename the Image control by clicking it and then typing ChickenSprite. Press Enter.
On the Tools menu, click Make Into Control.

The Make Into Control dialog box opens.
In the Make Into Control dialog box, in the Controls list, click Button.
In the Name (Key) text box, type ChickenButton.
Under Define in, This document is selected. In the This document drop-down list, Page: <no name> appears. Click OK.

The ChickenSprite Image control is now a Button control. Notice that the button template now appears in the Objects and Timeline panel (also called template editing mode). The template is called out at the top of the panel (ChickenButton (Button Template)), and the template object hierarchy is displayed (Grid, the ChickenSprite control, and ContentPresenter).

Blend - Button template - Objects and Timeline

Style a control template

You're now ready to customize the control template. You'll begin by removing the ContentPresenter (the control that displays the text "Button" on the design surface). You'll change the container type, and then modify the display so that the container displays only the top half of the image. The second half of the image will be hidden.

To modify the Button template

To remove the ContentPresenter, in the Objects and Timeline panel, right-click [ContentPresenter], and then click Delete.
Change the layout container type by right-clicking Grid, then clicking Change Layout Type, and then clicking Viewbox.
To resize the Viewbox to half the image height, in the Properties panel, in the Layout category, set Height to 180.
The image resizes to fit the height of the Viewbox. To fix this, in the Appearance category of the Properties panel, set Stretch to None.

The image now spans the width of the Viewbox control, and only the top half of the image is visible.
Now that you've finished editing the template, exit template editing mode by clicking the Return to scope icon at the top of the Objects and Timeline panel.
To move the Button control to the center of the app display, in the Layout category, to the right of Margin, click the Advanced Properties icon , and then click Reset. Click the Center icon next to HorizontalAlignment.

Add a visual state change

When you run the PickaFlick app, the ChickenButton is the control that, when clicked, opens the movie details page. When you hover the pointer over the ChickenButton, the chicken appears to move. This interactive effect is a visual state change that's applied to the control. By default, only the top half of the image appears. When you point to it, the hidden bottom part of the image becomes visible, replacing the default view, simulating an animation.

To add the state change, you'll edit the ChickenButton template.

To add a visual state change to the ChickenButton control

In the Objects and Timeline panel, right-click Button, point to Edit Template, and then click Edit Current.

Alternatively, click Template in the breadcrumb bar below the document tab.
In the Objects and Timeline panel, click ChickenSprite.
In the States panel, click PointerOver.
In the Properties panel, in the Layout category, set the top Margin to -179.

Warning

Setting the top Margin to -180 will cause both the top and the bottom halves of the image to be visible.
Turn off state recording by clicking the record mode indicator in the design window under the document tabs.
Exit template editing mode by clicking the Return to scope icon at the top of the Objects and Timeline panel.