Worked Example - Styling Annotations in MVVM
Annotation can be styled in MVVM by registering a style in XAML and referencing it from the ViewModel.
To do this, you need to declare a Style (TargetType = TextAnnotation, or your chosen annotation type) in XAML and give it a key. Next, set the TextAnnotationViewModel.StyleKey property equal to the key in XAML. Scichart picks it up and applies the style automatically to the annotation!
View (XAML)
| Stying Annotations in MVVM |
Copy Code
|
|---|---|
<Window x:Class="StyingAnnotationsMVVM.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:s="http://schemas.abtsoftware.co.uk/scichart" xmlns:local="clr-namespace:StyingAnnotationsMVVM" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Window.Resources> <local:MainWindowViewModel x:Key="viewModel"/> <Style x:Key="TextAnnotationStyle" TargetType="{x:Type s:TextAnnotation}"> <Setter Property="Foreground" Value="Red"/> <Setter Property="BorderBrush" Value="Orange"/> <Setter Property="BorderThickness" Value="1"/> </Style> <Style x:Key="AnchorTextAnnotationStyle" TargetType="{x:Type s:TextAnnotation}"> <Setter Property="Foreground" Value="Blue"/> <Setter Property="BorderBrush" Value="#AA0000FF"/> <Setter Property="BorderThickness" Value="1"/> </Style> <Style x:Key="TooltipLineAnnotationStyle" TargetType="{x:Type s:LineAnnotation}"> <Setter Property="Stroke" Value="Chartreuse"/> <Setter Property="StrokeThickness" Value="2"/> </Style> <Style x:Key="HorizontalLineAnnotationStyle" TargetType="{x:Type s:HorizontalLineAnnotation}"> <Setter Property="Stroke" Value="Orange" /> <Setter Property="StrokeThickness" Value="2" /> <Setter Property="ShowLabel" Value="True" /> <Setter Property="FontSize" Value="12" /> <Setter Property="FontWeight" Value="Bold" /> <Setter Property="IsEditable" Value="True" /> </Style> <Style x:Key="VerticalLineAnnotationStyle" TargetType="{x:Type s:VerticalLineAnnotation}"> <Setter Property="Stroke" Value="Brown" /> <Setter Property="StrokeThickness" Value="2" /> <Setter Property="IsEditable" Value="True" /> <Setter Property="FontSize" Value="12" /> <Setter Property="FontWeight" Value="Bold" /> </Style> <Style x:Key="LineArrowAnnotationStyle" TargetType="{x:Type s:LineArrowAnnotation}"> <Setter Property="Stroke" Value="Cyan" /> <Setter Property="StrokeThickness" Value="2" /> <Setter Property="HeadWidth" Value="8" /> <Setter Property="HeadLength" Value="4" /> </Style> <Style x:Key="BoxAnnotationStyle" TargetType="{x:Type s:BoxAnnotation}"> <Setter Property="Background" Value="LawnGreen" /> <Setter Property="BorderBrush" Value="DarkGreen" /> <Setter Property="BorderThickness" Value="5" /> <Setter Property="CornerRadius" Value="3" /> <Setter Property="IsEditable" Value="True" /> </Style> <Style x:Key="AxisMarkerAnnotationStyle" TargetType="{x:Type s:AxisMarkerAnnotation}"> <Setter Property="Background" Value="Red" /> <Setter Property="IsEditable" Value="True" /> </Style> </Window.Resources> <Grid DataContext="{StaticResource viewModel}"> <s:SciChartSurface x:Name="sciChart" Grid.Column="1" Annotations="{s:AnnotationsBinding AnnotationViewModels}" Padding="0"> <s:SciChartSurface.RenderSurface> <s:HighQualityRenderSurface/> </s:SciChartSurface.RenderSurface> <s:SciChartSurface.XAxis> <s:NumericAxis/> </s:SciChartSurface.XAxis> <s:SciChartSurface.YAxis> <s:NumericAxis/> </s:SciChartSurface.YAxis> </s:SciChartSurface> </Grid> </Window> |
|
ViewModel
| Stying Annotations in MVVM |
Copy Code
|
|---|---|
public class MainWindowViewModel : INotifyPropertyChanged
{
public ObservableCollection<IAnnotationViewModel> AnnotationViewModels { get; set; }
public MainWindowViewModel()
{
AnnotationViewModels = new ObservableCollection<IAnnotationViewModel>();
InitializeAnnotations();
}
private void InitializeAnnotations()
{
AnnotationViewModels.Add(new TextAnnotationViewModel
{
Text = "Annotations are Easy!",
FontSize = 24,
X1 = 0.3,
Y1 = 9.7,
StyleKey = "TextAnnotationStyle",
});
// Text with anchor points
AnnotationViewModels.Add(new TextAnnotationViewModel
{
HorizontalAnchorPoint = HorizontalAnchorPoint.Center,
Text = "Anchor Center (X1, Y1)",
VerticalAnchorPoint = VerticalAnchorPoint.Bottom,
X1 = 5.0,
Y1 = 8,
StyleKey = "AnchorTextAnnotationStyle",
});
AnnotationViewModels.Add(new TextAnnotationViewModel
{
HorizontalAnchorPoint = HorizontalAnchorPoint.Right,
Text = "Anchor Right",
VerticalAnchorPoint = VerticalAnchorPoint.Top,
X1 = 5.0,
Y1 = 8.0,
StyleKey = "AnchorTextAnnotationStyle",
});
AnnotationViewModels.Add(new TextAnnotationViewModel
{
HorizontalAnchorPoint = HorizontalAnchorPoint.Left,
VerticalAnchorPoint = VerticalAnchorPoint.Top,
Text = "or Anchor Left",
X1 = 5.0,
Y1 = 8.0,
StyleKey = "AnchorTextAnnotationStyle",
});
AnnotationViewModels.Add(new LineAnnotationViewModel
{
X1 = 1,
X2 = 2,
Y1 = 4,
Y2 = 6,
Tooltip = "Hi, I am tooltip!",
StyleKey = "TooltipLineAnnotationStyle",
});
AnnotationViewModels.Add(new HorizontalLineAnnotationViewModel
{
HorizontalAlignment = HorizontalAlignment.Right,
LabelPlacement = LabelPlacement.TopLeft,
LabelValue = "Right Aligned, with text on left",
X1 = 5,
X2 = 6,
Y1 = 3.2,
StyleKey = "HorizontalLineAnnotationStyle",
});
AnnotationViewModels.Add(new VerticalLineAnnotationViewModel
{
VerticalAlignment = VerticalAlignment.Stretch,
LabelValue = "Vertical Line, hello everybody",
LabelPlacement = LabelPlacement.Bottom,
X1 = 9,
Y1 = 4,
StyleKey = "VerticalLineAnnotationStyle",
});
AnnotationViewModels.Add(new LineArrowAnnotationViewModel
{
X1 = 1.2,
X2 = 2.5,
Y1 = 3.8,
Y2 = 6,
StyleKey = "LineArrowAnnotationStyle",
});
AnnotationViewModels.Add(new BoxAnnotationViewModel
{
X1 = 2,
X2 = 5,
Y1 = 0.5,
Y2 = 1.5,
StyleKey = "BoxAnnotationStyle",
});
AnnotationViewModels.Add(new AxisMarkerAnnotationViewModel
{
X1 = 4,
Y1 = 3,
StyleKey = "AxisMarkerAnnotationStyle",
});
}
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged(string propertyName)
{
var handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
|
|