Working With The Stack Panel Control In Universal Window App

In this blog, you will learn about the stack panel control in Universal Window app.

Prerequisites

• Visual Studio 2015

Introduction

StackPanel is a simple and useful layout panel. It stacks its child elements given below or besides each other, dependng on its orientation (horizontal or vertical). This is very useful to create any kind of lists. StackPanel doesn't wrap the content. Instead, it stretches the content in one direction, allowing you to stack item after item on top of each other. All ItemsControls like ComboBox, ListBox or Menu use a StackPanel as their internal layout panel.

Syntax

<StackPanel ...>
   oneOrMoreChildren
</StackPanel>

Properties

StackPanel is a layout panel, which arranges child elements into a single line that can be oriented horizontally or vertically. StackPanel class has orientation properties.

Types 

• Vertical(By default)
• Horizontal

By default, StackPanel stacks the items vertically from top to bottom. You can set the Orientation property to Horizontal to stack items from left to right.

Vertical Orientation

<StackPanel>
   <Button>Button 1</Button>
   <Button>Button 2</Button>
   <Button>Button 3</Button>
</StackPanel>

Horizontal Orientation

<StackPanel Orientation="Horizontal">
   <Button>Button 1</Button>
   <Button>Button 2</Button>
   <Button>Button 3</Button>
</StackPanel>

Now, let's get started with the steps, given below-

Step 1 - Create Windows Universal Project

Open Visual Studio 2015 and click File -> New -> Project Option for New Universal app.



Step 2 - Giving the Project Name

New Project Window will open. You can select an Installed -> Template -> Visual C# -> Windows -> Universal and select a Blank app (Universal Windows).

Type Project Name StackPanel and click OK button.



Step 3 - Setting the platform Versions

Here, we choose Target Version and Minimum Version for our Universal Windows Application and click OK button.



Step 4 - Choose Designer Window

Now, we go to Solution Explorer and select MainPage.xaml.



Step 5 - Add the Coding

Add the code, given below, for the Stack Panel control in MainPage.xaml. 

 

<StackPanel>
    <Button Content="Vertical Stack 1" />
    <Button Content="Vertical Stack 2" />
    <StackPanel Orientation="Horizontal">
        <Button Content="Horizontal Stack 1" />
        <Button Content="Horizontal Stack 2" />
        <Button Content="Horizontal Stack 3" /> </StackPanel>
</StackPanel>

Step 6 - Run the Application

Now, we are ready to run our project. Thus, click Local Machine to run the Application.



Output



Conclusion - I hope you understood Stack Panel control in Universal Window and how to run it.