I would like to apply a custom style to all tooltips, but I can’t seem to figure out how to do so. I’ve followed the custom tooltip example, but find that applying the same style to all series becomes very verbose when we have many series on the same chart. From the example:
<s:SciChartSurface.RenderableSeries>
<s:FastLineRenderableSeries
Stroke="#ff6495ed"
StrokeThickness="2"
s:CursorModifier.TooltipTemplate="{StaticResource CursorTooltipTemplate1}"
s:RolloverModifier.TooltipContainerStyle="{StaticResource TooltipStyle1}"
s:RolloverModifier.TooltipTemplate="{StaticResource RolloverTooltipTemplate1}"
s:TooltipModifier.TooltipContainerStyle="{StaticResource TooltipStyle1}"
s:TooltipModifier.TooltipTemplate="{StaticResource TooltipTemplate1}"
s:VerticalSliceModifier.TooltipContainerStyle="{StaticResource TooltipStyle1}"
s:VerticalSliceModifier.TooltipTemplate="{StaticResource VerticalSliceTooltipTemplate1}" />
<s:FastLineRenderableSeries
Stroke="#ffe2460c"
StrokeThickness="2"
s:CursorModifier.TooltipTemplate="{StaticResource CursorTooltipTemplate2}"
s:RolloverModifier.TooltipContainerStyle="{StaticResource TooltipStyle2}"
s:RolloverModifier.TooltipTemplate="{StaticResource RolloverTooltipTemplate2}"
s:TooltipModifier.TooltipContainerStyle="{StaticResource TooltipStyle2}"
s:TooltipModifier.TooltipTemplate="{StaticResource TooltipTemplate2}"
s:VerticalSliceModifier.TooltipContainerStyle="{StaticResource TooltipStyle2}"
s:VerticalSliceModifier.TooltipTemplate="{StaticResource VerticalSliceTooltipTemplate2}" />
</s:SciChartSurface.RenderableSeries>
My target style is the same for all types of series, so I don’t need to customize them beyond overriding the default style. I’ve tried removing the “x:key” attribute from my custom tooltip style (to make it apply to all unstyled tooltips), but it doesn’t work as I had hoped. So I’m guessing that they’re being styled in some way at lower levels that prevent this from working. Is there a way to style the tooltips globally or is the method shown in this example the best approach?
- w b asked 8 years ago
- last edited 8 years ago
- You must login to post comments
Hi there,
Thanks for your question. You could do this using implicit styles. Set the tooltip properties in a style for BaseRenderableSeries, then base on it implicit styles for all the RenderableSeries types you use:
<Style x:Key="DefaultRenderableSeriesStyle" TargetType="s:BaseRenderableSeries">
<Setter Property="s:TooltipModifier.TooltipTemplate" Value="{StaticResource TooltipLabelTemplate}" />
</Style>
<Style BasedOn="{StaticResource DefaultRenderableSeriesStyle}" TargetType="s:FastLineRenderableSeries" />
<Style BasedOn="{StaticResource DefaultRenderableSeriesStyle}" TargetType="s:FastColumnRenderableSeries" />
…
Does the above make sense for you?
Best regards,
Yuriy
- Yuriy Zadereckii answered 8 years ago
- last edited 8 years ago
-
This approach doesn’t quite work for our application, since we’re customizing the style of each RenderableSeries slightly differently (so the implicit styles are overridden by the custom styles). But this does solve the actual question that I asked. And it did help me to realize that I can set the TooltipTemplate styles inside of the style definition for each RenderableSeries (not sure why I didn’t think of this before). For anyone interested, here’s exactly what we did: (edit: it looks like code blocks aren’t supported in comments, so see my answer below for the actual code). Also, I noticed that the code sample you provided uses two different namespace definitions: r:BaseRenderableSeries and c:TooltipModifier. Was this done for a reason, or is it just a copy/paste issue?
-
Concerning the different namespaces, it is kind of copy/paste issue. The markup snippet was intended to be more like pseudocode just to demonstrate the idea. Let me correct it, actually. Thanks for pointing it out to me.
- You must login to post comments
For anyone interested, here’s exactly what we did to solve this issue:
<DataTemplate x:Key="TooltipTemplate" DataType="s:SeriesInfo">
<StackPanel Orientation="Horizontal">
<TextBlock Style="{StaticResource HintDataItemsStyle}" Text="{Binding SeriesName, StringFormat='{}{0}: '}" />
<TextBlock Style="{StaticResource HintDataItemsStyle}" Text="{Binding FormattedYValue}" />
</StackPanel>
</DataTemplate>
<Style x:Key="LineSeriesStyle" TargetType="s:FastLineRenderableSeries">
<Setter Property="Stroke" Value="#FF4083B7"/>
<Setter Property="StrokeThickness" Value="2"/>
<!-- other property setters -->
<Setter Property="s:TooltipModifier.TooltipTemplate" Value="{StaticResource TooltipTemplate}" />
<Setter Property="s:VerticalSliceModifier.TooltipTemplate" Value="{StaticResource TooltipTemplate}" />
</Style>
- w b answered 8 years ago
-
Thanks for sharing your solution! I’m sure it will benefit others.
- You must login to post comments
Please login first to submit.