Responding to View Changes in Code

You monitor changes in the view through the Page.SizeChanged event. By handling this event, you can determine the current view through the Windows.UI.ViewManagement. ApplicationView.Value property and reconfigure your app as required. Listing 4-3 shows the code for the DetailPagepage, with additions to handle this event.

Listing 4-3. Controlling the View in the DetailPage Code-Behind Class

using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
  
namespace GrocerApp.Pages {
    public sealed partial class DetailPage : Page {
  
        public DetailPage() {
            this.InitializeComponent();
  
            SizeChanged += DetailPage_SizeChanged;
        }
  
        void DetailPage_SizeChanged(object sender, SizeChangedEventArgs e) {
            if (ApplicationView.Value == ApplicationViewState.Snapped) {
                GridLayout.ColumnDefinitions[0].Width
                    = new GridLength(0);
            } else {
                GridLayout.ColumnDefinitions[0].Width
                    = new GridLength(1, GridUnitType.Star);
            }             
        }
  
        protected override void OnNavigatedTo(NavigationEventArgs e) {
        }
    }
}

The ApplicationView.View property returns a value from the ApplicationViewState enumeration, describing the current view. The values in this enumeration are Snapped, Filled, FullScreenPortrait, and FullScreenLandscape; these last two allow you to differentiate between the landscape and portrait modes when the app is shown full-screen.

In my example, the DetailPage_SizeChanged method determines the kind of view being used and adapts the app layout accordingly. If the app is being shown in the snapped view, then I set the width of the first column in my grid to zero. Your app state isn’t reset automatically when the app is restored to the full-screen view, so you must also define code to handle the other event states. In this case, for any other view but snapped, I reset the width of the column. (The syntax for working with columns is awkward, but you get the idea.) You can see the change in the snapped view in Figure 4-2.

Rather than squishing everything into a tiny window, I have shown only part of my app. Showing reduced functionality is the most sensible way of dealing with the relatively small amount of screen space that a snapped app has access to. You will be surprised just how much you can pack into this space, but it just isn’t the same as having access to the full screen.

Responding to View Changes in XAML

You can set out the changes you want to make to your app using XAML. The XAML syntax for this is verbose, hard to read, and more difficult to work with—so much so that I recommend you stick with the code approach. But for completeness, Listing 4-4 shows how I can specify the changes I want using XAML.

Listing 4-4. Defining View Changes in XAML

<Page
    x:Class="GrocerApp.Pages.DetailPage"
    xmlns=" http://schemas.microsoft.com/winfx/2006/xaml/presentation "
    xmlns:x=" http://schemas.microsoft.com/winfx/2006/xaml "
    xmlns:local="using:GrocerApp.Pages"
    xmlns:d=" http://schemas.microsoft.com/expression/blend/2008 "
    xmlns:mc=" http://schemas.openxmlformats.org/markup-compatibility/2006 "
    mc:Ignorable="d">
  
<Grid x:Name="GridLayout" Background="#71C524">
  
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="OrientationStates">
            <VisualState x:Name="Snapped">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames
                            Storyboard.TargetProperty="Grid.
                            ColumnDefinitions[0].Width"
                            Storyboard.TargetName="GridLayout">
                        <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                                <GridLength>0</GridLength>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
  
            <VisualState x:Name="Others">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames
                            Storyboard.TargetProperty="Grid.
                            ColumnDefinitions[0].Width"
                            Storyboard.TargetName="GridLayout">
                        <DiscreteObjectKeyFrame KeyTime="0">
                            <DiscreteObjectKeyFrame.Value>
                                <GridLength>*</GridLength>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
  
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
  
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
  
    // ...StackPanel elements removed for brevity...
</Grid>
</Page>

In this listing, I have declared two VisualState elements. The first, Snapped, sets the width of the first column to zero pixels. This is the state I will enter when the app is snapped. The second is called Others, and it restores the width. This is the state that I will enter when the app is not snapped. You can see what I mean about verbosity; it takes me 31 lines of XAML to replace 8 lines of code.

And, I still have to handle the SizeChanged event so that I can enter the XAML states I defined. Listing 4-5 shows the changes required to the code-behind file.

Listing 4-5. Invoking the VisualStateManager in Response to the ViewStateChanged Event

using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
  
namespace GrocerApp.Pages {
    public sealed partial class DetailPage : Page {
  
        public DetailPage() {
            this.InitializeComponent();
            SizeChanged += DetailPage_SizeChanged;
        }
  
        void DetailPage_SizeChanged(object sender, SizeChangedEventArgs e) {
            //if (ApplicationView.Value == ApplicationViewState.Snapped) {
            //    GridLayout.ColumnDefinitions[0].Width
            //        = new GridLength(0);
            //} else {
            //    GridLayout.ColumnDefinitions[0].Width
            //        = new GridLength(1, GridUnitType.Star);
            //}
  
            string stateName = ApplicationView.Value ==
                ApplicationViewState.Snapped ? "Snapped" : "Others";
            VisualStateManager.GoToState(this, stateName, false);
        }
  
        protected override void OnNavigatedTo(NavigationEventArgs e) {
        }
    }
}
  

I call the static VisualStateManager.GoToState method to move between the states I defined in XAML. The arguments for this method are the current Page object, the name of the state to enter, and whether intermediate states should be displayed. This last argument should be true, since Windows provides the animations for transition between views.

Breaking Out of the Snapped View

If you are presenting the user with reduced functionality in the snapped view, you may to revert to a wider view when the user interacts with your app in certain ways. To demonstrate this, I have added a Button to the layout for the DetailPage page, as shown in Listing 4-6.

Listing 4-6. Adding a Button to the Layout

. . .
<StackPanel x:Name="TopRight" Background="#70a524" Grid.Column="1"
     Grid.Row="0">
    <TextBlock x:Name="TopRightText"
                Style="{StaticResource DetailViewLabelStyle}"
                Text="Top-Right"/>
    <Button Click="HandleButtonClick">Unsnap</Button>
</StackPanel>
. . .

Listing 4-7 shows the handler for the Click event, which unsnaps the app using the TryUnsnap method.

Listing 4-7. Unsnapping an App

using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
  
namespace GrocerApp.Pages {
    public sealed partial class DetailPage : Page {
  
        public DetailPage() {
            this.InitializeComponent();
  
            SizeChanged += DetailPage_SizeChanged;
        }
  
        void DetailPage_SizeChanged(object sender, SizeChangedEventArgs e) {
            //if (ApplicationView.Value == ApplicationViewState.Snapped) {
            //    GridLayout.ColumnDefinitions[0].Width
            //        = new GridLength(0);
            //} else {
            //    GridLayout.ColumnDefinitions[0].Width
            //        = new GridLength(1, GridUnitType.Star);
            //}
  
            string stateName = ApplicationView.Value ==
                ApplicationViewState.Snapped ? "Snapped" : "Others";
            VisualStateManager.GoToState(this, stateName, false);
  
        }
  
        private void HandleButtonClick(object sender, RoutedEventArgs e) {
            Windows.UI.ViewManagement.ApplicationView.TryUnsnap();
        }
  
        protected override void OnNavigatedTo(NavigationEventArgs e) {
        }
    }
}

The TryUnsnap method will change the view, but only in response to user interaction. You can’t change the view if the app is in the background, for example.

Improving Static Tiles

The simplest way to improve the appearance of your app in the Start screen is to change the images used for your app’s tile. You should customize the images for your app, even if you don’t use any other tile features.

To do this, you will need a set of three images of specific sizes: 30 by 30 pixels, 150 by 150 pixels, and 310 by 150 pixels. These images should contain the logo or text you want to display but be otherwise transparent. I used a barcode motif for my example app, creating images called tile30.png, tile150.png, and tile310.png and placing them in the Assets folder of my Visual Studio project.

To apply the new images, open the Package.appxmanifest file from the Solution Explorer. There is a Tile section on Application UI tab that has options to set the logo, wide logo, and small logo. There are hints to explain which size is required for each option. You will also have to set the background color that will be used for the tile; I set mine to the same color I use for the background of my app (the hex RGB value #3E790A), as shown in Figure 4-3.

You may have to uninstall your app from the start screen for the tile images to take effect. The next time you start your app from Visual Studio, you should see the new static tile; you can toggle between the standard and wide views by selecting the tile, right-clicking, and picking the Larger or Smaller buttons from the AppBar. You can see the square and wide tile formats for the example app in Figure 4-4.

Notice that the word GrocerApp is displayed at the bottom of the tile. This text is specified as the value for the Short Name option in the Application UI tab. The All Logos option for Show Name means that it is applied to both the regular and wide tiles.

Creating Live Tiles

Live tiles provide information about your app to your user. For my example app, I am going to display the first few items from the grocery list. Tile updates are based on preconfigured templates, which contain a mix of graphics and text and which are designed for either standard or wide tiles. The first thing you must do is pick the template you want. The easiest way to do this is to look at the API documentation for the Windows.UI.Notifications.TileTemplateType enumeration, which is available at http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.notifications.tiletemplatetype.aspx. The template system is based on XML fragments, and you can see the XML structure for each template in the API documentation. I have chosen the TileSquareText03 template. This is for a square tile and has four lines of nonwrapping text, without any images. You can see the XML fragment that represents the tile in Listing 4-8.

Listing 4-8. The XML Fragment for the TileSquareText03 Tile Template

<tile>
  <visual lang="en-US">
    <binding template="TileSquareText03">
      <text id="1">Text Field 1</text>
      <text id="2">Text Field 2</text>
      <text id="3">Text Field 3</text>
      <text id="4">Text Field 4</text>
    </binding>
  </visual>
</tile>

The idea is to populate the text elements with information from the app and pass the result to the Windows notifications system. I want to set up my tile updates in the MainPage class, but doing this means refactoring my app so that the ViewModel object is created there, rather than in the ListPage class. Listing 4-9 shows the changes required in the MainPage class to support the view model and to update the tiles.

Listing 4-9. Refactoring the MainPage Class

using GrocerApp.Data;
using System;
using Windows.Data.Xml.Dom;
using Windows.UI.Notifications;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
  
namespace GrocerApp.Pages {
  
    public sealed partial class MainPage : Page {
        private ViewModel viewModel;
  
        public MainPage() {
            this.InitializeComponent();
  
            viewModel = new ViewModel();
  
            // ...test data removed for brevity...
  
            this.DataContext = viewModel;
  
            MainFrame.Navigate(typeof(ListPage), viewModel);
  
            viewModel.GroceryList.CollectionChanged += (sender, args) => {
                UpdateTile();
            };
  
            UpdateTile();
        }
  
        private void UpdateTile() {
  
            XmlDocument tileXml = TileUpdateManager.
                GetTemplateContent(TileTemplateType.TileSquareText03);
  
            XmlNodeList textNodes =
                tileXml.GetElementsByTagName("text");
  
            for (int i = 0; i < textNodes.Length &&
                    i < viewModel.GroceryList.Count; i++) {
                textNodes[i].InnerText = viewModel.GroceryList[i].Name;
            }
  
            for (int i = 0; i < 5; i++) {
                TileUpdateManager.CreateTileUpdaterForApplication()
                    .Update(new TileNotification(tileXml));
            }
        }
  
        protected override void OnNavigatedTo(NavigationEventArgs e) {
        }
  
        private void NavBarButtonPress(object sender, RoutedEventArgs e) {
            Boolean isListView = (Button)sender == ListViewButton;
            MainFrame.Navigate(isListView ? typeof(ListPage)
                : typeof(DetailPage), viewModel);
  
        }
    }
}
  

I also need to update the ListPage.xaml.cs file so that the view model object that is passed from the MainPage class is used, as shown in Listing 4-10.

Listing 4-10. Updating the ListPage Class in the ListPage.xaml.cs File

using GrocerApp.Data;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
  
namespace GrocerApp.Pages {
  
    public sealed partial class ListPage : Page {
        ViewModel viewModel;
  
        public ListPage() {
            this.InitializeComponent();
        }
  
        protected override void OnNavigatedTo(NavigationEventArgs e) {
            viewModel = (ViewModel)e.Parameter;
  
            ItemDetailFrame.Navigate(typeof(NoItemSelected));
            viewModel.PropertyChanged += (sender, args) => {
                if (args.PropertyName == "SelectedItemIndex") {
                    if (viewModel.SelectedItemIndex == -1) {
                        ItemDetailFrame.Navigate(typeof(NoItemSelected));
                        AppBarDoneButton.IsEnabled = false;
                    } else {
                        ItemDetailFrame.Navigate(typeof(ItemDetail),                        viewModel);
                        AppBarDoneButton.IsEnabled = true;
                    }
                }
            };
        }
  
        private void ListSelectionChanged(object sender,                SelectionChangedEventArgs e) {
            viewModel.SelectedItemIndex = groceryList.SelectedIndex;
        }
  
        private void AppBarButtonClick(object sender, RoutedEventArgs e) {
            if (e.OriginalSource == AppBarDoneButton
                    && viewModel.SelectedItemIndex > -1) {
  
                viewModel.GroceryList.RemoveAt(viewModel.SelectedItemIndex);
                viewModel.SelectedItemIndex = -1;
  
            } else if (e.OriginalSource == AppBarZipButton) {
                    HomeZipFlyout.Show(this, this.BottomAppBar,                     (Button)e.OriginalSource);
            } else if (e.OriginalSource == AppBarAddButton) {
                AddItemFlyout.Show(this, this.BottomAppBar,                     (Button)e.OriginalSource);
            }
  
        }
    }
}

There is a lot going on in just a few lines of code, so I’ll break things down in the sections that follow

. . .
XmlNodeList textNodes = tileXml. GetElementsByTagName("text") ;
. . .

. . .
for (int i = 0; i < textNodes.Length     && i < viewModel.GroceryList.Count; i++) {
    textNodes[i].InnerText = viewModel.GroceryList[i].Name;
}
. . .

. . .
for (int i = 0; i < 5; i++) {
    TileUpdateManager.CreateTileUpdaterForApplication()
        .Update(new TileNotification(tileXml));
}
. . .

. . .
viewModel.GroceryList.CollectionChanged += (sender, args) => {
    UpdateTile();
};
. . .

Updating Wide Tiles

The technique I showed you in the previous section is useful if you want to be able to update the square or the wide tile for your app. But, unless you have very specific presentation needs for your data, you should provide updates for both square and wide tiles since you have no idea which your users will select.

To update both tile sizes, you need to combine two XML templates to create a single fragment that contains both updates. In this section, I am going to combine the TileSquareText03 and TileWideBlockAndText01 templates. The wide template has a couple of additional fields, which I will use to display the number of stores that the user has to visit to get all of the items on the grocery list. You can see what I am aiming to produce in Listing 4-11: a fragment that follows the same format as a single template but that combines two binding elements.

Listing 4-11. Composing a Single XML Fragment

<tile>
    <visual lang="en-US">
        <binding template="TileSquareText03">
            <text id="1">Apples</text>
            <text id="2">Hotdogs</text>
            <text id="3">Soda</text>
            <text id="4"></text>
        </binding>
        <binding template="TileWideBlockAndText01">
            <text id="1">Apples (Whole Foods)</text>
            <text id="2">Hotdogs (Costco)</text>
            <text id="3">Soda (Costco)</text>
            <text id="4"></text>
            <text id="5">2</text>
            <text id="6">Stores</text>
        </binding>
     </visual>
</tile>

There is no convenient API for combining templates. The approach I have taken is to use the XML handling support to populate the templates separately and then combine them at the end of the process, which you can see in Listing 4-12.

Listing 4-12. Producing a Single Update for Square and Wide Tiles

. . .
private void UpdateTile() {
  
    int storeCount = 0;
    List<string> storeNames = new List<string>();
  
    for (int i = 0; i < viewModel.GroceryList.Count; i++) {
        if (!storeNames.Contains(viewModel.GroceryList[i].Store)) {
            storeCount++;
            storeNames.Add(viewModel.GroceryList[i].Store);
        }
    }
  
    XmlDocument narrowTileXml = TileUpdateManager
        .GetTemplateContent(TileTemplateType.TileSquareText03);
    XmlDocument wideTileXml = TileUpdateManager
        .GetTemplateContent(TileTemplateType.TileWideBlockAndText01);
  
    XmlNodeList narrowTextNodes = narrowTileXml.GetElementsByTagName("text");
    XmlNodeList wideTextNodes = wideTileXml.GetElementsByTagName("text");
  
    for (int i = 0; i < narrowTextNodes.Length
        && i < viewModel.GroceryList.Count; i++) {
  
        GroceryItem item = viewModel.GroceryList[i];
        narrowTextNodes[i].InnerText = item.Name;
        wideTextNodes[i].InnerText = String.Format("{0} ({1})", item.Name,             item.Store);
    }
  
    wideTextNodes[4].InnerText = storeCount.ToString();
    wideTextNodes[5].InnerText = "Stores";
  
    var wideBindingElement = wideTileXml.GetElementsByTagName("binding")[0];
    var importedNode = narrowTileXml.ImportNode(wideBindingElement, true);
    narrowTileXml.GetElementsByTagName("visual")[0]        .AppendChild(importedNode);
    for (int i = 0; i < 5; i++) {
        TileUpdateManager.CreateTileUpdaterForApplication()
            .Update(new TileNotification(narrowTileXml));
    }
}
. . .

The wider format tile gives me an opportunity to present more information to the user on each line; in this case, I include information about which store an item is to be purchased from in addition to the overall number of store visits required.

Combining templates isn’t a difficult process to master, but you have to take care when trying to merge the two XML fragments. I have used the template for the square tile as the basis for my combined update. When I add the binding element from the wide template, I have to first import it into the square XML document, like this:

var importedNode = narrowTileXml. ImportNode (wideBindingElement, true);

The ImportNode method creates a new copy of my wide binding element in the context of my square document. The arguments to the ImportNode method are the element I want to import and a bool value indicating whether I want child nodes to be imported as well (which, of course, I do). Once I have created this new element, I insert it into the square XML using the AppendChild element:

narrowTileXml.GetElementsByTagName("visual")[0]. AppendChild (importedNode);

The result is the combined document I showed you in Listing 4-11. You can see the appearance of the wide tile size in Figure 4-7. (You can toggle between the square and wide versions by selecting the tile and using the Start screen AppBar.)