Custom legend as tooltip | Infragistics Forums

265

Custom legend as tooltip

Yevgeni Lepa posted over 13 years ago

I would like to create a custom legend for the XamChart.I need the legend to appear as an icon and the legend data will be shown as tool-tip(see attachment) when the mouse is above the icon. Does any one have an example of a similar solution?

Thanks,

Yevgeni

265

Yevgeni Lepa posted over 13 years ago in reply to [Infragistics] Krasimir

The Example worked fine but on my application the tooltip does not show the legend. It shows the type of the content e.g "System.Windows.Controls,ContentPresenter"
Here is My Xaml:

<UserControl

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:igCA="http://infragistics.com/Chart"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:local="clr-namespace:TTI.SQCModuleNetwork.Module.Graphs"

mc:Ignorable="d"

x:Class="TTI.SQCModuleNetwork.Module.Graphs.CountersGraphUC" Loaded="UserControl_Loaded" d:DesignHeight="274" d:DesignWidth="408">

<UserControl.Resources>

<ResourceDictionary>

<ResourceDictionary.MergedDictionaries>

<ResourceDictionary Source="/SQCModuleNetwork;component/Resources/iconsDictionary.xaml"/>

<ResourceDictionary Source="/SQCModuleNetwork;component/Resources/StaticContent.xaml"/>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>



</UserControl.Resources>

<UserControl.DataContext>

<local:CounterGraphData/>

</UserControl.DataContext>

<Grid >

<Grid.Resources>

<Style TargetType="{x:Type igCA:Legend}" >

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type igCA:Legend}">



<StackPanel>

<ContentControl x:Name="legendControl" Visibility="Collapsed">



</ContentControl>

<Image Stretch="Uniform" Margin="3" Grid.Column="0"

   Source="{Binding Mode=OneTime, Source={StaticResource Legend}}" Height="50">

<Image.ToolTip>

<ContentPresenter Loaded="ContentPresenter_Loaded"/>

</Image.ToolTip>

<Image.Triggers>

<Trigger Property="IsMouseOver" Value="true">

<Setter TargetName="legendControl" Property="Visibility">

<Setter.Value>

<Visibility></Visibility>

</Setter.Value>

</Setter>

</Trigger>

</Image.Triggers>

</Image>

</StackPanel>

</ControlTemplate>

</Setter.Value>

</Setter>

<Setter Property="HorizontalAlignment" Value="Left"/>

</Style>

</Grid.Resources>

   <igCA:XamChart x:Name="mainChart" Margin="0" d:LayoutOverrides="Width, Height" MouseDown="Chart_MouseDown" DataBind="mainChart_DataBind">

   <igCA:XamChart.Resources>

   <DataTemplate DataType="{x:Type igCA:MarkerTemplate}">

   <Ellipse Stroke="{Binding Stroke}" Fill="{Binding Fill}" ToolTip="{Binding ToolTip}"

   Width="4" Height="4"/>

   </DataTemplate>



   

   

   </igCA:XamChart.Resources>

   <igCA:XamChart.Legend>

   <igCA:Legend MarginType="Percent" Margin="5,80,70,2" />



   </igCA:XamChart.Legend>

   <igCA:XamChart.Axes>

   <igCA:Axis AxisType="PrimaryX" AutoRange="True" Stroke="{DynamicResource Netcore_Colors_Solid_DG1}">

   <igCA:Axis.Label>

   <igCA:Label AutoResize="False" FontSize="10" FontFamily="Verdana" Angle="45"/>

   </igCA:Axis.Label>

   <igCA:Axis.MajorGridline>

   <igCA:Mark Stroke="#FFD4D4D4"/>

   </igCA:Axis.MajorGridline>

   </igCA:Axis>

   <igCA:Axis AxisType="PrimaryY" AutoRange="true"

   Stroke="{DynamicResource Netcore_Colors_Solid_DG1}" x:Name="Y1">





   <igCA:Axis.MinorGridline>

   <igCA:Mark Stroke="LightGray"/>

   </igCA:Axis.MinorGridline>

   <igCA:Axis.MajorGridline>

   <igCA:Mark Stroke="#FFD4D4D4"/>

   </igCA:Axis.MajorGridline>

   </igCA:Axis>



   <igCA:Axis AxisType="SecondaryY" AutoRange="true"

   Stroke="{DynamicResource Netcore_Colors_Solid_DG1}" x:Name="Y2" Visible="False">



   <igCA:Axis.MajorTickMark>

   <igCA:Mark Visible="False"/>

   </igCA:Axis.MajorTickMark>

   <igCA:Axis.MinorGridline>

   <igCA:Mark Stroke="LightGray"/>

   </igCA:Axis.MinorGridline>

   <igCA:Axis.MajorGridline>

   <igCA:Mark Stroke="#FFD4D4D4"/>

   </igCA:Axis.MajorGridline>

   </igCA:Axis>

   </igCA:XamChart.Axes>

   <igCA:XamChart.Caption>

   <igCA:Caption MarginType="Percent" Margin="0,0,0,85"

   Text="{Binding Caption, Mode=Default}"

   Foreground="Black"

   FontFamily="Verdana"

   FontSize="10"

   FontStyle="Normal"

   FontWeight="Bold"/>

   </igCA:XamChart.Caption>

   <igCA:XamChart.Scene>

   <igCA:Scene BorderThickness="0,0,0,0" FontSize="10" MarginType="Percent" Margin="0,15,0,20">

   <igCA:Scene.GridArea>

   <igCA:GridArea Background="{DynamicResource Netcore_Colors_Solid_White}"

   MarginType="Percent" Margin="7,20,7,30"/>

   </igCA:Scene.GridArea>

   </igCA:Scene>

   </igCA:XamChart.Scene>

   <igCA:XamChart.Series>



   <igCA:Series ChartType="Scatter" Label="Counter11 long long long label 123456788 for testing 123 erunda 222 111 000 end of label">

   <igCA:Series.DataPoints>

   <igCA:DataPoint>

   <igCA:DataPoint.ChartParameters>

   <igCA:ChartParameter Type="ValueX" Value="1"/>

   <igCA:ChartParameter Type="ValueY" Value="5.5"/>

   </igCA:DataPoint.ChartParameters>

   </igCA:DataPoint>

   <igCA:DataPoint>

   <igCA:DataPoint.ChartParameters>

   <igCA:ChartParameter Type="ValueX" Value="3"/>

   <igCA:ChartParameter Type="ValueY" Value="10"/>

   </igCA:DataPoint.ChartParameters>

   </igCA:DataPoint>

   <igCA:DataPoint>

   <igCA:DataPoint.ChartParameters>

   <igCA:ChartParameter Type="ValueX" Value="5"/>

   <igCA:ChartParameter Type="ValueY" Value="7"/>

   </igCA:DataPoint.ChartParameters>

   </igCA:DataPoint>

   </igCA:Series.DataPoints>

   </igCA:Series>

   </igCA:XamChart.Series>

   </igCA:XamChart>

</Grid>

</UserControl>
Cancel
Reply

Cancel
30945

Offline [Infragistics] Krasimir posted over 13 years ago

Hello Yevgeni,

I am just checking if you require any further assistance on the matter.

Sincerely,

Krasimir

Developer Support Engineer

Infragistics

www.infragistics.com/support
Cancel
Reply

Cancel
30945

Offline [Infragistics] Krasimir posted over 13 years ago

Hello Yevgeni,

I have been looking into your previous reply and it seems that when you use a key for the DataTemplate for the LegendItemTemplate the template is not applied. I also noticed that the ActulaWidth property of the elements in the panel is 0 when use templates for the Legend’s items. I have modified the sample I sent you earlier today in order to calculate the appropriate width and height for the items in the Legend, so they will be visible.

If you require any further clarifications please do not hesitate to ask.

Sincerely,

Krasimir

Developer Support Engineer

Infragistics

www.infragistics.com/support

CustomLegend2.zip
Cancel
Reply

Cancel
265

Yevgeni Lepa posted over 13 years ago in reply to Yevgeni Lepa

I have created the folowing DataTemplate but when I use it The Tooltip is empty.

<igCA:XamChart.Legend
>

<igCA:
Legend

MarginType
="Percent"

Margin="5,90,70,2" UseDataTemplate
="True">

<igCA:Legend.Resources
>

<DataTemplate DataType="{x:Type igCA:LegendItemTemplate}" x:Key
="temp">

<Grid Background="{x:Null}" Margin="0,0,0,0" Width="Auto" Height
="Auto">

<Viewbox HorizontalAlignment="Left" MaxHeight="20" VerticalAlignment="Stretch" Stretch
="Uniform">

<StackPanel Orientation="Horizontal" Width="Auto" Height
="Auto">

<Grid Width
="Auto">

<
Ellipse

Fill="{Binding Path
=Fill}"

Width
="11"

Height
="11"

StrokeThickness
="1" />

</Grid
>

<TextBox Text="{Binding Path=Text}" VerticalAlignment="Bottom" HorizontalAlignment="Left"

Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#FF4B4B4B"

Margin="3,0,0,0" BorderThickness="0,0,0,0" ToolTip="{Binding Path
=Text}"/>

</StackPanel
>

</Viewbox
>

</Grid
>

</DataTemplate
>

</igCA:Legend.Resources
>

</igCA:Legend
>

</igCA:XamChart.Legend
>

I gave modifyed the ContentPresenter_Loaded Handler to fit the DataTemplate as folowing:

private void ContentPresenter_Loaded(object sender, RoutedEventArgs e)
{

try

{

//Panel control = (Utilities.GetDescendantFromType(sender as DependencyObject,

// typeof(LegendItemTemplate), false) as FrameworkElement).Parent as Panel;

　

foreach (UIElement elem in (((ContentPresenter)sender).Content as Panel).Children)
{

if (elem is FrameworkElement)
{

FrameworkElement fm = elem as FrameworkElement;

if (maxHeight < fm.ActualHeight)
{

maxHeight = fm.ActualHeight;

}

if (maxWidth < fm.ActualWidth)
{

maxWidth = fm.ActualWidth;

}

}

}

(sender

as ContentPresenter).Width = maxWidth;
(sender

as ContentPresenter).Height = ((((ContentPresenter)sender).Content as Panel).Children.Count / 2) * 25;
}

catch (Exception)
{

//throw;

}

}

Can you help?
Cancel
Reply

Cancel
265

Yevgeni Lepa posted over 13 years ago in reply to Yevgeni Lepa

I have created the folowing DataTemplate but when I use it The Tooltip is empty.

<igCA:XamChart.Legend >

<igCA: Legend="Percent" Margin="5,90,70,2" UseDataTemplate="True">

<DataTemplate DataType="{x:Type igCA:LegendItemTemplate}" x:Key="temp">

<Grid Background="{x:Null}" Margin="0,0,0,0" Width="Auto" Height="Auto">

<Viewbox HorizontalAlignment="Left" MaxHeight="20" VerticalAlignment="Stretch" Stretch="Uniform">

<StackPanel Orientation="Horizontal" Width="Auto" Height="Auto"><Grid Width="Auto">

<EllipseFill="{Binding Path=Fill}"Width="11" Height="11" StrokeThickness="1" /></Grid>

<TextBox Text="{Binding Path=Text}" VerticalAlignment="Bottom" HorizontalAlignment="Left"

Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#FF4B4B4B"

Margin="3,0,0,0" BorderThickness="0,0,0,0" ToolTip="{Binding Path=Text}"/>

</StackPanel>

</Viewbox>

</Grid>

</DataTemplate>

</igCA:Legend.Resources>

</igCA:Legend>

I gave modifyed the ContentPresenter_Loaded Handler to fit the DataTemplate as folowing:

private void ContentPresenter_Loaded(object sender, RoutedEventArgs e)

try{

foreach (UIElement elem in (((ContentPresenter)sender).Content as Panel).Children)

{
if (elem is FrameworkElement)

FrameworkElement fm = elem as FrameworkElement;

if (maxHeight < fm.ActualHeight)

if (maxWidth < fm.ActualWidth)

(sender

(sender

}
as ContentPresenter).Width = maxWidth; as ContentPresenter).Height = ((((ContentPresenter)sender).Content as Panel).Children.Count / 2) * 25;

catch (Exception)

}

}

Can you help?

{

{

maxWidth = fm.ActualWidth;

}

}

}

{

maxHeight = fm.ActualHeight;

}

{

{

</igCA:XamChart.Legend>

<igCA:Legend.Resources>
Cancel
Reply

Cancel