XAML: Layout controls Part II

XAML Controls

In this part of the article we will talk about the next three XAML layout controls. This includes RelativePanel, StackPanel and ScrollViewer.

Relative Panel

Relative Panel is a very good tool to use when your application is dealing with different orientation modes. It helps to define the position of child UI elements in relation to another UI element as well as the panel in which both the elements exist. So for example, if you have UI elements A and B together, you may position the UI element A in relation to the UI element B as well as the panel. Following diagram gives a better idea about relative panel if the UI elements are displayed in one orientation, lets say landscape mode (top left corner) and it is changed to portrait mode (bottom right corner) how will they change the location in respective to their surrounding UI elements:

Relative Panel

As we may see in the above diagram, the RED element in the landscape orientation is in the left side of the screen. Also it is connected to both YELLOW and RED elements. When we moved to portrait mode, we moved the UI elements in such way that RED came on top of the screen whereas YELLOW and GREEN changed their position according to how we want to display (in portrait mode). Before in the past, we had to consider each element separately and we had to define how each of them will behave when there is a change in modes which was a time-consuming task. This panel settings has helped us to not to worry about all elements anymore because they are assigned positions in relation to the surrounding UI elements.

Following is an example which will help us to understand even better. We are taking 4 squares within the relative panel. Relative panel is defined with the margins provided to it. Also, width and height of the Relative panel is defined. As RelativePanel is defined with the property ‘VerticalAlignment = “Top”‘, the first square ‘Square1″ automatically gets added to TOP-LEFT corner of the panel. Then we add “Sqaure2″ to the panel and define it to be on the RIGHT  side of “Square1″. Then we add “Square3″ to the panel and define it to be BELOW of “Square1″. In the end, we add “Square4″ and define it to the RIGHT of “Square3″ and BELOW of “Square2″.

Following is a complete XAML code of this:

 

<RelativePanel Width="300" Margin="30,100,100,0" VerticalAlignment="Top" Height="118">
  <Rectangle x:Name="Square1" Fill="Red" Height="50" Width="50" Margin="0,0,5,5"/>
  <Rectangle x:Name="Square2" Fill="Green" Height="50" Width="50" RelativePanel.RightOf="Square1" Margin="0,0,0,5" />
  <Rectangle x:Name="Square3" Fill="Blue" Height="50" Width="50" RelativePanel.Below="Square1" Margin="0,0,5,0" />
  <Rectangle x:Name="Square4" Fill="Yellow" Height="50" Width="50" RelativePanel.Below="Square2" RelativePanel.RightOf="Square3" />
</RelativePanel>

Following are the properties of each square:

Square1:

Square1 Properties Tab

Square2:

Square2 Properties Tab

Square 3:

Square3 Properties Tab

Square4:

Square4 Properties Tab

When it comes to the document online, here is how it will display:

document-outline

After making all the changes, following should be our output in Portrait Mode:

Relative Panel Portrait Mode

The same layout will display in the landscape mode as following:

Relative Panel Landscape Mode

I hope this gives a clear idea about this layout and how useful it is when it comes to display the UI elements in relation to each other.

StackPanel

StackPanel helps to display the UI elements in a stack format, which is from top to bottom in vertical orientation and from left to right in the horizontal orientation. It is simple to implement by using <StackPanel> tag. Let us consider an example in which we have to display three different objects, square, circle and rectangle in the StackPanel in vertical orientation. Here is how the code will look like:

<StackPanel Orientation="Vertical">
    <Rectangle Fill="#FF0000D1" HorizontalAlignment="Left" Height="100" Margin="126,39,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"/>
    <Ellipse Fill="#FFF90000" HorizontalAlignment="Left" Height="100" Margin="126,0,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"/>
    <Rectangle Fill="Yellow" HorizontalAlignment="Left" Height="201" Margin="126,0,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"/>
</StackPanel>

Following is the output we receive when we execute the above code which shows the vertical layout in the stack.

stack-panel

ScrollViewer

As the name states, it helps to add the scroll-bar to the content panel. It doesn’t matter what kind of content we have inside the ScrollViewer. We may have a text-block or an image or maybe a StackPanel carrying different objects in it. Let us consider an example here in which we are keeping three objects inside the StackPanel and then implementing ScrollViewer on it. By default, the ScrollViewer will have the same height as the list of contents inside the StackPanel, however, if we change the height of the Scrollviewer to a defined height, lets say 200px, it will bound the StackPanel to 200px and display all the objects within that 200px window. Following is the code which we will use:

<ScrollViewer HorizontalScrollMode="Auto" Height="200">
  <StackPanel>
    <Rectangle Fill="#FF0000D1" HorizontalAlignment="Left" Height="100" Margin="126,39,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"/>
    <Ellipse Fill="#FFF90000" HorizontalAlignment="Left" Height="100" Margin="126,0,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"/>
    <Rectangle Fill="Yellow" HorizontalAlignment="Left" Height="201" Margin="126,0,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"/>
  </StackPanel>
</ScrollViewer>

Following is an output which we will see when we execute the above mentioned code:

Scrollviewer

As you may notice that there is scroll-bar displaying next to the objects.

I hope this article might have given a better understanding of how to use the above mentioned XAML controls. In the next article, I will detail the next three XAML controls.

Happy Coding! :)