2021-08-08 WPF控件专题 WrapPanel 控件详解[通俗易懂]

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

1.WrapPanel 控件介绍

流面板 子元素按顺序排列，如果按水平方向:从左到右，超出部分，自动换行到下一行
垂直 从上到下， 下一列

排列方向：Orientation ItemWidth ItemHeight

调整面板的尺寸时，内部子元素的布局–自动调整

弥补StackPanel的不足

StackPanel与WrapPanel结合使用

2.具体案例

<Border BorderBrush="Red" BorderThickness="3" CornerRadius="5" >
    <StackPanel>
        <WrapPanel Name="wpPanels2" Margin="0,0,0,20">
            
        </WrapPanel>
        <WrapPanel Name="wpPanels" Orientation="Vertical" ItemHeight="30" ItemWidth="60"  Height="300" >
            <!--<Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>
        <Button>btn1</Button>-->
        </WrapPanel>
    </StackPanel>
</Border>

private void Window_Loaded(object sender, RoutedEventArgs e)
{ 
   
    for (int i = 1; i <= 100; i++)
    { 
   
        Button btn = new Button();
        btn.Content = "btn" + i.ToString("00") + "号";
        btn.Background = new SolidColorBrush(Colors.Gray);
       // btn.Name = "btn" + i;
        btn.Margin = new Thickness(2, 2, 0, 0);
        wpPanels.Children.Add(btn);
    }
    for (int i = 1; i <= 20; i++)
    { 
   
        Button btn = new Button();
        btn.Content = "btn" + i.ToString("00") + "号";
        btn.Background = new SolidColorBrush(Colors.Gray);
        //btn.Name = "btn" + i;
        btn.Margin = new Thickness(2, 2, 0, 0);
        wpPanels2.Children.Add(btn);
    }
}