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

Legend scrollviewer

1 Answer 97 Views

Chart

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

This question is locked. New answers and comments are not allowed.

Nick Wood asked on 22 Mar 2010, 04:40 AM

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

1 Answer, 1 is accepted

answered on 24 Mar 2010, 01:57 PM

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.