Skip to content

Commit 66b4438

Browse files
MuneeshKumarGMuneeshKumarG
authored
Merge pull request #1 from SyncfusionExamples/WPF-46193-Custom_annotation_sample
WPF-46193-Sample for custom annotation in WPF SfChart
2 parents bd4083d + bd5a653 commit 66b4438

File tree

10 files changed

+276
-2
lines changed

10 files changed

+276
-2
lines changed

‎Custom_Annotation/App.xaml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<Application x:Class="Custom_Annotation.App"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:local="clr-namespace:Custom_Annotation"
5+
StartupUri="MainWindow.xaml">
6+
<Application.Resources>
7+
8+
</Application.Resources>
9+
</Application>

‎Custom_Annotation/App.xaml.cs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
using System.Windows;
2+
3+
namespace Custom_Annotation
4+
{
5+
/// <summary>
6+
/// Interaction logic for App.xaml
7+
/// </summary>
8+
public partial class App : Application
9+
{
10+
}
11+
}

‎Custom_Annotation/AssemblyInfo.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
using System.Windows;
2+
3+
[assembly: ThemeInfo(
4+
ResourceDictionaryLocation.None, //where theme specific resource dictionaries are located
5+
//(used if a resource is not found in the page,
6+
// or application resource dictionaries)
7+
ResourceDictionaryLocation.SourceAssembly //where the generic resource dictionary is located
8+
//(used if a resource is not found in the page,
9+
// app, or any theme specific resource dictionaries)
10+
)]

‎Custom_Annotation/Custom_Annotation.csproj‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<Project Sdk="Microsoft.NET.Sdk">
2+
3+
<PropertyGroup>
4+
<OutputType>WinExe</OutputType>
5+
<TargetFramework>net6.0-windows</TargetFramework>
6+
<Nullable>enable</Nullable>
7+
<UseWPF>true</UseWPF>
8+
</PropertyGroup>
9+
10+
<ItemGroup>
11+
<PackageReference Include="Syncfusion.SfChart.WPF" Version="*" />
12+
</ItemGroup>
13+
14+
</Project>

‎Custom_Annotation/Custom_Annotation.csproj.user‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<Project ToolsVersion="Current" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
3+
<PropertyGroup />
4+
<ItemGroup>
5+
<ApplicationDefinition Update="App.xaml">
6+
<SubType>Designer</SubType>
7+
</ApplicationDefinition>
8+
</ItemGroup>
9+
<ItemGroup>
10+
<Page Update="MainWindow.xaml">
11+
<SubType>Designer</SubType>
12+
</Page>
13+
</ItemGroup>
14+
</Project>

‎Custom_Annotation/Custom_Annotation.sln‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.4.33122.133
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Custom_Annotation", "Custom_Annotation.csproj", "{59C28072-C19C-477B-B6EB-4C7E89FE8C8D}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
EndGlobalSection
13+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
14+
{59C28072-C19C-477B-B6EB-4C7E89FE8C8D}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{59C28072-C19C-477B-B6EB-4C7E89FE8C8D}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{59C28072-C19C-477B-B6EB-4C7E89FE8C8D}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{59C28072-C19C-477B-B6EB-4C7E89FE8C8D}.Release|Any CPU.Build.0 = Release|Any CPU
18+
EndGlobalSection
19+
GlobalSection(SolutionProperties) = preSolution
20+
HideSolutionNode = FALSE
21+
EndGlobalSection
22+
GlobalSection(ExtensibilityGlobals) = postSolution
23+
SolutionGuid = {6A6DDFF6-2A40-4DEC-8C4A-E736257E30BA}
24+
EndGlobalSection
25+
EndGlobal

‎Custom_Annotation/MainWindow.xaml‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<Window x:Class="Custom_Annotation.MainWindow"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6+
xmlns:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
7+
xmlns:local="clr-namespace:Custom_Annotation"
8+
mc:Ignorable="d">
9+
<Grid>
10+
11+
<Grid.DataContext>
12+
<local:ViewModel/>
13+
</Grid.DataContext>
14+
15+
<chart:SfChart x:Name="chart" Margin="10" >
16+
<chart:SfChart.PrimaryAxis>
17+
<chart:CategoryAxis/>
18+
</chart:SfChart.PrimaryAxis>
19+
20+
<chart:SfChart.SecondaryAxis>
21+
<chart:NumericalAxis/>
22+
</chart:SfChart.SecondaryAxis>
23+
24+
<chart:SfChart.Annotations>
25+
<local:CustomTextAnnotation HorizontalTextAlignment="Stretch" VerticalTextAlignment="Stretch" X1="1.6" X2="1.6" Y1="18" Y2="20" Fill="White" IsHitTestVisible="False" CanDrag="True" CanResize="True">
26+
<local:CustomTextAnnotation.Content>
27+
<StackPanel Orientation="Horizontal">
28+
<Path Data="M16.710899,36.727C20.7409,39.759457 25.747499,41.558827 31.1693,41.558827 36.588501,
29+
41.558827 41.596401,39.759457 45.627602,36.727 55.046902,37.911882 62.335999,
30+
45.946764 62.335999,55.688923L62.335999,64 0,64 0,55.688923C0,45.946764,7.2904,37.911882,
31+
16.710899,36.727z M31.169201,0C40.807137,0 48.622002,7.8164558 48.622002,
32+
17.455803 48.622002,27.095258 40.807137,34.909003 31.169201,34.909003 21.528767,
33+
34.909003 13.715,27.095258 13.715,17.455803 13.715,7.8164558 21.528767,0 31.169201,0z"
34+
Stretch="Uniform" Fill="#606060" Height="50" Width="50"
35+
RenderTransformOrigin="0.5,0.5"/>
36+
<Button Content="Click Me" Width="145" Height="50" Click="Button_Click"/>
37+
</StackPanel>
38+
</local:CustomTextAnnotation.Content>
39+
</local:CustomTextAnnotation>
40+
</chart:SfChart.Annotations>
41+
42+
<chart:ColumnSeries ItemsSource="{Binding Collection}" XBindingPath="XValue" YBindingPath="YValue"/>
43+
</chart:SfChart>
44+
45+
</Grid>
46+
</Window>

‎Custom_Annotation/MainWindow.xaml.cs‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
using Syncfusion.UI.Xaml.Charts;
2+
using System.Windows;
3+
using System.Windows.Controls;
4+
using System.Windows.Data;
5+
6+
namespace Custom_Annotation
7+
{
8+
/// <summary>
9+
/// Interaction logic for MainWindow.xaml
10+
/// </summary>
11+
public partial class MainWindow : Window
12+
{
13+
public MainWindow()
14+
{
15+
InitializeComponent();
16+
}
17+
18+
private void Button_Click(object sender, RoutedEventArgs e)
19+
{
20+
// Can perform any action required
21+
}
22+
}
23+
24+
public class CustomTextAnnotation : RectangleAnnotation
25+
{
26+
public object Content
27+
{
28+
get { return GetValue(ContentProperty); }
29+
set { SetValue(ContentProperty, value); }
30+
}
31+
32+
// Using DependencyProperty as the backing store for TextString. This enables animation, styling, binding, etc...
33+
public static readonly DependencyProperty ContentProperty =
34+
DependencyProperty.Register("Content", typeof(object), typeof(CustomTextAnnotation), new PropertyMetadata(null));
35+
36+
protected override void SetBindings()
37+
{
38+
base.SetBindings(); //You need to invoke this method to make all the default bindings
39+
if (TextElement != null)
40+
{
41+
Binding textBinding = new Binding { Path = new PropertyPath("Content"), Source = this };
42+
//TextElement is content control define internally to display text.
43+
TextElement.SetBinding(ContentControl.ContentProperty, textBinding);
44+
}
45+
}
46+
}
47+
}

‎Custom_Annotation/ViewModel.cs‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Collections.ObjectModel;
4+
using System.Linq;
5+
using System.Text;
6+
using System.Threading.Tasks;
7+
8+
namespace Custom_Annotation
9+
{
10+
public class ViewModel
11+
{
12+
public ObservableCollection<Model> Collection { get; set; }
13+
public ViewModel()
14+
{
15+
Collection = new ObservableCollection<Model>();
16+
17+
Collection.Add(new Model() { XValue = "2009", YValue = 15 });
18+
Collection.Add(new Model() { XValue = "2010", YValue = 20 });
19+
Collection.Add(new Model() { XValue = "2011", YValue = 16 });
20+
Collection.Add(new Model() { XValue = "2012", YValue = 25 });
21+
Collection.Add(new Model() { XValue = "2013", YValue = 22 });
22+
}
23+
}
24+
25+
public class Model
26+
{
27+
public double YValue { get; set; }
28+
public string? XValue { get; set; }
29+
}
30+
}

‎README.md‎

Lines changed: 70 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,70 @@
1-
# How-to-create-custom-annotation-in-WPF-Chart-SfChart
2-
How to create custom annotation in WPF Chart-SfChart
1+
# How to create custom annotation in WPF Chart (SfChart)?
2+
3+
This article explains how to display custom content in WPF SfChart Annotation by following the steps.
4+
5+
**Step 1:** Write a custom class inheriting from [RectangleAnnotation](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.RectangleAnnotation.html) and add the Content property in this class.
6+
7+
**[C#]**
8+
```
9+
public class CustomTextAnnotation : RectangleAnnotation
10+
{
11+
public object Content
12+
{
13+
get { return GetValue(ContentProperty); }
14+
set { SetValue(ContentProperty, value); }
15+
}
16+
17+
// Using DependencyProperty as the backing store for TextString. This enables animation, styling, binding, etc...
18+
public static readonly DependencyProperty ContentProperty = DependencyProperty.Register("Content", typeof(object), typeof(CustomTextAnnotation), new PropertyMetadata(null));
19+
20+
protected override void SetBindings()
21+
{
22+
base.SetBindings(); //You need to invoke this method to make all the default bindings
23+
if (TextElement != null)
24+
{
25+
Binding textBinding = new Binding { Path = new PropertyPath("Content"), Source = this };
26+
//TextElement is content control define internally to display text.
27+
TextElement.SetBinding(ContentControl.ContentProperty, textBinding);
28+
}
29+
}
30+
}
31+
```
32+
33+
**Step 2:** Add the necessary content in the Content property of Annotation.
34+
35+
**[XAML]**
36+
```
37+
<chart:SfChart x:Name="chart" Margin="10" >
38+
<chart:SfChart.PrimaryAxis>
39+
<chart:CategoryAxis/>
40+
</chart:SfChart.PrimaryAxis>
41+
42+
<chart:SfChart.SecondaryAxis>
43+
<chart:NumericalAxis/>
44+
</chart:SfChart.SecondaryAxis>
45+
46+
<chart:SfChart.Annotations>
47+
<local:CustomTextAnnotation HorizontalTextAlignment="Stretch" VerticalTextAlignment="Stretch" X1="1.6" X2="1.6" Y1="18" Y2="20" Fill="White" IsHitTestVisible="False" CanDrag="True" CanResize="True">
48+
<local:CustomTextAnnotation.Content>
49+
<StackPanel Orientation="Horizontal">
50+
<Path Data="M16.710899,36.727C20.7409,39.759457 25.747499,41.558827 31.1693,41.558827 36.588501,
51+
41.558827 41.596401,39.759457 45.627602,36.727 55.046902,37.911882 62.335999,
52+
45.946764 62.335999,55.688923L62.335999,64 0,64 0,55.688923C0,45.946764,7.2904,37.911882,
53+
16.710899,36.727z M31.169201,0C40.807137,0 48.622002,7.8164558 48.622002,
54+
17.455803 48.622002,27.095258 40.807137,34.909003 31.169201,34.909003 21.528767,
55+
34.909003 13.715,27.095258 13.715,17.455803 13.715,7.8164558 21.528767,0 31.169201,0z"
56+
Stretch="Uniform" Fill="#606060" Height="50" Width="50"
57+
RenderTransformOrigin="0.5,0.5"/>
58+
<Button Content="Click Me" Width="145" Height="50" Click="Button_Click"/>
59+
</StackPanel>
60+
</local:CustomTextAnnotation.Content>
61+
</local:CustomTextAnnotation>
62+
</chart:SfChart.Annotations>
63+
64+
<chart:ColumnSeries ItemsSource="{Binding Collection}" XBindingPath="XValue" YBindingPath="YValue"/>
65+
</chart:SfChart>
66+
```
67+
68+
## Output:
69+
70+
![Customized Rectangle Annotation with button](https://user-images.githubusercontent.com/102642528/211318119-488d4bda-402e-450e-ac06-b32592c28313.png)

0 commit comments

Comments
 (0)