RadLegendControl Scrollbar

[Chris]

In my UWP program there is the potential that a very large number of lines may be drawn on the single chart. This can result in the Legend going down below the bottom of the app, cutting off the remaining items in the legend. This is basically an "excessive" example of the usage of this chart and I'm wanting to make sure it can function effectively when put under this kind of use. I have attached a snip of this chart.

Is there a way to add a scrollbar to the Legend Control so that a user can scroll through the legend? Or should I be looking at a different method for showing the legend?

Note: I am aware that the palette colours are repeating, that's next on my list to resolve.

Thanks for the help in advance.

[Lance | Senior Manager Technical Support]

Hi Chris,

The RadLegendControl already has an internal ScrollViewer because it's based on a ItemsControl (you can review the RadLegendControl source code on GitHub). 

If you're not able to scroll, then there is probably an external component that is letting the legend extend to its full height off-screen (e.g. a parent ScrollViewer). As far as the ItemsControl is concerned there is more than enough vertical space and won't render a scrollbar because there's nothing to scroll to. 

Try setting the RadLegend to an explicit maximum height and you'll see the scrollbar appear when it reaches that upper bound:

<telerikPrimitives:RadLegendControl MaxHeight="500" LegendProvider="{Binding ElementName=chart}" />

Custom ControlTemplate

Other than that, you can create your own custom ControlTemplate (you will find the Style containing ControlTemplate here on GitHub).  For your convenience, here's the entirely of the default style

As you can see, it is a straightforward ItemsControl, which already has an internal ScrollViewer.

<Style TargetType="local:RadLegendControl">
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="Foreground" Value="{ThemeResource TelerikSecondaryForegroundBrush}" />
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <WrapGrid MaximumRowsOrColumns="3"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Rectangle Margin="0 0 2 2" Width="10" Height="10" Fill="{Binding Fill}" Stroke="{Binding Stroke}" StrokeThickness="1"/>
                        <TextBlock Margin="2" Text="{Binding Title}" />
                    </StackPanel>
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:RadLegendControl">
                    <Border Background="{TemplateBinding Background}" Margin="{TemplateBinding Margin}" Padding="{TemplateBinding Padding}">
                        <ItemsControl x:Name="PART_LegendPresenter"
                                      ItemsPanel="{TemplateBinding ItemsPanel}"
                                      ItemTemplate="{TemplateBinding ItemTemplate}"
                                      Margin="10"
                                      VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                      HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                      ItemsSource="{Binding}"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Further Assistance

If you continue to have issues, please open a Support Ticket here and supply your custom code. The development team can review the specifics of that implementation and make recommendations (if you do not have a commercial license, you can post on StackOverflow instead).

I hope I was able to help point you in the right direction.

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik