Wrappanel and scrollviewer problem

Question

Hi,

I need to display buttons in which user can use to add controls. Buttons are categorized in groups. Here is the XAML I am having -

<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>

I want a vertical scroll bar common for both wrappanels and individual horizontal scrollbars. With this XAML scrollbars are not coming correctly, ScrollViewer causes the wrapping to be "disabled", it just leaves my controls in a single row (or column), and uses a scrollbar right away.

I can't give a fixed widht to wrappanels as this control will be displayed in a dockpanel(similar to VS toolbox) and user can cnage it.

Any ideas?

Answer 1

This code will show one vertical scrollbar and two horizontal scrollbars when needed. In your code you need to set the MinWidth for the wrap panels to the width of the widest child. You probably can do that easily in your code that handles when a user adds or removes a control.

<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>