The ChartView ToolTip should look like the on in the attached gif.
I figured out that I have to change the TooltipTemplate.
But how can I get the LineSeries X values and Y Values ? In my Source code instead of X and Y I should see in the ToolTip the X value (example: January) and Y Value (example: 2,00). Any ideas ?
Here is my unfinished Source Code:
private
LineSeries CreateLineSeries(KeyValuePair<ChartSerie, List<ChartDataPoint>> chartSeries, ChartLegendSettings legendSettings,
int
colorPaletteIndex)
{
// TODO: tooltip work in progress, show Format in Tooltips
FrameworkElementFactory tooltipFramework =
new
FrameworkElementFactory(
typeof
(Border));
tooltipFramework.SetValue(Border.BackgroundProperty,
new
SolidColorBrush(Colors.DimGray));
tooltipFramework.SetValue(Border.PaddingProperty,
new
Thickness(5));
FrameworkElementFactory tooltipStackpanelOne =
new
FrameworkElementFactory(
typeof
(StackPanel)) { Name =
"tooltipStackpanelOne"
};
tooltipStackpanelOne.SetValue(StackPanel.OrientationProperty, Orientation.Vertical);
tooltipFramework.AppendChild(tooltipStackpanelOne);
FrameworkElementFactory textBlockOne =
new
FrameworkElementFactory(
typeof
(TextBlock));
textBlockOne.SetValue(TextBlock.TextProperty,
"X"
);
textBlockOne.SetValue(TextBlock.ForegroundProperty,
new
SolidColorBrush(Colors.White));
textBlockOne.SetValue(TextBlock.FontWeightProperty, FontWeights.DemiBold);
FrameworkElementFactory textBlockTwo =
new
FrameworkElementFactory(
typeof
(TextBlock));
textBlockTwo.SetValue(TextBlock.TextProperty,
"Y"
);
textBlockTwo.SetValue(TextBlock.ForegroundProperty,
new
SolidColorBrush(Colors.White));
textBlockTwo.SetValue(TextBlock.FontWeightProperty, FontWeights.DemiBold);
tooltipStackpanelOne.AppendChild(textBlockOne);
tooltipStackpanelOne.AppendChild(textBlockTwo);
var lineSerie =
new
LineSeries()
{
VerticalAxis = CreateMultipleVerticalAxis(chartSeries, colorPaletteIndex,
out
var multipleVerticalAxis) ? multipleVerticalAxis :
null
,
ZIndex = 150,
// the line series should always be displayed on top of other series.
StrokeThickness = 3.5,
LegendSettings = (SeriesLegendSettings)legendSettings,
Opacity = 0.8,
//SeriesAnimation = new ChartRevealAnimation()
//{
// AnimationDirection = AnimationDirection.In,
// Orientation = Orientation.Horizontal,
// Duration = new TimeSpan(0, 0, 0, 1, 500),
// Delay = new TimeSpan(0, 0, 0, 0, 555),
//},
//PointAnimation = new ChartMoveAnimation()
//{
// MoveAnimationType = MoveAnimationType.Left,
// Duration = new TimeSpan(0, 0, 0, 0, 400),
// Delay = new TimeSpan(0, 0, 0, 0, 155),
//},
StackGroupKey = chartSeries.Key.Group,
CombineMode =
string
.IsNullOrEmpty(chartSeries.Key.Group) ? ChartSeriesCombineMode.None : ChartSeriesCombineMode.Stack,
PointTemplate =
new
DataTemplate()
{
VisualTree = AddPointsToSeries(chartSeries, colorPaletteIndex),
},
LabelDefinitions =
{
// set the clarion format for the labels
new
ChartSeriesLabelDefinition()
{
Template =
new
DataTemplate()
{
VisualTree = GetSeriesFormat(chartSeries),
}
}
},
TooltipTemplate =
new
DataTemplate()
{
VisualTree = tooltipFramework,
}
};
//// this is the old way of adding point to the LineSeries
//string pointTemplateString =
// @"<DataTemplate xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"" xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml"">" +
// @"<Ellipse Fill=""Black"" Width=""5"" Height=""5"" /></DataTemplate>";
//lineSerie.PointTemplate = (DataTemplate)XamlReader.Parse(pointTemplateString);
// this is the color of line series
if
(chartSeries.Key.ColorHex !=
null
)
{
lineSerie.Stroke = (SolidColorBrush)(
new
BrushConverter().ConvertFrom(chartSeries.Key.ColorHex));
}
foreach
(ChartDataPoint serie
in
chartSeries.Value)
{
lineSerie.DataPoints.Add(
new
CategoricalDataPoint()
{
Category = serie.XPoint.Label,
Value = (
double
?)serie.Value,
});
}
return
lineSerie;
}