diff --git a/wpf/OLAP-Chart/Appearance.md b/wpf/OLAP-Chart/Appearance.md index d173bdf962..25271db9a8 100644 --- a/wpf/OLAP-Chart/Appearance.md +++ b/wpf/OLAP-Chart/Appearance.md @@ -15,7 +15,7 @@ The OLAP chart supports customizing the appearance of charts. You can customize The OLAP chart provides options to set the chart type, chart color, chart legend position, chart legend, and legend check box visibility: -* **ChartType**: Sets the chart type for the OLAP chart control. +* [ChartType](https://help.syncfusion.com/cr/wpf/Syncfusion.Olap.Reports.ChartAppearanceSettings.html#Syncfusion_Olap_Reports_ChartAppearanceSettings_ChartType): Sets the chart type for the OLAP chart control. * **ColorModel.Palette**: Specifies the chart color for the OLAP chart control. * **Legend.Visibility**: Specifies the visibility of the chart legend. * **Legend.CheckBoxVisibility**: Specifies the visibility of the chart legend check box. diff --git a/wpf/OLAP-Chart/Area.md b/wpf/OLAP-Chart/Area.md index d593c62cbe..d96bff659d 100644 --- a/wpf/OLAP-Chart/Area.md +++ b/wpf/OLAP-Chart/Area.md @@ -39,7 +39,7 @@ N> The series will be available only after data is bound to the control. In othe ## Area customization -An OLAp area is basically derived from the ChartArea class belonging to the base chart WPF control. So, the customization options are available in the chart area. However, 3D charts and multiple chart areas are not supported in an OLAP chart. So, those customizations are not applicable. +An OLAP area is basically derived from the ChartArea class belonging to the base chart WPF control. So, the customization options are available in the chart area. However, 3D charts and multiple chart areas are not supported in an OLAP chart. So, those customizations are not applicable. The following are the frequently used customization options that are available in the chart area. diff --git a/wpf/OLAP-Chart/Axes.md b/wpf/OLAP-Chart/Axes.md index e9ad6fd698..692d2c668e 100644 --- a/wpf/OLAP-Chart/Axes.md +++ b/wpf/OLAP-Chart/Axes.md @@ -13,7 +13,7 @@ An OLAP area contains two axes, the primary axis and secondary axis, in an OLAP ## Grid lines customization -In general, for column type charts, the horizontal grid line belongs to the secondary axis. To disable the horizontal grid lines for these types of charts, you should use the `ShowGridLinesProperty` of the secondary axis. +In general, for column type charts, the horizontal grid lines belong to the secondary axis. To disable the horizontal grid lines for these types of charts, you should use the `ShowGridLinesProperty` of the secondary axis. The following illustration describes how the chart will look after the horizontal grid lines are disabled. @@ -39,7 +39,7 @@ Me.olapChart.Series(0).Area.SecondaryAxis.SetValue(ChartArea.ShowGridLinesProper N> For bar type charts, such as bar, stacking bar, and stacking 100 bar, you can disable the horizontal grid lines by using the `ShowGridLinesProperty` of the primary axis. -In general, for column type charts, the vertical grid line belongs to the primary axis. To disable the vertical grid lines for these types of charts, you should use the `ShowGridLinesProperty` of the primary axis. +In general, for column type charts, the vertical grid lines belong to the primary axis. To disable the vertical grid lines for these types of charts, you should use the `ShowGridLinesProperty` of the primary axis. The following illustration describes how the chart will look after the vertical grid lines are disabled. diff --git a/wpf/OLAP-Chart/Chart-Types.md b/wpf/OLAP-Chart/Chart-Types.md index 307f1b15cf..e7de6647e1 100644 --- a/wpf/OLAP-Chart/Chart-Types.md +++ b/wpf/OLAP-Chart/Chart-Types.md @@ -104,7 +104,7 @@ A sample demo is available at the following location. ## Stacking column 100 chart -Stacking column 100 chart is a simple form of chart. Like stacking column chart, the stacking column 100 chart also contains segments in each series, which is added to equate each series to 100%. This chart type is widely used for proportional analysis over a particular period of time. +Stacking column 100 chart is a simple form of chart. Like the stacking column chart, the stacking column 100 chart also contains segments in each series, which are added to equate each series to 100%. This chart type is widely used for proportional analysis over a particular period of time. ![StackingColumn100 chart](Chart-types_images/Chart-types_img3.png) @@ -140,7 +140,7 @@ A sample demo is available at the following location. ## Bar chart -The bar chart is same as the column chart, but it can be rotated to 90 degrees in the clockwise direction. This chart type is widely used for comparison analysis over a particular period of time. +The bar chart is the same as the column chart, but it can be rotated to 90 degrees in the clockwise direction. This chart type is widely used for comparison analysis over a particular period of time. ![Bar chart](Chart-types_images/Chart-types_img4.png) @@ -176,7 +176,7 @@ A sample demo is available at the following location. ## Stacking bar chart -Stacking bar chart functions same as the stacking column chart, but it can be rotated to 90 degrees in the clockwise direction. This chart type is widely used for proportional analysis over a particular period of time. +The stacking bar chart functions the same as the stacking column chart, but it can be rotated to 90 degrees in the clockwise direction. This chart type is widely used for proportional analysis over a particular period of time. ![StackingBar chart](Chart-types_images/Chart-types_img5.png) @@ -212,7 +212,7 @@ A sample demo is available at the following location. ## Stacking bar 100 chart -The stacking bar 100 chart functions same as the stacking column 100 chart, but it can be rotated to 90 degrees in the clockwise direction. This chart type is widely used for proportional analysis over a particular period of time. +The stacking bar 100 chart functions the same as the stacking column 100 chart, but it can be rotated to 90 degrees in the clockwise direction. This chart type is widely used for proportional analysis over a particular period of time. ![StackingBar100 chart](Chart-types_images/Chart-types_img6.png) @@ -392,7 +392,7 @@ A sample demo is available at the following location. ## Line chart -The line chart is a simple form of chart, which connects a series of data points. Usually, it is used for Trend analysis, Forecasting, or in the case of large data points. +The line chart is a simple form of chart, which connects a series of data points. Usually, it is used for trend analysis, forecasting, or in the case of large data points. ![Line chart](Chart-types_images/Chart-types_img11.png) @@ -536,7 +536,7 @@ A sample demo is available at the following location. ## Scatter chart -The scatter chart is a collection of points plotted in the rectangular co-ordinate system. It is often used in relationship analysis upto one independent variable. +The scatter chart is a collection of points plotted in the rectangular co-ordinate system. It is often used in relationship analysis up to one independent variable. ![Scatter chart](Chart-types_images/Chart-types_img15.png) diff --git a/wpf/OLAP-Chart/Drill-Operation.md b/wpf/OLAP-Chart/Drill-Operation.md index 34d716e9f6..6d90cd1854 100644 --- a/wpf/OLAP-Chart/Drill-Operation.md +++ b/wpf/OLAP-Chart/Drill-Operation.md @@ -25,7 +25,7 @@ A sample demo is available at the following location. ## Drill position -Drill position allows users to drill only the current position of a selected member and it will exclude the drilled data of the selected member in other positions by using the MDX query. It can be enabled by setting the **"DrillType"** enumeration to **"DrillPosition"** in the OLAP report. +Drill position allows users to drill only the current position of a selected member and it will exclude the drilled data of the selected member in other positions by using the MDX query. It can be enabled by setting the [DrillType](https://help.syncfusion.com/cr/wpf/Syncfusion.Olap.Reports.OlapReport.html#Syncfusion_Olap_Reports_OlapReport_DrillType) enumeration to **"DrillPosition"** in the OLAP report. {% tabs %} @@ -49,7 +49,7 @@ A sample demo is available at the following location. ## Show/hide expanders -The visibility of expanders in the OLAP chart can be toggled by using the `ShowExpanders` property available in the OLAP report. +The visibility of expanders in the OLAP chart can be toggled by using the [ShowExpanders](https://help.syncfusion.com/cr/wpf/Syncfusion.Olap.Reports.OlapReport.html#Syncfusion_Olap_Reports_OlapReport_ShowExpanders) property available in the OLAP report. {% tabs %} diff --git a/wpf/OLAP-Chart/Exporting.md b/wpf/OLAP-Chart/Exporting.md index f6f3dcc93e..893b72d8e0 100644 --- a/wpf/OLAP-Chart/Exporting.md +++ b/wpf/OLAP-Chart/Exporting.md @@ -31,13 +31,13 @@ The OLAP chart can be copied to the clipboard or exported as an image. It can be ## Exporting to Word document -The OLAP chart for WPF supports exporting an OLAP chart to an Microsoft Word document. It can also be exported into a template Word document file at a position specified by a marker. +The OLAP chart for WPF supports exporting an OLAP chart to a Microsoft Word document. It can also be exported into a template Word document file at a position specified by a marker. The following methods are used to export an OLAP chart to a Microsoft Word document: ### Methods -* **ExportIntoNewDoc**: Exports a chart to a new Word document file with specified file name. +* **ExportIntoNewDoc**: Exports a chart to a new Word document file with the specified file name. * **ExportIntoTemplateDoc**: Exports a chart to an existing Word document file in the default marker string location. * **ExportIntoTemplateDoc**: Exports a chart to an existing Word document file in the given marker string location. * **ExportIntoTemplateDoc**: Exports a chart to an existing instance of a Word document in the default marker string location. diff --git a/wpf/OLAP-Chart/Getting-Started.md b/wpf/OLAP-Chart/Getting-Started.md index b897497ff6..e659c61707 100644 --- a/wpf/OLAP-Chart/Getting-Started.md +++ b/wpf/OLAP-Chart/Getting-Started.md @@ -18,7 +18,7 @@ This section covers the information required to create a simple OLAP chart bound Open the Visual Studio IDE and navigate to File > New > Project > WPF Application (inside Visual C# Templates) to create a new WPF application. -After the WPF application is created, go to View menu and select Toolbox option. Now, the toolbox will appear inside the Visual Studio IDE. From the Visual Studio Toolbox, drag the OLAP chart under the **Syncfusion® BI WPF** tag. It will automatically add the required assemblies to the application. +After the WPF application is created, go to the View menu and select the Toolbox option. Now, the toolbox will appear inside the Visual Studio IDE. From the Visual Studio Toolbox, drag the OLAP chart under the **Syncfusion® BI WPF** tag. It will automatically add the required assemblies to the application. ![WPF OLAP Chart Getting-Started Image1](Getting-Started_images/Getting-Started_img1.png) @@ -165,7 +165,7 @@ Run the application. The following output will be generated. Open Blend for Visual Studio and navigate to File > New project > WPF > WPF Application to create a new WPF application. -Select the **Project** tab available in the left-corner of the Blend IDE. Right-click the **References** and select **Add Reference**. Now, browse and add the following assemblies to the project. +Select the **Project** tab available in the left corner of the Blend IDE. Right-click **References** and select **Add Reference**. Now, browse and add the following assemblies to the project. * Syncfusion.Chart.WPF * Syncfusion.Olap.Base @@ -426,7 +426,7 @@ Namespace SampleApplication ' Finally OlapChart gets the information from the OlapDataManager olapChart.OlapDataManager = _olapDataManager olapChart.DataBind() - // OlapChart added to the Main Window Grid region + ' OlapChart added to the Main Window Grid region chart.Children.Add(olapChart) End Sub @@ -471,7 +471,7 @@ Run the application. The following output will be generated. ## Design-time binding -Design-time binding support for OLAP chart allows you to reduce the time spent on creating and customizing the report. Normally, it takes 5 to 10 minutes for creating a report and in case of unfamiliar cubes it may extend further. But by using design-time support, you can create a report in a couple of minutes. The following section explains how to create a report during design-time. +Design-time binding support for the OLAP chart allows you to reduce the time spent creating and customizing the report. Normally, it takes 5 to 10 minutes to create a report, and in the case of unfamiliar cubes, it may extend further. But by using design-time support, you can create a report in a couple of minutes. The following section explains how to create a report at design time. First drag the OLAP chart control from the toolbox to the Visual Studio designer surface. @@ -493,7 +493,7 @@ When the connection is valid, it displays the summary page of the **Data Source ![WPF OLAP Chart Getting-Started Image6](Getting-Started_images/Getting-Started_img6.png) -For creating or editing a query, click the **Create/Edit** link that is displayed on the top-right side of the MDX query text box. This opens a **Query Designer** dialog. +For creating or editing a query, click the **Create/Edit** link that is displayed on the top-right side of the MDX query text box. This opens the **Query Designer** dialog. ![WPF OLAP Chart Getting-Started Image7](Getting-Started_images/Getting-Started_img7.png) diff --git a/wpf/OLAP-Chart/KPI.md b/wpf/OLAP-Chart/KPI.md index a390d2788f..da131cce69 100644 --- a/wpf/OLAP-Chart/KPI.md +++ b/wpf/OLAP-Chart/KPI.md @@ -13,10 +13,10 @@ KPI is a collection of calculations that are associated with a measure group in The following are the different types of indicators: -* KPI goal -* KPI status -* KPI trend -* KPI value +* [KPI goal](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Chart.Olap.Kpi.html#Syncfusion_Windows_Chart_Olap_Kpi_ShowGoal) +* [KPI status](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Chart.Olap.Kpi.html#Syncfusion_Windows_Chart_Olap_Kpi_ShowStatus) +* [KPI trend](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Chart.Olap.Kpi.html#Syncfusion_Windows_Chart_Olap_Kpi_ShowTrend) +*[KPI value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Chart.Olap.Kpi.html#Syncfusion_Windows_Chart_Olap_Kpi_ShowValue) The KPI elements can be defined in the OLAP report in the following way. diff --git a/wpf/OLAP-Chart/Legend.md b/wpf/OLAP-Chart/Legend.md index cee4de986d..c9a6b7177d 100644 --- a/wpf/OLAP-Chart/Legend.md +++ b/wpf/OLAP-Chart/Legend.md @@ -9,7 +9,7 @@ documentation: ug # Legend in WPF Olap Chart -Legends are used to display the name of data series. The chart legend can be added to an OLAP chart by adding the chart legend of the chart WPF, which is found under the Syncfusion.Windows.Chart namespace. The following code sample explains how to add a legend to an OLAP chart. +Legends are used to display the names of data series. The chart legend can be added to an OLAP chart by adding the chart legend of the chart WPF, which is found under the Syncfusion.Windows.Chart namespace. The following code sample explains how to add a legend to an OLAP chart. {% tabs %} @@ -69,7 +69,7 @@ Me.olapChart.Legend.Visibility = System.Windows.Visibility.Collapsed ## Visibility customization -The visibility of the legend check box can be toggled by using the `CheckBoxVisibility` property in the chart legend. The following code sample shows how to toggle the visibility of check box in the legend of the OLAP chart. +The visibility of the legend check box can be toggled by using the `CheckBoxVisibility` property in the chart legend. The following code sample shows how to toggle the visibility of the check box in the legend of the OLAP chart. {% tabs %} @@ -143,7 +143,7 @@ ChartDockPanel.SetDock(Me.olapChart.Legend, ChartDock.Right) ## Row/column setting -You can use the `RowsCount` and `ColumnsCount` property to create the rows or columns of the OLAP chart legend. The **RowsCount** and **ColumnsCount** will be used internally to create a grid layout control to place the legends. The following code sample shows how to set the number of rows or columns in an legend. +You can use the `RowsCount` and `ColumnsCount` properties to create the rows or columns of the OLAP chart legend. The **RowsCount** and **ColumnsCount** will be used internally to create a grid layout control to place the legends. The following code sample shows how to set the number of rows or columns in a legend. {% tabs %} @@ -172,7 +172,7 @@ Me.olapChart.Legend.ColumnsCount = 2 {% endtabs %} -N> The **RowsCount** and **ColumnsCount** are used to create the rows and columns in the grid layout control, which is used to place the legends. If you give extra row or column count than the legend availability, it will display empty spaces to fill the structure of the grid. The following illustration explains this in detail. +N> The **RowsCount** and **ColumnsCount** are used to create the rows and columns in the grid layout control, which is used to place the legends. If you give an extra row or column count beyond the legend availability, it will display empty spaces to fill the structure of the grid. The following illustration explains this in detail. The following chart has only one legend, but the RowsCount and ColumnsCount are set as 2. Therefore, the resultant legend will appear as follows: diff --git a/wpf/OLAP-Chart/Localization.md b/wpf/OLAP-Chart/Localization.md index b68772747b..c2aeea36e9 100644 --- a/wpf/OLAP-Chart/Localization.md +++ b/wpf/OLAP-Chart/Localization.md @@ -28,7 +28,7 @@ N> Localization key field should be same for all locales. Do not translate it. After translating the strings that can be localized, perform the following in the application: -Right-click the project file to create a new folder in the project. Select Add > New Folder and rename the folder as "Resources". +Right-click the project file to create a new folder in the project. Select Add > New Folder and rename the folder as `Resources`. N> The folder name should strictly be "Resources". @@ -38,7 +38,7 @@ Now, right-click the resources folder to create a new resource file in the Visua ![Define the resource file name](Localization_images/Localization_img2.png) -Select "Resources File" from the list. Then, name the resource file as Syncfusion.OlapChart.WPF.ar-AE.resx and click Add. +Select **Resources File** from the list. Then, name the resource file as Syncfusion.OlapChart.WPF.ar-AE.resx and click Add. N> The resource file name should strictly be in the format "Syncfusion.OlapChart.WPF.<Culture Code>.resx". @@ -63,13 +63,17 @@ public MainWindow() ## RTL support -RTL support for OLAP chart is used to display the content from right to left by setting the `FlowDirection` property to "RightToLeft". The following code sample explains how to set this property. +RTL support for OLAP chart is used to display the content from right to left by setting the `FlowDirection` property to **RightToLeft**. The following code sample explains how to set this property. {% tabs %} {% highlight xaml %} - + {% endhighlight %} @@ -91,7 +95,4 @@ Me.olapChart.FlowDirection = System.Windows.FlowDirection.RightToLeft A sample demo is available at the following location. -{system drive}:\Users\<User Name>\AppData\Local\Syncfusion\EssentialStudio\<Version Number>\WPF\OlapChart.WPF\Samples\Localization - - - +{system drive}:\Users\<User Name>\AppData\Local\Syncfusion\EssentialStudio\<Version Number>\WPF\OlapChart.WPF\Samples\Localization \ No newline at end of file diff --git a/wpf/OLAP-Chart/Paging.md b/wpf/OLAP-Chart/Paging.md index ab8c21a079..84d845ee3b 100644 --- a/wpf/OLAP-Chart/Paging.md +++ b/wpf/OLAP-Chart/Paging.md @@ -9,11 +9,11 @@ documentation: ug # Paging in WPF Olap Chart -Paging in the OLAP chart supports you to load and render the large amount of data without any performance constraint. +Paging in the OLAP chart allows you to load and render a large amount of data without any performance constraints. -A OLAP pager (user control) is included and bound with the OlapDataManager object of the OLAP chart. To enable paging, set the `EnablePaging` property to true. +An OLAP pager (user control) is included and bound with the OlapDataManager object of the OLAP chart. To enable paging, set the `EnablePaging` property to true. -When you process the large CellSet, it is split into several number of segments and each segment is assigned and rendered in a separate page. You can navigate back and forth in all possible ways by using the UI options in the OLAP pager. You can also change the page size and other pager settings at runtime by using the **PageSetting** window. +When you process the large CellSet, it is split into a number of segments, and each segment is assigned and rendered on a separate page. You can navigate back and forth in all possible ways by using the UI options in the OLAP pager. You can also change the page size and other pager settings at runtime by using the **PageSetting** window. Include the following Syncfusion® assembly from the installed location to add the OLAP pager (User Control) with OLAP chart. diff --git a/wpf/OLAP-Chart/Palette.md b/wpf/OLAP-Chart/Palette.md index 54f957ebcc..e3fbee31d7 100644 --- a/wpf/OLAP-Chart/Palette.md +++ b/wpf/OLAP-Chart/Palette.md @@ -9,7 +9,7 @@ documentation: ug # Palette in WPF Olap Chart -The chart palette is a pre-defined collection of a set of colors that can be applied to a chart series. The OLAP chart supports 23 chart palettes, which is used to provide rich look for your business applications. +The chart palette is a predefined collection of a set of colors that can be applied to a chart series. The OLAP chart supports 23 chart palettes, which are used to provide a rich look for your business applications. The following are the available palettes in the OLAP chart control: @@ -55,13 +55,13 @@ Me.olapChart.ColorModel.Palette = CType(System.Enum.Parse(GetType(Syncfusion.Win {% endtabs %} -The following image shows before and after applying the *EarthTone* palette. +The following image shows the chart before and after applying the *EarthTone* palette. ![Palette_img1](Palette_images/Palette_img1.png) ## Custom palette -Custom palettes can be applied to the OLAP chart by setting the _“Interior”_ property with custom brush to each series in the OLAP chart. +Custom palettes can be applied to the OLAP chart by setting the _"Interior"_ property with a custom brush for each series in the OLAP chart. A sample demo is available at the following location. diff --git a/wpf/OLAP-Chart/Series.md b/wpf/OLAP-Chart/Series.md index a69d38d0dd..f949d62130 100644 --- a/wpf/OLAP-Chart/Series.md +++ b/wpf/OLAP-Chart/Series.md @@ -13,7 +13,7 @@ Series are the data points plotted in the rectangular co-ordinate system. ## Point label -Point label provides information about the data point. Data point can be added to a series by using the following code sample. +Point label provides information about the data point. The data point can be added to a series by using the following code sample. {% tabs %} @@ -58,7 +58,7 @@ The following screenshot shows an OLAP chart with point labels enabled. ## Color customization -You can set a custom color for each series in the OLAP chart. To apply different colors to different series iterate through the series, apply the custom brush to the series. +You can set a custom color for each series in the OLAP chart. To apply different colors to different series, iterate through the series and apply the custom brush to the series. {% tabs %} @@ -78,7 +78,7 @@ Me.olapChart.Series(0).Interior = Brushes.Orange ## Border customization -You can customize the thickness of series border of the OLAP chart by using the following code sample. +You can customize the thickness of the series border of the OLAP chart by using the following code sample. {% tabs %} @@ -100,21 +100,21 @@ Me.olapChart.Series(0).StrokeThickness = 4 N> The behavior of the series border varies for different chart types. The following illustration describes them in detail. -The series border is applied to the first series of a column chart by using the `StrokeThickness` property. Now, the first series element is surrounded with applied border. +The series border is applied to the first series of a column chart by using the `StrokeThickness` property. Now, the first series element is surrounded with the applied border. ![Setting StrokeThickness property to first series of column chart](Series_images/Series_img2.png) -Notice the variation. The same series border property is applied to a series in the line chart. Instead of creating a 4 pixel width border it increases the thickness of the particular series line. +Notice the variation. The same series border property is applied to a series in the line chart. Instead of creating a 4-pixel-wide border, it increases the thickness of the particular series line. ![StrokeThickness property value maintained after changing into the line chart](Series_images/Series_img3.png) -The pie chart renders everything in a single series; each block in the pie chart known as segments. The border will be applied on each segments. This is illustrated in the following screenshot. +The pie chart renders everything in a single series; each block in the pie chart is known as a segment. The border will be applied to each segment. This is illustrated in the following screenshot. ![TO display the series in pie chart](Series_images/Series_img4.png) ## Custom data templates -Series can be customized with user-defined data templates. The following sample usage describes how to apply a data template to series in the OLAP chart. +Series can be customized with user-defined data templates. The following sample usage describes how to apply a data template to the series in the OLAP chart. The following data template can be used to customize the series. @@ -166,7 +166,7 @@ A sample demo is available at the following location. ## Event -**ChartMouseEventArgs** are the arguments returned when the mouse events are triggered by the ChartSeries. **ChartMouseEventArgs** return the segment on which the mouse events are triggered along with default mouse event args. This event args can be used to customize a segment when the mouse event is encountered. The segment returns different values that are used to perform calculations or operations. +**ChartMouseEventArgs** are the arguments returned when the mouse events are triggered by the ChartSeries. **ChartMouseEventArgs** returns the segment on which the mouse events are triggered along with the default mouse event args. This event args can be used to customize a segment when a mouse event is encountered. The segment returns different values that are used to perform calculations or operations. The following code sample demonstrates how the **ChartMouseEventArgs** can be used to retrieve information on the ChartSeries segment. @@ -212,7 +212,7 @@ End Sub Animations can be added to the OLAP chart control. This can be achieved through the following properties: * **SeriesAnimateOption**: Gets or sets animation for each series. -* **SeriesAnimateOneByOne**: Gets or sets whether each series animate one by one. By default, it is false. +* **SeriesAnimateOneByOne**: Gets or sets whether each series animates one by one. By default, it is false. * **EnableSeriesAnimation**: Gets or sets whether the animation for each series is enabled. * **SeriesAnimationDuration**: Gets or sets the animation duration for each series. @@ -267,7 +267,7 @@ The following code sample demonstrates the customization of each series in the p foreach (ChartSeries series in this. olapchart.Series) { - //To enable the chart to explode we have pass the ChartSeries and true as parameter to SetExplodedAll method + //To enable the chart to explode, we have to pass the ChartSeries and true as parameters to the SetExplodedAll method ChartPieType.SetExplodedAll(series, true); } foreach (ChartSeries series in this. olapchart.Series) @@ -287,12 +287,12 @@ foreach (ChartSeries series in this. olapchart.Series) } foreach (ChartSeries series in this. olapchart.Series) { - //To set the explore index value we have to pass the ChartSeries and the index value of which part of the Chart to explode + //To set the explode index value, we have to pass the ChartSeries and the index value of which part of the chart to explode ChartPieType.SetExplodedIndex(series, 2); } foreach (ChartSeries series in this. olapchart.Series) { - //To set the radius of the exploded chart we have to pass the ChartSeries and the radius which is n double value + //To set the radius of the exploded chart, we have to pass the ChartSeries and the radius, which is a double value ChartPieType.SetExplodeRadius(series, 8.0); } diff --git a/wpf/OLAP-Chart/ToolTip.md b/wpf/OLAP-Chart/ToolTip.md index 9d8ba46dbe..740f80cb21 100644 --- a/wpf/OLAP-Chart/ToolTip.md +++ b/wpf/OLAP-Chart/ToolTip.md @@ -9,7 +9,7 @@ documentation: ug # Tooltip in WPF Olap Chart -The OLAP chart provides the series information such as measure, primary x-axis and y-axis values, and series name through the series tooltip, when the mouse pointer is moved over chart points. +The OLAP chart provides series information, such as measure values, primary x-axis and y-axis values, and the series name, through series tooltips when the mouse pointer is moved over chart points. The following code sample shows how to disable the series tooltip using the `ShowToolTip` property. diff --git a/wpf/OLAP-Chart/Watermark.md b/wpf/OLAP-Chart/Watermark.md index c307e258bc..eb43381ed3 100644 --- a/wpf/OLAP-Chart/Watermark.md +++ b/wpf/OLAP-Chart/Watermark.md @@ -9,11 +9,11 @@ documentation: ug # Watermark in WPF Olap Chart -The OLAP chart for WPF supports watermark feature that is used to show text, image, or both as a watermark inside the chart area. +The OLAP chart for WPF supports the watermark feature, which is used to display text, images, or both as a watermark within the chart area. -There are many customization options available for the watermarked content. The content can be aligned both horizontally and vertically, and the font style of the content can be changed. The interior of the content can be customized and the opacity can also be varied. +There are many customization options available for the watermark content. The content can be aligned both horizontally and vertically, and its font style can be modified. The interior of the content can be customized, and the opacity can also be adjusted. -The following screenshot shows the text as a watermark. +The following screenshot shows text used as a watermar ![OlapChart displays the text as watermark](Watermark_images/Watermark_img1.png) diff --git a/wpf/OLAP-Chart/XAML-Configuration.md b/wpf/OLAP-Chart/XAML-Configuration.md index 010e0828c9..deee7f61cb 100644 --- a/wpf/OLAP-Chart/XAML-Configuration.md +++ b/wpf/OLAP-Chart/XAML-Configuration.md @@ -9,7 +9,7 @@ documentation: ug # XAML Configuration in WPF Olap Chart -XAML configuration is one of the important features of the OLAP chart, as it helps users to configure the control entirely through XAML by eliminating the required code in code behind. +XAML configuration is one of the important features of the OLAP chart, as it enables users to configure the control entirely through XAML, eliminating the need for code-behind. ### Properties * **DataSource.ConnectionString**: Specifies the connection string of the data manager. @@ -27,20 +27,41 @@ Adding an OLAP report to the OLAP chart in design time is described in the follo {% highlight xaml %} - - - -                       -   - - - -   -      - + + + + + + + + + + + + + + + + + {% endhighlight %} diff --git a/wpf/OLAP-Chart/Zooming-and-Scrolling.md b/wpf/OLAP-Chart/Zooming-and-Scrolling.md index 21e83130b7..b6a1e2ff8e 100644 --- a/wpf/OLAP-Chart/Zooming-and-Scrolling.md +++ b/wpf/OLAP-Chart/Zooming-and-Scrolling.md @@ -11,7 +11,7 @@ documentation: ug The OLAP chart for WPF allows you to zoom in to a narrower range within the OLAP chart. -In the zooming mode, a zooming toolkit is displayed at the top-left corner of the OLAP chart. Using the buttons in the zooming toolkit, ChartSeries can be zoomed in, out, reset, or closed. +In zooming mode, a zooming toolkit is displayed at the top-left corner of the OLAP chart. Using the buttons in the zooming toolkit, ChartSeries can be zoomed in, zoomed out, reset, or closed ![Zooming-and-scrolling_img1](Zooming-and-scrolling_images/Zooming-and-scrolling_img1.png) diff --git a/wpf/OLAP-Gauge/Appearance.md b/wpf/OLAP-Gauge/Appearance.md index 279db173e0..f2d2e30179 100644 --- a/wpf/OLAP-Gauge/Appearance.md +++ b/wpf/OLAP-Gauge/Appearance.md @@ -11,7 +11,7 @@ documentation: ug ## Gauge radius -The OLAP gauge supports adjusting its radius and this can be achieved by assigning a proper value to the `Radius` property of OLAP gauge. The following code snippet illustrates about modifying the radius of OLAP gauge. +The OLAP gauge supports adjusting its radius, which can be achieved by assigning an appropriate value to the [Radius](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.Olap.OlapGauge.html#Syncfusion_Windows_Gauge_Olap_OlapGauge_Radius) property of the OLAP gauge. The following code snippet illustrates how to modify the radius of the OLAP gauge. {% tabs %} @@ -43,7 +43,7 @@ A demo sample is available at the following location. ## Built-in frame types -The OLAP gauge supports four types of built-in frames to provide effective rim styles. The `FrameType` property is used to set the frame type for the OLAP gauge. The following are the frame types supported by the OLAP gauge: +The OLAP gauge supports four types of built-in frames to provide effective rim styles. The [FrameType](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.Olap.OlapGauge.html#Syncfusion_Windows_Gauge_Olap_OlapGauge_FrameType) property is used to set the frame type for the OLAP gauge. The following code snippet illustrates how to set the frame type for the OLAP gauge. * CircularCenterGradient @@ -85,7 +85,7 @@ A demo sample is available at the following location. ## Skins -Built-in-skins allow you to customize the theme and style to improve the look and feel of the OLAP gauge control in various rich color schemes. You can use the skin manager framework to apply a wide range of skins to the OLAP gauge control. These skins have been designed to suit the needs of wide range of audience. +Built-in skins allow you to customize the theme and style to improve the look and feel of the OLAP gauge control using various rich color schemes. You can use the skin manager framework to apply a wide range of skins to the OLAP gauge control. These skins have been designed to suit the needs of a wide range of audiences. **Types of skins:** @@ -131,7 +131,7 @@ To apply a skin to the OLAP gauge, use the `SkinStorage.VisualStyle` property. T {% highlight xaml %} - + {% endhighlight %} diff --git a/wpf/OLAP-Gauge/Data-Binding.md b/wpf/OLAP-Gauge/Data-Binding.md index 21314f679f..e03c82e411 100644 --- a/wpf/OLAP-Gauge/Data-Binding.md +++ b/wpf/OLAP-Gauge/Data-Binding.md @@ -1,7 +1,7 @@ --- layout: post -title: Data Binding in WPF Olap Gauge control | Syncfusion -description: Learn about Data Binding support in Syncfusion Essential Studio WPF Olap Gauge control, its elements and more details. +title: Data Binding in WPF OLAP Gauge control | Syncfusion +description: Learn about Data Binding support in Syncfusion Essential Studio WPF OLAP Gauge control, its elements and more details. platform: wpf control: OLAP Gauge documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Data Binding in WPF Olap Gauge -## Binding an OLAP gauge to offline cube +## Binding an OLAP gauge to an offline cube -To connect to an OLAP cube available in the local machine, the physical path of the cube should be specified in the connection string. The following code snippet illustrates the same. +To connect to an OLAP cube available on the local machine, the physical path of the cube should be specified in the connection string. The following code snippet illustrates the same. {% highlight c# %} @@ -20,11 +20,11 @@ OlapDataManager DataManager = new OlapDataManager(connectionString); {% endhighlight %} -## Binding OLAP gauge to cube in local SQL Server +## Binding an OLAP gauge to a cube in local SQL Server -To connect to the OLAP cube available in SQL Server Analysis Service in the local machine, the server name and database name should be specified in the connection string. The following code example illustrates the same. +To connect to the OLAP cube available in SQL Server Analysis Services on the local machine, the server name and database name should be specified in the connection string. The following code example illustrates the same. -N> If any credentials are maintained to connect the cube, then the user ID and password attributes should be mentioned accordingly. +N> If credentials are required to connect to the cube, specify the user ID and password accordingly. {% tabs %} @@ -46,9 +46,9 @@ Dim DataManager As New OlapDataManager(connectionString) ## Binding OLAP gauge to cube in online SQL Server -To connect to the OLAP cube available in SQL server Analysis Service in the online server through **XML/A**, the host server link and database name should be specified in the connection string. The following code example illustrates the same. +To connect to the OLAP cube available in SQL server Analysis Services on a the online server through **XML/A**, the host server link and database name should be specified in the connection string. The following code example illustrates the same. -N> If any credentials are maintained to connect the cube, then the user ID and password attributes should be mentioned accordingly. +N> If credentials are required to connect to the cube, specify the user ID and password accordingly. {% tabs %} @@ -70,9 +70,9 @@ Dim DataManager As New OlapDataManager(connectionString) ## Binding OLAP gauge to cube in online Mondrian server -To connect to the OLAP cube available in Mondrian server through **XML/A**, the host server link and database name should be specified in the connection string. The following code example illustrates the same. +To connect to the OLAP cube available on a Mondrian server through **XML/A**, the host server link and database name should be specified in the connection string. The following code example illustrates the same. -N> If any credentials are maintained to connect the cube, then the user ID and password attributes should be mentioned accordingly. +N> If credentials are required to connect to the cube, specify the user ID and password accordingly. {% tabs %} @@ -96,9 +96,9 @@ DataManager.DataProvider.ProviderName = Syncfusion.Olap.DataProvider.Providers.M ## Binding OLAP gauge to cube in online ActivePivot Server -To connect to the OLAP cube available in ActivePivot server through **XML/A**, the host server link and database name should be specified in the connection string. The following code example illustrates the same. +To connect to the OLAP cube available in ActivePivot Server through **XML/A**, the host server link and database name should be specified in the connection string. The following code example illustrates the same. -N> If any credentials are maintained to connect the cube, then the user ID and password attributes should be mentioned accordingly. +N> If credentials are required to connect to the cube, specify the user ID and password accordingly. {% tabs %} diff --git a/wpf/OLAP-Gauge/Gauge-Customization.md b/wpf/OLAP-Gauge/Gauge-Customization.md index 6211904deb..c149806f8e 100644 --- a/wpf/OLAP-Gauge/Gauge-Customization.md +++ b/wpf/OLAP-Gauge/Gauge-Customization.md @@ -7,11 +7,11 @@ control: OLAP Gauge documentation: ug --- -# Gauge Customization in WPF Olap Gauge +# Gauge Customization in WPF OLAP Gauge ## Layout customization -The OLAP gauge displays multiple gauges in a structured layout. You can customize the layout by using the `ColumnsCount` and `RowsCount` properties. These properties are used to specify the number of columns and rows for displaying the control. +The OLAP gauge displays multiple gauges in a structured layout. You can customize the layout by using the [ColumnsCount](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.Olap.OlapGauge.html#Syncfusion_Windows_Gauge_Olap_OlapGauge_ColumnsCount) and [RowsCount](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.Olap.OlapGauge.html#Syncfusion_Windows_Gauge_Olap_OlapGauge_RowsCount) properties. These properties are used to specify the number of columns and rows for displaying the control. {% tabs %} @@ -41,7 +41,7 @@ Me.OlapGauge1.RowsCount = 2 ## Gauge header -The gauge header is the combination of details about the measure and KPI. The header components of the OLAP gauge can be hidden by using the `ShowGaugeHeaders` property as specified in the following code snippet. +The gauge header is the combination of details about the measure and the KPI. The header components of the OLAP gauge can be hidden by using the [ShowGaugeHeaders](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.Olap.OlapGauge.html#Syncfusion_Windows_Gauge_Olap_OlapGauge_ShowGaugeHeaders) property as specified in the following code snippet. {% tabs %} @@ -69,7 +69,7 @@ OlapGauge1.ShowGaugeHeaders = False ## Gauge label -The visibility of gauge labels that are displayed inside the gauge can be toggled with the help of `ShowGaugeLabels` property. The following code snippet shows how to hide labels of the OLAP gauge. +The visibility of gauge labels that are displayed inside the gauge can be toggled with the help of the [ShowGaugeLabels](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.Olap.OlapGauge.html#Syncfusion_Windows_Gauge_Olap_OlapGauge_ShowGaugeLabels) property. The following code snippet shows how to hide the labels of the OLAP gauge. {% tabs %} @@ -97,7 +97,7 @@ OlapGauge1.ShowGaugeLabels = False ## Gauge factor -The gauge factor component can be hidden by using the `ShowGaugeFactors` property as specified in the following code snippet. +The gauge factor component can be hidden by using the [ShowGaugeFactors](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.Olap.OlapGauge.html#Syncfusion_Windows_Gauge_Olap_OlapGauge_ShowGaugeFactors) property as specified in the following code snippet. {% tabs %} diff --git a/wpf/OLAP-Gauge/Getting-Started.md b/wpf/OLAP-Gauge/Getting-Started.md index 8eb6f242ea..183cb75272 100644 --- a/wpf/OLAP-Gauge/Getting-Started.md +++ b/wpf/OLAP-Gauge/Getting-Started.md @@ -7,16 +7,16 @@ control: OLAP Gauge documentation: ug --- -# Getting Started with WPF Olap Gauge +# Getting Started with WPF OLAP Gauge >**Important** -Starting with v16.2.0.x, if you refer to Syncfusion assemblies from trial setup or from the NuGet feed, include a license key in your projects. Refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/license-key) to learn about registering Syncfusion license key in your WPF application to use the components. +Starting with v16.2.0.x, if you refer to Syncfusion assemblies from the trial setup or from the NuGet feed, include a license key in your projects. Refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/license-key) to learn about registering the Syncfusion license key in your WPF application to use the components. This section covers the information required to create a simple OLAP gauge control bound to the OLAP data source. ## Control initialization -The OLAP gauge control can be initialized and added to an application through the following ways: +The OLAP gauge control can be initialized and added to an application in the following ways: * Through Visual Studio * Through Expression Blend @@ -28,11 +28,11 @@ The OLAP gauge control can be initialized and added to an application through th 2. Select the toolbox option from the view menu. It will appear inside the Visual Studio IDE. -3. From the toolbox, select the OLAP gauge control under “Syncfusion BI WPF” group, and then drag it to the designer section of the MainPage.xaml file. +3. From the toolbox, select the OLAP gauge control under the “Syncfusion BI WPF” group, and then drag it to the designer section of the MainPage.xaml file. ![WPF OLAP Gauge Getting-Started Image1](Getting-Started_images/Getting-Started_img1.png) -4. Then, name the added OLAP gauge control as “OlapGauge1” in MainPage.xaml to refer it in code-behind as follows: +4. Then, name the added OLAP gauge control as “OlapGauge1” in MainPage.xaml to refer to it in the code-behind as follows: {% tabs %} @@ -46,7 +46,7 @@ The OLAP gauge control can be initialized and added to an application through th #### OLAP report and OLAP data manager declaration -Include the following namespaces in the code-behind for using the OlapReport and OlapDataManger in the application. +Include the following namespaces in the code-behind for using the OlapReport and OlapDataManager in the application. * Syncfusion.Olap.Reports * Syncfusion.Olap.Manager @@ -180,14 +180,14 @@ End Namespace 2. Select the **Project** tab available in the left corner of the Blend IDE and right-click **References** to select **Add Reference**. -3. Then, browse the following assemblies and add it to the project. +3. Then, browse the following assemblies and add them to the project. -* Syncfusion.Gauge.WPF -* Syncfusion.Core -* Syncfusion.Olap.Base -* Syncfusion.OlapGauge.WPF -* Syncfusion.OlapShared.WPF -* Syncfusion.Shared.WPF + * Syncfusion.Gauge.WPF + * Syncfusion.Core + * Syncfusion.Olap.Base + * Syncfusion.OlapGauge.WPF + * Syncfusion.OlapShared.WPF + * Syncfusion.Shared.WPF N> You can find these libraries under the following location: @@ -199,7 +199,7 @@ On adding the above assemblies, the OLAP gauge control will be added under the * ![WPF OLAP Gauge Getting-Started Image3](Getting-Started_images/Getting-Started_img3.png) -5. Then, name the added OLAP gauge control as "OlapGauge1" in MainPage.xaml to refer it in code-behind as follows: +5. Then, name the added OLAP gauge control as "OlapGauge1" in MainPage.xaml to refer to it in the code-behind as follows: {% tabs %} @@ -211,7 +211,7 @@ On adding the above assemblies, the OLAP gauge control will be added under the * {% endtabs %} -To add the OlapReport and OlapDataManger in the application, refer to the [OlapReport and OlapDataManager declaration](#olapreport-and-olapdatamanager-declaration) section. +To add the OlapReport and OlapDataManager in the application, refer to the [OlapReport and OlapDataManager declaration](#olapreport-and-olapdatamanager-declaration) section. ### Adding control through code-behind @@ -221,12 +221,12 @@ To add the OlapReport and OlapDataManger in the application, refer to the [OlapR 3. Add the following Syncfusion assemblies manually to the project from the installed location. -* Syncfusion.Gauge.WPF -* Syncfusion.Core -* Syncfusion.Olap.Base -* Syncfusion.OlapGauge.WPF -* Syncfusion.OlapShared.WPF -* Syncfusion.Shared.WPF + * Syncfusion.Gauge.WPF + * Syncfusion.Core + * Syncfusion.Olap.Base + * Syncfusion.OlapGauge.WPF + * Syncfusion.OlapShared.WPF + * Syncfusion.Shared.WPF N> You can find these libraries under the following location: @@ -244,11 +244,11 @@ N> You can find these libraries under the following location: {% endtabs %} -5. Include the following namespaces in code-behind for using OlapGauge, OlapReport, and OlapDataManger in the application. +5. Include the following namespaces in the code-behind for using OlapGauge, OlapReport, and OlapDataManager in the application. -* Syncfusion.Olap.Reports -* Syncfusion.Olap.Manager -* Syncfusion.Windows.Gauge.Olap + * Syncfusion.Olap.Reports + * Syncfusion.Olap.Manager + * Syncfusion.Windows.Gauge.Olap {% tabs %} diff --git a/wpf/OLAP-Gauge/KPI.md b/wpf/OLAP-Gauge/KPI.md index 6610224dba..62b8f06ff6 100644 --- a/wpf/OLAP-Gauge/KPI.md +++ b/wpf/OLAP-Gauge/KPI.md @@ -7,9 +7,9 @@ control: OLAP Gauge documentation: ug --- -# KPI in WPF Olap Gauge +# KPI in WPF OLAP Gauge -The OLAP gauge supports displaying Key Performance Indicators (KPI) from the OLAP cube. KPI value is represented with the help of _Pointers_ and KPI goal is represented with the help of _Markers_. The KPI status and KPI trend values are represented through user friendly images such as traffic light, road signs, and standard arrow in the OLAP gauge of WPF. Each gauge represents a member against one KPI combination. +The OLAP gauge supports displaying Key Performance Indicators (KPIs) from an OLAP cube. The KPI value is represented using pointers, while the KPI goal is represented using markers. The KPI status and trend values are represented in the WPF OLAP Gauge using user-friendly images, such as traffic lights, road signs, and standard arrows. Each gauge represents a member associated with a single KPI combination. ![WPF OLAPGauge displays KPI from the OLAP cube](KPI_images/KPI-image.png) diff --git a/wpf/OLAP-Gauge/Localization.md b/wpf/OLAP-Gauge/Localization.md index ee57d9f946..3c130f8040 100644 --- a/wpf/OLAP-Gauge/Localization.md +++ b/wpf/OLAP-Gauge/Localization.md @@ -1,15 +1,15 @@ --- layout: post -title: Localization in WPF Olap Gauge control | Syncfusion -description: Learn about Localization support in Syncfusion WPF Olap Gauge control, its elements and more details. +title: Localization in WPF OLAP Gauge control | Syncfusion +description: Learn about Localization support in Syncfusion WPF OLAP Gauge control, its elements and more details. platform: wpf control: OLAP Gauge documentation: ug --- -# Localization in WPF Olap Gauge +# Localization in WPF OLAP Gauge -Localization is the key feature to provide software solutions that are targeted at global users. The OLAP gauge allows users to localize the control to a specific locale and supports “resx” based localization. +Localization is a key feature for providing software solutions that are targeted at global users. The OLAP gauge allows users to localize the control to a specific locale and supports “resx” based localization. You should perform the following steps to localize the control: @@ -19,9 +19,9 @@ You should perform the following steps to localize the control: ## Translation -The first step in localization is translating the strings that can be localized to the destination locale. +The first step in localization is translating the strings that can be localized into the destination locale. -N> Localization key field should be same for all the locales. Do not translate the key fields. +N> The localization key field should be the same for all the locales. Do not translate the key fields. ## Resource file and file name conventions @@ -37,11 +37,11 @@ After translating the strings, perform the following steps in the application: N> The resource file name should be in the format “Syncfusion.OlapGauge.wpf.<Culture Code>.resx”. -3. Copy and paste the translated locale to the resource file which is created in the previous step. +3. Copy and paste the translated locale into the resource file that was created in the previous step. ## Culture specification -You should specify the CurrentUICulture in the Application_Startup method of App.xaml.cs file or in the constructor of MainPage.xaml.cs file. +You should specify the CurrentUICulture in the Application_Startup method of the App.xaml.cs file or in the constructor of the MainPage.xaml.cs file. N> If you are specifying the current culture in the constructor of MainPage, then ensure that the culture is specified before calling the InitializeComponent() method. @@ -70,7 +70,7 @@ End Sub ## RTL -The OLAP gauge provides RTL support to display the content from right-to-left direction by setting the `FlowDirection` property to **RightToLeft**. +The OLAP gauge provides RTL support to display the content in a right-to-left direction by setting the `FlowDirection` property to **RightToLeft**. {% tabs %} diff --git a/wpf/OLAP-Gauge/Overview.md b/wpf/OLAP-Gauge/Overview.md index 0349cadb17..652f094bbb 100644 --- a/wpf/OLAP-Gauge/Overview.md +++ b/wpf/OLAP-Gauge/Overview.md @@ -1,13 +1,13 @@ --- layout: post -title: About WPF Olap Gauge control | Syncfusion -description: Learn here all about introduction of Syncfusion WPF Olap Gauge control, its elements and more details. +title: About the WPF OLAP Gauge control | Syncfusion +description: Learn here all about introduction of Syncfusion WPF OLAP Gauge control, its elements and more details. platform: wpf control: OLAP Gauge documentation: ug --- -# WPF Olap Gauge Overview +# WPF OLAP Gauge Overview The OLAP gauge control for WPF is ideal for highlighting business critical Key Performance Indicator (KPI) information in executive dashboards and report cards. It allows you to present values against goals in a very intuitive manner. Built-in data binding support allows you to easily bind an OLAP gauge to a KPI result from your OLAP database. The OLAP gauge control with sophisticated customization support provides endless possibility for control customization. diff --git a/wpf/OLAP-Gauge/Tooltip.md b/wpf/OLAP-Gauge/Tooltip.md index b4ccaa9f2f..e818dc2533 100644 --- a/wpf/OLAP-Gauge/Tooltip.md +++ b/wpf/OLAP-Gauge/Tooltip.md @@ -1,19 +1,19 @@ --- layout: post -title: Tooltip in WPF Olap Gauge control | Syncfusion -description: Learn about Tooltip support in Syncfusion Essential Studio WPF Olap Gauge control, its elements and more details. +title: Tooltip in WPF OLAP Gauge control | Syncfusion +description: Learn about Tooltip support in Syncfusion Essential Studio WPF OLAP Gauge control, its elements and more details. platform: wpf control: OLAP Gauge documentation: ug --- -# Tooltip in WPF Olap Gauge +# Tooltip in WPF OLAP Gauge -The OLAP gauge provides the information about values when the mouse pointer is moved over the gauge. +The OLAP gauge provides information about the values when the mouse pointer is moved over the gauge. ## Pointer tooltip -The OLAP gauge provides value information when the mouse pointer is moved over the pointer. This can be achieved by enabling the `ShowPointersTooltip` property. +The OLAP gauge provides value information when the mouse pointer is moved over the pointer. This can be achieved by enabling the [ShowPointersTooltip](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.Olap.OlapGauge.html#Syncfusion_Windows_Gauge_Olap_OlapGauge_ShowPointersTooltip) property. The following code snippet illustrates how to show a tooltip for pointers. @@ -43,7 +43,7 @@ Me.OlapGauge1.ShowPointersTooltip = True ## Marker tooltip -The OLAP gauge provides goal information when the mouse pointer is moved over the marker. This can be achieved by enabling the `ShowMarkersTooltip` property. +The OLAP gauge provides goal information when the mouse pointer is moved over the marker. This can be achieved by enabling the [ShowMarkersTooltip](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.Olap.OlapGauge.html#Syncfusion_Windows_Gauge_Olap_OlapGauge_ShowMarkersTooltip) property. The following code snippet illustrates how to show a tooltip for markers. diff --git a/wpf/OLAP-Gauge/XAML-Configuration.md b/wpf/OLAP-Gauge/XAML-Configuration.md index 1e695b49b7..d00df59e1d 100644 --- a/wpf/OLAP-Gauge/XAML-Configuration.md +++ b/wpf/OLAP-Gauge/XAML-Configuration.md @@ -1,48 +1,66 @@ --- layout: post -title: XAML Configuration in WPF Olap Gauge control | Syncfusion -description: Learn about XAML Configuration support in Syncfusion WPF Olap Gauge control, its elements and more details. +title: XAML Configuration in WPF OLAP Gauge control | Syncfusion +description: Learn about XAML Configuration support in Syncfusion WPF OLAP Gauge control, its elements and more details. platform: wpf control: OLAP Gauge documentation: ug --- -# XAML Configuration in WPF Olap Gauge +# XAML Configuration in WPF OLAP Gauge -XAML configuration is one of the important features of the OLAP gauge, as it helps users to configure the control entirely through XAML by eliminating the required code in code behind. +XAML configuration is an important feature of the OLAP gauge because it allows users to configure the control entirely in XAML, eliminating the need for code-behind. ## Properties * **DataSource.ConnectionString**: Specifies the connection string of the data manager. * **DataSource.ConnectionName**: Specifies the connection name, which is available in the App.Config file of the application. * **DataSource.DataManagerName**: Specifies the data manager name. -* **SharedDataManagerName**: Specifies the data manager name, which is available in the shared data manager collection. -* **ReportName**: Species the name of the OLAP report. +* **SharedDataManagerName**: Specifies the name of the data manager available in the shared data manager collection. +* **ReportName**: Specifies the name of the OLAP report. * **CurrentCubeName**: Specifies the current cube name of the OLAP report. * **CategoricalAxis**: Specifies the categorical axis of the OLAP report. * **SeriesAxis**: Specifies the series axis of the OLAP report. * **SlicerAxis**: Specifies the slicer axis of the OLAP report. * **CalculatedMembers**: Specifies the calculated members of the OLAP report. -The following code snippet illustrates about adding an OLAP report to OLAP gauge in design time. +The following code snippet illustrates how to add an OLAP report to the OLAP gauge at design time. {% tabs %} {% highlight xaml %} - - + + + -       - + + + + - + + - - + + diff --git a/wpf/TreeMap/ColorMapping.md b/wpf/TreeMap/ColorMapping.md index 0ee2d1eb13..eb70a8f27c 100644 --- a/wpf/TreeMap/ColorMapping.md +++ b/wpf/TreeMap/ColorMapping.md @@ -9,7 +9,7 @@ documentation: ug # ColorMapping in WPF TreeMap (SfTreeMap) -ColorMapping is categorized into four different types such as, +ColorMapping is categorized into the following five different types: * UniColorMapping * RangeBrushColorMapping @@ -19,188 +19,135 @@ ColorMapping is categorized into four different types such as, -## TreeMap ColorMapping: - -The leaf nodes of TreeMap can be colored by setting LeafColorMapping of TreeMap. +## TreeMap ColorMapping +The leaf nodes of the TreeMap can be colored by setting the LeafColorMapping of the TreeMap. {% highlight xaml %} - + - - - + - - - + - + {% endhighlight %} +## TreeMapLevel ColorMapping - - - -## TreeMapLevel ColorMapping: - -The headers of TreeMap level can also be colored using ColorMapping property of TreeMapLevel. - +The headers of the TreeMap level can also be colored using the ColorMapping property of the TreeMapLevel. {% highlight xaml %} - - - + - - - + - - - + - - - + - - - + - - - + - - - + + {% endhighlight %} ## UniColorMapping -TreeMap leaf nodes can be colored with the help of Color property specified using UniColorMapping. - +The TreeMap leaf nodes can be colored with the help of the Color property specified using UniColorMapping. {% highlight xaml %} + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - {% endhighlight %} - - - - - ![UniColorMapping_Image](ColorMapping_images/ColorMapping_img1.png) - - ## RangeBrushColorMapping -The leaf nodes of TreeMap can be colored based upon the range, such as From and To, and Brush specified using RangeBrush collection of RangeBrushColorMapping. - +The leaf nodes of the TreeMap can be colored based on the range, such as From and To, and the brush specified using the RangeBrush collection of RangeBrushColorMapping. {% highlight xaml %} - - - - - + - - - - - - - - - - - + + + + - - + - - - - + - {% endhighlight %} @@ -212,177 +159,146 @@ The leaf nodes of TreeMap can be colored based upon the range, such as From and ## DesaturationColorMapping -The leaf nodes of TreeMap can be colored based upon the Color specified using DesaturationColorMapping. The RangeMinimum and RangeMaximum must be specified to determine the opacity for each leaf node. The opacity of leaf nodes are in the range of From and To mentioned in DesaturationColorMapping. +The leaf nodes of the TreeMap can be colored based on the color specified using DesaturationColorMapping. The RangeMinimum and RangeMaximum must be specified to determine the opacity for each leaf node. The opacity of the leaf nodes is in the range of From and To mentioned in DesaturationColorMapping. {% highlight xaml %} - - - - - + - - - - - + + - - - - + - {% endhighlight %} - - ![DesaturationColorMapping_Image](ColorMapping_images/ColorMapping_img3.png) - ## PaletteColorMapping -The leaf nodes are colored by using the brushes mentioned in Colors collection of PaletteColorMapping. +The leaf nodes are colored by using the brushes mentioned in the Colors collection of PaletteColorMapping. {% highlight xaml %} - - - - - + - - - - - - - - - - - - - - - + + + + + + + + + + + + + - - + - - - - + - {% endhighlight %} - - ![PaletteColorMapping_Image](ColorMapping_images/ColorMapping_img4.png) - - ## GroupColorMapping -The leaf nodes are colored by using different ColorMappings available in the TreeMap control. Each group can also be colored with different ColorMappings of TreeMapGroupColorMapping. GroupColorMapping is done based on the GroupID property. +The leaf nodes are colored by using the different ColorMappings available in the TreeMap control. Each group can also be colored with different ColorMappings of TreeMapGroupColorMapping. The GroupColorMapping is done based on the GroupID property. {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -390,6 +306,6 @@ The leaf nodes are colored by using different ColorMappings available in the Tre ![GroupColorMapping_Image](ColorMapping_images/ColorMapping_img5.png) -## see also +## See also [How to apply gradient color mapping to SfTreeMap](https://support.syncfusion.com/kb/article/8597/how-to-apply-gradientcolormapping-to-sftreemap) diff --git a/wpf/TreeMap/ColorValuePath.md b/wpf/TreeMap/ColorValuePath.md index eeb5a0430a..4b20676be3 100644 --- a/wpf/TreeMap/ColorValuePath.md +++ b/wpf/TreeMap/ColorValuePath.md @@ -9,32 +9,20 @@ documentation: ug # ColorValuePath in WPF TreeMap (SfTreeMap) -The ColorValuePath ofSfTreeMap is a path to a field on the source object, which serves as the "color" of the object. +The [ColorValuePath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html#Syncfusion_UI_Xaml_TreeMap_SfTreeMap_ColorValuePath) of SfTreeMap is a path to a field on the source object, which serves as the "color" of the object. {% highlight xaml %} + + + + - - - - - - - - - - - - - + + {% endhighlight %} - -N> The specified field must be available in each and every sub class (object) defined in hierarchical (nested) data collection. - - - +N> The specified field must be available in each and every sub class (object) defined in hierarchical (nested) data collection. \ No newline at end of file diff --git a/wpf/TreeMap/Customizing-Leaf-Nodes.md b/wpf/TreeMap/Customizing-Leaf-Nodes.md index f7e624ef70..bd3cabe99d 100644 --- a/wpf/TreeMap/Customizing-Leaf-Nodes.md +++ b/wpf/TreeMap/Customizing-Leaf-Nodes.md @@ -9,123 +9,176 @@ documentation: ug # Customizing Leaf Nodes in WPF TreeMap (SfTreeMap) -You can customize leaf nodes by assigning data template to LeafTemplate of SfTreeMap. +You can customize the leaf nodes by assigning a data template to the [LeafTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html#Syncfusion_UI_Xaml_TreeMap_SfTreeMap_LeafTemplate) of SfTreeMap. {%tabs%} {% highlight xaml %} - - - - - - + - - + - - - - - - + + - - - - - + - - - - + - - - - - + {% endhighlight %} {% highlight c# %} +public class OlymicMedalsViewModel +{ + public ObservableCollection OlympicMedalsDetails { get; set; } - - public class OlymicMedalsViewModel - + public OlymicMedalsViewModel() { - - public ObservableCollection OlympicMedalsDetails - - { get; set; } - - - - public OlymicMedalsViewModel() - - { - - this.OlympicMedalsDetails = new ObservableCollection(); - - this.OlympicMedalsDetails.Add(new OlympicMedals { Country = "US", GameName = "Swimming", GoldMedals = 16, SilverMedals = 9, BronzeMedals = 6, TotalMedals = 31, GameImgSource = new BitmapImage(new Uri("ms-appx:/Assets/Swimming.png")) }); - - this.OlympicMedalsDetails.Add(new OlympicMedals { Country = "US", GameName = "Track and Field", GoldMedals = 9, SilverMedals = 13, BronzeMedals = 7, TotalMedals = 29, GameImgSource = new BitmapImage(new Uri("ms-appx:/Assets/TrackAndField.png")) }); - - this.OlympicMedalsDetails.Add(new OlympicMedals { Country = "US", GameName = "Gymnastics", GoldMedals = 3, SilverMedals = 1, BronzeMedals = 2, TotalMedals = 6, GameImgSource = new BitmapImage(new Uri("ms-appx:/Assets/Gymnastics.png")) }); - - this.OlympicMedalsDetails.Add(new OlympicMedals { Country = "US", GameName = "Cycling", GoldMedals = 1, SilverMedals = 2, BronzeMedals = 1, TotalMedals = 4, GameImgSource = new BitmapImage(new Uri("ms-appx:/Assets/Cycling.png")) }); - - this.OlympicMedalsDetails.Add(new OlympicMedals { Country = "US", GameName = "Shooting", GoldMedals = 3, SilverMedals = 0, BronzeMedals = 1, TotalMedals = 4, GameImgSource = new BitmapImage(new Uri("ms-appx:/Assets/Shooting.png")) }); - - this.OlympicMedalsDetails.Add(new OlympicMedals { Country = "US", GameName = "Wrestling", GoldMedals = 2, SilverMedals = 0, BronzeMedals = 2, TotalMedals = 4, GameImgSource = new BitmapImage(new Uri("ms-appx:/Assets/Wrestling.png")) }); - - this.OlympicMedalsDetails.Add(new OlympicMedals { Country = "US", GameName = "Diving", GoldMedals = 1, SilverMedals = 1, BronzeMedals = 2, TotalMedals = 4, GameImgSource = new BitmapImage(new Uri("ms-appx:/Assets/Diving.png")) }); - - } - + this.OlympicMedalsDetails = new ObservableCollection(); + + this.OlympicMedalsDetails.Add( + new OlympicMedals + { + Country = "US", + GameName = "Swimming", + GoldMedals = 16, + SilverMedals = 9, + BronzeMedals = 6, + TotalMedals = 31, + GameImgSource = new BitmapImage( + new Uri("ms-appx:/Assets/Swimming.png")) + }); + + this.OlympicMedalsDetails.Add( + new OlympicMedals + { + Country = "US", + GameName = "Track and Field", + GoldMedals = 9, + SilverMedals = 13, + BronzeMedals = 7, + TotalMedals = 29, + GameImgSource = new BitmapImage( + new Uri("ms-appx:/Assets/TrackAndField.png")) + }); + + this.OlympicMedalsDetails.Add( + new OlympicMedals + { + Country = "US", + GameName = "Gymnastics", + GoldMedals = 3, + SilverMedals = 1, + BronzeMedals = 2, + TotalMedals = 6, + GameImgSource = new BitmapImage( + new Uri("ms-appx:/Assets/Gymnastics.png")) + }); + + this.OlympicMedalsDetails.Add( + new OlympicMedals + { + Country = "US", + GameName = "Cycling", + GoldMedals = 1, + SilverMedals = 2, + BronzeMedals = 1, + TotalMedals = 4, + GameImgSource = new BitmapImage( + new Uri("ms-appx:/Assets/Cycling.png")) + }); + + this.OlympicMedalsDetails.Add( + new OlympicMedals + { + Country = "US", + GameName = "Shooting", + GoldMedals = 3, + SilverMedals = 0, + BronzeMedals = 1, + TotalMedals = 4, + GameImgSource = new BitmapImage( + new Uri("ms-appx:/Assets/Shooting.png")) + }); + + this.OlympicMedalsDetails.Add( + new OlympicMedals + { + Country = "US", + GameName = "Wrestling", + GoldMedals = 2, + SilverMedals = 0, + BronzeMedals = 2, + TotalMedals = 4, + GameImgSource = new BitmapImage( + new Uri("ms-appx:/Assets/Wrestling.png")) + }); + + this.OlympicMedalsDetails.Add( + new OlympicMedals + { + Country = "US", + GameName = "Diving", + GoldMedals = 1, + SilverMedals = 1, + BronzeMedals = 2, + TotalMedals = 4, + GameImgSource = new BitmapImage( + new Uri("ms-appx:/Assets/Diving.png")) + }); } +} +public class OlympicMedals +{ + public string Country { get; set; } + public string GameName { get; set; } - public class OlympicMedals - - { - - public string Country { get; set; } - - public string GameName { get; set; } + public double GoldMedals { get; set; } - public double GoldMedals { get; set; } + public double SilverMedals { get; set; } - public double SilverMedals { get; set; } + public double BronzeMedals { get; set; } - public double BronzeMedals { get; set; } + public double TotalMedals { get; set; } - public double TotalMedals { get; set; } + public ImageSource GameImgSource { get; set; } +} - public ImageSource GameImgSource { get; set; } - - } {% endhighlight %} {%endtabs%} - ![Customizing-Leaf-Nodes_img1](Customizing-Leaf-Nodes_images/Customizing-Leaf-Nodes_img1.png) diff --git a/wpf/TreeMap/Drill-Down-Support.md b/wpf/TreeMap/Drill-Down-Support.md index dfa42e8082..0bba89f1ae 100644 --- a/wpf/TreeMap/Drill-Down-Support.md +++ b/wpf/TreeMap/Drill-Down-Support.md @@ -9,13 +9,13 @@ documentation: ug # Drill Down Support in WPF TreeMap (SfTreeMap) -TreeMap enables drill down to expose the hierarchy by clicking on a treemap node and allows drill up by clicking on drill down header. At a time, only one level of the hierarchy can be seen in the treemap. +The TreeMap enables drill down to expose the hierarchy by clicking on a treemap node and allows drill up by clicking on the drill down header. At a time, only one level of the hierarchy can be seen in the treemap. ## Enabling Drill Down -Treemap items can be drilled down by enabling the property EnableDrillDown to ‘_true’_. The hierarchy of treemap levels can be shown by clicking on treemap items. The previous level can be drilled up by clicking on drill down header. DrillDown header can be customized with the help of DrillDownHeaderTemplate property. +Treemap items can be drilled down by enabling the property [EnableDrillDown](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html#Syncfusion_UI_Xaml_TreeMap_SfTreeMap_EnableDrillDown) to `true`. The hierarchy of treemap levels can be shown by clicking on the treemap items. The previous level can be drilled up by clicking on the drill down header. The DrillDown header can be customized with the help of the DrillDownHeaderTemplate property. -Drill Down Properties +### Drill Down Properties @@ -25,97 +25,87 @@ Type +Gets or sets a value for specifying the height for the drill down header. +Gets or sets a template to customize the drill down header. +Gets or sets a color for highlighting the tree map item while drilling down.
Description
-EnableDrillDown +[EnableDrillDown](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html#Syncfusion_UI_Xaml_TreeMap_SfTreeMap_EnableDrillDown) Bool Gets or sets a value to indicate whether the drill down support should be enabled.
-DrillDownHeaderHeight +[DrillDownHeaderHeight](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html#Syncfusion_UI_Xaml_TreeMap_SfTreeMap_DrillDownHeaderHeight) Double -Gets or sets a value for specifying the height for drill down header.
-DrillDownHeaderTemplate +[DrillDownHeaderTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html#Syncfusion_UI_Xaml_TreeMap_SfTreeMap_DrillDownHeaderTemplate) DataTemplate -Gets or sets a template to customize drill down header.
-DrillDownSelectionStroke +[DrillDownSelectionStroke](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html#Syncfusion_UI_Xaml_TreeMap_SfTreeMap_DrillDownSelectionStroke) Brush -Gets or sets a color for highlighting tree map item while drill down.
- {% highlight xaml %} - - - - + WeightValuePath="Population" + ColorValuePath="Area" + LeafLabelPath="Name" + BorderThickness="1"> - - - - - - - - - + + + + - - - - - - + + - - - - + - {% endhighlight %} - The following screenshot illustrates a TreeMap with drill down support. - - ![Drilldown support image](Drill-Down-Support_images/Drill-Down-Support_img1.png) - TreeMap with drill down support {:.caption} -## see also +## See also [How to customize leaf level SfTreeMap](https://www.syncfusion.com/kb/7649/how-to-customize-leaf-level-treemap) diff --git a/wpf/TreeMap/Getting-Started.md b/wpf/TreeMap/Getting-Started.md index 11984765ee..bed2dc8ac0 100644 --- a/wpf/TreeMap/Getting-Started.md +++ b/wpf/TreeMap/Getting-Started.md @@ -9,29 +9,25 @@ documentation: ug # Getting Started with WPF TreeMap (SfTreeMap) -TreeMaps are a growing trend in data visualization. It displays hierarchical information in a series of clustered rectangles, which together represent a whole dataset. The size of each box represents a quantity. TreeMaps also use color to represent any number of values, but it is often used to categorize the various boxes within the tree map. +TreeMaps are a growing trend in data visualization. It displays hierarchical information in a series of clustered rectangles, which together represent a whole dataset. The size of each box represents a quantity. TreeMaps also use color to represent any number of values, but it is often used to categorize the various boxes within the tree map. ## Configuring the SfTreeMap Control ### Through Visual Studio -To create the SfTreeMap control through VisualStudio, drag SfTreeMap from Toolbox and drop it to the designer. It will generate the following the SfTreeMap control. +To create the [SfTreeMap](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html) control through Visual Studio, drag the SfTreeMap from the Toolbox and drop it onto the designer. It will generate the SfTreeMap control. ![Getting-Started_image](Getting-Started_images/Getting-Started_img1.png) - ### Through Expression Blend -The SfTreeMap control can also be created and configured using Expression Blend. Follow these steps to do so. - -1. Create a WPF project in Expression Blend and reference the following assemblies. -i. Syncfusion.SfTreeMap.WPF -2. Search for SfTreeMap in the Toolbox. -3. Drag SfTreeMap to the designer. It will generate the SfTreeMap control with one child element. - - +The [SfTreeMap](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html) control can also be created and configured using Expression Blend. Follow these steps to do so. +1. Create a WPF project in Expression Blend and reference the following assemblies: + 1. Syncfusion.SfTreeMap.WPF +2. Search for the SfTreeMap in the Toolbox. +3. Drag the SfTreeMap to the designer. It will generate the SfTreeMap control with one child element. ![Getting-Started_blendimage](Getting-Started_images/Getting-Started_img2.png) @@ -41,7 +37,7 @@ i. Syncfusion.SfTreeMap.WPF You can create the SfTreeMap control programmatically through XAML and C#. -In order to create a TreeMap you can refer to the following assembly and namespace. +In order to create a TreeMap, you can refer to the following assembly and namespace. {{ '**Assembly**' | markdownify }}: Syncfusion.SfTreeMap.WPF @@ -55,21 +51,14 @@ In the following code example, the SfTreeMap control is created. - - - @@ -77,17 +66,12 @@ In the following code example, the SfTreeMap control is created. {% highlight c# %} - - SfTreeMap treemap = new SfTreeMap() - { - - Height = 300, - - Width = 300, - + Height = 300, + Width = 300, }; + {% endhighlight %} {%endtabs%} @@ -97,120 +81,85 @@ SfTreeMap treemap = new SfTreeMap() ### Populate ItemsSource -The ItemsSource property accepts the collection values as input. For example, you can provide the list of objects as input. +The [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html#Syncfusion_UI_Xaml_TreeMap_SfTreeMap_ItemsSource) property accepts the collection values as input. For example, you can provide a list of objects as input. {% highlight c# %} public class PopulationViewModel - +{ + public PopulationViewModel() { + this.PopulationDetails = new ObservableCollection(); + + PopulationDetails.Add(new PopulationDetail() { Continent = "Asia", Country = "Indonesia", Growth = 3, Population = 237641326 }); + PopulationDetails.Add(new PopulationDetail() { Continent = "Asia", Country = "Russia", Growth = 2, Population = 152518015 }); + PopulationDetails.Add(new PopulationDetail() { Continent = "Asia", Country = "Malaysia", Growth = 1, Population = 29672000 }); + PopulationDetails.Add(new PopulationDetail() { Continent = "North America", Country = "United States", Growth = 4, Population = 315645000 }); + PopulationDetails.Add(new PopulationDetail() { Continent = "North America", Country = "Mexico", Growth = 2, Population = 112336538 }); + PopulationDetails.Add(new PopulationDetail() { Continent = "North America", Country = "Canada", Growth = 1, Population = 35056064 }); + PopulationDetails.Add(new PopulationDetail() { Continent = "South America", Country = "Colombia", Growth = 1, Population = 47000000 }); + PopulationDetails.Add(new PopulationDetail() { Continent = "South America", Country = "Brazil", Growth = 3, Population = 193946886 }); + PopulationDetails.Add(new PopulationDetail() { Continent = "Africa", Country = "Nigeria", Growth = 2, Population = 170901000 }); + PopulationDetails.Add(new PopulationDetail() { Continent = "Africa", Country = "Egypt", Growth = 1, Population = 83661000 }); + PopulationDetails.Add(new PopulationDetail() { Continent = "Europe", Country = "Germany", Growth = 1, Population = 81993000 }); + PopulationDetails.Add(new PopulationDetail() { Continent = "Europe", Country = "France", Growth = 1, Population = 65605000 }); + PopulationDetails.Add(new PopulationDetail() { Continent = "Europe", Country = "UK", Growth = 1, Population = 63181775 }); + } + + public ObservableCollection PopulationDetails{ get; set; } +} + +public class PopulationDetail +{ + public string Continent { get; set; } + public string Country { get; set; } + public double Growth { get; set; } + public double Population { get; set; } +} - public PopulationViewModel() - - { - - this.PopulationDetails = new ObservableCollection(); - - PopulationDetails.Add(new PopulationDetail() { Continent = "Asia", Country = "Indonesia", Growth = 3, Population = 237641326 }); - - PopulationDetails.Add(new PopulationDetail() { Continent = "Asia", Country = "Russia", Growth = 2, Population = 152518015 }); - - PopulationDetails.Add(new PopulationDetail() { Continent = "Asia", Country = "Malaysia", Growth = 1, Population = 29672000 }); - - PopulationDetails.Add(new PopulationDetail() { Continent = "North America", Country = "United States", Growth = 4, Population = 315645000 }); - - PopulationDetails.Add(new PopulationDetail() { Continent = "North America", Country = "Mexico", Growth = 2, Population = 112336538 }); - - PopulationDetails.Add(new PopulationDetail() { Continent = "North America", Country = "Canada", Growth = 1, Population = 35056064 }); - - PopulationDetails.Add(new PopulationDetail() { Continent = "South America", Country = "Colombia", Growth = 1, Population = 47000000 }); - - PopulationDetails.Add(new PopulationDetail() { Continent = "South America", Country = "Brazil", Growth = 3, Population = 193946886 }); - - PopulationDetails.Add(new PopulationDetail() { Continent = "Africa", Country = "Nigeria", Growth = 2, Population = 170901000 }); - - PopulationDetails.Add(new PopulationDetail() { Continent = "Africa", Country = "Egypt", Growth = 1, Population = 83661000 }); - - PopulationDetails.Add(new PopulationDetail() { Continent = "Europe", Country = "Germany", Growth = 1, Population = 81993000 }); - - PopulationDetails.Add(new PopulationDetail() { Continent = "Europe", Country = "France", Growth = 1, Population = 65605000 }); - - PopulationDetails.Add(new PopulationDetail() { Continent = "Europe", Country = "UK", Growth = 1, Population = 63181775 }); - - } - - - - public ObservableCollection PopulationDetails - - { - - get; - - set; - - } - - - - public class PopulationDetail - - { - - public string Continent { get; set; } - - public string Country { get; set; } - - public double Growth { get; set; } - - public double Population { get; set; } - - } {% endhighlight %} -After defining the ItemsSource, set the DataContext of the TreeMap as shown here: +After defining the [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html#Syncfusion_UI_Xaml_TreeMap_SfTreeMap_ItemsSource), set the DataContext of the TreeMap as shown here: {%tabs%} {% highlight xaml %} - + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {% endhighlight %} {% highlight c# %} this.TreeMap.DataContext = new PopulationViewModel(); + {% endhighlight %} {%endtabs%} @@ -219,14 +168,14 @@ this.TreeMap.DataContext = new PopulationViewModel(); ## Theme -TreeMap supports various built-in themes. Refer to the below links to apply themes for the TreeMap, +TreeMap supports various built-in themes. Refer to the below links to apply themes for the TreeMap: - * [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager) + * [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager). * [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme) -![Setting theme to WPF SfTreeMap](Getting-Started_images/Theme.png) +![Setting theme to WPF SfTreeMap](Getting-Started_images/Theme.png). -## see also +## See also -[How to apply gradient color mapping to SfTreeMap](https://support.syncfusion.com/kb/article/8597/how-to-apply-gradientcolormapping-to-sftreemap) \ No newline at end of file +[How to apply gradient color mapping to SfTreeMap](https://support.syncfusion.com/kb/article/8597/how-to-apply-gradientcolormapping-to-sftreemap). \ No newline at end of file diff --git a/wpf/TreeMap/Headers-and-Labels.md b/wpf/TreeMap/Headers-and-Labels.md index b733ee4041..d059ff03a2 100644 --- a/wpf/TreeMap/Headers-and-Labels.md +++ b/wpf/TreeMap/Headers-and-Labels.md @@ -11,153 +11,125 @@ documentation: ug ## Headers -To show headers in TreeMap, you can set the HeaderHeight property of TreeMapLevel. For customizing default Header appearance, you can specify the HeaderTemplate. +To show headers in the TreeMap, you can set the HeaderHeight property of the TreeMapLevel. For customizing the default Header appearance, you can specify the HeaderTemplate. -### TreeMap with Flat Collection: - -If HeaderTemplate is specified for TreeMapLevel, then the header can be bound by referring Header object to the data template. +### TreeMap with Flat Collection +If the HeaderTemplate is specified for the TreeMapLevel, then the header can be bound by referring the Header object to the data template. {% highlight xaml %} - - - - - - + - - + + - - - - + - - + {% endhighlight %} ![Headers-and-Labels_img1](Headers-and-Labels_images/Headers-and-Labels_img1.png) +### TreeMap with Hierarchical Collection - -### TreeMap with Hierarchical Collection: - -For TreeMap with Hierarchical Collection, HeaderPath must be specified. The header can be bound by referring Data. to the data template where FieldName refers to the field of object specified in the particular treemap level. - +For the TreeMap with a Hierarchical Collection, the HeaderPath must be specified. The header can be bound by referring the `Data.` to the data template, where `FieldName` refers to the field of the object specified in the particular treemap level. {% highlight xaml %} - - - - - - + - - + - - - - - + - - + {% endhighlight %} ## Labels -To show labels in TreeMap, ShowLabels of TreeMapLevel should be enabled to True. For customizing default label appearance, you can specify LabelTemplate. +To show labels in the TreeMap, the ShowLabels of the TreeMapLevel should be enabled to True. For customizing the default label appearance, you can specify the LabelTemplate. -### TreeMap with Flat Collection: +### TreeMap with Flat Collection -If LabelTemplate is specified for TreeMapLevel, then the label can be bound by referring Label object to the data template. +If the LabelTemplate is specified for the TreeMapLevel, then the label can be bound by referring the Label object to the data template. {% highlight xaml %} - - - - - + - - - - + - - -{% endhighlight %} - +{% endhighlight %} ![Headers-and-Labels_img2](Headers-and-Labels_images/Headers-and-Labels_img2.png) -### TreeMap with Hierarchical Collection: +### TreeMap with Hierarchical Collection -For TreeMap with Hierarchical Collection, LabelPath must be specified. The label can be bound by referring Data. to the data template where FieldName refers to the field of object specified in the particular treemap level. +For the TreeMap with a Hierarchical Collection, the LabelPath must be specified. The label can be bound by referring the `Data.` to the data template, where `FieldName` refers to the field of the object specified in the particular treemap level. {% highlight xaml %} - - - - + - - + - - - - - + - - + {% endhighlight %} diff --git a/wpf/TreeMap/LeafItemSettings.md b/wpf/TreeMap/LeafItemSettings.md index b361d497cb..e8d057ff9a 100644 --- a/wpf/TreeMap/LeafItemSettings.md +++ b/wpf/TreeMap/LeafItemSettings.md @@ -9,191 +9,150 @@ documentation: ug # LeafItemSettings in WPF TreeMap (SfTreeMap) -LeafItemSettings of SfTreeMap is a setting by which we can settings the template for the leafNode. - +[LeafItemSettings](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html#Syncfusion_UI_Xaml_TreeMap_SfTreeMap_LeafItemSettings) of [SfTreeMap](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html) is a setting by which you can set the template for the leaf node. {% highlight xaml %} - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + {% endhighlight %} - -N> The specified field must be available in each and every sub class (object) defined in hierarchical (nested) data collection. - - +N> The specified field must be available in each and every subclass (object) defined in the hierarchical (nested) data collection. ## LabelPath -LabelPath of the leaves is WeightValuePath by default and you can change the LabelPath as desired based on the data provided. +[LabelPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.LeafItemSettings.html#Syncfusion_UI_Xaml_TreeMap_LeafItemSettings_LabelPath) of the leaves is the WeightValuePath by default, and you can change the LabelPath as desired based on the data provided. {% highlight xaml %} + + + + + + + + + + + - - - - - - - - - - - - - - - - - - {% endhighlight %} ## LabelTemplate -LabelTemplate of LeafItemSettings class provides the template for the labels of the leafNodes. - +[LabelTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.LeafItemSettings.html#Syncfusion_UI_Xaml_TreeMap_LeafItemSettings_LabelTemplate) of the LeafItemSettings class provides the template for the labels of the leaf nodes. {% highlight xaml %} + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {% endhighlight %} ## Gap -Gap provides the gap between the leaves at Leaf Level. - +[Gap](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.LeafItemSettings.html#Syncfusion_UI_Xaml_TreeMap_LeafItemSettings_Gap) provides the gap between the leaves at the leaf level. {% highlight xaml %} + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - {% endhighlight %} ## BorderBrush -BorderBrush provides the border color for the leafNodes and BorderThickness provides the thickness of the BorderBrush. - +[BorderBrush](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.LeafItemSettings.html#Syncfusion_UI_Xaml_TreeMap_LeafItemSettings_BorderBrush) provides the border color for the leaf nodes, and the BorderThickness provides the thickness of the BorderBrush. {% highlight xaml %} + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - {% endhighlight %} - - ![LeafItemSettings_img1](LeafItemSettings_images/LeafItemSettings_img1.png) diff --git a/wpf/TreeMap/Overview.md b/wpf/TreeMap/Overview.md index cc7517f8fa..f43901dfe1 100644 --- a/wpf/TreeMap/Overview.md +++ b/wpf/TreeMap/Overview.md @@ -11,7 +11,7 @@ documentation: ug TreeMaps are ideal for visualizing large amounts of data. The visualization space is split up into rectangles that are sized and colored based on the quantitative variables. The levels in the hierarchy of the tree map are visualized as rectangles containing other rectangles. -###Use Cases +### Use Cases Tree maps are used to represent large or complex data sets in various applications such as, diff --git a/wpf/TreeMap/Selection-Support.md b/wpf/TreeMap/Selection-Support.md index 19026c44ed..d4625657e5 100644 --- a/wpf/TreeMap/Selection-Support.md +++ b/wpf/TreeMap/Selection-Support.md @@ -9,59 +9,42 @@ documentation: ug # Selection Support in WPF TreeMap (SfTreeMap) -While selecting a leaf node, you can highlight it by setting HighlightOnSelection property of SfTreeMap to “True”. The border of highlight on selection can be customized by HighlightBorderBrush and HighlightBorderThickness properties of SfTreeMap. SelectionMode can also be set to either “Default” or “Multiple”. “Multiple” selection of leaf nodes is made possible by pressing the control key continuously while Mouse Click happens. +While selecting a leaf node, you can highlight it by setting HighlightOnSelection property of [SfTreeMap](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html) to “True”. The border of highlight on selection can be customized by HighlightBorderBrush and HighlightBorderThickness properties of SfTreeMap. SelectionMode can also be set to either “Default” or “Multiple”. “Multiple” selection of leaf nodes is made possible by pressing the control key continuously while Mouse Click happens. {% highlight xaml %} - - + -{% endhighlight %} - - +{% endhighlight %} ![Selection Support_images](Selection-Support_images/Selection-Support_img1.png) - -GroupSelection support is also provided under selection support where the whole group can be selected. While selecting a leaf node, you can highlight it by setting HighlightGroupOnSelection property of SfTreeMap to “True”. The helper properties, HighlightBorderBrush, HighlightBorderThickness, and SelectionModes are shared for both HighlightOnSelection and HighlightGroupOnSelection. +GroupSelection support is also provided under selection support where the whole group can be selected. While selecting a leaf node, you can highlight it by setting [HighlightGroupOnSelection](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html#Syncfusion_UI_Xaml_TreeMap_SfTreeMap_HighlightGroupOnSelection) property of SfTreeMap to “True”. The helper properties, [HighlightBorderBrush](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html#Syncfusion_UI_Xaml_TreeMap_SfTreeMap_HighlightBorderBrush), [HighlightBorderThickness](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html#Syncfusion_UI_Xaml_TreeMap_SfTreeMap_HighlightBorderThickness), and [SelectionModes](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html#Syncfusion_UI_Xaml_TreeMap_SfTreeMap_SelectionModes) are shared for both [HighlightOnSelection](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html#Syncfusion_UI_Xaml_TreeMap_SfTreeMap_HighlightOnSelection) and [HighlightGroupOnSelection](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html#Syncfusion_UI_Xaml_TreeMap_SfTreeMap_HighlightGroupOnSelection). {% highlight xaml %} + + - - - - {% endhighlight %} diff --git a/wpf/TreeMap/ToolTip-Support.md b/wpf/TreeMap/ToolTip-Support.md index 74d4aa33af..702708a638 100644 --- a/wpf/TreeMap/ToolTip-Support.md +++ b/wpf/TreeMap/ToolTip-Support.md @@ -9,114 +9,124 @@ documentation: ug # ToolTip Support in WPF TreeMap (SfTreeMap) -You can enable tooltip for TreeMap by setting [`ShowToolTip`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html#Syncfusion_UI_Xaml_TreeMap_SfTreeMap_ShowToolTip) to “True”. For modifying default appearance of tooltip, [`ToolTipTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html#Syncfusion_UI_Xaml_TreeMap_SfTreeMap_ToolTipTemplate) can be specified and also you can set the [`ToolTipShowDuration`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html#Syncfusion_UI_Xaml_TreeMap_SfTreeMap_ToolTipShowDuration) property to define the animation speed. +You can enable the tooltip for the TreeMap by setting [`ShowToolTip`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html#Syncfusion_UI_Xaml_TreeMap_SfTreeMap_ShowToolTip) to `true`. For modifying the default appearance of the tooltip, [`ToolTipTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html#Syncfusion_UI_Xaml_TreeMap_SfTreeMap_ToolTipTemplate) can be specified, and you can also set the [`ToolTipShowDuration`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html#Syncfusion_UI_Xaml_TreeMap_SfTreeMap_ToolTipShowDuration) property to define the animation speed. {% highlight xaml %} - - - - - - - + + - - - - - + + - - + - - - - - - - + + + + + - - - - - - - + + + + + - - - + - - - - + - - - - - - - - - - - + + + + - - + - - - - + - {% endhighlight %} - The following screenshot shows a tree map with a tool tip. - - ![Tree map with tooltip](ToolTip-Support_images/ToolTip-Support_img1.png) - - - diff --git a/wpf/TreeMap/TreeMap-Layout.md b/wpf/TreeMap/TreeMap-Layout.md index 81bef1cd29..bb3cb46628 100644 --- a/wpf/TreeMap/TreeMap-Layout.md +++ b/wpf/TreeMap/TreeMap-Layout.md @@ -9,38 +9,29 @@ documentation: ug # TreeMap Layout in WPF TreeMap (SfTreeMap) -The ItemsLayoutMode for SfTreeMap specifies the layout mode of the tree map items. This layout is applied for all the tree map levels. There are four different TreeMap layouts such as, +The [ItemsLayoutMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html#Syncfusion_UI_Xaml_TreeMap_SfTreeMap_ItemsLayoutMode) for SfTreeMap specifies the layout mode of the tree map items. This layout is applied for all the tree map levels. There are four different TreeMap layouts, as follows: ## Squarified Layout -In this layout the data is visualized in the form of square-like rectangles with best aspect ratio. +In this layout, the data is visualized in the form of square-like rectangles with the best aspect ratio. -The following code illustrates how to set a squarified layout in Treemap. +The following code illustrates how to set a squarified layout in the TreeMap. {% highlight xaml %} + + + + + + + - - - - - - - - - - - - - {% endhighlight %} @@ -49,50 +40,30 @@ The following screenshot illustrates a squarified layout. ![TreeMap-Layout_img1](TreeMap-Layout_images/TreeMap-Layout_img1.png) +## SliceAndDiceAuto Layout -## SliceAndDiceAuto Layout: - -In this layout the data is visualized in the form of long-thin rectangles with high aspect ratio, which can be displayed either vertically or horizontally. - -The following code illustrates how to set a slice and dice layout in Treemap. - +In this layout, the data is visualized in the form of long, thin rectangles with a high aspect ratio, which can be displayed either vertically or horizontally. +The following code illustrates how to set a slice-and-dice layout in the TreeMap. {% highlight xaml %} - - - - - + + + + - - - - - - - + + + {% endhighlight %} - - - - - - - - - The following screenshot illustrates a slice-and-dice layout. _Slice-and-dice layout_ @@ -100,80 +71,54 @@ _Slice-and-dice layout_ ![TreeMap-Layout_images2](TreeMap-Layout_images/TreeMap-Layout_img2.jpeg) +## SliceAndDiceHorizontal Layout -## SliceAndDiceHorizontal Layout: - -The following code illustrates how to set a slice and dice layout horizontally in TreeMap. +The following code illustrates how to set a slice-and-dice layout horizontally in the TreeMap. {% highlight xaml %} + + + + + + + - - - - - - - - - - - - - {% endhighlight %} -The following screenshot shows a Slice-and-dice TreeMap in horizontal layout. +The following screenshot shows a slice-and-dice TreeMap in a horizontal layout. ![TreeMap-Layout_img3](TreeMap-Layout_images/TreeMap-Layout_img3.png) +## SliceAndDiceVertical Layout -## SliceAndDiceVertical Layout: - -The following code illustrates how to set a slice and dice layout vertically in TreeMap. +The following code illustrates how to set a slice-and-dice layout vertically in the TreeMap. {% highlight xaml %} + + + + + + + - - - - - - - - - - - - - {% endhighlight %} +The following screenshot shows a slice-and-dice TreeMap in a vertical layout. -The following screenshot shows a Slice-and-dice TreeMap in vertical layout. - - - -![TreeMap-Layout_img4](TreeMap-Layout_images/TreeMap-Layout_img4.png) - - - +![TreeMap-Layout_img4](TreeMap-Layout_images/TreeMap-Layout_img4.png) \ No newline at end of file diff --git a/wpf/TreeMap/TreeMap-Legend.md b/wpf/TreeMap/TreeMap-Legend.md index 1087cbf4be..83b746cefa 100644 --- a/wpf/TreeMap/TreeMap-Legend.md +++ b/wpf/TreeMap/TreeMap-Legend.md @@ -9,7 +9,7 @@ documentation: ug # TreeMap Legend in WPF TreeMap (SfTreeMap) -TreeMap legend is used to easily demonstrate about the color value of leaf nodes. But this legend could be appropriate only for the treemap having leaf nodes colored by using RangeBrushColorMapping. The labels of the legend item can be customized by specifying LegendLabel of RangeBrush mentioned in the Brushes of RangeBrushColorMapping. +TreeMap [legend](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html#Syncfusion_UI_Xaml_TreeMap_SfTreeMap_Legend) is used to easily demonstrate about the color value of leaf nodes. But this legend could be appropriate only for the treemap having leaf nodes colored by using RangeBrushColorMapping. The labels of the legend item can be customized by specifying LegendLabel of RangeBrush mentioned in the Brushes of RangeBrushColorMapping. The icon of legend item can be set by LegendIconStyle of TreeMapLegend. Custom legend icon can be set by assigning DataTemplate to LegendIconTemplate with LegendIconStyle as “Custom”. The width and height of the legend icon can be modified by setting LegendIconWidth and LegendIconHeight of TreeMapLegend. @@ -18,60 +18,66 @@ The legend can be positioned to Left, Right, Top or Bottom of TreeMap with the h {% highlight xaml %} - - - - + - - - + - - - - - - - - - - - - - - - - - + + + + + + + - - + - - - - + - {% endhighlight %} diff --git a/wpf/TreeMap/TreeMap-Levels.md b/wpf/TreeMap/TreeMap-Levels.md index 721ce9f894..fb49cb9154 100644 --- a/wpf/TreeMap/TreeMap-Levels.md +++ b/wpf/TreeMap/TreeMap-Levels.md @@ -9,649 +9,436 @@ documentation: ug # TreeMap Levels in WPF TreeMap (SfTreeMap) -The levels of TreeMap can be categorized into two types such as, - -* TreeMapFlatLevel -* TreeMapHierarchicalLevel - +The levels of the TreeMap can be categorized into two types, as follows: +* [TreeMapFlatLevel](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.TreeMapFlatLevel.html) +* [TreeMapHierarchicalLevel](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.TreeMapHierarchicalLevel.html) ## TreeMapFlatLevel -TreeMapFlatLevel is used to define levels for flat data collection. +TreeMapFlatLevel is used to define levels for a flat data collection. -###ItemsSource: +### ItemsSource -The ItemsSource set for SfTreeMap must be a flat collection of data. The following code shows how to bind a flat collection as ItemsSource to a TreeMap. +The ItemsSource set for the SfTreeMap must be a flat collection of data. The following code shows how to bind a flat collection as the ItemsSource to a TreeMap. {%tabs%} {% highlight xaml %} + + + + + + - - - - - - - - - - - - - {% endhighlight %} {% highlight c# %} - - public class PopulationViewModel - +public class PopulationViewModel +{ + public PopulationViewModel() { - - public PopulationViewModel() - - { - - this.PopulationDetails = new - - ObservableCollection(); - -PopulationDetails.Add(new PopulationDetail() { Continent = "Asia", Country = "Indonesia", Growth = 3, Population = 237641326 }); - -PopulationDetails.Add(new PopulationDetail() { Continent = "Asia", Country = "Russia", Growth = 2, Population = 152518015 }); - -PopulationDetails.Add(new PopulationDetail() { Continent = "North America", Country = "United States", Growth = 4, Population = 315645000 }); - -PopulationDetails.Add(new PopulationDetail() { Continent = "North America", Country = "Mexico", Growth = 2, Population = 112336538 }); - - PopulationDetails.Add(new PopulationDetail() { Continent = "Africa", Country = "Nigeria", Growth = 2, Population = 170901000 }); - - PopulationDetails.Add(new PopulationDetail() { Continent = "Africa", Country = "Egypt", Growth = 1, Population = 83661000 }); - - PopulationDetails.Add(new PopulationDetail() { Continent = "Europe", Country = "Germany", Growth = 1, Population = 81993000 }); - - PopulationDetails.Add(new PopulationDetail() { Continent = "Europe", Country = "France", Growth = 1, Population = 65605000 }); - + this.PopulationDetails = new ObservableCollection(); + + PopulationDetails.Add(new PopulationDetail() { Continent = "Asia", Country = "Indonesia", Growth = 3, Population = 237641326 }); + PopulationDetails.Add(new PopulationDetail() { Continent = "Asia", Country = "Russia", Growth = 2, Population = 152518015 }); + PopulationDetails.Add(new PopulationDetail() { Continent = "North America", Country = "United States", Growth = 4, Population = 315645000 }); + PopulationDetails.Add(new PopulationDetail() { Continent = "North America", Country = "Mexico", Growth = 2, Population = 112336538 }); + PopulationDetails.Add(new PopulationDetail() { Continent = "Africa", Country = "Nigeria", Growth = 2, Population = 170901000 }); + PopulationDetails.Add(new PopulationDetail() { Continent = "Africa", Country = "Egypt", Growth = 1, Population = 83661000 }); + PopulationDetails.Add(new PopulationDetail() { Continent = "Europe", Country = "Germany", Growth = 1, Population = 81993000 }); + PopulationDetails.Add(new PopulationDetail() { Continent = "Europe", Country = "France", Growth = 1, Population = 65605000 }); PopulationDetails.Add(new PopulationDetail() { Continent = "Europe", Country = "UK", Growth = 1, Population = 63181775 }); + } - } - - public ObservableCollection PopulationDetails - - { - - get; - - set; - - } - - public class PopulationDetail - - { - - public string Continent { get; set; } - - public string Country { get; set; } + public ObservableCollection PopulationDetails + { + get; + set; + } - public double Growth { get; set; } + public class PopulationDetail + { + public string Continent { get; set; } - public double Population { get; set; } + public string Country { get; set; } - } + public double Growth { get; set; } + public double Population { get; set; } } +} + {% endhighlight %} {%endtabs%} -### GroupPath: +### GroupPath -You must specify the GroupPath for each and every flat level of TreeMap. It is a path to a field on the source object, which serves as the “Group” for the levels specified. Based upon the GroupPath, the data is grouped in the TreeMap. If GroupPath is not specified, then the items are not grouped, and it is shown in the order, in which they are specified in the ItemsSource. +You must specify the [GroupPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.TreeMapFlatLevel.html#Syncfusion_UI_Xaml_TreeMap_TreeMapFlatLevel_GroupPath) for each and every flat level of the TreeMap. It is a path to a field on the source object, which serves as the "Group" for the levels specified. Based on the GroupPath, the data is grouped in the TreeMap. If the GroupPath is not specified, then the items are not grouped, and they are shown in the order in which they are specified in the ItemsSource. {% highlight xaml %} - - - - + - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + {% endhighlight %} +### GroupGap - -### GroupGap: - -You can specify GroupGap for separating the items of every flat level and it is used to differentiate the levels mentioned for TreeMap. +You can specify the [GroupGap](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.TreeMapFlatLevel.html#Syncfusion_UI_Xaml_TreeMap_TreeMapFlatLevel_GroupGap) for separating the items of every flat level, and it is used to differentiate the levels mentioned for the TreeMap. {% highlight xaml %} - - - - - + + + + + + + - - - - - - - - - - - - - - - {% endhighlight %} ### GroupBorderBrush -GroupBorderBrush provides the border color for the group levels. +[GroupBorderBrush](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.TreeMapFlatLevel.html#Syncfusion_UI_Xaml_TreeMap_TreeMapFlatLevel_GroupBorderBrush) provides the border color for the group levels. {% highlight xaml %} + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - {% endhighlight %} ### GroupBackground -GroupBackground specifies the background brush for the levels. The GroupBackground is effectively seen when we provide GroupPadding also while defining the Levels. +[GroupBackground](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.TreeMapFlatLevel.html#Syncfusion_UI_Xaml_TreeMap_TreeMapFlatLevel_GroupBackground) specifies the background brush for the levels. The GroupBackground is effectively seen when we provide the GroupPadding also while defining the Levels. {% highlight xaml %} + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - {% endhighlight %} -## TreeMapHierarchicalLevel: +## TreeMapHierarchicalLevel -TreeMapHierarchicalLevel is used to define levels for hierarchical data collection which contains tree-structured data. +[TreeMapHierarchicalLevel](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.TreeMapHierarchicalLevel.html) is used to define levels for a hierarchical data collection which contains tree-structured data. -### ItemsSource: +### ItemsSource -The ItemsSource set for TreeMap must be a nested data collection. The following code shows how to bind a hierarchical data collection as ItemsSource for TreeMap. +The ItemsSource set for the TreeMap must be a nested data collection. The following code shows how to bind a hierarchical data collection as the ItemsSource for the TreeMap. {%tabs%} {% highlight xaml %} + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - {% endhighlight %} - {% highlight c# %} - - - public class CountrySalesCollection : ObservableCollection - +public class CountrySalesCollection : ObservableCollection +{ + public CountrySalesCollection() { - - public CountrySalesCollection() - - { - - this.Add(new CountrySale() { Name = "United States", Sales = 98456, Expense = 87000 }); - - this.Add(new CountrySale() { Name = "Canada", Sales = 43523, Expense = 40000 }); - - this.Add(new CountrySale() { Name = "Mexico", Sales = 45634, Expense = 46000 }); - - this[0].RegionalSalesCollection.Add(new RegionSale() { Country = "United States", Name = "New York", Sales = 2353, Expense = 2000 }); - - this[0].RegionalSalesCollection.Add(new RegionSale() { Country = "United States", Name = "Los Angeles", Sales = 3453, Expense = 3000 }); - - this[0].RegionalSalesCollection.Add(new RegionSale() { Country = "United States", Name = "San Francisco", Sales = 8456, Expense = 8000 }); - - this[0].RegionalSalesCollection.Add(new RegionSale() { Country = "United States", Name = "Chicago", Sales = 6785, Expense = 7000 }); - - this[0].RegionalSalesCollection.Add(new RegionSale() { Country = "United States", Name = "Miami", Sales = 7045, Expense = 6000 }); - - this[1].RegionalSalesCollection.Add(new RegionSale() { Country = "Canada", Name = "Toronto", Sales = 7045, Expense = 7000 }); - - this[1].RegionalSalesCollection.Add(new RegionSale() { Country = "Canada", Name = "Vancouver", Sales = 4352, Expense = 4000 }); - - this[1].RegionalSalesCollection.Add(new RegionSale() { Country = "Canada", Name = "Winnipeg", Sales = 7843, Expense = 7500 }); - - - - this[2].RegionalSalesCollection.Add(new RegionSale() { Country = "Mexico", Name = "Mexico City", Sales = 7843, Expense = 6500 }); - - this[2].RegionalSalesCollection.Add(new RegionSale() { Country = "Mexico", Name = "Cancun", Sales = 6683, Expense = 6000 }); } - + this.Add(new CountrySale() { Name = "United States", Sales = 98456, Expense = 87000 }); + this.Add(new CountrySale() { Name = "Canada", Sales = 43523, Expense = 40000 }); + this.Add(new CountrySale() { Name = "Mexico", Sales = 45634, Expense = 46000 }); + + this[0].RegionalSalesCollection.Add(new RegionSale() { Country = "United States", Name = "New York", Sales = 2353, Expense = 2000 }); + this[0].RegionalSalesCollection.Add(new RegionSale() { Country = "United States", Name = "Los Angeles", Sales = 3453, Expense = 3000 }); + this[0].RegionalSalesCollection.Add(new RegionSale() { Country = "United States", Name = "San Francisco", Sales = 8456, Expense = 8000 }); + this[0].RegionalSalesCollection.Add(new RegionSale() { Country = "United States", Name = "Chicago", Sales = 6785, Expense = 7000 }); + this[0].RegionalSalesCollection.Add(new RegionSale() { Country = "United States", Name = "Miami", Sales = 7045, Expense = 6000 }); + + this[1].RegionalSalesCollection.Add(new RegionSale() { Country = "Canada", Name = "Toronto", Sales = 7045, Expense = 7000 }); + this[1].RegionalSalesCollection.Add(new RegionSale() { Country = "Canada", Name = "Vancouver", Sales = 4352, Expense = 4000 }); + this[1].RegionalSalesCollection.Add(new RegionSale() { Country = "Canada", Name = "Winnipeg", Sales = 7843, Expense = 7500 }); + + this[2].RegionalSalesCollection.Add(new RegionSale() { Country = "Mexico", Name = "Mexico City", Sales = 7843, Expense = 6500 }); + this[2].RegionalSalesCollection.Add(new RegionSale() { Country = "Mexico", Name = "Cancun", Sales = 6683, Expense = 6000 }); } +} +public class CountrySale : INotifyPropertyChanged +{ + public string Name { get; set; } + private double _sales = 0; - public class CountrySale : INotifyPropertyChanged - + public double Sales { - - public string Name { get; set; } - - private double _sales = 0; - - public double Sales - + get { - - get { return _sales; } - - set - - { - - if (_sales != value) - - { - - _sales = value; - - this.OnPropertyChanged(new - - PropertyChangedEventArgs("Sales")); - - } - - } - + return _sales; } - - private double _expense = 0; - - public double Expense - + set { - - get { return _expense; } - - set - + if (_sales != value) { - - if (_expense != value) - - { - - _expense = value; - - this.OnPropertyChanged(new - - PropertyChangedEventArgs("Expense")); - - } - + _sales = value; + this.OnPropertyChanged(new PropertyChangedEventArgs("Sales")); } - } + } - public ObservableCollection RegionalSalesCollection - - { get; set; } - - public CountrySale() + private double _expense = 0; + public double Expense + { + get { - - this.RegionalSalesCollection = new ObservableCollection(); - + return _expense; } - - #region INotifyPropertyChanged Members - - public event PropertyChangedEventHandler PropertyChanged; - - protected void OnPropertyChanged(PropertyChangedEventArgs e) - + set { - - if (this.PropertyChanged != null) - - this.PropertyChanged.Invoke(this, e); - + if (_expense != value) + { + _expense = value; + this.OnPropertyChanged(new PropertyChangedEventArgs("Expense")); + } } + } - #endregion + public ObservableCollection RegionalSalesCollection { get; set; } + public CountrySale() + { + this.RegionalSalesCollection = new ObservableCollection(); } + #region INotifyPropertyChanged Members + public event PropertyChangedEventHandler PropertyChanged; - public class RegionSale : INotifyPropertyChanged - + protected void OnPropertyChanged(PropertyChangedEventArgs e) { + if (this.PropertyChanged != null) + { + this.PropertyChanged.Invoke(this, e); + } + } - public string Name { get; set; } + #endregion +} - public string Country { get; set; } +public class RegionSale : INotifyPropertyChanged +{ + public string Name { get; set; } - private double _sales = 0; + public string Country { get; set; } - public double Sales + private double _sales = 0; + public double Sales + { + get { - - get { return _sales; } - - set - + return _sales; + } + set + { + if (_sales != value) { - - if (_sales != value) - - { - - _sales = value; - - this.OnPropertyChanged(new - - PropertyChangedEventArgs("Sales")); - - } - + _sales = value; + this.OnPropertyChanged(new PropertyChangedEventArgs("Sales")); } - } + } - private double _expense = 0; - - public double Expense + private double _expense = 0; + public double Expense + { + get { - - get { return _expense; } - - set - + return _expense; + } + set + { + if (_expense != value) { - - if (_expense != value) - - { - - _expense = value; - - this.OnPropertyChanged(new - - PropertyChangedEventArgs("Expense")); - - } - + _expense = value; + this.OnPropertyChanged(new PropertyChangedEventArgs("Expense")); } - } + } + #region INotifyPropertyChanged Members + public event PropertyChangedEventHandler PropertyChanged; - #region INotifyPropertyChanged Members - - - - public event PropertyChangedEventHandler PropertyChanged; - - protected void OnPropertyChanged(PropertyChangedEventArgs e) - + protected void OnPropertyChanged(PropertyChangedEventArgs e) + { + if (this.PropertyChanged != null) { - - if (this.PropertyChanged != null) - - this.PropertyChanged.Invoke(this, e); - + this.PropertyChanged.Invoke(this, e); } + } + #endregion +} - - #endregion - - } {% endhighlight %} {%endtabs%} +### ChildPath -### ChildPath: - -You must specify ChildPath for each and every hierarchical level of TreeMap. It is a path to a field on the source object, which serves as the “Child” for the level specified. Based upon the ChildPath, the treemap contains child items. +You must specify the [ChildPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.TreeMapHierarchicalLevel.html#Syncfusion_UI_Xaml_TreeMap_TreeMapHierarchicalLevel_ChildPath) for each and every hierarchical level of the TreeMap. It is a path to a field on the source object, which serves as the "Child" for the level specified. Based on the ChildPath, the treemap contains child items. {% highlight xaml %} + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - {% endhighlight %} +N> The specified field must be a collection of the subclass (object) specified in the nested data collection. +### ChildGap -N> The specified field must be a collection of sub class (object) specified in the nested data collection. - - - -### ChildGap: - -You can specify ChildGap for separating the child items of every level and it is used to differentiate the levels mentioned for TreeMap. +You can specify the [ChildGap](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.TreeMapHierarchicalLevel.html#Syncfusion_UI_Xaml_TreeMap_TreeMapHierarchicalLevel_ChildGap) for separating the child items of every level, and it is used to differentiate the levels mentioned for the TreeMap. {% highlight xaml %} + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - {% endhighlight %} - - - - -![TreeMap-Levels_img2](TreeMap-Levels_images/TreeMap-Levels_img2.png) - - - +![TreeMap-Levels_img2](TreeMap-Levels_images/TreeMap-Levels_img2.png) \ No newline at end of file diff --git a/wpf/TreeMap/WeightValuePath.md b/wpf/TreeMap/WeightValuePath.md index 88d9bf7bf4..6c50da7446 100644 --- a/wpf/TreeMap/WeightValuePath.md +++ b/wpf/TreeMap/WeightValuePath.md @@ -9,31 +9,22 @@ documentation: ug # WeightValuePath in WPF TreeMap (SfTreeMap) -The WeightValuePath ofSfTreeMap is a path to a field on the source object, which serve as the "weight" of the object. +The [WeightValuePath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html#Syncfusion_UI_Xaml_TreeMap_SfTreeMap_WeightValuePath) of [SfTreeMap](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeMap.SfTreeMap.html) is a path to a field on the source object, which serve as the "weight" of the object. {% highlight xaml %} + + + + - - - - - - - - - - + {% endhighlight %} - - N> The specified field must be available in each and every sub class (object) defined in hierarchical (nested) data collection. ![WeightValuePath_img1](WeightValuePath_images/WeightValuePath_img1.png)