WPF Layout WPF Layout ContainersContainers

Panels, Tab ContainersPanels, Tab Containers

Doncho MinkovDoncho Minkov

Telerik School Telerik School AcademyAcademyschoolacademy.telerik.com

Technical TrainerTechnical Trainerhttp://www.minkov.it

Table of ContentsTable of Contents Containers OverviewContainers Overview Containers in XAMLContainers in XAML

Three Kinds of Containers (Panels)Three Kinds of Containers (Panels)

Absolute coordinates, Stacking, Absolute coordinates, Stacking, ProportionalProportional

GridSplitters and SizingGridSplitters and Sizing XAML Tab ContainersXAML Tab Containers

Containers OverviewContainers OverviewWhat is a Container? Containers in What is a Container? Containers in

XAMLXAML

What is a Container?What is a Container? A containers is something that A containers is something that

contains other thingscontains other things In HTML In HTML divsdivs and and spansspans are are

containerscontainers

They hold another controls / tagsThey hold another controls / tags

Used to represent the layout of the Used to represent the layout of the applicationapplication

Every container is given a space to Every container is given a space to consumeconsume All his children are in this spaceAll his children are in this space

Containers in WPF Containers in WPF In WPF containers are called In WPF containers are called PanelsPanels Three common types of panelsThree common types of panels

Panels with absolute coordinatesPanels with absolute coordinates

Panels with stacking orderPanels with stacking order

Panels with proportional or with Panels with proportional or with rows/columnsrows/columns

Absolute coordinates PanelsAbsolute coordinates Panels CanvasCanvas

Controls inside the canvas are Controls inside the canvas are arranged based on the arranged based on the CanvasCanvas position and sizeposition and size

Containers in WPF (2)Containers in WPF (2) Stacking PanelsStacking Panels

StackPanelStackPanel, , DockPanelDockPanel, , WrapPanelWrapPanel Elements are arranged in a stacking Elements are arranged in a stacking

orderorder i.e. first come goes in the beginningi.e. first come goes in the beginning

Proportional PanelsProportional Panels GridGrid and and UniformGridUniformGrid Arrange the elements in a table-like Arrange the elements in a table-like

layoutlayout

The The CanvasCanvas Container Container

The The CanvasCanvas Container Container The The CanvasCanvas is a is a layoutlayout containercontainer

It’s an element that holds It’s an element that holds other other elementselements

It simply positions each item using It simply positions each item using fixed coordinatesfixed coordinates

Places elements behind or in front Places elements behind or in front of others (depending on the z-of others (depending on the z-order)order)

Supports size and clippingSupports size and clipping

8

The The CanvasCanvas Container Container (2)(2)

Positioning elements in a Positioning elements in a CanvasCanvas

Using Using attached propertiesattached properties

Here’s an example that places a Here’s an example that places a RectangleRectangle at specific at specific location in a location in a CanvasCanvas

9

<Canvas><Canvas> <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></Canvas>

The The CanvasCanvas Container Container (3)(3)

Placing elements behind or in front Placing elements behind or in front of others depends on the z-orderof others depends on the z-order Defines which elements are “on top Defines which elements are “on top

of” the other elementsof” the other elements The default z-order The default z-order

Determined by the order in which Determined by the order in which the children are added to the the children are added to the CanvasCanvas

Customize the z-order of any child Customize the z-order of any child element using element using Canvas.ZIndexCanvas.ZIndex attached propertyattached property

10

The The CanvasCanvas Container – Container – ExampleExample

11

<<CanvasCanvas Background="White" Height="680"> Background="White" Height="680"> <Rectangle Canvas.Left="0" Canvas.Top="0" <Rectangle Canvas.Left="0" Canvas.Top="0" Fill="Red"Fill="Red" Width="100" Height="100" Width="100" Height="100" Canvas.ZIndexCanvas.ZIndex="3" />="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.ZIndexCanvas.ZIndex="2" />="2" /> <Canvas Canvas.Left="300" Canvas.Top="300"<Canvas Canvas.Left="300" Canvas.Top="300" Canvas.ZIndexCanvas.ZIndex="1">="1"> <Rectangle Width="120" Height="330" <Rectangle Width="120" Height="330" RadiusX="20"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></Canvas></Canvas></Canvas>

Customize the Z-order Customize the Z-order and and MultipleMultiple CanvasCanvas

ElementsElementsLive DemoLive Demo

Stacking PanelsStacking PanelsStackPanel, DockPanel, Wrap PanelStackPanel, DockPanel, Wrap Panel

StackPanelStackPanel The The StackPanelStackPanel arranges the arranges the

elements in one row/column elements in one row/column Depends on the orientation Depends on the orientation

propertyproperty If the size of each element is not If the size of each element is not

explicitly set all elements have the explicitly set all elements have the same width/heightsame width/height

Can set flow orientationCan set flow orientation Vertical or HorizontalVertical or Horizontal

<StackPanel><StackPanel> <TextBlock Text="Text" Background="Yellow"/><TextBlock Text="Text" Background="Yellow"/> <TextBlock Text="Text" Background="Blue"/><TextBlock Text="Text" Background="Blue"/></StackPanel></StackPanel>

WrapPanelWrapPanel The The WrapPanelWrapPanel is much like is much like StackPanelStackPanel but if the end of the but if the end of the available space is reachedavailable space is reached Arranges the elements in the next Arranges the elements in the next

row/columnsrow/columns

Depends on the orientation Depends on the orientation propertyproperty

Example:Example:

<WrapPanel><WrapPanel> <TextBlock Text="Text" <TextBlock Text="Text" Background="Yellow"/> Background="Yellow"/> <TextBlock Text="Text" Background="Blue"/><TextBlock Text="Text" Background="Blue"/> <TextBlock Text="Text" <TextBlock Text="Text" Background="Yellow"/>Background="Yellow"/> <TextBlock Text="Text" Background="Blue"/><TextBlock Text="Text" Background="Blue"/></WrapPanel></WrapPanel>

DockPanelDockPanel The The DockPanelDockPanel provides docking of provides docking of

elements to the elements to the leftleft, , rightright, , toptop, , bottombottom of the panel of the panel

Defined by the attached property Defined by the attached property DockDock To dock an element to the center of To dock an element to the center of

the panel, it must be the last child the panel, it must be the last child of the panel of the panel LastChildFillLastChildFill property must be set property must be set

to true.to true.

<DockPanel LastChildFill="True"><DockPanel LastChildFill="True"> <Button Content="Top" DockPanel.Dock="Top"/><Button Content="Top" DockPanel.Dock="Top"/> <Button Content="Bottom" <Button Content="Bottom" DockPanel.Dock="Bottom"/>DockPanel.Dock="Bottom"/> <Button Content="Left"/><Button Content="Left"/> <Button Content="Right" <Button Content="Right" DockPanel.Dock="Right"/>DockPanel.Dock="Right"/> <Button Content="<Button Content="LastChildFill=TrueLastChildFill=True"/>"/></DockPanel> </DockPanel>

Stacking PanelsStacking PanelsLive DemoLive Demo

Proportional PanelsProportional PanelsGrid and UniformGridGrid and UniformGrid

Grid PanelGrid Panel The most powerful layout container in WPFThe most powerful layout container in WPF

Everything can be done with Everything can be done with GridGrid

Sometimes a way harder than using Sometimes a way harder than using StackPanelStackPanel

Arranges the elements in a Arranges the elements in a table-liketable-like layoutlayout PredefinedPredefined number of rows and columns number of rows and columns

Each element has Each element has explicitlyexplicitly set grid set grid row/columnrow/column

Using the attached properties Using the attached properties Grid.RowGrid.Row and and Grid.ColumnGrid.Column

If no columns/rows are defined, works the If no columns/rows are defined, works the like canvaslike canvas

Grid Panel (2)Grid Panel (2) Number of Number of rowsrows is defined by a is defined by a

content property called content property called ""RowDefinitionsRowDefinitions"" Each row can be set a Each row can be set a heightheight

It is the same with It is the same with ""ColumnDefinitionsColumnDefinitions""<Grid.RowDefinitions><Grid.RowDefinitions> <RowDefinition <RowDefinition Height="50"Height="50"/>/> <RowDefinition/><RowDefinition/> <RowDefinition/><RowDefinition/></Grid.RowDefinitions></Grid.RowDefinitions><Grid.ColumnDefinitions><Grid.ColumnDefinitions> <ColumnDefinition/><ColumnDefinition/> <ColumnDefinition <ColumnDefinition Width="50"Width="50"/>/></Grid.ColumnDefinitions></Grid.ColumnDefinitions>

Grid Panel (3)Grid Panel (3) Each of the elements in a Each of the elements in a GridGrid

should have a should have a Grid.Row Grid.Row and/or and/or Grid.Column Grid.Column property setproperty set<Grid><Grid>…… <Button Grid.Row="0" Grid.Column="0" Content="{0, <Button Grid.Row="0" Grid.Column="0" Content="{0, 0}"/>0}"/> <Button Grid.Row="0" Grid.Column="1" Content="{0, <Button Grid.Row="0" Grid.Column="1" Content="{0, 1}"/>1}"/> <Button Grid.Row="1" Grid.Column="0" Content="{1, <Button Grid.Row="1" Grid.Column="0" Content="{1, 0}"/>0}"/> <Button Grid.Row="1" Grid.Column="1" Content="{1, <Button Grid.Row="1" Grid.Column="1" Content="{1, 1}"/>1}"/> <Button Grid.Row="2" Grid.Column="0" Content="{2, <Button Grid.Row="2" Grid.Column="0" Content="{2, 0}"/>0}"/> <Button Grid.Row="2" Grid.Column="1" Content="{2, <Button Grid.Row="2" Grid.Column="1" Content="{2, 1}"/>1}"/></Grid></Grid>

UniformGrid PanelUniformGrid Panel Much like the common Much like the common GridGrid panel panel

Cannot set position explicitlyCannot set position explicitly

Each elements is with the Each elements is with the same sizesame size

Fills the elements depending of the Fills the elements depending of the number of rows/columnsnumber of rows/columns

FlowDirectionFlowDirection property sets the property sets the arrange style of the elementsarrange style of the elements

<UniformGrid Rows="3"><UniformGrid Rows="3"> <Button Content="First"/><Button Content="First"/>

…… <Button Content="Seventh"/><Button Content="Seventh"/></UniformGrid> </UniformGrid>

Proportional PanelsProportional PanelsLive DemoLive Demo

GridSplittersGridSplitters

GridSplitterGridSplitter

Offer the user a way to adjust the Offer the user a way to adjust the layout of your application layout of your application Changing the size of a column or Changing the size of a column or

row in a gridrow in a grid Use Use GridSplitterGridSplitter only to rearrange only to rearrange

a Grid panela Grid panel

25

<Grid Height="100" Width="400"><Grid Height="100" Width="400"> <Grid.ColumnDefinitions>…</Grid.ColumnDefinitions><Grid.ColumnDefinitions>…</Grid.ColumnDefinitions> <Ellipse Grid.Column="0" Fill="Red" /><Ellipse Grid.Column="0" Fill="Red" /> <GridSplitter Grid.Column="1"<GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" />HorizontalAlignment="Stretch" /> <Ellipse Grid.Column="2" Fill="Blue" /><Ellipse Grid.Column="2" Fill="Blue" /></Grid></Grid>

GridSplitterGridSplitterLive DemoLive Demo

SizingSizing

SizingSizing There are a number of properties There are a number of properties

to set the size of a panel or the to set the size of a panel or the elements in itelements in it WidthWidth, , HeightHeight, , MaxWidthMaxWidth, , MaxHeightMaxHeight, , MinWidthMinWidth, , MinHeightMinHeight

PaddingPadding and and MarginMargin<StackPanel><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></StackPanel>

SizingSizingLive DemoLive Demo

Border ContainerBorder Container

Border ContainerBorder Container The Border container is a special The Border container is a special

kind of containerkind of container It can hold only one child elementIt can hold only one child element

The child element becomes The child element becomes surrounded by a bordersurrounded by a border

The Border properties for border The Border properties for border stylestyle BorderBrushBorderBrush

BorderThicknessBorderThickness

CornerRadiusCornerRadius

Border ExampleBorder Example Lets make a window with no Lets make a window with no

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

Lets have no Lets have no Windows Windows BorderBorder

Border ContainerBorder ContainerLive DemoLive Demo

TabControlTabControl

TabContolTabContol TabControlTabControl is useful for switching is useful for switching

between multiple pages of contentbetween multiple pages of content Tabs in a Tabs in a TabControlTabControl are typically are typically

placed on the topplaced on the top

TabStripPlacementTabStripPlacement property can property can set their placement to set their placement to LeftLeft, , RightRight, , or or BottomBottom

35

<TabControl><TabControl> <TabItem Header="Tab 1">Content for Tab1.</TabItem><TabItem Header="Tab 1">Content for Tab1.</TabItem> <TabItem Header="Tab 2">Content for Tab2.</TabItem><TabItem Header="Tab 2">Content for Tab2.</TabItem> <TabItem Header="Tab 3">Content for Tab3.</TabItem><TabItem Header="Tab 3">Content for Tab3.</TabItem></TabControl></TabControl>

TabControlTabControlLive DemoLive Demo

QuestionsQuestions??

XAML Layout XAML Layout ContainersContainers

ExercisesExercises1.1. Create the following:Create the following:

*Note*Note: Don't use : Don't use GridGrid for everything for everything

2.2. Create the following:Create the following:

*Note*Note: Don't use : Don't use GridGrid for everything for everything

Exercises (2)Exercises (2)

3.3. Using Tabs create the previous XAMLs Using Tabs create the previous XAMLs in tab controlsin tab controls

4.4. Add Add GridSplitterGridSplitter whenever you used whenever you used Grid as a panelGrid as a panel

Exercises (3)Exercises (3)