909488 - Improve UG content, replace all existing images in WPF surface chart control.

wpf/Surface-Chart/ColorBar.md

@@ -18,9 +18,12 @@ Color bar can either show or hide the labels and this can be done using the [`Sh
 
 {% highlight xaml %}
 
-    <chart:SfSurfaceChart ItemsSource="{Binding DataValues}"  XBindingPath="X"  
-                              YBindingPath="Y" ZBindingPath="Z" RowSize="{Binding RowSize}"
-                              ColumnSize="{Binding ColumnSize}">
+    <chart:SfSurfaceChart ItemsSource="{Binding DataValues}"  
+                          XBindingPath="X"  
+                          YBindingPath="Y" 
+                          ZBindingPath="Z" 
+                          RowSize="{Binding RowSize}"
+                          ColumnSize="{Binding ColumnSize}">
 
             <chart:SfSurfaceChart.ColorBar>
                 <chart:ChartColorBar ShowLabel="True" DockPosition="Right"></chart:ChartColorBar>

wpf/Surface-Chart/Data-Binding.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Data Binding in WPF Surface Chart (SfSurfaceChart)
 
-In surface chart, you cane apply data in a grid table format, that contains the number of rows and columns as shown in the following table. 
+In surface chart, data can be applied in a grid format, with a specified number of rows and columns as shown in the following table. 
 
 <table>
 <tr>
@@ -49,16 +49,16 @@ Y<sub>n2</sub></td><td>
 Y<sub>nn</sub></td></tr>
 </table>
 
-You can apply the data in surface in two ways. 
+You can apply data to the surface chart in two ways. 
 
 * Using ItemsSource property 
 * Directly passing value through Data.AddPoints method.
 
 ### Using ItemsSource
 
-You can bind the IEnumerable collection property to the [`ItemsSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfSurfaceChart.html#Syncfusion_UI_Xaml_Charts_SfSurfaceChart_ItemsSource) property of a surface chart. Each item holds the model properties that are used to map surface [`XBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfSurfaceChart.html#Syncfusion_UI_Xaml_Charts_SfSurfaceChart_XBindingPath), [`YBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfSurfaceChart.html#Syncfusion_UI_Xaml_Charts_SfSurfaceChart_YBindingPath) and [`ZBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfSurfaceChart.html#Syncfusion_UI_Xaml_Charts_SfSurfaceChart_ZBindingPath) property. 
+You can bind an IEnumerable collection to the [`ItemsSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfSurfaceChart.html#Syncfusion_UI_Xaml_Charts_SfSurfaceChart_ItemsSource) property of the surface chart. Each item contains model properties that map to the [`XBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfSurfaceChart.html#Syncfusion_UI_Xaml_Charts_SfSurfaceChart_XBindingPath),  [`YBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfSurfaceChart.html#Syncfusion_UI_Xaml_Charts_SfSurfaceChart_YBindingPath) and [`ZBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfSurfaceChart.html#Syncfusion_UI_Xaml_Charts_SfSurfaceChart_ZBindingPath) properties. 
 
-Also, you must set the given data row and column size to surface chart [`RowSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfSurfaceChart.html#Syncfusion_UI_Xaml_Charts_SfSurfaceChart_RowSize) and [`ColumnSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfSurfaceChart.html#Syncfusion_UI_Xaml_Charts_SfSurfaceChart_ColumnSize) Properties. 
+You must also set the data's row and column size using the surface chart's [`RowSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfSurfaceChart.html#Syncfusion_UI_Xaml_Charts_SfSurfaceChart_RowSize) and [`ColumnSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfSurfaceChart.html#Syncfusion_UI_Xaml_Charts_SfSurfaceChart_ColumnSize) properties.
 
 {% tabs %}
 
@@ -68,9 +68,12 @@ Also, you must set the given data row and column size to surface chart [`RowSize
      <local:ViewModel />	 
     </Grid.DataContext>
 
-         <chart:SfSurfaceChart ItemsSource="{Binding DataValue}"  XBindingPath="X"  
-                              YBindingPath="Y" ZBindingPath="Z" RowSize="{Binding RowSize}"
-                              ColumnSize="{Binding ColumnSize}">
+         <chart:SfSurfaceChart ItemsSource="{Binding DataValue}"  
+                               XBindingPath="X"  
+                               YBindingPath="Y" 
+                               ZBindingPath="Z" 
+                               RowSize="{Binding RowSize}"
+                               ColumnSize="{Binding ColumnSize}">
         </chart:SfSurfaceChart>    
 
 {% endhighlight %}

wpf/Surface-Chart/Getting-Started.md

@@ -18,8 +18,8 @@ The following image helps you understand various elements in SfSurfaceChart when
 ![Visual Structure](surface_chart_images/surface_chart_img2.jpeg)
 
 
-* Surface Header – Represents the title of surface chart
-* Wall – Represents the wall that bounds the surface chart. 
+* Surface Header – Represents the title of surface chart.
+* Wall – Represents the sides that enclose the surface chart.
 * Major Gridlines- Represents the surface axis gridline for surface chart.
 * Color Bar- Displays the value range in color for surface chart. 
 * Axis Label- Displays the label for surface axis. 
@@ -53,11 +53,21 @@ You need to initialize the surface chart from the following namespace Syncfusion
 {% tabs %}
 
 {% highlight xaml %}
+<Window x:Class="GettingStarted.MainWindow"
+        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:local="clr-namespace:GettingStarted"
+        xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
+        xmlns:system="clr-namespace:System;assembly=mscorlib"  
+    WindowStartupLocation="CenterScreen">
+    <Grid>
+        <syncfusion:SfSurfaceChart>
 
-       <syncfusion:SfSurfaceChart>
-
-       </syncfusion:SfSurfaceChart>
-
+        </syncfusion:SfSurfaceChart>
+    </Grid>
+</Window>
 {% endhighlight %}
 
 {% endtabs %}
@@ -178,13 +188,17 @@ After you populate the data to the chart, you can bind the properties as shown i
 
 {% highlight xaml %}
 
-       <syncfusion:SfSurfaceChart ItemsSource="{Binding DataValues}"  XBindingPath="X"   
-
-                 YBindingPath="Y" ZBindingPath="Z" 
+       <syncfusion:SfSurfaceChart ItemsSource="{Binding DataValues}"  
+
+                                  XBindingPath="X"   
+
+                                  YBindingPath="Y" 
+
+                                  ZBindingPath="Z" 
 
-                 RowSize="{Binding RowSize}" 
+                                  RowSize="{Binding RowSize}" 
 
-                 ColumnSize="{Binding ColumnSize}" >
+                                  ColumnSize="{Binding ColumnSize}" >
 
 {% endhighlight %}
 
@@ -212,9 +226,12 @@ The following code example illustrates how to add XAxis, YAxis and ZAxis to the
 
 {% highlight xaml %}
 
-       <syncfusion:SfSurfaceChart ItemsSource="{Binding DataValues}"  XBindingPath="X"  
-                              YBindingPath="Y" ZBindingPath="Z" RowSize="{Binding RowSize}"
-                              ColumnSize="{Binding ColumnSize}">
+       <syncfusion:SfSurfaceChart ItemsSource="{Binding DataValues}"  
+                                  XBindingPath="X"  
+                                  YBindingPath="Y" 
+                                  ZBindingPath="Z" 
+                                  RowSize="{Binding RowSize}"
+                                  ColumnSize="{Binding ColumnSize}">
 
             <syncfusion:SfSurfaceChart.XAxis>
 
@@ -238,6 +255,41 @@ The following code example illustrates how to add XAxis, YAxis and ZAxis to the
 
 {% endhighlight %}
 
+{% highlight c# %}
+public class SurfaceChartViewModel
+{
+
+    public ObservableCollection<Data> DataValues { get; set; }
+
+    public int RowSize { get; set; }
+
+    public int ColumnSize { get; set; }
+
+    public SurfaceChartViewModel()
+    {
+        DataValues = new ObservableCollection<Data>();
+
+        // Adding data points
+        DataValues.Add(new Data() { X = 0, Y = 3, Z = 0 });
+        DataValues.Add(new Data() { X = 0, Y = 2, Z = 1 });
+        DataValues.Add(new Data() { X = 0, Y = 1, Z = 2 });
+
+        DataValues.Add(new Data() { X = 1, Y = 2, Z = 0 });
+        DataValues.Add(new Data() { X = 1, Y = 1, Z = 1 });
+        DataValues.Add(new Data() { X = 1, Y = 2, Z = 2 });
+
+        DataValues.Add(new Data() { X = 2, Y = 1, Z = 0 });
+        DataValues.Add(new Data() { X = 2, Y = 2, Z = 1 });
+        DataValues.Add(new Data() { X = 2, Y = 3, Z = 2 });
+
+        // Set row and column size
+        RowSize = 3;
+        ColumnSize = 3;
+    }
+}
+
+{% endhighlight %}
+
 {% endtabs %}
 
 N> SfSurfaceChart supports default axes, all the axes are generated automatically, even when it has not been defined explicitly.
@@ -278,13 +330,17 @@ Now you have created a simple surface chart. The following code example is for X
 
        <syncfusion:SfSurfaceChart Type="Surface"  Tilt="15" Rotate="30"
 
-                           ItemsSource="{Binding DataValues}"  XBindingPath="X"    
+                                  ItemsSource="{Binding DataValues}"  
+
+                                  XBindingPath="X"    
 
-                           YBindingPath="Y" ZBindingPath="Z" 
+                                  YBindingPath="Y"
+
+                                  ZBindingPath="Z" 
 
-                           RowSize="{Binding RowSize}" 
+                                  RowSize="{Binding RowSize}" 
 
-                           ColumnSize="{Binding ColumnSize}">
+                                  ColumnSize="{Binding ColumnSize}">
 
             <syncfusion:SfSurfaceChart.XAxis>
 
@@ -349,7 +405,7 @@ SfSurfaceChart surface = new SfSurfaceChart();
 
 ### Add Data to surface chart
 
-You can set the surface chart data in code behind, by directly adding data points to the Data property of surface chart using **AddPoints****(****x****,****y****,****z****)** method as shown in the following code example.
+To add data to the surface chart in the code-behind, use the  **AddPoints****(****x****,****y****,****z****)** method to insert data into the Data property. After setting the data points, specify the chart's row and column sizes,
 
 {% highlight c# %}
 

wpf/Surface-Chart/Overview.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # WPF Surface Chart (SfSurfaceChart) Overview
 
-Essential Surface Chart shows a three-dimensional surface that connects a set of data points.  
+Essential Surface Chart shows a three-dimensional surface used to display the relationship between three variables (X, Y, and Z). It is particularly useful for analyzing and presenting complex data sets where two dimensions (X and Y) are related to a third variable (Z). 
 
 ![WPF Surface Chart overview.](surface_chart_images/wpf-surface-chart-overview.jpeg)
 

wpf/Surface-Chart/Surface-Area.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Surface Area in WPF Surface Chart (SfSurfaceChart)
 
-Surface area represents the entire surface chart and all its elements. It's a virtual rectangle area that includes all the surface elements like axis, color bar, wall etc. 
+Surface area represents the entire surface chart and all its elements, such as the axis, color bar and walls.It is a virtual rectangular space that contains these elements.
 
 The surface chart can be customized to enrich your application’s look and feel. SfSurfaceChat provides API’s to customize surface area based on your requirement. This section explains about the elements and API for common customization of surface area.
 
@@ -126,17 +126,27 @@ Gets or sets the bool value that represents a value whether to show the contour
 Gets or sets the double value that represents a value of brush count in surface chart.  <br/><br/></td></tr>
 </table>
 
-The following code sample explains the customization of surface area.
+The following code sample explains the customization of the surface area. This customization of the SfSurfaceChart sets up a wireframe 3D surface chart that dynamically binds to data from the view model. It enhances the visual appearance with custom colors, rotation, tilt, and a perspective projection
 
 {% tabs %}
 
 {% highlight xaml %}
 
-            <chart:SfSurfaceChart ItemsSource="{Binding DataValues}"  XBindingPath="X"  Type="WireframeSurface"
-                              YBindingPath="Y" ZBindingPath="Z" RowSize="{Binding RowSize}"
-                              ColumnSize="{Binding ColumnSize}" ApplyGradientBrush="True" BrushCount="4"
-                              LeftWallBrush="BlanchedAlmond" WireframeStroke="Green" WireframeStrokeThickness="1"
-                              CameraProjection="Perspective" Tilt="10" Rotate="20">
+            <chart:SfSurfaceChart ItemsSource="{Binding DataValues}"            
+                                  Type="WireframeSurface"
+                                  XBindingPath="X" 
+                                  YBindingPath="Y" 
+                                  ZBindingPath="Z" 
+                                  RowSize="{Binding RowSize}"
+                                  ColumnSize="{Binding ColumnSize}" 
+                                  ApplyGradientBrush="True" 
+                                  BrushCount="4"
+                                  LeftWallBrush="BlanchedAlmond" 
+                                  WireframeStroke="Green" 
+                                  WireframeStrokeThickness="1"
+                                  CameraProjection="Perspective" 
+                                  Tilt="10" 
+                                  Rotate="20">
             </chart:SfSurfaceChart>
 
 {% endhighlight %}

wpf/Surface-Chart/Surface-Axis.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Surface Axis in WPF Surface Chart (SfSurfaceChart)
 
-SurfaceAxis is used to locate a data point inside the surface area. In surface, you require three axis to locate data points, such as X-Axis, Y-Axis and Z-Axis. You can define axis in surface using the following code example. If you do not define the axis, then it automatically takes the default axis with default properties values.
+SurfaceAxis is used to locate a data point inside the surface area. In surface, you require three axis to locate data points, such as X-Axis, Y-Axis and Z-Axis. You can define axis in surface using the following code example.  If no axis is defined, the chart will automatically use the default axes with preset property values.
 
 XAML:
 

wpf/Surface-Chart/Surface-Types.md

@@ -18,17 +18,21 @@ Essential Surface Chart provides the following types to plot three dimensional d
 
 ### Surface
 
-Surface charts are used to explore the relationship between three dimensional data. 
+Surface charts are used to visualize the relationship between three-dimensional data.
 
-The following code shows how to set the type of surface.
+The following code demonstrates how to set the surface type.
 
 {% tabs %}
 
 {% highlight xaml %}
 
-    <chart:SfSurfaceChart ItemsSource="{Binding DataValues}"  XBindingPath="X"  Type="Surface"
-                              YBindingPath="Y" ZBindingPath="Z" RowSize="{Binding RowSize}"
-                              ColumnSize="{Binding ColumnSize}" >
+    <chart:SfSurfaceChart ItemsSource="{Binding DataValues}"                              
+                          Type="Surface" 
+                          XBindingPath="X"
+                          YBindingPath="Y" 
+                          ZBindingPath="Z" 
+                          RowSize="{Binding RowSize}"
+                          ColumnSize="{Binding ColumnSize}" >
     </chart:SfSurfaceChart>
 
 {% endhighlight %}
@@ -49,7 +53,7 @@ The following code shows how to set the type of surface.
 
 {% endtabs %}
 
-The following code specifies the view model data bound to the chart for surface type.
+The following code specifies the view model data bound to the chart for defining the surface type.
 
 {% highlight c# %}
 
@@ -99,9 +103,13 @@ You can draw the wireframe or mesh, for the surface chart.
 
 {% highlight xaml %}
 
-    <chart:SfSurfaceChart ItemsSource="{Binding DataValues}"  XBindingPath="X"  Type="WireframeSurface"
-                              YBindingPath="Y" ZBindingPath="Z" RowSize="{Binding RowSize}"
-                              ColumnSize="{Binding ColumnSize}" >
+    <chart:SfSurfaceChart ItemsSource="{Binding DataValues}"  
+                          XBindingPath="X"  
+                          Type="WireframeSurface"
+                          YBindingPath="Y" 
+                          ZBindingPath="Z" 
+                          RowSize="{Binding RowSize}"
+                          ColumnSize="{Binding ColumnSize}" >
     </chart:SfSurfaceChart>
 
 {% endhighlight %}
@@ -132,8 +140,13 @@ Viewing the surface chart from the top is called contour. It is a graphical tech
 
 {% highlight xaml %}
 
-        <chart:SfSurfaceChart ItemsSource="{Binding DataValues}"  XBindingPath="X"  Type="Contour" Rotate="0"
-                              YBindingPath="Y" ZBindingPath="Z" RowSize="{Binding RowSize}"
+        <chart:SfSurfaceChart ItemsSource="{Binding DataValues}"                                 
+                              Type="Contour" 
+                              Rotate="0"
+                              YBindingPath="Y" 
+                              XBindingPath="X"
+                              ZBindingPath="Z" 
+                              RowSize="{Binding RowSize}"
                               ColumnSize="{Binding ColumnSize}" >
 
             <chart:SfSurfaceChart.ColorBar>
@@ -195,8 +208,13 @@ You can draw the wireframe or mesh for the contour chart
 
 {% highlight xaml %}
 
-        <chart:SfSurfaceChart ItemsSource="{Binding DataValues}"  XBindingPath="X"  Type="WireframeContour"
-                              YBindingPath="Y" ZBindingPath="Z" RowSize="{Binding RowSize}" Rotate="0"
+        <chart:SfSurfaceChart ItemsSource="{Binding DataValues}"                                 
+                              Type="WireframeContour"
+                              XBindingPath="X"
+                              YBindingPath="Y" 
+                              ZBindingPath="Z" 
+                              RowSize="{Binding RowSize}" 
+                              Rotate="0"
                               ColumnSize="{Binding ColumnSize}" > 
 
             <chart:SfSurfaceChart.ColorBar>