Improve export chart kb in WinUI SfChart

README.md

@@ -1,6 +1,27 @@
 # How to Export Chart as Image in WinUI Chart
 This article provides a detailed walkthrough on how to export a [WinUI Cartesian Chart](https://www.syncfusion.com/winui-controls/cartesian-charts) as an image. You can export the chart view in your desired file format, with supported formats being **JPEG** and **PNG.**
 
+The Syncfusion WinUI Chart control supports exporting rendered charts to image formats, enabling developers to preserve visual data for reporting, sharing, or archival purposes.
+
+## Overview
+
+The chart export functionality is exposed via the ExportToImage method in the SfCartesianChart and SfCircularChart classes. This method allows you to capture the current visual state of the chart and save it to a file or stream in various image formats.
+
+## Supported Image Formats
+You can export charts to the following formats:
+- PNG (lossless, widely supported)
+- JPEG (compressed, suitable for web)
+
+## Use Cases
+
+- Business Reporting: Export charts to image files for embedding in PDF or Word documents used in financial or operational reports.
+- Data Sharing: Share chart visuals with stakeholders via email, chat, or collaboration platforms without requiring access to the application.
+- Archival and Compliance: Save chart snapshots as part of audit trails or historical data records for regulatory compliance.
+- Presentation Materials: Include exported chart images in PowerPoint slides or dashboards for meetings and presentations.
+- Offline Access: Provide users with downloadable chart images for viewing when internet or application access is unavailable.
+- Documentation and Tutorials: Use chart images in technical documentation, user guides, or training materials to illustrate data insights.
+- Social Media and Marketing: Share chart visuals on social platforms to highlight trends, performance metrics, or product analytics.
+
 ### Initialize SfCartesianChart:
 
 Set up the **SfCartesianChart** following the [ Syncfusion WinUI Cartesian Chart documentation.](https://help.syncfusion.com/winui/cartesian-charts/getting-started)
@@ -83,6 +104,10 @@ private async void Button_Click(object sender, RoutedEventArgs e)
 
  ![chart.png](https://support.syncfusion.com/kb/agent/attachment/article/18644/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjM0MjMyIiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.VhSO304zS7VSvBDSySJWOBxdySgRK0LWuAdmx3Vl4No)
 
+## Troubleshooting
+
+If you are facing a path too long exception when building this example project, close Visual Studio and rename the repository to short and build the project.
+
 ### KB link 
 For a more detailed, refer to the [Export Chart View as Image KB.](https://support.syncfusion.com/kb/article/18644/how-to-export-chart-as-image-in-winui-chart-sfcartesianchart)
 

WinUISampleDemo/WinUISampleDemo/App.xaml → WinUIExportSample/App.xaml

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <Application
-    x:Class="WinUISampleDemo.App"
+    x:Class="WinUIExportSample.App"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:WinUISampleDemo">
+    xmlns:local="using:WinUIExportSample">
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.MergedDictionaries>

WinUISampleDemo/WinUISampleDemo/App.xaml.cs → WinUIExportSample/App.xaml.cs

@@ -19,20 +19,22 @@
 // To learn more about WinUI, the WinUI project structure,
 // and more about our project templates, see: http://aka.ms/winui-project-info.
 
-namespace WinUISampleDemo
+namespace WinUIExportSample
 {
     /// <summary>
     /// Provides application-specific behavior to supplement the default Application class.
     /// </summary>
     public partial class App : Application
     {
+        private Window? _window;
+
         /// <summary>
         /// Initializes the singleton application object.  This is the first line of authored code
         /// executed, and as such is the logical equivalent of main() or WinMain().
         /// </summary>
         public App()
         {
-            this.InitializeComponent();
+            InitializeComponent();
         }
 
         /// <summary>
@@ -41,10 +43,8 @@ public App()
         /// <param name="args">Details about the launch request and process.</param>
         protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
         {
-            m_window = new MainWindow();
-            m_window.Activate();
+            _window = new MainWindow();
+            _window.Activate();
         }
-
-        private Window? m_window;
     }
 }

WinUIExportSample/MainWindow.xaml

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Window
+    x:Class="WinUIExportSample.MainWindow"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:WinUIExportSample"
+    xmlns:chart="using:Syncfusion.UI.Xaml.Charts"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d"
+    Title="WinUIExportSample">
+
+    <StackPanel Orientation="Vertical" Margin="20">
+        <chart:SfCartesianChart Background="White" x:Name="Chart" Height="500" IsTransposed="True" Header="Daily Water Consumption Tracking">
+
+            <chart:SfCartesianChart.DataContext>
+                <local:ViewModel/>
+            </chart:SfCartesianChart.DataContext>
+
+            <chart:SfCartesianChart.XAxes>
+                <chart:CategoryAxis Header="Days" PlotOffsetEnd="20"/>
+            </chart:SfCartesianChart.XAxes>
+
+            <chart:SfCartesianChart.YAxes>
+                <chart:NumericalAxis Header="In Liters" Maximum="4.4"/>
+            </chart:SfCartesianChart.YAxes>
+
+            <chart:ColumnSeries ItemsSource="{Binding DailyWaterIntake}"
+                        XBindingPath="Day" 
+                        YBindingPath="Liters"
+                        ShowDataLabels="True">
+                <chart:ColumnSeries.DataLabelSettings>
+                    <chart:CartesianDataLabelSettings Position="Inner"/>
+                </chart:ColumnSeries.DataLabelSettings>
+            </chart:ColumnSeries>
+        </chart:SfCartesianChart>
+        <Button x:Name="button" Content="Export as Image" Click="Button_Click" HorizontalAlignment="Center"
+            VerticalAlignment="Center" Background="#0099cc" Margin="0,20,0,0"/>
+    </StackPanel>
+</Window>

WinUISampleDemo/WinUISampleDemo/MainWindow.xaml.cs → WinUIExportSample/MainWindow.xaml.cs

@@ -1,11 +1,3 @@
-using System;
-using System.Collections.Generic;
-using System.IO;
-using System.Linq;
-using System.Runtime.InteropServices.WindowsRuntime;
-using System.Threading.Tasks;
-
-using Microsoft.UI;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
 using Microsoft.UI.Xaml.Controls.Primitives;
@@ -14,9 +6,13 @@
 using Microsoft.UI.Xaml.Media;
 using Microsoft.UI.Xaml.Media.Imaging;
 using Microsoft.UI.Xaml.Navigation;
-
 using Syncfusion.UI.Xaml.Charts;
-
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using System.Threading.Tasks;
 using Windows.Foundation;
 using Windows.Foundation.Collections;
 using Windows.Graphics.Imaging;
@@ -25,7 +21,7 @@
 // To learn more about WinUI, the WinUI project structure,
 // and more about our project templates, see: http://aka.ms/winui-project-info.
 
-namespace WinUISampleDemo
+namespace WinUIExportSample
 {
     /// <summary>
     /// An empty window that can be used on its own or navigated to within a Frame.
@@ -34,7 +30,7 @@ public sealed partial class MainWindow : Window
     {
         public MainWindow()
         {
-            this.InitializeComponent();
+            InitializeComponent();
         }
 
         private async void Button_Click(object sender, RoutedEventArgs e)
@@ -63,7 +59,7 @@ private async Task SaveAsImageAsync(SfCartesianChart chart, string fileName)
 
             // Choose image save path
             var folder = await Windows.Storage.StorageFolder.GetFolderFromPathAsync(@"D:\");
-            var picturesFolder = await folder.CreateFileAsync( fileName, Windows.Storage.CreationCollisionOption.ReplaceExisting);
+            var picturesFolder = await folder.CreateFileAsync(fileName, Windows.Storage.CreationCollisionOption.ReplaceExisting);
 
 
             // Encode the image

WinUISampleDemo/WinUISampleDemo/Package.appxmanifest → WinUIExportSample/Package.appxmanifest

@@ -8,15 +8,15 @@
   IgnorableNamespaces="uap rescap">
 
   <Identity
-    Name="c6b45550-53b2-4e2f-8810-b136147c96c7"
-    Publisher="CN=SowndharyaSelladurai"
+    Name="ac72be13-9ee1-4cb9-b2a4-fee64fdcb32a"
+    Publisher="CN=NitheeshkumarThangar"
     Version="1.0.0.0" />
 
-  <mp:PhoneIdentity PhoneProductId="c6b45550-53b2-4e2f-8810-b136147c96c7" PhonePublisherId="00000000-0000-0000-0000-000000000000"/>
+  <mp:PhoneIdentity PhoneProductId="ac72be13-9ee1-4cb9-b2a4-fee64fdcb32a" PhonePublisherId="00000000-0000-0000-0000-000000000000"/>
 
   <Properties>
-    <DisplayName>WinUISampleDemo</DisplayName>
-    <PublisherDisplayName>SowndharyaSelladurai</PublisherDisplayName>
+    <DisplayName>WinUIExportSample</DisplayName>
+    <PublisherDisplayName>NitheeshkumarThangar</PublisherDisplayName>
     <Logo>Assets\StoreLogo.png</Logo>
   </Properties>
 
@@ -34,8 +34,8 @@
       Executable="$targetnametoken$.exe"
       EntryPoint="$targetentrypoint$">
       <uap:VisualElements
-        DisplayName="WinUISampleDemo"
-        Description="WinUISampleDemo"
+        DisplayName="WinUIExportSample"
+        Description="WinUIExportSample"
         BackgroundColor="transparent"
         Square150x150Logo="Assets\Square150x150Logo.png"
         Square44x44Logo="Assets\Square44x44Logo.png">

WinUISampleDemo/WinUISampleDemo/Properties/launchSettings.json → WinUIExportSample/Properties/launchSettings.json

@@ -1,9 +1,9 @@
 {
   "profiles": {
-    "WinUISampleDemo (Package)": {
+    "WinUIExportSample (Package)": {
       "commandName": "MsixPackage"
     },
-    "WinUISampleDemo (Unpackaged)": {
+    "WinUIExportSample (Unpackaged)": {
       "commandName": "Project"
     }
   }

WinUISampleDemo/WinUISampleDemo/ViewModel.cs → WinUIExportSample/ViewModel.cs

@@ -1,8 +1,7 @@
-
-using System.Collections.Generic;
+using System.Collections.Generic;
 using System.Collections.ObjectModel;
 
-namespace WinUISampleDemo
+namespace WinUIExportSample
 {
     public class ViewModel
     {

WinUISampleDemo/WinUISampleDemo/WinUISampleDemo.csproj → WinUIExportSample/WinUIExportSample.csproj

@@ -1,9 +1,9 @@
 <Project Sdk="Microsoft.NET.Sdk">
   <PropertyGroup>
     <OutputType>WinExe</OutputType>
-    <TargetFramework>net8.0-windows10.0.19041.0</TargetFramework>
+    <TargetFramework>net9.0-windows10.0.19041.0</TargetFramework>
     <TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>
-    <RootNamespace>WinUISampleDemo</RootNamespace>
+    <RootNamespace>WinUIExportSample</RootNamespace>
     <ApplicationManifest>app.manifest</ApplicationManifest>
     <Platforms>x86;x64;ARM64</Platforms>
     <RuntimeIdentifiers>win-x86;win-x64;win-arm64</RuntimeIdentifiers>
@@ -36,8 +36,8 @@
     <ProjectCapability Include="Msix" />
   </ItemGroup>
   <ItemGroup>
-    <PackageReference Include="Microsoft.Windows.SDK.BuildTools" Version="10.0.26100.1742" />
-    <PackageReference Include="Microsoft.WindowsAppSDK" Version="1.6.241114003" />
+    <PackageReference Include="Microsoft.Windows.SDK.BuildTools" Version="10.0.26100.4948" />
+    <PackageReference Include="Microsoft.WindowsAppSDK" Version="1.7.250606001" />
     <PackageReference Include="Syncfusion.Chart.WinUI" Version="*" />
   </ItemGroup>
 

WinUIExportSample/WinUIExportSample.sln

@@ -0,0 +1,43 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.14.36301.6 d17.14
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "WinUIExportSample", "WinUIExportSample.csproj", "{475F6094-CB09-4D70-81BD-E61478CD7079}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|ARM64 = Debug|ARM64
+		Debug|x64 = Debug|x64
+		Debug|x86 = Debug|x86
+		Release|ARM64 = Release|ARM64
+		Release|x64 = Release|x64
+		Release|x86 = Release|x86
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{475F6094-CB09-4D70-81BD-E61478CD7079}.Debug|ARM64.ActiveCfg = Debug|ARM64
+		{475F6094-CB09-4D70-81BD-E61478CD7079}.Debug|ARM64.Build.0 = Debug|ARM64
+		{475F6094-CB09-4D70-81BD-E61478CD7079}.Debug|ARM64.Deploy.0 = Debug|ARM64
+		{475F6094-CB09-4D70-81BD-E61478CD7079}.Debug|x64.ActiveCfg = Debug|x64
+		{475F6094-CB09-4D70-81BD-E61478CD7079}.Debug|x64.Build.0 = Debug|x64
+		{475F6094-CB09-4D70-81BD-E61478CD7079}.Debug|x64.Deploy.0 = Debug|x64
+		{475F6094-CB09-4D70-81BD-E61478CD7079}.Debug|x86.ActiveCfg = Debug|x86
+		{475F6094-CB09-4D70-81BD-E61478CD7079}.Debug|x86.Build.0 = Debug|x86
+		{475F6094-CB09-4D70-81BD-E61478CD7079}.Debug|x86.Deploy.0 = Debug|x86
+		{475F6094-CB09-4D70-81BD-E61478CD7079}.Release|ARM64.ActiveCfg = Release|ARM64
+		{475F6094-CB09-4D70-81BD-E61478CD7079}.Release|ARM64.Build.0 = Release|ARM64
+		{475F6094-CB09-4D70-81BD-E61478CD7079}.Release|ARM64.Deploy.0 = Release|ARM64
+		{475F6094-CB09-4D70-81BD-E61478CD7079}.Release|x64.ActiveCfg = Release|x64
+		{475F6094-CB09-4D70-81BD-E61478CD7079}.Release|x64.Build.0 = Release|x64
+		{475F6094-CB09-4D70-81BD-E61478CD7079}.Release|x64.Deploy.0 = Release|x64
+		{475F6094-CB09-4D70-81BD-E61478CD7079}.Release|x86.ActiveCfg = Release|x86
+		{475F6094-CB09-4D70-81BD-E61478CD7079}.Release|x86.Build.0 = Release|x86
+		{475F6094-CB09-4D70-81BD-E61478CD7079}.Release|x86.Deploy.0 = Release|x86
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {D3FF091C-39D9-4C1C-A9D3-5F8EA368BE6D}
+	EndGlobalSection
+EndGlobal

WinUISampleDemo/WinUISampleDemo/app.manifest → WinUIExportSample/app.manifest

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <assembly manifestVersion="1.0" xmlns="urn:schemas-microsoft-com:asm.v1">
-  <assemblyIdentity version="1.0.0.0" name="WinUISampleDemo.app"/>
+  <assemblyIdentity version="1.0.0.0" name="WinUIExportSample.app"/>
 
   <compatibility xmlns="urn:schemas-microsoft-com:compatibility.v1">
     <application>