StackPanel
- Arranges controls in a line, either horizontally or vertically.
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vGhr1sWhmzz2qUs-EAt5M_PVvhbZ4tSCKL09UGTeli0CL4rmwP-IY8jR9MWa1kWV0kkntQVPs3hct77VFc-YHf2tLsVc5Jh8dTfJi0QW7-81OQUGBDBmPAB2Hr=s0-d)
<StackPanel Orientation="Vertical"> -->
<Label Background="Red">Red 1</Label>
<Label Background="LightGreen">Green 1</Label>
<StackPanel Orientation="Horizontal">
<Label Background="Red">Red 2</Label>
<Label Background="LightGreen">Green 2</Label>
<Label Background="LightBlue">Blue 2</Label>
<Label Background="Yellow">Yellow 2</Label>
<Label Background="Orange">Orange 2</Label>
</StackPanel>
<Label Background="LightBlue">Blue 1</Label>
<Label Background="Yellow">Yellow 1</Label>
<Label Background="Orange">Orange 1</Label>
</StackPanel>
Note:
- Items are stretched to fit their contents (text) and to fit the window.
- By default, items will not fill all the available space (whitespace in screenshot).
- Layouts can be nested within one another.
WrapPanel
- Arranges items in a line until the border is hit, then wraps to the next line.
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sjJMtBH8k_ClX5BKn9h0XLlBMji_0RIR9RWM8V-WHzBzSCi0SoZRLb3RlsGJ3plcrEHBB0-4bWZ8w17ihwvT39RCpUal8PFvhKhrpGie0AP7pxcIemv0nS5g=s0-d)
Vertical orientation
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_v6hOrM55m0_RIWhjf3-iAUBuPvMlWQL63g0rJCaMwksn5aKaZ5AWPnue8U1mqyruIGp9rPYd_x3tdKbkLCNStONCuSgcZz4SweF_x4FcTmt9eW_wSwmm0tz4o=s0-d)
Horizontal orientation
<WrapPanel Orientation="Vertical">
<Label Height="125" Background="Red">Red 1</Label>
<Label Height="100" Background="LightGreen">Green 1</Label>
<Label Height="125" Background="LightBlue">Blue 1</Label>
<Label Height="50" Background="Yellow">Yellow 1</Label>
<Label Height="150" Background="Orange">Orange 1</Label>
<Label Height="100" Background="Red">Red 2</Label>
<Label Height="150" Background="LightGreen">Green 2</Label>
<Label Height="75" Background="LightBlue">Blue 2</Label>
<Label Height="50" Background="Yellow">Yellow 2</Label>
<Label Height="175" Background="Orange">Orange 2</Label>
</WrapPanel>
<WrapPanel Orientation="Horizontal"> -->
<Label Width="125" Background="Red">Red 1</Label>
<Label Width="100" Background="LightGreen">Green 1</Label>
<Label Width="125" Background="LightBlue">Blue 1</Label>
<Label Width="50" Background="Yellow">Yellow 1</Label>
<Label Width="150" Background="Orange">Orange 1</Label>
<Label Width="100" Background="Red">Red 2</Label>
<Label Width="150" Background="LightGreen">Green 2</Label>
<Label Width="75" Background="LightBlue">Blue 2</Label>
<Label Width="50" Background="Yellow">Yellow 2</Label>
<Label Width="175" Background="Orange">Orange 2</Label>
</WrapPanel>
Note:
- Items are stretched to fit their contents (text).
- If an item cannot fit entirely in the allotted space, the entire control is moved to the next line.
DockPanel
- Places controls in five different regions: top, bottom, left, right, or center (fill).
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sJpZjspPwvP7zmrTiDG57fZQMtJJqjhyM3WXGUmYXG900urwnMG6ALcmBMFQ22NMLqmt3VVn59sTNZx_xVlQJsBD7U1GhRLbUyJ5Q2Iz8mEXif35uOpJdvclI=s0-d)
<DockPanel>
<Label DockPanel.Dock="Top" Height="100" Background="Red">Red 1</Label>
<Label DockPanel.Dock="Left" Background="LightGreen">Green 1</Label>
<Label DockPanel.Dock="Right" Background="LightBlue">Blue 1</Label>
<Label DockPanel.Dock="Bottom" Background="LightBlue">Blue 2</Label>
<Label DockPanel.Dock="Bottom" Height="50" Background="Yellow">Yellow 1</Label>
<Label Width="100" Background="Orange">
Orange 1</Label> -->
<Label Background="LightGreen">Green 2</Label>
</DockPanel>
Note:
- Child elements tell the parent
DockPanel
where they should be placed (DockPanel.Dock="Top"
).
- You can place more than one control in a region (Yellow 1 and Blue 2).
- If you do not specify a region, then the item will be set to fill (default behavior).
- Items are stretched to fit their contents (text) and to fit the region they are in.
- The size of any non-fill region is dictated by its contents (Red 1 has a height specified so it is larger).
Canvas
- Explicitly position controls based on coordinates.
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tIwFCs1Y08Tcxz5GgUEJWEZVK__Jtse15Y8nvBOPmJyus1GrZ32t6k9VaJi0NJF3mH97gibx9YPrMzNZSHatCOJ7hKxPQ-FEa40i14ivVscywRZykc09uj1woATA=s0-d)
<Canvas>
-->
<Label Background="Red">Red 1</Label>
<Label Canvas.Right="50" Background="LightGreen" >Green 1</Label>
<Label Canvas.Top="100" Canvas.Left="100" Background="LightBlue" >Blue 1</Label>
<Label Canvas.Bottom="166" Canvas.Right="237" Background="LightBlue" >
Blue 2</Label>
<Label Canvas.Right="300" Canvas.Top="250" Background="Yellow" >Yellow 1</Label>
<Label Canvas.Right="50" Canvas.Bottom="50" Background="Orange" >Orange 1</Label>
</Canvas>
Note:
- Child elements tell the parent
Canvas
where they should be placed (Canvas.Right="50"
).
- When no dimensions are specified, the labels are stretched to fit their contents (text).
- Controls can be placed relative to any side of the window (Blue 1 vs. Blue 2).
Top
overrides Bottom
and Left
overrides Right
.
UniformGrid
- Maintains a series of grid cells of equal size.
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tYnc55RkX2ihzmZcKcojgRbbn0SZDBM174OsPrkq57KAkQk13dqVbaahyFfx9Y9xWB60QkzNQ33I9uOWf3rcwl47NqjjuzP7A8_LNfZ-yccW17jCKaod-pNmks-LE=s0-d)
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uyfW8TVGaeVCiZEckPOcQDGrJthH2C3ER2TRtV8HjczS7tYvYsLLUHBfZxxMd7iawlFxdmCzKS09JLFj32uQjaP9BNyhCCH4irDG8lpgg7O8OmMNwB2YywTeYHiA=s0-d)
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uSdfrjE88FvgHNYv59-6J-JOl4K1WcxHGE3R0JTCXmOuJIlgm2UtfMxfEmEAT8SeKMHf8k8NXJmlw8a_vAE_zOR9gn8uYJ1Kkrh7e0ZhRBfrxaY2z5Zr7hUXMK69o=s0-d)
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vv5btu69ysp3QAHe21sbnvqGtSo2ntZ0VQAtglvSHfdeDbb3JsPkfRPhYhGLunHVnsqBVqxQOrAFW6-hJW6gvlREnwdm2dNOYuA3R4Aml_t9g_MvHKagaUeVIB8Jw=s0-d)
<UniformGrid>
<Label Background="Red">Red 1</Label>
<Label Background="LightGreen">Green 1</Label>
<Label Background="LightBlue">Blue 1</Label>
<Label Background="Yellow">Yellow 1</Label>
<Label Background="Orange">Orange 1</Label>
<Label Background="Red">Red 2</Label>
<Label Background="LightGreen">Green 2</Label>
<Label Background="Yellow">Yellow 2</Label>
<Label Background="Orange">Orange 2</Label>
</UniformGrid>
Note:
- Items are stretched to fit the cell.
- The total number of cells increases by square integers.
# items |
# cells |
square of |
1 |
1 |
1 |
2-4 |
4 |
2 |
5-9 |
9 |
3 |
10-16 |
16 |
4 |
17-25 |
25 |
5 |
... |
... |
... |
Grid
- Defines static columns and rows; like HTML tables.
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_sO0sD2kcyaw-FnRc8Xo1ci-QvVJEtxWIcUOF5VDEaeUXQOz96NgRv7JGjG_H-RmyX0PqnGWZlprt3dV83MwHK4cnhE-jJkNYsxHN70VJOvZNnBIlJNJ1QGE5Y=s0-d)
![](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_t6vCnve0DeIqCOLGXOU-gQc_7_NeHVCzRhyCqQouZGJpLNdcKW8WFtqw06z4o0idhM5bidmUcGk1pcxdxoHjCLMv33ecrM4Dmi8b1nge1jTtAmyzivYhVRiY8=s0-d)
<!---->
<Grid>
<!---->
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0" Background="Red">Red 1</Label>
<Label Grid.Column="1" Grid.Row="0" Background="LightGreen">Green 1</Label>
<Label Grid.Column="0" Grid.Row="1" Background="LightBlue">Blue 1</Label>
<Label Grid.Column="1" Grid.Row="1" Background="Yellow">Yellow 1</Label>
<Label Grid.Column="0" Grid.Row="2" Background="Orange">Orange 1</Label>
</Grid>
<!---->
<Label Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2"
Background="Red">Red 1</Label>
<Label Grid.Column="0" Grid.Row="1" Grid.RowSpan="3"
Background="LightGreen">Green 1</Label>
Note:
- Child elements tell the parent grid what cell they should be in.
- Items are stretched to fill the cell.
- Each row or column can be given a specific size (
Height
/Width
).
- Cell contents can be told to span multiple rows (
RowSpan
) or columns (ColumnSpan
).
- Source : Code Project
No comments:
Post a Comment