Elements in XAML

This article will explain Elements and their types in XAML.

Elements

1. All XAML elements are an XML representation of CLR classes.
2. Not all CLR classes have representations in XAML.
3. XAML elements are usually derived from System.Windows.UIElement; they provide basic visual user interface capabilities. They can render themselves. They can receive input from the keyboard or mouse and can raise events.
4. Not all XAML elements are derived from System.Windows.UIElement . Some are derived from System.Windows.FrameworkContentElement and System.Windows.Frame-workContentElement. Examples are LineBreak, TableColumn and document etc.

Root Elements

1. They function as the page's base container for all user interface elements.
2. A page is required to have one Root Element.
3. To be considered as a Root Element, the element must be the container of at least one other element.
4. Examples are Stack Panel, Dock Panel, Canvas, Grid and Page.
5. A custom Root Element can be created by deriving from Page or Window and exposing them as an XAML element.

Control Element

1. They handle user interactions.
2. This Control is of 5 types. As follows:
   
   1. Simple Controls
   2. Content Controls
   3. Item Controls
   4. Header Item Controls
   5. Header Content Controls

Simple Controls

• Derived directly from System.Windows.Control
• They do not have Content, Items and Header attributes. 
  Example: HorizantleScrollBar, VerticalScrollBar, Frame, TextBox, RichTextBox etc.

Content Controls

• They do have Content attributes.
• They do not have Item and Header attributes. 
  Example: Button, RepearButton, Label, RadioButton, CheckBox, ListBox Item, GroupItem etc.

Item Controls

• They do have an Item attribute
• They do not have content and header attributes.
• They expose a list of elements, usually offering a choice. 
  Example: ListBox, ComboBox, Menu, ContextMenu,RadioButtonList,TabControl etc .

Header Item Control

• They do have an Item attribute.
• They do have a Header attribute.
• They do not have Content attribute. 
  
  Example: MenuItem etc.

Panel Elements

1. Panel elements handle page layout and act as containers for elements like Controls or other panels.
2. The primary purpose of the panel is to provide support for layout and placement of elements on the page.
3. Some panel classes are intended for designing the user interface, while others are special panels designed specifically for special layout scenarios.
4. The panel elements designed for user-interface design are DockPanel, StackPanel, Canvas, WrapPanel, and Grid.

Shape and Geometric Elements

1. Shape and geometric elements represent 2-D vector graphics
2. Shapes derive from the Shape class and represent predefined geometric shapes. WPF shapes available for use with XAML are Ellipse, Line, Path, Polygon, Polyline, and Rectangle
3. Shapes are a type of UIElement, which means they can be used inside panels and most other controls
4. Geometric elements, while also representing 2-D vector graphics, are more flexible than shape elements and can also be used for hit-testing and clipping purposes
5. Geometry elements can be simple vector graphics, such as circles or polygons, or more complex elements comprised of Bezier lines and arcs
6. Geometries cannot render themselves
7. They must be drawn by another element, such as Drawing or Path

Document Elements

1. They handle document presentation.
2. They are of two types either Flow or Fixed.
3. The Fixed Document element is designed to be what you see is what you get.
4. A Flow Document provides more flexibility in appearance to enhance readability.
5. Flow documents dynamically reformat content based on a variety of factors, including screen and page size, font size, and optional user preferences
6. Flow documents are comprised of one or more elements derived from Block or Inline
7. Block elements such as Block, Figure, Floater, List, ListItem, Paragraph, Section, Table, and TableCell are used to organize and format blocks of text.
8. Inline elements are used to format text within a block. Inline elements are Bold, AccessKey, LineBreak, Hyperlink, Italic, Subscript, Superscript, and Underline

Example:

A button with three ellipses inside them. The following XAML does that:

<Window x:Class="Button.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<StackPanel>
<Button Width="100" Height="200">
<DockPanel>
<Ellipse Margin="10" DockPanel.Dock="Top" Stroke="Red" Fill="red" />
<Ellipse Margin="10" DockPanel.Dock="Top" Stroke="Black" />
<Ellipse Margin="10" DockPanel.Dock="Top" Stroke="Black" />
</DockPanel>
</Button>
</StackPanel>
</Window>