XAML Controls are basic building blocks of building user-interfaces in XAML and Avalon programming model. Unlike Windows Forms and ASP.NET, XAML and Avalon seperates controls on based on their functionality and capabilities.
I was reading an article of WinFX documentation called "Controls Overview". I thought that article was not detailed enough to understand XAML controls. I hope this article will give you a better idea of XAML controls.
There are five types of XAML controls -
- Simple Controls
- Content Controls
- Items Controls
- Headered Items Controls
- Headered Content Controls
1. Simple Controls
Simple controls do not have any content or items. The controls fall in this category are - Image, Frame, HorizontalScrollBar and VerticalScrollBar. These controls do not support Content, Items, and Header properties.
For example, the following code creates an Image control with a source image in it.
<Window xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
<Image Source="C:\butterfly.jpg"/>
</Window>
You usually don't use these controls directly. These controls can be thought as helper controls. For example, if you want to create a Button control with image, you would use Image control with the Button control.
<Button Height="50" Width="60">
<Image Source="C:\butterfly.jpg"/>
</Button>
2. Content Controls
Content controls are controls that can display some content. We can further divide content controls in simple and complex. Simple content controls are TextBox, Button, and Label and complex content controls are Panels. Simple contnet controls have a Content property, which alternately can be used as default value of the element. The following code creates a simple button.
<Window xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
<Button Height="30" Width="100">
</Button>
</Window>
The following code creates a button with content as "Hello".
<Button Height="30" Width="100"> Hello
</Button>
Alternatively, you can use Content attribute of Button element.
<Button Height="30" Width="100" Content="Hello">
</Button>
Now here comes the good part. Content property of these controls does not have to be a text value. It can be other controls as well. For example, I can set an image control as content of a Button.
<Button Height="50" Width="60">
<Image Source="C:\butterfly.jpg"/>
</Button>
Not only image, we can also set any other controls such as a button or TextBox as content of a content control. For example, following code creates a TextBox on top of a Button. Furthermore, we can set the content of TextBox and so on.
<Button Height="60" Width="200">
<TextBox Height="30" Width="140">
I am TextBox on top of a button
</TextBox>
</Button>
The outout looks like Figure 1.
Figure 1. Complex control
The comlext content controls can have multiple elements as their content property. For example, the following code creats a DockPanel with a Button and TextBox as Content. Then Button also has Image as its content.
<DockPanel>
<Button Height="70" Width="250">
<Image Source="C:\butterfly.jpg"/>
</Button>
<TextBox Height="40" Width="100">I am Text</TextBox>
</DockPanel>
The outout looks like Figure 2.
Figure 2. Complex control with a button and text box
3. Items Controls
Items controls are controls that have children. Any control with collection falls in this category. For example, ListBox is a collection of ListBoxItems. Some other examples of items controls fall in this category are ComboBox and ContextMenu.
The following code creates a ListBox with 4 ListBox items.
<Window xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
<ListBox Height="100" Width="120" HorizontalAlignment="Center"
VerticalAlignment="Top" Background="LightGray">
<ListBoxItem Foreground="Green">1. C# Corner</ListBoxItem>
<ListBoxItem Foreground="Red">2. .NET Heaven</ListBoxItem>
<ListBoxItem Foreground="Black">3. Longhorn Corner</ListBoxItem>
<ListBoxItem Foreground="Blue">4. VB.NET Heaven</ListBoxItem>
</ListBox>
</Window>
The outout looks like Figure 3.
Figure 3. ListBox Items control
4. Headered Items Controls
Headered items controls are controls
5. Headered Content Controls
Headered items controls are controls
Summary
In this article, I discussed different types of controls available in XAML.
References:
- WinFX SDK Documentation
work in progress ...