WPF：面板

1、Canvas

支持用显式坐标定位元素，可以用Left，Right，Top，Bottom来定位子元素

元素不能同时设置2个以上的Canvas属性

在子元素中定位边角：Canvas.Left="10"

默认为left=0，top=0，即靠左上角

 

2、StackPanel

会顺序对它的子元素进行排列

Orientation：排列顺序（横竖）：Horizontal/Vertical(默认)

FlowDirection：元素顺序：RightToLeft/LeftToRight

Margin：控制元素与StackPanel，元素和元素之间的距离

HorizontalAlignment：

VerticalAlignment：

LayoutTransform：旋转后拉拉升元素原空间

 

3、WrapPanel

当没有足够的空间来存放子元素时，会把子元素封装在行和列中。

Orientation：排列顺序（横竖）：Horizontal(默认)/Vertical

ItemHeight：所有子元素一致的高度，每个子元素填充的高度取决于自身，子元素高度比ItemHeight高的，都将被拦截，宽度同

ItemWidth：所有子元素一致的宽度

部分属性同StackPanel

 

4、DockPanel

支持让元素简单地停靠在整个面板的某一条边上，然后拉伸元素以填满全部宽度或者高度

支持让一个元素填充其他已停靠元素没有占用的剩余空间

Dock：Left（默认），Right，Top，Bottom（控制子元素的停靠）

LastChildFill：false/true（默认）（最后一个子元素填充所有剩余空间）

 

5、Grid

在一个多行、多列的表中排列子元素，提供多种特性来有效地控制行和列

例：

 1         <Grid>
 2             <Grid.RowDefinitions>
 3                 <RowDefinition/>
 4                 <RowDefinition/>
 5                 <RowDefinition/>
 6 <span style="font-size:16px; "></span><div class="dp-highlighter bg_html"><div class="bar"><div class="tools"><b>[html]</b> <a href="#" class="ViewSource" title="view plain" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view plain</a><a href="#" class="CopyToClipboard" title="copy" onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy</a><a href="#" class="PrintSource" title="print" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a href="#" class="About" title="?" onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a><div style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; z-index: 99;"><embed id="ZeroClipboardMovie_2" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="0" height="0" name="ZeroClipboardMovie_2" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=2&width=0&height=0" wmode="transparent"></div></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag"><</span><span class="tag-name">RowDefinition</span><span class="tag">/></span><span>&nbsp;&nbsp;</span></span></li></ol></div><pre name="code" class="html" style="display: none;">                <RowDefinition/></pre> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Label Grid.Row="0" Grid.Column="0" Background="Blue" Foreground="White" HorizontalContentAlignment="Center">
 7  Start Page </Label> <GroupBox Grid.Row="1" Grid.Column="0" Background="GreenYellow" Header="Recent Projects">No.1</GroupBox> <GroupBox Grid.Row="2" Grid.Column="0" Background="GreenYellow" Header="Recent Projects">No.2</GroupBox> <GroupBox Grid.Row="3" Grid.Column="0"
 8  Background="GreenYellow" Header="Recent Projects">No.3</GroupBox> <GroupBox Grid.Row="1" Grid.Column="1" Background="Aquamarine" Header="Online Articles"> <ListBox> <ListBoxItem>One</ListBoxItem> <ListBoxItem>two</ListBoxItem> <ListBoxItem>three</ListBoxItem>
 9  <ListBoxItem>four</ListBoxItem> </ListBox> </GroupBox> </Grid><p></p>
10 <pre></pre>
11 <p></p>
12 <p><span style="font-size:16px"><img src="http://hi.csdn.net/attachment/201202/24/0_1330065308e7N7.gif" alt=""><br>
13 </span></p>
14 <p><span style="font-size:16px"><br>
15 </span></p>
16 <p><span style="font-size:16px">使用Grid，首先要定义行和列：</span></p>
17 <p><span style="font-size:16px"><Grid.RowDefinitions><br>
18 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <RowDefinition/> &nbsp; &nbsp;// 行<br>
19 </Grid.RowDefinitions><br>
20 </span></p>
21 <p><span style="font-size:16px"><Grid.ColumnDefinitions><br>
22 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ColumnDefinition/> &nbsp; &nbsp;// 列<br>
23 &nbsp;</Grid.ColumnDefinitions><br>
24 </span></p>
25 <p><span style="font-size:16px">然后使用Grid.Row和Grid.Column定位子元素</span></p>
26 <p><span style="font-size:16px">RowSpan/ColumnSpan：合并行、列，默认为1</span></p>
27 <p><span style="font-size:16px">改变行和列的尺寸：绝对尺寸（Absolute sizing）、自动尺寸（Autosizing）、比例尺寸（Proportional sizing）</span></p>
28 <p><span style="font-size:16px">GridSplitter：交互改变尺寸，必须有一个显示的Width或者Height</span></p>
29 <p><span style="font-size:16px">SharedSizeGroup：共享属性 &nbsp;先设置IsSharedSizeScope属性<Grid IsSharedSizeScope="true">，然后在定义行列数时加上SharedSizeGroup="MyGroupNmae"，需要共享属性的则都加上此属性</span></p>

 

posted @ 2013-08-02 10:39  wilderhorse  阅读(162)  评论(0)    收藏  举报