Stats

87 Contributors: 7
2016-08-17
Licensed under: CC-BY-SA

Not affiliated with Stack Overflow
Rip Tutorial: info@zzzprojects.com

Download eBook

Getting started with xaml

Download xaml eBook

Remarks

EXtensible Application Markup Language (XAML) is a XML based markup language developed by Microsoft. It is used in several Microsoft technologies like Windows Presentation Foundation (WPF), Silverlight, WinRT, Universal Windows Platform, etc. to define the User Interface for applications.

Versions

VersionRelease Date
WPF XAML2006-11-21
Silverlight 32009-07-09
Silverlight 42010-04-15
Windows 8 XAML2011-09-01

Hello World

Here is a simple example of an XAML page in WPF. It consists of a Grid, a TextBlock and a Button - the most common elements in XAML.

<Window x:Class="FirstWpfApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" 
        Height="350"
        Width="525">
    <Grid>
        <TextBlock Text="Welcome to XAML!"
                   FontSize="30"
                   Foreground="Black"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"/>
        
        <Button Content="Hello World!"
                Background="LightGray"
                Foreground="Black"
                FontSize="25"
                Margin="0,100,0,0"
                VerticalAlignment="Center"
                HorizontalAlignment="Center"/>
    </Grid>
</Window>
SyntaxDescription
<Window>The root container which hosts the content that visualizes data and enable users to interact with it. A WPF window is a combination of an XAML (.xaml) file, where the element is the root, and a CodeBehind (.cs) file.
<Grid>A layout panel that arranges its child elements in a tabular structure of rows and columns.
<TextBlock>Provides a lightweight control for displaying string text in its Text property or Inline flow content elements, such as Bold, Hyperlink, and InlineUIContainer, in its Inlines property.
<Button>Represents a button control which reacts with the user click on it.
PropertyDescription
TitleGets or sets the title of a window.
HeightGets or sets the height of an element.
WidthGets or sets the width of an element.
TextGets or sets the text content of a text element.
FontSizeGets or sets the top-level font size for the text.
BackgroundGets or sets the brush color that paints the background of an element.
ForegroundGets or sets the brush color that paints the font of a text in an element.
MarginGets or sets the value that describes the outer space between an element and the others.
HorizontalAlignmentGets or sets the horizontal alignment characteristics applied to the element when it is composed within a parent element, such as a panel or items control.
VerticalAlignmentGets or sets the vertical alignment characteristics applied to the element when it is composed within a parent element such as a panel or items control.

Installation or Setup

The easiest way to get writing your first XAML is to install Microsoft Visual Studio. This is avaliable free from Microsoft.

Once installed you can create a new project, of type WPF Application, either with a VB.NET or C# code.

This is similar to windows forms in the sense that you have a series of windows, the main difference being that these windows are written in XAML and are much more responsive to different devices.

Still needs improvment.