How to: Configure the Appearance of an Annotation

Jun 07, 2019

This example demonstrates how to customize the annotation content appearance.

Specify the Annotation.Content property.
Assign a DataTemplate object that configures the content appearance to the Annotation.ContentTemplate property.
MainWindow.xaml

xaml

<dxc:ChartControl.Annotations>
    <dxc:Annotation Margin="10">
        <dxc:Annotation.Content>
            <local:TextAndImage Text="Mars" 
                                ImageSource="Images/Mars.png"/>
        </dxc:Annotation.Content>
        <dxc:Annotation.ContentTemplate>
            <DataTemplate>
                <StackPanel Orientation="Vertical">
                    <Image Width="32" 
                           Height="32"
                           Source="{Binding ImageSource}"/>
                    <TextBlock HorizontalAlignment="Center"
                               Text="{Binding Text}"/>
                </StackPanel>
            </DataTemplate>
        </dxc:Annotation.ContentTemplate>
        <dxc:Annotation.AnchorPoint>
            <dxc:ChartAnchorPoint X="30" 
                                  Y="30"/>
        </dxc:Annotation.AnchorPoint>
        <dxc:Annotation.ShapePosition>
            <dxc:FreePosition HorizontalAlignment="Left"
                              VerticalAlignment="Top"/>
        </dxc:Annotation.ShapePosition>
    </dxc:Annotation>
</dxc:ChartControl.Annotations>