iis服务器助手广告广告
返回顶部
首页 > 资讯 > 后端开发 > ASP.NET >WPF使用WrapPanel环绕面板布局
  • 287
分享到

WPF使用WrapPanel环绕面板布局

2024-04-02 19:04:59 287人浏览 安东尼
摘要

WrapPanel:环绕面板 WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列,当长度或高度不够时就会自动调整进行换行,后续排序按照从上至下或从右至左的顺序进行。 O

WrapPanel:环绕面板

WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列,当长度或高度不够时就会自动调整进行换行,后续排序按照从上至下或从右至左的顺序进行。

  • Orientation——根据内容自动换行。当Orientation属性的值设置为 Horizontal:元素是从左向右排列的,然后自上至下自动换行。当Orientation属性的值设置为Vertical:元素是从上向下排列的,然后从左至右自动换行。
  • ItemHeight——所有子元素都一致的高度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Height属性等。任何比ItemHeight高的元素都将被截断。
  • ItemWidth——所有子元素都一致的宽度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Width属性等。任何比ItemWidth高的元素都将被截断。

1、Orientation属性的值设置为 Horizontal

示例效果图如下2图所示,图1是窗体宽度较小时候的效果,图2是窗体宽度拉大以后的效果

图1

图2

使用XAML代码实现:

<Window x:Class="WPFDemo.MainWindow"
        xmlns="Http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WrapPanel面板" Height="237" Width="525" windowstartupLocation="CenterScreen">
    <WrapPanel Orientation="Horizontal">
        <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>

2、Orientation属性的值设置为Vertical

示例效果图如下2图所示,图1是窗体高度较大时候的效果,图2是窗体高度较小时的效果

图1

图2

使用XAML代码实现:

<Window x:Class="WpfDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WrapPanel面板" Height="237" Width="525" WindowStartupLocation="CenterScreen">
    <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>
    </WrapPanel>    
</Window>

到此这篇关于WPF使用WrapPanel环绕面板布局的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: WPF使用WrapPanel环绕面板布局

本文链接: https://www.lsjlt.com/news/140493.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • WPF使用WrapPanel环绕面板布局
    WrapPanel:环绕面板 WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列,当长度或高度不够时就会自动调整进行换行,后续排序按照从上至下或从右至左的顺序进行。 O...
    99+
    2024-04-02
  • WPF使用Canvas画布面板布局
    Canvas:画布面板 画布,用于完全控制每个元素的精确位置。他是布局控件中最为简单的一种,直接将元素放到指定位置,主要来布置图面。使用Canvas,必须指定一个子元素的位置(相对于...
    99+
    2024-04-02
  • WPF使用StackPanel栈面板布局
    应用程序界面设计中,合理的元素布局至关重要,它可以方便用户使用,并将信息清晰合理地展现给用户。WPF提供了一套功能强大的工具-面板(Panel),来控制用户界面的布局。你可以使用这些...
    99+
    2024-04-02
  • WPF使用DockPanel停靠面板布局
    DockPanel:停靠面板 DockPanel定义一个区域,在此区域中,您可以使子元素通过描点的形式排列,这些对象位于 Children 属性中。停靠面板类似于WinForm中控件...
    99+
    2024-04-02
  • WPF使用Grid网格面板布局
    Grid:网格面板 Grid顾名思义就是“网格”,以表格形式布局元素,对于整个面板上的元素进行布局,它的子控件被放在一个一个事先定义好的小格子里面,整齐配列。...
    99+
    2024-04-02
  • WPF常见布局面板怎么使用
    本文小编为大家详细介绍“WPF常见布局面板怎么使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“WPF常见布局面板怎么使用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。常见的几个布局面板1.StackPanel...
    99+
    2023-06-29
  • WPF中怎么使用Grid网格面板布局
    这篇文章主要讲解了“WPF中怎么使用Grid网格面板布局”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“WPF中怎么使用Grid网格面板布局”吧!Grid:网格面板Grid顾名思义就是“网格”...
    99+
    2023-06-29
  • WPF常见布局面板用法及介绍
    目录常见的几个布局面板1.StackPanel面板2.WarpPanel面板3.DockPanel面板5.UniformGrid面板6.Canvas面板常见的几个布局面板 1.St...
    99+
    2024-04-02
  • 怎么使用flex布局轻松实现页面布局
    小编给大家分享一下怎么使用flex布局轻松实现页面布局,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!直接上代码:上中下布局:<!DOCTYPE h...
    99+
    2023-06-08
  • HTML教程:如何使用Grid布局进行页面布局
    从过去的表格布局到现在的Flex布局,CSS在页面布局方面一直发展和进化。而现在,CSS Grid布局成为了一种强大且灵活的布局方法。在本教程中,我们将学习如何使用CSS Grid布局来创建复杂且漂亮的页面布局。CSS Grid布局是一个二...
    99+
    2023-10-21
    html 页面布局 Grid布局
  • 如何使用HTML和CSS实现一个简单的折叠面板布局
    折叠面板是网页设计中常用的布局之一,它可以将大量的内容以折叠的形式呈现在页面上,使得页面结构更加清晰和紧凑。本文将详细介绍如何使用HTML和CSS实现一个简单的折叠面板布局,并提供具体的代码示例。HTML结构设计首先,我们需要设计合适的HT...
    99+
    2023-10-21
    CSS html 折叠面板
  • WPF 第三方控件学习使用—可停靠布局控件(AvalonDock)
    AvalonDock 是 WPF 中的一个第三方控件,它提供了可停靠布局的功能,可以方便地实现类似 Visual Studio 的布...
    99+
    2023-09-28
    WPF
  • iOS界面布局简化UIStackView使用详解
    目录前言UIStackView布局思想distribution:alignment:UIStackView用法初始化添加、删除子视图排列方向布局方式对齐方式间距前言 在过去iOS页面...
    99+
    2024-04-02
  • HTML布局技巧:如何使用clear属性进行页面布局修正
    在网页开发过程中,经常会遇到布局问题,尤其是在使用浮动元素时。浮动元素在脱离文档流后,可能会导致父元素高度塌陷,从而影响整个页面布局。为了解决这个问题,我们可以使用clear属性来进行布局修正。清除浮动的常用方法是使用clear属性,其中常...
    99+
    2023-10-21
  • 怎么使用DIV标签进行页面布局
    这篇文章主要讲解了“怎么使用DIV标签进行页面布局”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么使用DIV标签进行页面布局”吧!DreamWeaver插...
    99+
    2024-04-02
  • Android使用表格布局设计注册界面
    Android中使用表格布局设计注册界面,供大家参考,具体内容如下 注册页面包含:用户名,密码,确认密码,验证码。验证码使用一个封装好的工具类生成的,可以直接使用。效果图如下所示。没...
    99+
    2024-04-02
  • HTML布局技巧:如何使用定位布局进行页面绝对定位控制
    在Web开发中,页面布局是一个非常关键的要素。定位布局是一种常用的布局方式,可以让开发者更加灵活地控制元素在页面中的位置。本文将介绍如何使用定位布局进行页面绝对定位控制,并提供具体的代码示例。一、定位布局概述定位布局是指根据元素的位置属性来...
    99+
    2023-10-21
    HTML布局 定位布局 绝对定位控制
  • HTML教程:如何使用Flexbox进行页面布局
    引言:在开发网页时,页面布局是一个至关重要的部分。为了实现自适应、灵活性强的布局方式,Flexbox成为了最受欢迎的解决方案之一。本教程将介绍Flexbox的基本概念和使用方法,并提供具体的代码示例供读者参考。一、什么是Flexbox?Fl...
    99+
    2023-10-21
    HTML教程:Flexbox布局
  • 如何使用div配合id或class布局html页面
    这篇文章主要讲解了“如何使用div配合id或class布局html页面”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何使用div配合id或class布局h...
    99+
    2024-04-02
  • 如何使用CSS3制作一个简单页面的布局
    这篇文章主要讲解了“如何使用CSS3制作一个简单页面的布局”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何使用CSS3制作一个简单页面的布局”吧! ...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作