Panels, Tab Containers Doncho Minkov Telerik School Academy schoolacademy.telerik.com Technical Trainer

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

What is a Container? Containers in XAML

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

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

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

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

Positioning elements in a Canvas Positioning elements in a Canvas Using attached properties Using attached properties Heres an example that places a Rectangle at specific location in a Canvas Heres an example that places a Rectangle at specific location in a Canvas 9 <Rectangle Canvas.Left="30" Canvas.Top="30" <Rectangle Canvas.Left="30" Canvas.Top="30" Fill="Red" Width="100" Height="100"/> Fill="Red" Width="100" Height="100"/> …</Canvas>

Placing elements behind or in front of others depends on the z-order Placing elements behind or in front of others depends on the z-order Defines which elements are on top of the other elements Defines which elements are on top of the other elements The default z-order The default z-order Determined by the order in which the children are added to the Canvas 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 Customize the z-order of any child element using Canvas.ZIndex attached property 10

11 <Rectangle Canvas.Left="0" Canvas.Top="0" Fill="Red" <Rectangle Canvas.Left="0" Canvas.Top="0" Fill="Red" Width="100" Height="100" Canvas.ZIndex="3" /> Width="100" Height="100" Canvas.ZIndex="3" /> <Rectangle Canvas.Left="20" Canvas.Top="20" <Rectangle Canvas.Left="20" Canvas.Top="20" Fill="Orange" Width="100" Height="100" Fill="Orange" Width="100" Height="100" Canvas.ZIndex="2" /> Canvas.ZIndex="2" /> <Canvas Canvas.Left="300" Canvas.Top="300" <Canvas Canvas.Left="300" Canvas.Top="300" Canvas.ZIndex="1"> Canvas.ZIndex="1"> <Rectangle Width="120" Height="330" RadiusX="20" <Rectangle Width="120" Height="330" RadiusX="20" RadiusY="20" Fill="Black"/> RadiusY="20" Fill="Black"/> <Ellipse Canvas.Left="10" Canvas.Top="10" <Ellipse Canvas.Left="10" Canvas.Top="10" Width="100" Height="100" Fill="Red"/> Width="100" Height="100" Fill="Red"/> </Canvas>

Live Demo

StackPanel, DockPanel, Wrap Panel

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

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

The DockPanel provides docking of elements to the left, right, top, bottom of the panel The DockPanel provides docking of elements to the left, right, top, bottom of the panel Defined by the attached property Dock 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 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. LastChildFill property must be set to true. </DockPanel>

Live Demo

Grid and UniformGrid

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

Number of rows is defined by a content property called " RowDefinitions " Number of rows is defined by a content property called " RowDefinitions " Each row can be set a height Each row can be set a height It is the same with " ColumnDefinitions " It is the same with " ColumnDefinitions " <Grid.RowDefinitions> </Grid.RowDefinitions><Grid.ColumnDefinitions> </Grid.ColumnDefinitions>

Each of the elements in a Grid should have a Grid.Row and/or Grid.Column property set Each of the elements in a Grid should have a Grid.Row and/or Grid.Column property set <Grid>… </Grid>

Much like the common Grid panel Much like the common Grid panel Cannot set position explicitly Cannot set position explicitly Each elements is with the same size Each elements is with the same size Fills the elements depending of the number of rows/columns Fills the elements depending of the number of rows/columns FlowDirection property sets the arrange style of the elements FlowDirection property sets the arrange style of the elements … </UniformGrid>

Live Demo

Offer the user a way to adjust the layout of your application Offer the user a way to adjust the layout of your application Changing the size of a column or row in a grid Changing the size of a column or row in a grid Use GridSplitter only to rearrange a Grid panel Use GridSplitter only to rearrange a Grid panel 25 … … <GridSplitter Grid.Column="1" <GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" /> HorizontalAlignment="Stretch" /> </Grid>

Live Demo

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

Live Demo

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

Lets make a window with no Windows border, rounded corners and transparent background Lets make a window with no Windows border, rounded corners and transparent background <Border BorderThickness="5" Background="Transparent" CornerRadius="10"> CornerRadius="10"> </Border.BorderBrush>…</Border> Lets have no Windows Border

Live Demo

TabControl is useful for switching between multiple pages of content TabControl is useful for switching between multiple pages of content Tabs in a TabControl are typically placed on the top Tabs in a TabControl are typically placed on the top TabStripPlacement property can set their placement to Left, Right, or Bottom TabStripPlacement property can set their placement to Left, Right, or Bottom 35 <TabControl> Content for Tab1. Content for Tab1. Content for Tab2. Content for Tab2. Content for Tab3. Content for Tab3. </TabControl>

Live Demo

Questions?

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

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

3. Using Tabs create the previous XAMLs in tab controls 4. Add GridSplitter whenever you used Grid as a panel