WPF布局之WrapPanel与StackPanel

WPF布局之WrapPanel与StackPanel转载:https://www.cnblogs.com/Im-Victor/p/10565030.html三.WrapPanelWrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列,当长度或高度不够是就会自动调整进行换行,后续排序按照从上至下或从右至左的顺序进行。Orientation——根据内容自动换行。当Horizontal选项看上去类似于Windows资源管理器的缩略图视图:元素是从左向右排列的,然后自上至下自动换行。Vertical选项看上去类似于Windows资源..

大家好,又见面了,我是你们的朋友全栈君。

转载:https://www.cnblogs.com/Im-Victor/p/10565030.html

三. WrapPanel

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

 Orientation——根据内容自动换行。当 Horizontal选项看上去类似于Windows资源管理器的缩略图视图:元素是从左向右排列的,然后自上至下自动换行。Vertical 选项看上去类似于Windows资源管理器的列表视图:元素是从上向下排列的,然后从左至右自动换行。

   ItemHeight——所有子元素都一致的高度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Height属性等。任何比ItemHeight高的元素都将被截断。

   ItemWidth——所有子元素都一致的宽度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Width属性等。任何比ItemWidth高的元素都将被截断。

 

本次的示例,效果图如下2图,图1是宽度比较小,图2就是拉长了宽度后的结果。大家可以在实际做出来之后,自行拉动窗体的宽度:

 WPF布局之WrapPanel与StackPanel

                图1

 

WPF布局之WrapPanel与StackPanel

                                    图2

 

上面两图的XAML代码实现:

复制代码

<Window x:Class="WpfApp1.WindowWrap"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="WindowWrap" Height="300" Width="400">

    <Grid>

        <WrapPanel  Orientation="Horizontal">

         

                <TextBlock Name="textBlock_CityID" Text="CityID:" />

                <TextBox Name="textBox_CityID" MinWidth="100" />

         

                <TextBlock Name="textBlock_CityName" Text="CityName:" />

                <TextBox Name="textBox_CityName" MinWidth="100" />

         

                <TextBlock Name="textBlock_ZipCode" Text="ZipCode:" />

                <TextBox Name="textBox_ZipCode" MinWidth="100"  />

         

                <TextBlock Name="textBlock_ProvinceID" Text="ProvinceID:" />

                <TextBox Name="textBox_ProvinceID" MinWidth="100"   />

        

                <TextBlock Name="textBlock_DateCreated" Text="DateCreated:"  />

                <TextBox Name="textBox_DateCreated" MinWidth="100"   />

       

                <TextBlock Name="textBlock_DateUpdated" Text="DateUpdated:" />

                <TextBox Name="textBox_DateUpdated" MinWidth="100" />

          

        </WrapPanel>

 

    </Grid>

</Window>

复制代码

WPF布局之WrapPanel与StackPanel

C#代码实现上图示例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

using System;

 

using System.Collections.Generic;

 

using System.Linq;

 

using System.Text;

 

using System.Threading.Tasks;

 

using System.Windows;

 

using System.Windows.Controls;

 

using System.Windows.Data;

 

using System.Windows.Documents;

 

using System.Windows.Input;

 

using System.Windows.Media;

 

using System.Windows.Media.Imaging;

 

using System.Windows.Shapes;

 

  

 

namespace WpfApp1

 

{

 

    /// <summary>

 

    /// WindowWrap.xaml 的交互逻辑

 

    /// </summary>

 

    public partial class WindowWrap : Window

 

    {

 

        public WindowWrap()

 

        {

 

            InitializeComponent();

 

        }

 

  

 

        private void btnAddByCode_Click(object sender, RoutedEventArgs e)

 

        {

 

            WrapPanel wp = new WrapPanel();

 

            //把wp添加为窗体的子控件

 

            this.Content = wp;

 

            wp.Margin = new Thickness(0, 0, 0, 0);

 

            wp.Background = new SolidColorBrush(Colors.White);

 

            //遍历增加TextBlock

 

            TextBlock block;

 

            for (int i = 0; i <= 10; i++)

 

            {

 

                block = new TextBlock();

 

                block.Text = "后台代码添加控件:" + i.ToString();

 

                block.Margin = new Thickness(10, 10, 10, 10);

 

                block.Width = 160;

 

                block.Height = 30;

 

                wp.Children.Add(block);

 

            }      

 

  

 

        }

 

    }

 

}

  

四. StackPanel

StackPanel就是将控件按照行或列来顺序排列,但不会换行。通过设置面板的Orientation属性设置了两种排列方式:横排(Horizontal默认的)和竖排(Vertical)。纵向的StackPanel默 认每个元素宽度与面板一样宽,反之横向亦然。如果包含的元素超过了面板空间,它只会截断多出的内容。 元素的Margin属性用于使元素之间产生一定得间隔,当元素空间大于其内容的空间时,剩余空间将由HorizontalAlignment和 VerticalAlignment属性来决定如何分配。

本示例要实现的效果如下2图,图1是横排,图2是竖排。

 WPF布局之WrapPanel与StackPanel

                                    图1

 WPF布局之WrapPanel与StackPanel

                           图2

上两图的XAML代码实现:

复制代码

<Window x:Class="WpfApp1.WindowStack"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="WindowStack" Height="400" Width="500">

    <Grid>

        <StackPanel Name="stackPanel" Margin="0,0,0,0" Background="White" Orientation="Vertical">

            <Button Content="第一个"/>

            <Button Content="第二个"/>

            <Button Content="第三个"/>

            <Button Content="第四个"/>

            <Button Content="第五个,改变排列方式" Click="Button_Click"/>

          <Button Content="后台代码实现" Click="Button_Click_1"/>

 

        </StackPanel>

 

    </Grid>

</Window>

复制代码

 

WPF布局之WrapPanel与StackPanel

上图示例的C#代码实现:

复制代码

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Shapes;

 

namespace WpfApp1

{

    /// <summary>

    /// WindowStack.xaml 的交互逻辑

    /// </summary>

    public partial class WindowStack : Window

    {

        public WindowStack()

        {

            InitializeComponent();

          

        }

 

        private void Button_Click(object sender, RoutedEventArgs e)

        {

            stackPanel.Orientation=Orientation.Horizontal;

        }

        private void StackPanels()

        {

            StackPanel sp = new StackPanel();

            //把sp添加为窗体的子控件

            this.Content = sp;

            sp.Margin = new Thickness(0, 0, 0, 0);

            sp.Background = new SolidColorBrush(Colors.White);

            sp.Orientation = Orientation.Vertical;

            //Button1

            Button b1 = new Button();

            b1.Content = "后台代码,第一个";

            sp.Children.Add(b1);

 

            //Button2

            Button b2 = new Button();

            b2.Content = "后台代码,第二个";

            sp.Children.Add(b2);

 

            //Button3

            Button b3 = new Button();

            b3.Content = "后台代码,第三个";

            sp.Children.Add(b3);

 

        }

 

        private void Button_Click_1(object sender, RoutedEventArgs e)

        {

            StackPanels();

        }

    }

}

复制代码

注: 当把StackPanel的FlowDirection属性设置为RightToLeft,Orientation属性设置为Horizontal,StackPanel将从右向左排列元素

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/163321.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • CNN 卷积神经网络结构

    CNN 卷积神经网络结构CNNcnn每一层会输出多个featuremap,每个FeatureMap通过一种卷积滤波器提取输入的一种特征,每个featuremap由多个神经元组成,假如某个featuremap的shape是m*n,则该featuremap有m*n个神经元。对于卷积层会有kernel,记录上一层的featuremap与当前层的卷积核的权重,因此kernel的shape为(上一层feature

  • 华为P40怎么解账号锁P40Pro忘记密码ID账号锁解除方案开机设备解锁帐号软件使用方法

    华为P40怎么解账号锁P40Pro忘记密码ID账号锁解除方案开机设备解锁帐号软件使用方法​今天带来一台用户华为mate30手机强制清除华为账号锁案例分享,这个台手机是用户公司手机,由于前使用者离职后未能退出手机的华为账号和锁屏密码,导致手机无法使用。自己通过简单的恢复出厂设置后,发现手机有华为账号锁无法激活手机,这才联系到刷机爱好者技术人员,给予远程强制刷机移除华为mate30的账号锁。在此提醒广大用户,登录的华为账号建议绑定经常使用的手机号码,防止无法找回密码从而到时手机无法使用。在刷机解锁过程中需要准备以下工具:准备windwos系统电脑一台,有条件的用户可以找台配置.

  • origin/HEAD -> origin/master 这个分支是干嘛的啊

    origin/HEAD -> origin/master 这个分支是干嘛的啊

    2021年10月22日
  • Map和Set的区别_list与set的区别

    Map和Set的区别_list与set的区别目录一、简述二、Map三、Set四、Set和Map区别一、简述Set和Map主要的应用场景在于数据重组和数据储存。Set是一种叫做集合的数据结构,Map是一种叫做字典的数据结构。集合(Set):ES6新增的一种新的数据结构,类似于数组,成员唯一(内部元素没有重复的值)。且使用键对数据排序即顺序存储。Set本身是一种构造函数,用来生成Set数据结构。Set对象允许你储存任何类型的唯一值,无论是原始值或者是对象引用。二、Ma…

  • 上delloc 无呼叫 故障排除 笔记[通俗易懂]

    上delloc 无呼叫 故障排除 笔记

  • 3.vue生命周期钩子函数有哪些?(vue生命周期的理解)

    定义:vue的生命周期是指vue实例从初始化创建到实例销毁的过程。期间会有8个钩子函数的调用。 vue的钩子函数图解: vue的钩子函数使用总结:1、beforeCreate(创建前):beforeCreate钩子函数,这个时候,vue实例的挂载元素$el和数据对象data都为undefined,还未初始化。无法访问到数据和真实的dom和data中的数据,可以在这里面使用l…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号