When using the CursorModifier and rolling over a series the numbers appear without thousand seperators ie: 10000 instead of 10,000. Is there a way I can add these?
- kelias asked 11 years ago
- You must login to post comments
Update: SciChart v4
The SciChart v4 Documentation now has a topic on styling the CursorModifier Tooltips, Lines and Axis Labels. You can see this here:
Also, you can learn how to style the CursorModifier Tooltips and Axis Labels in the following example:
- Andrew Burnett-Thompson answered 8 years ago
- You must login to post comments
How do you implement this with version 3.x and with a SciChartGroup?
David
- David T answered 9 years ago
- You must login to post comments
Hello Kelly,
My apologies! I mistook you for another customer (who has source code licenses hence can access the source).
Here, I have created a customized CursorModifier for you which has the styles & templates inline. Many of these styles can be moved to UserControl.Resources, or a resource dictionary. The CursorModifier has these styles applied in the themes but everything may be overridden.
Hope this helps!
Andrew
<!-- See properties on CursorModifier to define its behaviour --> <sciChart:CursorModifier x:Name="crosshairsModifier" ShowTooltip="True" ShowAxisLabels="True" IsEnabled="True" ShowTooltipOn="Always"> <sciChart:CursorModifier.Resources> <!-- Brushes used for cursor labels --> <SolidColorBrush x:Key="LabelBackgroundBrush" Color="#BBD0D0D0" /> <SolidColorBrush x:Key="LabelBorderBrush" Color="#77333333" /> <SolidColorBrush x:Key="LabelForegroundBrush" Color="#555" /> <SolidColorBrush x:Key="CursorLineBrush" Color="#77333333" /> <!-- Common label (TextBlock) style used in cursors --> <Style x:Key="HintDataItemsStyle" TargetType="TextBlock"> <Setter Property="Foreground" Value="{StaticResource LabelForegroundBrush}" /> <Setter Property="FontWeight" Value="Bold" /> <Setter Property="FontFamily" Value="Arial" /> <Setter Property="FontSize" Value="13" /> <Setter Property="Margin" Value="3,2,2,2" /> </Style> </sciChart:CursorModifier.Resources> <!-- Defines the Cursor Line Style (Crosshairs style --> <sciChart:CursorModifier.CrosshairsStyle> <!-- Note, any styles that apply to line, e.g. StrokeDashArray, may be used --> <Style TargetType="Line"> <Setter Property="Stroke" Value="{StaticResource CursorLineBrush}" /> <Setter Property="StrokeThickness" Value="1" /> </Style> </sciChart:CursorModifier.CrosshairsStyle> <!-- Defines the control template for the cursor tooltip --> <!-- There is a default CursorLabelTemplate defined in the themes, but you can override it --> <sciChart:CursorModifier.CursorLabelTemplate> <ControlTemplate TargetType="sciChart:TemplatableControl"> <Border Background="{StaticResource LabelBackgroundBrush}" BorderBrush="{StaticResource LabelBorderBrush}" BorderThickness="1" CornerRadius="5"> <ItemsControl Margin="6" ItemsSource="{Binding SeriesData.SeriesInfo}"> <ItemsControl.ItemTemplate> <DataTemplate> <!-- Binds to SeriesInfo type in the SciChart library--> <StackPanel Orientation="Horizontal"> <!-- Shows 'SeriesName: ' --> <TextBlock Style="{StaticResource HintDataItemsStyle}" Text="{Binding SeriesName, StringFormat='{}{0}:'}" Visibility="{Binding SeriesName, Converter={StaticResource CollapseIfNullOrEmptyStringConverter}}" /> <!-- Shows 'SeriesValue '--> <TextBlock Style="{StaticResource HintDataItemsStyle}" Text="{Binding Value, StringFormat=\{0:0.000\}}" /> </StackPanel> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </Border> </ControlTemplate> </sciChart:CursorModifier.CursorLabelTemplate> <!-- Template for the CursorModifier axes toltips to display AxisInfo collection (result of hit test) --> <!-- There is a default AxisLabelTemplate defined in the Themes, but you can override it --> <sciChart:CursorModifier.AxisLabelTemplate> <ControlTemplate TargetType="sciChart:TemplatableControl"> <!-- Binds to AxisInfo in the SciChart library --> <!-- Draws a rounded rectangle with axis value --> <Border Margin="1" Background="{StaticResource LabelBackgroundBrush}" BorderBrush="{StaticResource LabelBorderBrush}" BorderThickness="1" CornerRadius="2"> <TextBlock Style="{StaticResource HintDataItemsStyle}" Text="{Binding CursorFormattedDataValue}" /> </Border> </ControlTemplate> </sciChart:CursorModifier.AxisLabelTemplate> </sciChart:CursorModifier>
- Andrew Burnett-Thompson answered 11 years ago
- You must login to post comments
Hello there,
Yes, this is possible, as all the modifiers are controls are Xaml Templated. Since you have the source code, if you take a look at the /Themes folder, there are a number of XAML themes.
Open up any one of those (e.g. Chrome.xaml) and you will find a section which looks like this
<!-- Template for the CursorModifier tooltip to display SeriesInfo collection (result of hit test) --> <ControlTemplate x:Key="CursorLabelTemplate" TargetType="SciChart:TemplatableControl"> <Border Background="{StaticResource LabelBackgroundBrush}" BorderBrush="{StaticResource LabelBorderBrush}" BorderThickness="1" CornerRadius="5"> <ItemsControl Margin="6" ItemsSource="{Binding SeriesData.SeriesInfo}"> <ItemsControl.ItemTemplate> <DataTemplate> <SciChart:SeriesInfoTemplateSelector BandSeries1Template="{StaticResource BandSeriesCursorLabelTemplate}" BandSeries2Template="{StaticResource BandSeriesCursorLabelTemplate}" Content="{Binding}" DefaultTemplate="{StaticResource XySeriesRolloverLabelTemplate}" OhlcSeriesTemplate="{StaticResource OhlcSeriesRolloverLabelTemplate}" /> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </Border> </ControlTemplate>
You don’t need the SeriesInfoTemplateSelector, this is included on our side to provide a different template for OHLC or Xy data. If you are only using XyData, you can substitute and modify the XySeriesRolloverLabelTemplate, also in the Chrome.xaml theme file:
<DataTemplate x:Key="XySeriesRolloverLabelTemplate"> <StackPanel Orientation="Horizontal"> <TextBlock Style="{StaticResource HintDataItemsStyle}" Text="{Binding SeriesName, StringFormat='{}{0}:'}" Visibility="{Binding SeriesName, Converter={StaticResource CollapseIfNullOrEmptyStringConverter}}" /> <TextBlock Style="{StaticResource HintDataItemsStyle}" Text="{Binding Value, StringFormat=\{0:0.000\}}" /> </StackPanel> </DataTemplate>
The binding with TextBlock.Text is where the SeriesInfo.Value is bound to the cursor tooltip label
Text=”{Binding Value, StringFormat={0:0.000}}” />
So to recap, if you create a custom Template and apply to CursorModifier.CursorLabelTemplate you can change how the how control is presented.
Have a look and let me know how you get on.
Thanks!
Andrew
- Andrew Burnett-Thompson answered 11 years ago
-
Thanks for the quick response, but I'm not sure I fully understand. The chart is a simple line chart that I'm using. The DataTemplate you provide above looks like it should do the trick, but I'm not sure how to apply it. If I add it to my resources where do I reference it on the chart to apply the template? Just to clarify I do NOT want to modify any of the original source or files.
-
Hi, The CursorModifier has CursorLabelTemplate property, you need to set it. Use the DataTemplate Andrew provided as ItemTemplate for ItemsControl inside of ControlTemplate which Andrew posted above. Please, don't hesitate to ask if you need more assistance with this. Best regards, Yuriy
- You must login to post comments
Please login first to submit.