WPF-布局

作者: 写前端的大叔 | 来源:发表于2020-03-17 10:47 被阅读0次

对于软件界面的开发，不论是桌面应用，手机APP、WEB，学会布局是最基础的，学好了相关平台的布局，对于界面的开发很有帮助，能够快速的开发出漂亮的界面，在WPF中，有6种常用的布局方式，分别为Canvas，DockPanel，Grid，StackPanel，VirtualizingStackPanel，WrapPanel。下面就来看下这几中布局是怎么用的，以及使用场景。

常用布局

Canvas：子控件提供其自己的相对布局。

DockPanel：子控件与面板的边缘对齐。

Grid：子控件由行和列组成。

StackPanel：子控件水平或垂直堆叠。

VirtualizingStackPanel：子控件在水平或者垂直的行上虚拟化并排列。

WrapPanel：子控件按从左到右的顺序定位，在当前行上的控件超出其范围时，自动换行。

1.Canvas

Canvas布局是定义一个区域，可在其中使用相对于Canvas区域的坐标以显式方式来定位子元素。相当是html中的absolute布局。可以通过Left，Right，Top，Bottom等属性来设置视图相对于父Canvas的位置，如果没有设置相关属性，默认是从左上角开发。即Left和Top都为0，下图为在Canvas的每个角添加了一个子Canvas。

Canvas.png

<Window x:Class="WpfAppDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfAppDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Canvas>
        <Canvas Background="Red" Width="100" Height="100"></Canvas>
        <Canvas Background="Gray" Width="100" Height="100" Canvas.Right="0" Canvas.Top="0"></Canvas>
        <Canvas Background="Blue" Width="100" Height="100" Canvas.Bottom="0"></Canvas>
        <Canvas Background="Green" Width="100" Height="100" Canvas.Right="0" Canvas.Bottom="0"></Canvas>
    </Canvas>
</Window>

2.DockPanel

DockPanel可以定义一个区域，从中可以按相对位置水平或垂直排列各个子元素。子元素的位置由各自子元素的 Dock属性和该DockPanel下子元素的相对顺序确定。如下图所示：

DockPanel.png

<Window x:Class="WpfAppDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfAppDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <DockPanel>
        <TextBlock Background="Red" Height="100" Text="1" DockPanel.Dock="Top"></TextBlock>
        <TextBlock Background="Gray" Height="100" Text="2" DockPanel.Dock="Bottom"></TextBlock>
        <TextBlock Background="Blue"  Height="100" Text="3" DockPanel.Dock="Left" Padding="30"></TextBlock>
        <TextBlock Background="Green"  Height="100" Text="4" DockPanel.Dock="Right"></TextBlock>
    </DockPanel>
</Window>

3.Grid

Grid用于定义由列和行组成的灵活的网格区域。相当于html中的table元素。使用Grid可以通过ColumnDefinitions和RowDefinitions来定义表格的行和列，如下所示为定义了一个两行三列的表格：

Grid.png

<Window x:Class="WpfAppDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfAppDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
    </Grid>
</Window>

如图所示，默认将表格分成两行三列，在不设置宽高的时候，会将每个表格进行平分。

在 Grid 中有三种方式可以设置表格的行高和列宽。

绝对尺寸：通过给Width和Height设置一个固定的值，如<RowDefinition Height="100"></RowDefinition>

自动设置尺寸：给Width和Height的值设置为Auto时，将根据内容来自动设置尺寸。

按比例设置尺寸：按比例将空间分割到一组行和列中。这是对所有行和列的标准设置。通常值为或N

Grid1.png

<Window x:Class="WpfAppDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfAppDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="2*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"></ColumnDefinition>
            <ColumnDefinition Width="2*"></ColumnDefinition>
            <ColumnDefinition Width="auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBox Grid.Row="0" Grid.Column="0">第一行第一列</TextBox>
        <TextBox Grid.Row="0" Grid.Column="1">第一行第二列</TextBox>
        <TextBox Grid.Row="0" Grid.Column="2">第一行第三列</TextBox>
        <TextBox Grid.Row="1" Grid.Column="0">第二行第一列</TextBox>
        <TextBox Grid.Row="1" Grid.Column="1">第二行第二列</TextBox>
        <TextBox Grid.Row="1" Grid.Column="2">第二行第三列</TextBox>
    </Grid>
</Window>

4.StackPanel

使用StackPanel可以将子元素排列成水平或垂直的一行。通过Orientation可以改变布局的方向，Orientation属性包含HorizontalAlignment 和 VerticalAlignment两个值，超过父视图的范围时，不会自动换行。效果如下图所示：

StackPanel.png

<Window x:Class="WpfAppDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfAppDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel Orientation="Horizontal">
        <Button Height="50" Width="80">按钮1</Button>
        <Button Height="50" Width="80">按钮2</Button>
        <Button Height="50" Width="80">按钮3</Button>
        <Button Height="50" Width="80">按钮4</Button>
        <Button Height="50" Width="80">按钮5</Button>
    </StackPanel>
</Window>

5.VirtualizingStackPanel

VirtualizingStackPanel用于在水平或垂直的一行中排列并显示内容，其实用法跟StackPanel差不多。但VirtualizingStackPanel有一个优势，它只通过渲染和处理对用户可见的数据的子集来处理整个数据列表来实现.通过创建可见项目的UI元素,这可以大大减少其所需的工作量.相当于视图重用。

6.WrapPanel

WrapPanel是按从左到右的顺序位置定位子元素，在包含框的边缘处将内容切换到下一行。后续排序按照从上至下或从右至左的顺序进行，具体取决于 Orientation 属性的值。

WrapPanel.png

<Window x:Class="WpfAppDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfAppDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <WrapPanel Margin="10" >
        <Button Height="50" Width="80" Margin="10">按钮1</Button>
        <Button Height="50" Width="80" Margin="10">按钮2</Button>
        <Button Height="50" Width="80" Margin="10">按钮3</Button>
        <Button Height="50" Width="80" Margin="10">按钮4</Button>
        <Button Height="50" Width="80" Margin="10">按钮5</Button>
        <Button Height="50" Width="80" Margin="10">按钮11</Button>
        <Button Height="50" Width="80" Margin="10">按钮22</Button>
        <Button Height="50" Width="80" Margin="10">按钮33</Button>
        <Button Height="50" Width="80" Margin="10">按钮44</Button>
        <Button Height="50" Width="80" Margin="10">按钮55</Button>
    </WrapPanel>
</Window>

个人博客

WPF-布局

1.Canvas

2.DockPanel

3.Grid

4.StackPanel

5.VirtualizingStackPanel

6.WrapPanel

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读