WPF 10天修炼 第四天- WPF布局容器

时间  2019-12-08
标签 wpf 10天 修炼 第四 布局 容器 繁體版
原文   原文链接

WPF布局express

       WPF的窗口也就是Window类，是一个内容控件，该控件派生自ContentControl。内容控件有一个Content属性，该属性有一个限制，只能放置一个用户界面元素，或一个字符串。为了在窗口上放置多个界面控件，一般在窗口上放置一个容器控件。布局

WFP布局原则spa

一、  元素不该该指定 肯定的尺寸大小，同很惨更应该使其大小自动适应内容。好比按钮根据所添加的文原本扩展其大小。能够经过设置maximun和minimun尺寸来限制控件可接受的尺寸大小。3d

二、  元素不该该使用屏幕坐标来指定其位置，一般是基于其尺寸来进行自动排列位置。orm

三、  布局容器将在其子元素之间共享其可用控件。一般由容器尝试为其每一个子元素分配合适的尺寸。xml

四、  布局容器容许嵌套。 blog

WP核心布局面板ci

 

面板名称资源

说明开发

StackPanel

使用水平或垂直堆叠的方式放置元素，适用于一些小范围布局。

WarpPanel

水平方向：从左到右排列子元素。当宽度不够时，则开启一个新的行从左到右进行排列。

垂直方向：从上到下排列子元素，当高度不够时，则开启一个新的列从上到下进行排列。

DockPanel

时子元素依赖于容器的特定边缘，左、右、上、下边缘等，该面板一般用于全局布局。

Grid

WPF最强最好用的布局控件。相似一个不可见的HTML表格，将子元素放在特定的行和列中。

UniformGrid

放置子元素在一个不可见的表中，但强制全部的单元格都具备相同的尺寸。使用频率较低

Canvas

使用固定的坐标来绝对定位子元素。与传统winForm布局方式相似。可是没有Anchoring和Docking特性。在处理图形图像的场合，使用这个布局很是有用，在动态用户界面上，这个控件将事半功倍。

StackPanel 

一、  新建StackPaneDemo窗体。

二、  去掉Grid布局容器，而后添加StackPanel布局容器

三、  添加5个button按钮。而后运行查看效果。 

<Window x:Class="WPFDemo.StackPanelDemo"

        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:WPFDemo"

        mc:Ignorable="d"

        WindowStartupLocation="CenterScreen"

        Title="StackPanelDemo" Height="500" Width="800">

    <StackPanel>

        <Button Name="button1" Content="按钮1"/>

        <Button Name="button2" Content="按钮2"/>

        <Button Name="button3" Content="按钮3"/>

        <Button Name="button4" Content="按钮4"/>

        <Button Name="button5" Content="按钮5"/>

    </StackPanel>

</Window>

 

默认状况下，StackPanel从上到下排列控件，控件的高度与其内容的高度相匹配，可使用Orientation属性设置为Horizontal使其从左到右进行排列。

    <StackPanel Orientation="Horizontal">

        <Button Name="button1" Content="按钮1"/>

        <Button Name="button2" Content="按钮2"/>

        <Button Name="button3" Content="按钮3"/>

        <Button Name="button4" Content="按钮4"/>

        <Button Name="button5" Content="按钮5"/>

    </StackPanel>

 

 

 当设置Horizontal以后，按钮将占满StackPanel的高度，但宽度则为内容的大小。StackPanel有两个依赖属性，可使开发人员能够控制水平或垂直方向，控件如何占满窗体可用宽度和高度。 

HorizontalAlignment枚举属性：获取或设置在父元素中构成此元素时应用于此元素的水平对齐特征。

VerticalAlignment枚举属性：获取或设置在父元素中构成此元素时应用于此元素的垂直对齐特征。

默认状况下，这两个属性的Stretch，表示根据StackPanel的排列方向自动拉伸到相应的宽度和高度。

 

当StackPanel控件设为水平方向时，能够经过VerticalAlignment属性来设置button控件的对齐方式。

<StackPanel Orientation="Horizontal">

        <Button Name="button1" Content="按钮1" VerticalAlignment="Top"/>

        <Button Name="button2" Content="按钮2" VerticalAlignment="Center"/>

        <Button Name="button3" Content="按钮3" VerticalAlignment="Bottom"/>

        <Button Name="button4" Content="按钮4" VerticalAlignment="Stretch"/>

        <Button Name="button5" Content="按钮5" VerticalAlignment="Stretch"/>

</StackPanel>

 

 

一样在Orientation为Vertical时，能够设置HorizontalAlignment属性来指定对齐方式。

<StackPanel Orientation="Vertical">

        <Button Name="button1" Content="按钮1" HorizontalAlignment="Left"/>

        <Button Name="button2" Content="按钮2" HorizontalAlignment="Center"/>

        <Button Name="button3" Content="按钮3" HorizontalAlignment="Right"/>

        <Button Name="button4" Content="按钮4" HorizontalAlignment="Stretch"/>

        <Button Name="button5" Content="按钮5" HorizontalAlignment="Stretch"/>

</StackPanel>

 

 

其余布局属性

属性名称

属性说明

Margin

能够在子元素的四周添加空白，同CSS中的Margin使用方法一致，Margin是System.Windows.thickness结构的属性。

MinWidth和MinHeight

设置元素的最小尺寸，若是元素大于容器会被裁剪。

MaxWidth和MaxHeight

设置元素的最大尺寸，若是元素大于容器会被裁剪。

Width和Height

设置固定的元素大小。这个属性将会覆盖HorizontalAlignment和VerticalAlignment属性。

 

Margin属性

Margin属性能够指定一个值设置四条边的值同样，能够设置两个值设置上下、左右的值同样，能够设置四个值分别指定左上右下的值。

<StackPanel Orientation="Horizontal">

        <Button Name="button1" Content="按钮1" Margin="5,10" />

        <Button Name="button2" Content="按钮2" />

        <Button Name="button3" Content="按钮3" Margin="5,10,15,20" />

        <Button Name="button4" Content="按钮4" />

        <Button Name="button5" Content="按钮5" Margin="5" />

</StackPanel>

 

 

最大化、最小化和明确的尺寸属性

 若是但愿按钮能够自动地根据内容进行缩放，可是不能小于100个单位，不能大于200个单位。可使用MaxWidth和MinWidth属性进行设置。

<StackPanel Orientation="Horizontal">

        <Button Name="button1" Content="按钮1" MaxWidth="200" MinWidth="100" Margin="5,10" />

        <Button Name="button2" Content="按钮2" MaxWidth="200" MinWidth="100" />

        <Button Name="button3" Content="按钮3" MaxWidth="200" MinWidth="100" Margin="5,10,15,20" />

        <Button Name="button4" Content="按钮4" MaxWidth="200" MinWidth="100" />

        <Button Name="button5" Content="按钮5" MaxWidth="200" MinWidth="100" Margin="5" />

</StackPanel>

 

设置最大和最小尺寸效果

 

 

容器尺寸小于控件尺寸裁剪

  

若是想在Window中获取元素的实际大小，不能直接使用Width和Height属性，它们表明的不是实际尺寸大小而是但愿的尺寸大小。开发人员能够访问元素的ActualWidth和ActualHeigth属性来获取当前窗口中元素的实际尺寸，这个两个尺寸会随着窗口大小的调整而变化。

 WrapPanel 

       与StackPanel控件相似，WrapPanel也有一个Orientation属性，默认为Horizontal，控件从左到右进行排列。若是宽度不够时将会换一个新行。WrapPanel一般用于一些小范围的布局场合。而不是总体窗口的整体布局。

  <WrapPanel>

        <Button Name="button1" Content="按钮1" VerticalAlignment="Top" />

        <Button Name="button2" Content="按钮2" MinHeight="100" />

        <Button Name="button3" Content="按钮3"  VerticalAlignment="Bottom"/>

        <Button Name="button4" Content="按钮4" />

        <Button Name="button5" Content="按钮5" VerticalAlignment="Center" />

    </WrapPanel>

 

默认样式

 

 

 缩小窗体，自动换行 

 

 DockPanel

         用于拉伸控件，以停靠在指定的窗口边缘，DockPanel中的控件将被拉伸以适应容器的边缘。

         DockPanel控件的附加属性Dock。这是一个枚举类型属性：可选值以下：

         Left：位于DockPanel左侧的子元素

         Top：位于DockPanel顶部的资源

         Right：位于DockPanel右侧的子元素

         Bottom：位于DockPanel底部的子元素

   <DockPanel>

        <Button Name="button1" Content="顶部" DockPanel.Dock="Top"/>

        <Button Name="button2" Content="下侧" DockPanel.Dock="Bottom"/>

        <Button Name="button3" Content="左侧" DockPanel.Dock="Left" />

        <Button Name="button4" Content="右侧"  DockPanel.Dock="Right"/>

        <Button Name="button5" Content="剩余空间" />

   </DockPanel>

　

 上面代码中分别设置了四个方向，最后一个方向没有设置则自动占满了剩余空间，这是由于DockPanel控件指定了LastChildFill属性。默认状况下这个属性为True。若是将LastChildFille设置为True不管最后一个元素停靠属性设置为什么值，此元素也是自动填充剩余空间。

<DockPanel>

        <Button Name="button1" Content="顶部" DockPanel.Dock="Top"/>

        <Button Name="button2" Content="下侧" DockPanel.Dock="Bottom"/>

        <Button Name="button3" Content="左侧" DockPanel.Dock="Left" />

        <Button Name="button4" Content="右侧"  DockPanel.Dock="Right"/>

        <Button Name="button5" Content="剩余空间" DockPanel.Dock="Top" />

</DockPanel>

　

下面示例中将LastChildFill属性设置为False，而后将最后一个元素的Dock属性设置为top。

  <DockPanel LastChildFill="False">

        <Button Name="button1" Content="顶部" DockPanel.Dock="Top"/>

        <Button Name="button2" Content="下侧" DockPanel.Dock="Bottom"/>

        <Button Name="button3" Content="左侧" DockPanel.Dock="Left" />

        <Button Name="button4" Content="右侧"  DockPanel.Dock="Right"/>

        <Button Name="button5" Content="剩余空间" DockPanel.Dock="Top" />

   </DockPanel>

 

在上面示例中上下两侧都是占满了窗体的所有宽度，若是想使左右两侧占满所有高度，只须要改变子元素的顺序便可。

<DockPanel LastChildFill="False">

        <Button Name="button3" Content="左侧" DockPanel.Dock="Left" />

        <Button Name="button4" Content="右侧"  DockPanel.Dock="Right"/>

        <Button Name="button1" Content="顶部" DockPanel.Dock="Top"/>

        <Button Name="button2" Content="下侧" DockPanel.Dock="Bottom"/>

        <Button Name="button5" Content="剩余空间" DockPanel.Dock="Top" />

</DockPanel>

　　

开发人员也可使用HorizontaAlignment和VerticalAlignment属性来控制子元素的显示方式。

<DockPanel LastChildFill="False">

        <Button Name="button1" Content="顶部" DockPanel.Dock="Top"/>

        <Button Name="button6" Content="顶部-居中" HorizontalAlignment="Center" DockPanel.Dock="Top"/>

        <Button Name="button7" Content="顶部-右侧" HorizontalAlignment="Right" DockPanel.Dock="Top"/>

        <Button Name="button2" Content="下侧" DockPanel.Dock="Bottom"/>

        <Button Name="button3" Content="左侧" DockPanel.Dock="Left" />

        <Button Name="button4" Content="右侧"  DockPanel.Dock="Right"/>

        <Button Name="button5" Content="剩余空间" DockPanel.Dock="Top" />

</DockPanel>

　

 

使用StackPanel、WarpPanel和DockPanel来实现一个简单的对话框窗口。

    <DockPanel LastChildFill="True" >

        <StackPanel Orientation="Horizontal" DockPanel.Dock="Bottom" HorizontalAlignment="Right">

            <Button Name="btn1" Margin="5" Content="肯定"/>

            <Button Name="btn2" Margin="5" Content="取消"/>

        </StackPanel>

        <TextBlock Margin="10" Text="简单对话框示例"></TextBlock>

    </DockPanel>

 

 

 

Grid

Grid就是表格布局，使用Grid能够设置行列，添加子元素须要指定所属的行列，多个子元素能够放在同一个单元格中。

<!---定义一个3行3列的表格-->
<Grid  ShowGridLines="True">

        <!--定义3行-->

        <Grid.RowDefinitions>

            <RowDefinition />

            <RowDefinition />

            <RowDefinition />

        </Grid.RowDefinitions>

        <!--定义3列-->

        <Grid.ColumnDefinitions>

            <ColumnDefinition />

            <ColumnDefinition />

            <ColumnDefinition />

        </Grid.ColumnDefinitions>

</Grid>

 

 

默认状况下全部的单元格大小是均分的，能够经过ColumnDefinition的Widht属性来指定每一列的宽，经过RowDefinition的Height属性来指定每一列的高。

Grid控件尺寸设置和其余控件的尺寸设置不同，Grid尺寸设置主要支持下面三种：

一、  绝对尺寸：指定精确的单位大小。例如定义100个单位高度<RowDefinition Height=”100” />  通常状况下绝对尺寸在Grid中使用较少，由于指定以后便不能根据内容大小自动伸缩。

二、  自动内容尺寸：Grid尺寸的变化将给予行或列的子元素内容而定。在Xaml中一般使用Auto来指定。<RowDefinition Height=”Auto”/>

三、  按比例分配剩余空间：这是默认设置，一般使用 * ，1*，2* 等样式来指定的。按比例分配空间是指，当使用精确尺寸或自动内容尺寸分配以后，所剩的空间如何进行分配。 

这是一个相对单位，默认状况下只有一个*。当有两个列都设置为*时，表示将其空间按比例各一半进行分配。若是一列指定为2*。则平均分为3份，*占3分之一；2*占3分之二。

  

使用不一样尺寸定义方法定义Grid行高

<!---定义一个3行3列的表格-->

<Grid  ShowGridLines="True">

        <!--定义3行-->

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto" />

            <RowDefinition Height="*"/>

            <RowDefinition Height="2*"/>

        </Grid.RowDefinitions>

        <!--定义3列-->

        <Grid.ColumnDefinitions>

            <ColumnDefinition />

            <ColumnDefinition />

            <ColumnDefinition />

        </Grid.ColumnDefinitions>

 

        <Button Content="button1" Grid.Row="0" Grid.Column="0"/>

        <Button Content="button2" Grid.Row="1" Grid.Column="1"/>

        <Button Content="button3" Grid.Row="2" Grid.Column="2"/>

    </Grid>

　　

 

合并行列

       合并单元格与HTML中table的合并单元格同样，使用RowSpan合并行ColumnSpan合并列。

<!---定义一个3行3列的表格-->

    <Grid  ShowGridLines="True">

        <!--定义3行-->

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto" />

            <RowDefinition Height="*"/>

            <RowDefinition Height="2*"/>

        </Grid.RowDefinitions>

        <!--定义3列-->

        <Grid.ColumnDefinitions>

            <ColumnDefinition />

            <ColumnDefinition />

            <ColumnDefinition />

        </Grid.ColumnDefinitions>

 

        <Button Content="button1" Grid.RowSpan="3" Grid.Row="0" Grid.Column="0"/>

        <Button Content="button2" Grid.ColumnSpan="2" Grid.Row="1" Grid.Column="1"/>

        <Button Content="button3" Grid.Row="2" Grid.Column="2"/>

</Grid>

　　

窗体分割

        在Grid中，经过使用GridSplitter控件为布局添加一个窗体分隔条，使布局能够由用户来调整其大小。GridSplitter必须放置在Grid控件中，在使用GridSplitter以前须要理解下面几点：

一、  GridSplitter控件必须放置在一个Grid中，能够与已经存在的内容放在一块儿。为了放置覆盖已存在的内容，须要调整其Margin属性。

二、  GridSplitter控件老是调整整个行或列的尺寸，而不是特定单元格的尺寸。

三、  GridSplitter的对齐属性，好比HorizontalAlignment或VerticalAlignment属性决定了分隔条能够拖动的方向。当设置HorizontalAlignment为Left时，则只能向左拖动分隔条，设置为Center则能够左右同时拖动。

窗体分割应用Demo

<!---定义一个3行3列的表格-->

    <Grid  ShowGridLines="True">

        <!--定义3行-->

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto" />

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

            <RowDefinition Height="2*"/>

        </Grid.RowDefinitions>

        <!--定义3列-->

        <Grid.ColumnDefinitions>

            <ColumnDefinition />

            <ColumnDefinition Width="Auto"/>

            <ColumnDefinition />

            <ColumnDefinition />

        </Grid.ColumnDefinitions>

        <!--垂直Splitter-->

        <GridSplitter Grid.Row="0"  Grid.Column="1" Width="10" HorizontalAlignment="Center" Background="Blue"  Grid.RowSpan="4"></GridSplitter>

        <!---水平Splitter-->

        <GridSplitter Grid.Row="1"  Grid.Column="0" Height="10"  HorizontalAlignment="Stretch" Background="Red" Grid.ColumnSpan="4"></GridSplitter>

 

        <Button Content="button1" Grid.Row="0" Grid.Column="0"/>

        <Button Content="button2" Grid.Row="2" Grid.Column="2"/>

        <Button Content="button3" Grid.Row="3" Grid.Column="3"/>

    </Grid>

　　

 

UniformGrid

 　　UniformGrid控件是一个简化版的Grid控件，使用该控件不须要定义行列。只须要指定Rows和Columns属性便可，该控件会将全部的行列使用相同的尺寸。在添加子元素时不须要指定所在的行列，全部的子元素都是按从左到右的顺序进行排列的。

<UniformGrid Rows="2" Columns="4">

        <Button Content="按钮1" Background="Black" ></Button>

        <Button Content="按钮2" Background="Red"></Button>

        <Button Content="按钮3" Background="AntiqueWhite"></Button>

        <Button Content="按钮4" Background="Aqua"></Button>

        <Button Content="按钮5" Background="Aquamarine"></Button>

        <Button Content="按钮6" Background="Azure"></Button>

        <Button Content="按钮7" Background="Beige"></Button>

</UniformGrid>

　　

 

 

若是想让子元素进行从右到左进行排列时只须要指定FlowDirection属性为RightToLeft便可。

  <UniformGrid Rows="2" Columns="4" FlowDirection="RightToLeft">

        <Button Content="按钮1" Background="Black" ></Button>

        <Button Content="按钮2" Background="Red"></Button>

        <Button Content="按钮3" Background="AntiqueWhite"></Button>

        <Button Content="按钮4" Background="Aqua"></Button>

        <Button Content="按钮5" Background="Aquamarine"></Button>

        <Button Content="按钮6" Background="Azure"></Button>

        <Button Content="按钮7" Background="Beige"></Button>

    </UniformGrid>

　　

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程