WPF Layout Containers

WPF Layout Containers Panels, Tab Containers Doncho Minkov Telerik School Academy schoolacademy.telerik.com Technical Trainer h ttp://www.minkov.it

Table of Contents Containers Overview Containers in XAML Three Kinds of Containers (Panels) Absolute coordinates, Stacking, Proportional GridSplitters and Sizing XAML Tab Containers

Containers Overview What is a Container? Containers in XAML

What is a Container? A containers is something that contains other things In HTML divs and spans are containers They hold another controls / tags Used to represent the layout of the application Every container is given a space to consume All his children are in this space

Containers in WPF In WPF containers are called Panels Three common types of panels Panels with absolute coordinates Panels with stacking order Panels with proportional or with rows/columns Absolute coordinates Panels Canvas Controls inside the canvas are arranged based on the Canvas position and size

Containers in WPF (2) Stacking Panels StackPanel , DockPanel , WrapPanel Elements are arranged in a stacking order i.e. first come goes in the beginning Proportional Panels Grid and UniformGrid Arrange the elements in a table-like layout

The Canvas Container The Canvas is a layout container It’s an element that holds other elements It simply positions each item using fixed coordinates Places elements behind or in front of others (depending on the z-order) Supports size and clipping

The Canvas Container (2) Positioning elements in a Canvas Using attached properties Here’s an example that places a Rectangle at specific location in a Canvas <Canvas> <Rectangle Canvas.Left="30" Canvas.Top="30" Fill="Red" Width="100" Height="100"/> … </Canvas>

The Canvas Container (3) Placing elements behind or in front of others depends on the z-order Defines which elements are “on top of” the other elements The default z-order Determined by the order in which the children are added to the Canvas Customize the z-order of any child element using Canvas.ZIndex attached property

The Canvas Container – Example < Canvas Background="White" Height="680"> <Rectangle Canvas.Left="0" Canvas.Top="0" Fill="Red" Width="100" Height="100" Canvas.ZIndex ="3" /> <Rectangle Canvas.Left="20" Canvas.Top="20" Fill="Orange" Width="100" Height="100" Canvas.ZIndex ="2" /> <Canvas Canvas.Left="300" Canvas.Top="300" Canvas.ZIndex ="1"> <Rectangle Width="120" Height="330" RadiusX="20" RadiusY="20" Fill="Black"/> <Ellipse Canvas.Left="10" Canvas.Top="10" Width="100" Height="100" Fill="Red"/> </Canvas> </Canvas>

Customize the Z-order and Multiple Canvas Elements Live Demo

Stacking Panels StackPanel, DockPanel, Wrap Panel

StackPanel The StackPanel arranges the elements in one row/column Depends on the orientation property If the size of each element is not explicitly set all elements have the same width/height Can set flow orientation Vertical or Horizontal <StackPanel> <TextBlock Text="Text" Background="Yellow"/> <TextBlock Text="Text" Background="Blue"/> </StackPanel>

WrapPanel The WrapPanel is much like StackPanel but if the end of the available space is reached Arranges the elements in the next row/columns Depends on the orientation property Example: <WrapPanel> <TextBlock Text="Text" Background="Yellow"/> <TextBlock Text="Text" Background="Blue"/> <TextBlock Text="Text" Background="Yellow"/> <TextBlock Text="Text" Background="Blue"/> </WrapPanel>

DockPanel The DockPanel provides docking of elements to the left , right , top , bottom of the panel Defined by the attached property Dock To dock an element to the center of the panel, it must be the last child of the panel LastChildFill property must be set to true. <DockPanel LastChildFill="True"> <Button Content="Top" DockPanel.Dock="Top"/> <Button Content="Bottom" DockPanel.Dock="Bottom"/> <Button Content="Left"/> <Button Content="Right" DockPanel.Dock="Right"/> <Button Content=" LastChildFill=True "/> </DockPanel>

Proportional Panels Grid and UniformGrid

Grid Panel The most powerful layout container in WPF Everything can be done with Grid Sometimes a way harder than using StackPanel Arranges the elements in a table-like layout Predefined number of rows and columns Each element has explicitly set grid row/column Using the attached properties Grid.Row and Grid.Column If no columns/rows are defined, works the like canvas

Grid Panel (2) Number of rows is defined by a content property called " RowDefinitions " Each row can be set a height It is the same with " ColumnDefinitions " <Grid.RowDefinitions> <RowDefinition Height="50" /> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition Width="50" /> </Grid.ColumnDefinitions>

Grid Panel (3) Each of the elements in a Grid should have a Grid.Row and/or Grid.Column property set <Grid> … <Button Grid.Row="0" Grid.Column="0" Content="{0, 0}"/> <Button Grid.Row="0" Grid.Column="1" Content="{0, 1}"/> <Button Grid.Row="1" Grid.Column="0" Content="{1, 0}"/> <Button Grid.Row="1" Grid.Column="1" Content="{1, 1}"/> <Button Grid.Row="2" Grid.Column="0" Content="{2, 0}"/> <Button Grid.Row="2" Grid.Column="1" Content="{2, 1}"/> </Grid>

UniformGrid Panel Much like the common Grid panel Cannot set position explicitly Each elements is with the same size Fills the elements depending of the number of rows/columns FlowDirection property sets the arrange style of the elements <UniformGrid Rows="3"> <Button Content="First"/> … <Button Content="Seventh"/> </UniformGrid>

GridSplitter Offer the user a way to adjust the layout of your application Changing the size of a column or row in a grid Use GridSplitter only to rearrange a Grid panel <Grid Height="100" Width="400"> <Grid.ColumnDefinitions>…</Grid.ColumnDefinitions> <Ellipse Grid.Column="0" Fill="Red" /> <GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" /> <Ellipse Grid.Column="2" Fill="Blue" /> </Grid>

Sizing There are a number of properties to set the size of a panel or the elements in it Width , Height , MaxWidth , MaxHeight , MinWidth , MinHeight Padding and Margin <StackPanel> <Button Content="First" Margin="1" Padding="5" Height="50" Width="Auto"/> … <Button Content="Fifth" Margin="5" Padding="1" Height="50" Width="Auto"/> </StackPanel>

Border Container The Border container is a special kind of container It can hold only one child element The child element becomes surrounded by a border The Border properties for border style BorderBrush BorderThickness CornerRadius

Border Example Lets make a window with no Windows border, rounded corners and transparent background <Window … WindowStyle="None"/> <Border BorderThickness="5" Background="Transparent" CornerRadius="10"> <Border.BorderBrush> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="Blue" Offset="0.2"/> <GradientStop Color="DarkBlue" Offset="0.8"/> </LinearGradientBrush> </Border.BorderBrush> … </Border> Lets have no Windows Border

TabContol TabControl is useful for switching between multiple pages of content Tabs in a TabControl are typically placed on the top TabStripPlacement property can set their placement to Left , Right , or Bottom <TabControl> <TabItem Header="Tab 1">Content for Tab1.</TabItem> <TabItem Header="Tab 2">Content for Tab2.</TabItem> <TabItem Header="Tab 3">Content for Tab3.</TabItem> </TabControl>

Exercises Create the following: *Note : Don't use Grid for everything

Exercises (2) Create the following: *Note : Don't use Grid for everything

Exercises (3) Using Tabs create the previous XAMLs in tab controls Add GridSplitter whenever you used Grid as a panel

WPF Layout Containers

More Related Content

What's hot

Similar to WPF Layout Containers

More from Doncho Minkov

Recently uploaded

WPF Layout Containers

Editor's Notes