In this series we will lift the bonnet (most Commonwealth countries will understand) or hood (US/Canada) of the ALM Treasure Map Solution to (a) perform a code review, (b) review Windows 8 application programming concepts and (c) document the journey to ensure transparency for the team.

IMPORTANT
We are trying to be very transparent in these blog posts. This means that we may (are) sharing early (not final) bits, proposed (not implemented) features and may (will) change existing and new features without prior warning. In fact our Dev Lead has already tweaked some of the XAML code invalidating a few of the documented findings as I am typing this post.


Quick “Recap”

Controls

Windows 8 has a comprehensive controls stack, which include the layout  and the action controls. The latter are used by the user to interact with, include controls such as TextBlock, TextBox, Button, Checkbox, HyperlinkButton,  ComboBox and RadioButton, and are out-of-scope for this journey.

Layout Controls

When we create a new Windows Store solution in Visual Studio we have the option of using a Blank, Grid and Split App template. Selecting the Blank App we get a blank page, similar to an artist getting a clean sheet of drawing paper, onto which we can add layout controls such as Grid, StackPanel or Canvas.

image Grid Layout Control The Grid layout control offers a table-style layout approach, using columns and rows.
image Stack Layout Control The Stack layout control offers a “stack” layout approach, which can be vertical (as shown on the left) or horizontal. There are no columns or rows, just controls such as Buttons, which are stacked.
image Canvas Layout Control The Canvas layout control offers a landscape that can be used to position controls, i.e. Buttons, using absolute positioning.          


Treasure Map “Category” View

image

We half expected the ALM Readiness Treasure map to use the Canvas layout control for the home page, but when we peruse the code we  notice that the Grid layout is dominant. Why?

 
 

Robert MacLean, our dev lead, replies …

The grid layout is the most common layout tool because it allows for a lot of flexibility and control. The ability to embed grid's within grid's allows them to be kept nice and simple. Canvas is great but really is more for drawing than layout.

Robert MacLean v3

Starting with the Category View Page

We will start our exploration by investigating the XAML code that defines the Category View as shown below.

image

image The <Page/> encapsulates the content that can be navigated to within our Category view. It maps to the Category class, which inherits from the Page user control class as shown by the code behind:       
namespace Microsoft.ALMRangers.VsarTreasureMap.WindowsStoreApp.Views
{
    using Windows.UI.Xaml.Controls;

    /// <summary>
    /// A page that displays an overview of a single group, including a preview of the items
    /// within the group.
    /// </summary>
    public sealed partial class Category : Page
    {
        public Category()
        {
            this.InitializeComponent();
        }
    }
}
  image
image The <Grid/> XAML tag defines the Grid layout control, offering a flexible table-like, into which to add columns and rows. In this latest version of the Category View we have no Grid.ColumnDefinition tags, which means we have one default column using all space available.
image The Grid.RowDefinitions tags define an area that consists of 3 rows. The Height attribute defines that the first row is fixed at 120 pixels, the second at 20 pixels and the third using the remaining space available.
Robert MacLean, or dev lead, recommends that it may be good point to mention the "C silhouette" (see http://msdn.microsoft.com/en-us/library/windows/apps/hh464920.aspx) that Windows store apps should have, and that by using those rows we are doing the top stroke of the C.

The few lines of XAML code have defined a Grid that spans 2 columns by 3 rows as shown in the designer on the left. There are more attributes, for example Background, which we intentionally ignore in this post as we are focusing on layout.

image

In one of the interim screenshots we noticed a strange Grid.RowDefinition tag, which was cleaned up by Robert, but is worth mentioning and asking a question.
image

Are we correct in interpreting that the left column is 552/131 times as wide as the right column? Why would anyone use such weird weighting?

 
 

Robert MacLean, our dev lead, replies …

  1. Correct
  2. No idea. My gut says someone dragged it to that side by mistake.
Robert MacLean v3

Digging into the first Row

image As with any proper indexing scheme the first row is indexed by 0 (zero) using the attribute Grid.Row –>  <Grid Grid.Row="0">. The Grid.ColumnSpan attribute defines that the content will span 2 columns.
NOTE: If you are looking at the latest code this has vanished as part of the dev lead’s continuous tweaking.
  image
image The first row contains <Grid.RowDefinitions/> defines that we have two rows within the row. The Height attribute defines weighted widths which is clearly visible in the designer.
image The <Grid.ColumnDefinitions/> tag defines two columns within the row. The left column is 140 pixels wide and the right column using the remaining space available.
image

The first magic within the grid’s first row are the two embedded action controls.

  • In the first column specified by Grid.Column=”0” we have a Button enabling the user to click or touch to force an action, which is centered and styled as the BackButtonStyle.
    image
    <Button Command="{Binding GoBack}" Grid.Column="0" Style="{StaticResource BackButtonStyle}"
                   Margin
    ="0,32,0,0" VerticalAlignment="Center" HorizontalAlignment="Center" />

  • The second coloumn, Grid.Column=”1” contains a TextBlock control, which is the most basic control available in XAML and used to display text. Looking at the screenshot at the top of this post, realise that ths action control is used to display the “Tooling” text.
    image
    <TextBlock Grid.Column="1" Style="{StaticResource PageHeaderTextStyle}" Text="{Binding CategoryTitle}"
                      
    Margin="0,0,0,20" FontFamily="{StaticResource TitleFont}" Foreground="{StaticResource TitleBrush}" />

Again we defer the rest of the styling, sizing and binding attributes to future posts. Watch the space Smile

Ignoring the second Row

The second row, which would be <Grid Grid.Row=”1”/> is untraceable in the XAML code, which simply means that we are not defining any additional attributes to it. It still exists, occupying 20 pixels of the real estate as defined by the <Grid.RowDefinitions/> tags on the page.

Digging into the third Row

Lastly, for this adventure, we peek into the third and last row of the main page grid.

image The third row is further divided into three columns.
image
The left is 450 pixels wide, the second is 20 pixels and the third uses the remaining width available, matching the 0,1 and 2 areas shown respectively.
  image
image

The first column <Grid Grid.Row=”0”/> defines two controls which will inhabit the row:

  1. The <Image/> control is used to display images that match the category item, i.e. Tooling.
  2. The <TextBlock/> control is used to display basic text, which describes the category in more detail.

We will explore where the image and text comes from and how it is bound to these controls in one of the next posts.

image The third column <Grid Grid.Row=”2”/> introduces one main occupant of type <ListView/>. The ListView allows a flexible presentation and customised view of information, which matches the category items such as the VM Factory and Word Add-In shown in screen snippets above.
image If we dig into the <ListView/> we notice that each item is split into three rows of height 300, 5 and remaining height within the grid cell. The top row contains the image associated with the category item and the bottom row two <TextBlock/> controls, one for the category item title and the other for the description .

Last questions for our Dev Lead for today …

image

Why are we using the ListView and not the ScrollViewer control?

 
 

Robert MacLean, our dev lead, replies …

Most important is because of ListItem.ItemTemplate - this allows us to style each item the same way. So we bind the data to the ListView and the items are (basically) handled. Secondly ListItem uses ScrollViewer internally, in fact in v1 we just had some standard styling but for v2 since we are panning horizontally it meant custom styling of the internal scroll view to pan horizontally.         

Robert MacLean v3

image

Why are we not using the GridView control? Is the ListView not intended for vertical layout, whereas the v2 treasure map goes horizontal?

 
 

Robert MacLean, our dev lead, replies …

The reason is the ListView.ItemTemplate gives us a lot of control of the individual items in the ListView. This allows us to have great control of the content. The ListView internally uses a VirtualisingStackPanel and so we can just change that through stying to get a horizontal list (instead of a verticle list). The GridView is more concerned with a different layout where we have tiles, like the start screen, which is not a good fit for our content.

Robert MacLean v3

 


Do we really have to fiddle with XAML in the visual world?

If you are a visual thinking person and dislike colour definitions such as #FFFFCD09 for the title text colour, you should fire up this tool:

image

image We get a great IDE which displays a designer view we know from Visual Studio.
  image
image The page objects are displayed in a user friendly tree view.
image The colours used are displayed in their true colour, rather than the cryptic ARGB format, which is a set of hexadecimal values that define colour codes. See http://en.wikipedia.org/wiki/RGBA_color_space for more information on the RBGA colour space.

 


What’s Next?

Now that we have explored the most important concept of the user interface which is the Layout, we will dig deeper into the same XAML code and scratch the surface of styling and data binding, as used in the Treasure Map solution.

References