WPF－布局

 

WPF 中的布局

• 布局工序
• 设置元素请求的尺寸
• 对齐
• 衬料和白边
• 面板
• 堆叠面板
• 换行面板
• 停靠面板
• 网格
• 画布
• 统一网格
• 一个对象的尺寸
• 总结

 

名称	说明
Grid	网格，根据自定义行和列来设置控件的布局
StackPanel	栈式面板，包含的元素在竖直或水平方向排成一条直线
WrapPanel	自动折行面板，包含的元素在排满一行后，自动换行
DockPanel	泊靠式面板，内部的元素可以选择泊靠方向
UniformGrid	网格,UniformGrid就是Grid的简化版，每个单元格的大小相同。
Canvas	画布，内部元素根据像素为单位绝对坐标进行定位
Border	装饰的控件，此控件用于绘制边框及背景，在Border中只能有一个子控件

StackPanel

StackPanel可以把内部的元素在纵向或者横向的排列。

<StackPanel>
<Button MinWidth="100" MaxWidth="200">这是一个按钮</Button>
<Image Width="200" Source="Image01.jpg"></Image
<Button>这是一个按钮</Button>
</StackPanel>

水平排列

<Window.Resources>
         <Style TargetType="{x:Type Button}">
             <Setter Property="Width" Value="100" ></Setter>
         </Style>
     </Window.Resources>
     <Grid >
         <StackPanel Orientation="Horizontal">
             <Button>zhangsan</Button>
             <Button>zhangsan</Button>
             <Button>zhangsan</Button>
             <Button>zhangsan</Button>
         </StackPanel>
     </Grid>

 

垂直排列

<Grid >
         <StackPanel>
             <Button>zhangsan</Button>
             <Button>zhangsan</Button>
             <Button>zhangsan</Button>
             <Button>zhangsan</Button>
         </StackPanel>
</Grid>

水平靠右

     <Window.Resources>
         <Style TargetType="{x:Type Button}">
             <Setter Property="Height" Value="100" ></Setter>
         </Style>
     </Window.Resources>
     <Grid >
         <StackPanel HorizontalAlignment="Right">
             <Button>zhangsan</Button>
             <Button>zhangsan</Button>
             <Button>zhangsan</Button>
             <Button>zhangsan</Button>
         </StackPanel>
     </Grid>

垂直靠下

<Grid >
         <StackPanel VerticalAlignment="Bottom">
             <Button>zhangsan</Button>
             <Button>zhangsan</Button>
             <Button>zhangsan</Button>
             <Button>zhangsan</Button>
         </StackPanel>
     </Grid>

 内容对齐

HorizontalContentAlignment 或VerticalContentAlignment 属性

 

可见/隐藏

在第一个例子中，两个按钮都是可见的。其标记不包含Visibility 属性是因为Visibility属性就是默认值。
在第二例子中，其属性被设置为Hidden。按钮是不可见的，但是你可以看见他占据的空间。
在第三例中，属性被设置为Collapsed。在这个例子中，不仅是按钮不可见，而且没有任何它存在过的视觉证据。

<StackPanel>
<Button>Button 1</Button>
<Button>Button 2</Button>
</StackPanel>
<StackPanel>
<Button Visibility="Hidden">Button 1</Button>
<Button>Button 2</Button>
</StackPanel>
<StackPanel>
<Button Visibility="Collapsed>Button 1</Button>
<Buttan>Button 2</Button>
/StackPanel>