Add and style the top app bar

  • Article

An app bar (AppBar) provides easy access to commands. The user can swipe the bottom edge of the screen to make app bars appear and can interact with their content to make app bars disappear. The top app bar in the Memory app will provide image thumbnails that will serve as deck selectors for the game.

To add the app bar

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

    Tip

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

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

  3. 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 TopAppBar, 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 TopAppBar, then expand Grid, and then click 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 PictureSets : (PictureSet), 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 SelectedPictureSet : (PictureSet).

  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 PictureSetTemplate. 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   200px

    • Height   100px

  5. In the Brush category, click Solid color brush Solid color brush.

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

To add an image to Grid and bind the Grid source property to the thumbnail

  1. In the Assets panel, in the Search text box, type Image.

  2. Double-click Image to add it to Grid.

  3. In the Objects and Timeline panel, select Image. In the Properties panel, in the Common category, select UniformToFill from the drop-down list next to Stretch.

  4. To reset the default properties, in the Objects and Timeline panel, right-click Image, point to Reset Layout, and then click All.

  5. In the Common category, click Advanced Options Property marker default next to Source.

  6. Click Create Data Binding.

  7. In the Create Data Binding for [Image].Source dialog box, under Binding type, make sure Data Context is selected. Under Path, click Thumbnail : (String), and then click OK.

To add a TextBlock to Grid, set style, properties and bind DataContext to Name

  • In the Objects and Timeline panel, select Grid. In the Tools panel, double-click TextBlock to add it 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 VerticalAlignment, click Bottom VerticalAlignment bottom button.

  2. To set the margins, in the Layout category, click Advanced Options Property marker default next to Margin, and then click Custom Expression. In the Custom Expression dialog box, type 5. Press Enter.

  3. In the Objects and Timeline panel, right-click TextBlock. Point to Edit Style, then point to Apply Resource, and then click ItemTextStyle.

  4. In the Properties panel, in the Text category, on the Font Font tab tab, select 20pt from the drop-down list.

  5. In the Common category, click Advanced Options next to Text.

  6. Click Create Data Binding.

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

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

Delete grid columns to create more room for Thumbnail

  1. In the Objects and Timeline panel, expand TopAppBar, [AppBar] and then select [Grid].

  2. On the top right corner of the artboard, click the Split Split view button view button.

  3. In the Code editor, delete the following code:

    <Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>

The next step: Add and style the bottom app bar