Wpf常见的5种布局_wpf有哪几种常见的布局方式?进行简要说明。-程序员宅基地

技术标签: wpf  

                       Wpf常见的5种布局   

在这里插入图片描述
栈面板(StackPanel)
栈面板可以将元素排列成一行或者一列,它的特点是:每个元素各占一行或者一列,
当设置Orientation="Vertical"时,按钮按垂直方向排列显示,默认值也是Orientation=“Vertical”
在这里插入图片描述
代码:

<Window x:Class="Wpf.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:Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="525">
    <Window.Resources>
        <!--依赖属性 本页面用的样式-->
        <Style TargetType="Button">
            <Setter Property="Background" Value="Gold"></Sette  
            <Setter Property="Foreground" Value="Black"></Setter
            <Setter Property="FontSize" Value="20"></Setter>
        </Style>
    </Window.Resources>
    <StackPanel >
        <Button>按钮1</Button>

        <Button>按钮2</Button>

        <Button >按钮3</Button>

        <Button>按钮4</Button>
    </StackPanel>
   
   <Window>

当设置 Orientation="Horizontal"时,按钮按水平方向排列显示,当把StackPanel的FlowDirection属性设置为RightToLeft,Orientation属性设置为Horizontal,StackPanel将从右向左排列元素
在这里插入图片描述

<Window x:Class="Wpf.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:Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="525">
    <Window.Resources>
        <!--依赖属性 本页面用的样式-->
        <Style TargetType="Button">
            <Setter Property="Background" Value="Gold"></Sette  
            <Setter Property="Foreground" Value="Black"></Setter
            <Setter Property="FontSize" Value="20"></Setter>
        </Style>
    </Window.Resources>
    <StackPanel   Orientation="Horizontal">
        <Button>按钮1</Button>

        <Button>按钮2</Button>

        <Button >按钮3</Button>

        <Button>按钮4</Button>
    </StackPanel>
   
   <Window>

WrapPanel(环绕面板)
环绕面板将各个控件从左至右按照行或列的顺序罗列,当长度或高度不够时就会自动调整进行换行,后续排序按照从上至下或从右至左的顺序进行。
当Orientation属性的值设置为 Horizontal:元素是从左向右排列的,然后自上至下自动换行(默认值为是Orientation=“Horizontal”)
在这里插入图片描述
代码:

<Window x:Class="Wpf.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:Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="525">
    <Window.Resources>
        <!--依赖属性 本页面用的样式-->
        <Style TargetType="Button">
            <Setter Property="Background" Value="Gold"></Sette  
            <Setter Property="Foreground" Value="Black"></Setter
            <Setter Property="FontSize" Value="20"></Setter>
        </Style>
    </Window.Resources>
  <WrapPanel  >
        <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>   
   </WrapPanel>
   
   <Window>

当Orientation属性的值设置为Vertical:元素是从上向下排列的,然后从左至右自动换行
在这里插入图片描述
代码:

<Window x:Class="Wpf.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:Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="525">
    <Window.Resources>
        <!--依赖属性 本页面用的样式-->
        <Style TargetType="Button">
            <Setter Property="Background" Value="Gold"></Sette  
            <Setter Property="Foreground" Value="Black"></Setter
            <Setter Property="FontSize" Value="20"></Setter>
        </Style>
    </Window.Resources>
 <WrapPanel  Orientation="Vertical">
        <Button Height="100">按钮1</Button>

        <Button Height="100">按钮2</Button>

        <Button  Height="100">按钮3</Button>

        <Button  Height="100">按钮4</Button>

        <Button  Height="100">按钮5</Button>

        <Button  Height="100">按钮6</Button>
    </WrapPanel>
   
   <Window>

DockPanel(停靠面板)
DockPanel对每个子元素进行排序,并将根据指定的边进行停靠,如果多个停靠在同侧的元素则按顺序排序
由图可以看到,按钮的停靠的顺序左,上,右,下。是先左停靠后,是在剩下的区域再上停靠,以此类推,剩下的也是这样停靠。
注意:无论对DockPanel的最后一个子元素设置任何停靠值,该子元素都将始终填满剩余的空间
在这里插入图片描述
代码:

<Window x:Class="Wpf.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:Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="525">
    <Window.Resources>
        <!--依赖属性 本页面用的样式-->
        <Style TargetType="Button">
            <Setter Property="Background" Value="Gold"></Sette  
            <Setter Property="Foreground" Value="Black"></Setter
            <Setter Property="FontSize" Value="20"></Setter>
        </Style>
    </Window.Resources>
 <DockPanel>
        <Button DockPanel.Dock="Left">按钮1</Button>

        <Button DockPanel.Dock="Top">按钮2</Button>

        <Button DockPanel.Dock="Right">按钮3</Button>

        <Button DockPanel.Dock="Top">按钮4</Button>
    </DockPanel>
 
   <Window>
 

如果不想最后那个停靠会填满剩余的区域,就把DockPanel属性LastChildFill设置为false,还必须为最后一个子元素显式指定停靠方向
在这里插入图片描述
代码:

<Window x:Class="Wpf.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:Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="525">
    <Window.Resources>
        <!--依赖属性 本页面用的样式-->
        <Style TargetType="Button">
            <Setter Property="Background" Value="Gold"></Sette  
            <Setter Property="Foreground" Value="Black"></Setter
            <Setter Property="FontSize" Value="20"></Setter>
        </Style>
    </Window.Resources>
 <DockPanel  LastChildFill="False">
        <Button DockPanel.Dock="Left">按钮1</Button>

        <Button DockPanel.Dock="Top">按钮2</Button>

        <Button DockPanel.Dock="Right">按钮3</Button>

        <Button DockPanel.Dock="Top">按钮4</Button>
    </DockPanel>
 
   <Window>

Canvas(画布面板)
画布,用于完全控制每个元素的精确位置。他是布局控件中最为简单的一种,直接将元素放到指定位置,主要来布置图面。使用Canvas,必须指定一个子元素的位置(相对于画布),否则所有元素都将出现在画布的左上角。
Canvas允许子元素的部分或全部超过其边界,默认不会裁剪子元素,同时可以使用负标,即溢出的内容会显示在Canvas外面
1.子元素超出边界
在这里插入图片描述
代码:

<Window x:Class="Wpf.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:Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="525">
    <Window.Resources>
        <!--依赖属性 本页面用的样式-->
        <Style TargetType="Button">
            <Setter Property="Background" Value="Gold"></Sette  
            <Setter Property="Foreground" Value="Black"></Setter
            <Setter Property="FontSize" Value="20"></Setter>
        </Style>
    </Window.Resources>
  <Canvas >
        <Button Canvas.Left="415" Canvas.Bottom="-80" Height="227">按钮1</Button>
    </Canvas> 
   <Window>

2.元素不超出边界
如果不想子元素超出边界,那就把ClipToBounds属性设为true
在这里插入图片描述
代码:

<Window x:Class="Wpf.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:Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="525">
    <Window.Resources>
        <!--依赖属性 本页面用的样式-->
        <Style TargetType="Button">
            <Setter Property="Background" Value="Gold"></Sette  
            <Setter Property="Foreground" Value="Black"></Setter
            <Setter Property="FontSize" Value="20"></Setter>
        </Style>
    </Window.Resources>
  <Canvas  ClipToBounds="True">
        <Button Canvas.Left="415" Canvas.Bottom="-80" Height="227">按钮1</Button>
    </Canvas> 
   <Window>

Grid(网格面板)
Grid以表格形式布局元素,对于整个面板上的元素进行布局,它的子控件被放在一个一个事先定义好的小格子里面,整齐配列。要使用Grid,首先要向RowDefinitions和ColumnDefinitions属性中添加一定数量的RowDefinitions和 ColumnDefinitions元素,从而定义行数和列数。而放置在Grid面板中的控件元素都必须显示采用Row和Column附加属性定义其放置所在的行和列,这两个属性的值都是从0开始的索引数,如果没有显式设置任何行或列,Grid将会隐式地将控件加入在第0行第0列。 列宽和行高,分别可以在ColumnDefinition、RowDefinition里面指定Width、Height的值。
在这里插入图片描述
代码:

<Window x:Class="Wpf.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:Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="525">
    <Window.Resources>
        <!--依赖属性 本页面用的样式-->
        <Style TargetType="Button">
            <Setter Property="Background" Value="Gold"></Setter>
            <Setter Property="Foreground" Value="Black"></Setter>
            <Setter Property="FontSize" Value="20"></Setter>
        </Style>
    </Window.Resources>
    <Grid >
        <!--定义行 2行 比例59:361-->
        <Grid.RowDefinitions>
            <RowDefinition Height="59*"/>
            <RowDefinition Height="361*"/>
        </Grid.RowDefinitions>
        <!--定义列 2列 比例51:208-->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="51*"/>
            <ColumnDefinition Width="208*"/>
        </Grid.ColumnDefinitions>
        <!--在第一行,第二列写入一个按钮 
        Grid.Row="0" Grid.Column="1" 是索引 
        Grid.Row="0"表示第一行
        Grid.Column="1"  表示第二列-->
        <Button Grid.Row="0" Grid.Column="0" Content="按钮1" ></Button>       
        <Grid Grid.Column="1" Grid.Row="1" Background="Red">  
        </Grid>
    </Grid>
</Window>

而如果想要占多行或者多列,就用 Grid.ColumnSpan 和Grid.RowSpan ,表示跨行和列
如:
在这里插入图片描述
代码:

<Window x:Class="Wpf.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:Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="525">
    <Window.Resources>
        <!--依赖属性 本页面用的样式-->
        <Style TargetType="Button">
            <Setter Property="Background" Value="Gold"></Setter>
            <Setter Property="Foreground" Value="Black"></Setter>
            <Setter Property="FontSize" Value="20"></Setter>
        </Style>
    </Window.Resources>
    <Grid >
        <!--定义行 2行 比例59:361-->
        <Grid.RowDefinitions>
            <RowDefinition Height="59*"/>
            <RowDefinition Height="361*"/>
        </Grid.RowDefinitions>
        <!--定义列 2列 比例51:208-->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="51*"/>
            <ColumnDefinition Width="208*"/>
        </Grid.ColumnDefinitions>
        <!--在第一行,第二列写入一个按钮 
        Grid.Row="0" Grid.Column="1" 是索引 
        Grid.Row="0"表示第一行
        Grid.Column="1"  表示第二列-->
        <Button Grid.Row="0" Grid.Column="1" Content="按钮1" ></Button>        
    </Grid>
</Window>

上图表示占了2行。
注意:如果不知道Grid.Row属性,Grid面板会假定该属性的值为0。对于Grid.Column属性也是如此。因此,在Grid面板的第一个单元格中放置元素时可不指定这两个属性值。
设置ColumnDefinition对象的Width属性或者RowDefinition对象的Height属性的方式有3种
(1)设置100设备无关单位的绝对宽度:

(2)使用自动尺寸设置方式,需要使用Auto值

(3)使用按比例尺寸设置方式,需要使用星号(*)

如果希望不均匀的分割剩余空间,可指定权重,权重必须放在星号之前。例如,如果有两行是按比例设置尺寸,并希望第一行的高度是第二行高度的一半,那么可以使用如下设置来分配剩余空间:

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44550873/article/details/89448978

智能推荐

分类预测 | MATLAB实现KNN分类预测(SA-KNN、GOA-KNN对比)_knn分类matlab工具箱-程序员宅基地

文章浏览阅读610次。分类预测 | MATLAB实现KNN分类预测(SA-KNN、GOA-KNN对比)_knn分类matlab工具箱

Mybatis-helloWorld-程序员宅基地

文章浏览阅读104次。文章目录第一个Mybatis配置配置准备相关环境依赖配置过程程序结果第一个Mybatis配置配置准备相关环境依赖数据库准备新建一个数据库座测试用,在新建的数据库里先创建一张表,我们在表里创建几个字段,存放一两条数据。配置过程应该先导入相关jar包啊!!!先写一个bean类,写好get和set方法,因为以后要输出测试所以把toString方法也写上。package com.atahpu.mybatis;/** * @Author : JackWang * @Date

五路模拟量灰度传感器--ADC+DMA_五路灰度传感器原理图-程序员宅基地

文章浏览阅读3k次,点赞13次,收藏63次。由于光线照射到不同颜色后一部分光被颜色吸收, 一部分则被反射出去,会得到不同颜色光反射强度的变化,灰度接收 管对被探测面颜色光反射的强弱不同进行采集回收,然后输出对应的 电压值信号(也叫做模拟信号);其余A0、A1、A2、A3、A4我接的是单片机ADC1的PA0、PA1、PA2、PA3、PA5,(为什么不接PA4呢,那是由于PA4被占用了,那如何判断IO口是否被占用,我们可以不给灰度传感器供电,其他IO口都接上,然后与电脑通信,查看那个口有数据就说明他被占用了)还要注意,ADC1只能用DMA1进行搬运。_五路灰度传感器原理图

[大海战] Freepascal之Crt单元-程序员宅基地

文章浏览阅读135次。{这是我的首个一千行程序所以很多地方有冗余 不是很成熟况且程序上了千行用譬如Freepascal 等等这类的面向过程的平台就力不从心了Delphi7以前用过 不是很会用凭着对Crt单元的好奇 我写了这个小游戏}先给代码 可以直接copy走http://files.cnblogs.com/Booble/D_Game_CRT.rar可以先试试用用具体..._{$m $4000,0,0} uses dos,crt;

Tcpdump详解linux tcpdump抓包分析工具_tcpdump自动分包-程序员宅基地

文章浏览阅读1.2k次。Tcpdump详解实用命令实例默认启动tcpdump普通情况下,直接启动tcpdump将监视第一个网络接口上所有流过的数据包。 监视指定网络接口的数据包tcpdump -i eth1如果不指定网卡,默认tcpdump只会监视第一个网络接口,一般是eth0,下面的例子都没有指定网络接口。  监视指定主机的数据包打印所有进入或离开sundown的数据包._tcpdump自动分包

单片机GPRS模块与web端通信_web远程通信单片机-程序员宅基地

文章浏览阅读1.7k次,点赞7次,收藏22次。最近开搞毕设,拿起了单片机,因为最近实习一直在前端和gis,所以就想弄个gps和web端地图的交互软件。 说在前面--这里都是简单的东西,大神轻喷。用的是STM32芯片和MC20开发板,这个开发板上有GPS北斗模组,GPRS模组,图个方便,就直接选一个现成的,不用自己画板子焊板子了,如果大家对,单片机的源码感兴趣,私聊我,我私发给你们。最终就是把GPS获取的信息解析出经纬度信息,然后通过GPRS模组发送到自己搭建的服务器上。GPRS模组走的是TCP协议,而web端是HTTP协议,这时候就开始疯._web远程通信单片机

随便推点

SpringCloud笔记(二)使用DiscoveryClient手动实现客户端负载均衡_discoveryclient 用法-程序员宅基地

文章浏览阅读648次。1、什么是客户端负载均衡(Ribbon)?Ribbon是从eureka注册中心服务器端上获取服务注册信息列表,缓存到本地,然后在本地实现轮训负载均衡策略。既在客户端实现负载均衡。2、什么是服务端负载均衡(Nginx)?Nginx是客户端所有请求统一交给Nginx,由Nginx进行实现负载均衡请求转发,属于服务器端负载均衡。 即请求由Nginx服务器端进行转发。3、两者的应用场景?Nginx适合于服务器端实现负载均衡 比如Tomcat ,Ribbon适合在微服务中RPC远程调用实现本地服._discoveryclient 用法

字节跳动面试官问:微服务下如何保证分布式事务的最终一致性?-程序员宅基地

文章浏览阅读765次。提起「微服务架构」,有两个永恒话题:服务治理、分布式事务。数据库和业务模块的垂直拆分为我们带来了系统性能、稳定性和开发效率的提升的同时也引入了一些更复杂的问题,例如在数据一致性问题上,我们..._微服务中分布式事务用什么保证强一致性

微信小程序中navigator无法跳转的问题_微信浏览器 window.navigator 获取不到-程序员宅基地

文章浏览阅读1.7w次,点赞7次,收藏7次。 本来写的navigator语句正确,可页面就是无法跳转,百度过后才找到了问题所在,特地总结如下:出现这种情况可能有三种问题:1.跳转的页面没有在app.json页面中注册。如果是这种问题会在控制台弹出错误,留意控制台即可;2.跳转的路径不正确。初学时不太注意会出现这种问题,这种问题同样会在控制台弹出错误。3.跳转的页面位于TabBar中。这种情况不会在控制台弹出错误,需要自己去检查..._微信浏览器 window.navigator 获取不到

linuxpgrepgrep_linux命令详解:pgrep命令-程序员宅基地

文章浏览阅读494次。前言经常要查看进程的信息,包括进程的是否已经消亡,通过pgrep来获得正在被调度的进程的相关信息。pgrep通过匹配其程序名,找到匹配的进程重要选项-l 同时显示进程名和PID-o 当匹配多个进程时,显示进程号最小的那个-n 当匹配多个进程时,显示进程号最大的那个注:进程号越大,并不一定意味着进程的启动时间越晚使用说明查看指定名称的进程信息默认只显示PID[root@master~]#pgre..._grep $(pgrep -f $pwd)

企业微信Api-程序员宅基地

文章浏览阅读321次。https://qydev.weixin.qq.com/wiki/index.php?title=%E6%B6%88%E6%81%AF%E7%B1%BB%E5%9E%8B%E5%8F%8A%E6%95%B0%E6%8D%AE%E6%A0%BC%E5%BC%8F

0c400汇编语言地址,DS80C400的Keil C语言编程.doc-程序员宅基地

文章浏览阅读100次。DS80C400的Keil C语言编程摘要:在设计DS80C400网络微控制器的ROM时,一组功能被公开出来,可以在8051汇编、C或Java?程序中访问。DS80C400的ROM可以被视作一个构建C或汇编程序的起跑架,它提供TINI?经过验证的网栈、进程调度器和存储器管理器。简单程序,如网络扬声器,可以用汇编语言轻松实现,更复杂一点的,如HTTP服务器这种需要与文件系统交互的程序,可以使用C语言..._keil 中 far memory type support

推荐文章

热门文章

相关标签