WPF入门教程系列七——布局之WrapPanel与StackPanel（二）

矫情吗；* 2024-03-17 10:45 58阅读 0赞

**三. WrapPanel**

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

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

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

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

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

![9f728524b6fbbc42814746f23508ab3b.png][]

图1

![6c8c23863145c3dfc0b4e2d206e4d523.png][]

图2

上面两图的XAML代码实现：

![815ca432aa1758604fef15aa0157e638.gif][]

![1e71056c98addb22c0adef1f53499a33.gif][]

![92a1da9045333f57df514b5f098c560c.png][]

C\#代码实现上图示例：

![84827b0ebf2d7d635a9d2f6c9610bccf.gif][]

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);
    
                }       
    
     
    
            }
    
        }
    
    }

![f0b12f1128f224a95afbe26bf3358564.gif][]

**四.** **StackPanel**

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

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

![89473d05e90dc9ca6855b76c9a0ba08c.png][]

图1

![0eb0da1ac1b6fddd2147e5046202afc5.png][]

图2

上两图的XAML代码实现：

![83832ab55926f8650eac3aa61ff17af2.gif][]

![1e71056c98addb22c0adef1f53499a33.gif][]

![14b8da67b7e023aace7afd6ae7722523.png][]

上图示例的C\#代码实现：

![0312d37757f5587e9203e2e50ede6248.gif][]

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();
    
            }
    
        }
    
    }

![7b4bda908436cd61f05be3a369a08e44.gif][]

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

[9f728524b6fbbc42814746f23508ab3b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/c38d06d467a64511a2eb26a0b721fe6f.png
[6c8c23863145c3dfc0b4e2d206e4d523.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/4aa4bb6bb355419ebb93a1dbd97c26be.png
[815ca432aa1758604fef15aa0157e638.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/327a1e8f9b724bbca67f30232c7ec651.png
[1e71056c98addb22c0adef1f53499a33.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/39d873d3021645489980e6cd6ffb7fc7.png
[92a1da9045333f57df514b5f098c560c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/ae97660824ba45c39298d89cc35b369e.png
[84827b0ebf2d7d635a9d2f6c9610bccf.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/21409e18e239471d88533e0a854e9384.png
[f0b12f1128f224a95afbe26bf3358564.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/8cbabad6de644290ab6687ff36faf070.png
[89473d05e90dc9ca6855b76c9a0ba08c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/b0e244ec30154905b33603552fc7eac3.png
[0eb0da1ac1b6fddd2147e5046202afc5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/62c5229dc9f443709c3c15e37c3a70cb.png
[83832ab55926f8650eac3aa61ff17af2.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/70b21f43d16943199243482d8c95889a.png
[14b8da67b7e023aace7afd6ae7722523.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/8aba659ef483429e8992242a80734bc4.png
[0312d37757f5587e9203e2e50ede6248.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/8a33bcdf5e8943e5a0a8ae18ecabe660.png
[7b4bda908436cd61f05be3a369a08e44.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/17/20da1734aee94439abc94707d99041fe.png