diff --git a/wpf/Barcode/Barcode-Customization.md b/wpf/Barcode/Barcode-Customization.md index aa68908299..dfecb9dec9 100644 --- a/wpf/Barcode/Barcode-Customization.md +++ b/wpf/Barcode/Barcode-Customization.md @@ -1,7 +1,7 @@ --- layout: post title: Barcode Customization in WPF Barcode control | Syncfusion -description: Learn here all about Barcode Customization support in Syncfusion WPF Barcode (SfBarcode) control and more. +description: Learn how to customize barcodes in the Syncfusion WPF SfBarcode control, including appearance, styling, and configuration options. platform: wpf control: SfBarcode documentation: ug @@ -9,26 +9,32 @@ documentation: ug # Barcode Customization in WPF Barcode (SfBarcode) -The color of the barcode can be customized by modifying the DarkBarBrush and LightBarBrush properties of the barcode control. +## Overview -{% highlight html %} +The color of the barcode can be customized by modifying the `DarkBarBrush` and `LightBarBrush` properties of the barcode control. The `DarkBarBrush` represents the color of the dark bar (Black color usually) and the `LightBarBrush` represents the color of the gap between two adjacent dark bars (White color usually). - +## Customizing the barcode colors -{% endhighlight %} +The following code example shows how to set the dark and light bar colors. +{% highlight xml %} -The DarkBarBrush represents the color of the dark bar (Black color usually) and the LightBarBrush represents the color of the gap between two adjacent black bars (White color usually). + + +{% endhighlight %} + +The following images illustrate the barcode rendered with different color combinations. ![WPF-Barcode-Red-Color-Combination](Barcode-Customization_images/wpf-barcode-red-color-combination.png) -Barcode color combinations- Red +Barcode color combinations – Red {:.caption} - ![WPF-Barcode-Blue-Color-Combination](Barcode-Customization_images/wpf-barcode-blue-color-combination.png) -Barcode color combinations- Blue +Barcode color combinations – Blue {:.caption} -N> The DarkBarBrush and LightBarBrush customizations are applicable only for one dimensional barcodes. In order for a barcode symbol to be recognized by a scanner, there must be an adequate contrast between the dark bars and the light spaces and not all the barcode scanners have support for colored barcodes. +## Limitations + +N> The `DarkBarBrush` and `LightBarBrush` customizations are applicable only for one-dimensional barcodes. For a barcode symbol to be recognized by a scanner, there must be adequate contrast between the dark bars and the light spaces. Additionally, not all barcode scanners support colored barcodes. diff --git a/wpf/Barcode/Getting-Started.md b/wpf/Barcode/Getting-Started.md index 9f9705c99b..c05ff86e25 100644 --- a/wpf/Barcode/Getting-Started.md +++ b/wpf/Barcode/Getting-Started.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with WPF Barcode control | Syncfusion -description: Learn here about getting started with Syncfusion WPF Barcode (SfBarcode) control, its elements and more details. +description: Learn how to get started with the Syncfusion WPF SfBarcode control, including setup, basic usage, and key barcode elements. platform: wpf control: SfBarcode documentation: ug @@ -9,30 +9,25 @@ documentation: ug # Getting Started with WPF Barcode (SfBarcode) -## Add Barcode control to an Application +## Add the Barcode control to an application -The following assembly reference is required for deploying Barcode. +The following assembly reference is required for deploying the Barcode control. -{% highlight c# %} +* **Namespace**: `Syncfusion.UI.Xaml.Controls.Barcode` +* **Assembly**: `Syncfusion.SfBarcode.WPF` -Namespace: Syncfusion.UI.Xaml.Controls.Barcode +To create the `SfBarcode` control in Visual Studio: -Assembly: Syncfusion.SfBarcode.WPF +1. Create a new WPF project. -{% endhighlight %} +2. Drag the `SfBarcode` control from the **Toolbox** window to the Design view to create an instance of the control. -To create the SfBarcode control in Visual Studio: +![WPF Barcode Control](Getting-Started_images/wpf-barcode-control.png) -1. Create a new WPF project. +The SfBarcode control after being dragged to the Design view +{:.caption} -2. Drag the SfBarcode control from the Toolbox window to the Design View. An instance of the SfBarcode control is created in the Design view. - - ![WPF Barcode Control](Getting-Started_images/wpf-barcode-control.png) - - SfBarcode Control after Dragging to Design View - {:.caption} - -The following code example shows how to create the Barcode control from XAML: +The following code example shows how to create the Barcode control using XAML: {% highlight xaml %} @@ -58,14 +53,14 @@ The following code example shows how to create the Barcode control from XAML: ## Text -The text to be encoded can be set using the Text property. By default, this original text will be displayed at the bottom of the bar code. The location of the text can be toggled between top and bottom using TextLocation property. The horizontal alignment of the text can be set using TextAlignment. The text brush and other various font customization can also be done using the built-in font properties. Optionally, the user can hide the barcode text by setting the DisplayText property to false. +The text to be encoded can be set using the `Text` property. By default, this text is displayed at the bottom of the barcode. The location of the text can be toggled between **Top** and **Bottom** using the `TextLocation` property, and its horizontal alignment can be set using the `TextAlignment` property. The text color and font can also be customized using the built-in font properties. To hide the barcode text, set the `DisplayText` property to `false`. {% highlight xaml %} - + {% endhighlight %} ## Rotation -Barcode control can be rotated to save space by using the Rotation property. The barcode can be rotated to 90, 180 and 270 degrees. \ No newline at end of file +The Barcode control can be rotated to save space using the `Rotation` property. The barcode can be rotated to 90, 180, and 270 degrees. \ No newline at end of file diff --git a/wpf/Barcode/Overview.md b/wpf/Barcode/Overview.md index 0f27b6d4d4..f9d2a651bc 100644 --- a/wpf/Barcode/Overview.md +++ b/wpf/Barcode/Overview.md @@ -1,7 +1,7 @@ --- layout: post title: About WPF Barcode control | Syncfusion -description: Learn here all about introduction of Syncfusion WPF Barcode (SfBarcode) control, its elements and more details. +description: Learn about the introduction to the Syncfusion WPF Barcode (SfBarcode) control, its elements, and more details. platform: wpf control: SfBarcode documentation: ug @@ -9,21 +9,21 @@ documentation: ug # WPF Barcode (SfBarcode) Overview -The Barcode control helps rendering bar codes in desktop (WPF) application. The control can be merged with into any desktop application and easy to encode text using the supported symbol types. The basic structure of a bar code consists of a leading and trailing quiet zone, a start pattern, one or more data characters, optionally one or two check characters, and a stop pattern. +The Barcode control helps render barcodes in desktop (WPF) applications. The control can be merged into any desktop application and makes it easy to encode text using the supported symbol types. The basic structure of a barcode consists of a leading and trailing quiet zone, a start pattern, one or more data characters, optionally one or two check characters, and a stop pattern. ![WPF One Dimensional Barcode](Overview_images/wpf-one-dimensional-barcode.png) -Barcode control rendering 1D bar code +Barcode control rendering a 1D barcode {:.caption} ![WPF Two Dimensional Barcode](Overview_images/wpf-two-dimensional-barcode.png) -Barcode control rendering 2D bar code +Barcode control rendering a 2D barcode {:.caption} -## Structure of the Control +## Structure of the control ![WPF Barcode Structure](Overview_images/wpf-barcode-structure.png) diff --git a/wpf/Barcode/Supported-Barcode-types.md b/wpf/Barcode/Supported-Barcode-types.md index 32da796d8e..1f25c5306c 100644 --- a/wpf/Barcode/Supported-Barcode-types.md +++ b/wpf/Barcode/Supported-Barcode-types.md @@ -1,7 +1,7 @@ --- layout: post title: Supported Barcode types in WPF Barcode control | Syncfusion -description: Learn here all about Supported Barcode types support in Syncfusion WPF Barcode (SfBarcode) control and more. +description: Learn about the barcode types supported in the Syncfusion WPF SfBarcode control, including 1D and 2D barcode symbologies. platform: wpf control: SfBarcode documentation: ug @@ -9,12 +9,12 @@ documentation: ug # Supported Barcode types in WPF Barcode (SfBarcode) -The following table contains the supported types and associated valid characters. +The following table lists the supported barcode types and their associated valid characters. - + @@ -82,7 +82,7 @@ variable
SymbolEnum ValueEnum value Supported characters Length
{{'[Code 128B](https://en.wikipedia.org/wiki/Code_128)'| markdownify }} Code128B -[0-9]; [A-Z]; [a-z]; [SPACE (0x20) ! " # $ % & ' ( ) * + , - . / :; < = > ? @ [ / ]^ _ ` { | } ~ DEL (•) ] +[0-9]; [A-Z]; [a-z]; [SPACE (0x20) ! " # $ % & ' ( ) * + , - . / : < = > ? @ [ / ]^ _ ` { | } ~ DEL (•) ] variable
diff --git a/wpf/Barcode/Symbology-Settings.md b/wpf/Barcode/Symbology-Settings.md index 9ff96d58fe..e9aa2521c3 100644 --- a/wpf/Barcode/Symbology-Settings.md +++ b/wpf/Barcode/Symbology-Settings.md @@ -1,7 +1,7 @@ --- layout: post title: Symbology Settings in WPF Barcode control | Syncfusion -description: Learn here all about Symbology Settings support in Syncfusion WPF Barcode (SfBarcode) control and more. +description: Learn about Symbology Settings in the Syncfusion WPF SfBarcode control and configure barcode-specific encoding options. platform: wpf control: SfBarcode documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Symbology Settings in WPF Barcode (SfBarcode) -Each Barcode symbol can be associated with optional settings that may affect that specific bar code. The code sample below shows the settings of a code39 Barcode. +Each Barcode symbol can be associated with optional settings that may affect that specific barcode. The code sample below shows the settings of a Code39 barcode. -{% highlight html %} +{% highlight xaml %} @@ -19,13 +19,13 @@ Each Barcode symbol can be associated with optional settings that may affect tha -{% endhighlight %} +{% endhighlight %} ## 1D Barcode settings -The one dimensional barcodes have some of the settings in common, such as BarHeight which modifies the height of the bars and NarrowBarWidth which modifies the width ratio of the wide and narrow bars. +The one-dimensional barcodes share some common settings, such as `BarHeight`, which modifies the height of the bars, and `NarrowBarWidth`, which modifies the width ratio of the wide and narrow bars. -{% highlight html %} +{% highlight xaml %} @@ -34,13 +34,13 @@ The one dimensional barcodes have some of the settings in common, such as BarHei -{% endhighlight %} +{% endhighlight %} -The one dimensional barcodes also has the error detection settings. The EnableCheckDigit property enables the redundancy check using a check digit, the decimal equivalent of a binary parity bit. It consists of a single digit computed from the other digits in the message. The check digit can be shown in the barcode or kept hidden by using the ShowCheckDigit property. +The one-dimensional barcodes also have error detection settings. The `EnableCheckDigit` property enables the redundancy check using a check digit, the decimal equivalent of a binary parity bit. It consists of a single digit computed from the other digits in the message. The check digit can be shown in the barcode or kept hidden by using the `ShowCheckDigit` property. -The EncodeStartStopSymbols property adds Start and Stop symbols to signal a bar code reader that a bar code has been scanned. +The `EncodeStartStopSymbols` property adds Start and Stop symbols to signal a barcode reader that a barcode has been scanned. -{% highlight html %} +{% highlight xaml %} @@ -52,25 +52,25 @@ The EncodeStartStopSymbols property adds Start and Stop symbols to signal a bar ## 2D Barcode Settings -The two dimensional barcodes have a common XDimension property which modifies the block size of a two dimensional barcode. +The two-dimensional barcodes share a common `XDimension` property, which modifies the block size of a two-dimensional barcode. ### DataMatrix Barcode settings -The DataMatrix barcode settings has the properties to modify the encoding and size of the DataMatrix barcode. +The DataMatrix barcode settings include properties to modify the encoding and size of the DataMatrix barcode. -{% highlight html %} +{% highlight xaml %} - + -{% endhighlight %} +{% endhighlight %} ### Encoding -The encoding of the DataMatrix barcode can be modified using the ‘Encoding’ property. The DataMatrixEncoding enumeration has the following four encoding schemes. +The encoding of the DataMatrix barcode can be modified using the `Encoding` property. The `DataMatrixEncoding` enumeration has the following four encoding schemes. * ASCII * ASCIINumeric @@ -79,9 +79,9 @@ The encoding of the DataMatrix barcode can be modified using the ‘Encoding’ ### Size -The DataMatrix Barcode settings allow the user to specify the size of the barcode from a set of predefined sizes available in the DataMatrixSize enumeration. +The DataMatrix barcode settings allow the user to specify the size of the barcode from a set of predefined sizes available in the `DataMatrixSize` enumeration. -Data Matrix size Table +Data Matrix size table @@ -217,28 +217,28 @@ Rectangular matrix with 16 rows and 48 columns. ### QRBarcode settings -The QRBarcode settings has properties to modify the version, error correction level and Input mode of the QRBarcode. +The QRBarcode settings include properties to modify the version, error correction level, and input mode of the QRBarcode. -{% highlight html %} +{% highlight xaml %} - + -{% endhighlight %} +{% endhighlight %} ## Version -The QR Barcode uses version from 1 to 40.Version 1 measures 21 modules x 21 modules, Version 2 measures 25 modules x 25 modules and so on increasing in steps of 4 modules per side up to Version 40 which measures 177 modules x 177 modules. Each version has its own capacity. By default the QR Version is Auto, which will automatically set the version according to the input text length. +The QR Barcode uses versions from 1 to 40. Version 1 measures 21 modules × 21 modules, Version 2 measures 25 modules × 25 modules, and so on, increasing in steps of 4 modules per side up to Version 40, which measures 177 modules × 177 modules. Each version has its own capacity. By default, the QR Version is `Auto`, which automatically sets the version according to the input text length. ## Error correction level -The QR Barcode employs error correction to generate a series of error correction codewords which are added to the data code word sequence in order to enable the symbol to withstand damage without loss of data. There are four user–selectable levels of error correction, as shown in the table, offering the capability of recovery from the following amounts of damage. By default the Error correction level is Low. +The QR Barcode employs error correction to generate a series of error correction codewords that are added to the data codeword sequence to enable the symbol to withstand damage without loss of data. There are four user-selectable levels of error correction, as shown in the table, offering the capability of recovery from the following amounts of damage. By default, the error correction level is **Low**. -Error Correction Level Table +Error correction level table
@@ -265,23 +265,23 @@ H +Customizes the label style using the LabelBarStyle property. This property can be applied to the {{'[`HigherLevelBarStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_HigherLevelBarStyle)'| markdownify }} or {{'[`LowerLevelBarStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_LowerLevelBarStyle)'| markdownify }}.
## Input mode -There are three modes for the input as defined in the table. Each mode supports the specific set of Input characters. User may select the most suitable input mode. By default the Input mode is Binary Mode. +There are three input modes, as defined in the table. Each mode supports a specific set of input characters. The user may select the most suitable input mode. By default, the input mode is **Binary Mode**. -Input Mode Table +Input mode table +0, 1, 2, 3, 4, 5, 6, 7, 8, 9 +0–9, A–Z (upper-case only), space, $, %, *, +, -, ., /, : +Gets or sets the maximum height and width of the bubble. +Gets or sets the border thickness of the bubbles. +Gets or sets colors to the bubble shape. ## Adding Bubbles to a Map -To add bubbles to a map, the bubble marker setting has to be added to the shape file layer. Set the [`AutoFillColor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_AutoFillColor) as true and set the [`Fill`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_Fill) property. Create the Model and ViewModel as illustrated in the [`Data Binding`](https://help.syncfusion.com/wpf/maps/custom-data-binding) topic and add the following code. +To add bubbles to a map, the bubble marker setting has to be added to the shape file layer. Set the [`AutoFillColor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_AutoFillColor) to true and set the [`Fill`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_Fill) property. Create the Model and ViewModel as illustrated in the [`Data Binding`](https://help.syncfusion.com/wpf/maps/custom-data-binding) topic and add the following code. Also set the [`MaxSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_MaxSize), [`MinSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_MinSize), and [`ValuePath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_ValuePath) properties as illustrated in the following code example. @@ -233,7 +233,7 @@ Gets or sets the template to customize the bubble. {% endhighlight %} -{% highlight C# %} +{% highlight c# %} ViewModel viewModel = new ViewModel(); @@ -351,7 +351,7 @@ The fill color of a particular bubble fill can be determined by its under-bound {% endhighlight %} -{% highlight C# %} +{% highlight c# %} RangeColorMapping rangeColorMapping = new RangeColorMapping(); rangeColorMapping.From = 314623001; @@ -395,9 +395,10 @@ The fill color of a particular bubble fill can be determined by its under-bound When the under-bound object value is 22789702, the fill color of the corresponding bubble is set to `#7FEB737C`. As mentioned earlier, the under-bound value of the bubble is set using the [`ValuePath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_ValuePath) in the BubbleMarkerSetting. -When the under-bound value is under any of the given sorted range or above the sorted range, then the fill is set as `Black`. +When the under-bound value is under any of the given sorted ranges or above the sorted range, the fill is set to `Black`. + +[`AutoFillColor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_AutoFillColor) must be set to `false` to enable range color mapping. -[`AutoFillColor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_AutoFillColor) must be set as `false` to enable range color mapping. ![RangeColorMapping](Bubbles_images/Bubbles_img3.png) N> You can also explore our [WPF Map example](https://github.com/syncfusion/wpf-demos/tree/master/map) to know how to render and configure the map. \ No newline at end of file diff --git a/wpf/Maps/Commands-for-Zooming-and-Panning.md b/wpf/Maps/Commands-for-Zooming-and-Panning.md index 208047c9b3..1addee66fe 100644 --- a/wpf/Maps/Commands-for-Zooming-and-Panning.md +++ b/wpf/Maps/Commands-for-Zooming-and-Panning.md @@ -19,11 +19,11 @@ The [WPF Map](https://www.syncfusion.com/wpf-controls/map) control contains the ## ZoomIn Command -[`ZoomIn`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_ZoomInCommand) command zooms in the map. +The [`ZoomIn`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_ZoomInCommand) command zooms in the map. ## ZoomOut Command -[`ZoomOut`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_ZoomOutCommand) command zooms out the map. +The [`ZoomOut`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_ZoomOutCommand) command zooms out the map. ## Pan Command @@ -59,17 +59,17 @@ The [`PanResetCommand`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Ma - +Gets or sets the margin value for the X-axis. +Gets or sets the margin value for the Y-axis.
-Input Mode +Input mode Possible characters
Numeric Mode -0,1,2,3,4,5,6,7,8,9
Alphanumeric Mode -0–9, A–Z (upper-case only), space, $, %, *, +, -,., /, :
Binary Mode diff --git a/wpf/Bullet-Graph/Caption.md b/wpf/Bullet-Graph/Caption.md index f104216533..d82b87258a 100644 --- a/wpf/Bullet-Graph/Caption.md +++ b/wpf/Bullet-Graph/Caption.md @@ -1,7 +1,7 @@ --- layout: post title: Caption in WPF Bullet Graph control | Syncfusion -description: Learn here all about Caption support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. +description: Learn all about the Caption support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. platform: wpf control: SfBulletGraph documentation: ug @@ -9,13 +9,13 @@ documentation: ug # Caption in WPF Bullet Graph (SfBulletGraph) -The [`Caption`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Caption) for a bullet graph is used to specify a unique label describing the value represented in the bullet graph. +The [`Caption`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Caption) property of the bullet graph is used to specify a unique label describing the value represented in the bullet graph. {% tabs %} {% highlight xaml %} - - + + @@ -23,20 +23,20 @@ The [`Caption`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGrap FontSize="13" HorizontalAlignment="Center"/> - + {% endhighlight %} {% highlight c# %} - SfBulletGraph bulletgraph = new SfBulletGraph(); - TextBlock textBlock = new TextBlock() { Text = "Revenue YTD" }; - TextBlock textBlock1 = new TextBlock() { Text = "$ in Thousands" }; - StackPanel stackPanel = new StackPanel(); - stackPanel.Children.Add(textBlock); - stackPanel.Children.Add(textBlock1); - bulletgraph.Caption = stackPanel; - grid.Children.Add(bulletgraph); + SfBulletGraph bulletgraph = new SfBulletGraph(); + TextBlock textBlock = new TextBlock() { Text = "Revenue YTD" }; + TextBlock textBlock1 = new TextBlock() { Text = "$ in Thousands" }; + StackPanel stackPanel = new StackPanel(); + stackPanel.Children.Add(textBlock); + stackPanel.Children.Add(textBlock1); + bulletgraph.Caption = stackPanel; + grid.Children.Add(bulletgraph); {% endhighlight %} {% endtabs %} @@ -45,7 +45,7 @@ The [`Caption`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGrap ## Caption Position -The caption in the bullet graph can be placed in the start or end of the quantitative scale by choosing from one of the two options available in the [`CaptionPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_CaptionPosition) property. They are: +The caption in the bullet graph can be placed at the start or end of the quantitative scale using the [`CaptionPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_CaptionPosition) property, which supports the following options: 1. Near (Default) 2. Far diff --git a/wpf/Bullet-Graph/Flow-Direction.md b/wpf/Bullet-Graph/Flow-Direction.md index cae96af7ad..02198ec0c9 100644 --- a/wpf/Bullet-Graph/Flow-Direction.md +++ b/wpf/Bullet-Graph/Flow-Direction.md @@ -1,7 +1,7 @@ --- layout: post title: Flow Direction in WPF Bullet Graph control | Syncfusion -description: Learn here all about Flow Direction support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. +description: Learn all about the Flow Direction support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. platform: wpf control: SfBulletGraph documentation: ug @@ -9,51 +9,50 @@ documentation: ug # Flow Direction in WPF Bullet Graph (SfBulletGraph) -By default the flow direction of SfBulletGraph is Left to Right. It can be customized by using **FlowDirection** property respectively. +By default, the flow direction of `SfBulletGraph` is Left to Right. It can be customized by using the **FlowDirection** property. ->Note: When the orientation of [`SfBulletGraph`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html) is **Horizontal**, the default flow direction will be left to right and when the orientation of is **Vertical**, the default flow direction will be top to bottom. +>**Note:** When the orientation of [`SfBulletGraph`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html) is **Horizontal**, the default flow direction is left to right, and when the orientation is **Vertical**, the default flow direction is top to bottom. {% tabs %} {% highlight xaml %} - - + + - - + + {% endhighlight %} {% highlight c# %} SfBulletGraph bulletgraph = new SfBulletGraph(); - bulletgraph.Minimum = 0; - bulletgraph.Maximum = 10; - bulletgraph.Interval = 2; - bulletgraph.FlowDirection = FlowDirection.LeftToRight; - bulletgraph.Orientation = Orientation.Vertical; - QualitativeRange range1 = new QualitativeRange(); - range1.RangeEnd = 3; - range1.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#EBEBEB"); - QualitativeRange range2 = new QualitativeRange(); - range2.RangeEnd = 7; - range2.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#7F7F7F"); - - QualitativeRange range3 = new QualitativeRange(); - range3.RangeEnd = 10; - range3.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#D8D8D8"); - - bulletgraph.QualitativeRanges.Add(range1); - bulletgraph.QualitativeRanges.Add(range2); - bulletgraph.QualitativeRanges.Add(range3); - grid.Children.Add(bulletgraph); + bulletgraph.Minimum = 0; + bulletgraph.Maximum = 10; + bulletgraph.Interval = 2; + bulletgraph.FlowDirection = FlowDirection.LeftToRight; + bulletgraph.Orientation = Orientation.Horizontal; + QualitativeRange range1 = new QualitativeRange(); + range1.RangeEnd = 3; + range1.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#EBEBEB"); + QualitativeRange range2 = new QualitativeRange(); + range2.RangeEnd = 7; + range2.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#7F7F7F"); + + QualitativeRange range3 = new QualitativeRange(); + range3.RangeEnd = 10; + range3.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#D8D8D8"); + + bulletgraph.QualitativeRanges.Add(range1); + bulletgraph.QualitativeRanges.Add(range2); + bulletgraph.QualitativeRanges.Add(range3); + grid.Children.Add(bulletgraph); {% endhighlight %} {% endtabs %} -Refer below screenshot for flow direction `LeftToRight`. +Refer to the following screenshot for flow direction `LeftToRight`. ![Flow-Direction_images1](Flow-Direction_images/Flow-Direction_img1.jpeg) ![Flow-Direction_images2](Flow-Direction_images/Flow-Direction_img2.jpeg) @@ -63,46 +62,45 @@ Refer below screenshot for flow direction `LeftToRight`. {% highlight xaml %} - - + + - - + + {% endhighlight %} {% highlight c# %} - SfBulletGraph bulletgraph = new SfBulletGraph(); - bulletgraph.Minimum = 0; - bulletgraph.Maximum = 10; - bulletgraph.Interval = 2; - bulletgraph.FlowDirection = FlowDirection.RightToLeft; - bulletgraph.Orientation = Orientation.Vertical; - QualitativeRange range1 = new QualitativeRange(); - range1.RangeEnd = 3; - range1.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#EBEBEB"); - QualitativeRange range2 = new QualitativeRange(); - range2.RangeEnd = 7; - range2.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#7F7F7F"); - - QualitativeRange range3 = new QualitativeRange(); - range3.RangeEnd = 10; - range3.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#D8D8D8"); - - bulletgraph.QualitativeRanges.Add(range1); - bulletgraph.QualitativeRanges.Add(range2); - bulletgraph.QualitativeRanges.Add(range3); - grid.Children.Add(bulletgraph); + SfBulletGraph bulletgraph = new SfBulletGraph(); + bulletgraph.Minimum = 0; + bulletgraph.Maximum = 10; + bulletgraph.Interval = 2; + bulletgraph.FlowDirection = FlowDirection.RightToLeft; + bulletgraph.Orientation = Orientation.Horizontal; + QualitativeRange range1 = new QualitativeRange(); + range1.RangeEnd = 3; + range1.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#EBEBEB"); + QualitativeRange range2 = new QualitativeRange(); + range2.RangeEnd = 7; + range2.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#7F7F7F"); + + QualitativeRange range3 = new QualitativeRange(); + range3.RangeEnd = 10; + range3.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#D8D8D8"); + + bulletgraph.QualitativeRanges.Add(range1); + bulletgraph.QualitativeRanges.Add(range2); + bulletgraph.QualitativeRanges.Add(range3); + grid.Children.Add(bulletgraph); {% endhighlight %} {% endtabs %} -Refer the following screenshot for flow direction `RightToLeft`. +Refer to the following screenshot for flow direction `RightToLeft`. ![Flow-Direction_images2](Flow-Direction_images/RTL_Vertical.png) ![Flow-Direction_images1](Flow-Direction_images/RTL_Horizontal.png) diff --git a/wpf/Bullet-Graph/Getting-Started.md b/wpf/Bullet-Graph/Getting-Started.md index f1e2303a4a..1298d2879d 100644 --- a/wpf/Bullet-Graph/Getting-Started.md +++ b/wpf/Bullet-Graph/Getting-Started.md @@ -1,7 +1,7 @@ --- layout: post title: Getting Started with WPF Bullet Graph control | Syncfusion -description: Learn here about getting started with Syncfusion WPF Bullet Graph (SfBulletGraph) control, its elements and more details. +description: Learn about getting started with the Syncfusion WPF Bullet Graph (SfBulletGraph) control, its elements, and more details. platform: wpf control: SfBulletGraph documentation: ug @@ -9,44 +9,43 @@ documentation: ug # Getting Started with WPF Bullet Graph (SfBulletGraph) -This section explains you the steps required to configure the [`SfBulletGraph`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html) and also explains the steps to add basic elements of `SfBulletGraph` using the various API’s available within it. +This section explains the steps required to configure the [`SfBulletGraph`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html) and to add the basic elements of `SfBulletGraph` using the various APIs available within it. ## Configuring SfBulletGraph using Syncfusion Reference Manager -Syncfusion Reference Manager is used to add Syncfusion Tools. +The Syncfusion Reference Manager is used to add Syncfusion tools. -Follow these steps to add `SfBulletGraph` Control using the Syncfusion Reference Manager. +Follow these steps to add the `SfBulletGraph` control using the Syncfusion Reference Manager. Create a simple WPF application using Visual Studio. ![Create new WPF Project in Visual Studio](Getting-Started_images/Getting-Started_img1.jpeg) -Right Click on the Project and select Syncfusion Reference Manager. +Right-click the project and select the Syncfusion Reference Manager. ![selecting Syncfusion Reference Manager](Getting-Started_images/Getting-Started_img2.jpeg) -The Syncfusion Reference Manager Wizard will be opened as shown in the figure below. +The Syncfusion Reference Manager wizard opens as shown in the figure below. ![Opening Syncfusion Reference Manager Wizard](Getting-Started_images/Getting-Started_img3.jpeg) -Search for `SfBulletGraph` using SearchBox and select the `SfBulletGraph` Control. Click `Done` to add selected SfBulletGraph control. +Search for `SfBulletGraph` using the search box and select the `SfBulletGraph` control. Click `Done` to add the selected SfBulletGraph control. ![Selecting SfBulletGraph Control in Syncfusion Reference Manager](Getting-Started_images/Getting-Started_img4.jpeg) -The `SfBulletGraph` assemblies will be automatically added to the project after clicking `OK`. +The `SfBulletGraph` assemblies will be automatically added to the project after clicking `Done`. ![Adding SfBulletGraph assemblies in WPF application](Getting-Started_images/Getting-Started_img5.jpeg) ![Added SfBulletGraph assemblies in WPF application](Getting-Started_images/Getting-Started_img6.jpeg) -Create a namespace reference to the SfBulletGraph control using Syncfusion’s global namespace reference **schemas.Syncfusion.com** or the SfBulletGraph control’s namespace reference using **Syncfusion.UI.Xaml.BulletGraph** available in the **Syncfusion.SfBulletGraph.WPF** assembly. +Create a namespace reference to the SfBulletGraph control using Syncfusion's global namespace reference **schemas.Syncfusion.com** or the SfBulletGraph control's namespace reference using **Syncfusion.UI.Xaml.BulletGraph** available in the **Syncfusion.SfBulletGraph.WPF** assembly. {% highlight xaml %} xmlns:bulletgraph="http://schemas.syncfusion.com/wpf" (or) - xmlns:bulletgraph ="clr- - namespace:Syncfusion.UI.Xaml.BulletGraph;assembly=Syncfusion.SfBulletGraph. WPF" + xmlns:bulletgraph ="clr-namespace:Syncfusion.UI.Xaml.BulletGraph;assembly=Syncfusion.SfBulletGraph.WPF" {% endhighlight %} @@ -79,7 +78,7 @@ The SfBulletGraph control will be created as shown in the figure below. ![Displaying SfBulletGraph control](Getting-Started_images/Getting-Started_img7.jpg) ->**Note:- The Syncfusion Reference Manager is available in versions 11.3.0.30 and later. It supports referencing assemblies from version 10.4.0.71 version to the current version and Syncfusion Reference Manager can be used only in Visual Studio 2015.** +>**Note:** The Syncfusion Reference Manager is available in versions 11.3.0.30 and later. It supports referencing assemblies from version 10.4.0.71 to the current version, and the Syncfusion Reference Manager can be used only in Visual Studio 2015. ## Configuring SfBulletGraph @@ -89,14 +88,13 @@ The SfBulletGraph control will be created as shown in the figure below. **Namespace**: Syncfusion.UI.Xaml.BulletGraph -Create a namespace reference to the SfBulletGraph control using Syncfusion’s global namespace reference **schemas.Syncfusion.com** or the SfBulletGraph control’s namespace reference using **Syncfusion.UI.Xaml.BulletGraph** available in the **Syncfusion.SfBulletGraph.WPF** assembly. +Create a namespace reference to the SfBulletGraph control using Syncfusion's global namespace reference **schemas.Syncfusion.com** or the SfBulletGraph control's namespace reference using **Syncfusion.UI.Xaml.BulletGraph** available in the **Syncfusion.SfBulletGraph.WPF** assembly. {% highlight xaml %} xmlns:bulletgraph="http://schemas.syncfusion.com/wpf" (or) - xmlns:bulletgraph ="clr- - namespace:Syncfusion.UI.Xaml.BulletGraph;assembly=Syncfusion.SfBulletGraph. WPF" + xmlns:bulletgraph ="clr-namespace:Syncfusion.UI.Xaml.BulletGraph;assembly=Syncfusion.SfBulletGraph.WPF" {% endhighlight %} @@ -110,46 +108,46 @@ Create a namespace reference to the SfBulletGraph control using Syncfusion’s g {% highlight c# %} SfBulletGraph bulletgraph = new SfBulletGraph(); - this.Grid.Children.Add(bulletgraph); + grid.Children.Add(bulletgraph); {% endhighlight %} {% endtabs %} ![Displaying SfBulletGraph control](Getting-Started_images/Getting-Started_img7.jpg) -As you can see now in the above image, the SfBulletGraph displays its default elements. To customize its element, you have to add respective elements to SfBulletGraph, following section contains the steps to add the basic elements to SfBulletGraph. +As shown in the above image, the SfBulletGraph displays its default elements. To customize the elements, add the respective elements to SfBulletGraph. The following section contains the steps to add the basic elements to SfBulletGraph. ## Adding Caption -You can assign a caption to bullet graph by making use of [`Caption`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Caption) property and also you can position it either near or far using the [`CaptionPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_CaptionPosition) property. +You can assign a caption to the bullet graph by using the [`Caption`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Caption) property, and you can position it either near or far using the [`CaptionPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_CaptionPosition) property. {% tabs %} {% highlight xaml %} - - - - - - - + + + + + + + {% endhighlight %} {% highlight c# %} SfBulletGraph bulletgraph = new SfBulletGraph(); - bulletgraph.CaptionPosition = BulletGraphCaptionPosition.Far; - TextBlock textBlock = new TextBlock() { Text = "Revenue YTD" }; - TextBlock textBlock1 = new TextBlock() { Text = "$ in Thousands" }; - StackPanel stackPanel = new StackPanel(); - stackPanel.Children.Add(textBlock); - stackPanel.Children.Add(textBlock1); - bulletgraph.Caption = stackPanel; - grid.Children.Add(bulletgraph); + bulletgraph.CaptionPosition = BulletGraphCaptionPosition.Far; + TextBlock textBlock = new TextBlock() { Text = "Revenue YTD" }; + TextBlock textBlock1 = new TextBlock() { Text = "$ in Thousands" }; + StackPanel stackPanel = new StackPanel(); + stackPanel.Children.Add(textBlock); + stackPanel.Children.Add(textBlock1); + bulletgraph.Caption = stackPanel; + grid.Children.Add(bulletgraph); {% endhighlight %} @@ -157,9 +155,9 @@ You can assign a caption to bullet graph by making use of [`Caption`](https://he ![Adding Caption to SfBulletGraph control](Caption_images/CaptionPosition.png) -## Configuring Ticks and Labels +## Configuring Ticks and Labels -You can configure Ticks and Labels of Quantitative Scale by making use of following API’s available in SfBulletGraph. +You can configure the ticks and labels of the quantitative scale by using the following APIs available in SfBulletGraph: They are: @@ -180,45 +178,45 @@ They are: ComparativeMeasure="7" FeaturedMeasure="5" FeaturedMeasureBarStroke="Black" MajorTickStroke="Red" MinorTickStroke="Green" MinorTicksPerInterval="3" MajorTickSize="15" MinorTickSize="10"> - - - - - - + + + + + + {% endhighlight %} {% highlight c# %} SfBulletGraph bulletgraph = new SfBulletGraph(); - bulletgraph.Minimum = 0; - bulletgraph.Maximum = 10; - bulletgraph.Interval = 2; - bulletgraph.FeaturedMeasure = 5; - bulletgraph.ComparativeMeasure = 7; - bulletgraph.MajorTickStroke = new SolidColorBrush(Colors.Red); - bulletgraph.MinorTickStroke = new SolidColorBrush(Colors.Green); - bulletgraph.FeaturedMeasureBarStroke = new SolidColorBrush(Colors.Black); - bulletgraph.MinorTicksPerInterval = 3; - bulletgraph.MinorTickSize = 10; - bulletgraph.MajorTickSize = 15; - bulletgraph.Orientation = Orientation.Horizontal; - QualitativeRange range1 = new QualitativeRange(); - range1.RangeEnd = 4.5; - range1.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#EBEBEB"); - QualitativeRange range2 = new QualitativeRange(); - range2.RangeEnd = 10; - range2.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#7F7F7F"); - - QualitativeRange range3 = new QualitativeRange(); - range3.RangeEnd = 7.5; - range3.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#D8D8D8"); - - bulletgraph.QualitativeRanges.Add(range1); - bulletgraph.QualitativeRanges.Add(range2); - bulletgraph.QualitativeRanges.Add(range3); - grid.Children.Add(bulletgraph); + bulletgraph.Minimum = 0; + bulletgraph.Maximum = 10; + bulletgraph.Interval = 2; + bulletgraph.FeaturedMeasure = 5; + bulletgraph.ComparativeMeasure = 7; + bulletgraph.MajorTickStroke = new SolidColorBrush(Colors.Red); + bulletgraph.MinorTickStroke = new SolidColorBrush(Colors.Green); + bulletgraph.FeaturedMeasureBarStroke = new SolidColorBrush(Colors.Black); + bulletgraph.MinorTicksPerInterval = 3; + bulletgraph.MinorTickSize = 10; + bulletgraph.MajorTickSize = 15; + bulletgraph.Orientation = Orientation.Horizontal; + QualitativeRange range1 = new QualitativeRange(); + range1.RangeEnd = 4.5; + range1.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#EBEBEB"); + QualitativeRange range2 = new QualitativeRange(); + range2.RangeEnd = 10; + range2.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#7F7F7F"); + + QualitativeRange range3 = new QualitativeRange(); + range3.RangeEnd = 7.5; + range3.RangeStroke = (Brush)new BrushConverter().ConvertFrom("#D8D8D8"); + + bulletgraph.QualitativeRanges.Add(range1); + bulletgraph.QualitativeRanges.Add(range2); + bulletgraph.QualitativeRanges.Add(range3); + grid.Children.Add(bulletgraph); {% endhighlight %} {% endtabs %} @@ -233,60 +231,60 @@ You can add ranges to bullet graph by creating ranges collection using [`Qualita {% tabs %} {% highlight xaml %} - - - - - - - - - - + + + + + + + + + {% endhighlight %} {% highlight c# %} - SfBulletGraph bulletgraph = new SfBulletGraph(); - bulletgraph.Minimum = 0; - bulletgraph.Maximum = 10; - bulletgraph.FeaturedMeasure = 5; - bulletgraph.ComparativeMeasure = 7; - bulletgraph.Interval = 2; - bulletgraph.MinorTickSize = 8; - bulletgraph.MinorTicksPerInterval = 3; - bulletgraph.QualitativeRangesSize = 30; - bulletgraph.QuantitativeScaleLength = 300; - bulletgraph.FeaturedMeasureBarStroke = new SolidColorBrush(Colors.Black); - bulletgraph.QualitativeRanges.Add(new QualitativeRange() - { - RangeEnd = 4.5, - RangeOpacity = 1, - RangeStroke = new SolidColorBrush(Colors.Red) - }); - bulletgraph.QualitativeRanges.Add(new QualitativeRange() - { - RangeEnd = 7.5, - RangeOpacity = 1, - RangeStroke = new SolidColorBrush(Colors.Yellow) - }); - bulletgraph.QualitativeRanges.Add(new QualitativeRange() - { - RangeEnd = 10, - RangeOpacity = 1, - RangeStroke = new SolidColorBrush(Colors.Green) - }); - grid.Children.Add(bulletgraph); + SfBulletGraph bulletgraph = new SfBulletGraph(); + bulletgraph.Minimum = 0; + bulletgraph.Maximum = 10; + bulletgraph.FeaturedMeasure = 5; + bulletgraph.ComparativeMeasure = 7; + bulletgraph.Interval = 2; + bulletgraph.MinorTickSize = 8; + bulletgraph.MinorTicksPerInterval = 3; + bulletgraph.QualitativeRangesSize = 30; + bulletgraph.QuantitativeScaleLength = 300; + bulletgraph.FeaturedMeasureBarStroke = new SolidColorBrush(Colors.Black); + bulletgraph.QualitativeRanges.Add(new QualitativeRange() + { + RangeEnd = 4.5, + RangeOpacity = 1, + RangeStroke = new SolidColorBrush(Colors.Red) + }); + bulletgraph.QualitativeRanges.Add(new QualitativeRange() + { + RangeEnd = 7.5, + RangeOpacity = 1, + RangeStroke = new SolidColorBrush(Colors.Yellow) + }); + bulletgraph.QualitativeRanges.Add(new QualitativeRange() + { + RangeEnd = 10, + RangeOpacity = 1, + RangeStroke = new SolidColorBrush(Colors.Green) + }); + grid.Children.Add(bulletgraph); {% endhighlight %} {% endtabs %} diff --git a/wpf/Bullet-Graph/Key-features.md b/wpf/Bullet-Graph/Key-features.md index fbdcc97e62..3f948fcec1 100644 --- a/wpf/Bullet-Graph/Key-features.md +++ b/wpf/Bullet-Graph/Key-features.md @@ -1,7 +1,7 @@ --- layout: post title: Key Features in WPF Bullet Graph control | Syncfusion -description: Learn here all about Key Features support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. +description: Learn all about the Key Features in the Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. platform: wpf control: SfBulletGraph documentation: ug @@ -9,31 +9,31 @@ documentation: ug # Key Features in WPF Bullet Graph (SfBulletGraph) -[`SfBulletGraph`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html) is Composite UI element with following sub-parts: +[`SfBulletGraph`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html) is a composite UI element with the following sub-parts: * Ticks -* Label +* Labels * Caption -* Range -* Feature Measure +* Ranges +* Featured Measure ## Ticks -Ticks are scale indicator which is used to specify the values on quantitative scale. +Ticks are scale indicators used to specify the values on the quantitative scale. -## Label +## Labels A quantitative scale label specifies the numeric value according to the major ticks in the range of the scale. ## Caption -The [`Caption`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Caption) for a bullet graph is used to specify a unique label describing the value represented in the bullet graph. +The [`Caption`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Caption) property of the bullet graph is used to specify a unique label describing the value represented in the bullet graph. -## Range +## Ranges -A qualitative range is a visual element that ends at a specified RangeEnd at the beginning of the previous range’s RangeEnd. The qualitative ranges are arranged according to each [`RangeEnd`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.QualitativeRange.html#Syncfusion_UI_Xaml_BulletGraph_QualitativeRange_RangeEnd) value. +A qualitative range is a visual element that ends at a specified RangeEnd at the beginning of the previous range's RangeEnd. The qualitative ranges are arranged according to each [`RangeEnd`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.QualitativeRange.html#Syncfusion_UI_Xaml_BulletGraph_QualitativeRange_RangeEnd) value. -## Performance measure +## Performance measures ### Featured measure @@ -43,22 +43,22 @@ A qualitative range is a visual element that ends at a specified RangeEnd at the [`ComparativeMeasure`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_ComparativeMeasure) should be less visually dominant than the featured measure. It should always be encoded as a short line that runs perpendicular to the orientation of the graph. A good example would be a target for YTD revenue. Whenever the featured measure intersects a comparative measure, the comparative measure should appear behind the featured measure. -## Bullet graphs type +## Bullet graph types -The Bullet Graph types can be differed by its orientation of the control, the control direction may be **horizontal** or **vertical**. +The bullet graph types can be differentiated by their orientation. The control direction may be **horizontal** or **vertical**. -### Easy to use ### +### Easy to use -SfBulletGraph is available in Visual Studio toolbox itself, you can easily drag and drop the control from toolbox. +SfBulletGraph is available in the Visual Studio toolbox itself, so you can easily drag and drop the control from the toolbox. -## Data Binding Support ## +## Data Binding Support -The control can be bound to your application data from a variety of data sources in the form of binding declaration or by setting its properties directly. +The control can be bound to your application data from a variety of data sources in the form of a binding declaration or by setting its properties directly. -## MVVM support ## +## MVVM support -The Model-View-ViewModel (MVVM) pattern is to be followed to get better control customization. +The Model-View-ViewModel (MVVM) pattern should be followed to get better control customization. -## SfBulletGraph Elements ## +## SfBulletGraph Elements ![Key-features_img1](Key-features_images/Key-features_img1.jpeg) diff --git a/wpf/Bullet-Graph/Labels.md b/wpf/Bullet-Graph/Labels.md index a7282ff9b2..a7ca8a8b93 100644 --- a/wpf/Bullet-Graph/Labels.md +++ b/wpf/Bullet-Graph/Labels.md @@ -1,7 +1,7 @@ --- layout: post title: Labels in WPF Bullet Graph control | Syncfusion -description: Learn here all about Labels support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. +description: Learn about label support in the Syncfusion WPF SfBulletGraph control, including label customization, positioning, and formatting options. platform: wpf control: SfBulletGraph documentation: ug @@ -13,7 +13,7 @@ A quantitative scale label specifies the numeric value according to the major ti ## Customizing Labels -The labels can be positioned far away from the quantitative scale by using the [`LabelOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_LabelOffset) property and the default value of this is 0. The foreground of the label is customized by setting [`LabelStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_LabelStroke). By setting [`LabelSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_LabelSize), the font size of the labels is modified. The label content can be formatted by using [`LabelFormat`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_LabelSize) property. +The labels can be positioned far away from the quantitative scale by using the [`LabelOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_LabelOffset) property, and the default value is 0. The foreground of the label is customized by setting the [`LabelStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_LabelStroke) property. By setting the [`LabelSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_LabelSize) property, the font size of the labels is modified. The label content can be formatted by using the [`LabelFormat`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_LabelFormat) property. {% tabs %} {% highlight xaml %} @@ -46,7 +46,7 @@ The labels can be positioned far away from the quantitative scale by using the [ ## Label Position -The labels in the scale can be placed above or below the qualitative ranges by choosing the following options available in the [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_LabelPosition) property. +The labels in the scale can be placed above or below the qualitative ranges using the [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_LabelPosition) property, which supports the following options: 1. Below (Default) 2. Above diff --git a/wpf/Bullet-Graph/Measures.md b/wpf/Bullet-Graph/Measures.md index 52934d4a70..f5585c6a6e 100644 --- a/wpf/Bullet-Graph/Measures.md +++ b/wpf/Bullet-Graph/Measures.md @@ -1,7 +1,7 @@ --- layout: post title: Measures in WPF Bullet Graph control | Syncfusion -description: Learn here all about Measures support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. +description: Learn all about the Measures support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. platform: wpf control: SfBulletGraph documentation: ug @@ -11,11 +11,11 @@ documentation: ug ## Featured Measure -Featured measure is used to display the primary data, or the current value of the data that you are measuring. It should usually be encoded as a bar. +The featured measure is used to display the primary data, or the current value of the data that you are measuring. It should usually be encoded as a bar. -### Customizing featured measure +### Customizing the featured measure -The value of the featured measure of the bullet graph is set by the [`FeaturedMeasure`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_FeaturedMeasure) property. By setting the [`FeaturedMeasureBarStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_FeaturedMeasureBarStroke) property, the stroke of the feature measure bar can be customized. The thickness of the featured measure bar is modified by using [`FeaturedMeasureBarStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_FeaturedMeasureBarStrokeThickness). +The value of the featured measure of the bullet graph is set by the [`FeaturedMeasure`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_FeaturedMeasure) property. By setting the [`FeaturedMeasureBarStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_FeaturedMeasureBarStroke) property, the stroke of the featured measure bar can be customized. The thickness of the featured measure bar is modified by using the [`FeaturedMeasureBarStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_FeaturedMeasureBarStrokeThickness) property. {% tabs %} {% highlight xaml %} @@ -69,11 +69,11 @@ The value of the featured measure of the bullet graph is set by the [`FeaturedMe ## Comparative Measure -Comparative measure should be less visually dominant than the featured measure. It should always be encoded as a short line that runs perpendicular to the orientation of the graph. A good example would be a target for YTD revenue. Whenever the featured measure intersects a comparative measure, the comparative measure should appear behind the featured measure. +The comparative measure should be less visually dominant than the featured measure. It should always be encoded as a short line that runs perpendicular to the orientation of the graph. A good example would be a target for YTD revenue. Whenever the featured measure intersects a comparative measure, the comparative measure should appear behind the featured measure. -### Customizing comparative measure +### Customizing the comparative measure -The value of the comparative measure is set by using the [`ComparativeMeasure`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_ComparativeMeasure) property. By setting the [`ComparativeMeasureSymbolStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_ComparativeMeasureSymbolStroke) property, the stroke of the comparative measure symbol is customized. The thickness of the comparative measure symbol is modified by using [`ComparativeMeasureSymbolStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_ComparativeMeasureSymbolStrokeThickness). +The value of the comparative measure is set by using the [`ComparativeMeasure`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_ComparativeMeasure) property. By setting the [`ComparativeMeasureSymbolStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_ComparativeMeasureSymbolStroke) property, the stroke of the comparative measure symbol is customized. The thickness of the comparative measure symbol is modified by using the [`ComparativeMeasureSymbolStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_ComparativeMeasureSymbolStrokeThickness) property. {% tabs %} {% highlight xaml %} diff --git a/wpf/Bullet-Graph/Orientation.md b/wpf/Bullet-Graph/Orientation.md index fb321845a5..632c71d468 100644 --- a/wpf/Bullet-Graph/Orientation.md +++ b/wpf/Bullet-Graph/Orientation.md @@ -1,7 +1,7 @@ --- layout: post title: Orientation in WPF Bullet Graph control | Syncfusion -description: Learn here all about Orientation support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. +description: Learn all about the Orientation support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. platform: wpf control: SfBulletGraph documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Orientation in WPF Bullet Graph (SfBulletGraph) -By default, orientation of SfBulletGraph is horizontal. It can be customized by using [`Orientation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Orientation) property, respectively. +By default, the orientation of SfBulletGraph is horizontal. It can be customized by using the [`Orientation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Orientation) property. {% tabs %} {% highlight xaml %} diff --git a/wpf/Bullet-Graph/Overview.md b/wpf/Bullet-Graph/Overview.md index bc9e41ec34..41811260f7 100644 --- a/wpf/Bullet-Graph/Overview.md +++ b/wpf/Bullet-Graph/Overview.md @@ -1,7 +1,7 @@ --- layout: post title: About WPF Bullet Graph control | Syncfusion -description: Learn here all about introduction of Syncfusion WPF Bullet Graph (SfBulletGraph) control, its elements and more details. +description: Learn all about the introduction of the Syncfusion WPF Bullet Graph (SfBulletGraph) control, its elements, and more details. platform: wpf control: SfBulletGraph documentation: ug @@ -9,12 +9,12 @@ documentation: ug # WPF Bullet Graph (SfBulletGraph) Overview -Bullet Graph is a variation of the bar graph, which is developed as a replacement for the dashboard gauges and meters. The bullet graph features a single, primary measure (for example, current year-to-date revenue), and compares that measure to one or more other measures to enrich its meaning (for example, compared to a target). It displays the measures in the context of the qualitative range of performance, such as poor, satisfactory, and good. +The Bullet Graph is a variation of the bar graph that was developed as a replacement for the dashboard gauges and meters. The bullet graph features a single, primary measure (for example, current year-to-date revenue) and compares that measure to one or more other measures to enrich its meaning (for example, compared to a target). It displays the measures in the context of a qualitative range of performance, such as poor, satisfactory, and good. ## Use cases -* It is used in the dashboard environment where the screen real-estate really counts. -* Bullet graph shows a ton of data in a very compact space. +* It is used in dashboard environments where screen real estate really counts. +* The bullet graph shows a large amount of data in a very compact space. * It is handy to visualize data. -* It is used in the revenue analysis and expense analysis. +* It is used in revenue analysis and expense analysis. diff --git a/wpf/Bullet-Graph/Quantitative-scale.md b/wpf/Bullet-Graph/Quantitative-scale.md index 439e0fb737..e692dfba06 100644 --- a/wpf/Bullet-Graph/Quantitative-scale.md +++ b/wpf/Bullet-Graph/Quantitative-scale.md @@ -1,7 +1,7 @@ --- layout: post title: Quantitative Scale in WPF Bullet Graph control | Syncfusion -description: Learn here all about Quantitative Scale support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. +description: Learn all about the Quantitative Scale support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. platform: wpf control: SfBulletGraph documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Quantitative Scale in WPF Bullet Graph (SfBulletGraph) -Quantitative scale contains two major components such as ticks and labels which gives the looks of bar graph. It defines the frequency of labels and tick marks with overall [`Minimum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Minimum) and [`Maximum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Maximum) values for declared [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Interval). The length of the quantitative scale can be customized by using the [`QuantitativeScaleLength`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_QuantitativeScaleLength) property. +The quantitative scale contains two major components: ticks and labels, which give the look of a bar graph. It defines the frequency of labels and tick marks with overall [`Minimum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Minimum) and [`Maximum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Maximum) values for the declared [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Interval). The length of the quantitative scale can be customized by using the [`QuantitativeScaleLength`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_QuantitativeScaleLength) property. {% tabs %} {% highlight xaml %} diff --git a/wpf/Bullet-Graph/Ranges.md b/wpf/Bullet-Graph/Ranges.md index 305c5dd1ce..13e44a499d 100644 --- a/wpf/Bullet-Graph/Ranges.md +++ b/wpf/Bullet-Graph/Ranges.md @@ -1,7 +1,7 @@ --- layout: post title: Ranges in WPF Bullet Graph control | Syncfusion -description: Learn here all about Ranges support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. +description: Learn about range support in the Syncfusion WPF SfBulletGraph control, including range customization, styling, and value visualization. platform: wpf control: SfBulletGraph documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Ranges in WPF Bullet Graph (SfBulletGraph) -Ranges for a bullet graph are a collection of qualitative ranges. A qualitative range is a visual element that begins at [`RangeStart`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.QualitativeRange.html#Syncfusion_UI_Xaml_BulletGraph_QualitativeRange_RangeStart) and ends at a specified [`RangeEnd`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.QualitativeRange.html#Syncfusion_UI_Xaml_BulletGraph_QualitativeRange_RangeEnd) at the beginning of the previous range’s RangeEnd. The qualitative ranges are arranged according to each RangeEnd value. +Ranges for a bullet graph are a collection of qualitative ranges. A qualitative range is a visual element that begins at [`RangeStart`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.QualitativeRange.html#Syncfusion_UI_Xaml_BulletGraph_QualitativeRange_RangeStart) and ends at a specified [`RangeEnd`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.QualitativeRange.html#Syncfusion_UI_Xaml_BulletGraph_QualitativeRange_RangeEnd), continuing from the previous range's RangeEnd. The qualitative ranges are arranged according to each RangeEnd value. -## Customizing Range +## Customizing Ranges -The width of the ranges can be customized by setting the [`QualitativeRangesSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_QualitativeRangesSize) property. By changing [`RangeStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.QualitativeRange.html#Syncfusion_UI_Xaml_BulletGraph_QualitativeRange_RangeStroke) of the qualitative range, the stroke of the range can be personalized. By setting the [`RangeOpacity`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.QualitativeRange.html#Syncfusion_UI_Xaml_BulletGraph_QualitativeRange_RangeOpacity) of the qualitative range, the opacity of the range is modified. +The width of the ranges can be customized by setting the [`QualitativeRangesSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_QualitativeRangesSize) property. By changing the [`RangeStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.QualitativeRange.html#Syncfusion_UI_Xaml_BulletGraph_QualitativeRange_RangeStroke) of the qualitative range, the stroke of the range can be personalized. By setting the [`RangeOpacity`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.QualitativeRange.html#Syncfusion_UI_Xaml_BulletGraph_QualitativeRange_RangeOpacity) of the qualitative range, the opacity of the range is modified. {% tabs %} {% highlight xaml %} @@ -78,7 +78,7 @@ The width of the ranges can be customized by setting the [`QualitativeRangesSize ## Binding RangeStroke to Ticks and Labels -By setting [`BindWithRangeStrokeToLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_BindRangeStrokeToLabels), the stroke of the labels is set related to the stroke of the specified ranges. Similarly, by setting [`BindWithRangeStrokeToTicks`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_BindRangeStrokeToTicks), the stroke of the ticks is set related to the stroke of the specified ranges. +By setting the [`BindRangeStrokeToLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_BindRangeStrokeToLabels) property, the stroke of the labels is set to match the stroke of the specified ranges. Similarly, by setting the [`BindRangeStrokeToTicks`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_BindRangeStrokeToTicks) property, the stroke of the ticks is set to match the stroke of the specified ranges. {% tabs %} {% highlight xaml %} diff --git a/wpf/Bullet-Graph/Ticks.md b/wpf/Bullet-Graph/Ticks.md index 0e6c06b56e..8a0833c54e 100644 --- a/wpf/Bullet-Graph/Ticks.md +++ b/wpf/Bullet-Graph/Ticks.md @@ -1,7 +1,7 @@ --- layout: post title: Ticks in WPF Bullet Graph control | Syncfusion -description: Learn here all about Ticks support in Syncfusion WPF Bullet Graph (SfBulletGraph) control, its elements and more details. +description: Learn all about the Ticks support in Syncfusion WPF Bullet Graph (SfBulletGraph) control, its elements, and more details. platform: wpf control: SfBulletGraph documentation: ug @@ -9,16 +9,16 @@ documentation: ug # Ticks in WPF Bullet Graph (SfBulletGraph) -Quantitative scale is displayed with two types of ticks: +The quantitative scale is displayed with two types of ticks: -* Major ticks, the primary scale indicators. -* Minor ticks, the secondary scale indicators that fall in between the major ticks. +* Major ticks: the primary scale indicators. +* Minor ticks: the secondary scale indicators that fall in between the major ticks. ## Customizing Ticks -The [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Interval) property is used to calculate the Major tick count for a SfBulletGraph. Like ticks, small ticks are calculated using the [`MinorTicksPerInterval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MinorTicksPerInterval) property. +The [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_Interval) property is used to calculate the major tick count of a SfBulletGraph. Like ticks, small ticks are calculated using the [`MinorTicksPerInterval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MinorTicksPerInterval) property. -The stroke of the major and minor ticks is customized by setting the [`MajorTickStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MajorTickStroke) and [`MinorTickStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MinorTickStroke) properties. The size can be modified by using the [`MajorTickSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MajorTickSize) and [`MinorTickSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MinorTickSize) properties. By setting [`MajorTickStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MajorTickStrokeThickness) and [`MinorTickStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MajorTickStrokeThickness), the stroke’s thickness can be customized. +The stroke of the major and minor ticks is customized by setting the [`MajorTickStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MajorTickStroke) and [`MinorTickStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MinorTickStroke) properties. The size can be modified by using the [`MajorTickSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MajorTickSize) and [`MinorTickSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MinorTickSize) properties. By setting the [`MajorTickStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MajorTickStrokeThickness) and [`MinorTickStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_MinorTickStrokeThickness) properties, the stroke's thickness can be customized. {% tabs %} {% highlight xaml %} @@ -29,31 +29,29 @@ The stroke of the major and minor ticks is customized by setting the [`MajorTick MinorTickSize="10" MajorTickStroke="Red" MinorTickStroke="Green"> - + {% endhighlight %} {% highlight c# %} - bulletgraph.Minimum = 0; - bulletgraph.Maximum = 10; - bulletgraph.MinorTicksPerInterval = 3; - bulletgraph.MajorTickSize = 15; - bulletgraph.MinorTickSize = 10; - bulletgraph.MajorTickStroke = new SolidColorBrush(Colors.Red); - bulletgraph.MinorTickStroke = new SolidColorBrush(Colors.Green); - grid.Children.Add(bulletgraph); + SfBulletGraph bulletgraph = new SfBulletGraph(); + bulletgraph.Interval = 2; + bulletgraph.Minimum = 0; + bulletgraph.Maximum = 10; + bulletgraph.MinorTicksPerInterval = 3; + bulletgraph.MajorTickSize = 15; + bulletgraph.MinorTickSize = 10; + bulletgraph.MajorTickStroke = new SolidColorBrush(Colors.Red); + bulletgraph.MinorTickStroke = new SolidColorBrush(Colors.Green); + grid.Children.Add(bulletgraph); {% endhighlight %} {% endtabs %} ![Ticks_img](Ticks_images/Ticks_img.png) -## TickPosition - -The ticks in the scale can be placed above or below the ranges of the quantitative scale by choosing the options available in the [`TickPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_TickPosition) property. - -They are: +## TickPosition, below, or across the ranges of the quantitative scale using the [`TickPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_TickPosition) property, which supports the following options: 1. Below (Default) 2. Above @@ -63,7 +61,7 @@ They are: {% tabs %} {% highlight xaml %} - + {% endhighlight %} diff --git a/wpf/Bullet-Graph/Tooltip.md b/wpf/Bullet-Graph/Tooltip.md index d93427e93d..e201f2597d 100644 --- a/wpf/Bullet-Graph/Tooltip.md +++ b/wpf/Bullet-Graph/Tooltip.md @@ -1,7 +1,7 @@ --- layout: post title: Tooltip in WPF Bullet Graph control | Syncfusion -description: Learn here all about Tooltip support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. +description: Learn all about the Tooltip support in Syncfusion WPF Bullet Graph (SfBulletGraph) control and more. platform: wpf control: SfBulletGraph documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Tooltip in WPF Bullet Graph (SfBulletGraph) -Tooltip in `SfBulletGraph` is used to view the values of FeaturedMeasure, ComparativeMeasure and QualitativeRange in required design. +The tooltip in `SfBulletGraph` is used to view the values of FeaturedMeasure, ComparativeMeasure, and QualitativeRange in a required design. -This tooltip is displayed when the mouse is over the FeaturedMeasure, ComparativeMeasure or QualitativeRange. Whereas, in touch device it is displayed on holding over the FeaturedMeasure, ComparativeMeasure and QualitativeRange of SfBulletGraph. +The tooltip is displayed when the mouse is over the FeaturedMeasure, ComparativeMeasure, or QualitativeRange. On a touch device, it is displayed on holding over the FeaturedMeasure, ComparativeMeasure, or QualitativeRange of SfBulletGraph. The SfBulletGraph tooltip is displayed only when the [`ShowToolTip`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_ShowToolTip) property is set to true. @@ -81,7 +81,7 @@ The SfBulletGraph tooltip is displayed only when the [`ShowToolTip`](https://hel ## Customizing FeaturedMeasureToolTip -You can display the value of [`FeaturedMeasure`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_FeaturedMeasure) of SfBulletGraph in ToolTip that is used to view the FeaturedMeasure value .The [`FeaturedMeasureToolTipTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_FeaturedMeasureToolTipTemplate) is DataTemplate type by using this property, the default appearance of the FeaturedMeasure tooltip can be customized. +You can display the value of [`FeaturedMeasure`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_FeaturedMeasure) of SfBulletGraph in a tooltip to view the FeaturedMeasure value. The [`FeaturedMeasureToolTipTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_FeaturedMeasureToolTipTemplate) is a DataTemplate type. By using this property, the default appearance of the FeaturedMeasure tooltip can be customized. {% tabs %} {% highlight xaml %} @@ -163,7 +163,7 @@ You can display the value of [`FeaturedMeasure`](https://help.syncfusion.com/cr/ ## Customizing ComparativeMeasureToolTip -You can display the value of [`ComparativeMeasure`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_ComparativeMeasure) of SfBulletGraph in ToolTip that is used to view the ComparativeMeasure value. The [`ComparativeMeasureToolTipTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_ComparativeMeasureToolTipTemplate) is DataTemplate type by using this property, the default appearance of the ComparativeMeasure tooltip can be customized. +You can display the value of [`ComparativeMeasure`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_ComparativeMeasure) of SfBulletGraph in a tooltip to view the ComparativeMeasure value. The [`ComparativeMeasureToolTipTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_ComparativeMeasureToolTipTemplate) is a DataTemplate type. By using this property, the default appearance of the ComparativeMeasure tooltip can be customized. {% tabs %} {% highlight xaml %} @@ -245,7 +245,7 @@ You can display the value of [`ComparativeMeasure`](https://help.syncfusion.com/ ## Customizing QualitativeRangeToolTip -You can display the value of QualitativeRange of SfBulletGraph in ToolTip that is used to view the Start and End value of QualitativeRange. The [`QualitativeRangeToolTipTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_QualitativeRangeToolTipTemplate) is DataTemplate type by using this property, the default appearance of the QualitativeRange tooltip can be customized. +You can display the value of QualitativeRange of SfBulletGraph in a tooltip to view the Start and End values of the QualitativeRange. The [`QualitativeRangeToolTipTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.BulletGraph.SfBulletGraph.html#Syncfusion_UI_Xaml_BulletGraph_SfBulletGraph_QualitativeRangeToolTipTemplate) is a DataTemplate type. By using this property, the default appearance of the QualitativeRange tooltip can be customized. {% tabs %} {% highlight xaml %} @@ -295,13 +295,13 @@ You can display the value of QualitativeRange of SfBulletGraph in ToolTip that i bulletgraph.Minimum = 0; bulletgraph.Maximum = 10; bulletgraph.FeaturedMeasure = 5; - bulletgraph.ShowToolTip = "True"; bulletgraph.ComparativeMeasure = 4; bulletgraph.Interval = 2; bulletgraph.MinorTickSize = 8; bulletgraph.MinorTicksPerInterval = 3; bulletgraph.QualitativeRangesSize = 30; bulletgraph.FeaturedMeasureBarStroke = new SolidColorBrush(Colors.Black); + bulletgraph.ShowToolTip = true; bulletgraph.QualitativeRangeToolTipTemplate = grid.Resources["tooltipTemplate"] as DataTemplate; bulletgraph.QualitativeRanges.Add(new QualitativeRange() { diff --git a/wpf/DataGrid/Columns.md b/wpf/DataGrid/Columns.md index 913ac949a2..73a1544633 100644 --- a/wpf/DataGrid/Columns.md +++ b/wpf/DataGrid/Columns.md @@ -597,8 +597,8 @@ public string Country [DisplayFormat(DataFormatString = "yyyy")] public DateTime OrderDate { - get { return _orderDate; } - set { orderDate = value; } + get { return _orderDate; } + set { _orderDate = value; } } {% endhighlight %} {% endtabs %} @@ -928,7 +928,7 @@ You can freeze the columns in view at the left and right side like in excel by s {% endhighlight %} {% endtabs %} -![Frezzing Columns in WPF DataGrid](columns_images/wpf-datagrid-freezing.png) +![Freezing Columns in WPF DataGrid](columns_images/wpf-datagrid-freezing.png) ### Limitations diff --git a/wpf/DataGrid/Filtering.md b/wpf/DataGrid/Filtering.md index 0230eb4e0a..328e3eb0a5 100644 --- a/wpf/DataGrid/Filtering.md +++ b/wpf/DataGrid/Filtering.md @@ -710,7 +710,7 @@ void dataGrid_FilterItemsPopulated(object sender, GridFilterItemsPopulatedEventA if (e.Column.MappingName == "OrderID") { - var itemsSource = e.ItemsSource as List<FilterElement>; + var itemsSource = e.ItemsSource as List; //Get the FilterElement to Remove from itemsSource. var filterElement = itemsSource.FirstOrDefault(items => items.ActualValue.Equals(1005)); diff --git a/wpf/DataGrid/Paging.md b/wpf/DataGrid/Paging.md index 7917c540a3..6722125066 100644 --- a/wpf/DataGrid/Paging.md +++ b/wpf/DataGrid/Paging.md @@ -19,7 +19,7 @@ Follow the below steps to bind SfDataGrid with SfDataPager. 2. Set [SfDataPager.PageSize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PageSize) property to specify the number of records to be displayed per page. -3. Bind [SfDataPager.PagedSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PagedSource) to [SfDataGrid.ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ItemsSource) property. So whenever the page is changed, `PagedSource` will be update based on current page. +3. Bind [SfDataPager.PagedSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PagedSource) to [SfDataGrid.ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ItemsSource) property. So whenever the page is changed, `PagedSource` will be updated based on the current page. {% capture codesnippet1 %} {% tabs %} @@ -123,7 +123,7 @@ public class OrderInfo {% endcapture %} {{ codesnippet1 | OrderList_Indent_Level_1 }} -![WPF DataGrid diplays Multiple Pages using SfDataPager](paging_images/wpf-datagrid-multiple-page.png) +![WPF DataGrid displays Multiple Pages using SfDataPager](paging_images/wpf-datagrid-multiple-page.png) #### Limitations @@ -483,7 +483,7 @@ private void dataPager_OnDemandLoading(object sender, Syncfusion.UI.Xaml.Control {% endtabs %} -![WPF DataGrid displys Sorting with loaded DataPager](paging_images/wpf-datagrid-sorting.png) +![WPF DataGrid displays Sorting with loaded DataPager](paging_images/wpf-datagrid-sorting.png) ### Loading ItemsSource for page using async and await @@ -565,7 +565,7 @@ public class EmployeeInfoRepository ### Limitations -1. UI Filtering is not supported. You can code in application level to filter the data. -2. Data processing operations (Sorting, Grouping) are done only in the current page. -3. Deleting is not supported. You can code to delete row in application level. -4. Only the navigated pages are exported when `OnDemandPaging’ is enabled, if the navigated page cache is cleared then the corresponding page will not be exported. +1. UI Filtering is not supported. You can code at the application level to filter the data. +2. Data processing operations (Sorting, Grouping) are done only on the current page. +3. Deleting is not supported. You can code to delete a row at the application level. +4. Only the navigated pages are exported when `OnDemandPaging` is enabled, if the navigated page cache is cleared then the corresponding page will not be exported. diff --git a/wpf/DataGrid/Sorting.md b/wpf/DataGrid/Sorting.md index af4a681151..cfa591be91 100644 --- a/wpf/DataGrid/Sorting.md +++ b/wpf/DataGrid/Sorting.md @@ -190,7 +190,7 @@ In the below code snippet, `CustomerName` property is compared based on its stri {% tabs %} {% highlight c# %} -Public class CustomComparer:IComparer,ISortDirection +public class CustomComparer : IComparer, ISortDirection { public int Compare(object x, object y) { diff --git a/wpf/Digital-Gauge/Digital-Characters.md b/wpf/Digital-Gauge/Digital-Characters.md index 372fff36e3..82570d3566 100644 --- a/wpf/Digital-Gauge/Digital-Characters.md +++ b/wpf/Digital-Gauge/Digital-Characters.md @@ -9,7 +9,7 @@ documentation: ug # Digital Characters in WPF Digital Gauge (SfDigitalGauge) -The digital characters in the digital gauge can be viewed in different types of segments. These digital characters are set to the digital gauge through the [`Value`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_Value) property of type string. +The digital characters in the digital gauge can be viewed in different types of segments. These digital characters are set to the digital gauge through the [`Value`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_Value) property of type string. The type of segment used to display the characters is determined by the [`CharacterType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterType) property. {% tabs %} {% highlight xaml %} @@ -32,7 +32,7 @@ The digital characters in the digital gauge can be viewed in different types of ## 7-Segments -The digital characters which are set as the value property of the digital gauge are displayed by default 7-segments. Rather than using the alphabets, these are mainly used to display numbers. The type of segments can be set by the [`CharacterType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterType) property. +By default, the digital characters set as the [`Value`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_Value) property are displayed using 7-segments. These are mainly used to display numbers rather than letters. The type of segments can be set by the [`CharacterType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterType) property. {% tabs %} {% highlight xaml %} @@ -55,7 +55,7 @@ The digital characters which are set as the value property of the digital gauge ## 14-Segments -The digital characters which are set as the value property of the digital gauge are displayed by 14 segments. These type of characters are used to display both alphabets and numbers. +The digital characters set as the [`Value`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_Value) property can be displayed using 14 segments. This type of character is used to display both alphabets and numbers. Set the [`CharacterType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterType) property to `SegmentFourteen` to display characters in this format. {% tabs %} {% highlight xaml %} @@ -78,7 +78,7 @@ The digital characters which are set as the value property of the digital gauge ## 16-Segments -The digital characters which are set as the value property of the digital gauge are displayed by 16 segments. These type of characters are also used to display both alphabets and numbers. +The digital characters set as the [`Value`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_Value) property can be displayed using 16 segments. Like 14-segment characters, this type is also used to display both alphabets and numbers, with finer segment detail. Set the [`CharacterType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterType) property to `SegmentSixteen` to display characters in this format. {% tabs %} {% highlight xaml %} @@ -99,9 +99,9 @@ The digital characters which are set as the value property of the digital gauge ![Digital Gauge with SegmentSixteen CharacterType](Digital-Characters_images/Digital-Characters_img4.png) -## 8*8 Dot Matrix Segments +## 8×8 Dot Matrix Segments -The digital characters which are set as the value property of the digital gauge are displayed by eight cross eight dot matrix segments. These type of characters are used to display special characters along with the alphabets and numbers. +The digital characters set as the [`Value`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_Value) property can be displayed using 8×8 dot matrix segments. This type of character is used to display special characters along with alphabets and numbers. Set the [`CharacterType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterType) property to `EightCrossEightDotMatrix` to display characters in this format. {% tabs %} {% highlight xaml %} @@ -118,7 +118,7 @@ The digital characters which are set as the value property of the digital gauge this.Grid.Children.Add(digitalgauge); {% endhighlight %} -{% endtabs%} +{% endtabs %} ![Digital Gauge with EightCrossEightDotMatrix CharacterType](Digital-Characters_images/Digital-Characters_img5.png) diff --git a/wpf/Digital-Gauge/Getting-Started.md b/wpf/Digital-Gauge/Getting-Started.md index 0393eb383b..ee4e553987 100644 --- a/wpf/Digital-Gauge/Getting-Started.md +++ b/wpf/Digital-Gauge/Getting-Started.md @@ -9,11 +9,11 @@ documentation: ug # Getting Started with WPF Digital Gauge (SfDigitalGauge) -This section explains you the steps required to configure the **SfDigitalGauge** and also explains the steps to add basic elements of **SfDigitalGauge** through various API’s available within it. +This section explains the steps required to configure the **SfDigitalGauge** and also explains how to add basic elements of **SfDigitalGauge** through various APIs available within it. ## Adding gauge references -You can add gauge reference using one of the following methods: +You can add gauge references using one of the following methods: **Method 1: Adding gauge reference from nuget.org** @@ -23,11 +23,11 @@ Syncfusion WPF components are available in [`nuget.org`](https://www.nuget.org/) **Method 2: Adding gauge reference from toolbox** -You can drag the digital gauge control from the toolbox and drop it to the designer. It will add the required assembly references automatically, and add the namespace to the page. +You can drag the digital gauge control from the toolbox and drop it onto the designer. It will add the required assembly references automatically and add the namespace to the page. **Method 3: Adding gauge assemblies manually from the installed location** -If you prefer to manually reference the assemblies instead referencing from NuGet, add the following assemblies in respective projects. +If you prefer to manually reference the assemblies instead of referencing them from NuGet, add the following assemblies to the respective projects. Location: {Installed location}/{version}/WPF/Assemblies @@ -41,7 +41,7 @@ You can initialize the [`SfDigitalGauge`](https://help.syncfusion.com/cr/wpf/Syn {% highlight xaml %} - xmlns:gauge ="clr-namespace:Syncfusion.UI.Xaml.Gauges;assembly=Syncfusion.SfGauge.Wpf" + xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.Gauges;assembly=Syncfusion.SfGauge.Wpf" {% endhighlight %} @@ -53,7 +53,7 @@ You can initialize the [`SfDigitalGauge`](https://help.syncfusion.com/cr/wpf/Syn {% endtabs %} -initialize digital gauge control. +Initialize the digital gauge control. {% tabs %} @@ -72,7 +72,7 @@ initialize digital gauge control. {% endtabs %} -Run the above code and now the default **SfDigitalGauge** can be displayed as follows. UI component of the digital gauge can be customized by adding segments and passing Values which will be explained in the next section. +Run the above code, and the default **SfDigitalGauge** will be displayed as follows. The UI of the digital gauge can be customized by adding segments and passing values, which will be explained in the next section. ## Displaying Values @@ -96,7 +96,7 @@ this.Content = digitalgauge; ## Setting character type -By using the [`CharacterType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterType) property, you can set the segments for digital gauge. The digital characters can be drawn in the following four different segments: +By using the [`CharacterType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterType) property, you can set the segments for the digital gauge. The digital characters can be drawn in the following four different segment types: • EightCrossEightDotMatrix @@ -109,7 +109,7 @@ By using the [`CharacterType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI. {% tabs %} {% highlight xaml %} - + {% endhighlight %} @@ -124,13 +124,13 @@ this.Content = digitalgauge; ## Configuring properties -The [`CharacterHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterHeight), [`CharacterWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterWidth), and [`CharacterStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterStroke) properties are used to display characters, which can be customized as shown in the following code snippets +The [`CharacterHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterHeight), [`CharacterWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterWidth), and [`CharacterStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterStroke) properties are used to display characters, which can be customized as shown in the following code snippets. {% tabs %} {% highlight xaml %} - {% endhighlight %} @@ -153,7 +153,7 @@ The following code example is the complete code of the previous configurations. {% highlight xaml %} - {% endhighlight %} @@ -95,7 +95,7 @@ Using [`SegmentThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml ## RTL (Right to Left) support -The Characters are aligned using [`EnableRTLFormat`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_EnableRTLFormat) property. The default value of `EnableRTLFormat` is `false`. +The characters are aligned using the [`EnableRTLFormat`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_EnableRTLFormat) property. The default value of `EnableRTLFormat` is `false`. {% tabs %} {% highlight xaml %} @@ -109,7 +109,7 @@ The Characters are aligned using [`EnableRTLFormat`](https://help.syncfusion.com SfDigitalGauge digitalgauge = new SfDigitalGauge(); digitalgauge.Value = "SYNCFUSION"; - digitalgauge.EnableRTLFormat= true; + digitalgauge.EnableRTLFormat = true; digitalgauge.CharacterType = CharacterType.SegmentFourteen; this.Grid.Children.Add(digitalgauge); @@ -120,7 +120,7 @@ The Characters are aligned using [`EnableRTLFormat`](https://help.syncfusion.com ## Dimmed Brush stroke -[`DimmedBrush`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_DimmedBrush) property is used to apply brushes to the dimmed segment. This property is used to suit the background of the Digital gauge +The [`DimmedBrush`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_DimmedBrush) property is used to apply brushes to the dimmed segment. This property is used to suit the background of the digital gauge. {% tabs %} {% highlight xaml %} @@ -145,7 +145,7 @@ The Characters are aligned using [`EnableRTLFormat`](https://help.syncfusion.com ## Dimmed Brush opacity -[`DimmedBrushOpacity`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_DimmedBrushOpacity) property is used to set the opacity of the brushes to the dimmed segment. +The [`DimmedBrushOpacity`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_DimmedBrushOpacity) property is used to set the opacity of the brushes for the dimmed segment. {% tabs %} {% highlight xaml %} diff --git a/wpf/Digital-Gauge/Transformation-of-Characters.md b/wpf/Digital-Gauge/Transformation-of-Characters.md index 6038c29196..997b9bb06c 100644 --- a/wpf/Digital-Gauge/Transformation-of-Characters.md +++ b/wpf/Digital-Gauge/Transformation-of-Characters.md @@ -9,14 +9,14 @@ documentation: ug # Transformation of Characters in WPF Digital Gauge (SfDigitalGauge) -The digital characters in the digital gauge can be transformed by setting certain properties in the digital gauge. Two kinds of transformations are done using this property. They are: +The digital characters in the digital gauge can be transformed by setting certain properties on the digital gauge. Two kinds of transformations can be done using these properties. They are: * Scaling * Skewing ## Scaling -The value of the digital characters is scaled by altering the height and width of the digital characters. It is achieved by setting the [`CharacterHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterHeight) and [`CharacterWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterWidth) property in the digital gauge. +The value of the digital characters is scaled by altering the height and width of the digital characters. It is achieved by setting the [`CharacterHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterHeight) and [`CharacterWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterWidth) properties on the digital gauge. ### CharacterHeight @@ -66,7 +66,7 @@ The value of the digital characters is scaled by altering the height and width o ## Skewing -The digital gauge also performs skew transformation for the digital characters. It can be done on both x-axis and y-axis through [`SkewAngleX`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_SkewAngleX) and [`SkewAngleY`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_SkewAngleY) properties respectively. +The digital gauge also performs skew transformation for the digital characters. It can be done on both the x-axis and y-axis through the [`SkewAngleX`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_SkewAngleX) and [`SkewAngleY`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_SkewAngleY) properties, respectively. ### SkewAngleX diff --git a/wpf/Linear-Gauge/Getting-Started.md b/wpf/Linear-Gauge/Getting-Started.md index 40f24ca88d..356572d570 100644 --- a/wpf/Linear-Gauge/Getting-Started.md +++ b/wpf/Linear-Gauge/Getting-Started.md @@ -12,29 +12,29 @@ This section explains the steps required to configure the [`SfLinearGauge`](http ## Adding gauge references -You can add gauge reference using one of the following methods: +You can add the gauge reference using one of the following methods: **Method 1: Adding gauge reference from nuget.org** -Syncfusion WPF components are available in [`nuget.org`](https://www.nuget.org/). To add gauge to your project, open the NuGet package manager in Visual Studio, search for [Syncfusion.SfGauge.WPF](https://www.nuget.org/packages/Syncfusion.SfGauge.WPF), and then install it. +Syncfusion WPF components are available in [`nuget.org`](https://www.nuget.org/). To add the gauge to your project, open the NuGet package manager in Visual Studio, search for [Syncfusion.SfGauge.WPF](https://www.nuget.org/packages/Syncfusion.SfGauge.WPF), and then install it. ![Adding gauge reference from NuGet](Getting-Started_images/Adding gauge reference.png) **Method 2: Adding gauge reference from toolbox** -You can drag the linear gauge control from the toolbox and drop it to the designer. It will add the required assembly references automatically, and add the namespace to the page. +You can drag the linear gauge control from the toolbox and drop it onto the designer. It will add the required assembly references automatically and add the namespace to the page. **Method 3: Adding gauge assemblies manually from the installed location** -If you prefer to manually reference the assemblies instead referencing from NuGet, add the following assemblies in respective projects. +If you prefer to manually reference the assemblies instead of referencing from NuGet, add the following assemblies in the respective projects. Location: {Installed location}/{version}/WPF/Assemblies -You can refer to [this](https://help.syncfusion.com/wpf/control-dependencies#sfgauge) link to know about the assemblies required for adding gauge to your project. +Refer to [this](https://help.syncfusion.com/wpf/control-dependencies#sfgauge) link to know about the assemblies required for adding the gauge to your project. -## Initialize gauge +## Initializing the gauge -Import the [`SfLinearGauge`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html) namespace to your respective Window as in the following. +Import the [`SfLinearGauge`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html) namespace to your respective Window as in the following. {% tabs %} @@ -71,9 +71,9 @@ this.Content = sfLinearGauge; {% endtabs %} -## Configuring scale +## Configuring the scale -Scales is a collection of [`LinearScale`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html) which is used to indicate the numeric values. Scale bar, ticks, labels, ranges, and pointers are the sub elements of a scale. +Scales are a collection of [`LinearScale`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html) which is used to indicate the numeric values. Scale bar, ticks, labels, ranges, and pointers are the sub-elements of a scale. The [`Minimum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Minimum) and [`Maximum`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Maximum) properties allow you to set the scale range. @@ -126,7 +126,7 @@ this.Content = sfLinearGauge; ## Adding a symbol pointer -`SymbolPointer` is a shape that can be placed to mark the pointer value in gauge. +`SymbolPointer` is a shape that can be placed to mark the pointer value in the gauge. Add the pointer to the `linearScale` created earlier. {% tabs %} @@ -160,7 +160,7 @@ linearScale.Pointers.Add(linearPointer); ## Adding a bar pointer -`BarPointer` is used to mark the scale values. This starts at the beginning of gauge and ends at the pointer value. +`BarPointer` is used to mark the scale values. This starts at the beginning of the gauge and ends at the pointer value. Add the pointer to the `linearScale` created earlier. {% tabs %} @@ -190,7 +190,7 @@ linearScale.Pointers.Add(linearPointer1); ## Adding ranges -You can categorize the scale values using the start and end values properties in [`LinearRange`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearRange.html). You can add multiple ranges for a scale using the [`Ranges`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Ranges) property. +You can categorize the scale values using the start and end value properties in [`LinearRange`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearRange.html). You can add multiple ranges for a scale using the [`Ranges`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Ranges) property. Add the ranges to the `linearScale` created earlier. {% tabs %} @@ -318,7 +318,7 @@ linearPointer.SymbolPointerPosition = LinearSymbolPointersPosition.Below; linearPointer.SymbolPointerStroke = (SolidColorBrush)new BrushConverter().ConvertFrom("#757575"); linearScale.Pointers.Add(linearPointer); -////Adding bar pointer +//Adding bar pointer LinearPointer linearPointer1 = new LinearPointer(); linearPointer1.PointerType = LinearPointerType.BarPointer; linearPointer1.Value = 50; @@ -360,7 +360,7 @@ You can find the complete getting started sample from this [`link`](https://git ## Theme -LinearGauge supports various built-in themes. Refer to the below links to apply themes for the LinearGauge, +LinearGauge supports various built-in themes. Refer to the below links to apply themes for the LinearGauge: * [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager) @@ -370,4 +370,4 @@ LinearGauge supports various built-in themes. Refer to the below links to apply ## See also -[How to apply themes for SfLinearGauge](https://support.syncfusion.com/kb/article/2841/how-to-apply-themes-for-sflineargauge) \ No newline at end of file +* [How to apply themes for SfLinearGauge](https://support.syncfusion.com/kb/article/2841/how-to-apply-themes-for-sflineargauge) \ No newline at end of file diff --git a/wpf/Linear-Gauge/Labels.md b/wpf/Linear-Gauge/Labels.md index b1256484a4..4582a0ebee 100644 --- a/wpf/Linear-Gauge/Labels.md +++ b/wpf/Linear-Gauge/Labels.md @@ -1,7 +1,7 @@ --- layout: post -title: Labels | SfLinearGauge | Wpf | Syncfusion -description: This section describes Labels support with its customization by using LabelStroke, LabelSize and other properties in WPF SfLinearGauge control. +title: Labels | SfLinearGauge | WPF | Syncfusion +description: This section describes the Labels support with its customization by using LabelStroke, LabelSize, and other properties in the WPF SfLinearGauge control. platform: wpf control: SfLinearGauge documentation: ug @@ -9,13 +9,11 @@ documentation: ug # Labels support in WPF Linear Gauge (SfLinearGauge) -`Labels` of the linear scale provide a numeric value to the major ticks that will be specified according to the range of the scale. +The `Labels` of the linear scale provide a numeric value to the major ticks that will be specified according to the range of the scale. ## Label color customization -The foreground of the label is customized by setting the [`LabelStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_LabelStroke) of the linear scale. - -{% tabs %} +The foreground of the label is customized by setting the [`LabelStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_LabelStroke) of the linear scale.{% tabs %} {% highlight xml %} @@ -120,7 +118,7 @@ The label font can be customized using the [`LabelSize`](https://help.syncfusion ## Setting position for labels -The labels in the scale can be placed above or below the linear scale by choosing the following options available in the [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_LabelPosition) property. The default value of `LabelPosition` property is below. +The labels in the scale can be placed above or below the linear scale by choosing the following options available in the [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_LabelPosition) property. The default value of the `LabelPosition` property is below. 1. Above @@ -180,7 +178,7 @@ You can postfix and prefix values to the scale labels using the [`LabelPostfix`] ### Setting label postfix -The `LabelPostfix` property allows to postfix the values to scale labels. +The `LabelPostfix` property allows you to postfix the values to scale labels. {% tabs %} @@ -237,7 +235,7 @@ The `LabelPostfix` property allows to postfix the values to scale labels. ### Setting label prefix -The `LabelPrefix` property allows to prefix the values to scale labels. +The `LabelPrefix` property allows you to prefix the values to scale labels. {% tabs %} @@ -296,7 +294,7 @@ The `LabelPrefix` property allows to prefix the values to scale labels. ## Labels visibility -Labels visibility can be customized using the [`LabelVisibility`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_LabelVisibility) property of linear scale. +Labels visibility can be customized using the [`LabelVisibility`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_LabelVisibility) property of the linear scale. {% tabs %} diff --git a/wpf/Linear-Gauge/Orientation.md b/wpf/Linear-Gauge/Orientation.md index d46d4f347b..003e08c149 100644 --- a/wpf/Linear-Gauge/Orientation.md +++ b/wpf/Linear-Gauge/Orientation.md @@ -1,9 +1,9 @@ --- layout: post -title: Orientation | SfLinearGauge | Wpf | Syncfusion -description: This section describes Orientation customization support with Orientation property in WPF SfLinearGauge control. +title: Orientation | SfLinearGauge | WPF | Syncfusion +description: This section describes the orientation customization support with the Orientation property in the WPF SfLinearGauge control. platform: wpf -control: Orientation +control: SfLinearGauge documentation: ug --- diff --git a/wpf/Linear-Gauge/Overview.md b/wpf/Linear-Gauge/Overview.md index 1c99ed24e8..a8f7881226 100644 --- a/wpf/Linear-Gauge/Overview.md +++ b/wpf/Linear-Gauge/Overview.md @@ -8,15 +8,15 @@ documentation: ug --- # WPF LinearGauge (SfLinearGauge) Overview -The [`LinearGauge`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.LinearGauge.html) displays a range of values graphically along the linear scale, which is considered as the linear form of the linear gauge. It measures the values of the scale and presents in the horizontal sliding, vertical sliding, or meter. +The [`LinearGauge`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.LinearGauge.html) displays a range of values graphically along the linear scale, which is considered as the linear form of the linear gauge. It measures the values of the scale and presents them in horizontal sliding, vertical sliding, or meter form. -The [`LinearGauge`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.LinearGauge.html) control is used to visualize numerical values of a scale in linear manner. By using the [`LinearGauge`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.LinearGauge.html) control, you can render thermometer. +The [`LinearGauge`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.LinearGauge.html) control is used to visualize numerical values of a scale in a linear manner. By using the [`LinearGauge`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.LinearGauge.html) control, you can render a thermometer. ## Key features ### Scale -The [`Scale`](https://help.syncfusion.com/wpf/linear-gauge/scale) support adding a scale to linear gauge using horizontal and vertical orientations. +The [`Scale`](https://help.syncfusion.com/wpf/linear-gauge/scale) supports adding a scale to the linear gauge using horizontal and vertical orientations. ### Ranges @@ -24,7 +24,7 @@ Highlights the desired [`Ranges`](https://help.syncfusion.com/wpf/linear-gauge/r ### Pointers -The [`Pointers`](https://help.syncfusion.com/wpf/linear-gauge/pointers) supports adding multiple pointers (bar and symbol) to the linear scale. +The [`Pointers`](https://help.syncfusion.com/wpf/linear-gauge/pointers) support adding multiple pointers (bar and symbol) to the linear scale. ![Linear Gauge - Overview](Overview_images/Overview_img1.jpeg) diff --git a/wpf/Linear-Gauge/Pointers.md b/wpf/Linear-Gauge/Pointers.md index 9a80a2f34a..de589f01d9 100644 --- a/wpf/Linear-Gauge/Pointers.md +++ b/wpf/Linear-Gauge/Pointers.md @@ -1,7 +1,7 @@ --- layout: post title: Pointers | Linear Gauge | WPF | Syncfusion -description: Pointers in WPF Linear Gauge are used to indicate the value of an attribute with different pointer types. +description: Pointers in the WPF Linear Gauge are used to indicate the value of an attribute with different pointer types. platform: wpf control: SfLinearGauge documentation: ug @@ -13,7 +13,7 @@ The [`LinearGauge`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges ## Bar pointer -`BarPointer` is used to mark scale values. It starts at the beginning of gauge and ends at the pointer value. You can add bar pointer using the [`PointerType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_PointerType) property. +`BarPointer` is used to mark scale values. It starts at the beginning of the gauge and ends at the pointer value. You can add a bar pointer using the [`PointerType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_PointerType) property. {% tabs %} @@ -83,7 +83,7 @@ The [`LinearGauge`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges ### Bar pointer customization -The UI of `Bar pointer` is customized using the [`BarPointerStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_BarPointerStroke) and [`BarPointerStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_BarPointerStrokeThickness) properties. +The UI of the `BarPointer` is customized using the [`BarPointerStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_BarPointerStroke) and [`BarPointerStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_BarPointerStrokeThickness) properties. {% tabs %} @@ -231,7 +231,7 @@ In `SymbolPointer`, the value is pointed by a symbol on the scale. ### Symbol pointer customization -You can modify the size of symbol pointer by changing the [`SymbolPointerHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_SymbolPointerHeight) and [`SymbolPointerWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_SymbolPointerWidth) properties. The stroke of symbol pointer is changed using the [`SymbolPointerStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_SymbolPointerStroke) property. +You can modify the size of the symbol pointer by changing the [`SymbolPointerHeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_SymbolPointerHeight) and [`SymbolPointerWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_SymbolPointerWidth) properties. The stroke of the symbol pointer is changed using the [`SymbolPointerStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_SymbolPointerStroke) property. {% tabs %} @@ -440,7 +440,7 @@ The [`SymbolPointerStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml ### Adding multiple pointers -In addition to the default pointer, you can add "n" number of [`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Pointers) to a linear scale using the [`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Pointers) property. +In addition to the default pointer, you can add any number of [`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Pointers) to a linear scale using the [`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Pointers) property. {% tabs %} @@ -528,7 +528,7 @@ In addition to the default pointer, you can add "n" number of [`Pointers`](https ## Setting animation for pointer -The [`EnableAnimation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_EnableAnimationProperty) is a Boolean property, which is used to enable or disable the animation of the [`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Pointers) in linear gauge and the animation speed can be controlled with [`AnimationDuration`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_AnimationDuration) property. +The [`EnableAnimation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_EnableAnimationProperty) is a Boolean property, which is used to enable or disable the animation of the [`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Pointers) in the linear gauge, and the animation speed can be controlled with the [`AnimationDuration`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_AnimationDuration) property. {% tabs %} diff --git a/wpf/Linear-Gauge/Ranges.md b/wpf/Linear-Gauge/Ranges.md index bb3ee5df81..db75715239 100644 --- a/wpf/Linear-Gauge/Ranges.md +++ b/wpf/Linear-Gauge/Ranges.md @@ -1,7 +1,7 @@ --- layout: post -title: Ranges| Linear Gauge | WPF | Syncfusion -description: Ranges in WPF Linear Gauge are used to specify or group the scale values. It specifies a start value and end value in the LinearGauge within a scale. +title: Ranges | Linear Gauge | WPF | Syncfusion +description: Ranges in the WPF Linear Gauge are used to specify or group the scale values. It specifies a start value and end value in the LinearGauge within a scale. platform: wpf control: SfLinearGauge documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Ranges support in WPF Linear Gauge (SfLinearGauge) -Range is a visual element, which begins and ends at specified values within a scale. You can add any number of ranges to a scale using the array of range objects. +A range is a visual element, which begins and ends at specified values within a scale. You can add any number of ranges to a scale using the array of range objects. ## Setting start and end values for range @@ -89,7 +89,7 @@ The start and end values of ranges are set using the [`StartValue`](https://help ## Range customization -The UI element of a range is customized by changing the [`RangeStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearRange.html#Syncfusion_UI_Xaml_Gauges_LinearRange_RangeStroke) of the linear range, and the appearance of linear range is customized by setting the [`StartWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearRange.html#Syncfusion_UI_Xaml_Gauges_LinearRange_StartWidth) and [`EndWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearRange.html#Syncfusion_UI_Xaml_Gauges_LinearRange_EndWidth) properties. By setting the [`RangeOpacity`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearRange.html#Syncfusion_UI_Xaml_Gauges_LinearRange_RangeOpacity) of LinearRange, the opacity of the range can be modified. +The UI element of a range is customized by changing the [`RangeStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearRange.html#Syncfusion_UI_Xaml_Gauges_LinearRange_RangeStroke) of the linear range, and the appearance of the linear range is customized by setting the [`StartWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearRange.html#Syncfusion_UI_Xaml_Gauges_LinearRange_StartWidth) and [`EndWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearRange.html#Syncfusion_UI_Xaml_Gauges_LinearRange_EndWidth) properties. By setting the [`RangeOpacity`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearRange.html#Syncfusion_UI_Xaml_Gauges_LinearRange_RangeOpacity) of the LinearRange, the opacity of the range can be modified. {% tabs %} @@ -165,7 +165,7 @@ The UI element of a range is customized by changing the [`RangeStroke`](https:// ## Binding range stroke to ticks and labels -You can bind the range’s stroke to tick lines and labels within its range by setting the [`BindWithRangeStrokeToLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_BindRangeStrokeToLabels). Stroke of the labels can be set related to stroke of the specified ranges. Similarly, by setting the [`BindWithRangeStrokeToTicks`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_BindRangeStrokeToTicks), stroke of the ticks can be set related to stroke of the specified ranges. +You can bind the range's stroke to tick lines and labels within its range by setting the [`BindRangeStrokeToLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_BindRangeStrokeToLabels). The stroke of the labels can be set related to the stroke of the specified ranges. Similarly, by setting the [`BindRangeStrokeToTicks`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_BindRangeStrokeToTicks), the stroke of the ticks can be set related to the stroke of the specified ranges. {% tabs %} @@ -287,7 +287,7 @@ You can bind the range’s stroke to tick lines and labels within its range by s ## Setting range position -The range can be placed above or below the scale by one of the following ways: +The range can be placed above or below the scale in one of the following ways: ### Setting range offset for linear range @@ -371,7 +371,7 @@ Using the [`RangeOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml. The range can be placed above or below the scale by choosing one of the following options available in the [`RangePosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_RangePosition) property: -1. Above(Default) +1. Above (Default) 2. Below {% capture codesnippet1 %} @@ -451,7 +451,7 @@ The range can be placed above or below the scale by choosing one of the followin ### Adding multiple ranges -You can add “n” number of ranges to a scale using the `LinearRange` property of range as shown in the following code. +You can add any number of ranges to a scale using the `LinearRange` property of the range as shown in the following code. {% tabs %} diff --git a/wpf/Linear-Gauge/Scale.md b/wpf/Linear-Gauge/Scale.md index 06f73eb845..d3c5252bb1 100644 --- a/wpf/Linear-Gauge/Scale.md +++ b/wpf/Linear-Gauge/Scale.md @@ -1,15 +1,15 @@ --- layout: post -title: Scale | SfLinearGauge | Wpf | Syncfusion -description: Learn how to add scale to the Syncfusion linear gauge and customize the appearance of the scale in WPF platform +title: Scale | SfLinearGauge | WPF | Syncfusion +description: Learn how to add a scale to the Syncfusion linear gauge and customize the appearance of the scale in the WPF platform. platform: wpf control: SfLinearGauge documentation: ug --- -# Scale in SfLinearGauge +# Scale in SfLinearGauge -The [`MainScale`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html#Syncfusion_UI_Xaml_Gauges_SfLinearGauge_MainScale) is a linear scale integrates ticks, labels, ranges, and pointers to customize the basic look and feel of the linear gauge. +The [`MainScale`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html#Syncfusion_UI_Xaml_Gauges_SfLinearGauge_MainScale) is a linear scale that integrates ticks, labels, ranges, and pointers to customize the basic look and feel of the linear gauge. {% tabs %} @@ -100,7 +100,7 @@ To change the minimum and maximum values of a linear scale, use the [`Minimum`]( ## Setting interval for a scale -The [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Interval) property allows to set intervals for scale. The default value of the `Interval` property is auto interval. Auto interval defines the count of the scale labels as 3 for 100 pixels. +The [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Interval) property allows you to set intervals for the scale. The default value of the `Interval` property is auto interval. Auto interval defines the count of the scale labels as 3 for 100 pixels. {% tabs %} @@ -152,7 +152,7 @@ The [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.Li ## Scale customization -You can customize the color, length, size, and position of the `LinearScale` using the [`ScaleBarStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarStroke), [`ScaleBarBorderThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarBorderThickness), and [`ScaleBarBorderBrush`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarBorderBrush) properties, respectively. +You can customize the color, length, size, and position of the `LinearScale` using the [`ScaleBarStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarStroke), [`ScaleBarBorderThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarBorderThickness), and [`ScaleBarBorderBrush`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarBorderBrush) properties. {% tabs %} @@ -206,10 +206,10 @@ You can customize the color, length, size, and position of the `LinearScale` usi ### Size customization -Size of the scale can be customized using the following two properties. +The size of the scale can be customized using the following two properties. -* [`ScaleBarSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarSize) - Customizes the size of the scale bar (i.e height in case of landscape orientation). -* [`ScaleBarLength`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarLength) - Customizes the length of the scale bar (i.e width in case of landscape orientation). +* [`ScaleBarSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarSize) - Customizes the size of the scale bar (i.e., height in case of landscape orientation). +* [`ScaleBarLength`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarLength) - Customizes the length of the scale bar (i.e., width in case of landscape orientation). {% tabs %} @@ -241,7 +241,7 @@ Size of the scale can be customized using the following two properties. sfLinearGauge.Height = 300; - sfLinearGauge.Width=500; + sfLinearGauge.Width = 500; LinearScale linearScale = new LinearScale(); @@ -263,7 +263,7 @@ Size of the scale can be customized using the following two properties. ## Setting scale direction -You can set the scale position to its forward and backward using the [`ScaleDirection`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleDirection) property. +You can set the scale direction to forward or backward using the [`ScaleDirection`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleDirection) property. {% tabs %} @@ -313,7 +313,7 @@ You can set the scale position to its forward and backward using the [`ScaleDire ## Setting position for a scale -You can set the scale position using the [`ScaleBarPositionFactor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarPositionFactor) property. First, set the [`ElementsPositionMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ElementsPositionMode) to custom, and then set [`ScaleBarPositionFactor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarPositionFactor). +You can set the scale position using the [`ScaleBarPositionFactor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarPositionFactor) property. First, set the [`ElementsPositionMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ElementsPositionMode) to Custom, and then set the [`ScaleBarPositionFactor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarPositionFactor). {% tabs %} diff --git a/wpf/Linear-Gauge/Ticks.md b/wpf/Linear-Gauge/Ticks.md index 4a4132e827..6a3dc9caad 100644 --- a/wpf/Linear-Gauge/Ticks.md +++ b/wpf/Linear-Gauge/Ticks.md @@ -1,15 +1,15 @@ --- layout: post -title: Ticks | SfCLinearGauge | Wpf | Syncfusion -description: Ticks in WPF Linear Gauge are used to indicate the interval value. And able to customize the tick UI with its properties. +title: Ticks | SfLinearGauge | WPF | Syncfusion +description: Ticks in the WPF Linear Gauge are used to indicate the interval value. You can customize the tick UI with its properties. platform: wpf -control: SfCLinearGauge +control: SfLinearGauge documentation: ug --- # Ticks support in WPF Linear Gauge (SfLinearGauge) with customization -Ticks are used to identify the gauge’s data value by marking the gauge scale in regular increments. +Ticks are used to identify the gauge's data value by marking the gauge scale in regular increments. ## Tick customization diff --git a/wpf/Maps/Annotations.md b/wpf/Maps/Annotations.md index 4bfe8d4734..2f9e08a5ed 100644 --- a/wpf/Maps/Annotations.md +++ b/wpf/Maps/Annotations.md @@ -18,13 +18,13 @@ Annotations are notes that are used to leave some message on the map. In Maps, a [`AnnotationSymbol`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationSymbol) is a `VisualObject` that shows a note symbolically. -1. [`AnnotationLabelForeground`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationLabelForeground): Get or sets the foreground color of the annotation label. +1. [`AnnotationLabelForeground`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationLabelForeground): Gets or sets the foreground color of the annotation label. 2. [`AnnotationLabelFontStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationLabelFontStyle): Gets or sets the font style of the annotation label. 3. [`AnnotationLabelBackground`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationLabelBackground): Gets or sets the background color of the annotation label. 4. [`AnnotationLabelFontFamily`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationLabelFontFamily): Gets or sets the font family for the annotation label. 5. [`AnnotationLabelFontSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationLabelFontSize): Gets or sets the annotation label font size. 6. [`Latitude`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_Latitude): Gets or sets the Latitude coordinate of the Annotation. -7. [`Longitude`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_Longitude): Gets or set the Longitude coordinate of the Annotation. +7. [`Longitude`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_Longitude): Gets or sets the Longitude coordinate of the Annotation. {% tabs %} @@ -46,7 +46,7 @@ Annotations are notes that are used to leave some message on the map. In Maps, a - + diff --git a/wpf/Maps/Bubbles.md b/wpf/Maps/Bubbles.md index 6e167d0c87..c83afa3c73 100644 --- a/wpf/Maps/Bubbles.md +++ b/wpf/Maps/Bubbles.md @@ -9,7 +9,7 @@ documentation: ug # Bubbles in WPF Maps (SfMap) -Bubbles in the [WPF Maps](https://www.syncfusion.com/wpf-controls/map) control represent the under-bound data values of the map. Bubbles are scattered throughout map shapes that contain bound values. +Bubbles in the [WPF Maps](https://www.syncfusion.com/wpf-controls/map) control represent the under-bound data values of the map. Bubbles are scattered throughout the map shapes that contain bound values. Bubbles are included when data binding is set as mentioned above and the BubbleMarkerSetting is set. @@ -30,7 +30,7 @@ Gets or sets whether the colors should be automatically filled.
{{'[MaxSize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_MaxSize)'| markdownify }} Double -Get or sets the maximum height and width of the bubble.
{{'[MinSize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_MinSize)'| markdownify }} @@ -40,7 +40,7 @@ Gets or sets the minimum height and width of the bubble.
{{'[StrokeThickness](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_StrokeThickness)'| markdownify }} Double -Get or sets the border thickness of the bubbles.
{{'[ValuePath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_ValuePath)'| markdownify }} @@ -50,7 +50,7 @@ Gets or sets the name of the under-bound property in ItemsSource.
{{'[ColorValuePath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_ColorValuePath)'| markdownify }} String -Gets or sets colors to bubble shape.
{{'[ColorMapping](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_ColorMappings)'| markdownify }} @@ -81,7 +81,7 @@ Gets the Size ratio for the bubbles based on the MinSize and MaxSize.
LegendPositionX Double -Gets or sets the margin value for the x axis.
LegendPositionY Double -Gets or sets the margin value for the y axis.
## Legend header @@ -50,17 +50,19 @@ A header for the legend can be added by setting the [`LegendHeader`](https://hel ## Legend categories -Legends are categorized as two types: +Legends are categorized into two types: * Legends for shape layers. * Legends for bubbles. These can be set by using the [`LegendType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_LegendType) property of the type LegendType. -### Shapes +### Bubbles Bubble type legends are always bubbles with varying sizes. The size of the bubbles is obtained from the [`SizeRatio`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_SizeRatio) from the BubbleMarkerSetting. +### Shapes + Layer shape type legends can be different shapes for the legend. The shapes can be set by using the [`LegendIcon`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_LegendIcon), of the LegendIcon type. ### Arranging the Legends diff --git a/wpf/Maps/Map-Points.md b/wpf/Maps/Map-Points.md index d25f28b9aa..213e0207c2 100644 --- a/wpf/Maps/Map-Points.md +++ b/wpf/Maps/Map-Points.md @@ -9,7 +9,7 @@ documentation: ug # Map Points in WPF Maps (SfMap) -Points are one of the record type in shape file layer. Points are used to specify the specific point in the map. For example, used to specify the capital of countries. Points in the shape file is given as latitude and longitude coordinates in the shapes file. Those points should be converted as MapPoints. +Points are one of the record types in the shape file layer. Points are used to specify a specific point in the map. For example, used to specify the capital of countries. Points in the shape file are given as latitude and longitude coordinates in the shapes file. Those points should be converted as MapPoints. ## Customizing the MapPoint @@ -61,7 +61,7 @@ SfMap map = new SfMap(); ## MapPointIcon -[`MapPointIcon`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MapPointIcon) is used for customizing points shapes.It can be customized by following shapes: +[`MapPointIcon`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MapPointIcon) is used for customizing point shapes. It can be customized by the following shapes: * Rectangle @@ -141,7 +141,7 @@ SfMap map = new SfMap(); ## MapPointPopup -MapPointPopup is a popup, displayed when the point is moved to MapPoint. It shows additional information from the object bounded with the MapPoint. You can get the object from dbf file. +MapPointPopup is a popup, displayed when the point is hovered over the MapPoint. It shows additional information from the object bound with the MapPoint. You can get the object from the dbf file. ### MapPointPopupTemplate diff --git a/wpf/Maps/Map-Providers.md b/wpf/Maps/Map-Providers.md index 7010db9446..56753416ea 100644 --- a/wpf/Maps/Map-Providers.md +++ b/wpf/Maps/Map-Providers.md @@ -9,7 +9,7 @@ documentation: ug # Map Providers in WPF Maps (SfMap) -The [SfMap](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html) control provides support for various map providers, including [OpenStreetMap](https://www.openstreetmap.org), [Google Maps](https://developers.google.com/maps/documentation), [Azure Maps](https://learn.microsoft.com/en-us/azure/azure-maps/), and [Bing Maps](https://www.microsoft.com/en-in/bing/features/maps/?msockid=3b94155aeb2660df1b7f03a4ea7b61d3&form=MA13FV). You can also integrate other map providers by adding them as layers. +The [SfMap](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html) control provides support for various map providers, including [OpenStreetMap](https://www.openstreetmap.org), [Google Maps](https://developers.google.com/maps/documentation), [Azure Maps](https://learn.microsoft.com/en-us/azure/azure-maps/), and [Bing Maps](https://explore.microsoft.com/en-in/bing/features/maps/?form=MA13FV). You can also integrate other map providers by adding them as layers. ## Open Street Map @@ -128,7 +128,7 @@ The default appearance of the Marker can be customized by using the [MarkerTempl Refer to this [link](https://help.syncfusion.com/wpf/maps/markers) for customizing marker icons, labels, marker alignment, marker selection and events. -### Adding a multiple layers in OSM +### Adding multiple layers in OSM Multiple layers can be added within a single [ImageryLayer](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html). To achieve this, add the required layers to the [SubShapeFileLayers](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_SubShapeFileLayers) property of the [ImageryLayer](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html). @@ -162,7 +162,7 @@ The following code example demonstrates how to add multiple layers to an [Imager ## Bing Map -The [Bing Maps](https://www.microsoft.com/en-in/bing/features/maps/?msockid=3b94155aeb2660df1b7f03a4ea7b61d3&form=MA13FV) is a global mapping service provided by Microsoft. Similar to [OpenStreetMap](https://www.openstreetmap.org) (OSM), it delivers map tile images based on user requests and combines them to render the required map area. +The [Bing Maps](https://explore.microsoft.com/en-in/bing/features/maps/?form=MA13FV) is a global mapping service provided by Microsoft. Similar to [OpenStreetMap](https://www.openstreetmap.org) (OSM), it delivers map tile images based on user requests and combines them to render the required map area. ### Enable a Bing Map @@ -170,10 +170,9 @@ You can enable Bing Maps by setting the [LayerType](https://help.syncfusion.com/ ### Bing Map Key -The [BingMapKey](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_BingMapKey) is provided as input to this key property. The Bing Map key can be obtained from -[https://www.microsoft.com/en-us/maps/create-a-bing-maps-key](https://www.microsoft.com/en-us/maps/bing-maps/create-a-bing-maps-key). +The [BingMapKey](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_BingMapKey) is provided as input to this key property. The Bing Map key can be obtained from [https://www.microsoft.com/en-us/maps/create-a-bing-maps-key](https://www.microsoft.com/en-us/maps/bing-maps/create-a-bing-maps-key). -The [Maps](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html) control supports the following [Bing Maps](https://www.microsoft.com/en-in/bing/features/maps/?msockid=3b94155aeb2660df1b7f03a4ea7b61d3&form=MA13FV) view styles: +The [Maps](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html) control supports the following [Bing Maps](https://explore.microsoft.com/en-in/bing/features/maps/?form=MA13FV) view styles: 1. Aerial 2. AerialWithLabel @@ -241,7 +240,7 @@ this.Content = map; The following screenshot illustrates the Road view. -'![Bing map Road View image](Map-Providers_images/Bing_map_Road_View_image.jpg) +![Bing map Road View image](Map-Providers_images/Bing_map_Road_View_image.jpg) ### AerialWithLabelView @@ -276,7 +275,7 @@ The following screenshot illustrates the AerialWithLabel view. ## Azure Maps -[Azure Maps](https://learn.microsoft.com/en-us/azure/azure-maps/) is an online map tile provider from Microsoft. Similar to [OSM](https://www.openstreetmap.org) and [Bing Maps](https://www.microsoft.com/en-in/bing/features/maps/?msockid=3b94155aeb2660df1b7f03a4ea7b61d3&form=MA13FV), it serves map tile images on request and composites them to display the map area. +[Azure Maps](https://learn.microsoft.com/en-us/azure/azure-maps/) is an online map tile provider from Microsoft. Similar to [OSM](https://www.openstreetmap.org) and [Bing Maps](https://explore.microsoft.com/en-in/bing/features/maps?form=MA13FV), it serves map tile images on request and composites them to display the map area. ### Adding Azure Maps diff --git a/wpf/Maps/Map-Selection.md b/wpf/Maps/Map-Selection.md index 05f9b76fb0..b0fe827fbb 100644 --- a/wpf/Maps/Map-Selection.md +++ b/wpf/Maps/Map-Selection.md @@ -14,13 +14,13 @@ Each shape in the map can be selected and unselected when interacted with shapes 1. Single Selection 2. Multi Selection -The selected map shapes is differentiate by its fill. [`SelectedShapeColor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeSetting.html#Syncfusion_UI_Xaml_Maps_ShapeSetting_SelectedShapeColor) of `ShapeSetting` is the API that is used to get or set the selected shape color. +The selected map shapes are differentiated by their fill. [`SelectedShapeColor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeSetting.html#Syncfusion_UI_Xaml_Maps_ShapeSetting_SelectedShapeColor) of `ShapeSetting` is the API that is used to get or set the selected shape color. -All selected shapes available in the [`SelectedMapShapes`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_SelectedMapShapes) of ShapeFileLayer. +All selected shapes are available in the [`SelectedMapShapes`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_SelectedMapShapes) of ShapeFileLayer. ## Single Selection -Single selection allows only one shape to be selected at a time. You can select the shape by clicking or tapping on the shape. Single selection is enabled by the [`EnableSelection`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_EnableSelection) property of ShapeFileLayer. When `EnableSelection` is set to true, then the map can be selected. When it is set to false, the shapes cannot be selected. When any other shape or the map area is selected, then the shape that is already selected is unselected. +Single selection allows only one shape to be selected at a time. You can select the shape by clicking or tapping on the shape. Single selection is enabled by the [`EnableSelection`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_EnableSelection) property of ShapeFileLayer. When `EnableSelection` is set to true, then the map shape can be selected. When it is set to false, the shapes cannot be selected. When any other shape or the map area is selected, then the shape that is already selected is unselected. {% tabs %} @@ -50,8 +50,8 @@ Single selection allows only one shape to be selected at a time. You can select ShapeSetting setting = new ShapeSetting(); setting.ShapeFill = (SolidColorBrush)(new BrushConverter().ConvertFrom("#E5E5E5")); - setting.ShapeStroke= (SolidColorBrush)(new BrushConverter().ConvertFrom("#C1C1C1")); - setting.SelectedShapeColor= (SolidColorBrush)(new BrushConverter().ConvertFrom("#1196CD")); + setting.ShapeStroke = (SolidColorBrush)(new BrushConverter().ConvertFrom("#C1C1C1")); + setting.SelectedShapeColor = (SolidColorBrush)(new BrushConverter().ConvertFrom("#1196CD")); setting.ShapeStrokeThickness = 1; shapeFileLayer.ShapeSettings = setting; @@ -67,7 +67,7 @@ Single selection allows only one shape to be selected at a time. You can select ## Multi Selection -Multiple shapes in the map can be selected when [`EnableMultiSelection`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_EnableMultiSelection) of ShapeFileLayer is set to true. When EnableMultiSelection is set to true, a cross-hair cursor appears on the map to guide the selection. When you drag on the map, a rectangle appears. The shapes bound that intersect with the rectangle is selected. When EnableMultiSelection is set to true, the panning does not work through interactions. +Multiple shapes in the map can be selected when [`EnableMultiSelection`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_EnableMultiSelection) of ShapeFileLayer is set to true. When EnableMultiSelection is set to true, a cross-hair cursor appears on the map to guide the selection. When you drag on the map, a rectangle appears. The shapes that intersect with the rectangle are selected. When EnableMultiSelection is set to true, the panning does not work through interactions. {% tabs %} @@ -96,7 +96,7 @@ Multiple shapes in the map can be selected when [`EnableMultiSelection`](https:/ shapeFileLayer.EnableMultiSelection = true; shapeFileLayer.EnableSelection = true; shapeFileLayer.CrossCursorStrokeThickness = 0.5; - shapeFileLayer.CrossCursorStroke= (SolidColorBrush)(new BrushConverter().ConvertFrom("#686868")); + shapeFileLayer.CrossCursorStroke = (SolidColorBrush)(new BrushConverter().ConvertFrom("#686868")); shapeFileLayer.Uri = "DataMarkers.ShapeFiles.world1.shp"; map.Layers.Add(shapeFileLayer); this.Content = map; diff --git a/wpf/Maps/Map-Shape-Labels.md b/wpf/Maps/Map-Shape-Labels.md index aca8c94d47..dc999fa40a 100644 --- a/wpf/Maps/Map-Shape-Labels.md +++ b/wpf/Maps/Map-Shape-Labels.md @@ -9,7 +9,7 @@ documentation: ug # Map Shape Labels in WPF Maps (SfMap) -Labels for map shapes can be displayed by using the [`LabelPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_LabelPath) of ShapeFileLayer. The value of LabelPath must be a field name specified in the .dbf file corresponding to the shapefile. +Labels for map shapes can be displayed by using the [`LabelPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_LabelPath) of the ShapeFileLayer. The value of LabelPath must be a field name specified in the .dbf file corresponding to the shapefile. @@ -54,14 +54,14 @@ Gets or sets the field name in the database (.dbf) file. {% endtabs %} -The labels can also be customized by modifying the [`ItemsTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ItemsTemplate) of ShapeFileLayer. The labels can be accessed by using DBFData as follows: +The labels can also be customized by modifying the [`ItemsTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ItemsTemplate) of the ShapeFileLayer. The labels can be accessed by using `DbfData` as follows: {% tabs %} {% highlight xaml %} - + @@ -72,7 +72,7 @@ The labels can also be customized by modifying the [`ItemsTemplate`](https://hel + LabelPath="NAME" ItemsTemplate="{StaticResource itemTemplate}"> @@ -97,4 +97,4 @@ The labels can also be customized by modifying the [`ItemsTemplate`](https://hel ![Maps control Shape labels](Map-Shape-Labels_images/Map-Shape-Labels_img1.png) -N> You can refer to our [WPF Map](https://www.syncfusion.com/wpf-controls/map) feature tour page for its groundbreaking feature representations. You can also explore our [WPF Map example](https://github.com/syncfusion/wpf-demos/tree/master/map) to know how to render and configure the map. +N> You can refer to our [WPF Map](https://www.syncfusion.com/wpf-controls/map) feature tour page for its groundbreaking feature representations. You can also explore our [WPF Map example](https://github.com/syncfusion/wpf-demos/tree/master/map) to know how to render and configure the map. \ No newline at end of file diff --git a/wpf/Maps/MapPopup.md b/wpf/Maps/MapPopup.md index ad8aa9b57d..9f0f18e451 100644 --- a/wpf/Maps/MapPopup.md +++ b/wpf/Maps/MapPopup.md @@ -9,9 +9,9 @@ documentation: ug # MapPopup in WPF Maps (SfMap) -MapPopup is a hanging window, displayed when the shape is tapped. It shows additional information from the object bounded with the shape. By default, it takes the property of the bounded object that is referred in the ShapeValuePath and displays its content when the corresponding shape is tapped. +MapPopup is a hanging window, displayed when the shape is tapped. It shows additional information from the object bound with the shape. By default, it takes the property of the bound object that is referred to in the ShapeValuePath and displays its content when the corresponding shape is tapped. -MapPopup is displayed only when [`MapPopupVisibility`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MapPopupVisibility) set to true in the shape file layer. +MapPopup is displayed only when [`MapPopupVisibility`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MapPopupVisibility) is set to true in the shape file layer. It also customizes the MapPopup template. [`PopupCustomTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_PopupCustomTemplate) is a DataTemplate type API that is used to expose the custom template for the MapPopup. diff --git a/wpf/Maps/Markers.md b/wpf/Maps/Markers.md index 54082f9228..d31dbee73e 100644 --- a/wpf/Maps/Markers.md +++ b/wpf/Maps/Markers.md @@ -15,13 +15,13 @@ Markers are used to show some messages on maps. Any number of markers can be added to the shape file layer or the imagery layer using the [`Markers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_Markers) property. Each marker contains the following properties: -N> You must create a model that contains properties such as Latitude and Longitude to add a marker in maps. If you want to add text with default marker, add Label property with your model. +N> You must create a model that contains properties such as Latitude and Longitude to add a marker in maps. If you want to add text with the default marker, add the Label property to your model. `Label`: Displays some messages on maps. -`Latitude`: Specifies y-axis position of the marker. +`Latitude`: Specifies the y-axis position of the marker. -`Longitude`: Specifies x-axis position of the marker. +`Longitude`: Specifies the x-axis position of the marker. {% tabs %} @@ -44,7 +44,7 @@ N> You must create a model that contains properties such as Latitude and Longitu { InitializeComponent(); ViewModel view = new ViewModel(); - this.DataContext =view; + this.DataContext = view; SfMap maps = new SfMap(); ShapeFileLayer shape = new ShapeFileLayer(); shape.Uri = "Maps.ShapeFiles.world1.shp"; @@ -61,10 +61,10 @@ N> You must create a model that contains properties such as Latitude and Longitu { this.Models = new ObservableCollection(); this.Models.Add(new Model() { Label = "USA", Latitude = "38.8833N", Longitude = "77.0167W" }); - this.Models.Add(new Model() { Label = "Brazil ", Latitude = "15.7833S", Longitude = "47.8667W" }); - this.Models.Add(new Model() { Label = "India ", Latitude = "21.0000N", Longitude = "78.0000E" }); - this.Models.Add(new Model() { Label = "China ", Latitude = "35.0000N", Longitude = "103.0000E" }); - this.Models.Add(new Model() { Label = "Indonesia ", Latitude = "6.1750S", Longitude = "106.8283E" }); + this.Models.Add(new Model() { Label = "Brazil", Latitude = "15.7833S", Longitude = "47.8667W" }); + this.Models.Add(new Model() { Label = "India", Latitude = "21.0000N", Longitude = "78.0000E" }); + this.Models.Add(new Model() { Label = "China", Latitude = "35.0000N", Longitude = "103.0000E" }); + this.Models.Add(new Model() { Label = "Indonesia", Latitude = "6.1750S", Longitude = "106.8283E" }); } } @@ -258,7 +258,7 @@ The size and color of marker icons can be customized using the [`MarkerIconSize` ### Icon types -The shape of a marker icons can be customized using the [`MarkerIconType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerIconType) property. The maps control supports the following types of marker icons: +The shape of a marker icon can be customized using the [`MarkerIconType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerIconType) property. The maps control supports the following types of marker icons: * Circle * Diamond @@ -299,7 +299,7 @@ The shape of a marker icons can be customized using the [`MarkerIconType`](https ### Setting an image marker icon -You can set the image as marker icon by setting the icon type as an Image and set [`MarkerIconSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerIconSource) to get the image from local path. +You can set an image as the marker icon by setting the icon type as Image and set [`MarkerIconSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerIconSource) to get the image from a local path. {% tabs %} @@ -338,7 +338,7 @@ You can set the image as marker icon by setting the icon type as an Image and se ## Customizing labels -You can customize the marker labels using the [`MarkerLabelFontSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerLabelFontSize), [`MarkerLabelForeground`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerLabelForeground), [`MarkerLabelFontStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerLabelFontStyle), and [`MarkerLabelFontWeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerLabelFontWeight) and [`MarkerLabelFontFamily`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerLabelFontFamily) properties. +You can customize the marker labels using the [`MarkerLabelFontSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerLabelFontSize), [`MarkerLabelForeground`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerLabelForeground), [`MarkerLabelFontStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerLabelFontStyle), [`MarkerLabelFontWeight`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerLabelFontWeight), and [`MarkerLabelFontFamily`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerLabelFontFamily) properties. {% tabs %} @@ -378,7 +378,7 @@ You can align the maps marker horizontally and vertically using the [`MarkerHori ### Setting a horizontal alignment -The [`MarkerHorizontalAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerHorizontalAlignment) property is used to position the marker icon horizontally. The marker icon can be positioned using the following ways: +The [`MarkerHorizontalAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerHorizontalAlignment) property is used to position the marker icon horizontally. The marker icon can be positioned in the following ways: * `Near`: Specifies the near position of the marker icon for the given latitude and longitude values. * `Center`: Specifies the center position of the marker icon for the given latitude and longitude values. @@ -434,7 +434,7 @@ The [`MarkerHorizontalAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion. ### Setting a vertical alignment -The [`MarkerVerticalAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerVerticalAlignment) property is used to position the marker icon vertically. The marker icon can be positioned using the following ways: +The [`MarkerVerticalAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerVerticalAlignment) property is used to position the marker icon vertically. The marker icon can be positioned in the following ways: * `Near`: Specifies the near position of the marker icon for the given latitude and longitude values. * `Center`: Specifies the center position of the marker icon for the given latitude and longitude values. @@ -493,7 +493,7 @@ N> The default marker icon position for VerticalAlignment and HorizontalAlignmen ## Selection Mode -If you add any view for marker using the [`MarkerTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MarkerTemplate) property from [`MarkerSelected`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html) event, then the corresponding view will be applied to the selected marker. Custom view will be added continuously for all the selected marker, but do not have option to reset the old one. Now, you can achieve this using the [`MarkerSelectionMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerSelectionMode) property. If set selection mode as `Single`, then it will be removed the old view of marker and load the initially rendered marker. If set selection mode as `Multiple`, then the marker template does not reset. +If you add any view for a marker using the [`MarkerTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MarkerTemplate) property from [`MarkerSelected`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html) event, then the corresponding view will be applied to the selected marker. A custom view will be added continuously for all the selected markers, but there is no option to reset the old one. Now, you can achieve this using the [`MarkerSelectionMode`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html#Syncfusion_UI_Xaml_Maps_MapLayer_MarkerSelectionMode) property. If the selection mode is set to `Single`, then the old view of the marker will be removed and the initially rendered marker will be loaded. If the selection mode is set to `Multiple`, then the marker template will not reset. {% tabs %} @@ -545,7 +545,7 @@ If you add any view for marker using the [`MarkerTemplate`](https://help.syncfus ## Events -The [`MarkerSelected`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html) event is fired when a marker is selected. The `MarkerTemplate`, `SelectedMarker`, and `IsSelected` will be passed to MarkerSelectedEventArgs. +The [`MarkerSelected`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapLayer.html) event is fired when a marker is selected. The `MarkerTemplate`, `SelectedMarker`, and `IsSelected` will be passed to the MarkerSelectedEventArgs. If you set any view for the [`MarkerTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MarkerSelectedEventArgs.html#Syncfusion_UI_Xaml_Maps_MarkerSelectedEventArgs_MarkerTemplate) property of MarkerSelectedEventArgs, the corresponding view will be applied to the selected marker. @@ -597,7 +597,7 @@ If you set any view for the [`MarkerTemplate`](https://help.syncfusion.com/cr/wp { e.MarkerTemplate = Resources["markerTemplate"] as DataTemplate; object selectedMarker = e.SelectedMarker; - bool MarkerSelected = e.IsSelected; + bool isSelected = e.IsSelected; } {% endhighlight %} diff --git a/wpf/Maps/Multilayer-Support.md b/wpf/Maps/Multilayer-Support.md index 8113a8b6c1..e8a0d9515a 100644 --- a/wpf/Maps/Multilayer-Support.md +++ b/wpf/Maps/Multilayer-Support.md @@ -15,18 +15,18 @@ Multilayer support allows you to load multiple shapefiles in a single container, This feature enables the map to load multiple types of shapefiles in a single container. Basically, shape files contain point shapes in a single container. -Situations arise where, any combination of available shapefiles needs to be loaded in a single container. In such situations this feature enables the map to load multiple shape layers in a single container. +Situations arise where any combination of available shapefiles needs to be loaded in a single container. In such situations, this feature enables the map to load multiple shape layers in a single container. ## Adding Multiple Layers in the Map -ShapeFileLayer is the core layer for the map. Multiple layers can be added in the [`ShapeFileLayer`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html) itself. They have to be added in SubShapeFileLayers within the ShapeFileLayer. +ShapeFileLayer is the core layer for the map. Multiple layers can be added in the [`ShapeFileLayer`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html) itself. They have to be added in the SubShapeFileLayers within the ShapeFileLayer. ## SubShapeFileLayers SubShapeFileLayers is the collection of [`SubShapeFileLayer`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SubShapeFileLayer.html). SubShapeFileLayer is also a type of shapefile layer. The following code adds multiple layers in the ShapeFileLayer. -{%tabs%} +{% tabs %} {% highlight xaml %} @@ -252,7 +252,7 @@ SubShapeFileLayers is the collection of [`SubShapeFileLayer`](https://help.syncf {% endhighlight %} -{%endtabs%} +{% endtabs %} ![Maps control multi layer support](Multilayer-Support_images/Multilayer-Support_img1.png) diff --git a/wpf/Maps/Overview.md b/wpf/Maps/Overview.md index 5973886269..7e56fcaf33 100644 --- a/wpf/Maps/Overview.md +++ b/wpf/Maps/Overview.md @@ -13,7 +13,7 @@ A map is a graphical representation of geographical data. It is used to represen ## Use case scenario -The Maps control can be used in following cases: +The Maps control can be used in the following cases: 1. To visualize weather data. 2. To visualize geographical statistics information. @@ -24,9 +24,9 @@ The Maps control can be used in following cases: ## Key Concepts of Map -A map contains a set of elements, including shapes, bubbles, annotations, and data items, that is maintained in layers. ShapeFileLayer is one of the layers that can be used to generate map shapes and bind business objects with them. Bubbles and MapItems enhance the data visualization capabilities of the map with data binding. +A map contains a set of elements, including shapes, bubbles, annotations, and data items, that are maintained in layers. ShapeFileLayer is one of the layers that can be used to generate map shapes and bind business objects with them. Bubbles and MapItems enhance the data visualization capabilities of the map with data binding. -Tree map-like support provides rich UI for shapes and bubbles. Annotation and CustomDataBinding items shows additional information on the map. +Tree map-like support provides rich UI for shapes and bubbles. Annotation and CustomDataBinding items show additional information on the map. Maps also provide multilayer support, which can be added as a sublayer, and shapes such as polygons, polylines, and points can be added to them. diff --git a/wpf/Maps/PopulateData.md b/wpf/Maps/PopulateData.md index f4c712445b..de8502e3db 100644 --- a/wpf/Maps/PopulateData.md +++ b/wpf/Maps/PopulateData.md @@ -9,7 +9,7 @@ documentation: ug # Populate Data in WPF Maps (SfMap) -This section explains how to populate shape data for providing data input to the maps control and usage of the [`ItemsSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ItemsSource) property. +This section explains how to populate shape data for providing data input to the maps control and the usage of the [`ItemsSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ItemsSource) property. ## Data binding @@ -23,11 +23,11 @@ The following properties in shape layers are used for binding data in the maps c ### ItemsSource -This is the basic property that exposes data binding for Maps. [`ItemsSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ItemsSource) is the property that accepts the collection type values. For example, the ItemsSource property accepts the ObservableCollections, Lists, and LinqResult values. +This is the basic property that exposes data binding for Maps. [`ItemsSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ItemsSource) is the property that accepts the collection type values. For example, the ItemsSource property accepts the ObservableCollection, List, and LinqResult values. ### ShapeIDPath -[`ShapeIDPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ShapeIDPath) is the string type property used to refer to the ID of a shape from the ItemsSource. The ItemsSource property must have a property with name of the ShapeIDPath. The ShapeIDPath and the ShapeIDTableField properties are related to each other (refer to ShapeIDTableField for more details). +[`ShapeIDPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ShapeIDPath) is the string type property used to refer to the ID of a shape from the ItemsSource. The ItemsSource property must have a property with the name of the ShapeIDPath. The ShapeIDPath and the ShapeIDTableField properties are related to each other (refer to ShapeIDTableField for more details). ### ShapeIDTableField @@ -39,7 +39,7 @@ The [`ShapeIDTableField`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml. ### Role of DBF file in Data Binding -The .dbf file that is included in the main shape file, is required to work with data binding. The .dbf file contains the information about the shapes in the main shape file. Each record in the .dbf file is associated with the each shape in the main file. Shapes in the main file and records in the .dbf file are organized in the same sequence. Therefore, the Nth shape in the main file is associated with Nth record in the .dbf file. A record of the .dbf file can contain the name of the shape or population data or some other statistical data of a geographic shape. +The .dbf file that is included in the main shape file is required to work with data binding. The .dbf file contains the information about the shapes in the main shape file. Each record in the .dbf file is associated with each shape in the main file. Shapes in the main file and records in the .dbf file are organized in the same sequence. Therefore, the Nth shape in the main file is associated with the Nth record in the .dbf file. A record of the .dbf file can contain the name of the shape or population data or some other statistical data of a geographic shape. {% tabs %} @@ -90,7 +90,7 @@ The .dbf file that is included in the main shape file, is required to work with {% endtabs %} -The following code sample demonstrates referring the United States election data as items source. +The following code sample demonstrates referring the United States election data as the items source. {% highlight c# %} @@ -103,7 +103,7 @@ The following code sample demonstrates referring the United States election data set { state = value; } } - public string candidate; + private string candidate; public string Candidate { get { return candidate; } diff --git a/wpf/Maps/ShapeType.md b/wpf/Maps/ShapeType.md index 184e6b9ad9..4259c2d691 100644 --- a/wpf/Maps/ShapeType.md +++ b/wpf/Maps/ShapeType.md @@ -11,20 +11,20 @@ documentation: ug This feature allows you to draw a polygon, polyline, or circle on the map. You can provide input as geo points to draw shapes in two different ways: - 1.Add shapes using map element collection - 2.Add shapes using point collection + 1. Add shapes using map element collection + 2. Add shapes using point collection ## Add shapes using map element collection -You can provide input as a geo points collection to add multiple shapes in a single layer by using the [`MapElements`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MapElements) property of shape layer. There are three types of shapes available in map element. +You can provide input as a geo points collection to add multiple shapes in a single layer by using the [`MapElements`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MapElements) property of the shape layer. There are three types of shapes available in the map element. - 1.MapPolygon - 2.MapPolyline - 3.MapCircle + 1. MapPolygon + 2. MapPolyline + 3. MapCircle ### MapPolygon -You can add polygon shape on map using [`MapPolygon`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapPolygon.html) class and provide geo points collection to `Points` property. Polygon shape type is used to defines a group of land, water bodies, and other features with a spatial extent. +You can add a polygon shape on the map using the [`MapPolygon`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapPolygon.html) class and provide the geo points collection to the `Points` property. The polygon shape type is used to define a group of land, water bodies, and other features with a spatial extent. {% tabs %} {% highlight xaml %} @@ -65,7 +65,7 @@ You can add polygon shape on map using [`MapPolygon`](https://help.syncfusion.co { InitializeComponent(); - ViewModel viewModel = new ViewModel(); + ViewModel viewModel = new ViewModel(); SfMap maps = new SfMap(); maps.ZoomLevel = 4; ImageryLayer layer = new ImageryLayer(); @@ -136,7 +136,7 @@ You can add polygon shape on map using [`MapPolygon`](https://help.syncfusion.co ### MapPolyline -You can add polyline shape on map using [`MapPolyline`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapPolyline.html) class and provide geo points collection to `Points`. Polylines are frequently used to define linear features such as roads, rivers, and power lines. +You can add a polyline shape on the map using the [`MapPolyline`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapPolyline.html) class and provide the geo points collection to `Points`. Polylines are frequently used to define linear features such as roads, rivers, and power lines. {% tabs %} {% highlight xaml %} @@ -187,7 +187,7 @@ You can add polyline shape on map using [`MapPolyline`](https://help.syncfusion. { InitializeComponent(); - SfMap maps = new SfMap(); + SfMap maps = new SfMap(); maps.ZoomLevel = 5; ImageryLayer layer = new ImageryLayer(); layer.Center = new Point(49.9709225, 10.2187212); @@ -217,9 +217,9 @@ You can add polyline shape on map using [`MapPolyline`](https://help.syncfusion. ### MapCircle -A circle has a single geo coordinate value and it can be positioned on map using [`Center`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapCircle.html#Syncfusion_UI_Xaml_Maps_MapCircle_Center) property of [`MapCircle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapCircle.html). The circles are often used to define features such as oil wells, landmarks, and elevations. +A circle has a single geo coordinate value and it can be positioned on the map using the [`Center`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapCircle.html#Syncfusion_UI_Xaml_Maps_MapCircle_Center) property of [`MapCircle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapCircle.html). The circles are often used to define features such as oil wells, landmarks, and elevations. -* [`Center`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapCircle.html#Syncfusion_UI_Xaml_Maps_MapCircle_Center) - Holds latitude and longitude values that defines the center of the circle. +* [`Center`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.MapCircle.html#Syncfusion_UI_Xaml_Maps_MapCircle_Center) - Holds latitude and longitude values that define the center of the circle. {% tabs %} {% highlight xaml %} @@ -384,17 +384,17 @@ The following properties are used to customize [`MapPolygon`](https://help.syncf ## Add shapes using point collection -You can add more number of shapes on map by using [`SubShapeFileLayer`](https://help.syncfusion.com/wpf/maps/multilayer-support#subshapefilelayers) and `Points` collection property which contains the geo-coordinate points to draw a shape. In shape file layer, there are three type of shapes available and it can be changed by using the [`ShapeType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ShapeType) property. +You can add more number of shapes on the map by using [`SubShapeFileLayer`](https://help.syncfusion.com/wpf/maps/multilayer-support#subshapefilelayers) and the `Points` collection property which contains the geo-coordinate points to draw a shape. In the shape file layer, there are three types of shapes available and it can be changed by using the [`ShapeType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ShapeType) property. - 1.Polygon - 2.Polyline - 3.Point icon + 1. Polygon + 2. Polyline + 3. Point icon -You can customize the appearance of the shape UI by setting [`ShapeFill`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeSetting.html#Syncfusion_UI_Xaml_Maps_ShapeSetting_ShapeFill), [`ShapeStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeSetting.html#Syncfusion_UI_Xaml_Maps_ShapeSetting_ShapeStroke), and [`ShapeStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeSetting.html#Syncfusion_UI_Xaml_Maps_ShapeSetting_ShapeStrokeThickness) properties in [`ShapeSetting`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeSetting.html). +You can customize the appearance of the shape UI by setting the [`ShapeFill`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeSetting.html#Syncfusion_UI_Xaml_Maps_ShapeSetting_ShapeFill), [`ShapeStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeSetting.html#Syncfusion_UI_Xaml_Maps_ShapeSetting_ShapeStroke), and [`ShapeStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeSetting.html#Syncfusion_UI_Xaml_Maps_ShapeSetting_ShapeStrokeThickness) properties in [`ShapeSetting`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeSetting.html). ### Polygon -You can add polygon shape on map by using Points collection property of shape layer or sub layer and set [`ShapeType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ShapeType) as `Polygon`. Polygon shape type defines a group of land, water bodies, and other features with a spatial extent. +You can add a polygon shape on the map by using the Points collection property of the shape layer or sub layer and set [`ShapeType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ShapeType) as `Polygon`. The polygon shape type defines a group of land, water bodies, and other features with a spatial extent. {% tabs %} {% highlight xaml %} @@ -503,7 +503,7 @@ You can add polygon shape on map by using Points collection property of shape la ### Polyline -You can add polyline shape on map by using Points collection property of shape layer or sub layer and set [`ShapeType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ShapeType) as `Polyline`. Polylines are frequently used to define linear features such as roads, rivers, and power lines. +You can add a polyline shape on the map by using the Points collection property of the shape layer or sub layer and set [`ShapeType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ShapeType) as `Polyline`. Polylines are frequently used to define linear features such as roads, rivers, and power lines. {% tabs %} {% highlight xaml %} @@ -586,7 +586,7 @@ You can add polyline shape on map by using Points collection property of shape l ### Point icon -A point icon has a single geo coordinate value and you can add multi point icon shapes on map by using `Points` collection property of shape layer or sub layer and set [`ShapeType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ShapeType) as `PointIcon`. The point icons are often used to define features such as oil wells, landmarks, and elevations. +A point icon has a single geo coordinate value and you can add multi point icon shapes on the map by using the `Points` collection property of the shape layer or sub layer and set [`ShapeType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_ShapeType) as `PointIcon`. The point icons are often used to define features such as oil wells, landmarks, and elevations. The size, shape, and alignment of the map points can be customized using the [`MapPointIconSize`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MapPointIconSize), [`MapPointIcon`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MapPointIcon), [`MapPointHorizontalAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MapPointHorizontalAlignment), and [`MapPointVerticalAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_MapPointVerticalAlignment) properties of the shape file layer. diff --git a/wpf/Maps/Shapes-Color-Customization.md b/wpf/Maps/Shapes-Color-Customization.md index 420dacf252..eee94dd1b8 100644 --- a/wpf/Maps/Shapes-Color-Customization.md +++ b/wpf/Maps/Shapes-Color-Customization.md @@ -19,7 +19,7 @@ The important property that makes an impact on shape colors is AutoFillColors. T ## Properties -The below mentioned properties are available in the ShapesSetting property of the ShapeFileLayer. ShapeSetting defines the basic customization settings of shapes in the map. +The properties mentioned below are available in the ShapesSetting property of the ShapeFileLayer. ShapeSetting defines the basic customization settings of shapes in the map. ### ShapeFill @@ -33,7 +33,7 @@ The below mentioned properties are available in the ShapesSetting property of th [`ShapeStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ShapeSetting.html#Syncfusion_UI_Xaml_Maps_ShapeSetting_ShapeStrokeThickness) is a double type property that sets the border thickness of the shape in the map. -These setting works only when `AutoFillColor` is set as false. +These settings work only when `AutoFillColor` is set to false. {% tabs %} @@ -112,10 +112,10 @@ Gets or sets the To value of ColorValuePath +Gets or sets the color values for the given range based on the From and To.
{{'[Color](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ColorMapping.html#Syncfusion_UI_Xaml_Maps_ColorMapping_Color)'| markdownify }} Color -Gets or sets the color values for the given range based on the From and To .
-The fill color of a particular bubble fill is determined by its under-bound value and color range. To provide a Tree Map like impact on the map, the data binding should work properly. For example, consider the following color ranges. +The fill color of a particular bubble is determined by its under-bound value and color range. To provide a Tree Map-like impact on the map, the data binding should work properly. For example, consider the following color ranges. {% tabs %} @@ -195,13 +195,13 @@ The fill color of a particular bubble fill is determined by its under-bound valu {% endtabs %} -When under-bound object value is 750000000, then the fill color of the corresponding bubble is set to #3D9FD8. As mentioned earlier, the under-bound value of the bubble is set through the ShapeValuePath in the ShapeSetting. +When the under-bound object value is 750000000, then the fill color of the corresponding bubble is set to #3D9FD8. As mentioned earlier, the under-bound value of the bubble is set through the ShapeValuePath in the ShapeSetting. -When the under-bound value is under any of the given sorted range or above the sorted range, then the fill is set to Black. +When the under-bound value is under any of the given sorted ranges or above the sorted range, the fill is set to Black. AutoFillColor must be set to false to enable the range color mapping. -N> The shape’s under-bound object value must have numeric property and should be mentioned in ShapeValuePath to work on this. The color between the given ranges is applied only to the shapes that have a proper under-bound values. The color for other shapes is the ShapeFill’s color. +N> The shape's under-bound object value must have a numeric property and should be mentioned in ShapeValuePath to work on this. The color between the given ranges is applied only to the shapes that have a proper under-bound value. The color for other shapes is the ShapeFill's color. ![Maps control Shapes color customization](Shapes-Color-Customization_images/Shapes-Color-Customization_img2.png) @@ -214,13 +214,13 @@ N> The shape’s under-bound object value must have numeric property and should 1. Metro 2. CoolBlue -ColorPalette has to be set in the ShapeSetting’s ColorPalette property. ColorPalette is the enum property that accepts Metro, CoolBlue and CustomPalette. +ColorPalette has to be set in the ShapeSetting's ColorPalette property. ColorPalette is the enum property that accepts Metro, CoolBlue, and CustomPalette. {% tabs %} {% highlight xaml %} - + @@ -238,19 +238,19 @@ ColorPalette has to be set in the ShapeSetting’s ColorPalette property. ColorP {% highlight c# %} - SfMap map = new SfMap(); - ShapeFileLayer shapeFileLayer = new ShapeFileLayer(); - shapeFileLayer.Uri = "DataMarkers.ShapeFiles.usa_state.shp"; - map.Layers.Add(shapeFileLayer); + SfMap map = new SfMap(); + ShapeFileLayer shapeFileLayer = new ShapeFileLayer(); + shapeFileLayer.Uri = "DataMarkers.ShapeFiles.usa_state.shp"; + map.Layers.Add(shapeFileLayer); - ShapeSetting setting = new ShapeSetting(); - setting.ColorPalette = ColorPalettes.Metro; + ShapeSetting setting = new ShapeSetting(); + setting.ColorPalette = ColorPalettes.Metro; - ShapeFillSetting shapeFillSetting = new ShapeFillSetting(); - shapeFillSetting.AutoFillColors = true; - setting.FillSetting = shapeFillSetting; - shapeFileLayer.ShapeSettings = setting; - this.Content = map; + ShapeFillSetting shapeFillSetting = new ShapeFillSetting(); + shapeFillSetting.AutoFillColors = true; + setting.FillSetting = shapeFillSetting; + shapeFileLayer.ShapeSettings = setting; + this.Content = map; {% endhighlight %} {% endtabs %} @@ -259,9 +259,9 @@ ColorPalette has to be set in the ShapeSetting’s ColorPalette property. ColorP ## CustomColorPalette -Besides the built-in the color palettes, the custom colors can be defined for the color palette. The custom colors are defined in the `CustomColors` in `ShapeSetting`. CustomColors is the collection property that accepts the `MapColorPalette`. To apply the custom colors, `ColorPalette` must be set to `CustomPalette` and CustomColors should be defined. +Besides the built-in color palettes, the custom colors can be defined for the color palette. The custom colors are defined in the `CustomColors` in `ShapeSetting`. CustomColors is the collection property that accepts the `MapColorPalette`. To apply the custom colors, `ColorPalette` must be set to `CustomPalette` and CustomColors should be defined. -MapColorPalette contains a property named `FillBrush`. This property sets the fill color of the shape when custom palette is set. +MapColorPalette contains a property named `FillBrush`. This property sets the fill color of the shape when the custom palette is set. {% tabs %} {% highlight xaml %} @@ -288,36 +288,38 @@ MapColorPalette contains a property named `FillBrush`. This property sets the fi {% endhighlight %} -{% highlight c# %} - SfMap map = new SfMap(); - ShapeFileLayer shapeFileLayer = new ShapeFileLayer(); - shapeFileLayer.Uri = "DataMarkers.ShapeFiles.usa_state.shp"; - map.Layers.Add(shapeFileLayer); +{% highlight C# %} - ShapeSetting setting = new ShapeSetting(); - setting.ColorPalette = ColorPalettes.CustomPalette; - MapColorPalette palette = new MapColorPalette(); - palette.FillBrush = new SolidColorBrush(Colors.Gray); - setting.CustomColors.Add(palette); + SfMap map = new SfMap(); + ShapeFileLayer shapeFileLayer = new ShapeFileLayer(); + shapeFileLayer.Uri = "DataMarkers.ShapeFiles.usa_state.shp"; + map.Layers.Add(shapeFileLayer); - palette = new MapColorPalette(); - palette.FillBrush = new SolidColorBrush(Colors.Gold); - setting.CustomColors.Add(palette); + ShapeSetting setting = new ShapeSetting(); + setting.ColorPalette = ColorPalettes.CustomPalette; + MapColorPalette palette = new MapColorPalette(); + palette.FillBrush = new SolidColorBrush(Colors.Gray); + setting.CustomColors.Add(palette); - palette = new MapColorPalette(); - palette.FillBrush = new SolidColorBrush(Colors.LightBlue); - setting.CustomColors.Add(palette); + palette = new MapColorPalette(); + palette.FillBrush = new SolidColorBrush(Colors.Gold); + setting.CustomColors.Add(palette); - palette = new MapColorPalette(); - palette.FillBrush = new SolidColorBrush(Colors.LightCyan); - setting.CustomColors.Add(palette); + palette = new MapColorPalette(); + palette.FillBrush = new SolidColorBrush(Colors.LightBlue); + setting.CustomColors.Add(palette); - ShapeFillSetting shapeFillSetting = new ShapeFillSetting(); - shapeFillSetting.AutoFillColors = true; - setting.FillSetting = shapeFillSetting; - shapeFileLayer.ShapeSettings = setting; + palette = new MapColorPalette(); + palette.FillBrush = new SolidColorBrush(Colors.LightCyan); + setting.CustomColors.Add(palette); - this.Content = map; + ShapeFillSetting shapeFillSetting = new ShapeFillSetting(); + shapeFillSetting.AutoFillColors = true; + setting.FillSetting = shapeFillSetting; + shapeFileLayer.ShapeSettings = setting; + + this.Content = map; + {% endhighlight %} {% endtabs %} diff --git a/wpf/Maps/UserInteraction.md b/wpf/Maps/UserInteraction.md index 3656209b16..ccbb62c635 100644 --- a/wpf/Maps/UserInteraction.md +++ b/wpf/Maps/UserInteraction.md @@ -450,7 +450,7 @@ The following properties are related to the zooming feature of the Maps control: #### ZoomLevel -[`ZoomLevel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_ZoomLevel) is the primary property of the zooming feature. It controls the map’s scale size while zooming. Initially, the `ZoomLevel` is set to 1. zoom level cannot be less than 1. +[`ZoomLevel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_ZoomLevel) is the primary property of the zooming feature. It controls the map's scale size while zooming. Initially, the `ZoomLevel` is set to 1. The zoom level cannot be less than 1. #### EnableZoom @@ -501,19 +501,19 @@ Maps can be zoomed by using the following methods: #### Changing the ZoomLevel -A map can be zoomed by changing the zoom level of the Map control. Incrementing the ZoomLevel, zooms in the map, while decrementing the ZoomLevel, zooms it out. +A map can be zoomed by changing the zoom level of the Map control. Incrementing the ZoomLevel zooms in the map, while decrementing the ZoomLevel zooms it out. #### Using the Zoom method Maps can be zoomed using the [`Zoom`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_Zoom_System_Double_) method. The Zoom method has the parameter zoom value. The map can be zoomed or scaled with the zoom value parameter. -{% highlight C# %} +{% highlight c# %} SfMap syncMap = new SfMap(); ShapeFileLayer shapeLayer = new ShapeFileLayer(); -   shapeLayer.Uri = "MapApp.ShapeFiles.world1.shp"; + shapeLayer.Uri = "MapApp.ShapeFiles.world1.shp"; syncMap.Layers.Add(shapeLayer); @@ -525,7 +525,7 @@ Maps can be zoomed using the [`Zoom`](https://help.syncfusion.com/cr/wpf/Syncfus In addition to the pinching event, the map can be zoomed using the mouse events. The map is zoomed in when the mouse is scrolled up. The map zooms out when the mouse is scrolled down. -![Maps controls Zooming and Padding](Zooming-and-Panning_images/Zooming-and-Panning_img1.png) +![Maps controls Zooming and Panning](Zooming-and-Panning_images/Zooming-and-Panning_img1.png) ## Panning the map @@ -574,7 +574,7 @@ The map can be panned with the [`Pan`](https://help.syncfusion.com/cr/wpf/Syncfu ##### Code sample for the Pan method -{% highlight C# %} +{% highlight c# %} SfMap syncMap = new SfMap(); @@ -602,18 +602,18 @@ N> The map can be panned only when some parts of the map are outside the view of ### Calculate a zoom level -This feature allows you to automatically set the initial zoom level automatically in two ways: +This feature allows you to automatically set the initial zoom level in two ways: * Distance Radius(KM/miles) * Geo-bounds(Northeast, Southwest) ### Distance radius -N> [`DistanceType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_DistanceType) default value is KiloMeter. +N> The default value of [`DistanceType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_DistanceType) is KiloMeter. Calculate the initial zoom level automatically based on the [`Radius`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_Radius) and [`DistanceType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_DistanceType) properties of ImageryLayer. -* [`Center`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_Center) - Represents center point of ImageryLayer. +* [`Center`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_Center) - Represents the center point of ImageryLayer. {% capture codesnippet1 %} {% tabs %} @@ -645,30 +645,30 @@ Calculate the initial zoom level automatically based on the [`Radius`](https://h {% highlight c# %} - SfMap maps = new SfMap(); - ImageryLayer layer = new ImageryLayer(); - layer.Center = new Point(38.909804, -77.043442); - layer.Radius = 5; - layer.DistanceType = DistanceType.KiloMeter; - layer.Markers = obj.Models; - layer.MarkerTemplate = this.Resources["markerTemplate"] as DataTemplate; - maps.Layers.Add(layer); - - public class Model - { - public string Longitude { get; set; } - public string Latitude { get; set; } - } + SfMap maps = new SfMap(); + ImageryLayer layer = new ImageryLayer(); + layer.Center = new Point(38.909804, -77.043442); + layer.Radius = 5; + layer.DistanceType = DistanceType.KiloMeter; + layer.Markers = obj.Models; + layer.MarkerTemplate = this.Resources["markerTemplate"] as DataTemplate; + maps.Layers.Add(layer); - public class ViewModel - { - public ObservableCollection Models { get; set; } - public ViewModel() - { - this.Models = new ObservableCollection(); - this.Models.Add(new Model() { Latitude = "38.909804", Longitude = "-77.043442" }); - } - } + public class Model + { + public string Longitude { get; set; } + public string Latitude { get; set; } + } + + public class ViewModel + { + public ObservableCollection Models { get; set; } + public ViewModel() + { + this.Models = new ObservableCollection(); + this.Models.Add(new Model() { Latitude = "38.909804", Longitude = "-77.043442" }); + } + } {% endhighlight %} diff --git a/wpf/Radial-Gauge/Annotations.md b/wpf/Radial-Gauge/Annotations.md index c49b261682..8fbf277aba 100644 --- a/wpf/Radial-Gauge/Annotations.md +++ b/wpf/Radial-Gauge/Annotations.md @@ -9,15 +9,15 @@ documentation: ug # Annotations in WPF Radial Gauge (SfCircularGauge) -SfCircularGauge supports annotations, which allows you to mark the specific area of interest in circular gauge. You can place custom views as annotations. The text and images can also be added by using `Annotations` property. +SfCircularGauge supports annotations, which allow you to mark a specific area of interest in the circular gauge. You can place custom views as annotations. Text and images can also be added by using the `Annotations` property. ## Setting a view annotation -When the annotation allows you to place the custom elements, a gauge can be initialized to the element, and this can be used to place the annotation in another gauge. The Following properties are used to customize the Annotations: +When the annotation allows you to place custom elements, a gauge can be initialized to the element, and this can be used to place the annotation in another gauge. The following properties are used to customize the annotations: * [`Angle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_Angle) : Used to place the view at the given angle. -* [`Offset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_Offset) : Used to move the view from the center to edge of the circular gauge. The value should be ranges from 0 to 1. -* [`ViewMargin`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_ViewMargin) : Used to customize the Annotation x and y position by using the pixel values. +* [`Offset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_Offset) : Used to move the view from the center to the edge of the circular gauge. The value should range from 0 to 1. +* [`ViewMargin`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_ViewMargin) : Used to customize the annotation's x and y position by using pixel values. The following code is used to create the Annotations. diff --git a/wpf/Radial-Gauge/Getting-Started.md b/wpf/Radial-Gauge/Getting-Started.md index 2d412a1d97..8f0ddda687 100644 --- a/wpf/Radial-Gauge/Getting-Started.md +++ b/wpf/Radial-Gauge/Getting-Started.md @@ -32,9 +32,9 @@ Location: {Installed location}/{version}/WPF/Assemblies You can refer to [this](https://help.syncfusion.com/wpf/control-dependencies#sfgauge) link to know about the assemblies required for adding gauge to your project. -## Initialize gauge +## Initialize the gauge -Import the [`SfCircularGauge`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html) namespace to your respective Window as follows. +Import the [`SfCircularGauge`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html) namespace to your respective Window as follows. {% tabs %} @@ -122,7 +122,7 @@ SfCircularGauge sfCircularGauge = new SfCircularGauge(); ## Configuring scales -You can configure the [`CircularScale`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html) elements by using the following APIs: +You can configure the [`CircularScale`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html) elements by using the following properties: * StartAngle @@ -144,7 +144,7 @@ You can configure the [`CircularScale`](https://help.syncfusion.com/cr/wpf/Syncf - + {% endhighlight %} @@ -199,7 +199,7 @@ SfCircularGauge sfCircularGauge = new SfCircularGauge(); ## Adding a needle pointer -Create a `Needle Pointer`, and associate it with a scale that is to be displayed the current value. +Create a `Needle Pointer`, and associate it with a scale that is to display the current value. {% tabs %} @@ -331,7 +331,7 @@ The `Symbol Pointer` points to the current value in a scale. {% endtabs %} -The following code example is the complete code of the previous configurations. +The following code example combines all of the previous configurations. {% tabs %} @@ -499,4 +499,4 @@ SfCircularGauge supports various built-in themes. Refer to the below links to ap [How to apply themes for SfCircularGauge](https://support.syncfusion.com/kb/article/2832/how-to-apply-themes-for-sfcirculargauge) -[How to create dynamic application driven by excelling formulas using SfCircularGauge](https://support.syncfusion.com/kb/article/2720/how-to-prepare-car-dashboard-demo-using-sfcirculargauge) +[How to prepare car dashboard demo using SfCircularGauge](https://support.syncfusion.com/kb/article/2720/how-to-prepare-car-dashboard-demo-using-sfcirculargauge) diff --git a/wpf/Radial-Gauge/Header.md b/wpf/Radial-Gauge/Header.md index 1646dce5ec..e55803d3fc 100644 --- a/wpf/Radial-Gauge/Header.md +++ b/wpf/Radial-Gauge/Header.md @@ -9,11 +9,11 @@ documentation: ug # Header in WPF Radial Gauge (SfCircularGauge) -Header allows you to show text or any UI content inside the gauge control using [`GaugeHeader`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_GaugeHeader) option. This provides information about the data that is being plotted in the circular gauge. +Header allows you to show text or any UI content inside the gauge control using the [`GaugeHeader`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_GaugeHeader) option. This provides information about the data that is being plotted in the circular gauge. -## Setting Header for Circular Gauge +## Setting a header for the circular gauge -The [`GaugeHeader`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_GaugeHeader) is an object that can be used to set a unique header for the circular gauge. You can add text and images as header in the circular gauge. Only one header can be added in a circular gauge. +The [`GaugeHeader`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_GaugeHeader) is an object that can be used to set a unique header for the circular gauge. You can add text and images as a header in the circular gauge. Only one header can be added to a circular gauge. {% tabs %} @@ -87,7 +87,7 @@ this.Content = sfCircularGauge; ![CircularGauge Header](Header_images/Header_img1.png) -## Setting alignment for header +## Setting alignment for the header The gauge header can be positioned by using the [`HeaderAlignment`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_HeaderAlignment) property. The default value of this property is `Left`. @@ -185,9 +185,9 @@ this.Content = sfCircularGauge; ![CircularGauge Header with customization](Header_images/Header_img2.png) -## Setting position for header +## Setting the position for the header -The [`GaugeHeaderPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_GaugeHeaderPosition) property is used to place header in the circular gauge. The value for `GaugeHeaderPosition` should be specified in offset value. In the point value, which has been given for the `GaugeHeaderPosition`, the first value represent x-coordinate and the second value represents y-coordinate. First, set the `HeaderAlignment` to custom, then set the position of header. +The [`GaugeHeaderPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_GaugeHeaderPosition) property is used to place the header in the circular gauge. The value for `GaugeHeaderPosition` should be specified as an offset value. In the point value given for `GaugeHeaderPosition`, the first value represents the x-coordinate and the second value represents the y-coordinate. First, set the `HeaderAlignment` to custom, then set the position of the header. {% tabs %} @@ -263,9 +263,9 @@ The [`GaugeHeaderPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xam ![CircularGauge header with custom position](Header_images/Header_img3.png) -## Customization of header font +## Customization of the header font -You can customize the header’s text by using the `FontFamily`, `FontStyle`, `FontSize`, and `Foreground` properties. +You can customize the header's text by using the `FontFamily`, `FontStyle`, `FontSize`, and `Foreground` properties. {% tabs %} @@ -345,9 +345,4 @@ You can customize the header’s text by using the `FontFamily`, `FontStyle`, `F {% endtabs %} -![CircularGauge Header with customization](Header_images/Header_img4.png) - - - - - +![CircularGauge Header with customization](Header_images/Header_img4.png) \ No newline at end of file diff --git a/wpf/Radial-Gauge/Labels.md b/wpf/Radial-Gauge/Labels.md index 453207efc8..0791b9dc3f 100644 --- a/wpf/Radial-Gauge/Labels.md +++ b/wpf/Radial-Gauge/Labels.md @@ -119,11 +119,11 @@ sfCircularGauge.Scales.Add(mainscale); ## Setting a position for labels - The `Labels` can be placed inside the scale, outside the scale, or custom position using the following two ways: +The `Labels` can be placed inside the scale, outside the scale, or at a custom position using the following two ways: -### Inside or Outside label Position +### Inside or outside label position -Placing the labels inside or outside the scale by selecting the [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelPosition) property is `Inside` or `Outside`. Please find the values available in `LabelPosition` property below. +Placing the labels inside or outside the scale by selecting the [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelPosition) property as `Inside` or `Outside`. Please find the values available in the `LabelPosition` property below. 1. Inside (Default) @@ -177,9 +177,9 @@ sfCircularGauge.Scales.Add(mainscale); ![Setting position for labels image](Labels_images/Setting_Position_for_labels.png) -### Setting custom position for labels +### Setting a custom position for labels -Positioning the labels far away from the ticks using the [`LabelOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelOffset) property. First, set the [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelPosition) to custom, and then position the label using the `LabelOffset` property. +Position the labels far away from the ticks using the [`LabelOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelOffset) property. First, set the [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelPosition) to custom, and then position the label using the `LabelOffset` property. {% tabs %} @@ -231,7 +231,7 @@ sfCircularGauge.Scales.Add(mainscale); ## Label rotation -Circular gauge labels can be rotated based on its corresponding angle. This can be controlled by [`CanRotateLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_CanRotateLabels) property in the scale. +Circular gauge labels can be rotated based on their corresponding angle. This can be controlled by the [`CanRotateLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_CanRotateLabels) property in the scale. Setting false to this property will display all the labels without rotation. @@ -289,27 +289,27 @@ Setting false to this property will display all the labels without rotation. ![Label rotation](Labels_images/RotateLabels.PNG) -## Setting a smart labels +## Setting smart labels The [`EnableSmartLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_EnableSmartLabels) property is a Boolean property that enables or disables the smart label feature of the circular gauge. -This property allow to change the `NumericScaleType` of the labels displayed in a gauge scale, and customize the labels by adding prefixes or suffixes to the scale labels. +This property allows you to change the `NumericScaleType` of the labels displayed in a gauge scale, and customize the labels by adding prefixes or suffixes to the scale labels. -The [`NumericScaleType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_NumericScaleType) property allows to set the type of label. The following types can be applied to labels: +The [`NumericScaleType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_NumericScaleType) property allows you to set the type of label. The following types can be applied to labels: -• Auto +* Auto -• Thousands +* Thousands -• Millions +* Millions -• Billions +* Billions -• Trillions +* Trillions -• Quadrillions +* Quadrillions -• Quintillions +* Quintillions {% tabs %} @@ -364,7 +364,7 @@ sfCircularGauge.Scales.Add(mainscale); ![Setting smart labels image](Labels_images/Setting_Smart_labels.png) -## Setting a number of fraction digits for labels +## Setting the number of fractional digits for labels The [`NoOfFractionalDigit`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_NoOfFractionalDigit) property is used to set the number of fractional digits to be displayed in the scale labels. @@ -412,15 +412,15 @@ sfCircularGauge.Scales.Add(mainscale); {% endtabs %} -![Fraction_Digits_fo_lables](Labels_images/Fraction_Digits_for_lables.png) +![Fraction digits for labels](Labels_images/Fraction_Digits_for_lables.png) ## Setting a postfix and prefix for labels You can postfix or prefix values to the scale labels using the [`LabelPostfix`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelPostfix) and [`LabelPrefix`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelPrefix) properties, respectively. -### Setting postfix value for labels +### Setting a postfix value for labels -The `LabelPostfix` property allows to postfix the values to the scale labels. +The `LabelPostfix` property allows you to postfix the values to the scale labels. {% tabs %} @@ -466,11 +466,11 @@ sfCircularGauge.Scales.Add(mainscale); {% endtabs %} -![Postfix for lables image](Labels_images/Postfix_for_lables.png) +![Postfix for labels image](Labels_images/Postfix_for_lables.png) -### Setting prefix value for labels +### Setting a prefix value for labels -The `LabelPrefix` property allows to prefix the values to the scale labels. +The `LabelPrefix` property allows you to prefix the values to the scale labels. {% tabs %} @@ -510,17 +510,19 @@ circularPointer.NeedlePointerVisibility = Visibility.Hidden; mainscale.Pointers.Add(circularPointer); +sfCircularGauge.Scales.Add(mainscale); + {% endhighlight %} {% endtabs %} -![Prefix for lables image](Labels_images/Prefix_for_lables.png) +![Prefix for labels image](Labels_images/Prefix_for_lables.png) -### Setting scale labels visibility +### Setting the scale labels visibility -The [`ShowLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_ShowLabels) property is a Boolean property, which is used to enable or disable the labels in circular gauge. +The [`ShowLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_ShowLabels) property is a Boolean property, which is used to enable or disable the labels in the circular gauge. -N> Default value of the ShowLabels property is true. +N> The default value of the `ShowLabels` property is true. {% tabs %} @@ -555,13 +557,13 @@ N> Default value of the ShowLabels property is true. ![WPF Circular Gauge Label Image](Labels_images/Show-labels.png) -### Edge label customization in scale +### Edge label customization in the scale You can customize the edge label by using the [`ShowFirstLabel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_ShowFirstLabel) and [`ShowLastLabel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_ShowLastLabel) properties, which are Boolean properties. -* `ShowFirstLabel` property is used to enable or disable the first label. Default value of the ShowFirstLabel property is true. +* The `ShowFirstLabel` property is used to enable or disable the first label. The default value of the `ShowFirstLabel` property is true. -* `ShowLastLabel` property is used to enable or disable the last label. Default value of the ShowLastLabel property is true. +* The `ShowLastLabel` property is used to enable or disable the last label. The default value of the `ShowLastLabel` property is true. {% tabs %} diff --git a/wpf/Radial-Gauge/Overview.md b/wpf/Radial-Gauge/Overview.md index 188f82427a..be948ad728 100644 --- a/wpf/Radial-Gauge/Overview.md +++ b/wpf/Radial-Gauge/Overview.md @@ -8,7 +8,7 @@ documentation: ug --- # WPF Radial Gauge (SfCircularGauge) Overview -The circular gauge helps to visualize numeric values on a circular scale. The appearance of the gauge is fully customized to integrate your applications without fault. +The circular gauge helps to visualize numeric values on a circular scale. The appearance of the gauge is fully customizable to integrate with your applications without fault. ## Key features @@ -24,7 +24,7 @@ The [`CircularGauge`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gaug * Header -The circular gauge control is highly customizable with variety of simple APIs to modify its basic look and feel. You can position the ranges, ticks, labels, and range pointers as needed. +The circular gauge control is highly customizable with a variety of simple APIs to modify its basic look and feel. You can position the ranges, ticks, labels, and range pointers as needed. ### Scales @@ -32,7 +32,7 @@ The [`Scales`](https://help.syncfusion.com/wpf/radial-gauge/scales) contain labe ### Ranges -The [`Ranges`](https://help.syncfusion.com/wpf/radial-gauge/ranges) are visual elements that depict the start and end values of inner divisions within the scale’s range. Each scale is capable of displaying one or more ranges, and each range can depict different zones or regions of same metrics, such as high, low, and average temperatures. +The [`Ranges`](https://help.syncfusion.com/wpf/radial-gauge/ranges) are visual elements that depict the start and end values of inner divisions within the scale's range. Each scale is capable of displaying one or more ranges, and each range can depict different zones or regions of the same metrics, such as high, low, and average temperatures. ### Pointers @@ -44,4 +44,10 @@ The [`Header`](https://help.syncfusion.com/wpf/radial-gauge/header) can be used ![Circular Gauge - Overview](Overview_images/Overview_img1.jpeg) +## See also + +[How to apply themes for SfCircularGauge](https://support.syncfusion.com/kb/article/2832/how-to-apply-themes-for-sfcirculargauge) + +[How to prepare car dashboard demo using SfCircularGauge](https://support.syncfusion.com/kb/article/2720/how-to-prepare-car-dashboard-demo-using-sfcirculargauge) + diff --git a/wpf/Radial-Gauge/Pointers.md b/wpf/Radial-Gauge/Pointers.md index 92e6dc26c5..15efa54d4b 100644 --- a/wpf/Radial-Gauge/Pointers.md +++ b/wpf/Radial-Gauge/Pointers.md @@ -9,13 +9,13 @@ documentation: ug # Pointers in WPF Radial Gauge (SfCircularGauge) -[`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Pointers) are used to indicate values on the scale. Pointer value can be modified using the [`Value`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_Value) property. +[`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Pointers) are used to indicate values on the scale. The pointer value can be modified using the [`Value`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_Value) property. -There are three types of [`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Pointers). You can choose a pointer using the [`PointerType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_PointerType) property. +There are three types of [`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Pointers). You can choose a pointer using the [`PointerType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_PointerType) property. ## Needle pointer -Indicate a current value by using the highly customizable needle-type element. A needle pointer contains three parts, a needle,knob and tail that can be placed on a gauge to mark values. +Indicate a current value by using the highly customizable needle-type element. A needle pointer contains three parts: a needle, a knob, and a tail that can be placed on a gauge to mark values. {% tabs %} @@ -61,7 +61,7 @@ sfCircularGauge.Scales.Add(mainscale); ![Pointers - Circular Gauge](Pointers_images/Pointers_img1.png) -### Different types of needle pointer +### Different types of needle pointer The appearance of the needle pointer can be customized using the [`NeedlePointerType`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_NeedlePointerType) property. The default value of this property is Rectangle. The `NeedlePointerType` is an `enum` property that includes the following options: @@ -123,7 +123,7 @@ sfCircularGauge.Scales.Add(mainscale); ### Needle pointer customization -The length of a needle is controlled using the [`NeedleLengthFactor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_NeedleLengthFactor) property. The minimum and maximum bounds of the `NeedleLengthFactor` property is 0 to 1. The needle’s UI is customized using the [`NeedlePointerStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_NeedlePointerStroke) and [`NeedlePointerStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_NeedlePointerStrokeThickness) properties. The size of the pointer cap can be modified by changing the [`PointerCapDiameter`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_PointerCapDiameter) property. +The length of a needle is controlled using the [`NeedleLengthFactor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_NeedleLengthFactor) property. The minimum and maximum bounds of the `NeedleLengthFactor` property are 0 to 1. The needle's UI is customized using the [`NeedlePointerStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_NeedlePointerStroke) and [`NeedlePointerStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_NeedlePointerStrokeThickness) properties. The size of the pointer cap can be modified by changing the [`PointerCapDiameter`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_PointerCapDiameter) property. {% tabs %} @@ -188,7 +188,7 @@ sfCircularGauge.Scales.Add(mainscale); ### Needle pointer knob customization -You can able to customize the needle pointer knob size, fill, stroke and stroke thickness by using [`KnobRadiusFactor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_KnobRadiusFactor), [`KnobFill`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_KnobFill), [`KnobStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_KnobStroke), [`KnobStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_KnobStrokeThickness) properties. +You can customize the needle pointer knob size, fill, stroke, and stroke thickness by using the [`KnobRadiusFactor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_KnobRadiusFactor), [`KnobFill`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_KnobFill), [`KnobStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_KnobStroke), and [`KnobStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_KnobStrokeThickness) properties. {% tabs %} @@ -241,7 +241,7 @@ You can able to customize the needle pointer knob size, fill, stroke and stroke ![Pointers - Circular Gauge](Pointers_images/Pointers_needlepointer_knobcustomization.png) -### Setting visibility of needle pointer +### Setting the visibility of the needle pointer The visibility of the needle pointer can be set using the [`NeedlePointerVisibility`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_NeedlePointerVisibility) property. @@ -288,17 +288,17 @@ sfCircularGauge.Scales.Add(mainscale); {% endtabs %} -### Setting tail for needle pointer +### Setting the tail for the needle pointer -Tail of the needle pointer can be customized by using the [`TailFill`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_TailFill), [`TailLengthFactor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_TailLengthFactor), [`TailStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_TailStroke), and [`TailStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_TailStrokeThickness) properties. +The tail of the needle pointer can be customized by using the [`TailFill`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_TailFill), [`TailLengthFactor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_TailLengthFactor), [`TailStroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_TailStroke), and [`TailStrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_TailStrokeThickness) properties. -* `TailFill` - Fill color to needle pointer’s tail. +* `TailFill` - Fill color for the needle pointer's tail. -* `TailLengthFactor` - Length factor of needle pointer’s tail. It’s range is 0 to 1. +* `TailLengthFactor` - Length factor of the needle pointer's tail. Its range is 0 to 1. -* `TailStroke` - Stroke to needle pointer’s tail. +* `TailStroke` - Stroke for the needle pointer's tail. -* `TailStrokeThickness` - Set the stroke thickness to needle pointer’s tail. +* `TailStrokeThickness` - Sets the stroke thickness for the needle pointer's tail. {% tabs %} @@ -478,7 +478,7 @@ sfCircularGauge.Scales.Add(mainscale); ![Pointers - Circular Gauge](Pointers_images/Pointers_img6.png) -### Setting visibility for range pointer +### Setting visibility for the range pointer The [`RangePointerVisibility`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_RangePointerVisibility) property is used to set the visibility of the range pointer. @@ -526,17 +526,17 @@ sfCircularGauge.Scales.Add(mainscale); ![Pointers - Circular Gauge](Pointers_images/Pointers_img7.png) -### Setting position for range pointer +### Setting the position for the range pointer -The `RangePointer` can be positioned anywhere in the gauge by the following ways: +The `RangePointer` can be positioned anywhere in the gauge in the following ways: -1. Setting direct `RangePointerPosition` property to place pointer inside or outside the gauge. -2. Setting `Offset` and `RangePointerStrokeThickness` properties. This positions is responsive for all the window size. But `RangePointer` width is fixed. -3. Setting `RangeStartOffset` and `RangeEndOffset` properties. This position and width are responsive to all size of the window. +1. Setting the direct `RangePointerPosition` property to place the pointer inside or outside the gauge. +2. Setting the `Offset` and `RangePointerStrokeThickness` properties. This position is responsive for all window sizes, but the `RangePointer` width is fixed. +3. Setting the `RangeStartOffset` and `RangeEndOffset` properties. This position and width are responsive to all window sizes. -#### Setting direct range pointer position +#### Setting the direct range pointer position -You can directly place the range pointer inside, outside or cross the scale by selecting one of the below option available in the [`RangePointerPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangePointerPosition) property. +You can directly place the range pointer inside, outside, or across the scale by selecting one of the below options available in the [`RangePointerPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangePointerPosition) property. 1. Inside (Default) @@ -597,9 +597,9 @@ sfCircularGauge.Scales.Add(mainscale); ![Pointers - Circular Gauge](Pointers_images/Pointers_img8.png) -#### Setting offset range pointer position with fixed width +#### Setting the offset range pointer position with fixed width -This ways allows to place the range pointer anywhere inside the gauge. First, set the [`RangePointerPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangePointerPosition) to custom, and then set the [`Offset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_Offset) property for required position. `Offset` value should be from 0 to 1. This positions is responsive for all the window size. But `RangePointer` width is fixed. +This way allows you to place the range pointer anywhere inside the gauge. First, set the [`RangePointerPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangePointerPosition) to custom, and then set the [`Offset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_Offset) property for the required position. The `Offset` value should be from 0 to 1. This position is responsive for all window sizes, but the `RangePointer` width is fixed. {% tabs %} @@ -649,9 +649,9 @@ sfCircularGauge.Scales.Add(mainscale); ![Pointers - Circular Gauge](Pointers_images/Pointers_img9.png) -#### Setting start and end position of the range pointer with offset +#### Setting the start and end position of the range pointer with offset -[`RangeStartOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_RangeStartOffset) and [`RangeEndOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_RangeEndOffset) properties with `RangePointerPosition` is custom allows to place the range pointer anywhere inside the gauge. First, set the `RangePointerPosition` to custom, and then set the `RangeStartOffset` and `RangeEndOffset` properties for required position. Offset value should be from 0 to 1. This position and width are responsive to all size of the window. +The [`RangeStartOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_RangeStartOffset) and [`RangeEndOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_RangeEndOffset) properties with `RangePointerPosition` set to custom allow you to place the range pointer anywhere inside the gauge. First, set the `RangePointerPosition` to custom, and then set the `RangeStartOffset` and `RangeEndOffset` properties for the required position. The offset value should be from 0 to 1. This position and width are responsive to all window sizes. {% tabs %} @@ -703,7 +703,7 @@ sfCircularGauge.Scales.Add(mainscale); ### Range pointer start customization -The [`RangeStart`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_RangeStart) property used to customize the range pointer start position in scale. +The [`RangeStart`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_RangeStart) property is used to customize the range pointer start position in the scale. {% tabs %} @@ -756,9 +756,9 @@ The [`RangeStart`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges. ![Pointers - Circular Gauge](Pointers_images/Pointers_rangepointer_custom_start.png) -### Setting range cap for range pointer +### Setting the range cap for the range pointer -The [`RangeCap`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_RangeCap) property provides options to position the range cap of the RangePointer, which contains the start, end, both, and none options. The `RangeCap` property is an enum property. +The [`RangeCap`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_RangeCap) property provides options to position the range cap of the range pointer, which contains the start, end, both, and none options. The `RangeCap` property is an enum property. {% tabs %} @@ -802,7 +802,7 @@ The [`RangeCap`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.Ci ## Symbol pointer -In symbol pointer, the value is pointed out using a symbol on the scale. The symbol is an enum property that provides symbol options for the symbol pointer, which contains several shapes such as rectangle, ellipse, and triangle. +In a symbol pointer, the value is pointed out using a symbol on the scale. The symbol is an enum property that provides symbol options for the symbol pointer, which contains several shapes such as rectangle, ellipse, and triangle. {% tabs %} @@ -852,7 +852,7 @@ sfCircularGauge.Scales.Add(mainscale); ### Symbol pointer types -You can modify the symbol pointer view by choosing available options in [`Symbol`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.Symbol.html) property. Please find the types of symbol below. +You can modify the symbol pointer view by choosing from the available options in the [`Symbol`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.Symbol.html) property. Please find the types of symbols below. 1. Arrow 2. Cross @@ -919,9 +919,9 @@ You can modify the symbol pointer view by choosing available options in [`Symbol ![Pointers - Circular Gauge](Pointers_images/Pointers_pentagon_symbolpointer.png) -### Setting custom symbol pointer +### Setting a custom symbol pointer -You can customize the `SymbolPointer` by setting [`Symbol`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_Symbol) as `Custom` and defining [`SymbolTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_SymbolPointerTemplate). Please find the custom template section below. +You can customize the `SymbolPointer` by setting the [`Symbol`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_Symbol) as `Custom` and defining the [`SymbolTemplate`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_SymbolPointerTemplate). Please find the custom template section below. {% highlight xml %} @@ -1038,9 +1038,9 @@ sfCircularGauge.Scales.Add(mainscale); ![Pointers - Circular Gauge](Pointers_images/Pointers_img11.png) -### Setting visibility of symbol pointer +### Setting the visibility of the symbol pointer -The visibility of the symbol pointer can be set using the [`SymbolPointerVisibility`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_SymbolPointerVisibility) Property. +The visibility of the symbol pointer can be set using the [`SymbolPointerVisibility`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_SymbolPointerVisibility) property. {% tabs %} @@ -1085,9 +1085,9 @@ sfCircularGauge.Scales.Add(mainscale); {% endtabs %} -### Setting offset for SymbolPointers +### Setting the offset for symbol pointers -The [`Offset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_Offset) property in the CircularPointer can be placed SymbolPointer in desired position of rim. +The [`Offset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_Offset) property in the CircularPointer can be used to place the symbol pointer at the desired position on the rim. {% tabs %} @@ -1198,8 +1198,6 @@ circularPointer2.SymbolPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, mainscale.Pointers.Add(circularPointer2); -mainscale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(mainscale); {% endhighlight %} @@ -1208,9 +1206,9 @@ sfCircularGauge.Scales.Add(mainscale); ![Pointers - Circular Gauge](Pointers_images/Pointers_img13.png) -## Setting animation for pointer +## Setting animation for the pointer -The [`EnableAnimation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_EnableAnimation) property is a Boolean property that enables or disables the animation of the [`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Pointers) in circular gauge and defining the corresponding animation speed with [`AnimationDuration`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_AnimationDuration) property. +The [`EnableAnimation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_EnableAnimation) property is a Boolean property that enables or disables the animation of the [`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Pointers) in the circular gauge and defines the corresponding animation speed using the [`AnimationDuration`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_AnimationDuration) property. {% tabs %} @@ -1281,8 +1279,6 @@ The [`EnableAnimation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Ga mainscale.Pointers.Add(circularPointer1); - mainscale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(mainscale); {% endhighlight %} @@ -1293,7 +1289,7 @@ The [`EnableAnimation`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Ga ## Circular pointer dragging -Symbol pointer and needle pointer can be dragged over the scale value by setting the [`EnableDragging`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_EnableDragging) property as true. [`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Pointers) can be moved to the respective position. +The symbol pointer and needle pointer can be dragged over the scale value by setting the [`EnableDragging`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_EnableDragging) property to true. The [`Pointers`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Pointers) can be moved to the respective position. {% tabs %} {% highlight xml %} @@ -1382,9 +1378,9 @@ Symbol pointer and needle pointer can be dragged over the scale value by setting ## Events -### Pointer position changed +### Pointer position changed -When the pointer position changes, this event is raised. Event arguments contain the following properties: +When the pointer position changes, this event is raised. The event arguments contain the following properties: [`PointerValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.PointerPosition.html#Syncfusion_UI_Xaml_Gauges_PointerPosition_PointerValue) - Denotes the pointer value. [`PointerValuePosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.PointerPosition.html#Syncfusion_UI_Xaml_Gauges_PointerPosition_PointerValuePosition) - Denotes the position of the pointer value. @@ -1437,7 +1433,7 @@ When the pointer position changes, this event is raised. Event arguments contain ### Value change started -Called when the user starts updating a new value of pointer by initiating the dragging. While dragging the pointer, other events ([`ValueChanging`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_ValueChanging), [`ValueChanged`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_ValueChanged) and [`ValueChangeCompleted`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_ValueChangeCompleted))) will be followed after this event. +Called when the user starts updating a new value of the pointer by initiating the dragging. While dragging the pointer, other events ([`ValueChanging`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_ValueChanging), [`ValueChanged`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_ValueChanged), and [`ValueChangeCompleted`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_ValueChangeCompleted)) will be followed after this event. The [`ValueChangeStarted`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_ValueChangeStarted) event contains the following arguments. @@ -1478,10 +1474,10 @@ The [`ValueChangeStarted`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml ### Value changing event -Called during a drag when the user is updating before a new value for the pointer by dragging. The [`ValueChangingEventArgs`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangingEventArgs.html) contains [`OldValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangingEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangingEventArgs_OldValue), [`NewValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangingEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangingEventArgs_NewValue), and [`Cancel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangingEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangingEventArgs_Cancel) properties. -[`OldValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangedEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangedEventArgs_Value): Contains pointer old value. -[`NewValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangedEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangedEventArgs_Value): Contains pointer new value. -[`Cancel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangedEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangedEventArgs_Value): To restrict the update of the current drag pointer value, set `ValueChangingArgs.Cancel` is true. +Called during a drag when the user is updating a new value for the pointer by dragging. The [`ValueChangingEventArgs`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangingEventArgs.html) contains [`OldValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangingEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangingEventArgs_OldValue), [`NewValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangingEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangingEventArgs_NewValue), and [`Cancel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangingEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangingEventArgs_Cancel) properties. +[`OldValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangedEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangedEventArgs_Value): Contains the pointer's old value. +[`NewValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangedEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangedEventArgs_Value): Contains the pointer's new value. +[`Cancel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangedEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangedEventArgs_Value): To restrict the update of the current drag pointer value, set `ValueChangingArgs.Cancel` to true. {% tabs %} {% highlight xaml %} @@ -1534,7 +1530,7 @@ Called during a drag when the user is updating before a new value for the pointe ### Value changed event -Called during a drag when the user is updating a new value for the pointer by dragging. The [`ValueChangedEventArgs`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangedEventArgs.html) contains [`Value`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangedEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangedEventArgs_Value) property. +Called during a drag when the user is updating a new value for the pointer by dragging. The [`ValueChangedEventArgs`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangedEventArgs.html) contains the [`Value`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangedEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangedEventArgs_Value) property. [`Value`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.ValueChangedEventArgs.html#Syncfusion_UI_Xaml_Gauges_ValueChangedEventArgs_Value) : Contains the drag pointer value. {% tabs %} @@ -1578,7 +1574,7 @@ Called during a drag when the user is updating a new value for the pointer by dr ### Value change completed -Called after a new value has been updated by terminating the dragging of the pointer. While dragging the pointer, other events (ValueChangeStarted, ValueChanging and ValueChanged) will be called prior to the [`ValueChangeCompleted`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_ValueChangeCompleted) event. +Called after a new value has been updated by terminating the dragging of the pointer. While dragging the pointer, other events (ValueChangeStarted, ValueChanging, and ValueChanged) will be called prior to the [`ValueChangeCompleted`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_ValueChangeCompleted) event. This event will notify the completion of dragging with a new value being updated. @@ -1622,8 +1618,10 @@ The [`ValueChangeCompleted`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xa ## See also -[How to create a WPF SfCircularGauge range pointer with rounded corner edge](https://www.syncfusion.com/kb/11958/how-to-create-a-wpf-circular-gauge-sfcirculargauge-range-pointer-with-rounded-corner-edge) +[How to create a WPF circular gauge (SfCircularGauge) range pointer with rounded corner edge](https://support.syncfusion.com/kb/article/10366/how-to-create-a-wpf-circular-gauge-sfcirculargauge-range-pointer-with-rounded-corner-edge) + +[How to customize a needle pointer knob in WPF radial gauge (SfCircularGauge)](https://support.syncfusion.com/kb/article/10438/how-to-customize-a-needle-pointer-knob-in-wpf-radial-gauge-sfcirculargauge) -[How to customize a needle pointer knob in WPF SfCircularGauge](https://www.syncfusion.com/kb/11929/how-to-customize-a-needle-pointer-knob-in-wpf-radial-gauge-sfcirculargauge) +[How to drag the (symbol & needle) pointers in the WPF circular gauge](https://support.syncfusion.com/kb/article/10540/how-to-drag-the-symbol--needle-pointers-in-the-wpf-circular-gauge) -[How to drag the (symbol & needle) pointers in the WPF SfCircularGauge](https://www.syncfusion.com/kb/11908/how-to-drag-the-symbol-needle-pointers-in-the-wpf-circular-gauge-sfcirculargauge) +[How to prepare car dashboard demo using SfCircularGauge](https://support.syncfusion.com/kb/article/2720/how-to-prepare-car-dashboard-demo-using-sfcirculargauge) diff --git a/wpf/Radial-Gauge/Ranges.md b/wpf/Radial-Gauge/Ranges.md index 19c488c5ab..60bb9cb827 100644 --- a/wpf/Radial-Gauge/Ranges.md +++ b/wpf/Radial-Gauge/Ranges.md @@ -11,7 +11,7 @@ documentation: ug Range is a visual element, which begins and ends at the specified values within a scale. -## Setting a start and end values for range +## Setting start and end values for a range The start and end values of ranges are set by using the [`StartValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_StartValue) and [`EndValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_EndValue) properties. @@ -75,7 +75,7 @@ The start and end values of ranges are set by using the [`StartValue`](https://h ## Range customization -A ranges appearance is customized by using the [`Stroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_Stroke), [`StrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_StrokeThickness), and [`Offset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_Offset) properties. First, set the `RangePosition` property to custom in scale, and then set the `Offset`. +A range's appearance is customized by using the [`Stroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_Stroke), [`StrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_StrokeThickness), and [`Offset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_Offset) properties. First, set the `RangePosition` property to custom in the scale, and then set the `Offset`. {% tabs %} @@ -130,7 +130,7 @@ A ranges appearance is customized by using the [`Stroke`](https://help.syncfusi ![Ranges - Circular Gauge](Ranges_images/Ranges_img2.png) -## Setting a width for range +## Setting a width for a range The circular range width is customized by setting the [`StartWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_StartWidth) and [`EndWidth`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_EndWidth) properties. @@ -209,9 +209,9 @@ The circular range width is customized by setting the [`StartWidth`](https://hel ![Ranges - Circular Gauge](Ranges_images/Ranges_img3.png) -## Binding range color to scale tick and labels +## Binding range color to scale ticks and labels -You can bind the ranges stroke to the tick lines and labels within its range by setting the [`BindRangeStrokeToLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_BindRangeStrokeToLabels) and [`BindRangeStrokeToTicks`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_BindRangeStrokeToTicks) properties to true. +You can bind the range's stroke to the tick lines and labels within its range by setting the [`BindRangeStrokeToLabels`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_BindRangeStrokeToLabels) and [`BindRangeStrokeToTicks`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_BindRangeStrokeToTicks) properties to true. {% tabs %} @@ -309,11 +309,11 @@ sfCircularGauge.Scales.Add(mainscale); ![Ranges - Circular Gauge](Ranges_images/Ranges_img4.png) -## Setting a position for range +## Setting a position for a range -The range can be placed inside the scale, outside the scale, or on the scale by using the following two ways: +The range can be placed inside the scale, outside the scale, or on the scale using the following two ways: -### By setting direct range position +### By setting a direct range position You can place the range by selecting one of the options available in the [`RangePosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangePosition) property. @@ -418,19 +418,19 @@ this.Content = sfCircularGauge; ![Ranges - Circular Gauge](Ranges_images/Ranges_img5.png) -### By setting range offset +### By setting the range offset -The range can be placed inside the scale, outside the scale, or on the scale by using the following two ways: +The range can be placed inside the scale, outside the scale, or on the scale using the following two ways: -1. Setting `Offset` and `StrokeThickness` properties. +1. Setting the `Offset` and `StrokeThickness` properties. -2. Setting `InnerStartOffset`, `InnerEndOffset`, `OuterStartOffset`, and `OuterEndOffset` properties. +2. Setting the `InnerStartOffset`, `InnerEndOffset`, `OuterStartOffset`, and `OuterEndOffset` properties. -N>For using this feature need to set the `RangePosition` as custom in the `Rim`. +N> To use this feature, you need to set the `RangePosition` as custom in the `Rim`. #### By setting Offset and StrokeThickness -For absolute position, you can use `Offset` and `StrokeThickness` properties of Range. For setting the `Offset` and `StrokeThickness` to the range. +For absolute position, you can use the `Offset` and `StrokeThickness` properties of the range. Set the `Offset` and `StrokeThickness` to the range. {% tabs %} @@ -480,7 +480,7 @@ For absolute position, you can use `Offset` and `StrokeThickness` properties of #### By setting InnerStartOffset, InnerEndOffset, OuterStartOffset, and OuterEndOffset -For relative position, you can use `InnerStartOffset`, `InnerEndOffset`, `OuterStartOffset`, and `OuterEndOffset` properties of Range. This positions is responsive for all the window size. +For relative position, you can use the `InnerStartOffset`, `InnerEndOffset`, `OuterStartOffset`, and `OuterEndOffset` properties of the range. This position is responsive for all window sizes. {% tabs %} @@ -533,7 +533,7 @@ For relative position, you can use `InnerStartOffset`, `InnerEndOffset`, `OuterS ![Inner,Outer Offset Image for Range](Ranges_images/Range-Inner-Outer-Offset.png) -## Setting a multiple ranges +## Setting multiple ranges In addition to the default range, you can add n number of ranges to a scale by using the [`Ranges`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Ranges) property. @@ -633,9 +633,9 @@ sfCircularGauge.Scales.Add(mainscale); ![Ranges - Circular Gauge](Ranges_images/Ranges_img7.png) -### Setting gradient color for range +### Setting a gradient color for a range -You can give color transition to range by specifying the different colors using the [`GradientStops`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_GradientStops) property of range. By using the `Value` and `Color` properties of `GradientStops`, you can adjust the color transition range for each color. +You can give a color transition to a range by specifying the different colors using the [`GradientStops`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_GradientStops) property of the range. By using the `Value` and `Color` properties of `GradientStops`, you can adjust the color transition range for each color. {% tabs %} @@ -726,3 +726,11 @@ You can give color transition to range by specifying the different colors using {% endtabs %} ![Ranges - GradientStops](Ranges_images/Gradient-image.png) + +## See also + +[How to apply gradient color for ranges in WPF circular gauge (SfCircularGauge)](https://support.syncfusion.com/kb/article/10343/how-to-apply-gradient-color-for-ranges-in-wpf-circular-gauge-sfcirculargauge) + +[How to create a WPF circular gauge (SfCircularGauge) range pointer with rounded corner edge](https://support.syncfusion.com/kb/article/10366/how-to-create-a-wpf-circular-gauge-sfcirculargauge-range-pointer-with-rounded-corner-edge) + +[How to prepare car dashboard demo using SfCircularGauge](https://support.syncfusion.com/kb/article/2720/how-to-prepare-car-dashboard-demo-using-sfcirculargauge) diff --git a/wpf/Radial-Gauge/Rim.md b/wpf/Radial-Gauge/Rim.md index 1f325e6711..36349db3ee 100644 --- a/wpf/Radial-Gauge/Rim.md +++ b/wpf/Radial-Gauge/Rim.md @@ -70,7 +70,7 @@ this.Content = sfCircularGauge; {% endtabs %} -![Rim startValue enadValue image](Rim_images/Rim_StartValue_EnadValue.png) +![Rim startValue endValue image](Rim_images/Rim_StartValue_EnadValue.png) ## Rim customization @@ -128,15 +128,15 @@ this.Content = sfCircularGauge; ![Rim customization image](Rim_images/Rim_customization.png) -## Setting a position for rim +## Setting a position for the rim -You can customize the position of [`Scales`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.CircularGauge.html#Syncfusion_Windows_Gauge_CircularGauge_Scales) in the following two ways: -1. [`RadiusFactor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RadiusFactor) property. -2. [`Radius`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Radius) property. +You can customize the position of the [`Scales`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.CircularGauge.html#Syncfusion_Windows_Gauge_CircularGauge_Scales) in the following two ways: +1. The [`RadiusFactor`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RadiusFactor) property. +2. The [`Radius`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Radius) property. -### Setting a radius factor for rim +### Setting a radius factor for the rim -The value for `RadiusFactor` should be specified in offset value. It value should be 0 to 1. `RadiusFactor` sets the scale responsive with the window. +The value for `RadiusFactor` should be specified as an offset value. The value should be from 0 to 1. `RadiusFactor` sets the scale responsive with the window. {% tabs %} @@ -188,9 +188,9 @@ this.Content = sfCircularGauge; ![Rim with RadiusFactor image](Rim_images/Rim_with_RadiusFactor.png) -### Setting a radius for rim +### Setting a radius for the rim -You can set the `Radius` of rim in pixel value. `Radius` sets the scale fixed with the given pixel value. +You can set the `Radius` of the rim in pixel value. `Radius` sets the scale fixed with the given pixel value. {% tabs %} @@ -242,9 +242,9 @@ this.Content = sfCircularGauge; ### Setting rim visibility -The [`ShowRim`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_ShowRim) property is a Boolean property, which is used to enable or disable the rim in circular gauge. +The [`ShowRim`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_ShowRim) property is a Boolean property, which is used to enable or disable the rim in the circular gauge. -N> Default value of the ShowRim property is true. +N> The default value of the `ShowRim` property is true. {% tabs %} @@ -279,7 +279,7 @@ N> Default value of the ShowRim property is true. ![Show rim support in WPF Circular Gauge](Rim_images/show-rim.png) -### Set offset value for a responsive size in rim +### Setting an offset value for a responsive size in the rim * [`RimStartOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RimStartOffset) - Sets the rim start offset position. Its range is from 0 to 1. * [`RimEndOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RimEndOffset) - Sets the rim end offset position. Its range is from 0 to 1. diff --git a/wpf/Radial-Gauge/Scales.md b/wpf/Radial-Gauge/Scales.md index 0cd3984868..334e70f3b1 100644 --- a/wpf/Radial-Gauge/Scales.md +++ b/wpf/Radial-Gauge/Scales.md @@ -13,8 +13,8 @@ Scales contain a collection of [`CircularScale`](https://help.syncfusion.com/cr/ ## Scale -The [`CircularScale`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.CircularScale.html) contains sub elements such as rim, ticks, labels, ranges, and pointers. They define the radius, start angle, sweep direction, sweep angle, overall minimum and maximum values, frequency of labels, and tick marks. A scale will have multiple ranges. -A range is a visual element, which begins and ends at the specified values within a [`CircularScale`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.CircularScale.html). A range will have one or more pointers to point out the values in a scale. +The [`CircularScale`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.CircularScale.html) contains sub elements such as rim, ticks, labels, ranges, and pointers. They define the radius, start angle, sweep direction, sweep angle, overall minimum and maximum values, frequency of labels, and tick marks. A scale can have multiple ranges. +A range is a visual element, which begins and ends at the specified values within a [`CircularScale`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.CircularScale.html). A range can have one or more pointers to point out the values in a scale. {% tabs %} @@ -46,7 +46,7 @@ A range is a visual element, which begins and ends at the specified values withi ![Circular Gauge Scale Image](Scales_images/Scales_img1.png) -## Setting start and end values for scale +## Setting start and end values for the scale The [`StartValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_StartValue) and [`EndValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_EndValue) properties allow you to set the start and end values for a scale. @@ -100,7 +100,7 @@ The [`StartValue`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges. ![Circular Scale With Start And End Value Image](Scales_images/Scales_img2.png) -## Setting start and sweep angles for scale +## Setting start and sweep angles for the scale The [`StartAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.CircularScale.html#Syncfusion_Windows_Gauge_CircularScale_StartAngle) and [`SweepAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_SweepAngle) properties allow you to set the start and end angles for a scale. @@ -154,9 +154,9 @@ The [`StartAngle`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.C ![Circular Scale With Start And Sweep Angle Image](Scales_images/Scales_img3.png) -## Setting interval for scale +## Setting the interval for the scale -The [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Interval) property allows you to set the interval for a scale. The default value of `Interval` is `Auto`, it defines the count of the scale labels based on `StartValue` and `EndValue` of scale. +The [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Interval) property allows you to set the interval for a scale. The default value of `Interval` is `Auto`, which defines the count of the scale labels based on the `StartValue` and `EndValue` of the scale. {% tabs %} @@ -210,11 +210,11 @@ The [`Interval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.Ci ![Circular Scale Interval Image](Scales_images/Scales_img4.png) -N> You can specify the interval value upto 5 decimal places while showing the labels of linear scale. +N> You can specify the interval value up to 5 decimal places while showing the labels of the linear scale. -## Setting sweep direction for scale +## Setting the sweep direction for the scale -The [`SweepDirection`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_SweepDirection) property allows you to render the gauge scale in either clockwise or counterclockwise direction. +The [`SweepDirection`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_SweepDirection) property allows you to render the gauge scale in either a clockwise or counterclockwise direction. {% tabs %} @@ -264,7 +264,7 @@ The [`SweepDirection`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gau ![Circular Scale Direction Image](Scales_images/Scales_img5.png) -## Setting multiple scales for circular gauge +## Setting multiple scales for the circular gauge You can add multiple scales to the same circular gauge and customize all the scales in a [`Scales`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Gauge.CircularGauge.html#Syncfusion_Windows_Gauge_CircularGauge_Scales) collection. The [`SpacingMargin`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_SpacingMargin) property determines the size of the circular gauge, which ranges from 0.1 to 1. diff --git a/wpf/Radial-Gauge/Ticks.md b/wpf/Radial-Gauge/Ticks.md index 53d1355ccc..339c59f3ac 100644 --- a/wpf/Radial-Gauge/Ticks.md +++ b/wpf/Radial-Gauge/Ticks.md @@ -9,15 +9,15 @@ documentation: ug # Ticks in WPF Radial Gauge (SfCircularGauge) -Ticks help you identify the gauge’s data value by marking the gauge scale in regular increments. +Ticks help you identify the gauge's data value by marking the gauge scale in regular increments. ## Tick customization -The Interval property is used to calculate the tick count for a scale. Similar major ticks, small ticks are calculated using the [`MinorTicksPerInterval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_MinorTicksPerInterval) property. +The `Interval` property is used to calculate the tick count for a scale. Similar to major ticks, small ticks are calculated using the [`MinorTicksPerInterval`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_MinorTicksPerInterval) property. -The length, stroke, and stroke thickness of a major ticks and minor ticks are set by using the [`Length`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_Length), [`Stroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_Stroke), and [`StrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_StrokeThickness) properties, respectively. +The length, stroke, and stroke thickness of major ticks and minor ticks are set by using the [`Length`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_Length), [`Stroke`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_Stroke), and [`StrokeThickness`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_StrokeThickness) properties, respectively. -### Customize major ticks for scale +### Customizing major ticks for the scale {% tabs %} @@ -66,7 +66,7 @@ The length, stroke, and stroke thickness of a major ticks and minor ticks are se ![Major Ticks image](Ticks_images/Major_Ticks.png) -### Customize minor ticks for scale +### Customizing minor ticks for the scale {% tabs %} @@ -107,9 +107,9 @@ The length, stroke, and stroke thickness of a major ticks and minor ticks are se ![Minor ticks image](Ticks_images/Minor_Ticks.png) -## Setting shape for tick +## Setting a shape for the tick -The [`TickShape`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickShape) is an enum property that provides an option to select shape of the circular mark ticks, which contains several shapes such as rectangle, ellipse, and triangle. +The [`TickShape`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickShape) is an enum property that provides an option to select the shape of the circular mark ticks, which contains several shapes such as rectangle, ellipse, and triangle. {% tabs %} @@ -162,17 +162,17 @@ The [`TickShape`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.C ![Triangle shapes ticks image](Ticks_images/Triangle_Shape_Ticks.png) -## Setting position for tick +## Setting the position for the tick -The major and minor ticks can be positioned far away from the rim using the following ways: +The major and minor ticks can be positioned far away from the rim in the following ways: -* Setting direct [`TickPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickPosition) property. This place the tick inside, outside or cross of the rim. +* Setting the direct [`TickPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickPosition) property. This places the tick inside, outside, or across the rim. -* Setting [`MajorTickSettings`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.MajorTickSetting.html) and [`MinorTickSettings`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.MinorTickSetting.html) [`Offset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_Offset) and [`Length`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_Length) properties. This tick positions is responsive for all the window size. But tick length is fixed. +* Setting the [`MajorTickSettings`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.MajorTickSetting.html) and [`MinorTickSettings`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.MinorTickSetting.html) [`Offset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_Offset) and [`Length`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_Length) properties. This tick position is responsive for all window sizes, but the tick length is fixed. -* Setting [`MajorTickSettings`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.MajorTickSetting.html) and [`MinorTickSettings`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.MinorTickSetting.html) [`StartOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_StartOffset), and [`EndOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_EndOffset) properties. This tick position and length are responsive to all size of the window. +* Setting the [`MajorTickSettings`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.MajorTickSetting.html) and [`MinorTickSettings`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.MinorTickSetting.html) [`StartOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_StartOffset), and [`EndOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_EndOffset) properties. This tick position and length are responsive to all window sizes. -### Setting direct tick position +### Setting the direct tick position Placing the ticks inside or outside the scale, or across the scale by selecting one of the options available in the [`TickPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickPosition) property. They are: @@ -233,9 +233,9 @@ Placing the ticks inside or outside the scale, or across the scale by selecting ![Outer position ticks image](Ticks_images/Outer_Position_Ticks.png) -### Setting scale tick Offset value +### Setting the scale tick offset value -For relative position you can use [`Offset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_Offset) and [`Length`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_Length) property. First, set the [`TickPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickPosition) property to custom, and then set the offset and length of the tick. +For relative position, you can use the [`Offset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_Offset) and [`Length`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_Length) properties. First, set the [`TickPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickPosition) property to custom, and then set the offset and length of the tick. {% tabs %} @@ -286,9 +286,9 @@ For relative position you can use [`Offset`](https://help.syncfusion.com/cr/wpf/ ![Tick Offset image](Ticks_images/Custom_Position_Ticks.png) -### Setting start and end Offset value for scale tick +### Setting start and end offset values for the scale tick -For absolute position you can use [`StartOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_StartOffset), [`EndOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_EndOffset) properties of `MajorTickSettings` and `MinorTickSettings`. First, set the [`TickPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickPosition) property to custom, and then set the `StartOffset` and `EndOffset` of the tick. +For absolute position, you can use the [`StartOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_StartOffset) and [`EndOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.TickSetting.html#Syncfusion_UI_Xaml_Gauges_TickSetting_EndOffset) properties of `MajorTickSettings` and `MinorTickSettings`. First, set the [`TickPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickPosition) property to custom, and then set the `StartOffset` and `EndOffset` of the tick. {% tabs %} @@ -345,11 +345,11 @@ For absolute position you can use [`StartOffset`](https://help.syncfusion.com/cr ![Tick StartOffset EndOffset image](Ticks_images/Tick_Start_End_Offset.png) -### Setting ticks visibility in scale +### Setting ticks visibility in the scale -The [`ShowTicks`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_ShowTicks) property allows you to enable or disable the ticks of circular gauge. +The [`ShowTicks`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_ShowTicks) property allows you to enable or disable the ticks of the circular gauge. -N> Default value of the ShowTicks property is true. +N> The default value of the `ShowTicks` property is true. {% tabs %} @@ -383,4 +383,4 @@ N> Default value of the ShowTicks property is true. {% endtabs %} -![Show tick support in Xamarin.Forms Circular Gauge](Ticks_images/Show-ticks.png) +![Show tick support in WPF Circular Gauge](Ticks_images/Show-ticks.png) diff --git a/wpf/Range-Selector/Getting-Started.md b/wpf/Range-Selector/Getting-Started.md index a8b0a172be..1899ed9b7d 100644 --- a/wpf/Range-Selector/Getting-Started.md +++ b/wpf/Range-Selector/Getting-Started.md @@ -11,10 +11,10 @@ documentation: ug ## Visual structure -The date-time range navigator control is composed of various elements such as higher level bar, lower Level bar, content, and resizable scroll bar. +The date-time range navigator control is composed of various elements such as higher level bar, lower level bar, content, and resizable scroll bar. * Higher level bar: Contains timespan format that is one level higher than date-time values of lower level bar, e.g. the higher level bar contains year format (yyyy) and the lower level bar contains month format (MMM). -* Lower level bar: Contains timespan format that is one lever lower than date-time values of higher level bar, e.g. the lower level bar contains month format (MMM) and the higher level bar contains year format (yyyy). +* Lower level bar: Contains timespan format that is one level lower than date-time values of higher level bar, e.g. the lower level bar contains month format (MMM) and the higher level bar contains year format (yyyy). * Content: Holds any type of UI element inside the navigator. * Resizable scroll bar: Allows users to zoom and scroll the content and label bars. @@ -60,7 +60,7 @@ SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator(); ### Set ItemsSource for SfDateTimeRangeNavigator -Since the above steps are enough to create only empty date-time range navigator, you need to set the [`ItemsSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_ItemsSource) and [`XBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_XBindingPath) for the SfDateTimeRangeNavigator. The ItemsSource must implement the IEnumerable interface. +Since the above steps create only an empty date-time range navigator, you need to set the [`ItemsSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_ItemsSource) and [`XBindingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_XBindingPath) for the SfDateTimeRangeNavigator. The ItemsSource must implement the IEnumerable interface. {% tabs %} @@ -91,7 +91,7 @@ SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator Add content that needs to be displayed inside the date-time range navigator. -### Property +### Properties @@ -184,7 +184,7 @@ This section explains how to create an application using the date-time range nav 1. Open the Add Reference window in your project. 2. Choose Windows > Extensions > Syncfusion.SfChart.WPF. -3. Add the following namespace in your C# file: MainPage.xaml.cs. +3. Add the following namespace in your C# file: MainWindow.xaml.cs. {% capture codesnippet2 %} {% highlight c# %} @@ -199,7 +199,7 @@ using Syncfusion.UI.Xaml.Charts; {% highlight c# %} -SfDateTimeRangNavigator rangenavigator = new SfDateTimeRangNavigator (); +SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator(); {% endhighlight %} @@ -207,7 +207,7 @@ SfDateTimeRangNavigator rangenavigator = new SfDateTimeRangNavigator (); {% highlight c# %} -public class ItemsSource +public class UserDetail { public DateTime Date { get; set; } public double NoOfUsers { get; set; } @@ -215,20 +215,20 @@ public class ItemsSource public class UsersViewModel { - public ObservableCollection UsersList { get; set; } + public ObservableCollection UsersList { get; set; } public UsersViewModel() { - this.UsersList = new ObservableCollection(); + this.UsersList = new ObservableCollection(); DateTime date = DateTime.Today; - UsersList.Add(new ItemsSource { Date = date.AddHours(1), NoOfUsers = 3000 }); - UsersList.Add(new ItemsSource { Date = date.AddHours(2), NoOfUsers = 5000 }); - UsersList.Add(new ItemsSource { Date = date.AddHours(3), NoOfUsers = 2000 }); - UsersList.Add(new ItemsSource { Date = date.AddHours(4), NoOfUsers = 7000 }); - UsersList.Add(new ItemsSource { Date = date.AddHours(5), NoOfUsers = 6000 }); - UsersList.Add(new ItemsSource { Date = date.AddHours(6), NoOfUsers = 3000 }); + UsersList.Add(new UserDetail { Date = date.AddHours(1), NoOfUsers = 3000 }); + UsersList.Add(new UserDetail { Date = date.AddHours(2), NoOfUsers = 5000 }); + UsersList.Add(new UserDetail { Date = date.AddHours(3), NoOfUsers = 2000 }); + UsersList.Add(new UserDetail { Date = date.AddHours(4), NoOfUsers = 7000 }); + UsersList.Add(new UserDetail { Date = date.AddHours(5), NoOfUsers = 6000 }); + UsersList.Add(new UserDetail { Date = date.AddHours(6), NoOfUsers = 3000 }); } } @@ -242,10 +242,10 @@ N> You can set any IEnumerable collection as ItemsSource. {% highlight c# %} -//Intialize the SfDateTimeRangNavigator. +// Initialize the SfDateTimeRangeNavigator. SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator { - ItemsSource = UsersList, + ItemsSource = new UsersViewModel().UsersList, XBindingPath = "Date" }; @@ -261,9 +261,11 @@ Add the content that needs to be displayed inside the date-time range navigator // Initialize the SfChart SfChart chart = new SfChart(); +var userList = new UsersViewModel().UsersList; + LineSeries series = new LineSeries { - ItemsSource = UsersList, + ItemsSource = userList, XBindingPath = "Date", YBindingPath = "NoOfUsers" }; diff --git a/wpf/Range-Selector/Interactivity.md b/wpf/Range-Selector/Interactivity.md index 2f4ec9107e..c788821cb9 100644 --- a/wpf/Range-Selector/Interactivity.md +++ b/wpf/Range-Selector/Interactivity.md @@ -9,7 +9,7 @@ documentation: ug # Interactivity in WPF Range Selector (SfDateTimeRangeNavigator) -The date-time range navigator control provides interactive features such as zooming and panning. This control has a resizable scrollbar, which is used to zoom in large amount of data and navigate to particular timespan by moving the scroll bar. +The date-time range navigator control provides interactive features such as zooming and panning. This control has a resizable scrollbar, which is used to zoom into a large amount of data and navigate to a particular timespan by moving the scroll bar. The ZoomPosition and ZoomFactor properties of the chart axis can be bound with the SfDateTimeRangeNavigator. @@ -73,18 +73,18 @@ Description +ValueChanged(Object sender, EventArgs e) +This event is triggered when the lower bar labels are created.

+This event is triggered when the upper bar labels are created.

{{'[`ValueChanged`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfRangeNavigator_ValueChanged)'| markdownify }} -ValueChanged (Object sender, EventArgs e) -This event is triggered when the position of the scrollbar is changed
+This event is triggered when the position of the scrollbar is changed.
{{'[`LowerBarLabelsCreated`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_LowerBarLabelsCreated)'| markdownify }}

 LowerBarLabelsCreated(Object sender, LowerBarLabelsCreatedEventArgs e)

 -This event is triggered when the lower bar labels gets created.

{{'[`HigherBarLabelsCreated`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_HigherBarLabelsCreated)'| markdownify }}

 HigherBarLabelsCreated(Object sender, HigherBarLabelsCreatedEventArgs e)

 -This event is triggered when the upper bar labels gets created.

{% tabs %} @@ -200,7 +200,7 @@ SfDateTimeRangeNavigator [LeftThumbStyle](https://help.syncfusion.com/cr/wpf/Syn ### SymbolTemplate -[SymbolTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ThumbStyle.html#Syncfusion_UI_Xaml_Charts_ThumbStyle_SymbolTemplate) can be used for gets or sets the data template for the symbol. +[SymbolTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ThumbStyle.html#Syncfusion_UI_Xaml_Charts_ThumbStyle_SymbolTemplate) gets or sets the data template for the symbol. {% tabs %} @@ -258,7 +258,7 @@ The following screenshot illustrates the control after customizing the right thu ### LineStyle -[`LineStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ThumbStyle.html#Syncfusion_UI_Xaml_Charts_ThumbStyle_LineStyle) can be used for gets or sets the style for the thumb line. +[`LineStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ThumbStyle.html#Syncfusion_UI_Xaml_Charts_ThumbStyle_LineStyle) gets or sets the style for the thumb line. {% tabs %} @@ -296,18 +296,18 @@ The following screenshot illustrates the control after customizing the right thu ThumbStyle thumbLineStyle1 = new ThumbStyle() { - LineStyle = grid.Resources["lineStyle1"] as DataTemplate + LineStyle = grid.Resources["lineStyle1"] as Style }; ThumbStyle thumbLineStyle2 = new ThumbStyle() { - LineStyle = grid.Resources["lineStyle2"] as DataTemplate + LineStyle = grid.Resources["lineStyle2"] as Style }; SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator() { - LineStyle = thumbLineStyle1, - LineStyle = thumbLineStyle2 + LeftThumbStyle = thumbLineStyle1, + RightThumbStyle = thumbLineStyle2 }; {% endhighlight %} diff --git a/wpf/Range-Selector/Label-Customization.md b/wpf/Range-Selector/Label-Customization.md index 6359bd2499..3272a3d24b 100644 --- a/wpf/Range-Selector/Label-Customization.md +++ b/wpf/Range-Selector/Label-Customization.md @@ -167,7 +167,7 @@ Description
{{'[`LabelBarStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LabelBarStyle.html)'| markdownify }} -Allows to customize the label style using the LabelBarStyle property, and this property can be applied to the {{'[`HigherLevelBarStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_HigherLevelBarStyle)'| markdownify }} or {{'[`LowerLevelBarStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_LowerLevelBarStyle)'| markdownify }}.
{{'[`SelectedLabelStyle`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.LabelBarStyle.html#Syncfusion_UI_Xaml_Charts_LabelBarStyle_SelectedLabelStyle)'| markdownify }} @@ -221,11 +221,11 @@ The following screenshot illustrates setting the Label HorizontalAlignment to le ![Label customization in WPF SfDateTimeRangeNavigator](Label-Customization_images/Label-Customization_img2.png) -### Visibility of label bar - -SfDateTimeRangeNavigator provides support to customize the visibility of lower bar and upper bar using the `LowerLabelBarVisibility` and `UpperLabelBarVisibility` types. +### Visibility of label bar -## RangePadding Customization +SfDateTimeRangeNavigator provides support to customize the visibility of the lower bar and upper bar using the `LowerLabelBarVisibility` and `UpperLabelBarVisibility` properties. + +## RangePadding customization The date-time range navigator supports the following types of padding. @@ -261,7 +261,7 @@ SfDateTimeRangeNavigator rangeNavigator = new SfDateTimeRangeNavigator ### Round -When the value of [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_RangePadding) property is Round, range will be rounded to the nearest possible value by the interval. +When the value of the [`RangePadding`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfDateTimeRangeNavigator.html#Syncfusion_UI_Xaml_Charts_SfDateTimeRangeNavigator_RangePadding) property is `Round`, the range will be rounded to the nearest possible value by the interval. {% tabs %} diff --git a/wpf/Range-Selector/Overview.md b/wpf/Range-Selector/Overview.md index 71096a8cd6..7f81c20599 100644 --- a/wpf/Range-Selector/Overview.md +++ b/wpf/Range-Selector/Overview.md @@ -9,11 +9,11 @@ documentation: ug # WPF Range Selector (SfDateTimeRangeNavigator) Overview -The date-time range navigator control is a time bound data visualization control. Its purpose is to allow scrolling and navigation through large periods of time. This control can be easily combined with other controls such as chart and grid view to create rich and powerful dashboards. +The date-time range navigator control is a time-bound data visualization control. Its purpose is to allow scrolling and navigation through large periods of time. This control can be easily combined with other controls such as chart and grid view to create rich and powerful dashboards. ## Key features * Supports interactive features such as zooming and scrolling through large data. * Calculates smart labels when zooming. -* Allows users to select a particular region in large period of time. +* Allows users to select a particular region in a large period of time. * Gets the data from a selected region. \ No newline at end of file diff --git a/wpf/TreeGrid/Column-Type.md b/wpf/TreeGrid/Column-Type.md index adfb0c1071..81919845a4 100644 --- a/wpf/TreeGrid/Column-Type.md +++ b/wpf/TreeGrid/Column-Type.md @@ -218,7 +218,7 @@ In the below code snippet, `TreeGridCurrencyColumn` is loaded with `ProgressBar` ![WPF TreeGrid Column with ProgressBar](ColumnTypes_images/wpf-treegrid-with-progressbar.png) -`CellTemplate` is not support by [TreeGridHyperlinkColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridHyperlinkColumn.html) and[TreeGridCheckBoxColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridCheckBoxColumn.html) columns. +`CellTemplate` is not support by [TreeGridHyperlinkColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridHyperlinkColumn.html) and [TreeGridCheckBoxColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridCheckBoxColumn.html) columns. #### Reusing same DataTemplate for multiple columns @@ -264,7 +264,7 @@ You can use the same [DataTemplate](https://docs.microsoft.com/en-us/uwp/api/Win #### Setting CellTemplate based on custom logic using TemplateSelector -`TreeGridColumn` provides support to choose different[DataTemplate](https://docs.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.DataTemplate?redirectedfrom=MSDN&view=winrt-20348) based on underlying data object using [TreeGridColumn.CellTemplateSelector](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_CellTemplateSelector) property. +`TreeGridColumn` provides support to choose different [DataTemplate](https://docs.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.DataTemplate?redirectedfrom=MSDN&view=winrt-20348) based on underlying data object using [TreeGridColumn.CellTemplateSelector](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_CellTemplateSelector) property. For example, two different templates loaded alternatively in `Salary` column. @@ -492,7 +492,7 @@ You can apply format for the column using [StringFormat](https://docs.microsoft. {% endhighlight %} {% endtabs %} -When column is auto-generated, you can set the 'StringFormat' by handling 'AutoGeneratingColumn' event. +When column is auto-generated, you can set the `StringFormat` by handling `AutoGeneratingColumn` event. {% tabs %} {% highlight c# %} @@ -561,7 +561,7 @@ public class CurrencyFormatConverter : IValueConverter {% endhighlight %} {% endtabs %} -When column is auto-generated, you can set the `Converter` by handling [AutoGeneratingColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html) event +When column is auto-generated, you can set the `Converter` by handling [AutoGeneratingColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_AutoGeneratingColumn) event {% tabs %} {% highlight c# %} @@ -784,7 +784,7 @@ TreeGridColumn allows you to change the alignment of `TreeGridCell` and `TreeGri * Text decorations - You can [decorate](https://docs.microsoft.com/en-us/dotnet/api/system.windows.textdecorations?redirectedfrom=MSDN&view=net-5.0) column? data using [TextDecorations](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridTextColumnBase.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridTextColumnBase_TextDecorations) property. -* Text trimming - You can [trim]() the column? data using [TextTrimming](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridTextColumnBase.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridTextColumnBase_TextTrimming) property. +* Text trimming - You can [trim](https://learn.microsoft.com/en-us/dotnet/api/system.windows.texttrimming?view=windowsdesktop-7.0&viewFallbackFrom=net-5.0) the column? data using [TextTrimming](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridTextColumnBase.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridTextColumnBase_TextTrimming) property. * Text wrapping - You can [wrap](https://docs.microsoft.com/en-us/dotnet/api/system.windows.textwrapping?redirectedfrom=MSDN&view=net-5.0) the column? data using [TextWrapping](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridTextColumnBase.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridTextColumnBase_TextWrapping) property. diff --git a/wpf/TreeGrid/Columns.md b/wpf/TreeGrid/Columns.md index 02d030c05d..7fcde62d4b 100644 --- a/wpf/TreeGrid/Columns.md +++ b/wpf/TreeGrid/Columns.md @@ -577,7 +577,7 @@ this.treeGrid.Columns.Clear(); {% endhighlight %} {% endtabs %} -You can remove a column using Remove and RemoveAt methods. +You can remove a column using the `Remove` and `RemoveAt` methods. {% tabs %} {% highlight c# %} diff --git a/wpf/TreeGrid/Data-Binding.md b/wpf/TreeGrid/Data-Binding.md index 607db9033f..8b3334246f 100644 --- a/wpf/TreeGrid/Data-Binding.md +++ b/wpf/TreeGrid/Data-Binding.md @@ -1,7 +1,7 @@ ---- +--- layout: post title: Data Binding in WPF TreeGrid control | Syncfusion® -description: Learn here all about Data Binding support in Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements and more. +description: Learn here all about Data Binding support in the Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements, and more. platform: wpf control: SfTreeGrid documentation: ug @@ -76,7 +76,7 @@ this.treeGrid.Columns.Add(new TreeGridTextColumn() {MappingName="Marks[0]"}); {% endhighlight %} {% endtabs %} -**Limitations when binding complex property:** +**Limitations when binding indexer property:** SfTreeGrid doesn’t support [LiveNodeUpdateMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_LiveNodeUpdateMode) - `AllowDataShaping`. @@ -111,7 +111,7 @@ None defines the node is not expanded when loading. By default, root nodes only
-RootNodeExpanded +RootNodesExpanded Root nodes only will be expanded at the time of loading. @@ -239,7 +239,7 @@ treeGrid.ExpandNode(node); {% endhighlight %} {% endtabs %} -### Expand all the nodes +### Expand the specific node and all its child nodes You can expand the specific node and all its child nodes by using [SfTreeGrid.ExpandAllNodes](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ExpandAllNodes_Syncfusion_UI_Xaml_TreeGrid_TreeNode_) methods. @@ -569,4 +569,4 @@ treeGrid.View.EndInit(); N> View has properties (`EnableRecursiveChecking`, `LiveNodeUpdateMode` , `RecursiveCheckingMode`,..)that already defined in SfTreeGrid. It is recommended to set those properties via SfTreeGrid. -N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the treegrid. \ No newline at end of file +N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the TreeGrid. \ No newline at end of file diff --git a/wpf/TreeGrid/Editing.md b/wpf/TreeGrid/Editing.md index 3d783fc429..97a1975c0a 100644 --- a/wpf/TreeGrid/Editing.md +++ b/wpf/TreeGrid/Editing.md @@ -1,7 +1,7 @@ ---- +--- layout: post title: Editing in WPF TreeGrid control | Syncfusion® -description: Learn here all about Editing support in Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements and more. +description: Learn here all about Editing support in the Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements, and more. platform: wpf control: SfTreeGrid documentation: ug @@ -27,7 +27,7 @@ SfTreeGrid provides support for editing and it can be enabled or disabled by set {% endhighlight %} {% endtabs %} -You can enable or disable editing for particular column by setting [TreeGridColumn.AllowEditing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_AllowEditing) property. +You can enable or disable editing for a particular column by setting the [TreeGridColumn.AllowEditing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridColumnBase.html#Syncfusion_UI_Xaml_Grid_GridColumnBase_AllowEditing) property. {% tabs %} {% highlight xaml %} @@ -48,7 +48,7 @@ N> `TreeGridColumn.AllowEditing` takes higher priority than `SfTreeGrid.AllowEdi ![Editing in WPF TreeGrid](Editing_images/wpf-treegrid-editing.png) -N> It is mandatory to set the NavigationMode to Cell to enable CurrentCell navigation and editing. +N> It is mandatory to set the `NavigationMode` to `Cell` to enable `CurrentCell` navigation and editing. ## Entering into edit mode @@ -77,9 +77,9 @@ this.treeGrid.EditTrigger = EditTrigger.OnTap; When the cell enters into edit mode, cursor is placed based on [SfTreeGrid.EditorSelectionBehavior](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_EditorSelectionBehavior) property. -SelectAll ֠selects the text of edit element loaded inside cell. +`SelectAll` — selects the text of the edit element loaded inside the cell. -MoveLast ֠places the cursor at the last of edit element loaded inside cell. +`MoveLast` — places the cursor at the last position of the edit element loaded inside the cell. {% tabs %} {% highlight xaml %} @@ -103,7 +103,7 @@ this.treeGrid.EditorSelectionBehavior = EditorSelectionBehavior.SelectAll; ## Support for IEditableObject -SfTreeGrid supports to commit and roll back the changes in row level when underlying data object implements [IEditableObject](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.ieditableobject?redirectedfrom=MSDN&view=net-5.0) interface. +`SfTreeGrid` supports committing and rolling back the changes in row level when underlying data object implements the [IEditableObject](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.ieditableobject?redirectedfrom=MSDN&view=net-5.0) interface. The editing changes in a row will be committed only when user move to next row or pressing enter key in [EndEdit](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.ieditableobject.endedit?redirectedfrom=MSDN&view=net-5.0#System_ComponentModel_IEditableObject_EndEdit). Also when user press Esc key, then the changes made in a row will be reverted in [CancelEdit](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.ieditableobject.canceledit?redirectedfrom=MSDN&view=net-5.0#System_ComponentModel_IEditableObject_CancelEdit). @@ -569,4 +569,4 @@ You can allow `UIElement` loaded inside template to handle mouse interaction in {% endtabs %} -N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the treegrid. \ No newline at end of file +N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the TreeGrid. \ No newline at end of file diff --git a/wpf/TreeGrid/Filtering.md b/wpf/TreeGrid/Filtering.md index b20d9d6504..ad46e7a0a1 100644 --- a/wpf/TreeGrid/Filtering.md +++ b/wpf/TreeGrid/Filtering.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Filtering in WPF TreeGrid control | Syncfusion® description: Learn here all about Filtering support in Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements and more. @@ -27,7 +27,7 @@ treeGrid.FilterLevel = FilterLevel.All; * All - Filter will be applied to all the nodes in SfTreeGrid. -* Extended - Filter will be applied to all nodes. However, child nodes are filtered only when their parent node is either in an expanded state or matches the filter condition. If a node matches the filter condition, all of its ancestor nodes will be displayed, even if those ancestors do not match the filter condition. +* Extended - Filtering is applied based on the node hierarchy. Child nodes are included in filtering only when their parent node is expanded. If a node matches the filter condition, all of its ancestor nodes are displayed to preserve the hierarchy, even if those ancestor nodes do not match the filter condition. **Root** @@ -39,7 +39,7 @@ Filter will be applied to all the nodes in SfTreeGrid. If a parent node does not **Extended** -Filter will be applied to all nodes. However, child nodes are filtered only when their parent node is either in an expanded state or matches the filter condition. If a node matches the filter condition, all of its ancestor nodes will be displayed, even if those ancestors do not match the filter condition, and ancestor node’s `IsFiltered` value will be set to false. +Filtering is applied based on the node hierarchy. Child nodes are included in filtering only when their parent node is expanded. If a node matches the filter condition, all of its ancestor nodes are displayed to preserve the hierarchy, even if those ancestor nodes do not match the filter condition. In such cases, the ancestor node's `IsFiltered` property is set to `false`. N> You can change the `FilterLevel` at run time. @@ -58,7 +58,7 @@ View filtering can be achieved by setting the [SfTreeGrid.View.Filter](https://h {% tabs %} {% highlight c# %} -public bool FilerNodes(object o) +public bool FilterNodes(object o) { var data = o as Employee; @@ -69,7 +69,7 @@ public bool FilerNodes(object o) private void Button_Click(object sender, RoutedEventArgs e) { - treeGrid.View.Filter = FilerNodes; + treeGrid.View.Filter = FilterNodes; treeGrid.View.RefreshFilter(); } @@ -334,7 +334,7 @@ When the DateTime type value is bound to the {{'[TreeGridColumn](https://help.sy
-Displays Text Filter in WPF TreeGrid/> +<img src= Displays Number Filter in WPF TreeGrid @@ -722,4 +722,4 @@ The filter icon style can be changed by writing style with TargetType as [Filter ![Customizing Filter Icon in WPF TreeGrid](Filtering_images/wpf-treegrid-filter-icon.png) -N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the treegrid. \ No newline at end of file +N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the TreeGrid. \ No newline at end of file diff --git a/wpf/TreeGrid/GridLines.md b/wpf/TreeGrid/GridLines.md index 4a01481969..f3b3988b48 100644 --- a/wpf/TreeGrid/GridLines.md +++ b/wpf/TreeGrid/GridLines.md @@ -143,7 +143,7 @@ this.sfTreeGrid.HeaderLinesVisibility = GridLinesVisibility.Horizontal; ## Limitations -* Grid lines customization are not supported for RowHeader. +* Grid lines customization is not supported for RowHeader. N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the treegrid. \ No newline at end of file diff --git a/wpf/TreeGrid/MergeCell.md b/wpf/TreeGrid/MergeCell.md index 305a73db58..907452c255 100644 --- a/wpf/TreeGrid/MergeCell.md +++ b/wpf/TreeGrid/MergeCell.md @@ -1,7 +1,7 @@ ---- +--- layout: post title: Merge Cells in WPF TreeGrid control | Syncfusion® -description: Learn here all about Merge Cells support in Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements and more. +description: Learn here all about Merge Cells support in the Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements, and more. platform: wpf control: SfTreeGrid documentation: ug @@ -11,9 +11,9 @@ documentation: ug SfTreeGrid allows you to merge a range of adjacent cells in a row across columns using the [QueryCoveredRange](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html) event. -The `QueryCoveredRange` event occurs when each cell is arranged. When scrolling, the merged range will be added for newly added columns through this event and will also be removed for the columns that are out of view. +The `QueryCoveredRange` event occurs when each cell is arranged. While scrolling, the merged range will be added for newly added columns through this event and will also be removed for the columns that are out of view. -[TreeGridQueryCoveredRangeEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridQueryCoveredRangeEventArgs.html) of the `QueryCoveredRange` event provides information about the cell triggered in this event. GridQueryCoveredRangeEventArgs.OriginalSender returns the TreeGrid fired in this event using the TreeGridQueryCoveredRangeEventArgs.Range property. The adjacent cells can be merged. +[TreeGridQueryCoveredRangeEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridQueryCoveredRangeEventArgs.html) of the `QueryCoveredRange` event provides information about the cell that triggered the event. `GridQueryCoveredRangeEventArgs.OriginalSender` returns the TreeGrid that fired this event, and you can access the cell range through the `TreeGridQueryCoveredRangeEventArgs.Range` property. The adjacent cells can be merged. {% tabs %} {% highlight xaml %} @@ -41,7 +41,7 @@ void TreeGrid_QueryCoveredRange(object sender, TreeGridQueryCoveredRangeEventArg ## Column wise merging cells by fixed range -You can merge the columns by setting the range using the Left and Right properties of `TreeGridCoveredCellInfo`. +You can merge the columns by setting the range using the `Left` and `Right` properties of `TreeGridCoveredCellInfo`. {% tabs %} {% highlight c# %} @@ -64,9 +64,9 @@ void treeGrid_QueryCoveredRange(object sender, Syncfusion.UI.Xaml.TreeGrid.TreeG ![WPF TreeGrid with Merged Cells](MergeCells_images/wpf-treegrid-merge-cells.png) -## Merge all cells in an entire parent node +## Merge all cells in a parent node -You can merge the entire column parent node using `TreeGridCoveredCellInfo`. +You can merge all the cells in an entire parent node using `TreeGridCoveredCellInfo`. {% tabs %} {% highlight xaml %} @@ -173,4 +173,4 @@ class RequestTreeItemsBehavior : Behavior Refer to [Sample](https://github.com/SyncfusionExamples/how-to-merge-cells-in-a-row-in-wpf-treegrid). -N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the treegrid. \ No newline at end of file +N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the TreeGrid. \ No newline at end of file diff --git a/wpf/TreeGrid/Paging.md b/wpf/TreeGrid/Paging.md index ca8b06c529..12aeca6ff7 100644 --- a/wpf/TreeGrid/Paging.md +++ b/wpf/TreeGrid/Paging.md @@ -19,7 +19,7 @@ Follow the below steps to bind SfTreeGrid with SfDataPager. 2. Set [SfDataPager.PageSize](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PageSize) property to specify the number of `RootNodes` to be displayed per page. -3. Bind [SfDataPager.PagedSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PagedSource) to [SfTreeGrid.ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ItemsSource) property. So whenever the page is changed, `PagedSource` will be update based on current page. +3. Bind [SfDataPager.PagedSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PagedSource) to [SfTreeGrid.ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_ItemsSource) property. So whenever the page is changed, `PagedSource` will be updated based on the current page. N> Paging supports all types of [TreeGridView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridView.html), except when using `SfTreeGrid` in unbound mode ([TreeGridUnBoundView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridUnboundView.html)). The following code snippet demonstrates the [TreeGridSelfRelationalView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridSelfRelationalView.html) type. Similarly, paging support can be implemented for [TreeGridNestedView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridNestedView.html). @@ -174,7 +174,7 @@ public class EmployeeInfo {% endcapture %} {{ codesnippet1 | OrderList_Indent_Level_1 }} -![WPF TreeGrid diplays Multiple Pages using SfDataPager](paging_images/wpf-treeGrid-multiple-page.png) +![WPF TreeGrid displays Multiple Pages using SfDataPager](paging_images/wpf-treeGrid-multiple-page.png) ### Limitations diff --git a/wpf/TreeGrid/Row-Height-Customization.md b/wpf/TreeGrid/Row-Height-Customization.md index 57e6fed10e..e0bb3a7bb6 100644 --- a/wpf/TreeGrid/Row-Height-Customization.md +++ b/wpf/TreeGrid/Row-Height-Customization.md @@ -1,7 +1,7 @@ --- layout: post title: Row Height Customization in WPF TreeGrid control | Syncfusion® -description: Learn here all about Row Height Customization support in Syncfusion® WPF TreeGrid (SfTreeGrid) control and more. +description: Learn here all about Row Height Customization support in the Syncfusion® WPF TreeGrid (SfTreeGrid) control and more. platform: wpf control: SfTreeGrid documentation: ug diff --git a/wpf/TreeGrid/Rows.md b/wpf/TreeGrid/Rows.md index c35d970292..59c10dcccc 100644 --- a/wpf/TreeGrid/Rows.md +++ b/wpf/TreeGrid/Rows.md @@ -1,7 +1,8 @@ ---- +--- layout: post title: Rows in WPF TreeGrid control | Syncfusion® -description: Learn here all about Rows support in Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements and more. +description: Learn here all about Rows support in the Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements, and more. + platform: wpf control: SfTreeGrid documentation: ug @@ -67,7 +68,7 @@ Denotes the row has errors. WPF TreeGrid row has errors -Denotes that the current row which has errors. +Denotes that the current row has errors.
@@ -397,4 +398,4 @@ You can change the style of the particular column header by using the [HeaderSty -N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the treegrid. \ No newline at end of file +N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the TreeGrid. \ No newline at end of file diff --git a/wpf/TreeGrid/Search.md b/wpf/TreeGrid/Search.md index 60af80a1f5..a21beb369b 100644 --- a/wpf/TreeGrid/Search.md +++ b/wpf/TreeGrid/Search.md @@ -1,7 +1,7 @@ --- layout: post title: Search in WPF TreeGrid control | Syncfusion® -description: Learn here all about Search support in Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements and more details. +description: Learn here all about Search support in the Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements, and more details. platform: wpf control: SfTreeGrid documentation: ug @@ -25,11 +25,11 @@ this.treeGrid.SearchController.Search(TextBox.Text); You can control where the search is applied in the SfTreeGrid using the [SearchController.SearchScope](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.TreeGridSearchController.html#Syncfusion_UI_Xaml_TreeGrid_TreeGridSearchController_SearchScope) property. By default SearchScope value set as Both. -* Both – Search will be applied to both RootNodes and ChildNodes in the SfTreeGrid. +* `Both` – Search will be applied to both RootNodes and ChildNodes in the SfTreeGrid. -* RootNodes – Search will be applied only to the RootNodes in the SfTreeGrid. +* `RootNodes` – Search will be applied only to the RootNodes in the SfTreeGrid. -* ChildNodes – Search will be applied only to the ChildNodes in the SfTreeGrid. +* `ChildNodes` – Search will be applied only to the ChildNodes in the SfTreeGrid. {% tabs %} {% highlight c# %} diff --git a/wpf/TreeGrid/Selection.md b/wpf/TreeGrid/Selection.md index 3149927444..2ecf48ae13 100644 --- a/wpf/TreeGrid/Selection.md +++ b/wpf/TreeGrid/Selection.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Selection in WPF TreeGrid control | Syncfusion® description: Learn here all about Selection support in Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements and more. @@ -991,7 +991,7 @@ You can customize the cell selection by editing the control template of the corr BorderThickness="0.5" IsHitTestVisible="False" Visibility="Collapsed"/> - + You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the treegrid. \ No newline at end of file +N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the TreeGrid. \ No newline at end of file diff --git a/wpf/TreeGrid/Sorting.md b/wpf/TreeGrid/Sorting.md index 15c305924a..416868d357 100644 --- a/wpf/TreeGrid/Sorting.md +++ b/wpf/TreeGrid/Sorting.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Sorting in WPF TreeGrid control | Syncfusion® description: Learn here all about Sorting support in Syncfusion® WPF TreeGrid (SfTreeGrid) control, its elements and more. @@ -143,8 +143,8 @@ N> [SfTreeGrid.SortColumnChanging](https://help.syncfusion.com/cr/wpf/Syncfusion ChildPropertyName="Children" ItemsSource="{Binding EmployeeDetails}"> - - + + @@ -311,4 +311,4 @@ private void TreeGrid_SortColumnsChanging(object sender, GridSortColumnsChanging [SfTreeGrid.SortColumnsChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TreeGrid.SfTreeGrid.html#Syncfusion_UI_Xaml_TreeGrid_SfTreeGrid_SortColumnsChanged) event occurs when the sorting is applied to the column. [GridSortColumnsChangedEventArgs](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSortColumnsChangedEventArgs.html) provides information for `SortColumnsChanged` event. -N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the treegrid. \ No newline at end of file +N> You can refer to our [WPF TreeGrid](https://www.syncfusion.com/wpf-controls/treegrid) feature tour page for its groundbreaking feature representations. You can also explore our [WPF TreeGrid example](https://github.com/syncfusion/wpf-demos) to know how to render and configure the TreeGrid. \ No newline at end of file