Find the attachment representing the requirement.
Here's one way of going about it:
<UserControl.Resources> <Style x:Key="popupLegend" TargetType="igChart:XamWebChart"> <Style.Setters> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="igChart:XamWebChart"> <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <Grid x:Name="RootElement" Background="{TemplateBinding Background}" Margin="{TemplateBinding Padding}" > <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <!--<ColumnDefinition Width="Auto" MaxWidth="200"/>--> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid x:Name="CaptionPanel" Grid.Row="0" Grid.Column="0"/> <Grid x:Name="ScenePanel" Grid.Column="0" Grid.Row="1"/> <Grid x:Name="LegendPanel" Opacity="0" Margin="0,20,0,0" MaxWidth="200" Grid.Row="1" VerticalAlignment="Top" HorizontalAlignment="Right"/> <local:RolloverPanel HorizontalAlignment="Right" Grid.Row="1" VerticalAlignment="Top" > <local:RolloverPanel.MouseEnterStoryBoard> <Storyboard> <DoubleAnimation Storyboard.TargetName="LegendPanel" Storyboard.TargetProperty="Opacity" To="1.0" Duration="0:0:0.2" /> </Storyboard> </local:RolloverPanel.MouseEnterStoryBoard> <local:RolloverPanel.MouseLeaveStoryBoard> <Storyboard> <DoubleAnimation Storyboard.TargetName="LegendPanel" Storyboard.TargetProperty="Opacity" To="0.0" Duration="0:0:0.2" /> </Storyboard> </local:RolloverPanel.MouseLeaveStoryBoard> <TextBlock x:Name="legendText" Opacity=".5" Text="* Legend" Height="20" /> </local:RolloverPanel> </Grid> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style.Setters> </Style> </UserControl.Resources> <Grid x:Name="LayoutRoot" Background="White"> <igChart:XamWebChart x:Name="theChart" Style="{StaticResource popupLegend}" > <igChart:XamWebChart.Legend> <igChart:Legend Width="100" BorderBrush="Black" BorderThickness="1"/> </igChart:XamWebChart.Legend> <igChart:XamWebChart.Series> <igChart:Series ChartType="Column" > <igChart:Series.DataPoints> <igChart:DataPoint Label="A" Value="1" /> <igChart:DataPoint Label="B" Value="2" /> <igChart:DataPoint Label="C" Value="3" /> </igChart:Series.DataPoints> </igChart:Series> </igChart:XamWebChart.Series> </igChart:XamWebChart> </Grid>
With code behind:
public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); } } public class RolloverPanel : ContentControl { public static readonly DependencyProperty MouseEnterStoryboardProperty = DependencyProperty.Register( "MouseEnterStoryboard", typeof(Storyboard), typeof(RolloverPanel), new PropertyMetadata(null)); public Storyboard MouseEnterStoryBoard { get { return (Storyboard)GetValue(MouseEnterStoryboardProperty); } set { SetValue(MouseEnterStoryboardProperty, value); } } public static readonly DependencyProperty MouseLeaveStoryboardProperty = DependencyProperty.Register( "MouseLeaveStoryboard", typeof(Storyboard), typeof(RolloverPanel), new PropertyMetadata(null)); public Storyboard MouseLeaveStoryBoard { get { return (Storyboard)GetValue(MouseLeaveStoryboardProperty); } set { SetValue(MouseLeaveStoryboardProperty, value); } } public RolloverPanel() { MouseEnter += RolloverPanel_MouseEnter; MouseLeave += RolloverPanel_MouseLeave; } void RolloverPanel_MouseLeave(object sender, MouseEventArgs e) { if (MouseLeaveStoryBoard == null) { return; } MouseLeaveStoryBoard.Begin(); } void RolloverPanel_MouseEnter(object sender, MouseEventArgs e) { if (MouseEnterStoryBoard == null) { return; } MouseEnterStoryBoard.Begin(); } }
-Graham
Hi,
How to add legends in C# code. I am creating the series in C# code as under.
Thanks
Uday
--------------------------
SplineSeries userSeries = new SplineSeries();userSeries.Thickness = 2;userSeries.ValueMemberPath = "ByteCountTotal";userSeries.XAxis = (CategoryXAxis)this.BandwidthUsageChart.Axes.First(axis => axis.Name == "XAxis");userSeries.YAxis = (NumericYAxis)this.BandwidthUsageChart.Axes.First(axis => axis.Name == "YAxis");userSeries.ItemsSource = bandwidthList;BandwidthUsageChart.Series.Add(userSeries);