Writing the Code

The easiest way for me to explain how I have created the example app is to present the content in reverse order to the way you would usually create it in a project. To this end, I am going to start with the ListPage.xaml.cs code-behind file. You can see the contents of this file, with my additions to the Visual Studio default content, in Listing 2-4.

Listing 2-4. The ListPage.xaml.cs File

using GrocerApp.Data;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
 
namespace GrocerApp.Pages {
 
    public sealed partial class ListPage : Page {
        ViewModel viewModel;
 
        public ListPage() {
 
            viewModel=new ViewModel();
 
            viewModel.StoreList.Add("Whole Foods");
            viewModel.StoreList.Add("Kroger");
            viewModel.StoreList.Add("Costco");
            viewModel.StoreList.Add("Walmart");
 
            viewModel.GroceryList.Add(new GroceryItem {
                Name="Apples",
                Quantity=4, Store="Whole Foods"
            });
            viewModel.GroceryList.Add(new GroceryItem {
                Name="Hotdogs",
                Quantity=12, Store="Costco"
            });
            viewModel.GroceryList.Add(new GroceryItem {
                Name="Soda",
                Quantity=2, Store="Costco"
            });
            viewModel.GroceryList.Add(new GroceryItem {
                Name="Eggs",
                Quantity=12, Store="Kroger"
            });
 
            this.InitializeComponent();
 
            this.DataContext=viewModel;
        }
 
        protected override void OnNavigatedTo(NavigationEventArgs e) {
        }
 
        private void ListSelectionChanged(object sender,             SelectionChangedEventArgs e) {
            viewModel.SelectedItemIndex=groceryList.SelectedIndex;
        }
    }
}

The constructor for the ListPage class creates a new ViewModel object and populates it with some sample data. The most interesting statement in this class is this:

this.DataContext = viewModel;

At the heart of the Windows app UI controls is support for data binding through which I can display content from the view model in UI controls. To do this, I have to specify the source of my data. The DataContext property specifies the source for binding data for a UI control and all of its children. I can use the this keyword to set the DataContext for the entire layout because the ListPage class consists of the contents of the code-behind merged with the XAML content, meaning that this refers to the Page object that contains all of the XAML-declared controls.

The final addition I made is to define a method that will handle the SelectionChanged changed event from a ListView control. This is the kind of control that I will used to display the items in the grocery list. When I define the XAML, I will arrange things so that this method is invoked when the user selects one of those items. This method sets the SelectedItemIndex property in the view model based on the SelectedIndex property from the ListView control. Since the SelectedItemIndex property is observable, other parts of my app can be notified when the user makes a selection.

Adding a Resource Dictionary

In Chapter 1, I explained that the StandardStyles.xaml file created by Visual Studio defines some XAML styles and templates that are used in Windows apps. Defining styles like this is a good idea because it means you can apply changes in a single place, rather than having to track down all of the places you applied a color or font setting directly to UI controls. I need a few standard styles and templates for my example project. To this end, I created a new folder called Resources and a new file called GrocerResourceDictionary.xaml using the Resource Dictionary item template. You can see the contents of this file in Listing 2-5.

Listing 2-5. Defining a Resource Dictionary

<ResourceDictionary
    xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local = "using:GrocerApp.Resources">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source = "/Common/StandardStyles.xaml" />
    </ResourceDictionary.MergedDictionaries>
 
    <SolidColorBrush x:Key = "AppBackgroundColor" Color = "#3E790A"/>
 
    <Style x:Key = "GroceryListItem" TargetType = "TextBlock"
           BasedOn = "{StaticResource BasicTextStyle}" >
        <Setter Property = "FontSize" Value = "45"/>
        <Setter Property = "FontWeight" Value = "Light"/>
        <Setter Property = "Margin" Value = "10, 0"/>
        <Setter Property = "VerticalAlignment" Value = "Center"/>
    </Style>
 
    <DataTemplate x:Key = "GroceryListItemTemplate">
        <StackPanel Orientation = "Horizontal">
            <TextBlock Text = "{Binding Quantity}"
                       Style = "{StaticResource GroceryListItem}" Width = "50"/>
            <TextBlock Text = "{Binding Name}"
                       Style = "{StaticResource GroceryListItem}"  Width = "200"/>
            <TextBlock Text = "{Binding Store}"
                       Style = "{StaticResource GroceryListItem}"  Width = "300"/>
        </StackPanel>
    </DataTemplate>
</ResourceDictionary>

I don’t get into the detail of styles and templates in this book, but I will explain what I have done in this file since it will provide some context for later listings. The simplest declaration is this one:

...
<SolidColorBrush x:Key = "AppBackgroundColor" Color = "#3E790A"/>
...

The default color scheme for apps is white on black, which I want to change. The first step in changing this is to define a different color, which is what this element does, associating a shade of green with the key AppBackgroundColor. You will see me apply this color using its key when I create the XAML layout in a moment.

The next declaration is for a style, which consists of values for multiple properties:

...
<Style x:Key = "GroceryListItem" TargetType = "TextBlock"
    BasedOn = "{StaticResource BasicTextStyle}" >
    <Setter Property = "FontSize" Value = "45"/>
    <Setter Property = "FontWeight" Value = "Light"/>
    <Setter Property = "Margin" Value = "10, 0"/>
    <Setter Property = "VerticalAlignment" Value = "Center"/>
</Style>
...

This style, which is called GroceryListItem, defines values for several properties: FontSize, FontWeight, and so on. But notice that I have used the BasedOn attribute when declaring the style. This allows me to inherit all of the values defined in another style. In this case, I inherit from the BasicTextStyle style that Microsoft defined in the StandardStyles.xaml file. I must bring other resource dictionary files into scope before I can derive new styles like this, which I do using this declaration:

<ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source = " /Common/StandardStyles.xaml " />
</ResourceDictionary.MergedDictionaries>

You can import as many files as you like in this manner, but the import must happen before you derive styles from the files’ content.

The final declaration is for a data template, with which I can define a hierarchy of elements that will be used to represent each item in a data source. As you might guess, my source of data will be the collection of grocery items in the view model. Each item in the collection will be represented by a StackPanel that contains three TextBlock controls. Notice the two attributes marked in bold:

...
<DataTemplate x:Key = "GroceryListItemTemplate">
    <StackPanel Orientation = "Horizontal">
        <TextBlockText = "{Binding Quantity}"
            Style = "{StaticResource GroceryListItem}"Width = "50"/>
        <TextBlock Text = "{Binding Name}"
            Style = "{StaticResource GroceryListItem}"  Width = "200"/>
        <TextBlock Text = "{Binding Store}"
            Style = "{StaticResource GroceryListItem}"  Width = "300"/>
    </StackPanel>
</DataTemplate>
...

The value of the Text attribute is important. The Binding keyword tells the runtime that I want the value of the Text attribute to be obtained from the DataContext for the control. In the previous section, I specified the view model as the source for this data, and specifying Quantity tells the runtime I want to use the Quantity property of the object that template is being used to display. By setting the DataContext property in the code-behind file, I specify the big picture (“use my view model of the source of binding data”), and the Binding keyword lets me specify the fine detail (“display the value of this particular property”). When I come to the main XAML file, I’ll be able to connect the two so that the runtime knows which part of the view model should be used to get individual property values.

The other attribute I marked is less interesting but still useful. For the Style attribute, I have specified that I want a StaticResource called the GroceryList item. The StaticResource keyword tells the runtime that the resource I am looking for has already been defined. I have used the GroceryListItem style I specified a moment ago. The benefit here is that I can change the appearance of my three TextBlock controls in one place and that I can easily derive new styles for controls that I want to have a similar appearance. The last step is to add the custom resource dictionary to App.xaml so that it becomes available in the app, which I do in Listing 2-6.

Listing 2-6. Adding the Custom Resource Dictionary to the App.xaml File

<Application
    x:Class = "GrocerApp.App"
    xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
    xmlns:x = " http://schemas.microsoft.com/winfx/2006/xaml "
    xmlns:local = "using:GrocerApp">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
               <!--
                    Styles that define common aspects of the platform look and feel
                    Required by Visual Studio project and item templates
                -->
                <ResourceDictionary Source = "Common/StandardStyles.xaml"/>
                <ResourceDictionary Source = "Resources/GrocerResourceDictionary.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Writing the XAML

Now that I have the code-behind file and the resource dictionary in place, I can turn to the XAML to declare the controls that will form the app layout. Listing 2-7 shows the content of the ListPage.xaml file.

Listing 2-7. The ListPage.xaml File

<Page
    x:Class = "GrocerApp.Pages.ListPage"
    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 Background = "{StaticResourceAppBackgroundColor}">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
 
        <StackPanel Grid.RowSpan = "2">
 
            <TextBlock Style = "{StaticResource HeaderTextStyle}" Margin = "10"
                       Text = "Grocery List"/>
            <ListView x:Name = "groceryList" Grid.RowSpan = "2"
                ItemsSource = "{Binding GroceryList}"
                ItemTemplate = "{StaticResource GroceryListItemTemplate}"
                SelectionChanged = "ListSelectionChanged" />
        </StackPanel>
 
        <StackPanel Orientation = "Vertical" Grid.Column = "1">
            <TextBlock Style = "{StaticResource HeaderTextStyle}" Margin = "10"
                       Text = "Item Detail"/>
        </StackPanel>
 
        <StackPanel Orientation = "Vertical" Grid.Column = "1" Grid.Row = "1">
            <TextBlock Style = "{StaticResource HeaderTextStyle}" Margin = "10"
                       Text = "Store Detail"/>
        </StackPanel>
    </Grid>
</Page>

You can see that I have set the Background attribute for the Grid control to the color I specified in the resource dictionary. In addition, I configured the Grid control that was defined by Visual Studio and divided it into two equal-sized columns, each of which has two equal-sized rows using the Grid.RowDefinitions and Grid.ColumnDefinitions elements.

For the left side of the layout, I have added a StackPanel that I have configured so that it spans two rows and fills the left half of the layout:

...
<StackPanel Grid.RowSpan = "2" >
...

This StackPanel contains a TextBlock, which I use to display a header, and a ListView, which I’ll come back to shortly. For the right side of the screen, I have added a pair of StackPanels, one in each row. I have specified which row and column each belongs in using the Grid.Row and Grid.Column attributes. These attributes use a zero-based index, and controls that don’t have these attributes are put in the first row and column. You can see how the layout appears on the Visual Studio design surface in Figure 2-1.

The design surface isn’t able to display content that is generated dynamically, which is why you can’t see the view model data in the figure. The dynamic content will be displayed in a ListView control. As its name suggests, ListView displays a set of items in a list. There are three XAML attributes that set out how this will be done:

...
<ListView x:Name = "groceryList" Grid.RowSpan = "2"
    ItemsSource = "{Binding GroceryList}"
    ItemTemplate = "{StaticResource GroceryListItemTemplate}"
    SelectionChanged = "ListSelectionChanged"/>
...

I use these properties to close the gap between the macro-level DataContext property and the micro-level properties in the template. The ItemSource attribute tells the ListView control where it should get the set of items it must display. The Binding keyword with a value of GroceryList tells the ListView that it should display the contents of the GroceryList property of the DataContext object I set in the code-behind file.

The ItemTemplate attribute tells the ListView how each item from the ItemSource should be displayed. The StaticResource keyword and the GroceryListItemTemplate value mean that the data template I specified in the resource dictionary will be used, meaning that a new StackPanel containing three TextBlock elements will be generated for each item in the ViewModel.GroceryList collection.

The final attribute is associated with the event handler method I defined in the code-behind file with the SelectionChanged event emitted by the ListView control.

Switching Between Pages

Now that I have two pages, I can switch between them as the state of my app changes. I am going to display the NoItemSelected page when the user hasn’t selected an item from the ListView and the ItemDetail page when the user has made a selection. Listing 2-13 shows the additions to the ListPage.xaml.cs file that make this happen.

Listing 2-13. Showing Pages Based on App State

...
public ListPage() {
    viewModel = new ViewModel();
    // ...test data removed for brevity
    this.InitializeComponent();
    this.DataContext = viewModel;
    ItemDetailFrame.Navigate(typeof(NoItemSelected));
 
    viewModel.PropertyChanged + = (sender, args) = >{
        if (args.PropertyName == "SelectedItemIndex") {
            if (viewModel.SelectedItemIndex == -1) {
                ItemDetailFrame.Navigate(typeof(NoItemSelected));
            } else {
                ItemDetailFrame.Navigate(typeof(ItemDetail), viewModel);
            }
        }
    };
}
...

I still display the NoItemSelected page by default, because that reflects the initial state of my app. The user won’t have made a selection when the app first starts.

The additional code adds a handler for the PropertyChanged event defined by the view model. This is the same event that is used by the XAML controls data binding feature, and by registering a handler directly, I am able to respond to property changes in the view model in my code-behind file. The event arguments I receive when I handle this event tell me which property has changed through the PropertyName property. If the SelectedItemIndex property has changed, then I use the Frame.Navigate method to show either the NoItemSelected or ItemDetail page.

Notice that I pass the view model object as an argument to the Navigate method when I display the ItemDetail page:

ItemDetailFrame.Navigate(typeof(ItemDetail), viewModel);

This argument is the means by which you can pass context to the page that is being displayed. I’ll show you how to use this object in the next section.

Implementing the Embedded Page

Of course, it isn’t enough just to define the XAML for my ItemDetail page. I also have to write the code that will display the details of the selected item and allow the user to make changes. Listing 2-14 shows the ItemDetail.xaml.cs code-behind file, which does just this.

Listing 2-14. The ItemDetail.xaml.cs Code-Behind File

using GrocerApp.Data;
using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
namespace GrocerApp.Pages {
    public sealed partial class ItemDetail : Page {
        private ViewModel viewModel;
        public ItemDetail() {
            this.InitializeComponent();
        }
        protected override void OnNavigatedTo(NavigationEventArgs e) {
 
            viewModel=e.Parameter as ViewModel;
            this.DataContext=viewModel;
 
            viewModel.PropertyChanged + = (sender, eventArgs) = >{
                if (eventArgs.PropertyName == "SelectedItemIndex") {
                    if (viewModel.SelectedItemIndex == -1) {
                        SetItemDetail(null);
                    } else {
                        SetItemDetail(viewModel.GroceryList
                            [viewModel.SelectedItemIndex]);
                    }
                }
            };
            SetItemDetail(viewModel.GroceryList[viewModel.SelectedItemIndex]);
        }
        private void SetItemDetail(GroceryItem item) {
            ItemDetailName.Text = (item == null) ? "" : item.Name;
            ItemDetailQuantity.Text = (item == null) ? ""
                : item.Quantity.ToString();
            if (item != null) {
                ItemDetailStore.SelectedItem = item.Store;
            } else {
                ItemDetailStore.SelectedIndex = -1;
            }
        }
        private void HandleItemChange(object sender, RoutedEventArgs e) {
            if (viewModel.SelectedItemIndex > -1) {
                GroceryItem selectedItem = viewModel.GroceryList
                    [viewModel.SelectedItemIndex];
                if (sender == ItemDetailName) {
                    selectedItem.Name = ItemDetailName.Text;
                } else if (sender == ItemDetailQuantity) {
                    int intVal;
                    bool parsed = Int32.TryParse(ItemDetailQuantity.Text,
                        out intVal);
                    if (parsed) {
                        selectedItem.Quantity = intVal;
                    }
                } else if (sender == ItemDetailStore) {
                    string store = (String)((ComboBox)sender).SelectedItem;
                    if (store != null) {
                        viewModel.GroceryList
                            [viewModel.SelectedItemIndex].Store = store;
                    }
                }
            }
        }
    }
}

The SetItemDetail method sets the content of the UI controls to display the details of the selected grocery list item, and the HandleItemChange method updates that item when the user changes the contents of one of the controls.

The interesting part of this listing is the OnNavigatedTo method, which I have marked in bold in the listing. This method is called when the ItemDetail page is displayed, and the object that I passed to the Frame.Navigate model is available through the Parameter property of the event arguments. You can see the ItemDetail page in the layout in Figure 2-4.

By passing the view model object around in this way, I am able to ensure that all of my pages are working with the same data, while being able to break down the app into manageable portions.