Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
390
Popup legends within xamWebChart
posted
  1. How to create a popup legends with in the xamwebchart?
  2. Also how to align the popup legends in xamwebchart?

Find the attachment representing the requirement.

Requirement.zip
Parents
  • 30692
    Suggested Answer
    Offline posted

    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

Reply Children