In this post I’ll give some basic layout tips on how to create your Mashups so that they are resizable, clean and easy to use. A few set of rules will make your Mashups look great. I share a few different layouts that you can use as a starting point for your own development. The minimum requirement for Smart Office is 1024*768 and the recommended resolution is 1280*1024. If you develop a Mashup you probably need to target 1280*1024 just because a composite application requires a high resolution because you want all the different pieces to fit together.

All samples in this post can be downloaded from my SkyDrive. If you have a specific layout that you are struggling with please comment on the post and I’ll try and add it to the samples.

Let’s start with a quick check list:

• Use margins. A good starting point is to use consistent margins in the range of 4,8,12 and 16.
• Use margins to set distance to previous control. The margin property sets the margin on all sides of the control, “left,top,right,bottom”. I usually work with the left and top, like this: “8,8,0,0”
• Use consistent margins, think symmetry, think groups and aligned.
• Check all your margins and that controls are grouped correctly. Be consistent.
• Use a tool like an on screen pixel ruler to check margins and alignment
• Check that buttons have correct margin and correct style. One button should be a primary button and the rest should be secondary.
• Check that the controls have a sufficient length and try and make all the controls of the same length. If Max-length is used make sure it is correct.
• Resize your window and check the behavior of the controls. Aim to have a liquid layout that stretches.
• Write a lot of text in input controls and make sure they don’t resize.
• Check keyboard navigation

The most important aspect is how you group content and use alignment and margins.

Creating the main panel

Before you can start with adding the controls to your Mashup you need to have your design of the Mashup on a piece of paper. Draw boxes for lists and detail areas and add buttons. If you plan to use tabs think about how to group them and place them relative to the other content. Start with a grid. Decide how many columns and rows you want, if you want a grid splitter so that you can resize the size or the columns or rows. Start by creating the first grid, but don’t feel forced to put everything in rows or columns in that grid directly. You can group content in new grids or stack panels that you place in the first grid as well. I usually work with Grids and StackPanels.

For the layout to be resizable think about using the width and height property, use auto for columns with for example labels, but you should mostly use star -sized columns. This way the UI will stretch. Never place a List or DataGrid in a row that has height set to Auto. The List will think it has all the height it needs and you will never get scroll. The same is true for StackPanels, don’t use StackPanels for lists. Stackpanels are great when you want to add a few buttons in a group.

Below is one example of a master list with three detail areas placed in tabs. I have added a grid splitter so that it is possible to resize the list. Notice that a grid splitter will only work between star sized columns or rows.

Another common layout is to add another column to the right. The second column can be of fixed width if it is a MIPanel that you create yourself, but in my example I used a start sized column. Notice that I added a header to the list just to align the line from the group box with the upper line of the list.

Using tabs is useful when you have limited space. When I browsed deployed Mashups on our development server I found a bunch of Mashups with a menu system to the left. In fact this is the TabControl with TabStripPlacement=”Left”. However I found that the implementation of this mode has a lot of margin. So I did something in the example file that is not something I recommend, I used a negative margin. In general you should never ever use negative margins but in this case I feel that the control template for the TabStripPlacement=Left is not implemented correctly so I needed to compensate for it. Note that this might be considered as a bug and might be fixed in coming versions of Smart Office.

The result looks pretty good. I also added a header that is bound to the current name of the tab.

Here is the code:

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ui="clr-namespace:Mango.UI.Controls;assembly=Mango.UI" xmlns:mashup="clr-namespace:Mango.UI.Services.Mashup;assembly=Mango.UI">
	<Grid.Resources>
	</Grid.Resources>

	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="*" />
	</Grid.ColumnDefinitions>
	<Grid.RowDefinitions>
		<RowDefinition Height="Auto" />
		<RowDefinition Height="*" />
		<RowDefinition Height="Auto" />
	</Grid.RowDefinitions>
	<Button Margin="0,8,8,0" Content="About" HorizontalAlignment="Right" />
	<!--Adjust the margin depending on the max length of the tab-->
	<Label Style="{DynamicResource styleGroupBoxHeader}" VerticalAlignment="Bottom" Margin="124,0,0,-8" Content="{Binding SelectedItem.Header, ElementName=TabControl}" />
	<TabControl Name="TabControl" Grid.Row="1" SelectedIndex="0" TabStripPlacement="Left">
		<TabItem Header="Customer Data" Margin="0,0, 0,0">
		  <Border BorderThickness="1" Margin="0,-18,8,8" CornerRadius="4" BorderBrush="Gray">
		    <Grid>
		      <TextBlock TextWrapping="Wrap" Text="Place you content here, if you just have one control you can remove the grid. You can remove the border as well. Specifically if you will show a list. Easiest is to set the BorderThickness to 0." />
		    </Grid>
		  </Border>
		</TabItem>
		<TabItem Header="Orders">
		  <Border BorderThickness="1" Margin="0,-18,8,8" CornerRadius="4" BorderBrush="Gray">
		    <Grid>
		      <TextBlock TextWrapping="Wrap" Text="Place you content here. Use the grid if you need more columns/rows." />
		    </Grid>
		  </Border>
		</TabItem>
		<TabItem Header="Invoice entry">
		 <Border BorderThickness="1" Margin="0,-18,8,8" CornerRadius="4" BorderBrush="Gray">
		    <Grid>
		      <TextBlock TextWrapping="Wrap" Text="Place you content here. Use the grid if you need more columns/rows." />
		    </Grid>
		  </Border>
		</TabItem>
		<TabItem Header="Address">
		</TabItem>
	</TabControl>
	<ui:StatusBar Name="StatusBar" Grid.Row="2" Grid.Column="0" />
</Grid>

How to add a scrollbar

Different areas in the UI might require a scroll if there is not enough space. There are two main approaches, to place scroll viewers inside the areas where you require a scroll or just add a Scroll Viewer at the top of your Mashup. I would recommend placing the entire Mashup content within a Grid. The grid that contains the content should have a MinWidth and MinHeight set. It will look like this:

Always try and resize your window to test how the controls behave. Don’t set fixed sizes. Use a ScrollViewer around the entire Mashup if some of the users are on small screens.

I would always set the scrollbars to have auto visibility.

Here is what the content will look like:

<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
  <!-- Content grid with scroll. Notice the MinHeight and MinWidth-->
  <Grid MinHeight="600" MinWidth="800">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
   <Grid.RowDefinitions>
     <RowDefinition Height="*" />
   </Grid.RowDefinitions>
     <TextBlock Text="Content grid with scroll and Status bar always visible" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" FontSize="18" />
   </Grid>
</ScrollViewer>

Consider other options instead of the Group Box in order to group content. Having a header and enough margin will work best in many cases.

Download the Mashup ExampleLayout project. Unzip and open the project file in the Mashup Designer.

For more input read Windows User Experience Interaction Guidelines.