Add and style the bottom app bar

  • Article

The bottom app bar in the Memory app provides layout selectors for the game. The options are:

  • small   Uses 16 cards (4x4).

  • medium   Uses 36 cards (6x6).

  • large   Uses 64 cards (8x8).

In this procedure you will create the bottom Appbar that will be used as a selector for the game size.

To add the bottom app bar

  1. In the Assets panel, in the Search text box, type AppBar. Drag AppBar to add it to BottomAppbar in the Objects and Timeline panel.

    Tip

    If you don't see search results, expand the Assets panel.

  2. With the Appbar still selected, in the Properties panel, in the Layout category set the Height property to 130 pixel

  3. In the top right corner of the document view, click Design Show Designer button to return to Design view.

  4. In the Properties panel, in the Brush category, click Background property, then click Solid color brush Solid color brush.

  5. In the color Editor, in the Hex value text box, type #E5FFFFFF. Press Enter.

To set the DataContext of Grid to a reference MemoryViewModelDataSource

  1. In the Objects and Timeline panel, expand BottomAppBar, then expand AppBar, and then click Grid

  2. In the Properties panel, in the Common category, click Advanced Options Property marker default next to DataContext.

  3. Point to Local Resource, and then click MemoryViewModelDataSource.

To set the margin for Grid

  1. In the Properties panel, in the Layout category, click Advanced Options Property marker default next to Margin.

  2. Click Custom Expression. In the Custom Expression dialog box, type 10. Press Enter.

To add a ListView to the StackPanel inside Grid

  1. In the Objects and Timeline panel, expand BottomAppBar, then expand Grid, and then select the second StackPanel.

  2. In the Assets panel, in the Search text box, type ListView. Double-click ListView to add it to the StackPanel.

  3. To reset the default properties, right-click ListView, point to Reset Layout, and then click All.

To bind the ListView ItemsSource and SelectedItem properties to DataContext

  1. In the Properties panel, in the Common category, click Advanced Options Property marker default next to ItemsSource.

  2. Click Create Data Binding.

  3. In the Create Data Binding for [ListView].ItemsSource, under Binding type, make sure Data Context is selected. Under Path, click BoardSizes : (BoardSize), and then click OK.

  4. In the Common category in the Properties panel, click Advanced Options next to SelectedItem.

    Note

    If you don't see SelectedItem in the Common category, click Show advanced properties Advanced Properties icon | Blend.

  5. Click Create Data Binding.

  6. In the Create Data Binding for [ListView].SelectedItem, under Binding type, make sure Data Context is selected. Under Path, click SelectedBoardSize : (BoardSize).

  7. Under Converter, click More settings. Under Binding direction (Mode), select TwoWay from the drop-down list, and then click OK.

To create and style a new ListView ItemTemplate

  1. With ListView selected in the Objects and Timeline panel, on the breadcrumb bar at the top of the artboard, click ListView. Point to Edit Additional Templates, then point to Edit Generated Items (ItemTemplate), and then click Create Empty.

  2. In the Create DataTemplate Resource dialog box, under Name (Key), type BoardSizeTemplate. Press OK.

  3. In the Objects and Timeline panel, under ItemTemplate, click Grid.

  4. In the Properties panel, in the Layout category, set the following properties:

    • Width   100px

    • Height   100px

  5. In the Brush category, click Background, and then click Solid color brush Solid color brush.

  6. In the color Editor, in the Hex value text box, type #FFD53A00. Press Enter.

To add a TextBlock to Grid

  • In the Objects and Timeline panel, select Grid. In the Tools panel, double-click TextBlock to add the control to Grid.

To style the TextBlock and bind DataContext to Name

  1. Press the ESC key on the keyboard to exit text-editing mode.. In the Properties panel, in the Layout category, next to HorizontalAlignment, click Center Horizontal center button. Set VerticalAlignment to Center VerticalAlignment center button.

  2. In the Objects and Timeline panel, right-click TextBlock, point to Edit Style, then point to Apply Resource, and then click SubheaderTextStyle.

  3. In the Properties panel, in the Common category, click Advanced Options next to Text.

  4. Click Create Data Binding.

  5. In the Create Data Binding for [TextBlock].Text, under Binding type, make sure Data Context is selected. Under Path, click Name : (String), and then click OK.

  6. In the Objects and Timeline panel, click Return scope to Return to scope button to exit template editing mode.

To create and style the ItemsPanel template for ListView

  1. In the breadcrumb bar, click [ListView], point to Edit Additional Templates, then point to Edit Layout of Items, and then click Edit a Copy.

  2. In the Create ItemsPanelTemplate Resource dialog box, under Name (Key), type OptionsItemsPanelTemplate, and then click OK.

To set Orientation for the ItemsPanel template

  1. In the Objects and Timeline panel, under ItemsPanel, click VirtualizingStackPanel.

  2. In the Properties panel, in the Layout category, select Horizontal from the Orientation drop-down list.

  3. In the Objects and Timeline panel, click Return scope to Return to scope button to exit template editing mode.

To reuse OptionsItemsPanelTemplate in the TopAppBar

  1. In the Objects and Timeline panel, expand TopAppBar, Grid and the second [StackPanel] if not expanded. Click ListView.

  2. In the breadcrumb bar, click ListView. Point to Edit Additional Templates, then point to Edit Layout of Items (ItemsPanel), and then point to Apply Resource, and then click OptionsItemsPanelTemplate.

The next step: Build and run your app (XAML).