Windows apps
Collapse the table of content
Expand the table of content

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

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.

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

  1. 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.

    Windows Store (XAML) New Project dialog box
  2. In the list of project types, click XAML (Windows Store).

  3. In the list of project templates, click Blank App (XAML).

  4. In the Name text box, type PickaFlick.

  5. In the Location text box, verify the location of the project.

  6. In the Language list, click Visual C#.

  7. In the Version list, click 8.1. Click OK.

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

  1. In the Objects and Timeline panel, click Grid.

  2. In the Properties panel, in the Brush category, click the Solid color brush icon Blend - solid color brush.

  3. In the Hex value text box, type #D5BF9A, and then press Enter.

    Blend Properties panel - Background property

    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.

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

  1. If you downloaded the sample project, open the PickaFlick Assets folder, press Ctrl+A, and then press Ctrl+C.

  2. 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.

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.

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

  1. 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.

    Blend 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.

    Blend Image Control common properties
  2. 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.

    Blend - Objects and Timeline panel - Main Logo
  3. In the Layout category of the Properties panel, to the right of Margin, click the Advanced Properties indicator 12e06962-5d8a-480d-a837-e06b84c545bb, and then click Reset.

    Tip Tip

    The Advanced Properties indicator label changes based on resources and data bindings. In this instance, the label is Local.

    Blend Margin Advanced Properties
  4. In the Common category, in the Stretch list, click None.

    Blend Stretch property None

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

    Blend PickaFlick MainLogo.png centered

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.

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

  1. 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 Tip

    Locate Grid by typing Grid in the Search box, or open Controls, click Panels, and then click Grid.

  2. In the Objects and Timeline panel, rename the second Grid control by clicking it and then typing FilmStrip.

    Blend FilmStrip Grid - Objects and Timeline panel
  3. 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.

  4. In the Layout category, set the VerticalAlignment to Center Blend VerticalAlignment Center.

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

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 note 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.

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

  1. Right-click the project in the Projects panel in Blend, and then click Edit in Visual Studio.

    Blend - Edit in Visual Studio
  2. In Visual Studio, in Solution Explorer, right-click the project, click Add, and then click Class.

    Visual Studio Add Class
  3. In the Add New Item dialog box, select Class. In the Name text box, type TileCanvas.cs, and then click Add.

    Visual Studio - Add New Item - Class
  4. 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;
    
  5. 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.

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;
    

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

  1. In Solution Explorer, double-click MainPage.xaml to open it.

  2. In XAML view, click inside the Page header at the top of the page. In the Properties panel, click the Events button Visual Studio Event Handlers icon.

  3. Double-click inside the Loaded text box to add a Page_Loaded event to MainPage.xaml.

    Visual Studio Page_Loaded event handler

    MainPage.xaml.cs opens, and the following code is added to the page:

    private void Page_Loaded(object sender, RoutedEventArgs e) {}
    
  4. 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.

  5. Switch back to Blend. A message appears asking if you want to reload the project. Click Yes.

    Blend Reload Files message
  6. 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.

  7. 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 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 Blend Arrange by Z order (XAML) at the bottom left of the panel.

    Blend - object order - Objects and Timeline panel
    Tip Tip

    The insertion point is indicated by the blue adorner.

  8. 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.

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.

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

  1. 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.

  2. In the Objects and Timeline panel, rename the Image control by clicking it and then typing ChickenSprite. Press Enter.

    Blend - ChickenSprite - Objects and Timeline panel
  3. On the Tools menu, click Make Into Control.

    The Make Into Control dialog box opens.

    Blend Make Into Control dialog box
  4. In the Make Into Control dialog box, in the Controls list, click Button.

  5. In the Name (Key) text box, type ChickenButton.

  6. 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

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

  1. To remove the ContentPresenter, in the Objects and Timeline panel, right-click [ContentPresenter], and then click Delete.

  2. Change the layout container type by right-clicking Grid, then clicking Change Layout Type, and then clicking Viewbox.

    Blend - Change Layout Type - ViewBox
  3. To resize the Viewbox to half the image height, in the Properties panel, in the Layout category, set Height to 180.

  4. 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.

  5. Now that you've finished editing the template, exit template editing mode by clicking the Return to scope icon Return to scope button at the top of the Objects and Timeline panel.

  6. 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 12e06962-5d8a-480d-a837-e06b84c545bb, and then click Reset. Click the Center icon Blend - HorizontalAlignment - Center next to HorizontalAlignment.

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

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

    Blend - Edit Current Template

    Alternatively, click Template in the breadcrumb bar below the document tab.

    Blend Button template in the breadcrumb bar
  2. In the Objects and Timeline panel, click ChickenSprite.

  3. In the States panel, click PointerOver.

    Blend - States panel - PointerOver
  4. In the Properties panel, in the Layout category, set the top Margin to -179.

    Caution note Caution

    Setting the top Margin to -180 will cause both the top and the bottom halves of the image to be visible.

    Blend - Properties panel - top Margin
  5. Turn off state recording by clicking the record mode indicator Blend- record mode indicator in the design window under the document tabs.

    Blend - Turn off state recording
  6. Exit template editing mode by clicking the Return to scope icon Return to scope button at the top of the Objects and Timeline panel.

Press F5 to build and run your app. Point to the chicken image to confirm that the chicken image switches states. Press Alt+F4 to close the app.

You are now ready to create the details page. To continue, see Create your first Windows Store app with Blend, part 2: the details page (XAML & C#).

Show:
© 2017 Microsoft