Pre loader

Custom Annotation Selection Markers

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

1
0

How do I change the selection marker of an annotation? It seems to default to green squares of a certain size, which is all I can find in your examples. I tried to search the knowledgebase and forums but could not seem to find this answer. I would like to be able to control the color, shape, and size of the selection indicators for each annotation in my chart.

Thanks.

  • You must to post comments
0
0

Hi there,

The AnnotationBase.ResizingGripsStyle can be used to style the drag markers. The marker is TargetType Thumb if that helps. The default style is declared like this:

<Style TargetType="Thumb">
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Cursor" Value="Hand" />
    <Setter Property="Background" Value="Green" />
    <Setter Property="Width" Value="{z:Static Member=visuals:ManipulationMargins.AnnotationResizingThumbSize}" />
    <Setter Property="Height" Value="{z:Static Member=visuals:ManipulationMargins.AnnotationResizingThumbSize}" />
    <Setter Property="Opacity" Value="0.4" />
    <Setter Property="BorderBrush">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                <GradientStop Offset="0" Color="#FFA3AEB9" />
                <GradientStop Offset="0.375" Color="#FF8399A9" />
                <GradientStop Offset="0.375" Color="#FF718597" />
                <GradientStop Offset="1" Color="#FF617584" />
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Thumb">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="BackgroundAnimation"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1" />
                                    <ColorAnimation Duration="0"
                                                    Storyboard.TargetName="Background"
                                                    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                                    To="#FF6DBDD1" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="BackgroundAnimation"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1" />
                                    <ColorAnimation Duration="0"
                                                    Storyboard.TargetName="Background"
                                                    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                                    To="#FF6DBDD1" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="DisabledVisualElement"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To=".55" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimation Duration="0"
                                                     Storyboard.TargetName="FocusVisualElement"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="Background"
                            Background="White"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="2">
                        <Grid Margin="1" Background="{TemplateBinding Background}">
                            <Border x:Name="BackgroundAnimation"
                                    Background="#FF448DCA"
                                    Opacity="0" />
                            <Rectangle x:Name="BackgroundGradient" Fill="{TemplateBinding Background}" />
                        </Grid>
                    </Border>
                    <Rectangle x:Name="DisabledVisualElement"
                               Fill="#FFFFFFFF"
                               IsHitTestVisible="false"
                               Opacity="0"
                               RadiusX="2"
                               RadiusY="2" />
                    <Rectangle x:Name="FocusVisualElement"
                               Margin="1"
                               IsHitTestVisible="false"
                               Opacity="0"
                               RadiusX="1"
                               RadiusY="1"
                               Stroke="#FF6DBDD1"
                               StrokeThickness="1" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

By modifying the above you should be able to change the look & feel as well as handle mouse-over states either with Triggers or the VisualStateManager.

If you need further help, do let me know.

Best regards,
Andrew

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies