wpf layout containers
TRANSCRIPT
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)