We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Hello,
is this possible to achieve the following look using the HorizontalLineAnnotation.
1- Text should be inline similar as in red square. this can be on the right or left or in middle of the line.
2- the border around the text.
Thank you.
Hi Atifbuitms,
We have analyzed your requirements and would like to inform you that we can display the labels for annotation using custom annotation inherited from HorizontalLineAnnotation, as shown in the code snippet. We can align the text according to your requirements using the HorizontalTextAlignment and VerticalTextAlignment properties.
[Xaml]
|
<chart:SfChart.Annotations > <chart:HorizontalLineAnnotation X1="-0.5" StrokeThickness="3" StrokeDashCap="Square" StrokeEndLineCap="Square" StrokeStartLineCap="Square" Stroke="DarkGray" StrokeDashArray="1,3" Y1="300" X2="4.5" Y2="1600" HorizontalTextAlignment="Left" VerticalTextAlignment="Center" > </chart:HorizontalLineAnnotation>
<local:CustomTextAnnotation Y1="300" X1="-0.5" X2="4.5" Stroke="Transparent" HorizontalTextAlignment="Left" VerticalTextAlignment="Center" > <local:CustomTextAnnotation.Content> <StackPanel Background="White" Orientation="Horizontal"> <Border BorderBrush="Red" BorderThickness="2" CornerRadius="5"> <StackPanel Orientation="Horizontal"> <Border Margin="5,5,0,5" BorderBrush="Black" BorderThickness="1"> <TextBox Text="{Binding XValue}" x:Name="textBox" Height="49" BorderBrush="Transparent" TextWrapping="Wrap" FontSize="15" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Foreground="Black" Background="Transparent" Width="105" /> </Border> <Border Margin="0,5,5,5" BorderBrush="Black" BorderThickness="1"> <TextBox Text="{Binding YValue}" x:Name="textBox1" Height="49" BorderBrush="Transparent" TextWrapping="Wrap" FontSize="15" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Foreground="Black" Background="Transparent" Width="105" /> </Border> </StackPanel> </Border> </StackPanel> </local:CustomTextAnnotation.Content> </local:CustomTextAnnotation> </chart:SfChart.Annotations> |
[C#]
|
public class CustomTextAnnotation : HorizontalLineAnnotation { public object Content { get { return GetValue(ContentProperty); } set { SetValue(ContentProperty, value); } }
// Using DependencyProperty as the backing store for TextString. This enables animation, styling, binding, etc... public static readonly DependencyProperty ContentProperty = DependencyProperty.Register("Content", typeof(object), typeof(CustomTextAnnotation), new PropertyMetadata(null));
protected override void SetBindings() { base.SetBindings(); //You need to invoke this method to make all the default bindings if (TextElement != null) { Binding textBinding = new Binding { Path = new PropertyPath("Content"), Source = this }; //TextElement is content control define internally to display text. TextElement.SetBinding(ContentControl.ContentProperty, textBinding); } } } |
Output
Please refer to the following documentation:
https://www.syncfusion.com/kb/13862/how-to-create-a-custom-annotation-in-wpf-chart-sfchart
Please let us know if you need further assistance.
Regards,
Nanthini Mahalingam.
