Adventures in XAML: Layouts for HTML Developers

I’ve recently started exploring mobile apps as part of my new job, so quick hints are liable to abound. Todays is about developing a starting UI for a Windows Universal App. I like the way that the UI for mobile apps are going – whether you pick iOS 8, Material Design from Google or Windows Universal. Today, I want to explore how to get that nice layout from the News App. I’m learning XAML with an eye towards Xamarin eventually. Here is the Sports app, for example:


Note that there is a title bar with a menu icon on the left and a search icon on the right. In most apps there is also a footer bar that is light gray and has a series of icons for common operations – like edit, share and so on. In the middle is a content area that can scroll. That’s what I wanted to emulate. Something like this:


This was done with PowerPoint Storyboarding – a feature I found awesome. There are other tools for doing storyboarding and they all assist with visualizing your UI before you start coding the layout. Given I’m working in XAML, this is very useful.

Now to the XAML. Microsoft publishes design guidelines (just like Google and Apple do). I know from reading the design guidelines that there is precious little information about actual sizing – this is a shame since that sort of introduction should be up front and center for consistency.

There are actually a few different layouts available by default in XAML:

  • The Canvas layout can be considered a HTML page where everything is using the fixed positioning option – not very useful in general.
  • The StackPanel layout can be considered a HTML page with a bunch of DIVs. Unless you do something special, they just stack up.
  • The Grid layout can be considered old-school table layout – I shudder when I think this way.
  • The VariableSizedWrapGrid is like the Grid but it can wrap elements when there isn’t enough room.

No, there isn’t an equivalent of the CSS3 flexbox control, which depresses me. I like thinking in terms of flexbox. I did a bunch of work early in my career on layouts with tables, so I’m comfortable there even if it doesn’t feel right any more. I’ve got three rows (the title bar, the main content area and the app bar) and three columns (the menu bar, the title area and the search icon). These nicely line up with what I need.

I’m not going to go into creating a Universal App – there are other tutorials for that. Let’s dive into the XAML. My main page is defined inside of MainPage.xaml:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <RowDefinition Height="60"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="26"/>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="60"/>

The first step to laying out an application with a grid is to define the grid. Fortunately, Visual Studio gives us some help – here is my visual display:


I can now lay out the various pieces. My first step is to put in the title bar – I want a menu icon on a red background in the top left corner, the title in the middle and the search icon on the top right corner. Inside the closing Grid element, I can place the following:

        <!-- Title Bar Area -->
        <Canvas Grid.Row="0" Grid.Column="0" Background="Red"/>
        <Grid Grid.Row="0" Grid.Column="1" Background="LightGray">
            <TextBlock Grid.Row="0" Grid.Column="0" FontSize="26.667" VerticalAlignment="Center" Margin="8,0,0,0">Title</TextBlock>
        <Canvas Grid.Row="0" Grid.Column="2" Background="LightGray"/>

This is why the Grid is so reminiscent of the old HTML table layouts – grids within grids. Each grid is just a simple cell, but I want to put color behind it, so I need something to wrap the element. It could be a Grid, StackedLayout or Canvas, really. The Grid allows me to center (vertically and horizontally) the contents. One of the nice things I’ve found is that I can lay down a canvas to set up a background color, then lay down an icon, text block or whatever I need to do the icon. The icon is laid over the top of the canvas. For example, I want a search icon in the top right corner with a gray background – I can do the following:

<Canvas Grid.Row="0" Grid.Column="2" Background="LightGray"/>
<TextBlock Grid.Row="0" Grid.Column="2" FontFamily="Segoe UI Symbol" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="29.333"></TextBlock>

The element within the TextBlock is U+E2FB within the Segoe UI Symbol font. I chose it by opening the Character Map and finding it (it’s practically at the end). Segoe UI Symbol has a lot of great symbols to use within it and it’s on every single Windows machine, so it’s a great font to use for this. Another great font is “Segoe MDL2 Assets”, which has the hamburger menu icon in it. I can add a Hamburger Menu icon to the red area like this:

<Canvas Grid.Row="0" Grid.Column="0" Background="Red"/>
<TextBlock Grid.Row="0" Grid.Column="0" Foreground="White" FontFamily="Segoe MDL2 Assets" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="26.667"></TextBlock>

Again, the text block is chosen by cut-and-paste from the character map.

The AppBar

For the lower section, there is actually a control for this called the AppBar. I want my app bar to cover the entire width, so I use a ColumnSpan to do that:

<!-- The App Bar -->
<AppBar Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Height="60" Background="LightGray">
    <AppBarButton Icon="Edit">Edit</AppBarButton>

the app bar actually has some logic in it where clicking on the More icon (in the bottom right corner) will raise it up. The default size is 26 – set by the grid definition. When the more icon is clicked, the height becomes 60 and the app bar appears. This is all done with just three lines of code.

The Main Content Area

I want a scroll bar on the main content area. I can do this easily with XAML:

        <!-- The Content Area -->
        <ScrollViewer Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" VerticalScrollMode="Auto">
            <TextBlock TextWrapping="WrapWholeWords">
                Lorem ipsum dolor sit ... insert lots of text from a lorem ipsum generator (2000 words or so)

The scroll viewer can be wrapped around anything and puts the appropriate scroll bars in when necessary. Once this is done, this is what the designer shows:


Running the Project

One of the nice things about Visual Studio 2015 is the number of options you have for running your project. I tend to run mine in the simulator when developing for Windows and the Windows Phone Emulator when developing for Windows Phone. This is a universal app. That means the same code can be run on either. Ideally, you would set up a responsive design so that one layout was used for the phone and one for the desktop. I haven’t quite gotten that far yet.


You can, of course, run on your own desktop. However, that clutters your start menu and so is not a good choice. You can also run on another device (remote) – for example, running on a Surface. That also requires further setup.

More XAML discoveries are coming, so stay tuned.