In this article we will learn about the XAML Layout Grid Panel, StackPanel, DockPanel, Wrap Panel, Canvas Panel and Panel related Properties Visual and Structural Function with some small examples.
Why XAML is ImportantXAML is a modern UI design Markup Language, it helps design a rich UI, 2d and 3d animation, plugin based applications and we also use XAML for:
The following summarizes the differences among Windows, Web and XAML Layout applications.Normal Windows Layout Application
Web Form Layout
XAML Layout
Element Size in XAML
Remember that star-sizing does not work if the grid size is calculated based on its content.Panels in XAML
Grid Panel: combination of row and column layout is a Grid Panel; in other words, a Grid Panel arranges controls in a tabular format. The functionality is similar to the HTML table but more flexible as in the following example we try to show a row and column combination for the windows. There are 4 rows and 4 columns.
Add controls in Grid PanelTo add controls to the grid layout panel ,just put the declaration between the opening and closing tags of the Grid. Keep in mind that the row and columndefinitions must proceed any definition of child controls.The grid layout panel provides the two attached properties Grid.Column and Grid.Row to define the location of the control.In the following example I try to show one normal data entry form design using XAML:StackPanelStackPanel is a useful XAML layout. It keeps a control horizontal and vertical; using a stack we design the application like many controls.Stack Panel common properties are:
Wrap PanelIn a Wrap Panel the child elements are positioned sequentially, from left to right and top to bottom.By default the layout orientation is horizontal and the controls flow left to right; depending on the screen size the control might wrap to the next line.By default the screen and code: <Grid> <Grid.RowDefinitions> <RowDefinition></RowDefinition> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <WrapPanel Grid.Row="0" Grid.Column="0"> <Button Margin="10">Mango</Button> <Button Margin="10">Apple</Button> <Button Margin="10">Grape</Button> <Button Margin="10">Banana</Button> <Button Margin="10">Bilberry</Button> <Button Margin="10">Lemon</Button> </WrapPanel> </Grid>Elements wrap to the next line once to reduce screen width:DockPanel: Dock Panel is a most useful layout panel in XAML, it arranges controls to the top, left, bottom, right and remaining space. A useful property is:
The default is left; if we don't set the dock property then it will be left:
Canvas Layout:
Drawbacks:
Code
<Canvas> <Label Content="Canvas Layout Demo" FontSize="15" FontWeight="Bold" Foreground="Red" Canvas.Top="10" Canvas.Left="25"/> <Label Content="ContactInfo" FontSize="12" Canvas.Top="66" Canvas.Left="10"/> <Label Content="Name" Canvas.Top="45" Canvas.Left="93"/> <Label Content="Address" Canvas.Top="90" Canvas.Left="93"/> <TextBox FontSize="15" FontWeight="Bold" Canvas.Top="45" Canvas.Left="185" Width="93"/> <TextBox FontSize="15" FontWeight="Bold" Canvas.Top="90" Canvas.Left="185" Width="93"/> </Canvas>One small simple Data Entry Form Demo using all panels: stack, dock, wrap, and canvas.In this example we try to show the real use of these panels and controls in WPF:
Programming XAML