Legend scrollviewer

[Nick Wood]

Hello

I am trying to allow the legend to be a static width and scroll when the number of items are too many to fit. I have the following so far:

<telerikChart:RadChart x:Name="RadChart1" UseDefaultLayout="False">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="1*" />
                                        <RowDefinition Height="9*" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="9*" />
                                        <ColumnDefinition Width="1*" />
                                    </Grid.ColumnDefinitions>

                                    <Grid.Resources>
                                        <ResourceDictionary>
                                            <Style x:Key="MyCustomLegendStyle" TargetType="Chart:ChartLegend">
                                                <Setter Property="ItemsPanel" >
                                                    <Setter.Value>
                                                        <ItemsPanelTemplate>

                                                                <StackPanel Orientation="Vertical" />

                                                        </ItemsPanelTemplate>
                                                    </Setter.Value>
                                                </Setter>
                                            </Style>
                                        </ResourceDictionary>
                                    </Grid.Resources>

                                <ScrollViewer Grid.Row="1" Grid.Column="1" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto">
                                    <Chart:ChartLegend x:Name="ChartLegend1" Header="Legend"
                                                     Style="{StaticResource MyCustomLegendStyle}" HorizontalAlignment="Left"/>
                                    </ScrollViewer>

                                    <Chart:ChartArea x:Name="ChartArea1" Grid.Row="1" Grid.Column="0" LegendName="ChartLegend1"/>

                                    <Chart:ChartTitle Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" x:Name="ChartTitle1"
                                VerticalAlignment="Top" HorizontalAlignment="Left"/>
                                </Grid>
                            </telerikChart:RadChart>

the issue is that there is never any data displayed. Any ideas on how to do this?

Nick

[Velin]

Hi Nick Wood,

Here is how this could be done:

<UserControl x:Class="X4Solution.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
    xmlns:telerikCharting="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">
        <telerik:RadChart x:Name="RadChart1" UseDefaultLayout="False">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*" />
                    <RowDefinition Height="9*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="9*" />
                    <ColumnDefinition Width="1*" />
                </Grid.ColumnDefinitions>

                <Grid.Resources>
                    <ResourceDictionary>
                        <Style x:Key="MyCustomLegendStyle" TargetType="telerikCharting:ChartLegend">
                            <Setter Property="Template" >
                                <Setter.Value>
                                    <ControlTemplate TargetType="telerikCharting:ChartLegend">
                                        <Border Margin="{TemplateBinding Padding}"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}" >
                                            <Grid Margin="{TemplateBinding Padding}">
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="Auto" />
                                                    <RowDefinition Height="*" />
                                                </Grid.RowDefinitions>
                                                <ContentControl Foreground="{TemplateBinding Foreground}"
                                            Content="{TemplateBinding Header}"/>
                                                <ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto" >
                                                    <ItemsPresenter />
                                                </ScrollViewer>
                                            </Grid>
                                        </Border>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="ItemsPanel" >
                                <Setter.Value>
                                    <ItemsPanelTemplate>
                                        <StackPanel Orientation="Vertical" />
                                    </ItemsPanelTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </ResourceDictionary>
                </Grid.Resources>

                <telerikCharting:ChartLegend x:Name="ChartLegend1" Header="Legend" Grid.Column="1" Grid.RowSpan="2"
                     Style="{StaticResource MyCustomLegendStyle}" HorizontalAlignment="Left"/>

                <telerikCharting:ChartArea x:Name="ChartArea1" Grid.Row="1" Grid.Column="0" LegendName="ChartLegend1"/>

                <telerikCharting:ChartTitle Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" x:Name="ChartTitle1"
                                VerticalAlignment="Top" HorizontalAlignment="Left"/>
            </Grid>
        </telerik:RadChart>
        <Button Content="click" Width="100" Height="50" Click="Button_Click"  />
    </Grid>
</UserControl>

Kind regards,
Velin
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.