Windows Presentation Foundation [WPF] - Layouts
Layout Provides Basic plan for container to arrange the controls placed inside the Container. WPF Provides 5 Built-in Layout Panels. These Layout Panels can be used design the User Interfaces for our Application.
Layout Manager
Layout Provides Basic plan for container to arrange the controls placed inside the Container. WPF Provides 5 Built-in Layout Panel. These Layout Panels can be used design the User Interfaces for our Application.
Layout Panels are
1. StackPanel
2. WrapPanel
3. DockPanel
4. GridPanel
5. CanvasPanel1. StackPanel
A. Arranges the Child Elements in a line either horizontally or Vertically.
B. Two Orientation Vertical [Default]and Horizontal.
C. Listbox and Combobox Controls Stack Panel as its Internal Layout Panel.
<StackPanel>
<Label HorizontalAlignment="Left"> StackPanel Demo</Label>
<Button HorizontalAlignment="Center">
Bread</Button>
<Button Margin="5" MaxWidth="200" Height="96" Width="200">Butter</Button>
<Button Margin="5" MaxWidth="400" HorizontalAlignment="Right" Height="171" Width="144">Jam</Button>
</StackPanel>2.WrapPanel
A. Arranges Elements in a line until the border is hit, then wraps to the next line. [Similar to Word wrap feature in MSWord].
B. Two Orientation – Horizontal [Default] and Vertical
C.Used To Arrange
(i) Tabs in tab control.
(ii) Menu items in a toolbar.
(iii)Arrange items with same line.
<WrapPanel>
<Label HorizontalAlignment="Left"> StackPanel Demo</Label>
<Button HorizontalAlignment="Center">Bread</Button>
<Button Margin="5" MaxWidth="200" Height="96" Width="200">Butter</Button>
<Button Margin="5" MaxWidth="400" HorizontalAlignment="Right" Height="171" Width="144">Jam</Button>
</WrapPanel>3. Dock Panel
A. Places controls in five different regions: top, bottom, left, right, or center (fill).
B.Dock Property is used to place the Element in specific region.
C. To place the element in the central region - LastChildFill property must be set to true.
D. More than one Control can be placed in each region.
<DockPanel>
<Button DockPanel.Dock="Top" Height="100" Background="Red">Red</Button>
<Button DockPanel.Dock="Left" Background="LightGreen">Green</Button>
<Button DockPanel.Dock="Right" Background="LightBlue">Blue</Button>
<Button DockPanel.Dock="Bottom" Background="LightBlue">Blue </Button>
<Button DockPanel.Dock="Bottom" Height="50" Background="Yellow">Yellow 1</Button>
<Button Width="100" Background="Orange">
Orange </ButtonLabel>
<!-- default is to fill -->
<Button Background="LightGreen">Green </Button>
</DockPanel>4. Grid Panel
A. Arranges child elements in Tabular format with rows and columns.
B. A Cell can contain multiple controls or A Control can span over a multiple cells.
C. Default – One Row and One Column.
RowDefinitions – To add new rows
ColumnDefinitions – To Add New Columns
D. Size can be set using
Fixed - Row or Column size will be fixed
Auto - Size will be set according to the container resizing
Star(*) - Size will be set in terms of percentage(%)
E. Control can be placed in more than One Cell by using
RowSpan Property
ColumnSpan Property
Example:
<Grid Height="286" Width="389">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="28"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="Name"></Label>
<TextBox Grid.Row="0" Grid.Column="1" Text="Name"></TextBox>
<Label Grid.Row="1" Grid.Column="0" Content="Age"></Label>
<TextBox Grid.Row="1" Grid.Column="1" Text="Age"></TextBox>
<Label Grid.Row="2" Content="City" Margin="0,0,0,87"></Label>
<ComboBox Grid.Row="2" Grid.Column="1" Margin="0,0,-6,0">
<ComboBoxItem Content="Bangalore"/>
<ComboBoxItem Content="Delhi"/>
<ComboBoxItem Content="Mumbai"/>
<ComboBoxItem Content="Kolkata"/>
<ComboBoxItem Content="Chennai"/>
</ComboBox>
</Grid>5. Canvas Layout
A.Basic Layout Panel.
B.Child elements are positioned using explicit coordinates.
C.Coordinates are specified using
Canvas.Left
Canvas.Top
Canvas.Bottom
Canvas.Right
D.It is used to group 2D graphic elements.
Note: Not to layout user interface elements
<Canvas Margin="0,0,12,12">
<Rectangle Canvas.Left="40" Canvas.Top="31" Width="63" Height="41" Fill="Blue"/>
<Ellipse Canvas.Left="154" Canvas.Top="23" Width="58" Height="58" Fill="Blue"/>
</Canvas>