关于Wpf 布局问题WrapPanel换行后占用整行

zaaserz 2020-02-04 04:49:54

在项目中遇到一个问题，想在展示界面添加一个动态添加控件的功能。

因为不知道控件数量所以使用了WrapPanel自动换行，但在换行到新行时WrapPanel会占用整行，然后就让界面看起来很不友好，

是否可以解决WrapPanel换行后不占用整行的问题，或者使用其余手段将添加控件“浮动”至WrapPanel真正布局后面
代码如下

  <WrapPanel   Background="White" Orientation="Horizontal">

            <WrapPanel.Resources>

                 <Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">

                     <Setter Property="Cursor" Value="Hand"/>

                 </Style>

             </WrapPanel.Resources>

            <!--展示-->

            <ItemsControl  ItemsSource="{Binding CommunicationModels}"

                           ScrollViewer.HorizontalScrollBarVisibility="Disabled">

                <ItemsControl.ItemsPanel>

                    <ItemsPanelTemplate>

                        <WrapPanel> 

                        </WrapPanel> 

                        </ItemsPanelTemplate> 

                    </ItemsControl.ItemsPanel>

                <ItemsControl.ItemTemplate>

                    <DataTemplate>

                        <WrapPanel Orientation="Horizontal">

                            <Button Margin="5" Height="80" Width="130">

                                <Button.Content>

                                    <GroupBox  Height="80" Width="130"

                                                Background="#FF5696D8" 

                                                silver:GroupBoxHelper.HeaderPadding="0">

                                        <GroupBox.Header>

                                            <StackPanel Orientation="Horizontal">

                                                <TextBlock  Background="{x:Null}"

                                                            Text="{Binding DeviceId, StringFormat=Id：{0}}" />

                                            </StackPanel>

                                        </GroupBox.Header>

                                        <GroupBox.Content>

                                            <StackPanel Orientation="Vertical">

                                                <TextBlock Height="25" VerticalAlignment="Top" 

                                                           Background="{x:Null}"

                                                           Text="{Binding SerialPort.PortName,StringFormat=串口号：{0}}"/>

                                                <TextBlock Height="25" VerticalAlignment="Top" 

                                                           Background="{x:Null}"

                                                           Text="{Binding SerialPort.BaudRate,StringFormat=波特率：{0}}"/>

                                            </StackPanel>

                                        </GroupBox.Content>

                                    </GroupBox>



                                </Button.Content>

                            </Button> 

                        </WrapPanel>

                    </DataTemplate>

                </ItemsControl.ItemTemplate>

            </ItemsControl> 

            <!--添加按钮-->

            <Button Margin="5"  

                    Command="{Binding AddDeviceCommand}">

                <Button.Content>

                    <Grid Height="80" Width="130" Background="#FF5696D8" >

                        <TextBlock 

                            FontSize="35"

                            HorizontalAlignment="Center" VerticalAlignment="Center">

                            ＋

                        </TextBlock>

                    </Grid>

                </Button.Content>

            </Button> 

        </WrapPanel>