WPF主要的6个布局分别是什么

本文介绍了WPF中的6种主要布局:StackPanel(栈式面板)、WrapPanel(环绕面板)、DockPanel(停靠面板)、Canvas(画布)、Grid(网格面板)和UniformGrid(均布网格),详细阐述了每种布局的特点及应用场景,包括XAML代码示例和运行效果。

WPF主要的6个布局分别是什么


开发工具与关键技术:PLSQL Developer + DML
作者:琉敏
撰写时间:2019年5月1日


什么是WPF?

WPF(Windows Presentation Foundation)是微软推出的基于Windows 的用户界面框架,属于.NET Framework 3.0的一部分。它提供了统一的编程模型、语言和框架,真正做到了分离界面设计人员与开发人员的工作;同时它提供了全新的多媒体交互用户图形界面。

WPF的6个布局分别是哪6个?

WPF中主要的6个布局分别是: StackPanel(栈式面板)、WrapPanel(环绕面板)。DockPanel(停靠面板)、Canvas(画布)、Grid(网格面板)和UniformGrid(均布网格)。
1、 StackPanel:栈式面板
栈式面板的特点是:每一个元素都是占满一行或一列,占满一行或一列主要是由属性(Orientation)决定的,当属性(Orientation)是Vertical时,它是垂直占满一行的(图a);当属性(Orientation)是Horizontal时,它是水平占满一列的(图b)。
(1)使用XAML代码实现:

<Window x:Class="Wpf.MainWindow"
		xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
		xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        
		Title="StackPanel面板" Height="220" Width="400" WindowStartupLocation="CenterScreen">    
	//<!--stackpanel面板:栈式面板-->        
	<StackPanel x:Name="stackpanel" Orientation="Vertical">
		<Button Content="第一个栈式面板"></Button>
		<Button Content="第二个栈式面板"></Button>
		<Button Content="第三个栈式面板"></Button>
	</StackPanel>
</Window>

(2)垂直方向排列界面运行效果:
在这里插入图片描述
2、 WrapPanel:环绕面板
环绕面板的特点是:将各个控件从左至右按照行或列的顺序罗列,当剩余空间不够时会自动换行或换列。主要是由属性(Orientation)决定的,当属性(Orientation)是Vertical时,它是垂直方向从左到右排列的(图c);当属性(Orientation)是Horizontal时,它是水平方向从左到右排列的(图d)。
(1) 使用XAML代码实现:

<Window x:Class="Wpf.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        
        Title="WrapPanel面板" Height="220" Width="430" WindowStartupLocation="CenterScreen">
        //<!--wrappanel:环绕面板-->
    <WrapPanel x:Name="WrapPanel" Orientation="Vertical">
            <Button Width="100">按钮1</Button>
            <Button Width="100">按钮2</Button>
            <Button Width="100">按钮3</Button>
            <Button Width="100">按钮4</Button>
            <Button Width="100">按钮5</Button>
            <Button Width="100">按钮6</Button>
            <Button Width="100">按钮7</Button>
            <Button Width="100">按钮8</Button>
            <Button Width="100">按钮9</Button>
            <Button Width="100">按钮10</Button>
    </WrapPanel>
</Window>

(2) 垂直方向排列界面运行效果:
在这里插入图片描述
3、 DockPanel:停靠面板
DockPanel定义一个区域,在此区域中,可以使子元素通过描点的形式排列,这些对象位于 Children 属性中。停靠面板类似于WinForm中控件的Dock属性。停靠面板会对每个子元素进行排序,并将根据指定的边进行停靠,多个停靠在同侧的元素则按顺序排序。在DockPanel中,指定停靠边的控件,会根据定义的顺序占领边角,所有控件绝不会交叠。默认情况下,最后一个子元素不管是设置了什么停靠值,都会填满剩余的空间;如果不希望最后一个元素填充剩余区域,可以将DockPanel属性LastChildFill设置为false,还必须为最后一个子元素显式指定停靠方向。
(1)使用XAML代码实现:

<Window x:Class="Wpf.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        
        Title="DockPanel面板" Height="220" Width="430" WindowStartupLocation="CenterScreen">
        //<!--dockpanel:停靠面板-->
    <DockPanel LastChildFill="False">
        <Button DockPanel.Dock="Top" Content="ButtonTop"></Button>
        <Button DockPanel.Dock="Bottom" Content="BottonBottom"></Button>
        <Button DockPanel.Dock="Left" Content="BottonLeft"></Button>
        <Button DockPanel.Dock="Right" Content="BottonRight"></Button>
        <Button DockPanel.Dock="Top" Content="最后一个bottom不填充剩空间"></Button>
    </DockPanel>
</Window>

(2)界面运行效果:
在这里插入图片描述
4、Canvas:画布面板
画布面板,用于完全控制每个元素的精确位置,是布局控件中最为简单的一种,直接将元素放到指定位置,主要来布置图面。使用Canvas,要指定一个子元素的位置(用Left、Right、Top和Bottom相对于画布调整位置),否则所有元素都会出现在画布的左上角。Canvas面板不会对超出的部分不会进行裁剪(图1),如果要裁剪超出部分(图2),将ClipToBounds属性设为true即可。
(1)使用XAML代码实现:

<Window x:Class="Wpf.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        
        Title="Canvas面板" Height="220" Width="450" WindowStartupLocation="CenterScreen">    
    //<!--canvas:画布面板-->
    <Canvas ClipToBounds="True">
        <TextBox Canvas.Left="20" Canvas.Top="10" Width="180" BorderBrush="Black"></TextBox>
        <TextBox Canvas.Left="300" Canvas.Top="60" Width="120" BorderBrush="Red"></TextBox>
        <Button Height="80" Canvas.Right="70" Canvas.Bottom="-25" Content="按钮1"></Button>
        <Button Height="20" Canvas.Right="20" Canvas.Bottom="50" Content="按钮2"></Button>
    </Canvas>
</Window>

(2)界面运行效果:
在这里插入图片描述
5、Grid:网格面板
Grid面板是以表格形式布局元素,和其他各个Panel比较起来,功能最多也最为复杂。如果要使用Grid面板,就先要向属性RowDefinitions和属性ColumnDefinitions添加一定数量的RowDefinition和ColumnDefinition元素来定义行数和列数。Grid面板可以往定义好的单元格中添加Botton等其他控件内容。在往Grid中添加内容时要设置其放置的位置,否则就会叠加起来。设置其列宽和行高,分别可以在ColumnDefinition、RowDefinition里面指定Width、Height的值。
注意:尽管Grid面板被设计成不可见的,但可将Grid.ShowGridLines属性设置为True,从而更清晰的观察Grid面板,方便调试,可以更准确地控制Grid面板如何选择列宽和行高。
(1)使用XAML代码实现:

<Window x:Class="Wpf.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        
        Title="Grid网格面板" Height="250" Width="480" WindowStartupLocation="CenterScreen">
    <Grid ShowGridLines="True">
        //<!--定义行,3行-->
        <Grid.RowDefinitions>
            //<!--自动行高-->
            <RowDefinition Height="Auto"></RowDefinition>
            //<!--按比例行高-->
            <RowDefinition Height="*"></RowDefinition>
            //<!--固定行高-->
            <RowDefinition Height="60"></RowDefinition>
        </Grid.RowDefinitions>
        //<!--定义列,2行-->
        <Grid.ColumnDefinitions>
            //<!--按比例列宽-->
            <ColumnDefinition Width="*"></ColumnDefinition>
            //<!--固定列宽-->
            <ColumnDefinition Width="220"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        //<!--指定元素并指定单元格-->
        <TextBlock Grid.Row="0" Grid.Column="1">第一行第一列</TextBlock>
        <TextBlock Grid.Row="1" Grid.Column="1">第二行第一列</TextBlock>
        <TextBlock Grid.Row="2" Grid.Column="1">第三行第一列</TextBlock>
        <Button Grid.Row="0" Grid.Column="0">第一行第二列</Button>
        <Button Grid.Row="1" Grid.Column="0">第二行第二列</Button>
        <Button Grid.Row="2" Grid.Column="0">第三行第二列</Button>
    </Grid>
</Window>

(2)界面运行效果:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值