Wrappanel 和滚动查看器问题

Question

我需要显示Buttons，用户可以使用它来添加控件。 按钮按组进行分类。这是我拥有的 XAML -

<ScrollViewer
    VerticalScrollBarVisibility="Auto">
    <GroupBox
        Name="maingroup"
        Header="Click To Add Controls"
        BorderBrush="Transparent">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition
                    Height="*" />
                <RowDefinition
                    Height="90" />
            </Grid.RowDefinitions>

            <GroupBox
                Grid.Row="0"
                Name="groupVarControls"
                Header="{Binding Path=GroupBoxHeaderText, Mode=OneWay}">
                <ScrollViewer
                    HorizontalScrollBarVisibility="Auto"
                    VerticalScrollBarVisibility="Hidden">
                    <WrapPanel
                        Margin="7,7,0,0"
                        AllowDrop="False">
                        <syncfusion:RibbonButton
                            SizeForm="Large"
                            Name="BarControl"
                            LargeIcon="Images\Bar.png"
                            Label="Bar"
                            AllowDrop="True">
                        </syncfusion:RibbonButton>

                     <!-- 10 More buttons -->

                    </WrapPanel>
                </ScrollViewer>
            </GroupBox>

            <GroupBox
                Grid.Row="1"
                Name="groupVarControls2"
                Visibility="{Binding Path=GroupBoxVisibility, Mode=OneWay}"
                Header="Click to Add control">
                <ScrollViewer
                    VerticalScrollBarVisibility="Hidden"
                    HorizontalScrollBarVisibility="Auto">
                    <WrapPanel
                        Margin="7,7,0,0"
                        AllowDrop="False">
                        <syncfusion:RibbonButton
                            SizeForm="Large"
                            Name="ClockControl"
                            AllowDrop="False"
                            LargeIcon="Images\Clock.png"
                            Label="Clock"
                            Click="ClockControl_Click" />

                      <!-- More buttons -->

                    </WrapPanel>
                </ScrollViewer>
            </GroupBox>
        </Grid>
    </GroupBox>
</ScrollViewer>

我想要一个对于 WrapPanel 和单独的水平 ScrollBar 通用的垂直 ScrollBar。由于此 XAML 滚动条无法正确显示，ScrollViewer 会导致换行被“禁用”，它只会将我的控件留在单个行（或列）中code>)，并立即使用 ScrollBar。

我无法为 WrapPanel 提供固定的 widht，因为此控件将显示在 DockPanel（类似于 VS 工具箱）和用户中可以接受它。

有什么想法吗？

Answer 1

此代码将在需要时显示一个垂直滚动条和两个水平滚动条。在代码中，您需要将环绕面板的 MinWidth 设置为最宽子面板的宽度。您可能可以在处理用户添加或删除控件时的代码中轻松地做到这一点。

<ScrollViewer 
    VerticalScrollBarVisibility="Auto">
    <StackPanel>
        <GroupBox Header="Box 1">
            <ScrollViewer 
                VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto">
                <WrapPanel 
                    MinWidth="200"
                    Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollViewer}}, Path=ActualWidth}">
                    <Button Width="200" Height="50" />
                    <Button Width="150" Height="50" />
                    <Button Width="160" Height="50" />
                    <Button Width="170" Height="50" />
                    <Button Width="180" Height="50" />
                </WrapPanel>
            </ScrollViewer>
        </GroupBox>
        <GroupBox Header="Box 2">
            <ScrollViewer 
                VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto">
                <WrapPanel 
                    MinWidth="200"
                    Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollViewer}}, Path=ActualWidth}">
                    <Button Width="200" Height="50" />
                    <Button Width="150" Height="50" />
                    <Button Width="160" Height="50" />
                    <Button Width="170" Height="50" />
                    <Button Width="180" Height="50" />
                </WrapPanel>
            </ScrollViewer>
        </GroupBox>
    </StackPanel>
</ScrollViewer>