Is there a way to paginate or scrollview the ContentControl ?

[LiinxTV]

Hi,

i have an issue with your code:

http://image.noelshack.com/fichiers/2021/46/1/1636997938-error.png

is there a way to scroll when there are too many items or paginate ?

[CSharpDesignPro]

@LiinxTV

Hi,

Go to MainWindow and embed the ContentControl Grid inside the ScrollViewer with VerticalScrollBarVisibility property set to "auto".

        <ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Column="3" Grid.Row="3">
            
            <Grid Grid.Row="2"
                      Grid.Column="3"
                      Grid.RowSpan="2"
                      Background="Transparent">

                <ContentControl x:Name="Pages"
                                            Content="{Binding SelectedViewModel}" />

            </Grid>
            
        </ScrollViewer>

I hope this helps.

[LiinxTV]

Hi,

It doesn't work, it don't show more elements,

In the HomeViewModel ObservableCollection i have this:

new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }, new HomeItems { HomeName = "This PC", HomeImage = @"Assets/pc_icon.png" }

and it look like this:

http://image.noelshack.com/fichiers/2021/46/2/1637080730-image-2021-11-16-173851.png

As you can see, i have more than 3*5 items.

[CSharpDesignPro]

@LiinxTV

Set the "Height" of the ContentControl in the MainWindow. The height depends on the number of controls added to the ContentControl.

Also, add Grid "RowSpan" count to the ScrollViewer.

    <ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Column="3" Grid.Row="3" Grid.RowSpan="3">
        
        <Grid Grid.Row="2"
              Grid.Column="3"
              Grid.RowSpan="2"
              Background="Transparent">

            <ContentControl x:Name="Pages"
                            Content="{Binding SelectedViewModel}"
                            Height="2000" />

        </Grid>
        
    </ScrollViewer>

Go to Home View and set the Height of the UserControl

d:DesignHeight="2000"

Set the VerticalAlignment and Margin of the ItemsControl.

  <ItemsControl ItemsSource="{Binding HomeSourceCollection}"
                Height="350"
                Width="650"
                VerticalAlignment="Top"
                HorizontalAlignment="Center"
                Margin="0,70,0,0">

[LiinxTV]

Thanks, it works !

But for exemple now if i go on Downloads, the pane is scrollable even if there are no too many items

Is there a wav to make the box scrollable if Observable collection size is > 15 ?

[LiinxTV]

Hi,

Do you have a fix for that ?