Root Elements
1. It functions as the page's base container for all user interface elements.
2. A page required to have one Root Element.
3. To be considered as a Root Element, the element must be container of the at least one other element.
Examples are Stack Panel, Dock Panel, Canvas, Grid and Page.
4. A custom Root Element can be created by deriving from Page or Window and exposing them as XAML element.
Control Element
1. They handle user interactions.
2. This Control is of 5 types. As follows
a. Simple Controls
b. Content Controls
c. Item Controls
d. Header Item Controls
e. Header Content Controls
Simple Controls
· Derive 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 Items and Header attributes.
Example: Button, RepearButton, Label, RadioButton, CheckBox, ListBox Item, GroupItem etc.
Item Controls
· They do have Item attribute
· They do not have content and header attributes.
· They expose 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 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 ellipse inside that. The following XAML is doing so
<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>