wpf布局设计

时间  2020-06-03 标签 wpf 布局 设计

        wpf用不一样的容器安排布局。每一个容器有各自的布局逻辑，有些容器以堆栈方式布局容器。另外一些容器在网格中不可见的单元格中排列元素。wpf以前，windows采用基于坐标的布局，使用相似于web的流布局，开发人员可以建立与显示分辨率和窗口大小无关的、在不一样显示器上正确缩放的用户界面；窗口内容发生改变时，界面能够自身调整。html

1、基础知识web

一、布局原则windows

wpf窗口只能包含单个元素，为了在窗口上放置多个元素。须要在窗口上放置一个容器，而后在这个容器中添加其余元素。这是由于window类继承自ContentControl类。工具

  • 不该显示设定元素（如控件）的尺寸。
  • 不该使用屏幕坐标指定元素的位置。
  • 布局容器的子元素“共享”可用的空间。
  • 可嵌套的布局容器。典型的用户界面使用Grid做为开始。

二、布局过程布局

（1）测量阶段：容器遍历全部的元素，并询问子元素它们所指望的尺寸。测试

（2）排列阶段：容器在合适的位置放置子元素。.net

        布局容器不提供任何滚动支持，滚动支持由特定的内容控件 ScrollViewer提供。code

三、wpf核心布局面板xml

参考：http://www.javashuo.com/article/p-dhjtgbji-kp.htmlhtm

（1） StackPanel

是面板最简单的布局容器之一，该面板简单地单行或单列以堆栈形式放置其子元素。

子元素的布局属性：

<StackPanel Orientation="Vertical"  VerticalAlignment="Center" Margin="5,5,5,5" MinHeight="50" MinWidth="100" MaxWidth="600" MaxHeight="300" Height="200" Width="400">
            <Button Content="Hello World1" MinWidth="50" MaxWidth="100"></Button>
            <Button Content="Hello World2" MinWidth="50" MaxWidth="100"></Button>
            <Button Content="Hello World3" MinWidth="50" MaxWidth="100"></Button>
            <Button Content="Hello World4" MinWidth="50" MaxWidth="100"></Button>
            <Button Content="Hello World5" MinWidth="50" MaxWidth="100"></Button>
            <Button Content="Hello World6" MinWidth="50" MaxWidth="100"></Button>
        </StackPanel>

 不一样的布局容器能够为它们的子元素提供附加属性，列如Grid对象的全部子元素能够得到Row和Column属性。

（2）WrapPanel面板

       在可能的空间中，以一次一行或一列的布局方式布置控件。与Stackpanel控件相似，WrapPanel也有一个Orientation属性，默认值Horizontal，控件将从左向右进行排列。若是容器的宽度不足以排放全部控件时，将会一个新行从左向右进行排列。

       WrapPanel一般用在一些小范围的布局场合，而不是整个窗口的整体布局，好比可使用WrapPanel来保持控件以一种相似工具条的形式。

<WrapPanel Margin="3">
            <Button Name="btn1" Content="按钮1" VerticalAlignment="Top" />
            <Button Name="btn2" MaxHeight="60" Content="按钮2" />
            <Button Name="btn3" VerticalAlignment="Center">居中按钮</Button>
</WrapPanel>

 （3）DockPanel

        沿着一条外边缘来拉伸全部包含的控件。Dockpanel容器面板用于拉伸空间以停靠在指定的窗口边缘。

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

　　Left：位于DockPanel左侧的子元素。

　　Top：位于DockPanel的顶部的子元素。

　　Right：位于DockPanel右侧的子元素。

　　Bottom：位于DockPanel底部的子元素。

（4）Grid面板

        Grid面板是WPF中功能最强大的布局容器。Grid面板将元素分割到不可见的行列网格中，每一个单元格放置一个元素。 

Grid.RowDefinitions：用于设置行数量

Grid面板调整行和列的三种设置方式：

  • 绝对设置尺度方式：使用设备无关单位准确设置尺寸    如： <ColumnDefinition Width="5"/>
  • 自动设置尺度方式：每行和每列的尺度恰好知足需求 如： <ColumnDefinition Width="Auto"/>
  • 按比例设置尺度方式:按比例将空间分割到一组行和列中 如：<ColumnDefinition Width="*"/>

设置两行：

<Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
</Grid.RowDefinitions>

 Grid.ColumnDefinitions用于设置列数量

设置三列：

<Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>

 设置两行三列：

ShowGridLines=”True”用于设置程序运行后显示网格线，在测试环境中使用

<Window x:Class="combination.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="396" Width="502">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
    </Grid>
</Window>

 设置元素在Grid中的位置

使用Grid.Row和Grid.Column的数值设定第几行第几列， Grid.Row=”0” Grid.Column=”0”表示第0行第0列。如图代码展现出的按钮位置。

<Window x:Class="combination.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="396" Width="502">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Content="Button" Grid.Row="0" Grid.Column="0" />
        <Button Content="Button" Grid.Row="0" Grid.Column="1"/>
        <Button Content="Button" Grid.Row="1" Grid.Column="2"/>
    </Grid>
</Window>

 

分割窗口

         在WPF中，分割条由GridSplitter类表示，它是Grid面板的功能之一，使用后用户能够改变行和列的尺寸。

          使用原则：

  • GridSplitter对象必须放到Grid单元格中。
  • GridSplitter对象老是改变整行或整列的尺寸（而非改变单个单元格的尺度）。
  • GridSplitter对象很小不易看见，须要将VerticalAlignment 或HorizontalAlignment属性设置为Stretch（使分割条填充满区域的整个高度）
  • GridSplitter对齐方式决定了分割条是水平的（用于改变行的尺寸）仍是竖直的（用于改变列的尺寸）。对于水平分割条，须要将VerticalAlignment属性设置为Center，以指明拖动分割条改变上面行和下面行的尺寸。分割条是竖直的则相反。

 Grid面板中使用分割线GridSplitter：

设置两行四列

<Window x:Class="combination.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="396" Width="502">
    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" ></ColumnDefinition>
            <ColumnDefinition Width="Auto" ></ColumnDefinition>
            <ColumnDefinition Width="2*"></ColumnDefinition>
            <ColumnDefinition Width="4*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Content="Button" Grid.Row="0" Grid.Column="0" />
        <Button Content="Button" Grid.Row="0" Grid.Column="2"/>
        <Button Content="Button" Grid.Row="1" Grid.Column="3"/>
        <GridSplitter Grid.Column="1" Width="3" Grid.RowSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Center"/>
    </Grid>
</Window>

 

参考：https://blog.csdn.net/Maybe_ch/article/details/80591637

2、经常使用组件

一、Viewbox

（1）做用：按特定比例伸缩或按固定窗口大小伸缩

<Viewbox>
       <Grid Background="#FFE5E5E5" Margin="0,0,3.6,0" Height="370" VerticalAlignment="Top">
       </Grid>
  </Viewbox>

当窗口放大和缩小后，grid中的元素会跟着窗口放大和缩小。

（2）TabControl  和TabItem添加选项卡

<TabControl Margin="5,5,10,-9" TabStripPlacement="Top">
    <TabItem Header="Range" >
      <Grid Background="WhiteSmoke" Margin="0,0,0,14.8" >

      </Grid>
     </TabItem>
    <TabItem Header="Range" >
      <Grid Background="WhiteSmoke" Margin="0,0,0,14.8" >

      </Grid>
     </TabItem>
</TabControl>

效果：

联系我们 沪ICP备13005482号-10