Working with XAML 1/4

Who should read this article:

Any one who wants to work with the following that are listed below or anyone who is a beginner in them, should read this article.

  • Windows 8/onward Development using C# & XAML
  • Windows Phone 8/onward Development using C# & XAML
  • Windows Presentation Foundation (WPF)

What is XAML:

Microsoft developed Markup language named XAML is an abbreviation of “Extensible Application Markup Language”. which is pronounced as “zamel”. Used  for developing front end of Windows RunTime applications, Silver light application and WPF application. You can read more from Microsoft website.

introduction xaml

Lets Start Working:

Following are the default controls in XAML:

  • TextBox
  • TextBlock
  • Slider
  • ProgressBar
  • ProgressRing
  • Button
  • CheckBox
  • RadioButton
  • HyperlinkButton
  • ToggleSwitch
  • PasswordBox
  • RichEditBox
  • ComboBox
  • ListBox
  • Image
  • ToolTip
  • Popup

Some of the layouts are listed here that we will cover in this article:

  • Stack Panel
  • Canvas
  • Grid
  • Grid View
  • List View

Stack Panel:

As it is clear from the name, all items in this container will be stacked together either vertically or horizontally. By default, all items in stack panel are aligned vertically.

            <!-- Item 1 here -->
            <!-- Item 2 here -->
            <!-- Item 3 here -->

These items can be any thing; for example, button, textbox, textblock, stack panel, grid etc.

            <Button Content="Button one" />
            <Button Content="Button two" />
            <Button Content="Button three" />

The output for the above code is:
Stack panel layout


If we set the property of Orientation to Horizontal,

<StackPanel Orientation="Horizontal">

Then the output will be:

horizontal stack panel

For alignment of the stackpanel itself you can use two important properties listed below with values

  • HorizontalAlignment
    • Center
    • Left
    • Right
    • Stretch
  • VerticalAlignment
    • Botton
    • Center
    • Stretch
    • Top
<StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" >

Here is another code with output for your better understanding:

        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" > 
            <Button Content="Button one" />
            <StackPanel Orientation="Horizontal">
                <Button Content="Button two" />
                <Button Content="Button three" />

Here is the output:

nested stack panel

You can read more here. Stay tuned for further details.

Danyal MalikWorking with XAML 1/4
Share this post

Join the conversation