WPF UI布局(Layout)

WPF是专门用户界面技术,布局是核心功能之一。

每个布局元素都有自己的特点,要灵活使用。

WPF中布局元素有如下:

Grid:网格

可以自行定义行和列并通过行列的数量、行高和列宽来调整布局。类似Table。

Grid具有ColumnDefinitions和RowDefinitions属性,它们分别是ColumnDefinition和RowDefinition的集合,

表示Grid定义了多少行多少列。

StackPanel:栈式面板

可以将包含的元素在垂直或水平方向上排成一条直线,移除前一个元素后面一个元素会自动向前填充。

StackPanel使用3个属性来控制内部元素的布局,分别为:

Orientation(绝对内部元素横向还是纵向累积)

HorizontalAlignment(水平方向对齐方式)

VerticalAlignment(竖直方向对齐方式)

例:使用StackPanel布局的选项表

 <Grid>
        <GroupBox Header="请选择没有错别字的成语" BorderBrush="Black" Margin="5">
            <StackPanel Margin="5">
                <CheckBox Content="A.迫不及待"/>
                <CheckBox Content="A.唉声叹气"/>
                <CheckBox Content="A.不可理喻"/>
                <CheckBox Content="A.婆子敏捷"/>
                <CheckBox Content="A.迫不及待"/>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button Content="清空" Width="60" Margin="5"/>
                    <Button Content="确认" Width="60" Margin="5"/>
                </StackPanel>
            </StackPanel>
        </GroupBox> 
 </Grid>

效果:

WPF UI布局(Layout)

Canvas 画布

内部元素可以以像素为单位的绝对坐标进行定位,类似于winFrom

下面例子用Canvas代替Grid设计登录界面:(窗口布局不改变,尺寸固定。不然Grid布局弹性比较好

 <Canvas>
        <TextBlock Text="用户名:" Canvas.Left="12" Canvas.Top="12"/>
        <TextBox Width="200" Canvas.Left="66" Height="23" Canvas.Top="9" BorderBrush="Black"/>
        <TextBlock Text="密码:" Canvas.Left="12" Canvas.Top="40.72" Height="16" Width="36"/>
        <TextBox Width="200" Canvas.Left="66" Height="23" Canvas.Top="38" BorderBrush="Black"/>
        <Button Content="确定" Width="80" Height="22" Canvas.Left="100" Canvas.Top="67"/>
        <Button Content="清除" Width="80" Height="22" Canvas.Left="186" Canvas.Top="67"/>
    </Canvas>

效果:

WPF UI布局(Layout)

DockPanel 泊考式面板

DockPanel 内的元素会被附加上Dock属性,数据类型为Dock枚举。

Dock枚举可取Lift、Top、Right、Bottom。

DockPanel有一个重要属性bool类型的LastChildFill,默认为True。

LastChildFill为True,最后一个元素的Dock属性会被忽略。这个元素会把所有剩余空间充满。

<Grid>
        <DockPanel>
            <TextBox DockPanel.Dock="Top" Height="25" BorderBrush="Black"/>
            <TextBox DockPanel.Dock="Left" Width="120" BorderBrush="Black"/>
            <TextBox BorderBrush="Black"/>
        </DockPanel>
 </Grid>

WrapPanel 自动折行面板

内部元素排满后自动折行,类似于流式布局。

WranpPanel使用Orientation属性控制流延伸方向。

使用VerticalAlignment和HorizontalAlignment控制内部对齐方式

 

PS:平时使用最多的还是Grid和StackPanel。

 

WPF UI布局(Layout)

上一篇:hbck2的一些用法


下一篇:实现无边框窗体的拖动及窗体大小变化