CODEWITHSUNDEEP
c#wpfscrollviewer.netwrappanel
akjoshi
akjoshi

Reputation: 15772

Wrappanel and scrollviewer issue

I need to display Buttons, 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 ScrollBar common for both WrapPanel's and individual horizontal ScrollBar's. 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 WrapPanel's as this control will be displayed in a DockPanel(similar to VS toolbox) and user can cnage it.

Any ideas?

Upvotes: 1

Views: 7197

Answers (1)

Wallstreet Programmer
Wallstreet Programmer

Reputation: 9677

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>

Upvotes: 2

Related Questions