Coding Bots

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.

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.

Lets Start Working:

Following are the default controls in XAML:

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

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.

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

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

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

The output for the above code is:

 

If we set the property of Orientation to Horizontal,

<StackPanel Orientation="Horizontal">
........
....

Then the output will be:

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

<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" />
            </StackPanel>
        </StackPanel>

Here is the output:

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

Exit mobile version