Make gallery content scrollable

[Joost]

Hi,

I've noticed the gallery items are scrollable when many items are placed. I was wondering how to make the gallery sections/categories scrollable as well. Sometimes in our application we have so many categories they don't fit.

Kind regards

[Martin Ivanov]

Hi Joost,

To achieve your requirement you can extract the ControlTemplate of the RadDiagramToolBox control and wrap the ItemsPresenter that shows the categories in a ScrollViewer. Here is an example in code:

<!-- OTHER XAML HERE -->
<Grid x:Name="hideablePart">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.RenderTransform>
        <TranslateTransform/>
    </Grid.RenderTransform>
    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1,0,0,1" Background="{TemplateBinding Background}" Grid.Row="1" Grid.RowSpan="2"/>
    <Border BorderBrush="#FF848484" BorderThickness="1,1,0,1" Background="{TemplateBinding HeaderBackground}">
        <Border BorderBrush="#FFB5B5B5" BorderThickness="1,1,0,1">
            <ContentControl ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" Foreground="{TemplateBinding Foreground}" FontSize="11" FontFamily="Portable User Interface" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" VerticalAlignment="Center"/>
        </Border>
    </Border>
    <ScrollViewer Margin="2,3" Grid.Row="1">
        <ItemsPresenter />
    </ScrollViewer>
    <telerik:RadButton x:Name="CloseButton" InnerCornerRadius="0" Grid.Row="2" Style="{TemplateBinding CloseButtonStyle}">
        <telerik:RadButton.ToolTip>
            <ToolTip Content="Close"/>
        </telerik:RadButton.ToolTip>
    </telerik:RadButton>
</Grid>
<!-- OTHER XAML HERE -->

I hope that helps.

Regards,
Martin Ivanov
Progress Telerik

[Benedikt]

@Martin could you add a complete example of this? E.g. a kind of complete RadDiagramToolbox example. Thanks a lot!

[Martin Ivanov]

I've added a new answer in this thread with an attached project. I hope it helps.

[Joost]

Thanks Martin, it works great!

[Martin Ivanov]

Hello,

I've attached a small example showing the approach with the custom RadDiagramToolBox ControlTemplate. The template is based on the Fluent theme's template.

Regards,
Martin Ivanov
Progress Telerik

[Benedikt]

Perfect, works great. Thanks a lot!