Wrappanel和scrollviewer问题

Question

我需要显示Buttons，用户可以使用它来添加控件。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导致包装被“禁用”，它只把我的控件留在一个row (或column)中，并立即使用一个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>