This is a migrated thread and some comments may be shown as answers.

Make gallery content scrollable

3 Answers 23 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Joost
Top achievements
Rank 1
Joost asked on 09 Apr 2018, 02:41 PM

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

3 Answers, 1 is accepted

Sort by
1
Martin Ivanov
Telerik team
answered on 12 Apr 2018, 08:51 AM
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
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Benedikt
Top achievements
Rank 1
Iron
commented on 09 May 2021, 03:59 PM

@Martin could you add a complete example of this? E.g. a kind of complete RadDiagramToolbox example. Thanks a lot!
Martin Ivanov
Telerik team
commented on 12 May 2021, 08:31 PM

I've added a new answer in this thread with an attached project. I hope it helps.
0
Joost
Top achievements
Rank 1
answered on 13 Apr 2018, 03:22 PM

Thanks Martin, it works great!

1
Martin Ivanov
Telerik team
answered on 12 May 2021, 08:30 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Benedikt
Top achievements
Rank 1
Iron
commented on 13 May 2021, 08:56 AM

Perfect, works great. Thanks a lot!
Tags
Diagram
Asked by
Joost
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Joost
Top achievements
Rank 1
Share this question
or