From 9e5208113ccd3cf308a0142c725b35f74e0aa230 Mon Sep 17 00:00:00 2001 From: Mugesh Date: Mon, 13 Jul 2026 17:05:08 +0530 Subject: [PATCH 01/25] Updated Licensing Documentation Page --- .../licensing-faq/CI-license-validation.md | 45 +++++++++++++------ 1 file changed, 31 insertions(+), 14 deletions(-) diff --git a/uwp/Licensing/licensing-faq/CI-license-validation.md b/uwp/Licensing/licensing-faq/CI-license-validation.md index 8e533b6c1..8df9a2279 100644 --- a/uwp/Licensing/licensing-faq/CI-license-validation.md +++ b/uwp/Licensing/licensing-faq/CI-license-validation.md @@ -25,23 +25,29 @@ The following section shows how to validate the Syncfusion license key in CI ser * Download and extract the LicenseKeyValidator.zip utility from the following link: [LicenseKeyValidator](https://s3.amazonaws.com/files2.syncfusion.com/Installs/LicenseKeyValidation/LicenseKeyValidator.zip). -* Open the LicenseKeyValidation.ps1 PowerShell script in a text\code editor as shown in the below example. +* Open the LicenseKeyValidation.ps1 PowerShell script in a text or code editor as shown in the example below. {% tabs %} -{% highlight c# tabtitle="PowerShell" %} +{% highlight c# tabtitle="v34.1.29 and later" %} # Replace the parameters with the desired platform, version, and actual license key. -$result = & $PSScriptRoot"\LicenseKeyValidatorConsole.exe" /platform:"UWP" /version:"26.2.4" /licensekey:"Your License Key" +$result = & $PSScriptRoot"\LicenseKeyValidatorConsole.exe" /platform:"UIComponent" /version:"34.1.29" /licensekey:"Your License Key" Write-Host $result {% endhighlight %} -{% endtabs %} -![LicenseKeyValidation script](licensing-images/license-validation.png) +{% highlight c# tabtitle="Before v34.1.29" %} +# Replace the parameters with the desired platform, version, and actual license key. + +$result = & $PSScriptRoot"\LicenseKeyValidatorConsole.exe" /platform:"UWP" /version:"26.2.4" /licensekey:"Your License Key" -* Update the parameters in the LicenseKeyValidation.ps1 script file as described below. +Write-Host $result +{% endhighlight %} +{% endtabs %} - **Platform:** Modify the value for /platform: to the actual platform "UWP". +* Update the parameters in the script: + + **Platform:** Set /platform:"**UIComponent**" for v34.1.29 and later, or /platform:"**UWP**" for earlier versions (use the relevant Syncfusion platform as needed). **Version:** Change the value for /version: to the required version (e.g., "26.2.4"). @@ -123,31 +129,42 @@ pipeline { {% endhighlight %} {% endtabs %} -## Validate the License Key By Using the ValidateLicense() Method +## Validate the license key by using the ValidateLicense() method * Register the license key properly by calling RegisterLicense("License Key") method with the license key. * Once the license key is registered, it can be validated by using the ValidateLicense("Platform.UWP") method. This ensures that the license key is valid for the platform and version you are using. For reference, please check the following example. {% tabs %} -{% highlight c# %} +{% highlight c# tabtitle="v34.1.29 and later" %} +using Syncfusion.Licensing; + +// Register the Syncfusion license key +SyncfusionLicenseProvider.RegisterLicense("YOUR LICENSE KEY"); + +// Validate the registered license key. +// The array overload allows validating against multiple platforms in a single call. +bool isValid = SyncfusionLicenseProvider.ValidateLicense(new[] { Platform.UIComponent }); +{% endhighlight %} + +{% highlight c# tabtitle="Before v34.1.29" %} using Syncfusion.Licensing; -//Register Syncfusion license key -Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR LICENSE KEY"); +// Register the Syncfusion license key +SyncfusionLicenseProvider.RegisterLicense("YOUR LICENSE KEY"); -//Validate the registered license key +// Validate the registered license key bool isValid = SyncfusionLicenseProvider.ValidateLicense(Platform.UWP); {% endhighlight %} {% endtabs %} -![LicenseKeyValidationMethod](licensing-images/license-validation-method.png) +N> Starting with v34.1.29, `Platform.UIComponent` is the recommended platform value for UI component license validation. `Platform.UWP` was supported up to v33 and is not supported in v34.1.29 or later (e.g., `new[] { Platform.UIComponent }`). * If the ValidateLicense() method returns true, registered license key is valid and can proceed with deployment. * If the ValidateLicense() method returns false, there will be invalid license errors in deployment due to either an invalid license key or an incorrect assembly or package version that is referenced in the project. Please ensure that all the referenced Syncfusion assemblies or NuGet packages are all on the same version as the license key’s version before deployment. -## Validate the License Key By Using the Unit Test Project +## Validate the license key by using the unit test project * To create a unit test project in Visual Studio, choose **File -> New -> Project** from the menu. This opens a new dialog for creating a new project. Filtering the project type by Test or typing Test as a keyword in the search option can help you to find available unit test projects. Select the appropriate test framework (such as MSTest, NUnit, or xUnit) that best suits your need. From 261df5298aa6a0d504ae3b1effd34d19e3a9ac7f Mon Sep 17 00:00:00 2001 From: SivaThennarasu Date: Tue, 14 Jul 2026 18:18:10 +0530 Subject: [PATCH 02/25] Improved the Digital-Gauge UG Documents. --- uwp/Digital-Gauge/Digital-Characters.md | 74 ++++++------ uwp/Digital-Gauge/Getting-Started.md | 60 ++++++---- uwp/Digital-Gauge/Key-features.md | 16 +-- uwp/Digital-Gauge/Overview.md | 6 +- uwp/Digital-Gauge/Settings.md | 110 +++++++++--------- .../Transformation-of-Characters.md | 76 ++++++------ 6 files changed, 180 insertions(+), 162 deletions(-) diff --git a/uwp/Digital-Gauge/Digital-Characters.md b/uwp/Digital-Gauge/Digital-Characters.md index 1ce85e314..322f2b1e4 100644 --- a/uwp/Digital-Gauge/Digital-Characters.md +++ b/uwp/Digital-Gauge/Digital-Characters.md @@ -9,116 +9,120 @@ documentation: ug # Digital Characters in UWP 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** property of type string. +The digital characters in the digital gauge can be viewed in different types of segments. These digital characters are displayed in the digital gauge by setting the [Value](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_Value) property of type string. For initial setup of the control, see [Getting Started](./Getting-Started.md). + +By default, the [CharacterType](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterType) property is set to `SegmentSeven`. The following sample uses the default segment type to render the value "GAUGE". {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - SfDigitalGauge digital = new SfDigitalGauge(); - digital.Value = "GAUGE"; - this.Grid.Children.Add(digital); +SfDigitalGauge digital = new SfDigitalGauge(); +digital.Value = "GAUGE"; +this.Grid.Children.Add(digital); {% endhighlight %} {% endtabs %} -![Digital-Characters_img1](Digital-Characters_images/Digital-Characters_img1.jpeg) +![UWP Digital Gauge Digital Characters](Digital-Characters_images/Digital-Characters_img1.jpeg) + +The segment type can be changed using the [CharacterType](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterType) property. The `CharacterType` enum (defined in the `Syncfusion.UI.Xaml.Gauges` namespace) supports the following values: `SegmentSeven`, `SegmentFourteen`, `SegmentSixteen`, and `EightCrossEightDotMatrix`. Unsupported characters are rendered as blank segments. The [Value](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_Value) property accepts alphanumeric and special characters and is case-sensitive. ## 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** property. +When [CharacterType](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterType) is set to `SegmentSeven` (the default), the value is displayed in 7-segment format. This type is mainly used to display numbers (0–9), though a limited set of letters is also supported. {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - SfDigitalGauge digital = new SfDigitalGauge(); - digital.Value = "12345"; - digital.CharacterType = CharacterType.SegmentSeven; - this.Grid.Children.Add(digital); +SfDigitalGauge digital = new SfDigitalGauge(); +digital.Value = "12345"; +digital.CharacterType = CharacterType.SegmentSeven; +this.Grid.Children.Add(digital); {% endhighlight %} {% endtabs %} -![Digital-Characters_img2](Digital-Characters_images/Digital-Characters_img2.jpeg) +![UWP Digital Gauge 7-Segments](Digital-Characters_images/Digital-Characters_img2.jpeg) ## 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. +When [CharacterType](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterType) is set to `SegmentFourteen`, the value is displayed in 14-segment format. This type is used to display both letters and numbers. {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - SfDigitalGauge digital = new SfDigitalGauge(); - digital.Value = "SYNCFUSION"; - digital.CharacterType = CharacterType.SegmentFourteen; - this.Grid.Children.Add(digital); +SfDigitalGauge digital = new SfDigitalGauge(); +digital.Value = "SYNCFUSION"; +digital.CharacterType = CharacterType.SegmentFourteen; +this.Grid.Children.Add(digital); {% endhighlight %} {% endtabs %} -![Digital-Characters_img3](Digital-Characters_images/Digital-Characters_img3.jpeg) +![UWP Digital Gauge 14-Segments](Digital-Characters_images/Digital-Characters_img3.jpeg) ## 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. +When [CharacterType](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterType) is set to `SegmentSixteen`, the value is displayed in 16-segment format. This type is also used to display both letters and numbers. Compared to 14-segment, the 16-segment type splits the horizontal bars, producing a cleaner, more evenly lit character suitable when a split-style appearance is preferred. {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - SfDigitalGauge digital = new SfDigitalGauge(); - digital.Value = "SYNCFUSION"; - digital.CharacterType = CharacterType.SegmentSixteen; - this.Grid.Children.Add(digital); +SfDigitalGauge digital = new SfDigitalGauge(); +digital.Value = "SYNCFUSION"; +digital.CharacterType = CharacterType.SegmentSixteen; +this.Grid.Children.Add(digital); {% endhighlight %} {% endtabs %} -![Digital-Characters_img4](Digital-Characters_images/Digital-Characters_img4.jpeg) +![UWP Digital Gauge 16-Segments](Digital-Characters_images/Digital-Characters_img4.jpeg) ## 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. +When [CharacterType](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterType) is set to `EightCrossEightDotMatrix`, the value is displayed in an 8 × 8 dot matrix. This type is used to display special characters along with letters and numbers. {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - SfDigitalGauge digital = new SfDigitalGauge(); - digital.Value = "SYNCFUSION"; - digital.CharacterType = CharacterType.EightCrossEightDotMatrix; - this.Grid.Children.Add(digital); +SfDigitalGauge digital = new SfDigitalGauge(); +digital.Value = "SYNCFUSION"; +digital.CharacterType = CharacterType.EightCrossEightDotMatrix; +this.Grid.Children.Add(digital); {% endhighlight %} -{% endtabs%} +{% endtabs %} -![Digital-Characters_img5](Digital-Characters_images/Digital-Characters_img5.jpeg) +![UWP Digital Gauge 8 × 8 Dot Matrix Segments](Digital-Characters_images/Digital-Characters_img5.jpeg) diff --git a/uwp/Digital-Gauge/Getting-Started.md b/uwp/Digital-Gauge/Getting-Started.md index f490ff1ff..6f1325b5a 100644 --- a/uwp/Digital-Gauge/Getting-Started.md +++ b/uwp/Digital-Gauge/Getting-Started.md @@ -9,81 +9,93 @@ documentation: ug # Getting Started with UWP 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](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html) and also explains the steps to add basic elements of [SfDigitalGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html) through various APIs available within it. + +## Prerequisites + +* **Visual Studio 2015** or later with the **Windows 10 SDK** installed. +* A UWP project targeting **Windows 10** (build 14393 or later). +* The **Syncfusion.SfGauge.UWP** NuGet package referenced in your project. For installation details, see the Syncfusion UWP installation guide. +* A `Grid` container (default named `Grid`) in your page to host the control when adding it via C#. ## Configuring SfDigitalGauge -SfDigitalGauge is existing in the following assembly and namespace. +SfDigitalGauge is available in the following assembly and namespace. **Assembly**: Syncfusion.SfGauge.UWP **Namespace**: Syncfusion.UI.Xaml.Gauges +By default, the [Value](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_Value) property is empty and [CharacterType](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterType) defaults to `SegmentSeven`. + {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - SfDigitalGauge digital = new SfDigitalGauge(); - this.Grid.Children.Add(digital); - +SfDigitalGauge digital = new SfDigitalGauge(); +this.Grid.Children.Add(digital); + {% endhighlight %} {% endtabs %} -![Getting-Started_img1](Getting-Started_images/Getting-Started_img1.jpeg) +![UWP Digital Gauge Getting Started](Getting-Started_images/Getting-Started_img1.jpeg) +Run the above code and the default [SfDigitalGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html) is displayed as follows. -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. +The UI component of the digital gauge can be customized by adding segments and setting the [Value](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_Value) property, which will be explained in the next section. -## Displaying Values +## Displaying Values -You can add alphanumeric characters to SfDigitalGauge using **Value** property in SfDigitalGauge. +You can add alphanumeric characters to [SfDigitalGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html) using the [Value](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_Value) property in SfDigitalGauge. {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - SfDigitalGauge digital = new SfDigitalGauge(); - digital.Value = "GAUGE"; - this.Grid.Children.Add(digital); +SfDigitalGauge digital = new SfDigitalGauge(); +digital.Value = "GAUGE"; +this.Grid.Children.Add(digital); {% endhighlight %} {% endtabs %} -SfDigitalGauge Values are displayed as follows. +The values are displayed as follows. -![Getting-Started_img2](Getting-Started_images/Getting-Started_img2.jpeg) +![UWP Digital Gauge Displaying Values](Getting-Started_images/Getting-Started_img2.jpeg) ## Changing segments -You can view the digital characters in SfDigitalGauge using different types of Segments available in **CharacterType** property. +You can view the digital characters in [SfDigitalGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html) using different types of segments available in the [CharacterType](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterType) property. The `CharacterType` enum (defined in the `Syncfusion.UI.Xaml.Gauges` namespace) supports the following values: `SegmentSeven`, `SegmentFourteen`, `SegmentSixteen`, and `EightByEightDotMatrix`. For the full list of supported segment types and the characters each one renders, see [Digital Characters](./Digital-Characters.md). + +The `SegmentSeven` type primarily supports digits (0–9) and a limited set of characters, which is why the sample below renders numeric values. {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - SfDigitalGauge digital = new SfDigitalGauge(); - digital.Value = "12345"; - digital.CharacterType = CharacterType.SegmentSeven; - this.Grid.Children.Add(digital); +SfDigitalGauge digital = new SfDigitalGauge(); +digital.Value = "12345"; +digital.CharacterType = CharacterType.SegmentSeven; +this.Grid.Children.Add(digital); {% endhighlight %} {% endtabs %} -SfDigitalGauge Segments are displayed as follows. +The segments are displayed as follows. -![Getting-Started_img3](Getting-Started_images/Getting-Started_img3.jpg) +![UWP Digital Gauge Changing Segments](Getting-Started_images/Getting-Started_img3.jpg) diff --git a/uwp/Digital-Gauge/Key-features.md b/uwp/Digital-Gauge/Key-features.md index df1f57563..0a2ddcf9e 100644 --- a/uwp/Digital-Gauge/Key-features.md +++ b/uwp/Digital-Gauge/Key-features.md @@ -7,9 +7,9 @@ control: SfDigitalGauge documentation: ug --- -# Key Features in UWP Digital Gauge (SfDigitalGauge) +# Key Features in UWP Digital Gauge Control (SfDigitalGauge) -A digital gauge is composed of segments which are a major UI component of the digital gauge. **SfDigitalGauge** comprises of the following segments to display the digital characters. +A digital gauge is composed of segments which are a major UI component of the digital gauge. [SfDigitalGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html) comprises the following segment types to display the digital characters. For more details on each segment type and the characters it supports, see [Digital Characters](./Digital-Characters.md). To get started with the control, see [Getting Started](./Getting-Started.md). For appearance configuration, see [Settings](./Settings.md). * 7 Segment Display * 14 Segment Display @@ -18,21 +18,21 @@ A digital gauge is composed of segments which are a major UI component of the di **7-Segment Display** -These type of digital gauge displays the digital characters in 7 segments. These are mainly used to display the numbers. +This type of digital gauge displays the digital characters in 7 segments. It is mainly used to display numbers. **14-Segment Display** -These type of digital gauge displays the digital characters in 14 segments. These are mainly used to display both the numbers and alphabets. +This type of digital gauge displays the digital characters in 14 segments. It is mainly used to display both numbers and letters. The additional segments (compared to the 7-segment display) enable it to render a fuller set of alphabetic characters. **16-Segment Display** -These type of digital gauge displays the digital characters in 16 segments. These type of digital gauge are also mainly used to display both the numbers and alphabets. +This type of digital gauge displays the digital characters in 16 segments. It is also mainly used to display both numbers and letters. The two extra segments split the horizontal bars, producing a more evenly lit character that is preferred when a cleaner, split-style appearance is desired. -**8 * 8 Dot Matrix Display** +**8 x 8 Dot Matrix Display** -These type of digital gauge displays the digital character in 8*8 dot matrix segments where the characters are spotted by the regular brush and remaining dot are spotted by the dimmed brush. These are mainly used to display numbers, characters and special characters. +This type of digital gauge displays the digital characters in an 8 x 8 dot matrix where the active character dots are highlighted using the `RegularBrush` property and the remaining (inactive) dots use the [DimmedBrush](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_DimmedBrush) property. It is mainly used to display numbers, letters, and special characters. **Easy to use** -**SfDigitalGauge** is available in Visual Studio toolbox itself, you can easily drag and drop the control from toolbox. +[SfDigitalGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html) is available in the Visual Studio toolbox itself; you can easily drag and drop the control from the toolbox. diff --git a/uwp/Digital-Gauge/Overview.md b/uwp/Digital-Gauge/Overview.md index 83a958049..8ef813eb2 100644 --- a/uwp/Digital-Gauge/Overview.md +++ b/uwp/Digital-Gauge/Overview.md @@ -9,11 +9,11 @@ documentation: ug # UWP Digital Gauge (SfDigitalGauge) Overview -The Digital Gauge control is used to display alphanumeric characters in digital (LED Display) mode. Digital gauge is used to display a range of values that uses character in combination with numbers. +The [Digital Gauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html) control is used to display alphanumeric characters in digital (LED display) mode. The digital gauge is used to display a range of values that uses characters in combination with numbers. **Use Cases** -* Displays alpha-numeric values as a virtual digital display. +* Displays alphanumeric values as a virtual digital display. * Displays the current time in a virtual digital clock. -* Displays the speed and distance in a digital speedometers. +* Displays the speed and distance in digital speedometers. diff --git a/uwp/Digital-Gauge/Settings.md b/uwp/Digital-Gauge/Settings.md index a2bc2f123..9ee7840bb 100644 --- a/uwp/Digital-Gauge/Settings.md +++ b/uwp/Digital-Gauge/Settings.md @@ -9,157 +9,157 @@ documentation: ug # Settings in UWP Digital Gauge (SfDigitalGauge) -There are some other elements/behavior in SfDigitalGauge also can be customized. +Other elements and behaviors in [SfDigitalGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html) can be customized as well. For transformation properties such as [CharacterHeight](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterHeight), [CharacterWidth](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterWidth), [SkewAngleX](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_SkewAngleX), and [SkewAngleY](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_SkewAngleY), see [Transformation of Characters](./Transformation-of-Characters.md). They are: * Character Spacing -* Segment Thickness -* RTL (Right to Left) support * Character Stroke -* Dimmed Brush stroke -* Dimmed Brush opacity +* Segment Thickness +* RTL (Right to Left) Support +* Dimmed Brush Stroke +* Dimmed Brush Opacity ## Character Spacing -The distance between the characters can be set by using the **CharacterSpacing** property. +The distance between the characters can be set by using the [CharactersSpacing](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharactersSpacing) property. The default value is `10`, and the valid range is any non-negative numeric value. {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - SfDigitalGauge digital = new SfDigitalGauge(); - digital.Value = " SYNCFUSION"; - digital.CharacterSpacing = 50; - this.Grid.Children.Add(digital); +SfDigitalGauge digital = new SfDigitalGauge(); +digital.Value = "SYNCFUSION"; +digital.CharacterSpacing = 50; +this.Grid.Children.Add(digital); {% endhighlight %} {% endtabs %} -![Settings_img1](Settings_images/Settings_img1.jpeg) +![UWP Digital Gauge Character Spacing](Settings_images/Settings_img1.jpeg) ## Character Stroke -The Stroke of the character can be changed by **CharacterStroke** property. +The stroke of the character can be changed by the [CharacterStroke](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterStroke) property. The default value is `Red`. {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - SfDigitalGauge digital = new SfDigitalGauge(); - digital.Value = " SYNCFUSION"; - digital.CharacterStroke = new SolidColorBrush(Colors.Yellow); - digital.CharacterType = CharacterType.SegmentFourteen; - this.Grid.Children.Add(digital); - +SfDigitalGauge digital = new SfDigitalGauge(); +digital.Value = "SYNCFUSION"; +digital.CharacterType = CharacterType.SegmentFourteen; +digital.CharacterStroke = new SolidColorBrush(Colors.Yellow); +this.Grid.Children.Add(digital); + {% endhighlight %} {% endtabs %} -![Settings_img2](Settings_images/Settings_img2.jpeg) +![UWP Digital Gauge Character Stroke](Settings_images/Settings_img2.jpeg) ## Segment Thickness -Using **SegmentThickness** property, you can adjust the thickness of the segment. +You can adjust the thickness of the segment using the [SegmentThickness](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_SegmentThickness) property. The default value is `2`, and the valid range is any positive numeric value. {% tabs %} {% highlight xaml %} - - + + {% endhighlight %} {% highlight c# %} - SfDigitalGauge digital = new SfDigitalGauge(); - digital.Value = " SYNCFUSION"; - digital.SegmentThickness = 5; - digital.CharacterType = CharacterType.SegmentFourteen; - this.Grid.Children.Add(digital); +SfDigitalGauge digital = new SfDigitalGauge(); +digital.Value = "SYNCFUSION"; +digital.SegmentThickness = 5; +digital.CharacterType = CharacterType.SegmentFourteen; +this.Grid.Children.Add(digital); {% endhighlight %} {% endtabs %} -![Settings_img3](Settings_images/Settings_img3.jpeg) +![UWP Digital Gauge Segment Thickness](Settings_images/Settings_img3.jpeg) ## RTL (Right to Left) support -The Characters are aligned using **EnableRTLFormat** property. The default value of **EnableRTLFormat** **is** false. +The Characters are aligned using the [EnableRTLFormat](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_EnableRTLFormat) property. The default value of `EnableRTLFormat` is `false`. {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - SfDigitalGauge digital = new SfDigitalGauge(); - digital.Value = " SYNCFUSION"; - digital.EnableRTLFormat= true; - digital.CharacterType = CharacterType.SegmentFourteen; - this.Grid.Children.Add(digital); +SfDigitalGauge digital = new SfDigitalGauge(); +digital.Value = "SYNCFUSION"; +digital.EnableRTLFormat = true; +digital.CharacterType = CharacterType.SegmentFourteen; +this.Grid.Children.Add(digital); {% endhighlight %} {% endtabs %} -![Settings_img4](Settings_images/Settings_img4.jpeg) +![UWP Digital Gauge RTL Support](Settings_images/Settings_img4.jpeg) ## Dimmed Brush stroke -**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/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_DimmedBrush) property is used to apply a brush to the dimmed (inactive) segments of the digital gauge. The dimmed segments are the segments that are not part of the active character being displayed. This property helps the dimmed segments blend with the background of the digital gauge. The default value is `Transparent`. {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - SfDigitalGauge digital = new SfDigitalGauge(); - digital.Value = " SYNCFUSION"; - digital.DimmedBrush = new SolidColorBrush(Colors.White); - digital.CharacterType = CharacterType.SegmentFourteen; - this.Grid.Children.Add(digital); +SfDigitalGauge digital = new SfDigitalGauge(); +digital.Value = "SYNCFUSION"; +digital.DimmedBrush = new SolidColorBrush(Colors.White); +digital.CharacterType = CharacterType.SegmentFourteen; +this.Grid.Children.Add(digital); {% endhighlight %} {% endtabs %} -![Settings_img5](Settings_images/Settings_img5.jpeg) +![UWP Digital Gauge Dimmed Brush Stroke](Settings_images/Settings_img5.jpeg) ## Dimmed Brush opacity -**DimmedBrushOpacity** property is used to set the opacity of the brushes to the dimmed segment. +The [DimmedBrushOpacity](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_DimmedBrushOpacity) property is used to set the opacity of the dimmed segment brush. The default value is `50`, and the valid range is `0` to `100` (percentage). {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - SfDigitalGauge digital = new SfDigitalGauge(); - digital.Value = " SYNCFUSION"; - digital.DimmedBrush = new SolidColorBrush(Colors.White); - digital.CharacterType = CharacterType.SegmentFourteen; - digital.DimmedBrushOpacity = 20; - this.Grid.Children.Add(digital); +SfDigitalGauge digital = new SfDigitalGauge(); +digital.Value = "SYNCFUSION"; +digital.DimmedBrush = new SolidColorBrush(Colors.White); +digital.CharacterType = CharacterType.SegmentFourteen; +digital.DimmedBrushOpacity = 20; +this.Grid.Children.Add(digital); {% endhighlight %} {% endtabs %} -![Settings_img6](Settings_images/Settings_img6.jpeg) +![UWP Digital Gauge Dimmed Brush Opacity](Settings_images/Settings_img6.jpeg) diff --git a/uwp/Digital-Gauge/Transformation-of-Characters.md b/uwp/Digital-Gauge/Transformation-of-Characters.md index 1d085e3d3..73852768f 100644 --- a/uwp/Digital-Gauge/Transformation-of-Characters.md +++ b/uwp/Digital-Gauge/Transformation-of-Characters.md @@ -9,107 +9,109 @@ documentation: ug # Transformation of Characters in UWP 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 in the [SfDigitalGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html). Two kinds of transformations are supported: Scaling and Skewing. * 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** and **CharacterWidth** property in the digital gauge. +Digital characters are scaled by altering their height and width. It is achieved by setting the [CharacterHeight](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterHeight) and [CharacterWidth](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterWidth) properties in the digital gauge. The two properties can be set independently to scale each dimension. The default values and valid ranges are as follows: + +* [CharacterHeight](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterHeight) — default value is `40`; valid range is any positive numeric value. +* [CharacterWidth](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_CharacterWidth) — default value is `25`; valid range is any positive numeric value. ### CharacterHeight {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - SfDigitalGauge digital = new SfDigitalGauge(); - digital.Value = "SYNCFUSION"; - digital.CharacterHeight = 70; - digital.CharacterType = CharacterType.SegmentFourteen; - this.Grid.Children.Add(digital); +SfDigitalGauge digital = new SfDigitalGauge(); +digital.Value = "SYNCFUSION"; +digital.CharacterHeight = 70; +digital.CharacterType = CharacterType.SegmentFourteen; +this.Grid.Children.Add(digital); {% endhighlight %} {% endtabs %} -![Transformation-of-Characters_img1](Transformation-of-Characters_images/Transformation-of-Characters_img1.jpeg) +![UWP Digital Gauge Scaling CharacterHeight](Transformation-of-Characters_images/Transformation-of-Characters_img1.jpeg) ### CharacterWidth {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - SfDigitalGauge digital = new SfDigitalGauge(); - digital.Value = "SYNCFUSION"; - digital.CharacterWidth = 60; - digital.CharacterType = CharacterType.SegmentFourteen; - this.Grid.Children.Add(digital); - +SfDigitalGauge digital = new SfDigitalGauge(); +digital.Value = "SYNCFUSION"; +digital.CharacterWidth = 60; +digital.CharacterType = CharacterType.SegmentFourteen; +this.Grid.Children.Add(digital); + {% endhighlight %} {% endtabs %} -![Transformation-of-Characters_img2](Transformation-of-Characters_images/Transformation-of-Characters_img2.jpeg) +![UWP Digital Gauge Scaling CharacterWidth](Transformation-of-Characters_images/Transformation-of-Characters_img2.jpeg) ## 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** and **SkewAngleY** properties respectively. +The digital gauge also supports skew transformation of digital characters. It can be done on the x-axis and y-axis through the [SkewAngleX](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_SkewAngleX) and [SkewAngleY](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_SkewAngleY) properties, respectively. Both skew angles can be applied simultaneously. The default values, valid ranges, and units are as follows: + +* [SkewAngleX](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_SkewAngleX) — default value is `0`; valid range is any numeric value (in degrees). +* [SkewAngleY](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfDigitalGauge.html#Syncfusion_UI_Xaml_Gauges_SfDigitalGauge_SkewAngleY) — default value is `0`; valid range is any numeric value (in degrees). ### SkewAngleX {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - SfDigitalGauge digital = new SfDigitalGauge(); - digital.Value = "SYNCFUSION"; - digital.SkewAngleX = 35; - digital.CharacterType = CharacterType.SegmentFourteen; - this.Grid.Children.Add(digital); +SfDigitalGauge digital = new SfDigitalGauge(); +digital.Value = "SYNCFUSION"; +digital.SkewAngleX = 35; +digital.CharacterType = CharacterType.SegmentFourteen; +this.Grid.Children.Add(digital); {% endhighlight %} -{% endtabs%} +{% endtabs %} -![Transformation-of-Characters_img3](Transformation-of-Characters_images/Transformation-of-Characters_img3.jpeg) +![UWP Digital Gauge Skewing SkewAngleX](Transformation-of-Characters_images/Transformation-of-Characters_img3.jpeg) ### SkewAngleY {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight c# %} - SfDigitalGauge digital = new SfDigitalGauge(); - digital.Value = "SYNCFUSION"; - digital.SkewAngleY = 30; - digital.CharacterType = CharacterType.SegmentFourteen; - this.Grid.Children.Add(digital); +SfDigitalGauge digital = new SfDigitalGauge(); +digital.Value = "SYNCFUSION"; +digital.SkewAngleY = 30; +digital.CharacterType = CharacterType.SegmentFourteen; +this.Grid.Children.Add(digital); {% endhighlight %} {% endtabs %} -![Transformation-of-Characters_img4](Transformation-of-Characters_images/Transformation-of-Characters_img4.jpeg) +![UWP Digital Gauge Skewing SkewAngleY](Transformation-of-Characters_images/Transformation-of-Characters_img4.jpeg) From d50d7cdc4992034740f55c1ec2b59faeb4014c47 Mon Sep 17 00:00:00 2001 From: SivaThennarasu Date: Thu, 16 Jul 2026 11:23:26 +0530 Subject: [PATCH 03/25] Improved the Linear-Gauge UG files. --- uwp/Linear-Gauge/GettingStarted.md | 540 ++++------- uwp/Linear-Gauge/Labels.md | 578 +++++------- uwp/Linear-Gauge/Orientation.md | 69 +- uwp/Linear-Gauge/Overview.md | 15 +- uwp/Linear-Gauge/Pointers.md | 846 +++++++----------- uwp/Linear-Gauge/Ranges.md | 937 ++++++++------------ uwp/Linear-Gauge/Scales.md | 613 +++++-------- uwp/Linear-Gauge/Ticks.md | 195 ++-- uwp/Linear-Gauge/annotations.md | 1331 ++++++++++------------------ 9 files changed, 1858 insertions(+), 3266 deletions(-) diff --git a/uwp/Linear-Gauge/GettingStarted.md b/uwp/Linear-Gauge/GettingStarted.md index 8cab3540b..548b0a8db 100644 --- a/uwp/Linear-Gauge/GettingStarted.md +++ b/uwp/Linear-Gauge/GettingStarted.md @@ -8,15 +8,15 @@ documentation: ug --- # Getting Started with UWP Linear Gauge (SfLinearGauge) -This section explains the steps required to configure a [`SfLinearGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html) control in a real-time scenario and also provides a walk-through on some of the customization features available in [`SfLinearGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html) control. +This section explains the steps required to configure a [`SfLinearGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html) control in a real-time scenario and also provides a walk-through of some of the customization features available in the [`SfLinearGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html) control. ## Adding gauge references -Refer to this [article](https://help.syncfusion.com/uwp/add-syncfusion-controls) to know how to add Syncfusion controls to Visual Studio projects in various ways. You can also refer to [this](https://help.syncfusion.com/uwp/control-dependencies) link to know about the assemblies required for adding gauge to your project. +Refer to this [article](https://help.syncfusion.com/uwp/add-syncfusion-controls) to know how to add Syncfusion controls to Visual Studio projects in various ways. You can also refer to [this](https://help.syncfusion.com/uwp/control-dependencies) link to know about the assemblies required for adding a gauge to your project. ### Initialize gauge -Import the [`SfLinearGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html) namespace to your respective Window as follows. +Import the [`SfLinearGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html) namespace to your respective Window as follows. {% tabs %} @@ -40,14 +40,13 @@ You can initialize an empty [`SfLinearGauge`](https://help.syncfusion.com/cr/uwp {% highlight xml %} - + {% endhighlight %} {% highlight c# %} SfLinearGauge sfLinearGauge = new SfLinearGauge(); - this.Content = sfLinearGauge; {% endhighlight %} @@ -56,29 +55,24 @@ this.Content = sfLinearGauge; ### Adding header -You can assign a unique header to [`SfLinearGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html) by using the [`Header`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html#Syncfusion_UI_Xaml_Gauges_SfLinearGauge_Header) property and position it wherever as you desired by using the [`HeaderOffset`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html#Syncfusion_UI_Xaml_Gauges_SfLinearGauge_HeaderOffset) property. +You can assign a unique header to the [`SfLinearGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html) by using the [`Header`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html#Syncfusion_UI_Xaml_Gauges_SfLinearGauge_Header) property and position it wherever you desire by using the [`HeaderOffset`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html#Syncfusion_UI_Xaml_Gauges_SfLinearGauge_HeaderOffset) property. {% tabs %} {% highlight xml %} - - - + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - sfLinearGauge.Header = "Thermometer"; - - sfLinearGauge.HeaderFontSize = 15; - - sfLinearGauge.HeaderOffset = new Point(0.47, 0.38); - - this.Content = sfLinearGauge; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +sfLinearGauge.Header = "Thermometer"; +sfLinearGauge.HeaderFontSize = 15; +sfLinearGauge.HeaderOffset = new Point(0.47, 0.38); +this.Content = sfLinearGauge; {% endhighlight %} @@ -86,10 +80,7 @@ You can assign a unique header to [`SfLinearGauge`](https://help.syncfusion.com/ ### Configuring scale -Configuring scale - -You can configure the [`LinearScale`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html) elements by making use of following API’s available in [`SfLinearGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html). -They are: +You can configure the [`LinearScale`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html) elements by making use of the following APIs available in [`SfLinearGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html). They are: • ScaleDirection @@ -111,49 +102,31 @@ They are: {% highlight xml %} - - + - - - - - + + - - + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.Interval = 10; - - linearScale.LabelSize = 15; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - linearScale.MinorTicksPerInterval = 3; - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.Interval = 10; +linearScale.LabelSize = 15; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +linearScale.MinorTicksPerInterval = 3; +sfLinearGauge.MainScale = linearScale; {% endhighlight %} @@ -167,96 +140,58 @@ You can categorize the scale values using the start and end values properties in {% highlight xml %} - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.Interval = 10; - - linearScale.LabelSize = 15; - - linearScale.ScaleBarSize = 10; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - linearScale.MinorTicksPerInterval = 3; - - LinearRange linearRange = new LinearRange(); - - linearRange.StartValue = 0; - - linearRange.EndValue = 40; - - linearRange.RangeStroke = new SolidColorBrush(Color.FromArgb(0xff,0x27,0xBE,0xB7)); - - linearRange.StartWidth = 10; - - linearRange.EndWidth = 10; - - linearRange.RangeOffset = 0.4; - - linearScale.Ranges.Add(linearRange); - - LinearRange linearRange1 = new LinearRange(); - - linearRange1.StartValue = 40; - - linearRange1.EndValue = 100; - - linearRange1.RangeStroke = new SolidColorBrush(Colors.LightCyan); - - linearRange1.RangeOffset = 0.4; - - linearRange1.StartWidth = 10; - - linearRange1.EndWidth = 10; - - linearScale.Ranges.Add(linearRange1); - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.Interval = 10; +linearScale.LabelSize = 15; +linearScale.ScaleBarSize = 10; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +linearScale.MinorTicksPerInterval = 3; +LinearRange linearRange = new LinearRange(); +linearRange.StartValue = 0; +linearRange.EndValue = 40; +linearRange.RangeStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x27, 0xBE, 0xB7)); +linearRange.StartWidth = 10; +linearRange.EndWidth = 10; +linearRange.RangeOffset = 0.4; +linearScale.Ranges.Add(linearRange); +LinearRange linearRange1 = new LinearRange(); +linearRange1.StartValue = 40; +linearRange1.EndValue = 100; +linearRange1.RangeStroke = new SolidColorBrush(Colors.LightCyan); +linearRange1.RangeOffset = 0.4; +linearRange1.StartWidth = 10; +linearRange1.EndWidth = 10; +linearScale.Ranges.Add(linearRange1); +sfLinearGauge.MainScale = linearScale; {% endhighlight %} @@ -269,76 +204,48 @@ You can categorize the scale values using the start and end values properties in {% tabs %} {% highlight xml %} - - - - - - - - - - - - - - - - - + + + + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.Interval = 10; - - linearScale.LabelSize = 15; - - linearScale.ScaleBarSize = 10; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - linearScale.MinorTicksPerInterval = 3; - - LinearPointer linearPointer = new LinearPointer(); - - linearPointer.PointerType = LinearPointerType.SymbolPointer; - - linearPointer.Value = 60; - - linearPointer.SymbolPointerHeight = 10; - - linearPointer.SymbolPointerWidth = 10; - - linearPointer.SymbolPointerPosition = LinearSymbolPointersPosition.Below; - - linearPointer.SymbolPointerStroke = new SolidColorBrush(Color.FromArgb(0xff,0x75,0x75,0x75)); - - linearScale.Pointers.Add(linearPointer); - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.Interval = 10; +linearScale.LabelSize = 15; +linearScale.ScaleBarSize = 10; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +linearScale.MinorTicksPerInterval = 3; +LinearPointer linearPointer = new LinearPointer(); +linearPointer.PointerType = LinearPointerType.SymbolPointer; +linearPointer.Value = 60; +linearPointer.SymbolPointerHeight = 10; +linearPointer.SymbolPointerWidth = 10; +linearPointer.SymbolPointerPosition = LinearSymbolPointersPosition.Below; +linearPointer.SymbolPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x75, 0x75, 0x75)); +linearScale.Pointers.Add(linearPointer); +sfLinearGauge.MainScale = linearScale; {% endhighlight %} @@ -352,145 +259,95 @@ You can categorize the scale values using the start and end values properties in {% highlight xml %} - - - - - - - - - - - - - - - - - + + + + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.Interval = 10; - - linearScale.LabelSize = 15; - - linearScale.ScaleBarSize = 10; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - linearScale.MinorTicksPerInterval = 3; - - LinearPointer linearPointer1 = new LinearPointer(); - - linearPointer1.PointerType = LinearPointerType.BarPointer; - - linearPointer1.Value = 50; - - linearPointer1.BarPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x75, 0x75, 0x75)); - - linearPointer1.BarPointerStrokeThickness = 10; - - linearScale.Pointers.Add(linearPointer1); - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.Interval = 10; +linearScale.LabelSize = 15; +linearScale.ScaleBarSize = 10; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +linearScale.MinorTicksPerInterval = 3; +LinearPointer linearPointer1 = new LinearPointer(); +linearPointer1.PointerType = LinearPointerType.BarPointer; +linearPointer1.Value = 50; +linearPointer1.BarPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x75, 0x75, 0x75)); +linearPointer1.BarPointerStrokeThickness = 10; +linearScale.Pointers.Add(linearPointer1); +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -The following code example is the complete code of the previous configurations. +The following code example is the complete code for the previous configurations. {% tabs %} {% highlight xml %} - - - - - - - - + + + - - - + - + BarPointerStrokeThickness="10"/> - - - - - - + + - - - - - - - + + + {% endhighlight %} {% highlight c# %} - using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Media; using Syncfusion.UI.Xaml.Gauges; @@ -504,99 +361,52 @@ namespace GaugeGettingStarted public MainPage() { this.InitializeComponent(); - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - sfLinearGauge.Header = "Thermometer"; - sfLinearGauge.HeaderFontSize = 15; - sfLinearGauge.HeaderOffset = new Point(0.47, 0.38); - LinearScale linearScale = new LinearScale(); - linearScale.Interval = 10; - linearScale.LabelSize = 15; - linearScale.ScaleBarSize = 10; - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - linearScale.MajorTickSize = 25; - linearScale.MinorTickSize = 12; - linearScale.ScaleBarLength = 300; - linearScale.MinorTicksPerInterval = 3; - LinearRange linearRange = new LinearRange(); - linearRange.StartValue = 0; - linearRange.EndValue = 40; - linearRange.RangeStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x27, 0xBE, 0xB7)); - linearRange.StartWidth = 10; - linearRange.EndWidth = 10; - linearRange.RangeOffset = 0.4; - linearScale.Ranges.Add(linearRange); - LinearRange linearRange1 = new LinearRange(); - linearRange1.StartValue = 40; - linearRange1.EndValue = 100; - linearRange1.RangeStroke = new SolidColorBrush(Colors.LightCyan); - linearRange1.RangeOffset = 0.4; - linearRange1.StartWidth = 10; - linearRange1.EndWidth = 10; - linearScale.Ranges.Add(linearRange1); - LinearPointer linearPointer = new LinearPointer(); - linearPointer.PointerType = LinearPointerType.SymbolPointer; - linearPointer.Value = 60; - linearPointer.SymbolPointerHeight = 10; - linearPointer.SymbolPointerWidth = 10; - linearPointer.SymbolPointerPosition = LinearSymbolPointersPosition.Below; - linearPointer.SymbolPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x75, 0x75, 0x75)); - linearScale.Pointers.Add(linearPointer); - LinearPointer linearPointer1 = new LinearPointer(); - linearPointer1.PointerType = LinearPointerType.BarPointer; - linearPointer1.Value = 50; - linearPointer1.BarPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x75, 0x75, 0x75)); - linearPointer1.BarPointerStrokeThickness = 10; - linearScale.Pointers.Add(linearPointer1); - sfLinearGauge.MainScale = linearScale; - this.Content = sfLinearGauge; } } @@ -606,9 +416,9 @@ namespace GaugeGettingStarted {% endtabs %} -The following screenshot illustrates the result of the previous codes. +The following screenshot illustrates the result of the previous code. -![Getting_started_img1](Getting-Started_images/Getting_started_img1.png) +![UWP Linear Gauge getting started](Getting-Started_images/Getting_started_img1.png) -You can find the complete getting started sample from this [`link`](). +You can find the complete getting started sample from this [link](https://github.com/syncfusion/uwp-demos). diff --git a/uwp/Linear-Gauge/Labels.md b/uwp/Linear-Gauge/Labels.md index 202b8c41e..43edf26cd 100644 --- a/uwp/Linear-Gauge/Labels.md +++ b/uwp/Linear-Gauge/Labels.md @@ -9,136 +9,100 @@ documentation: ug # Labels in UWP 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`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html) 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/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_LabelStroke) of the linear scale. +The foreground of the label can be customized by setting the [`LabelStroke`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_LabelStroke) property of the linear scale. {% tabs %} {% highlight xml %} - - - - - - - - - - - + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.Interval = 10; - - linearScale.LabelSize = 15; - - linearScale.ScaleBarSize = 10; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Colors.Purple); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - linearScale.MinorTicksPerInterval = 3; - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.Interval = 10; +linearScale.LabelSize = 15; +linearScale.ScaleBarSize = 10; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Colors.Purple); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +linearScale.MinorTicksPerInterval = 3; +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Scale label image](Labels_images/Labels_img1.png) +![UWP Linear Gauge label color customization](Labels_images/Labels_img1.png) ## Label font customization -The label font can be customized using the [`LabelSize`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_LabelSize), `FontFamily`, and `FontStyle` properties. +The label font can be customized using the [`LabelSize`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_LabelSize), [`FontFamily`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_FontFamily), and [`FontStyle`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_FontStyle) properties. {% tabs %} {% highlight xml %} - - - - - - - - - - - + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.Interval = 10; - - linearScale.LabelSize = 15; - - linearScale.FontFamily = new FontFamily("Monotype Corsiva"); - - linearScale.FontStyle = Windows.UI.Text.FontStyle.Italic; - - linearScale.ScaleBarSize = 10; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - linearScale.MinorTicksPerInterval = 3; - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.Interval = 10; +linearScale.LabelSize = 15; +linearScale.FontFamily = new FontFamily("Monotype Corsiva"); +linearScale.FontStyle = Windows.UI.Text.FontStyle.Italic; +linearScale.ScaleBarSize = 10; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +linearScale.MinorTicksPerInterval = 3; +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Label font customization image](Labels_images/Labels_img2.png) +![UWP Linear Gauge label font customization](Labels_images/Labels_img2.png) ## 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/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_LabelPosition) property. The default value of [`LabelPosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_LabelPosition) property is below. +The labels in the scale can be placed above or below the linear scale by choosing one of the following options available in the [`LabelPosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_LabelPosition) property. The default value of the [`LabelPosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_LabelPosition) property is Below. 1. Above 2. Below (Default) @@ -147,59 +111,41 @@ The labels in the scale can be placed above or below the linear scale by choosin {% highlight xml %} - - - - - - - - - - - + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.Interval = 10; - - linearScale.LabelSize = 15; - - linearScale.LabelPosition = LinearLabelsPosition.Above; - - linearScale.ScaleBarSize = 10; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - linearScale.MinorTicksPerInterval = 3; - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.Interval = 10; +linearScale.LabelSize = 15; +linearScale.LabelPosition = LinearLabelsPosition.Above; +linearScale.ScaleBarSize = 10; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +linearScale.MinorTicksPerInterval = 3; +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Label position image](Labels_images/Labels_img3.png) +![UWP Linear Gauge label position](Labels_images/Labels_img3.png) ## Setting postfix and prefix for labels @@ -207,68 +153,49 @@ You can postfix and prefix values to the scale labels using the [`LabelPostfix`] ### Setting label postfix -The [`LabelPostfix`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_LabelPostfix) property allows to postfix the values to scale labels. +The [`LabelPostfix`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_LabelPostfix) property allows you to postfix values to the scale labels. {% tabs %} {% highlight xml %} - - - - - - - - - - - + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.Interval = 10; - - linearScale.LabelSize = 15; - - linearScale.Minimum = 0; - - linearScale.Maximum = 50; - - linearScale.LabelPostfix = "%"; - - linearScale.ScaleBarSize = 10; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.Interval = 10; +linearScale.LabelSize = 15; +linearScale.Minimum = 0; +linearScale.Maximum = 50; +linearScale.LabelPostfix = "%"; +linearScale.ScaleBarSize = 10; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Label postfix image](Labels_images/Labels_img4.png) +![UWP Linear Gauge label postfix](Labels_images/Labels_img4.png) ### Setting label prefix @@ -278,61 +205,42 @@ The [`LabelPrefix`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges {% highlight xml %} - - - - - - - - - - - + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.Interval = 10; - - linearScale.LabelSize = 15; - - linearScale.Minimum = 0; - - linearScale.Maximum = 50; - - linearScale.LabelPostfix = "$"; - - linearScale.ScaleBarSize = 10; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.Interval = 10; +linearScale.LabelSize = 15; +linearScale.Minimum = 0; +linearScale.Maximum = 50; +linearScale.LabelPrefix = "$"; +linearScale.ScaleBarSize = 10; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Label prefix image](Labels_images/Labels_img5.png) +![UWP Linear Gauge label prefix](Labels_images/Labels_img5.png) ## Setting label offset @@ -342,171 +250,143 @@ The labels can be positioned far away from the ticks using the [`LabelOffset`](h {% highlight xml %} - - - - - - - - - - - + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.ScaleBarSize = 10; - - linearScale.LabelOffset = 15; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.ScaleBarSize = 10; +linearScale.LabelOffset = 15; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Custom labels image](Labels_images/Labels_img6.png) +![UWP Linear Gauge label offset](Labels_images/Labels_img6.png) ## Labels visibility -Labels visibility can be customized using the [`ShowLabels`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ShowLabels) property of linear scale. +Label visibility can be customized using the [`ShowLabels`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ShowLabels) property of the linear scale. {% tabs %} {% highlight xml %} - - - - - - - - - - - + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.ScaleBarSize = 10; - - linearScale.ShowLabels = false; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.ScaleBarSize = 10; +linearScale.ShowLabels = false; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Labels visibility image](Labels_images/Labels_img7.png) +![UWP Linear Gauge labels visibility](Labels_images/Labels_img7.png) ## Customize the scale labels - -The scale label are customized by using `LabelFormat` and `Culture` properties of linear scale. -`LabelFormat` property is used to change the format of labels by setting a formatting string on the `LabelFormat` property. -`Culture` property is used to format the group separator of the value based on the respective culture. +The scale labels can be customized using the [`LabelFormat`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_LabelFormat) and [`Culture`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Culture) properties of the linear scale. + +The [`LabelFormat`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_LabelFormat) property is used to change the format of labels by setting a formatting string on the `LabelFormat` property. +The [`Culture`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Culture) property is used to format the group separator of the value based on the respective culture. {% tabs %} {% highlight xaml %} - - - - - - - - - - - - + + + + + + + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge linearGauge = new SfLinearGauge(); - LinearScale linearScale = new LinearScale(); - linearScale.MaximumLabels = 4; - linearScale.ScaleOffset = 50; - linearScale.Minimum = 10; - linearScale.Maximum = 50; - linearScale.Interval = 10; - linearScale.ScaleBarStroke = new SolidColorBrush(Colors.LightGray); - linearScale.MinorTicksPerInterval = 1; - linearScale.LabelSize = 20; - linearScale.LabelFormat = "{0:c}"; - linearScale.LabelOffset = 10; - linearScale.ScaleBarSize = 10; - linearScale.MinorTicksPerInterval = 1; - linearScale.LabelStroke = new SolidColorBrush(Colors.Black); - LinearPointer barPointer = new LinearPointer(); - barPointer.BarPointerStrokeThickness = 10; - barPointer.PointerType = LinearPointerType.BarPointer; - barPointer.BarPointerStroke = new SolidColorBrush(Colors.Red); - barPointer.Value = 35; - linearScale.Pointers.Add(barPointer); - LinearRange linearRange = new LinearRange(); - linearRange.StartValue = 0; - linearRange.EndValue = 30; - linearRange.StartWidth = 10; - linearRange.EndWidth = 10; - linearRange.RangeStroke = new SolidColorBrush(Colors.Blue); - linearRange.RangeOffset = 5; - linearScale.Ranges.Add(linearRange); - linearGauge.MainScale=linearScale; - linearScale.Culture = new System.Globalization.CultureInfo("fr-FR"); - +SfLinearGauge linearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.MaximumLabels = 4; +linearScale.ScaleOffset = 50; +linearScale.Minimum = 10; +linearScale.Maximum = 50; +linearScale.Interval = 10; +linearScale.ScaleBarStroke = new SolidColorBrush(Colors.LightGray); +linearScale.MinorTicksPerInterval = 1; +linearScale.LabelSize = 20; +linearScale.LabelFormat = "{0:c}"; +linearScale.LabelOffset = 10; +linearScale.ScaleBarSize = 10; +linearScale.LabelStroke = new SolidColorBrush(Colors.Black); + +LinearPointer barPointer = new LinearPointer(); +barPointer.BarPointerStrokeThickness = 10; +barPointer.PointerType = LinearPointerType.BarPointer; +barPointer.BarPointerStroke = new SolidColorBrush(Colors.Red); +barPointer.Value = 35; +linearScale.Pointers.Add(barPointer); + +LinearRange linearRange = new LinearRange(); +linearRange.StartValue = 0; +linearRange.EndValue = 30; +linearRange.StartWidth = 10; +linearRange.EndWidth = 10; +linearRange.RangeStroke = new SolidColorBrush(Colors.Blue); +linearRange.RangeOffset = 5; +linearScale.Ranges.Add(linearRange); +linearGauge.MainScale = linearScale; +linearScale.Culture = new System.Globalization.CultureInfo("fr-FR"); + {% endhighlight %} {% endtabs %} -![Label format Image](Labels_images/labelFormat.png) +![UWP Linear Gauge label format](Labels_images/labelFormat.png) diff --git a/uwp/Linear-Gauge/Orientation.md b/uwp/Linear-Gauge/Orientation.md index a02c638db..cc7042daa 100644 --- a/uwp/Linear-Gauge/Orientation.md +++ b/uwp/Linear-Gauge/Orientation.md @@ -3,66 +3,49 @@ layout: post title: Orientation in UWP Linear Gauge control | Syncfusion description: Learn here all about Orientation support in Syncfusion UWP Linear Gauge (SfLinearGauge) control and more. platform: uwp -control: Orientation +control: SfLinearGauge documentation: ug --- # Orientation in UWP Linear Gauge (SfLinearGauge) -The [`LinearGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html) control supports horizontal and vertical orientations. By default, the [`LinearGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html) is rendered with horizontal orientation. You can change the orientation using the [`Orientation`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html#Syncfusion_UI_Xaml_Gauges_SfLinearGauge_Orientation) property. +The [`SfLinearGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html) control supports horizontal and vertical orientations. By default, the [`SfLinearGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html) is rendered with horizontal orientation. You can change the orientation using the [`Orientation`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html#Syncfusion_UI_Xaml_Gauges_SfLinearGauge_Orientation) property. {% tabs %} {% highlight xml %} - - - - - - - - - - - + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - sfLinearGauge.Orientation = Orientation.Vertical; - - LinearScale linearScale = new LinearScale(); - - linearScale.Interval = 10; - - linearScale.LabelSize = 15; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - linearScale.MinorTicksPerInterval = 3; - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +sfLinearGauge.Orientation = Orientation.Vertical; +LinearScale linearScale = new LinearScale(); +linearScale.Interval = 10; +linearScale.LabelSize = 15; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +linearScale.MinorTicksPerInterval = 3; +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Orientation_img1](Orientation_images/Orientation_img1.png) +![UWP Linear Gauge orientation](Orientation_images/Orientation_img1.png) diff --git a/uwp/Linear-Gauge/Overview.md b/uwp/Linear-Gauge/Overview.md index 2e31983fd..744d65143 100644 --- a/uwp/Linear-Gauge/Overview.md +++ b/uwp/Linear-Gauge/Overview.md @@ -8,29 +8,28 @@ documentation: ug --- # UWP Linear Gauge (SfLinearGauge) Overview -[`SfLinearGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.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 it is present in the horizontal, vertical sliding, or meter. +The [`SfLinearGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.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 it is present in the horizontal, vertical sliding, or meter. -[`SfLinearGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html) is used to visualize the numerical values of a scale in linear manner. By using the [`SfLinearGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html) control, it is possible to render the thermometer. +The [`SfLinearGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html) is used to visualize the numerical values of a scale in a linear manner. By using the [`SfLinearGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html) control, it is possible to render the thermometer. ## Key features ### Scale -The [`Scale`](https://help.syncfusion.com/uwp/linear-gauge/scales) supports to adding multiple scales on linear gauge by horizontal and vertical orientations. +The [`Scale`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html) supports adding multiple scales on the linear gauge with horizontal and vertical orientations. ### Ranges -Highlights the desired [`Ranges`](https://help.syncfusion.com/uwp/sflineargauge/ranges) of values in the gauge scale. +Highlights the desired [`Ranges`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearRange.html) of values in the gauge scale. ### Pointers -The [`Pointers`](https://help.syncfusion.com/uwp/sflineargauge/pointers) supports to add multiple pointers (bar and symbol) on the linear scale. +The [`Pointers`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearPointer.html) support adding multiple pointers (bar and symbol) on the linear scale. ### Annotations -Annotations are used to mark the specific area of interest in the gauge area with texts, shapes, or images. You can add any number of annotations to the gauge. +[`Annotations`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html#Syncfusion_UI_Xaml_Gauges_SfLinearGauge_Annotations) are used to mark the specific area of interest in the gauge area with texts, shapes, or images. You can add any number of annotations to the gauge. - -![Overview_img1](Overview_images/Overview_img1.jpeg) +![UWP Linear Gauge overview](Overview_images/Overview_img1.jpeg) diff --git a/uwp/Linear-Gauge/Pointers.md b/uwp/Linear-Gauge/Pointers.md index 064bb07ca..e92842d51 100644 --- a/uwp/Linear-Gauge/Pointers.md +++ b/uwp/Linear-Gauge/Pointers.md @@ -9,621 +9,425 @@ documentation: ug # Pointers in UWP Linear Gauge (SfLinearGauge) -The [`LinearGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html) provides support to mark values using the `BarPointer` and `SymbolPointer`. +The [`SfLinearGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html) provides support to mark values using the `BarPointer` and `SymbolPointer`. ## 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/uwp/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_PointerType) property. +The `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/uwp/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_PointerType) property. {% tabs %} {% highlight xml %} - - - - - - - - - - - - - - - - + + + + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.ScaleBarLength = 300; - - linearScale.LabelSize = 15; - - LinearPointer linearPointer1 = new LinearPointer(); - - linearPointer1.PointerType = LinearPointerType.BarPointer; - - linearPointer1.Value = 75; - - linearPointer1.BarPointerStroke = new SolidColorBrush(Color.FromArgb(0xff,0x36,0xD1,0xDC)); - - linearScale.Pointers.Add(linearPointer1); - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.ScaleBarLength = 300; +linearScale.LabelSize = 15; + +LinearPointer linearPointer1 = new LinearPointer(); +linearPointer1.PointerType = LinearPointerType.BarPointer; +linearPointer1.Value = 75; +linearPointer1.BarPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x36, 0xD1, 0xDC)); +linearScale.Pointers.Add(linearPointer1); +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Pointers_img1](Pointers_images/Pointers_img1.png) +![UWP Linear Gauge bar pointer](Pointers_images/Pointers_img1.png) ### Bar pointer customization -The UI of `Bar pointer` is customized using the [`BarPointerStroke`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_BarPointerStroke) and [`BarPointerStrokeThickness`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_BarPointerStrokeThickness) properties. +The UI of the bar pointer is customized using the [`BarPointerStroke`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_BarPointerStroke) and [`BarPointerStrokeThickness`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_BarPointerStrokeThickness) properties. {% tabs %} {% highlight xml %} - - - - - - - - - - - - - - - - + + + + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.ScaleBarLength = 300; - - linearScale.LabelSize = 15; - - LinearPointer linearPointer1 = new LinearPointer(); - - linearPointer1.PointerType = LinearPointerType.BarPointer; - - linearPointer1.Value = 75; - - linearPointer1.BarPointerStroke = new SolidColorBrush(Colors.Orange); - - linearPointer1.BarPointerStrokeThickness = 20; - - linearScale.Pointers.Add(linearPointer1); - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.ScaleBarLength = 300; +linearScale.LabelSize = 15; + +LinearPointer linearPointer1 = new LinearPointer(); +linearPointer1.PointerType = LinearPointerType.BarPointer; +linearPointer1.Value = 75; +linearPointer1.BarPointerStroke = new SolidColorBrush(Colors.Orange); +linearPointer1.BarPointerStrokeThickness = 20; +linearScale.Pointers.Add(linearPointer1); +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Pointers_img2](Pointers_images/Pointers_img2.png) +![UWP Linear Gauge bar pointer customization](Pointers_images/Pointers_img2.png) ## Setting corner radius type for bar pointer -Corners of the `BarPointer` can be customized by setting the value to the -[`CornerRadius`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_CornerRadius) property. +Corners of the `BarPointer` can be customized by setting a value to the [`CornerRadius`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_CornerRadius) property. {% tabs %} {% highlight xaml %} - - - - - - - - - - - - - - - - - - - + + + + + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.ScaleBarLength = 300; - - linearScale.LabelSize = 15; - - LinearPointer linearPointer1 = new LinearPointer(); - - linearPointer1.PointerType = LinearPointerType.BarPointer; - - linearPointer1.Value = 75; - - linearPointer1.BarPointerStrokeThickness = 20; - - linearPointer1.BarPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x36, 0xD1, 0xDC)); - - linearPointer1.CornerRadius = new Windows.UI.Xaml.CornerRadius(10,0,0,10); +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.ScaleBarLength = 300; +linearScale.LabelSize = 15; + +LinearPointer linearPointer1 = new LinearPointer(); +linearPointer1.PointerType = LinearPointerType.BarPointer; +linearPointer1.Value = 75; +linearPointer1.BarPointerStrokeThickness = 20; +linearPointer1.BarPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x36, 0xD1, 0xDC)); +linearPointer1.CornerRadius = new Windows.UI.Xaml.CornerRadius(10, 0, 0, 10); +linearScale.Pointers.Add(linearPointer1); +sfLinearGauge.MainScale = linearScale; - linearScale.Pointers.Add(linearPointer1); - - sfLinearGauge.MainScale = linearScale; - -{% endhighlight %} +{% endhighlight %} {% endtabs %} -![Pointers_img3](Pointers_images/Pointers_img3.png) +![UWP Linear Gauge bar pointer corner radius](Pointers_images/Pointers_img3.png) ## Setting gradient color for bar pointer -You can give smooth color transition to bar pointer to specifying the different colors based on bar pointer’s value by using [`GradientStops`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_GradientStops) property. +You can give a smooth color transition to a bar pointer by specifying different colors based on the bar pointer's value using the [`GradientStops`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_GradientStops) property. {% tabs %} {% highlight xml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + {% endhighlight %} {% highlight c# %} - - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.ScaleBarStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xF7, 0xED, 0xED)); - - linearScale.ScaleBarLength = 300; - - linearScale.LabelSize = 15; - - linearScale.CornerRadius = new Windows.UI.Xaml.CornerRadius(10); - - LinearPointer linearPointer1 = new LinearPointer(); - - linearPointer1.PointerType = LinearPointerType.BarPointer; - - linearPointer1.Value = 75; - - GaugeGradientStop gaugeGradientStop = new GaugeGradientStop(); - - gaugeGradientStop.Value = 10; - - gaugeGradientStop.Color = Color.FromArgb(0xff, 0xF8, 0xBA, 0xBF); - - linearPointer1.GradientStops.Add(gaugeGradientStop); - - GaugeGradientStop gaugeGradientStop1 = new GaugeGradientStop(); - - gaugeGradientStop1.Value = 40; - - gaugeGradientStop1.Color = Color.FromArgb(0xff, 0xEE, 0x89, 0xA7); - - linearPointer1.GradientStops.Add(gaugeGradientStop1); - - GaugeGradientStop gaugeGradientStop2 = new GaugeGradientStop(); - - gaugeGradientStop2.Value = 50; - - gaugeGradientStop2.Color = Color.FromArgb(0xff, 0xE4, 0x54, 0x8C); - - linearPointer1.GradientStops.Add(gaugeGradientStop2); - - GaugeGradientStop gaugeGradientStop3 = new GaugeGradientStop(); - - gaugeGradientStop3.Value = 60; - - gaugeGradientStop3.Color = Color.FromArgb(0xff, 0xDB, 0x25, 0x75); - - linearPointer1.GradientStops.Add(gaugeGradientStop3); - - linearPointer1.BarPointerStrokeThickness = 20; - - linearPointer1.CornerRadius = new Windows.UI.Xaml.CornerRadius(10); - - linearScale.Pointers.Add(linearPointer1); - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.ScaleBarStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xF7, 0xED, 0xED)); +linearScale.ScaleBarLength = 300; +linearScale.LabelSize = 15; +linearScale.CornerRadius = new Windows.UI.Xaml.CornerRadius(10); + +LinearPointer linearPointer1 = new LinearPointer(); +linearPointer1.PointerType = LinearPointerType.BarPointer; +linearPointer1.Value = 75; +GaugeGradientStop gaugeGradientStop = new GaugeGradientStop(); +gaugeGradientStop.Value = 10; +gaugeGradientStop.Color = Color.FromArgb(0xff, 0xF8, 0xBA, 0xBF); +linearPointer1.GradientStops.Add(gaugeGradientStop); +GaugeGradientStop gaugeGradientStop1 = new GaugeGradientStop(); +gaugeGradientStop1.Value = 40; +gaugeGradientStop1.Color = Color.FromArgb(0xff, 0xEE, 0x89, 0xA7); +linearPointer1.GradientStops.Add(gaugeGradientStop1); +GaugeGradientStop gaugeGradientStop2 = new GaugeGradientStop(); +gaugeGradientStop2.Value = 50; +gaugeGradientStop2.Color = Color.FromArgb(0xff, 0xE4, 0x54, 0x8C); +linearPointer1.GradientStops.Add(gaugeGradientStop2); +GaugeGradientStop gaugeGradientStop3 = new GaugeGradientStop(); +gaugeGradientStop3.Value = 60; +gaugeGradientStop3.Color = Color.FromArgb(0xff, 0xDB, 0x25, 0x75); +linearPointer1.GradientStops.Add(gaugeGradientStop3); +linearPointer1.BarPointerStrokeThickness = 20; +linearPointer1.CornerRadius = new Windows.UI.Xaml.CornerRadius(10); +linearScale.Pointers.Add(linearPointer1); +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Pointers_img4](Pointers_images/Pointers_img4.png) +![UWP Linear Gauge bar pointer gradient color](Pointers_images/Pointers_img4.png) ## Symbol pointer -In `SymbolPointer`, the value is pointed by a symbol on the scale. +In a `SymbolPointer`, the value is pointed by a symbol on the scale. {% tabs %} {% highlight xml %} - - - - - - - - - - - - - - - - - + + + + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.ScaleBarLength = 300; - - linearScale.LabelSize = 15; - - LinearPointer linearPointer = new LinearPointer(); - - linearPointer.PointerType = LinearPointerType.SymbolPointer; - - linearPointer.Value = 60; - - linearScale.Pointers.Add(linearPointer); - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.ScaleBarLength = 300; +linearScale.LabelSize = 15; +LinearPointer linearPointer = new LinearPointer(); +linearPointer.PointerType = LinearPointerType.SymbolPointer; +linearPointer.Value = 60; +linearScale.Pointers.Add(linearPointer); +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Pointers_img5](Pointers_images/Pointers_img5.png) +![UWP Linear Gauge symbol pointer](Pointers_images/Pointers_img5.png) ### Symbol pointer customization -You can modify the size of symbol pointer by changing the [`SymbolPointerHeight`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_SymbolPointerHeight) and [`SymbolPointerWidth`](https://help.syncfusion.com/cr/uwp/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/uwp/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/uwp/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_SymbolPointerHeight) and [`SymbolPointerWidth`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_SymbolPointerWidth) properties. The stroke of the symbol pointer can be changed using the [`SymbolPointerStroke`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_SymbolPointerStroke) property. {% tabs %} {% highlight xml %} - - - - - - - - - - - - - - - - - + + + + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.ScaleBarLength = 300; - - linearScale.LabelSize = 15; - - LinearPointer linearPointer = new LinearPointer(); - - linearPointer.PointerType = LinearPointerType.SymbolPointer; - - linearPointer.Value = 60; - - linearPointer.SymbolPointerHeight = 15; - - linearPointer.SymbolPointerWidth = 20; - - linearPointer.SymbolPointerStroke = new SolidColorBrush(Colors.DeepSkyBlue); - - linearScale.Pointers.Add(linearPointer); - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.ScaleBarLength = 300; +linearScale.LabelSize = 15; +LinearPointer linearPointer = new LinearPointer(); +linearPointer.PointerType = LinearPointerType.SymbolPointer; +linearPointer.Value = 60; +linearPointer.SymbolPointerHeight = 15; +linearPointer.SymbolPointerWidth = 20; +linearPointer.SymbolPointerStroke = new SolidColorBrush(Colors.DeepSkyBlue); +linearScale.Pointers.Add(linearPointer); +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Pointers_img6](Pointers_images/Pointers_img6.png) +![UWP Linear Gauge symbol pointer customization](Pointers_images/Pointers_img6.png) ## Positioning symbol pointer -The `SymbolPointer` in the scale can be placed above, below, or in between the scale by choosing the following options available in the [`SymbolPointerPosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_SymbolPointerPosition) property: +The `SymbolPointer` in the scale can be placed above, below, or across the scale by choosing one of the following options available in the [`SymbolPointerPosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_SymbolPointerPosition) property: 1. Above 2. Below (Default) 3. Cross -4. Away +4. Away {% tabs %} {% highlight xml %} - - - - - - - - - - - - - - - - - + + + + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.ScaleBarLength = 300; - - linearScale.LabelSize = 15; - - LinearPointer linearPointer = new LinearPointer(); - - linearPointer.PointerType = LinearPointerType.SymbolPointer; - - linearPointer.Value = 60; - - linearPointer.SymbolPointerPosition = LinearSymbolPointersPosition.Cross; - - linearPointer.SymbolPointerHeight = 30; - - linearPointer.SymbolPointerWidth = 30; - - linearPointer.SymbolPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x5B, 0x86, 0xE5)); - - linearScale.Pointers.Add(linearPointer); - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.ScaleBarLength = 300; +linearScale.LabelSize = 15; +LinearPointer linearPointer = new LinearPointer(); +linearPointer.PointerType = LinearPointerType.SymbolPointer; +linearPointer.Value = 60; +linearPointer.SymbolPointerPosition = LinearSymbolPointersPosition.Cross; +linearPointer.SymbolPointerHeight = 30; +linearPointer.SymbolPointerWidth = 30; +linearPointer.SymbolPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x5B, 0x86, 0xE5)); +linearScale.Pointers.Add(linearPointer); +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Pointers_img7](Pointers_images/Pointers_img7.png) +![UWP Linear Gauge symbol pointer positioning](Pointers_images/Pointers_img7.png) ### Change symbol pointer shapes -The [`SymbolPointerStyle`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_SymbolPointerStyle) property is used to select symbol pointer style. +The [`SymbolPointerStyle`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_SymbolPointerStyle) property is used to select the symbol pointer style. {% tabs %} {% highlight xml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.ScaleBarLength = 300; - - linearScale.LabelSize = 15; - - LinearPointer linearPointer = new LinearPointer(); - - linearPointer.PointerType = LinearPointerType.SymbolPointer; - - linearPointer.Value = 60; - - var content = ""; - - content += ""; - - content += ""; - - content += "" + ""; - - content += ""; - - linearPointer.SymbolPointerStyle = LinearSymbolPointerStyle.Custom; - - linearPointer.SymbolPointerTemplate = (DataTemplate)XamlReader.Load(content); - - linearScale.Pointers.Add(linearPointer); - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.ScaleBarLength = 300; +linearScale.LabelSize = 15; +LinearPointer linearPointer = new LinearPointer(); +linearPointer.PointerType = LinearPointerType.SymbolPointer; +linearPointer.Value = 60; +var content = ""; +content += ""; +content += ""; +content += "" + ""; +content += ""; +linearPointer.SymbolPointerStyle = LinearSymbolPointerStyle.Custom; +linearPointer.SymbolPointerTemplate = (DataTemplate)XamlReader.Load(content); +linearScale.Pointers.Add(linearPointer); +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Pointers_img8](Pointers_images/Pointers_img8.png) +![UWP Linear Gauge symbol pointer shapes](Pointers_images/Pointers_img8.png) ### Adding multiple pointers @@ -633,81 +437,51 @@ In addition to the default pointer, you can add "n" number of pointers to a line {% highlight xml %} - - - - - - - - - - - - - - - - - - - + + + + + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.ScaleBarLength = 300; - - linearScale.LabelSize = 15; - - LinearPointer linearPointer1 = new LinearPointer(); - - linearPointer1.PointerType = LinearPointerType.BarPointer; - - linearPointer1.Value = 75; - - linearPointer1.BarPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x36, 0xD1, 0xDC)); - - linearPointer1.BarPointerStrokeThickness = 10; - - linearScale.Pointers.Add(linearPointer1); - - LinearPointer linearPointer = new LinearPointer(); - - linearPointer.PointerType = LinearPointerType.SymbolPointer; - - linearPointer.Value = 60; - - linearPointer.SymbolPointerHeight = 15; - - linearPointer.SymbolPointerWidth = 15; - - linearPointer.SymbolPointerPosition = LinearSymbolPointersPosition.Above; - - linearPointer.SymbolPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x5B, 0x86, 0xE5)); - - linearScale.Pointers.Add(linearPointer); - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.ScaleBarLength = 300; +linearScale.LabelSize = 15; +LinearPointer linearPointer1 = new LinearPointer(); +linearPointer1.PointerType = LinearPointerType.BarPointer; +linearPointer1.Value = 75; +linearPointer1.BarPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x36, 0xD1, 0xDC)); +linearPointer1.BarPointerStrokeThickness = 10; +linearScale.Pointers.Add(linearPointer1); +LinearPointer linearPointer = new LinearPointer(); +linearPointer.PointerType = LinearPointerType.SymbolPointer; +linearPointer.Value = 60; +linearPointer.SymbolPointerHeight = 15; +linearPointer.SymbolPointerWidth = 15; +linearPointer.SymbolPointerPosition = LinearSymbolPointersPosition.Above; +linearPointer.SymbolPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x5B, 0x86, 0xE5)); +linearScale.Pointers.Add(linearPointer); +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Pointers_img9](Pointers_images/Pointers_img9.png) +![UWP Linear Gauge multiple pointers](Pointers_images/Pointers_img9.png) diff --git a/uwp/Linear-Gauge/Ranges.md b/uwp/Linear-Gauge/Ranges.md index 827b5e4ea..82da4e4b7 100644 --- a/uwp/Linear-Gauge/Ranges.md +++ b/uwp/Linear-Gauge/Ranges.md @@ -9,7 +9,7 @@ documentation: ug # Ranges in UWP 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 [`LinearRange`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearRange.html) 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 an array of range objects. ## Setting start and end values for range @@ -19,701 +19,476 @@ The start and end values of ranges are set using the [`StartValue`](https://help {% highlight xml %} - - - - - - - - - - - - - - - - - + + + + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.Interval = 10; - - linearScale.LabelSize = 15; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - linearScale.MinorTicksPerInterval = 3; - - sfLinearGauge.MainScale = linearScale; - - LinearRange linearRange = new LinearRange(); - - linearRange.StartValue = 0; - - linearRange.EndValue = 60; - - linearRange.RangeStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x27, 0xBE, 0xB7)); - - linearRange.StartWidth = 10; - - linearRange.EndWidth = 10; - - linearRange.RangeOffset = 0.4; - - linearScale.Ranges.Add(linearRange); - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.Interval = 10; +linearScale.LabelSize = 15; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +linearScale.MinorTicksPerInterval = 3; +sfLinearGauge.MainScale = linearScale; +LinearRange linearRange = new LinearRange(); +linearRange.StartValue = 0; +linearRange.EndValue = 60; +linearRange.RangeStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x27, 0xBE, 0xB7)); +linearRange.StartWidth = 10; +linearRange.EndWidth = 10; +linearRange.RangeOffset = 0.4; +linearScale.Ranges.Add(linearRange); +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Ranges_img1](Ranges_images/Ranges_img1.png) +![UWP Linear Gauge range start and end values](Ranges_images/Ranges_img1.png) ## Range customization -The UI element of a range is customized by changing the [`RangeStroke`](https://help.syncfusion.com/cr/uwp/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/uwp/Syncfusion.UI.Xaml.Gauges.LinearRange.html#Syncfusion_UI_Xaml_Gauges_LinearRange_StartWidth) and [`EndWidth`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearRange.html#Syncfusion_UI_Xaml_Gauges_LinearRange_EndWidth) properties. By setting the [`RangeOpacity`](https://help.syncfusion.com/cr/uwp/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/uwp/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/uwp/Syncfusion.UI.Xaml.Gauges.LinearRange.html#Syncfusion_UI_Xaml_Gauges_LinearRange_StartWidth) and [`EndWidth`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearRange.html#Syncfusion_UI_Xaml_Gauges_LinearRange_EndWidth) properties. By setting the [`RangeOpacity`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearRange.html#Syncfusion_UI_Xaml_Gauges_LinearRange_RangeOpacity) property of the [`LinearRange`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearRange.html), the opacity of the range can be modified. {% tabs %} {% highlight xml %} - - - - - - - - - - - - - - - - - + + + + + + + + + {% endhighlight %} {% highlight c# %} - - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.Interval = 10; - - linearScale.LabelSize = 15; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - linearScale.MinorTicksPerInterval = 3; - - sfLinearGauge.MainScale = linearScale; - - LinearRange linearRange = new LinearRange(); - - linearRange.StartValue = 0; - - linearRange.EndValue = 50; - - linearRange.RangeOpacity = 1; - - linearRange.RangeStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xF9, 0x5C, 0x85)); - - linearRange.StartWidth = 5; - - linearRange.EndWidth = 20; - - linearScale.Ranges.Add(linearRange); - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.Interval = 10; +linearScale.LabelSize = 15; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +linearScale.MinorTicksPerInterval = 3; +sfLinearGauge.MainScale = linearScale; + +LinearRange linearRange = new LinearRange(); +linearRange.StartValue = 0; +linearRange.EndValue = 50; +linearRange.RangeOpacity = 1; +linearRange.RangeStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xF9, 0x5C, 0x85)); +linearRange.StartWidth = 5; +linearRange.EndWidth = 20; +linearScale.Ranges.Add(linearRange); +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Ranges_img2](Ranges_images/Ranges_img2.png) +![UWP Linear Gauge range customization](Ranges_images/Ranges_img2.png) ## 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/uwp/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/uwp/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/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_BindRangeStrokeToLabels) property. 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/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_BindRangeStrokeToTicks) property, the stroke of the ticks can be set related to the stroke of the specified ranges. {% tabs %} {% highlight xml %} - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.Interval = 10; - - linearScale.LabelSize = 15; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - linearScale.MinorTicksPerInterval = 3; - - linearScale.BindRangeStrokeToLabels = true; - - linearScale.BindRangeStrokeToTicks = true; - - sfLinearGauge.MainScale = linearScale; - - LinearRange linearRange = new LinearRange(); - - linearRange.StartValue = 0; - - linearRange.EndValue = 35; - - linearRange.StartWidth = 15; - - linearRange.EndWidth = 15; - - linearRange.RangeOffset = 5; - - linearRange.RangeStroke = new SolidColorBrush(Colors.Green); - - linearScale.Ranges.Add(linearRange); - - LinearRange linearRange1 = new LinearRange(); - - linearRange1.StartValue = 35; - - linearRange1.EndValue = 65; - - linearRange1.StartWidth = 15; - - linearRange1.EndWidth = 15; - - linearRange1.RangeOffset = 5; - - linearRange1.RangeStroke = new SolidColorBrush(Colors.Yellow); - - linearScale.Ranges.Add(linearRange1); - - LinearRange linearRange2 = new LinearRange(); - - linearRange2.StartValue = 65; - - linearRange2.EndValue = 100; - - linearRange2.StartWidth = 15; - - linearRange2.EndWidth = 15; - - linearRange2.RangeOffset = 5; - - linearRange2.RangeStroke = new SolidColorBrush(Colors.Red); - - linearScale.Ranges.Add(linearRange2); +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.Interval = 10; +linearScale.LabelSize = 15; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +linearScale.MinorTicksPerInterval = 3; +linearScale.BindRangeStrokeToLabels = true; +linearScale.BindRangeStrokeToTicks = true; +sfLinearGauge.MainScale = linearScale; + +LinearRange linearRange = new LinearRange(); +linearRange.StartValue = 0; +linearRange.EndValue = 35; +linearRange.StartWidth = 15; +linearRange.EndWidth = 15; +linearRange.RangeOffset = 5; +linearRange.RangeStroke = new SolidColorBrush(Colors.Green); +linearScale.Ranges.Add(linearRange); + +LinearRange linearRange1 = new LinearRange(); +linearRange1.StartValue = 35; +linearRange1.EndValue = 65; +linearRange1.StartWidth = 15; +linearRange1.EndWidth = 15; +linearRange1.RangeOffset = 5; +linearRange1.RangeStroke = new SolidColorBrush(Colors.Yellow); +linearScale.Ranges.Add(linearRange1); + +LinearRange linearRange2 = new LinearRange(); +linearRange2.StartValue = 65; +linearRange2.EndValue = 100; +linearRange2.StartWidth = 15; +linearRange2.EndWidth = 15; +linearRange2.RangeOffset = 5; +linearRange2.RangeStroke = new SolidColorBrush(Colors.Red); +linearScale.Ranges.Add(linearRange2); {% endhighlight %} {% endtabs %} -![Ranges_img3](Ranges_images/Ranges_img3.png) +![UWP Linear Gauge binding range stroke to ticks and labels](Ranges_images/Ranges_img3.png) ## Setting range position - Using the [`RangeOffset`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearRange.html#Syncfusion_UI_Xaml_Gauges_LinearRange_RangeOffset) property, the linear range can be positioned with respect to the linear scale. +Using the [`RangeOffset`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearRange.html#Syncfusion_UI_Xaml_Gauges_LinearRange_RangeOffset) property, the linear range can be positioned with respect to the linear scale. {% tabs %} {% highlight xml %} - - - - - - - - - - - - - - - - - + + + + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.Interval = 10; - - linearScale.LabelSize = 15; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - linearScale.MinorTicksPerInterval = 3; - - sfLinearGauge.MainScale = linearScale; - - LinearRange linearRange = new LinearRange(); - - linearRange.StartValue = 0; - - linearRange.EndValue = 60; - - linearRange.RangeOffset = 40; - - linearRange.RangeStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x27, 0xBE, 0xB7)); - - linearRange.StartWidth = 10; - - linearRange.EndWidth = 10; - - linearScale.Ranges.Add(linearRange); +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.Interval = 10; +linearScale.LabelSize = 15; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +linearScale.MinorTicksPerInterval = 3; +sfLinearGauge.MainScale = linearScale; + +LinearRange linearRange = new LinearRange(); +linearRange.StartValue = 0; +linearRange.EndValue = 60; +linearRange.RangeOffset = 40; +linearRange.RangeStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x27, 0xBE, 0xB7)); +linearRange.StartWidth = 10; +linearRange.EndWidth = 10; +linearScale.Ranges.Add(linearRange); +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Ranges_img4](Ranges_images/Ranges_img4.png) +![UWP Linear Gauge range position](Ranges_images/Ranges_img4.png) ### Adding multiple ranges -You can add “n” number of ranges to a scale using the [`LinearRange`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearRange.html) property of range as shown in the following code. +You can add "n" number of ranges to a scale using the [`Ranges`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Ranges) property of the linear scale as shown in the following code. {% tabs %} {% highlight xml %} - - - - - - - - - - - - - - - - - - - + + + + + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.Interval = 10; - - linearScale.LabelSize = 15; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - linearScale.MinorTicksPerInterval = 3; - - sfLinearGauge.MainScale = linearScale; - - LinearRange linearRange = new LinearRange(); - - linearRange.StartValue = 0; - - linearRange.EndValue = 35; - - linearRange.StartWidth = 25; - - linearRange.EndWidth = 10; - - linearRange.RangeOffset = 5; - - linearRange.RangeOpacity = 1; - - linearRange.RangeStroke = new SolidColorBrush(Colors.Green); - - linearScale.Ranges.Add(linearRange); - - LinearRange linearRange1 = new LinearRange(); - - linearRange1.StartValue = 65; - - linearRange1.EndValue = 100; - - linearRange1.StartWidth = 10; - - linearRange1.EndWidth = 25; - - linearRange1.RangeOffset = 5; - - linearRange1.RangeOpacity = 1; - - linearRange1.RangeStroke = new SolidColorBrush(Colors.Red); - - linearScale.Ranges.Add(linearRange1); +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.Interval = 10; +linearScale.LabelSize = 15; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +linearScale.MinorTicksPerInterval = 3; +sfLinearGauge.MainScale = linearScale; + +LinearRange linearRange = new LinearRange(); +linearRange.StartValue = 0; +linearRange.EndValue = 35; +linearRange.StartWidth = 25; +linearRange.EndWidth = 10; +linearRange.RangeOffset = 5; +linearRange.RangeOpacity = 1; +linearRange.RangeStroke = new SolidColorBrush(Colors.Green); +linearScale.Ranges.Add(linearRange); + +LinearRange linearRange1 = new LinearRange(); +linearRange1.StartValue = 65; +linearRange1.EndValue = 100; +linearRange1.StartWidth = 10; +linearRange1.EndWidth = 25; +linearRange1.RangeOffset = 5; +linearRange1.RangeOpacity = 1; +linearRange1.RangeStroke = new SolidColorBrush(Colors.Red); +linearScale.Ranges.Add(linearRange1); {% endhighlight %} {% endtabs %} -![Ranges_img5](Ranges_images/Ranges_img5.png) +![UWP Linear Gauge multiple ranges](Ranges_images/Ranges_img5.png) ### Setting gradient color for range -You can give smooth color transition to range to specifying the different colors based on range value by using [`GradientStops`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearRange.html#Syncfusion_UI_Xaml_Gauges_LinearRange_GradientStops) property. +You can give a smooth color transition to a range by specifying different colors based on the range value using the [`GradientStops`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearRange.html#Syncfusion_UI_Xaml_Gauges_LinearRange_GradientStops) property. {% tabs %} {% highlight xml %} - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.Interval = 10; - - linearScale.LabelSize = 15; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - linearScale.MinorTicksPerInterval = 3; - - sfLinearGauge.MainScale = linearScale; - - LinearRange linearRange = new LinearRange(); - - linearRange.StartValue = 0; - - linearRange.EndValue = 100; - - linearRange.StartWidth = 20; - - linearRange.EndWidth = 20; - - linearRange.RangeOffset = 5; - - ObservableCollection gradientColor = new ObservableCollection() - { - new GaugeGradientStop() {Value = 0, Color = Color.FromArgb(0xff, 0xF9, 0xC2, 0xC3) }, - new GaugeGradientStop() {Value = 100 ,Color = Color.FromArgb(0xff, 0xD9, 0x1D, 0x71) } - }; - - linearRange.GradientStops = gradientColor; - - linearScale.Ranges.Add(linearRange); +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.Interval = 10; +linearScale.LabelSize = 15; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +linearScale.MinorTicksPerInterval = 3; +sfLinearGauge.MainScale = linearScale; + +LinearRange linearRange = new LinearRange(); +linearRange.StartValue = 0; +linearRange.EndValue = 100; +linearRange.StartWidth = 20; +linearRange.EndWidth = 20; +linearRange.RangeOffset = 5; +ObservableCollection gradientColor = new ObservableCollection() +{ + new GaugeGradientStop() { Value = 0, Color = Color.FromArgb(0xff, 0xF9, 0xC2, 0xC3) }, + new GaugeGradientStop() { Value = 100, Color = Color.FromArgb(0xff, 0xD9, 0x1D, 0x71) } +}; +linearRange.GradientStops = gradientColor; +linearScale.Ranges.Add(linearRange); +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Ranges_img6](Ranges_images/Ranges_img6.png) +![UWP Linear Gauge range gradient color](Ranges_images/Ranges_img6.png) ### Multiple range with multiple gradient -You can add “n” number of ranges with gradient color to a scale using the [`LinearRange`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearRange.html) property of range as shown in the following code. +You can add "n" number of ranges with gradient color to a scale using the [`Ranges`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Ranges) property of the linear scale as shown in the following code. {% tabs %} {% highlight xml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.Interval = 10; - - linearScale.LabelSize = 15; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - linearScale.MinorTicksPerInterval = 3; - - sfLinearGauge.MainScale = linearScale; - - LinearRange linearRange = new LinearRange(); - - linearRange.StartValue = 0; - - linearRange.EndValue = 35; - - linearRange.StartWidth = 25; - - linearRange.EndWidth = 10; - - linearRange.RangeOffset = 5; - - ObservableCollection gradientColor = new ObservableCollection() - { - new GaugeGradientStop() {Value = 0, Color = Color.FromArgb(0xff, 0xF9, 0xC2, 0xC3) }, - new GaugeGradientStop() {Value = 35 ,Color = Color.FromArgb(0xff, 0xD9, 0x1D, 0x71) } - }; - - linearRange.GradientStops = gradientColor; - - - linearScale.Ranges.Add(linearRange); - - LinearRange linearRange1 = new LinearRange(); - - linearRange1.StartValue = 65; - - linearRange1.EndValue = 100; - - linearRange1.StartWidth = 10; - - linearRange1.EndWidth = 25; - - linearRange1.RangeOffset = 5; - - ObservableCollection gradientColor1 = new ObservableCollection() - { - new GaugeGradientStop() {Value = 65, Color = Colors.Orange }, - new GaugeGradientStop() {Value = 100 ,Color = Colors.Yellow } - }; - - linearRange1.GradientStops = gradientColor1; - - linearScale.Ranges.Add(linearRange1); +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.Interval = 10; +linearScale.LabelSize = 15; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +linearScale.MinorTicksPerInterval = 3; +sfLinearGauge.MainScale = linearScale; +LinearRange linearRange = new LinearRange(); +linearRange.StartValue = 0; +linearRange.EndValue = 35; +linearRange.StartWidth = 25; +linearRange.EndWidth = 10; +linearRange.RangeOffset = 5; + +ObservableCollection gradientColor = new ObservableCollection() +{ + new GaugeGradientStop() { Value = 0, Color = Color.FromArgb(0xff, 0xF9, 0xC2, 0xC3) }, + new GaugeGradientStop() { Value = 35, Color = Color.FromArgb(0xff, 0xD9, 0x1D, 0x71) } +}; + +linearRange.GradientStops = gradientColor; +linearScale.Ranges.Add(linearRange); +LinearRange linearRange1 = new LinearRange(); +linearRange1.StartValue = 65; +linearRange1.EndValue = 100; +linearRange1.StartWidth = 10; +linearRange1.EndWidth = 25; +linearRange1.RangeOffset = 5; + +ObservableCollection gradientColor1 = new ObservableCollection() +{ + new GaugeGradientStop() { Value = 65, Color = Colors.Orange }, + new GaugeGradientStop() { Value = 100, Color = Colors.Yellow } +}; + +linearRange1.GradientStops = gradientColor1; +linearScale.Ranges.Add(linearRange1); {% endhighlight %} {% endtabs %} -![Ranges_img7](Ranges_images/Ranges_img7.png) +![UWP Linear Gauge multiple ranges with multiple gradients](Ranges_images/Ranges_img7.png) diff --git a/uwp/Linear-Gauge/Scales.md b/uwp/Linear-Gauge/Scales.md index 0527303f5..d856eb5dd 100644 --- a/uwp/Linear-Gauge/Scales.md +++ b/uwp/Linear-Gauge/Scales.md @@ -9,61 +9,43 @@ documentation: ug # Scales in UWP Linear Gauge (SfLinearGauge) -The [`MainScale`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html) 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/uwp/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 %} {% highlight xml %} - - - - - - - - - - - + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.Interval = 10; - - linearScale.LabelSize = 15; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - linearScale.MinorTicksPerInterval = 3; - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.Interval = 10; +linearScale.LabelSize = 15; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +linearScale.MinorTicksPerInterval = 3; +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Scales_img1](Scales_images/Scales_img1.png) +![UWP Linear Gauge scale](Scales_images/Scales_img1.png) ## Setting minimum and maximum values for a scale @@ -73,119 +55,87 @@ To change the minimum and maximum values of a linear scale, use the [`Minimum`]( {% highlight xml %} - - - - - - - - - - - + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.Minimum = 0; - - linearScale.Maximum = 200; - - linearScale.LabelSize = 15; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - linearScale.MinorTicksPerInterval = 3; - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.Minimum = 0; +linearScale.Maximum = 200; +linearScale.LabelSize = 15; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +linearScale.MinorTicksPerInterval = 3; +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Scales_img2](Scales_images/Scales_img2.png) +![UWP Linear Gauge minimum and maximum values](Scales_images/Scales_img2.png) ## Setting interval for a scale -The [`Interval`](https://help.syncfusion.com/cr/uwp/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/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Interval) property allows you to set intervals for a 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 %} {% highlight xml %} - - - - - - - - - - - + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.Minimum = 0; - - linearScale.Maximum = 500; - - linearScale.Interval = 100; - - linearScale.LabelSize = 15; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - linearScale.MinorTicksPerInterval = 3; - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.Minimum = 0; +linearScale.Maximum = 500; +linearScale.Interval = 100; +linearScale.LabelSize = 15; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +linearScale.MinorTicksPerInterval = 3; +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Scales_img3](Scales_images/Scales_img3.png) +![UWP Linear Gauge interval](Scales_images/Scales_img3.png) ## Scale customization @@ -195,342 +145,239 @@ You can customize the color, length, size, and position of the [`LinearScale`](h {% highlight xml %} - - - - - - - - - + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.ScaleBarStroke = new SolidColorBrush(Colors.Blue); - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.ScaleBarSize = 20; - - linearScale.ScaleBarBorderThickness = new Thickness(3); - - linearScale.ScaleBarBorderBrush = new SolidColorBrush(Colors.Red); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.MinorTicksPerInterval = 3; - - linearScale.ScaleBarLength = 300; - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.ScaleBarStroke = new SolidColorBrush(Colors.Blue); +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.ScaleBarSize = 20; +linearScale.ScaleBarBorderThickness = new Thickness(3); +linearScale.ScaleBarBorderBrush = new SolidColorBrush(Colors.Red); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.MinorTicksPerInterval = 3; +linearScale.ScaleBarLength = 300; +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Scales_img4](Scales_images/Scales_img4.png) +![UWP Linear Gauge scale customization](Scales_images/Scales_img4.png) ## Setting scale direction -You can set the scale position to its forward and backward using the [`ScaleDirection`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleDirection) property. +You can set the scale position to forward and backward using the [`ScaleDirection`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleDirection) property. {% tabs %} {% highlight xml %} - - - - - - - - - - - + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.ScaleDirection = LinearScaleDirection.Backward; - - linearScale.Interval = 10; - - linearScale.LabelSize = 15; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - linearScale.MinorTicksPerInterval = 3; - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.ScaleDirection = LinearScaleDirection.Backward; +linearScale.Interval = 10; +linearScale.LabelSize = 15; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +linearScale.MinorTicksPerInterval = 3; +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Scales_img5](Scales_images/Scales_img5.png) +![UWP Linear Gauge scale direction](Scales_images/Scales_img5.png) ## Setting position for a scale -You can set the scale position using the [`ScaleBarPositionFactor`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarPositionFactor) property. First, set the [`ElementsPositionMode`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ElementsPositionMode) to custom, and then set [`ScaleBarPositionFactor`](https://help.syncfusion.com/cr/uwp/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/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarPositionFactor) property. First, set the [`ElementsPositionMode`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ElementsPositionMode) to Custom, and then set [`ScaleBarPositionFactor`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_ScaleBarPositionFactor). {% tabs %} {% highlight xml %} - - - - - - - - - - - + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.ElementsPositionMode = LinearScalePositionModes.Custom; - - linearScale.ScaleBarPositionFactor = 0.5; - - linearScale.TickPositionFactor = 0.443; - - linearScale.Interval = 10; - - linearScale.LabelSize = 15; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - linearScale.MinorTicksPerInterval = 3; - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.ElementsPositionMode = LinearScalePositionModes.Custom; +linearScale.ScaleBarPositionFactor = 0.5; +linearScale.TickPositionFactor = 0.443; +linearScale.Interval = 10; +linearScale.LabelSize = 15; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +linearScale.MinorTicksPerInterval = 3; +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Scales_img6](Scales_images/Scales_img6.png) +![UWP Linear Gauge scale position](Scales_images/Scales_img6.png) -## Setting corner radius type for scale +## Setting corner radius type for scale -Corners of the LinearScale can be customized by setting the value to the [`CornerRadius`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_CornerRadius) property. +Corners of the [`LinearScale`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html) can be customized by setting a value to the [`CornerRadius`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_CornerRadius) property. {% tabs %} {% highlight xml %} - - - - - - - - - - - + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.CornerRadius = new CornerRadius(10); - - linearScale.LabelSize = 15; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - linearScale.MinorTicksPerInterval = 3; - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.CornerRadius = new CornerRadius(10); +linearScale.LabelSize = 15; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +linearScale.MinorTicksPerInterval = 3; +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Scales_img7](Scales_images/Scales_img7.png) +![UWP Linear Gauge corner radius](Scales_images/Scales_img7.png) ## Setting gradient color for scale -You can give smooth color transition to scale to specifying the different colors based on scale value by using [`GradientStops`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_GradientStops) property. +You can give a smooth color transition to a scale by specifying different colors based on scale value using the [`GradientStops`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_GradientStops) property. {% tabs %} {% highlight xml %} - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.LabelSize = 15; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - GaugeGradientStop gaugeGradientStop = new GaugeGradientStop(); - - gaugeGradientStop.Value = 10; - - gaugeGradientStop.Color = Color.FromArgb(0xff, 0x51, 0xc9, 0xe1); - - linearScale.GradientStops.Add(gaugeGradientStop); - - GaugeGradientStop gaugeGradientStop1 = new GaugeGradientStop(); - - gaugeGradientStop1.Value = 40; - - gaugeGradientStop1.Color = Color.FromArgb(0xff, 0x93, 0xe9, 0xe1); - - linearScale.GradientStops.Add(gaugeGradientStop1); - - GaugeGradientStop gaugeGradientStop2 = new GaugeGradientStop(); - - gaugeGradientStop2.Value = 50; - - gaugeGradientStop2.Color = Color.FromArgb(0xff, 0xc5, 0xe6, 0x92); - - linearScale.GradientStops.Add(gaugeGradientStop2); - - GaugeGradientStop gaugeGradientStop3 = new GaugeGradientStop(); - - gaugeGradientStop3.Value = 60; - - gaugeGradientStop3.Color = Color.FromArgb(0xff, 0xfe, 0xdd, 0x2b); - - linearScale.GradientStops.Add(gaugeGradientStop3); - - GaugeGradientStop gaugeGradientStop4 = new GaugeGradientStop(); - - gaugeGradientStop4.Value = 100; - - gaugeGradientStop4.Color = Color.FromArgb(0xff, 0xe8, 0x78, 0x13); - - linearScale.GradientStops.Add(gaugeGradientStop4); - - linearScale.MinorTicksPerInterval = 3; - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.LabelSize = 15; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; + +GaugeGradientStop gaugeGradientStop = new GaugeGradientStop(); +gaugeGradientStop.Value = 10; +gaugeGradientStop.Color = Color.FromArgb(0xff, 0x51, 0xc9, 0xe1); +linearScale.GradientStops.Add(gaugeGradientStop); + +GaugeGradientStop gaugeGradientStop1 = new GaugeGradientStop(); +gaugeGradientStop1.Value = 40; +gaugeGradientStop1.Color = Color.FromArgb(0xff, 0x93, 0xe9, 0xe1); +linearScale.GradientStops.Add(gaugeGradientStop1); + +GaugeGradientStop gaugeGradientStop2 = new GaugeGradientStop(); +gaugeGradientStop2.Value = 50; +gaugeGradientStop2.Color = Color.FromArgb(0xff, 0xc5, 0xe6, 0x92); +linearScale.GradientStops.Add(gaugeGradientStop2); + +GaugeGradientStop gaugeGradientStop3 = new GaugeGradientStop(); +gaugeGradientStop3.Value = 60; +gaugeGradientStop3.Color = Color.FromArgb(0xff, 0xfe, 0xdd, 0x2b); +linearScale.GradientStops.Add(gaugeGradientStop3); + +GaugeGradientStop gaugeGradientStop4 = new GaugeGradientStop(); +gaugeGradientStop4.Value = 100; +gaugeGradientStop4.Color = Color.FromArgb(0xff, 0xe8, 0x78, 0x13); +linearScale.GradientStops.Add(gaugeGradientStop4); +linearScale.MinorTicksPerInterval = 3; +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Scales_img8](Scales_images/Scales_img8.png) +![UWP Linear Gauge gradient color](Scales_images/Scales_img8.png) diff --git a/uwp/Linear-Gauge/Ticks.md b/uwp/Linear-Gauge/Ticks.md index 86689abec..bbc5d5964 100644 --- a/uwp/Linear-Gauge/Ticks.md +++ b/uwp/Linear-Gauge/Ticks.md @@ -3,77 +3,60 @@ layout: post title: Ticks in UWP Linear Gauge control | Syncfusion description: Learn here all about Ticks support in Syncfusion UWP Linear Gauge (SfLinearGauge) control and more. platform: uwp -control: SfCLinearGauge +control: SfLinearGauge documentation: ug --- # Ticks in UWP Linear Gauge (SfLinearGauge) -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 -By setting the [`MajorTickStroke`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_MajorTickStroke) and [`MinorTickStroke`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_MinorTickStroke) properties, the stroke of the major ticks and minor ticks can be customized. Using the [`MajorTickStrokeThickness`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_MajorTickStrokeThickness) and [`MinorTickStrokeThickness`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_MinorTickStrokeThickness), the stroke thickness of the major ticks and minor ticks can be customized. The size of the major ticks and minor ticks can be modified using the [`MajorTickSize`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_MajorTickSize) and [`MinorTickSize`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_MinorTickSize) properties. +By setting the [`MajorTickStroke`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_MajorTickStroke) and [`MinorTickStroke`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_MinorTickStroke) properties, the stroke of the major ticks and minor ticks can be customized. Using the [`MajorTickStrokeThickness`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_MajorTickStrokeThickness) and [`MinorTickStrokeThickness`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_MinorTickStrokeThickness) properties, the stroke thickness of the major ticks and minor ticks can be customized. The size of the major ticks and minor ticks can be modified using the [`MajorTickSize`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_MajorTickSize) and [`MinorTickSize`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_MinorTickSize) properties. {% tabs %} {% highlight xml %} - - - - - - - - - - - + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.LabelSize = 15; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.SkyBlue); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Brown); - - linearScale.MinorTickStrokeThickness = 1; - - linearScale.MajorTickStrokeThickness = 2; - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - linearScale.MinorTicksPerInterval = 3; - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.LabelSize = 15; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.SkyBlue); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Brown); +linearScale.MinorTickStrokeThickness = 1; +linearScale.MajorTickStrokeThickness = 2; +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +linearScale.MinorTicksPerInterval = 3; +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Ticks_img1](Ticks_images/Ticks_img1.png) +![UWP Linear Gauge tick customization](Ticks_images/Ticks_img1.png) ## Setting position for tick -The ticks in the scale can be placed above, below, or in between the scale by choosing one of the following options available in the [`TickPosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_TickPosition) property: +The ticks in the scale can be placed above, below, or across the scale by choosing one of the following options available in the [`TickPosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_TickPosition) property: 1. Above 2. Below (Default) @@ -83,108 +66,76 @@ The ticks in the scale can be placed above, below, or in between the scale by ch {% highlight xml %} - - - - - - - - - - - + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.TickPosition = LinearTicksPosition.Above; - - linearScale.LabelSize = 15; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - linearScale.MinorTicksPerInterval = 3; - - sfLinearGauge.MainScale = linearScale; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.TickPosition = LinearTicksPosition.Above; +linearScale.LabelSize = 15; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +linearScale.MinorTicksPerInterval = 3; +sfLinearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![Ticks_img2](Ticks_images/Ticks_img2.png) +![UWP Linear Gauge tick position](Ticks_images/Ticks_img2.png) ## Setting minor ticks per interval -The [`Interval`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Interval) property is used to calculate the tick counts for a scale. Like ticks, minor ticks can also be calculated by using the [`MinorTicksPerInterval`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_MinorTicksPerInterval) property. +The [`Interval`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_Interval) property is used to calculate the tick counts for a scale. Like ticks, minor ticks can also be calculated using the [`MinorTicksPerInterval`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_MinorTicksPerInterval) property. {% tabs %} {% highlight xml %} - - - - - - - - - - - + + + + + + {% endhighlight %} {% highlight c# %} - SfLinearGauge sfLinearGauge = new SfLinearGauge(); - - LinearScale linearScale = new LinearScale(); - - linearScale.LabelSize = 15; - - linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.MajorTickSize = 25; - - linearScale.MinorTickSize = 12; - - linearScale.ScaleBarLength = 300; - - linearScale.MinorTicksPerInterval = 4; +SfLinearGauge sfLinearGauge = new SfLinearGauge(); +LinearScale linearScale = new LinearScale(); +linearScale.LabelSize = 15; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.MajorTickSize = 25; +linearScale.MinorTickSize = 12; +linearScale.ScaleBarLength = 300; +linearScale.MinorTicksPerInterval = 4; +sfLinearGauge.MainScale = linearScale; - sfLinearGauge.MainScale = linearScale; - {% endhighlight %} {% endtabs %} -![Ticks_img3](Ticks_images/Ticks_img3.png) +![UWP Linear Gauge minor ticks per interval](Ticks_images/Ticks_img3.png) diff --git a/uwp/Linear-Gauge/annotations.md b/uwp/Linear-Gauge/annotations.md index a3e0a8c4c..21e5d6089 100644 --- a/uwp/Linear-Gauge/annotations.md +++ b/uwp/Linear-Gauge/annotations.md @@ -1,209 +1,137 @@ --- - layout: post title: Annotations in UWP Linear Gauge control | Syncfusion description: Learn here all about Annotations support in Syncfusion UWP Linear Gauge (SfLinearGauge) control and more. platform: uwp control: SfLinearGauge documentation: ug - --- # Annotations in UWP Linear Gauge (SfLinearGauge) -[`SfLinearGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html) supports [`Annotations`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html#Syncfusion_UI_Xaml_Gauges_SfLinearGauge_Annotations) , which is used to mark the specific area of interest in the gauge area with texts, shapes, or images. You can add any number of annotations to the gauge. +The [`SfLinearGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html) supports [`Annotations`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfLinearGauge.html#Syncfusion_UI_Xaml_Gauges_SfLinearGauge_Annotations), which is used to mark the specific area of interest in the gauge area with texts, shapes, or images. You can add any number of annotations to the gauge. -## Annotation +## Annotation -By using the `ContentTemplate` property of annotation object, you can specify the new element that needs to be displayed in the gauge area. +By using the [`ContentTemplate`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearGaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_LinearGaugeAnnotation_ContentTemplate) property of the annotation object, you can specify the new element that needs to be displayed in the gauge area. {% tabs %} {% highlight xaml %} - - + - - - - - - - - - - - - - - - + + + + + + + - - - - + - - + {% endhighlight %} {% highlight c# %} - SfLinearGauge linearGauge = new SfLinearGauge(); - - LinearGaugeAnnotation linearGaugeAnnotation = new LinearGaugeAnnotation(); - - linearGaugeAnnotation.OffsetX = 0.5; - - linearGaugeAnnotation.OffsetY = 0.4; - - var content = ""; - - content += ""; - - content += ""; - - content += "" + ""; - - content += ""; - - linearGaugeAnnotation.ContentTemplate = (DataTemplate)XamlReader.Load(content); - - linearGauge.Annotations.Add(linearGaugeAnnotation); - - LinearScale linearScale = new LinearScale(); - - linearScale.ScaleBarLength = 300; - - linearScale.ScaleBarStroke =new SolidColorBrush(Color.FromArgb(0xff, 0xe0, 0xe0, 0xe0)); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.LabelSize = 15; - - linearScale.MajorTickSize = 25; - - linearScale.MajorTickStroke =new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickSize = 15; - - linearGauge.MainScale = linearScale; +SfLinearGauge linearGauge = new SfLinearGauge(); +LinearGaugeAnnotation linearGaugeAnnotation = new LinearGaugeAnnotation(); +linearGaugeAnnotation.OffsetX = 0.5; +linearGaugeAnnotation.OffsetY = 0.4; +var content = ""; +content += ""; +content += ""; +content += "" + ""; +content += ""; +linearGaugeAnnotation.ContentTemplate = (DataTemplate)XamlReader.Load(content); + +linearGauge.Annotations.Add(linearGaugeAnnotation); +LinearScale linearScale = new LinearScale(); +linearScale.ScaleBarLength = 300; +linearScale.ScaleBarStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xe0, 0xe0, 0xe0)); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.LabelSize = 15; +linearScale.MajorTickSize = 25; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickSize = 15; +linearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![annotation_img1](annotations_images/annotation_img1.png) +![UWP Linear Gauge annotation](annotations_images/annotation_img1.png) -## Positioning the annotation +## Positioning the annotation -You can place the annotation anywhere in gauge area by using the `Offset` or `ScaleValue` property. +You can place the annotation anywhere in the gauge area by using the `Offset` or [`ScaleValue`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearGaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_LinearGaugeAnnotation_ScaleValue) property. ### Change annotation position by using offset -You can position the annotation anywhere in the linear gauge by using the [`OffsetX`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearGaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_LinearGaugeAnnotation_OffsetX) and [`OffsetY`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearGaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_LinearGaugeAnnotation_OffsetY) properties. It ranges from 0 to 1. +You can position the annotation anywhere in the linear gauge by using the [`OffsetX`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearGaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_LinearGaugeAnnotation_OffsetX) and [`OffsetY`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearGaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_LinearGaugeAnnotation_OffsetY) properties. It ranges from 0 to 1. {% tabs %} {% highlight xaml %} - - + - - - - - - - - - - - - - - - + + + + + + + - - - - + - - + {% endhighlight %} {% highlight c# %} - - SfLinearGauge linearGauge = new SfLinearGauge(); - - LinearGaugeAnnotation linearGaugeAnnotation = new LinearGaugeAnnotation(); - - linearGaugeAnnotation.OffsetX = 0.5; - - linearGaugeAnnotation.OffsetY = 0.6; - - var content = ""; - - content += ""; - - content += ""; - - content += "" + ""; - - content += ""; - - linearGaugeAnnotation.ContentTemplate = (DataTemplate)XamlReader.Load(content); - - linearGauge.Annotations.Add(linearGaugeAnnotation); - - LinearScale linearScale = new LinearScale(); - - linearScale.ScaleBarLength = 300; - - linearScale.ScaleBarStroke =new SolidColorBrush(Color.FromArgb(0xff, 0xe0, 0xe0, 0xe0)); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.LabelSize = 15; - - linearScale.MajorTickSize = 25; - - linearScale.MajorTickStroke =new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickSize = 15; - - linearGauge.MainScale = linearScale; - +SfLinearGauge linearGauge = new SfLinearGauge(); +LinearGaugeAnnotation linearGaugeAnnotation = new LinearGaugeAnnotation(); +linearGaugeAnnotation.OffsetX = 0.5; +linearGaugeAnnotation.OffsetY = 0.6; +var content = ""; +content += ""; +content += ""; +content += "" + ""; +content += ""; +linearGaugeAnnotation.ContentTemplate = (DataTemplate)XamlReader.Load(content); +linearGauge.Annotations.Add(linearGaugeAnnotation); + +LinearScale linearScale = new LinearScale(); +linearScale.ScaleBarLength = 300; +linearScale.ScaleBarStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xe0, 0xe0, 0xe0)); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.LabelSize = 15; +linearScale.MajorTickSize = 25; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickSize = 15; +linearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![annotation_img2](annotations_images/annotation_img2.png) +![UWP Linear Gauge annotation position by offset](annotations_images/annotation_img2.png) -### Change annotation position by using scale value +### Change annotation position by using scale value You can also place the annotation by specifying the [`ScaleValue`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearGaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_LinearGaugeAnnotation_ScaleValue) property. @@ -211,248 +139,150 @@ You can also place the annotation by specifying the [`ScaleValue`](https://help. {% highlight xaml %} - - + - - - - - - - - - - - - - - - + + + + + + + - - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} - SfLinearGauge linearGauge = new SfLinearGauge(); - - LinearGaugeAnnotation linearGaugeAnnotation = new LinearGaugeAnnotation(); - - linearGaugeAnnotation.ScaleValue = 60; - - var content = ""; - - content += ""; - - content += ""; - - content += "" + ""; - - content += ""; - - linearGaugeAnnotation.ContentTemplate = (DataTemplate)XamlReader.Load(content); - - linearGauge.Annotations.Add(linearGaugeAnnotation); - - LinearScale linearScale = new LinearScale(); - - linearScale.Minimum = 0; - - linearScale.Maximum = 90; - - linearScale.ScaleBarSize = 30; - - linearScale.Interval = 10; - - linearScale.ScaleBarLength = 300; - - linearScale.ScaleBarStroke =new SolidColorBrush(Color.FromArgb(0xff, 0xe0, 0xe0, 0xe0)); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.LabelSize = 15; - - linearScale.MajorTickSize = 25; - - linearScale.MajorTickStroke =new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickSize = 15; - - LinearPointer linearPointer = new LinearPointer(); - - linearPointer.PointerType = LinearPointerType.BarPointer; - - linearPointer.Value = 60; - - linearPointer.BarPointerStrokeThickness = 20; - - linearPointer.CornerRadius = new CornerRadius(0,10,10,0); - - linearPointer.BarPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xf9, 0x5c, 0x85)); - - linearScale.Pointers.Add(linearPointer); - - linearGauge.MainScale = linearScale; - +SfLinearGauge linearGauge = new SfLinearGauge(); +LinearGaugeAnnotation linearGaugeAnnotation = new LinearGaugeAnnotation(); +linearGaugeAnnotation.ScaleValue = 60; +var content = ""; +content += ""; +content += ""; +content += "" + ""; +content += ""; +linearGaugeAnnotation.ContentTemplate = (DataTemplate)XamlReader.Load(content); +linearGauge.Annotations.Add(linearGaugeAnnotation); + +LinearScale linearScale = new LinearScale(); +linearScale.Minimum = 0; +linearScale.Maximum = 90; +linearScale.ScaleBarSize = 30; +linearScale.Interval = 10; +linearScale.ScaleBarLength = 300; +linearScale.ScaleBarStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xe0, 0xe0, 0xe0)); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.LabelSize = 15; +linearScale.MajorTickSize = 25; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickSize = 15; +LinearPointer linearPointer = new LinearPointer(); +linearPointer.PointerType = LinearPointerType.BarPointer; +linearPointer.Value = 60; +linearPointer.BarPointerStrokeThickness = 20; +linearPointer.CornerRadius = new CornerRadius(0, 10, 10, 0); +linearPointer.BarPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xf9, 0x5c, 0x85)); +linearScale.Pointers.Add(linearPointer); +linearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![annotation_img3](annotations_images/annotation_img3.png) +![UWP Linear Gauge annotation position by scale value](annotations_images/annotation_img3.png) -## Set margin to the annotation +## Set margin to the annotation -You can adjust the annotation by specifying the [`ViewMargin`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearGaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_LinearGaugeAnnotation_ViewMargin) property in pixel, which adjusts the annotation element from its current position. +You can adjust the annotation by specifying the [`ViewMargin`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearGaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_LinearGaugeAnnotation_ViewMargin) property in pixels, which adjusts the annotation element from its current position. {% tabs %} {% highlight xaml %} - - + - - - - - - - - - - - - - - - + + + + + + + - - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} - SfLinearGauge linearGauge = new SfLinearGauge(); - - LinearGaugeAnnotation linearGaugeAnnotation = new LinearGaugeAnnotation(); - - linearGaugeAnnotation.ScaleValue = 60; - - linearGaugeAnnotation.ViewMargin = new Point(10, 60); - - var content = ""; - - content += ""; - - content += ""; - - content += "" + ""; - - content += ""; - - linearGaugeAnnotation.ContentTemplate = (DataTemplate)XamlReader.Load(content); - - linearGauge.Annotations.Add(linearGaugeAnnotation); - - LinearScale linearScale = new LinearScale(); - - linearScale.Minimum = 0; - - linearScale.Maximum = 90; - - linearScale.ScaleBarSize = 30; - - linearScale.Interval = 10; - - linearScale.ScaleBarLength = 300; - - linearScale.ScaleBarStroke =new SolidColorBrush(Color.FromArgb(0xff, 0xe0, 0xe0, 0xe0)); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.LabelSize = 15; - - linearScale.MajorTickSize = 25; - - linearScale.MajorTickStroke =new SolidColorBrush(Colors.Gray); +SfLinearGauge linearGauge = new SfLinearGauge(); +LinearGaugeAnnotation linearGaugeAnnotation = new LinearGaugeAnnotation(); +linearGaugeAnnotation.ScaleValue = 60; +linearGaugeAnnotation.ViewMargin = new Point(10, 60); +var content = ""; +content += ""; +content += ""; +content += "" + ""; +content += ""; +linearGaugeAnnotation.ContentTemplate = (DataTemplate)XamlReader.Load(content); +linearGauge.Annotations.Add(linearGaugeAnnotation); + +LinearScale linearScale = new LinearScale(); +linearScale.Minimum = 0; +linearScale.Maximum = 90; +linearScale.ScaleBarSize = 30; +linearScale.Interval = 10; +linearScale.ScaleBarLength = 300; +linearScale.ScaleBarStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xe0, 0xe0, 0xe0)); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.LabelSize = 15; +linearScale.MajorTickSize = 25; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickSize = 15; +LinearPointer linearPointer = new LinearPointer(); +linearPointer.PointerType = LinearPointerType.BarPointer; +linearPointer.Value = 60; +linearPointer.BarPointerStrokeThickness = 20; +linearPointer.CornerRadius = new CornerRadius(0, 10, 10, 0); +linearPointer.BarPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xf9, 0x5c, 0x85)); +linearScale.Pointers.Add(linearPointer); +linearGauge.MainScale = linearScale; - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickSize = 15; - - LinearPointer linearPointer = new LinearPointer(); - - linearPointer.PointerType = LinearPointerType.BarPointer; - - linearPointer.Value = 60; - - linearPointer.BarPointerStrokeThickness = 20; - - linearPointer.CornerRadius = new CornerRadius(0,10,10,0); - - linearPointer.BarPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xf9, 0x5c, 0x85)); - - linearScale.Pointers.Add(linearPointer); - - linearGauge.MainScale = linearScale; - {% endhighlight %} {% endtabs %} -![annotation_img4](annotations_images/annotation_img4.png) +![UWP Linear Gauge annotation margin](annotations_images/annotation_img4.png) -## Alignment of annotation +## Alignment of annotation -You can align the annotation using the [`HorizontalPosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearGaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_LinearGaugeAnnotation_HorizontalPosition) and [`VerticalPosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearGaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_LinearGaugeAnnotation_VerticalPosition) properties. +You can align the annotation using the [`HorizontalPosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearGaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_LinearGaugeAnnotation_HorizontalPosition) and [`VerticalPosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.LinearGaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_LinearGaugeAnnotation_VerticalPosition) properties. ### Setting horizontal position @@ -460,124 +290,72 @@ You can align the annotation using the [`HorizontalPosition`](https://help.syncf {% highlight xaml %} - - + - - - - - - - - - - - - - - - + + + + + + + - - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} - SfLinearGauge linearGauge = new SfLinearGauge(); - - LinearGaugeAnnotation linearGaugeAnnotation = new LinearGaugeAnnotation(); - - linearGaugeAnnotation.ScaleValue = 60; - - linearGaugeAnnotation.HorizontalPosition = ViewAlignment.Start; - - var content = ""; - - content += ""; - - content += ""; - - content += "" + ""; - - content += ""; - - linearGaugeAnnotation.ContentTemplate = (DataTemplate)XamlReader.Load(content); - - linearGauge.Annotations.Add(linearGaugeAnnotation); - - LinearScale linearScale = new LinearScale(); - - linearScale.ScaleBarLength = 300; - - linearScale.Minimum = 0; - - linearScale.Maximum = 90; - - linearScale.ScaleBarSize = 30; - - linearScale.Interval = 10; - - linearScale.ScaleBarStroke =new SolidColorBrush(Color.FromArgb(0xff, 0xe0, 0xe0, 0xe0)); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.LabelSize = 15; - - linearScale.MajorTickSize = 25; - - linearScale.MajorTickStroke =new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickSize = 15; - - LinearPointer linearPointer = new LinearPointer(); - - linearPointer.PointerType = LinearPointerType.BarPointer; - - linearPointer.Value = 60; - - linearPointer.BarPointerStrokeThickness = 20; - - linearPointer.CornerRadius = new CornerRadius(0,10,10,0); - - linearPointer.BarPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xf9, 0x5c, 0x85)); - - linearScale.Pointers.Add(linearPointer); - - linearGauge.MainScale = linearScale; - +SfLinearGauge linearGauge = new SfLinearGauge(); +LinearGaugeAnnotation linearGaugeAnnotation = new LinearGaugeAnnotation(); +linearGaugeAnnotation.ScaleValue = 60; +linearGaugeAnnotation.HorizontalPosition = ViewAlignment.Start; +var content = ""; +content += ""; +content += ""; +content += "" + ""; +content += ""; +linearGaugeAnnotation.ContentTemplate = (DataTemplate)XamlReader.Load(content); +linearGauge.Annotations.Add(linearGaugeAnnotation); + +LinearScale linearScale = new LinearScale(); +linearScale.ScaleBarLength = 300; +linearScale.Minimum = 0; +linearScale.Maximum = 90; +linearScale.ScaleBarSize = 30; +linearScale.Interval = 10; +linearScale.ScaleBarStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xe0, 0xe0, 0xe0)); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.LabelSize = 15; +linearScale.MajorTickSize = 25; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickSize = 15; +LinearPointer linearPointer = new LinearPointer(); +linearPointer.PointerType = LinearPointerType.BarPointer; +linearPointer.Value = 60; +linearPointer.BarPointerStrokeThickness = 20; +linearPointer.CornerRadius = new CornerRadius(0, 10, 10, 0); +linearPointer.BarPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xf9, 0x5c, 0x85)); +linearScale.Pointers.Add(linearPointer); +linearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![annotation_img5](annotations_images/annotation_img5.png) +![UWP Linear Gauge annotation horizontal position](annotations_images/annotation_img5.png) ### Setting vertical position @@ -585,124 +363,73 @@ You can align the annotation using the [`HorizontalPosition`](https://help.syncf {% highlight xaml %} - - + - - - - - - - - - - - - - - - + + + + + + + - - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} - SfLinearGauge linearGauge = new SfLinearGauge(); - - LinearGaugeAnnotation linearGaugeAnnotation = new LinearGaugeAnnotation(); - - linearGaugeAnnotation.ScaleValue = 60; - - linearGaugeAnnotation.VerticalPosition = ViewAlignment.Center; - - var content = ""; - - content += ""; - - content += ""; - - content += "" + ""; - - content += ""; - - linearGaugeAnnotation.ContentTemplate = (DataTemplate)XamlReader.Load(content); - - linearGauge.Annotations.Add(linearGaugeAnnotation); - - LinearScale linearScale = new LinearScale(); - - linearScale.Minimum = 0; - - linearScale.Maximum = 90; - - linearScale.ScaleBarSize = 30; - - linearScale.Interval = 10; - - linearScale.ScaleBarLength = 300; - - linearScale.ScaleBarStroke =new SolidColorBrush(Color.FromArgb(0xff, 0xe0, 0xe0, 0xe0)); - - linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - linearScale.LabelSize = 15; - - linearScale.MajorTickSize = 25; - - linearScale.MajorTickStroke =new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); - - linearScale.MinorTickSize = 15; - - LinearPointer linearPointer = new LinearPointer(); - - linearPointer.PointerType = LinearPointerType.BarPointer; - - linearPointer.Value = 60; - - linearPointer.BarPointerStrokeThickness = 20; - - linearPointer.CornerRadius = new CornerRadius(0,10,10,0); - - linearPointer.BarPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xf9, 0x5c, 0x85)); - - linearScale.Pointers.Add(linearPointer); - - linearGauge.MainScale = linearScale; - +SfLinearGauge linearGauge = new SfLinearGauge(); +LinearGaugeAnnotation linearGaugeAnnotation = new LinearGaugeAnnotation(); +linearGaugeAnnotation.ScaleValue = 60; +linearGaugeAnnotation.VerticalPosition = ViewAlignment.Center; +var content = ""; +content += ""; +content += ""; +content += "" + ""; +content += ""; +linearGaugeAnnotation.ContentTemplate = (DataTemplate)XamlReader.Load(content); +linearGauge.Annotations.Add(linearGaugeAnnotation); + +LinearScale linearScale = new LinearScale(); +linearScale.Minimum = 0; +linearScale.Maximum = 90; +linearScale.ScaleBarSize = 30; +linearScale.Interval = 10; +linearScale.ScaleBarLength = 300; +linearScale.ScaleBarStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xe0, 0xe0, 0xe0)); +linearScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +linearScale.LabelSize = 15; +linearScale.MajorTickSize = 25; +linearScale.MajorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickStroke = new SolidColorBrush(Colors.Gray); +linearScale.MinorTickSize = 15; +LinearPointer linearPointer = new LinearPointer(); + +linearPointer.PointerType = LinearPointerType.BarPointer; +linearPointer.Value = 60; +linearPointer.BarPointerStrokeThickness = 20; +linearPointer.CornerRadius = new CornerRadius(0, 10, 10, 0); +linearPointer.BarPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xf9, 0x5c, 0x85)); +linearScale.Pointers.Add(linearPointer); +linearGauge.MainScale = linearScale; {% endhighlight %} {% endtabs %} -![annotation_img6](annotations_images/annotation_img6.png) +![UWP Linear Gauge annotation vertical position](annotations_images/annotation_img6.png) ## Multiple annotations @@ -712,334 +439,180 @@ You can add multiple annotations to the gauge as demonstrated below. {% highlight xaml %} - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + - - + {% endhighlight %} {% highlight c# %} - SfLinearGauge linearGauge = new SfLinearGauge(); - - LinearGaugeAnnotation linearGaugeAnnotation = new LinearGaugeAnnotation(); - - linearGaugeAnnotation.ScaleValue = 75; - - linearGaugeAnnotation.ViewMargin = new Point(0, 30); - - var content = ""; - - content += ""; - - content += ""; - - content += ""; - - content += ""; - - content += "" + "" + ""; - - content += ""; - - linearGaugeAnnotation.ContentTemplate = (DataTemplate)XamlReader.Load(content); - - linearGauge.Annotations.Add(linearGaugeAnnotation); - - LinearGaugeAnnotation linearGaugeAnnotation1 = new LinearGaugeAnnotation(); - - linearGaugeAnnotation1.ScaleValue = 45; - - linearGaugeAnnotation1.ViewMargin = new Point(0, 30); - - var content1 = ""; - - content1 += ""; - - content1 += ""; - - content1 += ""; - - content1 += ""; - - content1 += "" + "" + ""; - - content1 += ""; - - linearGaugeAnnotation1.ContentTemplate = (DataTemplate)XamlReader.Load(content1); - - linearGauge.Annotations.Add(linearGaugeAnnotation1); - - LinearGaugeAnnotation linearGaugeAnnotation2 = new LinearGaugeAnnotation(); - - linearGaugeAnnotation2.ScaleValue = 15; - - linearGaugeAnnotation2.ViewMargin = new Point(0, 30); - - var content2 = ""; - - content2 += ""; - - content2 += ""; - - content2 += ""; - - content2 += ""; - - content2 += "" + "" + ""; - - content2 += ""; - - linearGaugeAnnotation2.ContentTemplate = (DataTemplate)XamlReader.Load(content2); - - linearGauge.Annotations.Add(linearGaugeAnnotation2); - - LinearGaugeAnnotation linearGaugeAnnotation3 = new LinearGaugeAnnotation(); - - linearGaugeAnnotation3.ScaleValue = 70; - - linearGaugeAnnotation3.ViewMargin = new Point(0, 80); - - var content3 = ""; - - content3 += ""; - - content3 += ""; - - content3 += "" + ""; - - content3 += ""; - - linearGaugeAnnotation3.ContentTemplate = (DataTemplate)XamlReader.Load(content3); - - linearGauge.Annotations.Add(linearGaugeAnnotation3); - - LinearGaugeAnnotation linearGaugeAnnotation4 = new LinearGaugeAnnotation(); - - linearGaugeAnnotation4.ScaleValue = 40; - - linearGaugeAnnotation4.ViewMargin = new Point(0, 80); - - var content4 = ""; - - content4 += ""; - - content4 += ""; - - content4 += "" + ""; - - content4 += ""; - - linearGaugeAnnotation4.ContentTemplate = (DataTemplate)XamlReader.Load(content4); - - linearGauge.Annotations.Add(linearGaugeAnnotation4); - - LinearGaugeAnnotation linearGaugeAnnotation5 = new LinearGaugeAnnotation(); - - linearGaugeAnnotation5.ScaleValue = 10; - - linearGaugeAnnotation5.ViewMargin = new Point(0, 80); - - var content5 = ""; - - content5 += ""; - - content5 += ""; - - content5 += "" + ""; - - content5 += ""; - - linearGaugeAnnotation5.ContentTemplate = (DataTemplate)XamlReader.Load(content5); - - linearGauge.Annotations.Add(linearGaugeAnnotation5); - - LinearScale linearScale = new LinearScale(); - - linearScale.Minimum = 0; - - linearScale.Maximum = 90; - - linearScale.ScaleBarSize = 30; - - linearScale.Interval = 10; - - linearScale.ShowLabels = false; - - linearScale.ScaleBarStroke = new SolidColorBrush(Colors.Transparent); - - linearScale.MinorTicksPerInterval = 1; - - linearScale.ScaleBarLength = 300; - - linearScale.ShowTicks = false; - - linearScale.ScaleDirection = LinearScaleDirection.Backward; - - linearGauge.MainScale = linearScale; - - LinearRange linearRange = new LinearRange(); - - linearRange.StartValue = 0; - - linearRange.RangeStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x30, 0xb3, 0x2d)); - - linearRange.EndValue = 30; - - linearRange.StartWidth = 60; - - linearRange.EndWidth = 60; - - linearScale.Ranges.Add(linearRange); - - LinearRange linearRange1 = new LinearRange(); - - linearRange1.StartValue = 30; - - linearRange1.RangeStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xff, 0xdd, 0x00)); - - linearRange1.EndValue = 60; - - linearRange1.StartWidth = 60; - - linearRange1.EndWidth = 60; - - linearScale.Ranges.Add(linearRange1); - - LinearRange linearRange2 = new LinearRange(); - - linearRange2.StartValue = 60; - - linearRange2.RangeStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xf0, 0x3e, 0x3e)); - - linearRange2.EndValue = 90; - - linearRange2.StartWidth = 60; - - linearRange2.EndWidth = 60; - - linearScale.Ranges.Add(linearRange2); +SfLinearGauge linearGauge = new SfLinearGauge(); +LinearGaugeAnnotation linearGaugeAnnotation = new LinearGaugeAnnotation(); +linearGaugeAnnotation.ScaleValue = 75; +linearGaugeAnnotation.ViewMargin = new Point(0, 30); +var content = ""; +content += ""; +content += ""; +content += ""; +content += ""; +content += "" + "" + ""; +content += ""; +linearGaugeAnnotation.ContentTemplate = (DataTemplate)XamlReader.Load(content); +linearGauge.Annotations.Add(linearGaugeAnnotation); + +LinearGaugeAnnotation linearGaugeAnnotation1 = new LinearGaugeAnnotation(); +linearGaugeAnnotation1.ScaleValue = 45; +linearGaugeAnnotation1.ViewMargin = new Point(0, 30); +var content1 = ""; +content1 += ""; +content1 += ""; +content1 += ""; +content1 += ""; +content1 += "" + "" + ""; +content1 += ""; +linearGaugeAnnotation1.ContentTemplate = (DataTemplate)XamlReader.Load(content1); +linearGauge.Annotations.Add(linearGaugeAnnotation1); + +LinearGaugeAnnotation linearGaugeAnnotation2 = new LinearGaugeAnnotation(); +linearGaugeAnnotation2.ScaleValue = 15; +linearGaugeAnnotation2.ViewMargin = new Point(0, 30); +var content2 = ""; +content2 += ""; +content2 += ""; +content2 += ""; +content2 += ""; +content2 += "" + "" + ""; +content2 += ""; +linearGaugeAnnotation2.ContentTemplate = (DataTemplate)XamlReader.Load(content2); +linearGauge.Annotations.Add(linearGaugeAnnotation2); + +LinearGaugeAnnotation linearGaugeAnnotation3 = new LinearGaugeAnnotation(); +linearGaugeAnnotation3.ScaleValue = 70; +linearGaugeAnnotation3.ViewMargin = new Point(0, 80); +var content3 = ""; +content3 += ""; +content3 += ""; +content3 += "" + ""; +content3 += ""; +linearGaugeAnnotation3.ContentTemplate = (DataTemplate)XamlReader.Load(content3); +linearGauge.Annotations.Add(linearGaugeAnnotation3); + +LinearGaugeAnnotation linearGaugeAnnotation4 = new LinearGaugeAnnotation(); +linearGaugeAnnotation4.ScaleValue = 40; +linearGaugeAnnotation4.ViewMargin = new Point(0, 80); +var content4 = ""; +content4 += ""; +content4 += ""; +content4 += "" + ""; +content4 += ""; +linearGaugeAnnotation4.ContentTemplate = (DataTemplate)XamlReader.Load(content4); +linearGauge.Annotations.Add(linearGaugeAnnotation4); + +LinearGaugeAnnotation linearGaugeAnnotation5 = new LinearGaugeAnnotation(); +linearGaugeAnnotation5.ScaleValue = 10; +linearGaugeAnnotation5.ViewMargin = new Point(0, 80); +var content5 = ""; +content5 += ""; +content5 += ""; +content5 += "" + ""; +content5 += ""; +linearGaugeAnnotation5.ContentTemplate = (DataTemplate)XamlReader.Load(content5); +linearGauge.Annotations.Add(linearGaugeAnnotation5); +LinearScale linearScale = new LinearScale(); +linearScale.Minimum = 0; +linearScale.Maximum = 90; +linearScale.ScaleBarSize = 30; +linearScale.Interval = 10; +linearScale.ShowLabels = false; +linearScale.ScaleBarStroke = new SolidColorBrush(Colors.Transparent); +linearScale.MinorTicksPerInterval = 1; +linearScale.ScaleBarLength = 300; +linearScale.ShowTicks = false; +linearScale.ScaleDirection = LinearScaleDirection.Backward; +linearGauge.MainScale = linearScale; +LinearRange linearRange = new LinearRange(); +linearRange.StartValue = 0; +linearRange.RangeStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x30, 0xb3, 0x2d)); +linearRange.EndValue = 30; +linearRange.StartWidth = 60; +linearRange.EndWidth = 60; +linearScale.Ranges.Add(linearRange); +LinearRange linearRange1 = new LinearRange(); +linearRange1.StartValue = 30; +linearRange1.RangeStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xff, 0xdd, 0x00)); +linearRange1.EndValue = 60; +linearRange1.StartWidth = 60; +linearRange1.EndWidth = 60; +linearScale.Ranges.Add(linearRange1); +LinearRange linearRange2 = new LinearRange(); +linearRange2.StartValue = 60; +linearRange2.RangeStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xf0, 0x3e, 0x3e)); +linearRange2.EndValue = 90; +linearRange2.StartWidth = 60; +linearRange2.EndWidth = 60; +linearScale.Ranges.Add(linearRange2); {% endhighlight %} {% endtabs %} -![annotation_img7](annotations_images/annotation_img7.png) +![UWP Linear Gauge multiple annotations](annotations_images/annotation_img7.png) From 7f15f6119d6455d96827302be2b43937c6268aa2 Mon Sep 17 00:00:00 2001 From: SivaThennarasu Date: Thu, 16 Jul 2026 11:35:38 +0530 Subject: [PATCH 04/25] Resolved the CI error. --- uwp/Digital-Gauge/Digital-Characters.md | 2 +- uwp/Linear-Gauge/Ticks.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/uwp/Digital-Gauge/Digital-Characters.md b/uwp/Digital-Gauge/Digital-Characters.md index 322f2b1e4..3c4bbb79f 100644 --- a/uwp/Digital-Gauge/Digital-Characters.md +++ b/uwp/Digital-Gauge/Digital-Characters.md @@ -124,5 +124,5 @@ this.Grid.Children.Add(digital); {% endhighlight %} {% endtabs %} -![UWP Digital Gauge 8 × 8 Dot Matrix Segments](Digital-Characters_images/Digital-Characters_img5.jpeg) +![UWP Digital Gauge 8 x 8 Dot Matrix Segments](Digital-Characters_images/Digital-Characters_img5.jpeg) diff --git a/uwp/Linear-Gauge/Ticks.md b/uwp/Linear-Gauge/Ticks.md index bbc5d5964..36d79da0a 100644 --- a/uwp/Linear-Gauge/Ticks.md +++ b/uwp/Linear-Gauge/Ticks.md @@ -1,7 +1,7 @@ --- layout: post title: Ticks in UWP Linear Gauge control | Syncfusion -description: Learn here all about Ticks support in Syncfusion UWP Linear Gauge (SfLinearGauge) control and more. +description: Learn here all about Ticks support in Syncfusion UWP Linear Gauge (SfLinearGauge) control, including tick customization, tick position, and minor tick intervals. platform: uwp control: SfLinearGauge documentation: ug From c201c0a11785dbc4a30b4dbcbb94ce6c8d32a5ae Mon Sep 17 00:00:00 2001 From: SivaThennarasu Date: Thu, 16 Jul 2026 11:41:49 +0530 Subject: [PATCH 05/25] Resolved the Front Matter Failure. --- uwp/Linear-Gauge/Ticks.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/uwp/Linear-Gauge/Ticks.md b/uwp/Linear-Gauge/Ticks.md index 36d79da0a..4f480dddd 100644 --- a/uwp/Linear-Gauge/Ticks.md +++ b/uwp/Linear-Gauge/Ticks.md @@ -1,7 +1,7 @@ --- layout: post title: Ticks in UWP Linear Gauge control | Syncfusion -description: Learn here all about Ticks support in Syncfusion UWP Linear Gauge (SfLinearGauge) control, including tick customization, tick position, and minor tick intervals. +description: Learn here all about Ticks support in Syncfusion UWP Linear Gauge (SfLinearGauge) control, including tick customization, tick position, and minor tick intervals for clear scale visualization. platform: uwp control: SfLinearGauge documentation: ug From 6f217162c92ebcb4f7699f3aa5511b72cac5c88a Mon Sep 17 00:00:00 2001 From: SivaThennarasu Date: Thu, 16 Jul 2026 11:51:55 +0530 Subject: [PATCH 06/25] Cleared the CI Error. --- uwp/Linear-Gauge/Ticks.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/uwp/Linear-Gauge/Ticks.md b/uwp/Linear-Gauge/Ticks.md index 4f480dddd..656231d68 100644 --- a/uwp/Linear-Gauge/Ticks.md +++ b/uwp/Linear-Gauge/Ticks.md @@ -1,7 +1,7 @@ --- layout: post title: Ticks in UWP Linear Gauge control | Syncfusion -description: Learn here all about Ticks support in Syncfusion UWP Linear Gauge (SfLinearGauge) control, including tick customization, tick position, and minor tick intervals for clear scale visualization. +description: Learn about Ticks support in Syncfusion UWP Linear Gauge (SfLinearGauge), including tick customization, positioning, and minor tick intervals. platform: uwp control: SfLinearGauge documentation: ug From 69a5aef0e6890a39e2279fd97ebc6e77417e4350 Mon Sep 17 00:00:00 2001 From: SivaThennarasu Date: Thu, 16 Jul 2026 16:46:14 +0530 Subject: [PATCH 07/25] Added the improved UG documentation for the Radial Gauge and Pivot Gauge controls. --- uwp/Map/Zooming-and-Panning.md | 97 +-- uwp/Pivot-Gauge/Common/Appearance.md | 35 +- uwp/Pivot-Gauge/Common/Localization.md | 23 +- uwp/Pivot-Gauge/Common/Theming.md | 9 +- uwp/Pivot-Gauge/Common/Tooltip.md | 7 +- uwp/Pivot-Gauge/OLAP/Getting-Started.md | 119 ++- uwp/Pivot-Gauge/OLAP/KPI.md | 4 +- uwp/Pivot-Gauge/Overview.md | 10 +- uwp/Pivot-Gauge/Relational/Getting-Started.md | 45 +- uwp/Radial-Gauge/GettingStarted.md | 486 ++++------- uwp/Radial-Gauge/Header.md | 254 ++---- uwp/Radial-Gauge/Labels.md | 523 ++++-------- uwp/Radial-Gauge/Overview.md | 10 +- uwp/Radial-Gauge/Pointers.md | 790 ++++++------------ uwp/Radial-Gauge/Ranges.md | 598 ++++--------- uwp/Radial-Gauge/Rim.md | 195 ++--- uwp/Radial-Gauge/Scales.md | 595 +++++-------- uwp/Radial-Gauge/Ticks.md | 305 +++---- uwp/Radial-Gauge/annotations.md | 449 ++++------ 19 files changed, 1419 insertions(+), 3135 deletions(-) diff --git a/uwp/Map/Zooming-and-Panning.md b/uwp/Map/Zooming-and-Panning.md index 6ac2715bf..53c74456a 100644 --- a/uwp/Map/Zooming-and-Panning.md +++ b/uwp/Map/Zooming-and-Panning.md @@ -9,109 +9,104 @@ documentation: ug # Zooming and Panning in UWP Map (SfMaps) -The Zooming and Panning feature of the Map control allows users to zoom in and out and navigate the map. +The zooming and panning feature of the [`SfMap`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html) control allows users to zoom in and out and navigate the map. ## Zooming -The zooming feature enables users to zoom in and out of the map to show in-depth information. It is controlled by the `ZoomLevel` property of the map. When the zoom level of the Map control is increased, the map is zoomed in. If the zoom level is decreased then the map is zoomed out. +The zooming feature enables users to zoom in and out of the map to show in-depth information. It is controlled by the [`ZoomLevel`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_ZoomLevel) property of the map. When the zoom level of the map control is increased, the map is zoomed in. If the zoom level is decreased, then the map is zoomed out. ## Properties Related to Zooming The following properties are related to the zooming feature of the Maps control: -* ZoomLevel -* EnableZoom -* MinZoom -* MaxZoom +* [ZoomLevel](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_ZoomLevel) +* [EnableZoom](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_EnableZoom) +* [MinZoom](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_MinZoom) +* [MaxZoom](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_MaxZoom) ## ZoomLevel -`ZoomLevel` is the primary property of the zooming feature. It controls the map’s scale size while zooming. Initially, the zoom level is 1. ZoomLevel cannot be less than 1. +[`ZoomLevel`](https://help.syncfusion.com/cr/uwp/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 zoom level is 1. `ZoomLevel` cannot be less than 1. ## EnableZoom -The `EnableZoom` property enables or disables the zooming feature. A `True` value of this property enables the zooming feature and `False` disables the zooming feature. +The [`EnableZoom`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_EnableZoom) property enables or disables the zooming feature. A `true` value of this property enables the zooming feature and `false` disables the zooming feature. ## MinZoom -The `MinZoom` property is used to set the minimum zoom level of the map. +The [`MinZoom`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_MinZoom) property is used to set the minimum zoom level of the map. ## MaxZoom -The `MaxZoom` property is used to set the maximum zoom level of the Map control. +The [`MaxZoom`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_MaxZoom) property is used to set the maximum zoom level of the [`SfMap`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html) control. {% highlight html %} - - + {% endhighlight %} -## Methods to Zoom the Map: +## Methods to Zoom the Map Maps can be zoomed using the following methods: -* By changing the ZoomLevel. -* Through the Zoom method. +* By changing the [`ZoomLevel`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_ZoomLevel). +* Through the [`Zoom`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_Zoom_System_Double_) method. * By pinching the map. * Through the mouse scroll. * By double-tapping on the map. - - ## Changing the ZoomLevel -A map can be zoomed by changing the zoom level of the Map control. Incrementing the ZoomLevel will zoom in on the map and decrementing the ZoomLevel will zoom out of the map. +A map can be zoomed by changing the zoom level of the [`SfMap`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html) control. Incrementing the `ZoomLevel` will zoom in on the map and decrementing the `ZoomLevel` will zoom out of the map. ## Through the Zoom method -Maps can be zoomed through the Zoom method. The Zoom method has the parameter zoom value. The map can be zoomed or scaled with the zoom value parameter. +Maps can be zoomed through the [`Zoom`](https://help.syncfusion.com/cr/uwp/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# %} - SfMap syncMap = new SfMap(); - ShapeFileLayer shapeLayer = new ShapeFileLayer(); - shapeLayer.Uri = "MapApp.ShapeFiles.world.shp"; - syncMap.Layers.Add(shapeLayer); - syncMap.Zoom(5); +SfMap syncMap = new SfMap(); +ShapeFileLayer shapeLayer = new ShapeFileLayer(); +shapeLayer.Uri = "MapApp.ShapeFiles.world.shp"; +syncMap.Layers.Add(shapeLayer); +syncMap.Zoom(5); -{% endhighlight %} +{% endhighlight %} ## By pinching the map -Since UWP fully supports touch interactions, the Maps control also supports touch interactions. Maps can be zoomed through pinching events. Scale value is determined by using the delta value of the pinch event. +Since UWP fully supports touch interactions, the Maps control also supports touch interactions. Maps can be zoomed through pinching events. The scale value is determined by using the delta value of the pinch event. ## Through a mouse wheel event -In addition to the pinching event, the map can be zoomed with mouse events. When the mouse is scrolled up, the map is zoomed in. When the mouse is scrolled down, the map is zoomed out. +In addition to the pinching event, the map can be zoomed with mouse events. When the mouse is scrolled up, the map is zoomed in. When the mouse is scrolled down, the map is zoomed out. ## Through a double-tapping event -When the map is double-tapped, the zooming operation is performed. +When the map is double-tapped, the zooming operation is performed. - -![Features_img6](Features_images/Features_img6.png) +![UWP Map Control Zooming and Panning Zooming](Features_images/Features_img6.png) ## Panning the map The panning feature enables navigation through the map. -Properties related to Panning are: +Properties related to panning are: -* EnablePan +* [EnablePan](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_EnablePan) ## Enable and disable pan -The `EnablePan` property enables or disables the panning feature of the map. A `True` value enables the panning feature. A `False` value disables the panning feature of the map. +The [`EnablePan`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_EnablePan) property enables or disables the panning feature of the map. A `true` value enables the panning feature. A `false` value disables the panning feature of the map. {% highlight html %} - - - - - - + + + + + {% endhighlight %} @@ -119,28 +114,28 @@ The `EnablePan` property enables or disables the panning feature of the map. A ` There are two methods for panning the map. They are: -* Through the Pan method. +* Through the [`Pan`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_Pan_System_Double_System_Double_) method. * By dragging the map. ## Through the Pan method -The map can be panned with the Pan method in the Maps control. The Pan method has two parameters: x and y. The map is translated with respect to the x and y parameters. +The map can be panned with the [`Pan`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_Pan_System_Double_System_Double_) method in the [`SfMap`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html) control. The `Pan` method has two parameters: x and y. The map is translated with respect to the x and y parameters. {% highlight c# %} - - SfMap syncMap = new SfMap(); - syncMap.EnablePan = true; - ShapeFileLayer layer = new ShapeFileLayer(); - layer.Uri = "App2.world1.shp"; - syncMap.Layers.Add(layer); - syncMap.Pan(200, 200); -{% endhighlight %} +SfMap syncMap = new SfMap(); +syncMap.EnablePan = true; +ShapeFileLayer layer = new ShapeFileLayer(); +layer.Uri = "App2.world1.shp"; +syncMap.Layers.Add(layer); +syncMap.Pan(200, 200); + +{% endhighlight %} ## Dragging the map The map can be panned by dragging the map through mouse interactions. This works automatically for touch events. -N> The map can be panned only when some parts of the map are outside the view of the control. +N> The map can be panned only when some parts of the map are outside the view of the control. -![Features_img8](Features_images/Features_img8.png) +![UWP Map Control Zooming and Panning Panning the Map](Features_images/Features_img8.png) diff --git a/uwp/Pivot-Gauge/Common/Appearance.md b/uwp/Pivot-Gauge/Common/Appearance.md index 12b56ec20..4b48a6303 100644 --- a/uwp/Pivot-Gauge/Common/Appearance.md +++ b/uwp/Pivot-Gauge/Common/Appearance.md @@ -11,7 +11,7 @@ documentation: ug ## Layout customization -The SfPivotGauge supports displaying the multiple gauges in a structured layout using the `RowsCount` and `ColumnsCount` properties. These properties specify the number of rows and columns required to display the control. +The [SfPivotGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html) supports displaying multiple gauges in a structured layout using the [RowsCount](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html#Syncfusion_UI_Xaml_PivotGauge_SfPivotGauge_RowsCount) and [ColumnsCount](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html#Syncfusion_UI_Xaml_PivotGauge_SfPivotGauge_ColumnsCount) properties. These properties specify the number of rows and columns required to display the control. {% tabs %} @@ -19,8 +19,7 @@ The SfPivotGauge supports displaying the multiple gauges in a structured layout - + PivotColumns="{Binding PivotColumns}" PivotCalculations="{Binding PivotCalculations}"/> {% endhighlight %} @@ -40,11 +39,11 @@ PivotGauge1.ColumnsCount = 2 {% endtabs %} -![Layout-customization](Appearance_images/Layout-customization.png) +![UWP SfPivotGauge Layout Customization](Appearance_images/Layout-customization.png) ## Gauge radius -The SfPivotGauge supports adjusting its radius by assigning a proper value to its `Radius` property. The following code snippet illustrates how to modify the radius of the SfPivotGauge. +The [SfPivotGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html) supports adjusting its radius by assigning a proper value to its [Radius](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html#Syncfusion_UI_Xaml_PivotGauge_SfPivotGauge_Radius) property. The following code snippet illustrates how to modify the radius of the SfPivotGauge. {% tabs %} @@ -52,8 +51,7 @@ The SfPivotGauge supports adjusting its radius by assigning a proper value to it - + PivotColumns="{Binding PivotColumns}" PivotCalculations="{Binding PivotCalculations}"/> {% endhighlight %} @@ -71,11 +69,11 @@ PivotGauge1.Radius = 75 {% endtabs %} -![Gauge-radius](Appearance_images/Gauge-radius.png) +![UWP SfPivotGauge Gauge Radius](Appearance_images/Gauge-radius.png) ## Gauge header -The gauge header is a combination of details about the calculation and KPI. The header components of the SfPivotGauge can be hidden by using the `ShowGaugeHeader` property as specified in the following code snippet. +The gauge header is a combination of details about the calculation and KPI. The header components of the [SfPivotGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html) can be hidden by using the [ShowGaugeHeaders](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html#Syncfusion_UI_Xaml_PivotGauge_SfPivotGauge_ShowGaugeFactors) property, as specified in the following code snippet. {% tabs %} @@ -83,8 +81,7 @@ The gauge header is a combination of details about the calculation and KPI. The - + PivotColumns="{Binding PivotColumns}" PivotCalculations="{Binding PivotCalculations}"/> {% endhighlight %} @@ -102,11 +99,11 @@ PivotGauge1.ShowGaugeHeaders = False {% endtabs %} -![Gauge-header](Appearance_images/Gauge-header.png) +![UWP SfPivotGauge Gauge Header](Appearance_images/Gauge-header.png) ## Gauge label -The visibility of gauge labels displayed inside the gauge can be toggled with the help of `ShowGaugeLabels` property. The following code snippet shows how to hide labels of the SfPivotGauge. +The visibility of gauge labels displayed inside the gauge can be toggled with the help of the [ShowGaugeLabels](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html#Syncfusion_UI_Xaml_PivotGauge_SfPivotGauge_ShowGaugeLabels) property. The following code snippet shows how to hide the labels of the SfPivotGauge. {% tabs %} @@ -114,8 +111,7 @@ The visibility of gauge labels displayed inside the gauge can be toggled with th - + PivotColumns="{Binding PivotColumns}" PivotCalculations="{Binding PivotCalculations}"/> {% endhighlight %} @@ -133,11 +129,11 @@ PivotGauge1.ShowGaugeLabels = False {% endtabs %} -![Gauge-label](Appearance_images/Gauge-label.png) +![UWP SfPivotGauge Gauge Label](Appearance_images/Gauge-label.png) ## Gauge factor -The gauge factor component can be hidden by using the `ShowGaugeFactors` property as specified in the following code snippet. +The gauge factor component can be hidden by using the [ShowGaugeFactors](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html#Syncfusion_UI_Xaml_PivotGauge_SfPivotGauge_ShowGaugeFactors) property, as specified in the following code snippet. {% tabs %} @@ -145,8 +141,7 @@ The gauge factor component can be hidden by using the `ShowGaugeFactors` propert - + PivotColumns="{Binding PivotColumns}" PivotCalculations="{Binding PivotCalculations}"/> {% endhighlight %} @@ -164,4 +159,4 @@ PivotGauge1.ShowGaugeFactors = False {% endtabs %} -![Gauge-factor](Appearance_images/Gauge-factor.png) +![UWP SfPivotGauge Gauge Factor](Appearance_images/Gauge-factor.png) diff --git a/uwp/Pivot-Gauge/Common/Localization.md b/uwp/Pivot-Gauge/Common/Localization.md index b5c5bb560..05e9cf9f2 100644 --- a/uwp/Pivot-Gauge/Common/Localization.md +++ b/uwp/Pivot-Gauge/Common/Localization.md @@ -9,7 +9,7 @@ documentation: ug # Localization in UWP Pivot Gauge (SfPivotGauge) -Localization is a key feature to provide software solutions targeted at global users. The SfPivotGauge allows users to localize the control to a specific locale and supports “resx” based localization. +Localization is a key feature to provide software solutions targeted at global users. The [SfPivotGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html) allows users to localize the control to a specific locale and supports "resx" based localization. You should perform the following steps to localize the control: @@ -27,23 +27,23 @@ N> The localization key field should be the same for all locales. Do not transla After translating the strings that can be localized: -1. Right-click the project file to create a new folder in the project. Select **Add > New Folder** and rename the folder “Resources”. +1. Right-click the project file to create a new folder in the project. Select **Add > New Folder** and rename the folder "Resources". 2. Right-click the **Resources** folder to create a new resource file. Go to **Add > New Item**. -![Localization-step1](Localization_images/Localization-step1.png) +![UWP SfPivotGauge Localization Step 1](Localization_images/Localization-step1.png) -![Localization-step2](Localization_images/Localization-step2.png) +![UWP SfPivotGauge Localization Step 2](Localization_images/Localization-step2.png) -N> The resource file name should be in the format “<Culture Code>.resx”. +N> The resource file name should be in the format "<Culture Code>.resx". 3. Copy and paste the translated locale to the resource file created in the previous step. ## Culture specification -You should specify the CurrentUICulture in the Application_Startup method of App.xaml.cs file or the constructor of the MainPage.xaml.cs file. +You should specify the CurrentUICulture in the `Application_Startup` method of the App.xaml.cs file or the constructor of the MainPage.xaml.cs file. -N> If you are specifying the current culture in the constructor of main page, ensure that the culture is specified before calling the InitializeComponent() method. +N> If you are specifying the current culture in the constructor of the main page, ensure that the culture is specified before calling the `InitializeComponent()` method. {% tabs %} @@ -76,7 +76,7 @@ End Class ## RTL -The SfPivotGauge provides RTL support to display the content from right to left by setting the `FlowDirection` property to **RightToLeft**. +The [SfPivotGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html) provides RTL support to display the content from right to left by setting the `FlowDirection` property to **RightToLeft**. {% tabs %} @@ -84,12 +84,11 @@ The SfPivotGauge provides RTL support to display the content from right to left - + PivotColumns="{Binding PivotColumns}" PivotCalculations="{Binding PivotCalculations}"/> {% endhighlight %} -{% highlight C# %} +{% highlight c# %} PivotGauge1.FlowDirection = FlowDirection.RightToLeft; @@ -103,7 +102,7 @@ PivotGauge1.FlowDirection = FlowDirection.RightToLeft {% endtabs %} -![Localization-RTL](Localization_images/Localization-RTL.png) +![UWP SfPivotGauge RTL](Localization_images/Localization-RTL.png) A demo sample is available in the following location. diff --git a/uwp/Pivot-Gauge/Common/Theming.md b/uwp/Pivot-Gauge/Common/Theming.md index bb686b259..40c207c0e 100644 --- a/uwp/Pivot-Gauge/Common/Theming.md +++ b/uwp/Pivot-Gauge/Common/Theming.md @@ -9,7 +9,7 @@ documentation: ug # Theming in UWP Pivot Gauge (SfPivotGauge) -Theming is the process of applying particular settings to visual elements of a control. Following built-in themes are supported in the SfPivotGauge control: +Theming is the process of applying particular settings to visual elements of a control. The following built-in themes are supported in the [SfPivotGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html) control: * Blend * Lime @@ -28,7 +28,7 @@ Theming is the process of applying particular settings to visual elements of a c * VisualStudio2013 * VisualStudio2015 -By using the `GaugeVisualStyle` property in the SfPivotGauge, you can set the visual style of the control. By default, the `Metro` theme is applied. The following code snippet shows how to change the visual style for the SfPivotChart. +By using the [GaugeVisualStyle](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html#Syncfusion_UI_Xaml_PivotGauge_SfPivotGauge_GaugeVisualStyle) property in the SfPivotGauge, you can set the visual style of the control. By default, the `Metro` theme is applied. The following code snippet shows how to change the visual style for the SfPivotGauge. {% tabs %} @@ -36,8 +36,7 @@ By using the `GaugeVisualStyle` property in the SfPivotGauge, you can set the vi - + PivotColumns="{Binding PivotColumns}" PivotCalculations="{Binding PivotCalculations}"/> {% endhighlight %} @@ -55,4 +54,4 @@ PivotGauge1.GaugeVisualStyle = PivotGaugeVisualStyle.Blend; {% endtabs %} -![Theming-blend](Theming_images/Theming-blend.png) +![UWP SfPivotGauge Theming Blend](Theming_images/Theming-blend.png) diff --git a/uwp/Pivot-Gauge/Common/Tooltip.md b/uwp/Pivot-Gauge/Common/Tooltip.md index 4727e33fa..6ac75cfef 100644 --- a/uwp/Pivot-Gauge/Common/Tooltip.md +++ b/uwp/Pivot-Gauge/Common/Tooltip.md @@ -9,7 +9,7 @@ documentation: ug # Tooltip in UWP Pivot Gauge (SfPivotGauge) -The SfPivotGauge provides the information about values when the mouse pointer is moved over the gauge. The following code snippet illustrates how to show a tooltip by using the `ShowGaugeTooltip` property. +The [SfPivotGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html) provides the information about values when the mouse pointer is moved over the gauge. The following code snippet illustrates how to show a tooltip by using the [ShowGaugeTooltip](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html#Syncfusion_UI_Xaml_PivotGauge_SfPivotGauge_ShowGaugeTooltip) property. {% tabs %} @@ -17,8 +17,7 @@ The SfPivotGauge provides the information about values when the mouse pointer is - + PivotColumns="{Binding PivotColumns}" PivotCalculations="{Binding PivotCalculations}"/> {% endhighlight %} @@ -36,4 +35,4 @@ PivotGauge1.ShowGaugeTooltip = True {% endtabs %} -![Tooltip](Tooltip_images/Tooltip.png) +![UWP SfPivotGauge Tooltip](Tooltip_images/Tooltip.png) diff --git a/uwp/Pivot-Gauge/OLAP/Getting-Started.md b/uwp/Pivot-Gauge/OLAP/Getting-Started.md index 2d072951e..f80bc0541 100644 --- a/uwp/Pivot-Gauge/OLAP/Getting-Started.md +++ b/uwp/Pivot-Gauge/OLAP/Getting-Started.md @@ -10,23 +10,23 @@ documentation: ug # Getting Started with UWP Pivot Gauge (SfPivotGauge) >**Important** -To start with v16.2.0.x, if you refer to Syncfusion assemblies from trial setup or NuGet feed, include a license key in your projects. Refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/license-key) to learn about registering Syncfusion license key in your UWP application to use the components. +To start with v16.2.0.x, if you refer to Syncfusion assemblies from trial setup or NuGet feed, include a license key in your projects. Refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/license-key) to learn about registering a Syncfusion license key in your UWP application to use the components. -This section explains the information required to create a simple SfPivotGauge control bound to the OLAP data source and a WCF service that helps you to bind the OLAP data with the SfPivotGauge control through the OlapDataManager. +This section explains the information required to create a simple [SfPivotGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html) control bound to the OLAP data source and a WCF service that helps you to bind the OLAP data with the SfPivotGauge control through the [OlapDataManager](https://help.syncfusion.com/cr/uwp/Syncfusion.Olap.UWP.Manager.OlapDataManager.html). ## Initializing SfPivotGauge control 1. Open Visual Studio IDE and select **File > New > Project** to open a new project dialog. -2. Select **Installed > Templates > Visual C# > Windows > Universal > Blank APP(Universal Windows)** to create a new UWP application and name the project "SfPivotGaugeDemo". +2. Select **Installed > Templates > Visual C# > Windows > Universal > Blank App (Universal Windows)** to create a new UWP application and name the project "SfPivotGaugeDemo". -The target version/minimum version dialog appears, in which you can change the target version of the application as **"Windows 10 (10.0; Build 10240)".** +The target version/minimum version dialog appears, in which you can change the target version of the application to **"Windows 10 (10.0; Build 10240)"**. The SfPivotGauge control can be initialized and added to the application through any of the following ways: -1. Designer -2. XAML -3. Code-behind +1. Designer. +2. XAML. +3. Code-behind. ### Adding control through designer @@ -36,11 +36,11 @@ The SfPivotGauge control can be initialized and added to the application through Now, the SfPivotGauge control will be added to the designer as follows. -![GettingStarted_Designer](Getting-Started_images/Designer.png) +![UWP SfPivotGauge Designer](Getting-Started_images/Designer.png) ### Adding control through XAML -The SfPivotGauge control can be added to the project by referencing assemblies or extension SDK as described below: +The [SfPivotGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html) control can be added to the project by referencing assemblies or extension SDK as described below: **Assembly reference** @@ -112,7 +112,7 @@ xmlns:PivotGauge="using:Syncfusion.UI.Xaml.PivotGauge" ### Adding control through code-behind -The SfPivotGauge control can be added to the project by referencing assemblies or extension SDK. +The [SfPivotGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html) control can be added to the project by referencing assemblies or extension SDK. **Assembly reference** @@ -126,7 +126,7 @@ The SfPivotGauge control can be added to the project by referencing assemblies o * Syncfusion.SfGauge.UWP * Syncfusion.SfPivotGauge.UWP -YN> You can find these libraries under the following location. +N> You can find these libraries under the following location. <Installed Drive>:\Program Files (x86)\Syncfusion\Essential Studio\\<Version>\Assemblies for Universal Windows\10.0 **Extension SDK reference** @@ -221,26 +221,26 @@ End Namespace ## Adding service reference to project -N> This section explains how to refer to the online service in UWP application for binding the cube information in the SfPivotGauge. The service URL used here refers to the demo cube - “Adventure Works”, mainly used for illustration purpose. +N> This section explains how to refer to the online service in the UWP application for binding the cube information in the SfPivotGauge. The service URL used here refers to the demo cube - "Adventure Works", mainly used for illustration purposes. To create your own WCF service, refer to the topic of [Creating WCF Service Application.](#creating-wcf-service-application). After initializing the SfPivotGauge control, right-click the project in the solution explorer and select **Add > Service Reference...**. -In “Add Service Reference” dialog, enter the following address and click **Go** to add the online service. +In the "Add Service Reference" dialog, enter the following address and click **Go** to add the online service. [http://bi.syncfusion.com/OlapUWPTestService/OlapManager.svc](http://bi.syncfusion.com/OlapUWPTestService/OlapManager.svc) -Change the default namespace of service reference from "ServiceReference1" to "OlapManagerService", so that it will be easier to identify the OLAP service later. Finally, click **OK** to add the service reference. +Change the default namespace of the service reference from "ServiceReference1" to "OlapManagerService", so that it will be easier to identify the OLAP service later. Finally, click **OK** to add the service reference. -## Binding OLAP data to SfPivotGauge control +## Binding OLAP data to [SfPivotGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html) control ### Defining OLAP report and OLAP data manager through view model 1. Right-click the project in the solution explorer and select **Add > New Item... > Class** to create a new class file. Then, name the class "OlapViewModel" and click **OK**. -The following code snippet illustrates how to define OLAP data manager and OLAP report for the SfPivotGauge control. +The following code snippet illustrates how to define the OLAP data manager and OLAP report for the [SfPivotGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html) control. -N> The `OlapDataChanged` event should be hooked before assigning the current report to OLAP data manager. +N> The `OlapDataChanged` event should be hooked before assigning the current report to the OLAP data manager. {% tabs %} @@ -512,27 +512,27 @@ End Namespace ### Binding OLAP data manager with SfPivotGauge control -The OLAP data can be bound with SfPivotGauge control by using the `OlapDataManager` property through any of the following ways: +The OLAP data can be bound with the [SfPivotGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html) control by using the [OlapDataManager](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html) property through any of the following ways: * XAML * Code-behind **Through XAML** -The following code snippet explains how to bind the OLAP data mentioned in the *OlapViewModel* to the SfPivotGauge control with the help of `DataContext` in XAML. +The following code snippet explains how to bind the OLAP data mentioned in the *OlapViewModel* to the [SfPivotGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html) control with the help of `DataContext` in XAML. {% tabs %} {% highlight xaml %} + xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" + xmlns:local="using:SfPivotGaugeDemo" + xmlns:d="http://schemas.microsoft.com/expression/blend/2008" + xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" + xmlns:PivotGauge="using:Syncfusion.UI.Xaml.PivotGauge" + x:Class="SfPivotGaugeDemo.MainPage" + mc:Ignorable="d"> @@ -548,7 +548,7 @@ The following code snippet explains how to bind the OLAP data mentioned in the * **Through code-behind** -The following code snippet illustrates how to bind the OLAP data to the SfPivotGauge control in code-behind. +The following code snippet illustrates how to bind the OLAP data to the [SfPivotGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html) control in code-behind. {% tabs %} @@ -600,8 +600,7 @@ End Namespace Finally, run the application to generate the following output. -![GettingStarted-OLAP](Getting-Started_images/PivotGauge.png) - +![UWP SfPivotGauge OLAP Data](Getting-Started_images/PivotGauge.png) ## Creating WCF service application @@ -617,13 +616,13 @@ Finally, run the application to generate the following output. N> You can find these libraries under the following location. <Installed Drive>:\Program Files (x86)\Syncfusion\Essential Studio\\<Version>\Assemblies\4.6\ -I> ADOMD.NET assembly (Microsoft.AnalysisServices.AdomdClient.dll) is required to create a SfPivotGauge control. +I> ADOMD.NET assembly (Microsoft.AnalysisServices.AdomdClient.dll) is required to create an SfPivotGauge control. The above assembly can be obtained only after installing the following setup files: **SQLSERVER2008_ASADOMD10.msi** and **SQLSERVER2008_ASOLEDB10.msi** -These setup files can be downloaded at [Microsoft download center](https://www.microsoft.com/en-in/download/details.aspx?id=44277). -If you have installed any version of SQL Server Analysis Service (SSAS) or Microsoft ADOMD.NET utility, then the location of Microsoft.AnalysisServices.AdomdClient library is [system drive:\Program Files (x86)\Microsoft.NET\ADOMD.NET]. +These setup files can be downloaded at the [Microsoft download center](https://www.microsoft.com/en-in/download/details.aspx?id=44277). +If you have installed any version of SQL Server Analysis Service (SSAS) or Microsoft ADOMD.NET utility, then the location of the Microsoft.AnalysisServices.AdomdClient library is [system drive:\Program Files (x86)\Microsoft.NET\ADOMD.NET]. -Now, the "Service1.svc" looks like: +Now, the "Service1.svc" file looks like the following. {% tabs %} @@ -635,7 +634,7 @@ Now, the "Service1.svc" looks like: {% endtabs %} -Double-click the "Service1.svc" file in the solution explorer and replace the existing code with the exact following code. +Double-click the "Service1.svc" file in the solution explorer and replace the existing code with the following code. {% tabs %} @@ -820,7 +819,7 @@ End Namespace {% endtabs %} -N> Here, the sample cube path is specified for demonstration purpose. You can modify the connection string as desired. +N> Here, the sample cube path is specified for demonstration purposes. You can modify the connection string as desired. Then, include the basic HTTP binding and service endpoint address in the web.config file by replacing the following code snippet of the *"serviceModel"* section. @@ -830,27 +829,27 @@ Then, include the basic HTTP binding and service endpoint address in the web.con - - - - - - + + + + + + - - - - - - - - - - - - - + + + + + + + + + + + + + @@ -859,11 +858,11 @@ Then, include the basic HTTP binding and service endpoint address in the web.con - - - - - + + + + + @@ -871,4 +870,4 @@ Then, include the basic HTTP binding and service endpoint address in the web.con {% endtabs %} -Then, build and host the WCF service in IIS. Refer to the hosted URL as service reference in your Universal Windows Platform (UWP) application (client application). This is how you can host the service in IIS and refer to the obtained URL as service reference in the sample as illustrated in the [previous section](#adding-service-reference-to-project). \ No newline at end of file +Then, build and host the WCF service in IIS. Refer to the hosted URL as a service reference in your Universal Windows Platform (UWP) application (client application). This is how you can host the service in IIS and refer to the obtained URL as a service reference in the sample, as illustrated in the [previous section](#adding-service-reference-to-project). \ No newline at end of file diff --git a/uwp/Pivot-Gauge/OLAP/KPI.md b/uwp/Pivot-Gauge/OLAP/KPI.md index 44ea526d8..ff18b8df8 100644 --- a/uwp/Pivot-Gauge/OLAP/KPI.md +++ b/uwp/Pivot-Gauge/OLAP/KPI.md @@ -9,9 +9,9 @@ documentation: ug # KPI in UWP Pivot Gauge (SfPivotGauge) -The SfPivotGauge supports displaying Key Performance Indicators (KPIs) from the OLAP cube. The KPI value is viewed with the help of pointers, and KPI goal is viewed with the help of markers. The KPI status and KPI trend values are represented through user friendly images like traffic light, road signs, and standard arrow. Each gauge in the SfPivotGauge represents a member against one KPI combination. +The [SfPivotGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html) supports displaying Key Performance Indicators (KPIs) from the OLAP cube. The KPI value is viewed with the help of pointers, and the KPI goal is viewed with the help of markers. The KPI status and KPI trend values are represented through user-friendly images like traffic lights, road signs, and standard arrows. Each gauge in the SfPivotGauge represents a member against one KPI combination. -![kpi](KPI_images/kpi.png) +![UWP SfPivotGauge KPI](KPI_images/kpi.png) A demo sample is available in the following location. diff --git a/uwp/Pivot-Gauge/Overview.md b/uwp/Pivot-Gauge/Overview.md index 918e6d5c3..9b9e97dd6 100644 --- a/uwp/Pivot-Gauge/Overview.md +++ b/uwp/Pivot-Gauge/Overview.md @@ -9,17 +9,17 @@ documentation: ug # UWP Pivot Gauge (SfPivotGauge) Overview -The SfPivotGauge control for UWP is ideal for highlighting business critical Key Performance Indicator (KPI) information in executive dashboards and report cards. It allows you to present values against goals in a very intuitive manner. For relational data, the SfPivotGauge control allows you to visualize the summary value using the pointer over a circular scale. It comes with sophisticated customization support that provides endless possibility for customizing the control. +The [SfPivotGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html) control for UWP is ideal for highlighting business-critical Key Performance Indicator (KPI) information in executive dashboards and report cards. It allows you to present values against goals in a very intuitive manner. For relational data, the SfPivotGauge control allows you to visualize the summary value using the pointer over a circular scale. It comes with sophisticated customization support that provides endless possibilities for customizing the control. ## Key features -The key features of **SfPivotGauge** control are listed as follows: +The key features of the **SfPivotGauge** control are listed as follows: -* **Data source**: Supports data binding with OLAP data source such as Microsoft SQL Server Analysis Services (SSAS) and XML/A and relational data source such as IList or IEnumerable. -* **Multiple gauges and layouts**: Customizes the layout while rendering the multiple controls. +* **Data source**: Supports data binding with OLAP data sources such as Microsoft SQL Server Analysis Services (SSAS) and XML/A, and relational data sources such as IList or IEnumerable. +* **Multiple gauges and layouts**: Customizes the layout while rendering multiple controls. * **Indicators**: Displays the active/inactive state of the SfPivotGauge control. * **Ranges**: Highlights the range of values in the circular scale. * **Pointers**: Points the actual value and goal information. -* **Tooltip**: Displays value and goal information when hovering the mouse over pointers. +* **Tooltip**: Displays value and goal information when hovering the mouse over the pointers. * **Themes**: Supports different themes like Office 2010 Blue, Office 2010 Black, Office 365, and so on to customize the appearance. * **Custom appearance**: Shows or hides the headers, factors, and labels as desired. \ No newline at end of file diff --git a/uwp/Pivot-Gauge/Relational/Getting-Started.md b/uwp/Pivot-Gauge/Relational/Getting-Started.md index 022b62218..0cc653d5c 100644 --- a/uwp/Pivot-Gauge/Relational/Getting-Started.md +++ b/uwp/Pivot-Gauge/Relational/Getting-Started.md @@ -12,15 +12,15 @@ documentation: ug >**Important** To start with v16.2.0.x, if you refer to Syncfusion assemblies from trial setup or NuGet feed, include a license key in your projects. Refer to this [link](https://help.syncfusion.com/common/essential-studio/licensing/license-key) to learn about registering a Syncfusion license key in your UWP application to use the components. -This section explains the steps required to create a simple SfPivotGauge control bound to a relational data source such as IList or IEnumerable. +This section explains the steps required to create a simple [SfPivotGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html) control bound to a relational data source such as IList or IEnumerable. ## Initializing SfPivotGauge control 1. Open Visual Studio IDE and select **File > New > Project** to open the new project dialog. -2. Select **Installed > Templates > Visual C# > Windows > Universal > Blank APP(Universal Windows)** to create a new UWP application and name the project as "SfPivotGaugeDemo". +2. Select **Installed > Templates > Visual C# > Windows > Universal > Blank App (Universal Windows)** to create a new UWP application and name the project as "SfPivotGaugeDemo". -The target version/minimum version dialog appears, in which you can change the target version of the application as **"Windows 10 (10.0; Build 10240)".** +The target version/minimum version dialog appears, in which you can change the target version of the application to **"Windows 10 (10.0; Build 10240)"**. The SfPivotGauge control can be initialized and added to the application through any of the following ways: @@ -36,11 +36,11 @@ The SfPivotGauge control can be initialized and added to the application through Now, the SfPivotGauge control will be added to the designer as follows. -![GettingStarted_Designer](Getting-Started_images/Designer.png) +![UWP SfPivotGauge Designer](Getting-Started_images/Designer.png) ### Adding control through XAML -The SfPivotGauge control can be added to the project by referencing assemblies or SDK. +The [SfPivotGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html) control can be added to the project by referencing assemblies or SDK. **Assembly reference** @@ -113,7 +113,7 @@ xmlns:PivotGauge="using:Syncfusion.UI.Xaml.PivotGauge" ### Adding control through code-behind -The SfPivotGauge control can be added to the project by referencing assemblies or SDK. +The [SfPivotGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html) control can be added to the project by referencing assemblies or SDK. **Assembly reference** @@ -221,13 +221,13 @@ End Namespace {{ codesnippet4 | OrderList_Indent_Level_1 }} -## Binding relational data to SfPivotGauge control +## Binding relational data to [SfPivotGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html) control ### Creating relational data through view model -5. After initializing the SfPivotGauge control, right-click the project in the solution explorer and select **Add > New Item... > Class** to create a new class file. +1. After initializing the SfPivotGauge control, right-click the project in the solution explorer and select **Add > New Item... > Class** to create a new class file. -6. Then, name the class *ProductSalesViewModel* and click **OK**. +2. Then, name the class *ProductSalesViewModel* and click **OK**. The following code snippet illustrates how to define relational data for the SfPivotGauge. @@ -332,7 +332,7 @@ Namespace SfPivotGaugeDemo For i As Integer = 0 To numberOfRecords - 1 Dim sales As ProductSale = New ProductSale() sales.Country = countries(r.[Next](1, countries.GetLength(0))) - sales.Amount =(3000 * r.[Next](1, 12)) + sales.Amount = (3000 * r.[Next](1, 12)) sales.Date = dates(r.[Next](r.[Next](dates.GetLength(0) + 1))) sales.Product = products(r.[Next](r.[Next](products.GetLength(0) + 1))) listOfProductSales.Add(sales) @@ -358,31 +358,30 @@ End Namespace {% endtabs %} -### Defining item sSource, pivot rows, pivot columns and pivot calculations for SfPivotGauge control +### Defining ItemSource, pivot rows, pivot columns and pivot calculations for SfPivotGauge control -Relational data can be bound to SfPivotGauge control by using the `ItemSource` property through the following ways: +Relational data can be bound to [SfPivotGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html) control by using the `ItemSource` property through the following ways: * XAML * Code-behind **Through XAML** -The relational data mentioned in the *ProductSalesViewModel* is bound to the SfPivotGauge control with the help of `DataContext`. In addition to this, the `PivotRows`, `PivotColumns`, and `PivotCalculations` should be assigned to SfPivotGauge for populating the data. - +The relational data mentioned in the *ProductSalesViewModel* is bound to the [SfPivotGauge](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html) control with the help of `DataContext`. In addition to this, the `PivotRows`, [PivotColumns](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html#Syncfusion_UI_Xaml_PivotGauge_SfPivotGauge_PivotColumns), and [PivotCalculations](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.PivotGauge.SfPivotGauge.html#Syncfusion_UI_Xaml_PivotGauge_SfPivotGauge_PivotCalculations) should be assigned to SfPivotGauge for populating the data. {% tabs %} {% highlight xaml %} + xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" + xmlns:local="using:SfPivotGaugeDemo" + xmlns:d="http://schemas.microsoft.com/expression/blend/2008" + xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" + xmlns:PivotGauge="using:Syncfusion.UI.Xaml.PivotGauge" + xmlns:pivot="using:Syncfusion.PivotAnalysis.UWP" + x:Class="SfPivotGaugeDemo.MainPage" + mc:Ignorable="d"> @@ -491,4 +490,4 @@ End Namespace Finally, run the application to generate the following output. -![GettingStarted-Relational](Getting-Started_images/Relational.png) \ No newline at end of file +![UWP SfPivotGauge Relational Data](Getting-Started_images/Relational.png) \ No newline at end of file diff --git a/uwp/Radial-Gauge/GettingStarted.md b/uwp/Radial-Gauge/GettingStarted.md index 1ef2b4aaa..231aae770 100644 --- a/uwp/Radial-Gauge/GettingStarted.md +++ b/uwp/Radial-Gauge/GettingStarted.md @@ -8,15 +8,15 @@ documentation: ug --- # Getting Started with UWP Radial Gauge (SfCircularGauge) -This section explains the steps required to configure the [`CircularGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html) , and also explains the steps required to add basic elements to [`CircularGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html) through various APIs available within it. +This section explains the steps required to configure the [`SfCircularGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html), and also explains the steps required to add basic elements to the [`SfCircularGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html) through various APIs available within it. ## Adding Gauge Reference -Refer this [article](https://help.syncfusion.com/uwp/add-syncfusion-controls) to know how to add Syncfusion controls in Visual Studio projects through various way. You can also refer [this](https://help.syncfusion.com/uwp/control-dependencies) link to know about the assemblies required for adding Gauge to your project. +Refer to this [article](https://help.syncfusion.com/uwp/add-syncfusion-controls) to know how to add Syncfusion controls in Visual Studio projects through various ways. You can also refer to [this](https://help.syncfusion.com/uwp/control-dependencies) link to know about the assemblies required for adding the Gauge to your project. ## Initialize Gauge -Import the [`CircularGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html) namespace as shown below in your respective Window, +Import the [`SfCircularGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html) namespace as shown below in your respective window, {% tabs %} @@ -34,20 +34,19 @@ using Syncfusion.UI.Xaml.Gauges; {% endtabs %} -You can initialize an empty [`CircularGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html) control. +You can initialize an empty [`SfCircularGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html) control. {% tabs %} {% highlight xml %} - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - this.Content = sfCircularGauge; {% endhighlight %} @@ -56,46 +55,32 @@ this.Content = sfCircularGauge; ## Adding header -You can assign a unique header to [`CircularGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html) by using the [`GaugeHeader`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_GaugeHeader) property. +You can assign a unique header to the [`SfCircularGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html) by using the [`GaugeHeader`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_GaugeHeader) property. {% tabs %} {% highlight xml %} - - + - - - + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - sfCircularGauge.HeaderAlignment = HeaderAlignment.Custom; - sfCircularGauge.GaugeHeaderPosition = new Point(0.4, 0.7); - TextBlock textBlock = new TextBlock(); - textBlock.Text = "Temperature (K)"; - textBlock.Height = 40; - textBlock.Width = 120; - textBlock.FontSize = 15; - textBlock.Foreground = new SolidColorBrush(Colors.Black); - sfCircularGauge.GaugeHeader = textBlock; {% endhighlight %} @@ -104,54 +89,36 @@ sfCircularGauge.GaugeHeader = textBlock; ## Configuring Scales -You can configure the [`CircularScale`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html) elements by making use of following API’s available in [`CircularGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html). +You can configure the [`CircularScale`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html) elements by making use of the following APIs available in the [`SfCircularGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html). They are: -They are: - -* StartAngle - -* SweepAngle - -* StartValue - -* EndValue - -* Interval - -* TickStroke - -* LabelStroke +* [`StartAngle`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_StartAngle) +* [`SweepAngle`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_SweepAngle) +* [`StartValue`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_StartValue) +* [`EndValue`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_EndValue) +* [`Interval`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Interval) +* [`TickStroke`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickStroke) +* [`LabelStroke`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelStroke) {% tabs %} {% highlight xml %} - - + - - + TickStroke="#BEBEBE" LabelStroke="#9E9E9E" SmallTickStroke="#BEBEBE"/> + {% endhighlight %} {% highlight c# %} CircularScale circularScale = new CircularScale(); - circularScale.Radius = 150; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.RimStrokeThickness = 9; - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} @@ -160,48 +127,33 @@ sfCircularGauge.Scales.Add(circularScale); ## Adding ranges -You can add ranges to the [`CircularGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html) by creating ranges collection using the [`CircularRange`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularRange.html) property. +You can add ranges to the [`SfCircularGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html) by creating a ranges collection using the [`CircularRange`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularRange.html) class. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - - - - + + + + + + + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - CircularRange circularRange = new CircularRange(); - circularRange.StartValue = 0; - circularRange.EndValue = 60; - circularRange.Stroke = new SolidColorBrush(Color.FromArgb(0xff, 0xd1, 0xdb, 0xdb)); - circularScale.Ranges.Add(circularRange); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} @@ -210,62 +162,40 @@ sfCircularGauge.Scales.Add(circularScale); ## Adding a needle pointer -Create a `Needle Pointer`, and associate it with a scale that is to be displayed the current value. +Create a [`NeedlePointer`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html), and associate it with a scale that is to display the current value. {% tabs %} {% highlight xml %} - - - - - - - - - - - - - - + + + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.PointerType = PointerType.NeedlePointer; - circularPointer.NeedleLengthFactor = 0.5; - circularPointer.NeedlePointerType = NeedlePointerType.Triangle; - circularPointer.PointerCapDiameter = 20; - circularPointer.NeedlePointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x39, 0xb2, 0xc6)); - circularPointer.PointerCapStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x39, 0xb2, 0xc6)); - circularPointer.Value = 60; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} @@ -274,52 +204,35 @@ sfCircularGauge.Scales.Add(circularScale); ## Adding a range pointer -The `Range Pointer` provides an alternative way to indicate the current value. +The [`RangePointer`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html) provides an alternative way to indicate the current value. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.PointerType = PointerType.RangePointer; - circularPointer.Value = 40; - circularPointer.RangePointerStrokeThickness = 9; - circularPointer.RangePointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xd1, 0xdb, 0xdb)); - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} @@ -328,48 +241,33 @@ sfCircularGauge.Scales.Add(circularScale); ## Adding a symbol pointer -The `Symbol Pointer` points to the current value in a scale. +The [`SymbolPointer`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html) points to the current value in a scale. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.PointerType = PointerType.SymbolPointer; - circularPointer.Value = 70; - circularPointer.Symbol = Syncfusion.UI.Xaml.Gauges.Symbol.InvertedArrow; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} @@ -382,208 +280,116 @@ The following code example is the complete code of the previous configurations. {% highlight xml %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + - + {% endhighlight %} {% highlight c# %} using Windows.Foundation; - using Windows.UI.Xaml.Controls; - using Windows.UI.Xaml.Media; - using Syncfusion.UI.Xaml.Gauges; - using Windows.UI; namespace GaugeGettingStarted - { - -public sealed partial class MainPage : Page - -{ - -public MainPage() - -{ - -this.InitializeComponent(); - -SfCircularGauge sfCircularGauge = new SfCircularGauge(); - -sfCircularGauge.Height = 500; - -sfCircularGauge.Width = 500; - -//Adding header - -sfCircularGauge.HeaderAlignment = HeaderAlignment.Custom; - -sfCircularGauge.GaugeHeaderPosition = new Point(0.4, 0.7); - -TextBlock textBlock = new TextBlock(); - -textBlock.Text = "Temperature (K)"; - -textBlock.Height = 40; - -textBlock.Width = 120; - -textBlock.FontSize = 15; - -textBlock.Foreground = new SolidColorBrush(Colors.Black); - -sfCircularGauge.GaugeHeader = textBlock; - -//Initializing scales for circular gauge - -CircularScale circularScale = new CircularScale(); - -circularScale.Radius = 150; - -circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - -circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - -circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - -circularScale.RimStrokeThickness = 9; - -circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - -//Adding range - -CircularRange circularRange = new CircularRange(); - -circularRange.StartValue = 0; - -circularRange.EndValue = 60; - -circularRange.Stroke = new SolidColorBrush(Color.FromArgb(0xff, 0xd1, 0xdb, 0xdb)); - -circularScale.Ranges.Add(circularRange); - -//Adding needle pointer - -CircularPointer circularPointer = new CircularPointer(); - -circularPointer.PointerType = PointerType.NeedlePointer; - -circularPointer.NeedleLengthFactor = 0.5; - -circularPointer.NeedlePointerType = NeedlePointerType.Triangle; - -circularPointer.PointerCapDiameter = 20; - -circularPointer.PointerCapStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x39, 0xb2, 0xc6)); - -circularPointer.Value = 60; - -circularPointer.NeedlePointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x39, 0xb2, 0xc6)); - -circularScale.Pointers.Add(circularPointer); - -//Adding range pointer - -CircularPointer circularPointer1 = new CircularPointer(); - -circularPointer1.PointerType = PointerType.RangePointer; - -circularPointer1.Value = 40; - -circularPointer1.RangePointerStrokeThickness = 9; - -circularPointer1.RangePointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xd1, 0xdb, 0xdb)); - -circularScale.Pointers.Add(circularPointer1); - -//Adding symbol pointer - -CircularPointer circularPointer2 = new CircularPointer(); - -circularPointer2.PointerType = PointerType.SymbolPointer; - -circularPointer2.Value = 70; - -circularPointer2.Symbol = Syncfusion.UI.Xaml.Gauges.Symbol.InvertedArrow; - -circularScale.Pointers.Add(circularPointer2); - -sfCircularGauge.Scales.Add(circularScale); - -this.Content = sfCircularGauge; - -} - -} - + public sealed partial class MainPage : Page + { + public MainPage() + { + this.InitializeComponent(); + SfCircularGauge sfCircularGauge = new SfCircularGauge(); + sfCircularGauge.Height = 500; + sfCircularGauge.Width = 500; + //Adding header + sfCircularGauge.HeaderAlignment = HeaderAlignment.Custom; + sfCircularGauge.GaugeHeaderPosition = new Point(0.4, 0.7); + TextBlock textBlock = new TextBlock(); + textBlock.Text = "Temperature (K)"; + textBlock.Height = 40; + textBlock.Width = 120; + textBlock.FontSize = 15; + textBlock.Foreground = new SolidColorBrush(Colors.Black); + sfCircularGauge.GaugeHeader = textBlock; + + //Initializing scales for circular gauge + CircularScale circularScale = new CircularScale(); + circularScale.Radius = 150; + circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); + circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); + circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); + circularScale.RimStrokeThickness = 9; + circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); + //Adding range + CircularRange circularRange = new CircularRange(); + circularRange.StartValue = 0; + circularRange.EndValue = 60; + circularRange.Stroke = new SolidColorBrush(Color.FromArgb(0xff, 0xd1, 0xdb, 0xdb)); + circularScale.Ranges.Add(circularRange); + + //Adding needle pointer + CircularPointer circularPointer = new CircularPointer(); + circularPointer.PointerType = PointerType.NeedlePointer; + circularPointer.NeedleLengthFactor = 0.5; + circularPointer.NeedlePointerType = NeedlePointerType.Triangle; + circularPointer.PointerCapDiameter = 20; + circularPointer.PointerCapStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x39, 0xb2, 0xc6)); + circularPointer.Value = 60; + circularPointer.NeedlePointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x39, 0xb2, 0xc6)); + circularScale.Pointers.Add(circularPointer); + //Adding range pointer + CircularPointer circularPointer1 = new CircularPointer(); + circularPointer1.PointerType = PointerType.RangePointer; + circularPointer1.Value = 40; + circularPointer1.RangePointerStrokeThickness = 9; + circularPointer1.RangePointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xd1, 0xdb, 0xdb)); + circularScale.Pointers.Add(circularPointer1); + + //Adding symbol pointer + CircularPointer circularPointer2 = new CircularPointer(); + circularPointer2.PointerType = PointerType.SymbolPointer; + circularPointer2.Value = 70; + circularPointer2.Symbol = Syncfusion.UI.Xaml.Gauges.Symbol.InvertedArrow; + circularScale.Pointers.Add(circularPointer2); + sfCircularGauge.Scales.Add(circularScale); + this.Content = sfCircularGauge; + } + } } {% endhighlight %} @@ -592,7 +398,7 @@ this.Content = sfCircularGauge; The following screenshot illustrates the result of the previous codes. -![Getting_Started_img1](Getting_Started_images/Getting_Started_img1.png) +![UWP Radial Gauge getting started](Getting_Started_images/Getting_Started_img1.png) -You can find the complete getting started sample from this [`link`](http://www.syncfusion.com/downloads/support/directtrac/general/ze/GaugeGettingStarted-1968766965). +You can find the complete getting started sample from this [`link`](http://www.syncfusion.com/downloads/support/directtrac/general/ze/GaugeGettingStarted-1968766965). diff --git a/uwp/Radial-Gauge/Header.md b/uwp/Radial-Gauge/Header.md index fd64053e3..9fb7ec3ef 100644 --- a/uwp/Radial-Gauge/Header.md +++ b/uwp/Radial-Gauge/Header.md @@ -8,95 +8,62 @@ documentation: ug --- # Header in UWP Radial Gauge (SfCircularGauge) -Header allows you to show text or any UI content inside the gauge control using [`GaugeHeader`](https://help.syncfusion.com/cr/uwp/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. +The header allows you to show text or any UI content inside the gauge control using the [`GaugeHeader`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_GaugeHeader) property. This provides information about the data that is being plotted in the circular gauge. ## Header -The [`GaugeHeader`](https://help.syncfusion.com/cr/uwp/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/uwp/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 in a circular gauge. {% tabs %} {% highlight xml %} - - + - - - + - - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - sfCircularGauge.HeaderAlignment = HeaderAlignment.Center; - TextBlock textBlock = new TextBlock(); - textBlock.Text = "Temperature (K)"; - textBlock.Height = 40; - textBlock.Width = 100; - textBlock.FontSize = 13; - textBlock.Foreground = new SolidColorBrush(Colors.Black); - sfCircularGauge.GaugeHeader = textBlock; - CircularScale circularScale = new CircularScale(); - circularScale.Radius = 150; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.RimStrokeThickness = 8; - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Header_img1](Header_images/Header_img1.png) +![UWP Radial Gauge header](Header_images/Header_img1.png) ## Setting alignment for header @@ -105,297 +72,182 @@ The gauge header can be positioned by using the [`HeaderAlignment`](https://help It includes the following options: * Left - * Right - * Top - * Bottom - * Center - * TopLeft - * TopRight - * BottomLeft - * BottomRight - * Custom {% tabs %} {% highlight xml %} - - + - - - + - - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - sfCircularGauge.HeaderAlignment = HeaderAlignment.Top; - TextBlock textBlock = new TextBlock(); - textBlock.Text = "Temperature (K)"; - textBlock.Height = 40; - textBlock.Width = 100; - textBlock.FontSize = 13; - textBlock.Foreground = new SolidColorBrush(Colors.Black); - sfCircularGauge.GaugeHeader = textBlock; - CircularScale circularScale = new CircularScale(); - circularScale.Radius = 150; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.RimStrokeThickness = 8; - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Header_img2](Header_images/Header_img2.png) +![UWP Radial Gauge header alignment](Header_images/Header_img2.png) ## Setting position for header -The [`GaugeHeaderPosition`](https://help.syncfusion.com/cr/uwp/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`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_GaugeHeaderPosition) should be specified in offset value. In the point value, which has been given for the [`GaugeHeaderPosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_GaugeHeaderPosition) , the first value represent x-coordinate and the second value represents y-coordinate. First, set the [`HeaderAlignment`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_HeaderAlignment) to custom, then set the position of header. +The [`GaugeHeaderPosition`](https://help.syncfusion.com/cr/uwp/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 the [`GaugeHeaderPosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_GaugeHeaderPosition) should be specified in an offset value. In the point value that has been given for the [`GaugeHeaderPosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_GaugeHeaderPosition), the first value represents the x-coordinate and the second value represents the y-coordinate. First, set the [`HeaderAlignment`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_HeaderAlignment) to Custom, then set the position of the header. {% tabs %} {% highlight xml %} - - + - - - + - - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - sfCircularGauge.HeaderAlignment = HeaderAlignment.Custom; - sfCircularGauge.GaugeHeaderPosition = new Point(0.42, 0.6); - TextBlock textBlock = new TextBlock(); - textBlock.Text = "Temperature (K)"; - textBlock.Height = 40; - textBlock.Width = 100; - textBlock.FontSize = 13; - textBlock.Foreground = new SolidColorBrush(Colors.Black); - sfCircularGauge.GaugeHeader = textBlock; - CircularScale circularScale = new CircularScale(); - circularScale.Radius = 150; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.RimStrokeThickness = 8; - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Header_img3](Header_images/Header_img3.png) +![UWP Radial Gauge header position](Header_images/Header_img3.png) ## Customization of 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`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_FontFamily), [`FontStyle`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_FontStyle), [`FontSize`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_FontSize), and [`Foreground`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_Foreground) properties. {% tabs %} {% highlight xml %} - - + - - - + - - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - sfCircularGauge.HeaderAlignment = HeaderAlignment.Custom; - sfCircularGauge.GaugeHeaderPosition = new Point(0.42, 0.6); - TextBlock textBlock = new TextBlock(); - textBlock.Text = "Temperature (K)"; - textBlock.Height = 40; - textBlock.Width = 100; - textBlock.FontSize = 13; - textBlock.Foreground = new SolidColorBrush(Colors.Black); - sfCircularGauge.GaugeHeader = textBlock; - sfCircularGauge.FontSize = 15; - sfCircularGauge.FontFamily = new FontFamily("Monotype Corsiva"); - sfCircularGauge.FontStyle = Windows.UI.Text.FontStyle.Italic; - sfCircularGauge.Foreground = new SolidColorBrush(Colors.Blue); - CircularScale circularScale = new CircularScale(); - circularScale.Radius = 150; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.RimStrokeThickness = 8; - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Header_img4](Header_images/Header_img4.png) +![UWP Radial Gauge header font customization](Header_images/Header_img4.png) diff --git a/uwp/Radial-Gauge/Labels.md b/uwp/Radial-Gauge/Labels.md index cba4950e0..0d14a9cc5 100644 --- a/uwp/Radial-Gauge/Labels.md +++ b/uwp/Radial-Gauge/Labels.md @@ -8,227 +8,157 @@ documentation: ug --- # Labels in UWP Radial Gauge (SfCircularGauge) -The [`Scale`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html) labels associate numeric values with major scale tick marks. +The [`CircularScale`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html) labels associate numeric values with major scale tick marks. ## Label stroke customization -The label color can be changed using the [`LabelStroke`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelStroke) property. +The label color can be changed using the [`LabelStroke`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelStroke) property. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - circularScale.RimStrokeThickness = 8; - circularScale.Radius = 150; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.LabelStroke = new SolidColorBrush(Colors.DeepPink); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Labels_img1](Labels_images/Labels_img1.png) +![UWP Radial Gauge label stroke customization](Labels_images/Labels_img1.png) ## Label font customization -The label font can be customized using the `FontSize`, `FontFamily`, and `FontStyle` properties. +The label font can be customized using the [`FontSize`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_FontSize), [`FontFamily`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_FontFamily), and [`FontStyle`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_FontStyle) properties. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - sfCircularGauge.FontSize = 20; - sfCircularGauge.FontFamily = new FontFamily("Monotype Corsiva"); - sfCircularGauge.FontStyle = Windows.UI.Text.FontStyle.Italic; - CircularScale circularScale = new CircularScale(); - circularScale.RimStrokeThickness = 8; - circularScale.Radius = 150; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Labels_img2](Labels_images/Labels_img2.png) +![UWP Radial Gauge label font customization](Labels_images/Labels_img2.png) ## Setting position for labels -The `Labels` can be placed inside the scale, outside the scale, or on the scale using the following two ways: - -1. Placing the labels by selecting one of the options available in the [`LabelPosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelPosition) property. - -They are, +The labels can be placed inside the scale, outside the scale, or on the scale using the following two ways: -1.Inside (Default) +1. Placing the labels by selecting one of the options available in the [`LabelPosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelPosition) property. -2.Outside +They are: -3.Custom +* Inside (Default) +* Outside +* Custom -{% capture codesnippet1 %} +{% capture codesnippet1 %} {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - circularScale.RimStrokeThickness = 8; - circularScale.Radius = 150; - circularScale.LabelPosition = LabelPosition.Outside; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -{% endcapture %} +{% endcapture %} -{{ codesnippet1 | OrderList_Indent_Level_2 }} +{{ codesnippet1 | OrderList_Indent_Level_2 }} -![Labels_img3](Labels_images/Labels_img3.png) +![UWP Radial Gauge label position outside](Labels_images/Labels_img3.png) -2. Positioning the labels far away from the ticks using the [`LabelOffset`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelOffset) property. First, set the [`LabelPosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelPosition) to custom, and then position the label using the [`LabelOffset`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelOffset) property. +2. Positioning the labels far away from the ticks using the [`LabelOffset`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelOffset) property. First, set the [`LabelPosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelPosition) to Custom, and then position the label using the [`LabelOffset`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelOffset) property. {% capture codesnippet2 %} @@ -236,58 +166,35 @@ sfCircularGauge.Scales.Add(circularScale); {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - circularScale.RimStrokeThickness = 8; - circularScale.Radius = 150; - circularScale.LabelPosition = LabelPosition.Custom; - circularScale.LabelOffset = 0.5; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} @@ -296,454 +203,304 @@ sfCircularGauge.Scales.Add(circularScale); {% endcapture %} -{{ codesnippet2 | OrderList_Indent_Level_1 }} +{{ codesnippet2 | OrderList_Indent_Level_1 }} -![Labels_img4](Labels_images/Labels_img4.png) +![UWP Radial Gauge label offset](Labels_images/Labels_img4.png) ## Setting smart labels -Smart labels allow to change the numeric scale type of the labels displayed in a gauge scale and customize the labels by adding prefixes or suffixes to the scale labels. +Smart labels allow you to change the numeric scale type of the labels displayed in a gauge scale and customize the labels by adding prefixes or suffixes to the scale labels. -### Enable/disable smart labels +### Enable/disable smart labels -The [`EnableSmartLabels`](https://help.syncfusion.com/cr/uwp/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. +The [`EnableSmartLabels`](https://help.syncfusion.com/cr/uwp/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. ## Setting numeric scale type -The [`NumericScaleType`](https://help.syncfusion.com/cr/uwp/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/uwp/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 - -•Thousands - -•Millions - -•Billions - -•Trillions - -•Quadrillions - -•Quintillions +* Auto +* Thousands +* Millions +* Billions +* Trillions +* Quadrillions +* Quintillions {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - circularScale.StartValue = 0; - circularScale.EndValue = 100; - circularScale.EnableSmartLabels = true; - circularScale.NumericScaleType = NumericScaleType.Thousands; - circularScale.RimStrokeThickness = 8; - circularScale.Radius = 150; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Labels_img5](Labels_images/Labels_img5.png) +![UWP Radial Gauge numeric scale type](Labels_images/Labels_img5.png) ## Setting number of fraction digits for labels -The [`NoOfFractionDigit`](https://help.syncfusion.com/cr/uwp/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. +The [`NoOfFractionalDigit`](https://help.syncfusion.com/cr/uwp/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. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - circularScale.NoOfFractionalDigit = 3; - circularScale.RimStrokeThickness = 8; - circularScale.Radius = 150; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Labels_img6](Labels_images/Labels_img6.png) +![UWP Radial Gauge fraction digits](Labels_images/Labels_img6.png) ## Setting postfix and prefix for labels -You can postfix/prefix values to the scale labels using the [`LabelPostfix`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelPostfix) and [`LabelPrefix`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelPrefix) properties, respectively. +You can postfix or prefix values to the scale labels using the [`LabelPostfix`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelPostfix) and [`LabelPrefix`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelPrefix) properties, respectively. ### Label postfix -The [`LabelPostfix`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelPostfix) property allows to postfix the values to the scale labels. +The [`LabelPostfix`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelPostfix) property allows you to postfix the values to the scale labels. {% tabs %} {% highlight xml %} - - - - - - - - - - - - - - + + + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - circularScale.LabelPostfix = "k"; - circularScale.RimStrokeThickness = 8; - circularScale.Radius = 150; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Labels_img7](Labels_images/Labels_img7.png) +![UWP Radial Gauge label postfix](Labels_images/Labels_img7.png) ### Label prefix -The [`LabelPrefix`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelPrefix) property allows to prefix the values to the scale labels. +The [`LabelPrefix`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_LabelPrefix) property allows you to prefix the values to the scale labels. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - circularScale.LabelPrefix = "$"; - circularScale.RimStrokeThickness = 8; - circularScale.Radius = 150; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Labels_img8](Labels_images/Labels_img8.png) +![UWP Radial Gauge label prefix](Labels_images/Labels_img8.png) ## Edge label customization -You can customize the edge label by using the [`ShowFirstLabel`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_ShowFirstLabel) and [`ShowLastLabel`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_ShowLastLabel) properties, which are Boolean properties. The [`ShowFirstLabel`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_ShowFirstLabel) property is used to enable or disable first label, and the [`ShowLastLabel`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_ShowLastLabel) property is used to enable or disable the last label in circular gauge. +You can customize the edge label by using the [`ShowFirstLabel`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_ShowFirstLabel) and [`ShowLastLabel`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_ShowLastLabel) properties, which are Boolean properties. The [`ShowFirstLabel`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_ShowFirstLabel) property is used to enable or disable the first label, and the [`ShowLastLabel`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_ShowLastLabel) property is used to enable or disable the last label in the circular gauge. {% tabs %} {% highlight xml %} - - - - - - - - - - - - - - - - - + + + + + + + + + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - circularScale.StartValue = 0; - circularScale.Interval = 1; - circularScale.MinorTicksPerInterval = 5; - circularScale.EndValue = 12; - circularScale.StartAngle = 270; - circularScale.SweepAngle = 360; - circularScale.ShowFirstLabel = false; - circularScale.RimStrokeThickness = 8; - circularScale.Radius = 150; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Labels_img9](Labels_images/Labels_img9.png) +![UWP Radial Gauge edge label customization](Labels_images/Labels_img9.png) ## Setting auto angle for label -Scale labels can be rotated automatically based on the current angle. To enable or disable the auto angle, use the [`EnableAutoAngle`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_EnableAutoAngle) property. +Scale labels can be rotated automatically based on the current angle. To enable or disable the auto angle, use the [`EnableAutoAngle`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_EnableAutoAngle) property. {% tabs %} {% highlight xml %} - - - - - - - - - - - - - - - - - + + + + + + + + + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - circularScale.EnableAutoAngle = true; - circularScale.RimStrokeThickness = 8; - circularScale.Radius = 150; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Labels_img10](Labels_images/Labels_img10.png) +![UWP Radial Gauge auto angle for label](Labels_images/Labels_img10.png) diff --git a/uwp/Radial-Gauge/Overview.md b/uwp/Radial-Gauge/Overview.md index fbbd61f94..58e781614 100644 --- a/uwp/Radial-Gauge/Overview.md +++ b/uwp/Radial-Gauge/Overview.md @@ -8,7 +8,7 @@ documentation: ug --- # UWP Radial Gauge (SfCircularGauge) Overview -Circular Gauge helps you to visualize the numeric values over a circular scale. The appearance of the gauge is fully customized to integrate your applications without fault. +The Circular Gauge helps you to visualize the numeric values over a circular scale. The appearance of the gauge is fully customized to integrate your applications without fault. ## Key features @@ -17,16 +17,12 @@ Circular Gauge helps you to visualize the numeric values over a circular scale. [`SfCircularGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html) is a composite UI element with the following subparts: * Scales - * Ranges - * Pointers - * Header - * Annotations -The circular gauge control is highly customizable control with variety of simple APIs to modify its basic look and feel. You can position ranges, ticks, labels, and range pointers as needed. +The circular gauge control is a highly customizable control with a variety of simple APIs to modify its basic look and feel. You can position ranges, ticks, labels, and range pointers as needed. ### Scales @@ -48,7 +44,7 @@ The circular gauge control is highly customizable control with variety of simple [`Annotations`](https://help.syncfusion.com/uwp/sfcirculargauge/annotations) allows you to mark the specific area of interest in a circular gauge. You can place custom views, text, and images as annotations by using the annotations feature. -![Overview_img1](Overview_images/Overview_img1.jpeg) +![UWP Radial Gauge overview](Overview_images/Overview_img1.jpeg) diff --git a/uwp/Radial-Gauge/Pointers.md b/uwp/Radial-Gauge/Pointers.md index 27f5f5fc0..2aa85561d 100644 --- a/uwp/Radial-Gauge/Pointers.md +++ b/uwp/Radial-Gauge/Pointers.md @@ -9,180 +9,130 @@ documentation: ug # Pointers in UWP Radial Gauge (SfCircularGauge) -Pointers are used to indicate values on the scale. Value of the pointer can be modified using the [`Value`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_Value) property. +Pointers are used to indicate values on the scale. The value of the pointer can be modified using the [`Value`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_Value) property. ## Pointer Type -There are three types of pointers. You can choose a pointer using the [`PointerType`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_PointerType) property. +There are three types of pointers. You can choose a pointer using the [`PointerType`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_PointerType) property. ## Needle pointer -A needle pointer contains two parts, a needle and a pointer cap, that can be placed on a gauge to mark values. +A needle pointer contains two parts: a needle and a pointer cap, that can be placed on a gauge to mark values. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale scale = new CircularScale(); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.PointerType = PointerType.NeedlePointer; - scale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(scale); {% endhighlight %} {% endtabs %} -![Needle pointer](Pointers_images/Pointers_img1.png) +![UWP Radial Gauge needle pointer](Pointers_images/Pointers_img1.png) ### NeedlePointerType The appearance of the needle pointer can be customized using the [`NeedlePointerType`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_NeedlePointerType) property. The default value of this property is Rectangle. The [`NeedlePointerType`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_NeedlePointerType) is an `enum` property that includes the following options: -1. Rectangle - -2. Triangle - -3. Tapered - -4. Arrow +* Rectangle +* Triangle +* Tapered +* Arrow {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale scale = new CircularScale(); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.PointerType = PointerType.NeedlePointer; - circularPointer.NeedlePointerType = NeedlePointerType.Triangle; - scale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(scale); {% endhighlight %} {% endtabs %} -![Needle pointer type](Pointers_images/Pointers_img2.png) +![UWP Radial Gauge needle pointer type](Pointers_images/Pointers_img2.png) ### Needle pointer customization -The length of a needle is controlled using the [`NeedleLengthFactor`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_NeedleLengthFactor) property. The minimum and maximum bounds of the [`NeedleLengthFactor`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_NeedleLengthFactor) property are 0 and 1. The needle’s UI is customized using the [`NeedlePointerStroke`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_NeedlePointerStroke) and [`NeedlePointerStrokeThickness`](https://help.syncfusion.com/cr/uwp/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/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_PointerCapDiameter) property, and color can be modified using the [`PointerCapStroke`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_PointerCapStroke) property. +The length of a needle is controlled using the [`NeedleLengthFactor`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_NeedleLengthFactor) property. The minimum and maximum bounds of the [`NeedleLengthFactor`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_NeedleLengthFactor) property are 0 and 1. The needle's UI is customized using the [`NeedlePointerStroke`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_NeedlePointerStroke) and [`NeedlePointerStrokeThickness`](https://help.syncfusion.com/cr/uwp/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/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_PointerCapDiameter) property, and the color can be modified using the [`PointerCapStroke`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_PointerCapStroke) property. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale scale = new CircularScale(); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.PointerType = PointerType.NeedlePointer; - circularPointer.NeedlePointerType = NeedlePointerType.Triangle; - circularPointer.NeedlePointerStroke = new SolidColorBrush(Colors.DeepSkyBlue); - -circularPointer.NeedlePointerStrokeThickness =10; - +circularPointer.NeedlePointerStrokeThickness = 10; circularPointer.NeedleLengthFactor = 0.5; - circularPointer.PointerCapDiameter = 20; - circularPointer.PointerCapStroke = new SolidColorBrush(Colors.DeepSkyBlue); - scale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(scale); {% endhighlight %} {% endtabs %} -![Needle pointer customization](Pointers_images/Pointers_img3.png) +![UWP Radial Gauge needle pointer customization](Pointers_images/Pointers_img3.png) ### Setting visibility of needle pointer @@ -192,151 +142,107 @@ The visibility of the needle pointer can be set using the [`NeedlePointerVisibil {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale scale = new CircularScale(); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Visibility.Hidden; - scale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(scale); {% endhighlight %} {% endtabs %} -![Needle pointer customization](Pointers_images/Pointers_img4.png) +![UWP Radial Gauge needle pointer visibility](Pointers_images/Pointers_img4.png) ## Range pointer -The range pointer is an accenting line or shaded background range that can be placed on a gauge to mark values. +The range pointer is an accenting line or shaded background range that can be placed on a gauge to mark values. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale scale = new CircularScale(); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.PointerType = PointerType.RangePointer; - circularPointer.Value = 50; - scale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(scale); {% endhighlight %} {% endtabs %} -![Range pointer customization](Pointers_images/Pointers_img5.png) +![UWP Radial Gauge range pointer](Pointers_images/Pointers_img5.png) ### Range pointer customization -The range pointer’s UI is customized using the [`RangePointerStroke`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_RangePointerStroke) and [`RangePointerStrokeThickness`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_RangePointerStrokeThickness) properties. +The range pointer's UI is customized using the [`RangePointerStroke`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_RangePointerStroke) and [`RangePointerStrokeThickness`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_RangePointerStrokeThickness) properties. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale scale = new CircularScale(); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.PointerType = PointerType.RangePointer; - circularPointer.Value = 50; - circularPointer.RangePointerStroke = new SolidColorBrush(Colors.DarkCyan); - circularPointer.RangePointerStrokeThickness = 20; - scale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(scale); {% endhighlight %} {% endtabs %} -![Range pointer customization](Pointers_images/Pointers_img6.png) +![UWP Radial Gauge range pointer customization](Pointers_images/Pointers_img6.png) ### Setting visibility for range pointer @@ -346,120 +252,88 @@ The [`RangePointerVisibility`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI. {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale scale = new CircularScale(); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.RangePointerVisibility = Visibility.Hidden; - scale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(scale); {% endhighlight %} {% endtabs %} -![Range pointer customization](Pointers_images/Pointers_img7.png) +![UWP Radial Gauge range pointer visibility](Pointers_images/Pointers_img7.png) ### Setting position for range pointer -The `RangePointer` can be placed inside or outside the scale by the following two ways: -1. Using the [`RangePointerPosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangePointerPosition) property. +The [`RangePointer`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.PointerType.html#Syncfusion_UI_Xaml_Gauges_PointerType_RangePointer) can be placed inside or outside the scale in the following two ways: +1. Using the [`RangePointerPosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangePointerPosition) property. -You can place the range pointer by selecting one of the options available in the [`RangePointerPosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangePointerPosition) property. +You can place the range pointer by selecting one of the options available in the [`RangePointerPosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangePointerPosition) property. They are: -1. Inside (Default) - -2. Outside - -3. Cross +* Inside (Default) +* Outside +* Cross +* Custom -4. Custom +{% capture codesnippet1 %} -{% capture codesnippet1 %} - {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale scale = new CircularScale(); - scale.RangePointerPosition = RangePointerPosition.Outside; - CircularPointer circularPointer = new CircularPointer(); - circularPointer.PointerType = PointerType.RangePointer; - circularPointer.RangePointerStroke = new SolidColorBrush(Colors.HotPink); - circularPointer.Value = 60; - scale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(scale); {% endhighlight %} {% endtabs %} - -{% endcapture %} -{{ codesnippet1 | OrderList_Indent_Level_1 }} +{% endcapture %} + +{{ codesnippet1 | OrderList_Indent_Level_1 }} -![Range pointer customization](Pointers_images/Pointers_img8.png) +![UWP Radial Gauge range pointer position](Pointers_images/Pointers_img8.png) -2. Using the [`RangePointerOffset`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangePointerOffset) property. First, set the [`RangePointerPosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangePointerPosition) to custom, and then set the [`RangePointerOffset`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangePointerOffset) property. +2. Using the [`RangePointerOffset`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangePointerOffset) property. First, set the [`RangePointerPosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangePointerPosition) to Custom, and then set the [`RangePointerOffset`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangePointerOffset) property. {% capture codesnippet2 %} @@ -467,44 +341,28 @@ sfCircularGauge.Scales.Add(scale); {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale scale = new CircularScale(); - scale.RangePointerOffset = 0.5; - scale.RangePointerPosition = RangePointerPosition.Custom; - CircularPointer circularPointer = new CircularPointer(); - circularPointer.PointerType = PointerType.RangePointer; - circularPointer.Value = 90; - scale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(scale); {% endhighlight %} @@ -513,59 +371,45 @@ sfCircularGauge.Scales.Add(scale); {% endcapture %} -{{ codesnippet2 | OrderList_Indent_Level_1 }} +{{ codesnippet2 | OrderList_Indent_Level_1 }} -![Range pointer customization](Pointers_images/Pointers_img9.png) +![UWP Radial Gauge range pointer offset](Pointers_images/Pointers_img9.png) ## 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`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_Symbol) is an `enum` property that provides symbol options for the symbol pointer, which contains several shapes such as rectangle, ellipse, and triangle. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale scale = new CircularScale(); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.PointerType = PointerType.SymbolPointer; - circularPointer.Value = 60; - scale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(scale); {% endhighlight %} {% endtabs %} -![Symbol pointer](Pointers_images/Pointers_img10.png) +![UWP Radial Gauge symbol pointer](Pointers_images/Pointers_img10.png) ### Symbol pointer customization @@ -575,378 +419,245 @@ You can modify the stroke of the symbol by changing the [`SymbolPointerStroke`]( {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale scale = new CircularScale(); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.PointerType = PointerType.SymbolPointer; - circularPointer.Value = 60; - circularPointer.SymbolPointerStroke = new SolidColorBrush(Colors.Red); - circularPointer.SymbolPointerHeight = 20; - circularPointer.SymbolPointerWidth = 20; - scale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(scale); {% endhighlight %} {% endtabs %} -![Symbol pointer customization](Pointers_images/Pointers_img11.png) +![UWP Radial Gauge symbol pointer customization](Pointers_images/Pointers_img11.png) ### Setting visibility of symbol pointer -The visibility of the symbol pointer can be set using the [`SymbolPointerVisibility`](https://help.syncfusion.com/cr/uwp/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/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_SymbolPointerVisibility) property. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale scale = new CircularScale(); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.SymbolPointerVisibility = Visibility.Hidden; - scale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(scale); {% endhighlight %} {% endtabs %} -![Symbol pointer customization](Pointers_images/Pointers_img12.png) +![UWP Radial Gauge symbol pointer visibility](Pointers_images/Pointers_img12.png) ### Setting multiple pointers -In addition to the default pointer, you can add n number of pointers to a scale using the [`Pointers`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Pointers) property. +In addition to the default pointer, you can add multiple pointers to a scale using the [`Pointers`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Pointers) property. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - - - - - + + + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale scale = new CircularScale(); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.PointerType = PointerType.NeedlePointer; - circularPointer.NeedleLengthFactor = 0.4; - circularPointer.Value = 60; - circularPointer.NeedlePointerType = NeedlePointerType.Tapered; - circularPointer.PointerCapStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x39, 0xb2, 0xc6)); - scale.Pointers.Add(circularPointer); - CircularPointer circularPointer1 = new CircularPointer(); - circularPointer1.PointerType = PointerType.RangePointer; - circularPointer1.Value = 100; - scale.Pointers.Add(circularPointer1); - CircularPointer circularPointer2 = new CircularPointer(); - circularPointer2.PointerType = PointerType.SymbolPointer; - circularPointer2.Value = 50; - circularPointer2.Symbol = Symbol.Pentagon; - circularPointer2.SymbolPointerHeight = 20; - circularPointer2.SymbolPointerWidth = 20; - circularPointer2.SymbolPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x39, 0xb2, 0xc6)); - scale.Pointers.Add(circularPointer2); - -scale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(scale); {% endhighlight %} {% endtabs %} -![Multiple pointer](Pointers_images/Pointers_img13.png) +![UWP Radial Gauge multiple pointers](Pointers_images/Pointers_img13.png) ## Setting animation for pointer -The [`EnableAnimation`](https://help.syncfusion.com/cr/uwp/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 in circular gauge. +The [`EnableAnimation`](https://help.syncfusion.com/cr/uwp/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 in the circular gauge. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - - - + + + + + + - - + {% endhighlight %} {% highlight c# %} - SfCircularGauge sfCircularGauge = new SfCircularGauge(); - - CircularScale scale = new CircularScale(); - - scale.Radius = 150; - - CircularPointer circularPointer = new CircularPointer(); - - circularPointer.PointerType = PointerType.NeedlePointer; - - circularPointer.EnableAnimation = true; - - circularPointer.NeedleLengthFactor = 0.4; - - circularPointer.Value = 60; - - circularPointer.NeedlePointerType = NeedlePointerType.Triangle; - - circularPointer.PointerCapDiameter = 20; - - circularPointer.PointerCapStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x39, 0xb2, 0xc6)); - - scale.Pointers.Add(circularPointer); - - CircularPointer circularPointer1 = new CircularPointer(); - - circularPointer1.PointerType = PointerType.RangePointer; - - circularPointer1.RangePointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x39, 0xb2, 0xc6)); - - circularPointer1.EnableAnimation = true; - - circularPointer1.Value = 100; - - scale.Pointers.Add(circularPointer1); - - scale.Pointers.Add(circularPointer); +SfCircularGauge sfCircularGauge = new SfCircularGauge(); +CircularScale scale = new CircularScale(); +scale.Radius = 150; +CircularPointer circularPointer = new CircularPointer(); +circularPointer.PointerType = PointerType.NeedlePointer; +circularPointer.EnableAnimation = true; +circularPointer.NeedleLengthFactor = 0.4; +circularPointer.Value = 60; +circularPointer.NeedlePointerType = NeedlePointerType.Triangle; +circularPointer.PointerCapDiameter = 20; +circularPointer.PointerCapStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x39, 0xb2, 0xc6)); +scale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(scale); +CircularPointer circularPointer1 = new CircularPointer(); +circularPointer1.PointerType = PointerType.RangePointer; +circularPointer1.RangePointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x39, 0xb2, 0xc6)); +circularPointer1.EnableAnimation = true; +circularPointer1.Value = 100; +scale.Pointers.Add(circularPointer1); +sfCircularGauge.Scales.Add(scale); {% endhighlight %} {% endtabs %} -![Pointer animation](Pointers_images/Pointers_img14.gif) +![UWP Radial Gauge pointer animation](Pointers_images/Pointers_img14.gif) ### Step frequency The [`StepFrequency`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_StepFrequency) property is used to specify the interval between snap points while dragging the [`SymbolPointer`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.PointerType.html#Syncfusion_UI_Xaml_Gauges_PointerType_SymbolPointer) or [`NeedlePointer`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.PointerType.html#Syncfusion_UI_Xaml_Gauges_PointerType_NeedlePointer). -For example, when the value of [`StepFrequency`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_StepFrequency) is 20, then while dragging, the pointer will not move continuously, instead it will update in terms of 20. +For example, when the value of [`StepFrequency`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_StepFrequency) is 20, while dragging the pointer will not move continuously; instead, it will update in terms of 20. -N> To work with the [`StepFrequency`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_StepFrequency) value, enable pointer dragging support. +N> To work with the [`StepFrequency`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_StepFrequency) value, enable pointer dragging support using the [`EnableDragging`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_EnableDragging) property. {% tabs %} {% highlight xml %} - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); +sfCircularGauge.Height = 500; +sfCircularGauge.Width = 500; +CircularScale circularScale = new CircularScale(); +circularScale.Radius = 150; +circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); +circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); +circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); +circularScale.RimStrokeThickness = 9; +circularScale.TickPosition = TickPosition.Cross; +circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - sfCircularGauge.Height = 500; - - sfCircularGauge.Width = 500; - - CircularScale circularScale = new CircularScale(); - - circularScale.Radius = 150; - - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - - circularScale.RimStrokeThickness = 9; - circularScale.TickPosition = TickPosition.Cross; - - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - - CircularPointer circularPointer = new CircularPointer(); - circularPointer.PointerType = PointerType.NeedlePointer; - circularPointer.Value = 60; - circularPointer.EnableAnimation = false; - circularPointer.EnableDragging = true; - circularPointer.StepFrequency = 20; - circularPointer.NeedleLengthFactor = 0.7; - - circularPointer.NeedlePointerType = NeedlePointerType.Triangle; - - circularPointer.PointerCapDiameter = 20; - - circularPointer.PointerCapStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x39, 0xb2, 0xc6)); - - - circularPointer.NeedlePointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x39, 0xb2, 0xc6)); - - circularScale.Pointers.Add(circularPointer); - - CircularPointer circularPointer2 = new CircularPointer(); - - circularPointer2.PointerType = PointerType.SymbolPointer; - - circularPointer2.Value = 70; - - circularPointer2.StepFrequency = 5; - - circularPointer2.EnableDragging = true; - circularPointer2.EnableAnimation = false; - - circularPointer2.Symbol = Syncfusion.UI.Xaml.Gauges.Symbol.Arrow; - - circularScale.Pointers.Add(circularPointer2); - - sfCircularGauge.Scales.Add(circularScale); - - grid.Children.Add(sfCircularGauge); +CircularPointer circularPointer = new CircularPointer(); +circularPointer.PointerType = PointerType.NeedlePointer; +circularPointer.Value = 60; +circularPointer.EnableAnimation = false; +circularPointer.EnableDragging = true; +circularPointer.StepFrequency = 20; +circularPointer.NeedleLengthFactor = 0.7; +circularPointer.NeedlePointerType = NeedlePointerType.Triangle; +circularPointer.PointerCapDiameter = 20; +circularPointer.PointerCapStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x39, 0xb2, 0xc6)); +circularPointer.NeedlePointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x39, 0xb2, 0xc6)); +circularScale.Pointers.Add(circularPointer); +CircularPointer circularPointer2 = new CircularPointer(); +circularPointer2.PointerType = PointerType.SymbolPointer; +circularPointer2.Value = 70; +circularPointer2.StepFrequency = 5; +circularPointer2.EnableDragging = true; +circularPointer2.EnableAnimation = false; +circularPointer2.Symbol = Syncfusion.UI.Xaml.Gauges.Symbol.Arrow; +circularScale.Pointers.Add(circularPointer2); +sfCircularGauge.Scales.Add(circularScale); +grid.Children.Add(sfCircularGauge); {% endhighlight %} @@ -956,7 +667,7 @@ SfCircularGauge sfCircularGauge = new SfCircularGauge(); ### Value change started event -Called when the user starts updating a new value of the pointer by initiating the dragging. While dragging the pointer, other events (ValueChanging, ValueChanged, and 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/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_ValueChanging), [`ValueChanged`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_ValueChanged), and [`ValueChangeCompleted`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_ValueChangeCompleted)) will follow after this event. The [`ValueChangeStarted`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_ValueChangeStarted) event contains the following argument. @@ -966,20 +677,23 @@ The [`ValueChangeStarted`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml {% highlight xml %} - - - - - + + + + + + + + + {% endhighlight %} {% highlight c# %} - private void CircularPointer_ValueChangeStarted(object sender, Syncfusion.UI.Xaml.Gauges.PointerValueChangedEventArgs e) - { - - } +private void CircularPointer_ValueChangeStarted(object sender, Syncfusion.UI.Xaml.Gauges.PointerValueChangedEventArgs e) +{ +} {% endhighlight %} @@ -987,7 +701,7 @@ The [`ValueChangeStarted`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml ### Value changing event -Called during a drag when the user is updating before a new value for the pointer by dragging +Called during a drag when the user is updating the pointer with a new value. The [`ValueChanging`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_ValueChanging) event contains the following argument. @@ -999,20 +713,23 @@ The [`ValueChanging`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gaug {% highlight xml %} - - - - - + + + + + + + + + {% endhighlight %} {% highlight c# %} - private void CircularPointer_ValueChanging(object sender, Syncfusion.UI.Xaml.Gauges.PointerValueChangingEventArgs e) - { - - } +private void CircularPointer_ValueChanging(object sender, Syncfusion.UI.Xaml.Gauges.PointerValueChangingEventArgs e) +{ +} {% endhighlight %} @@ -1020,7 +737,7 @@ The [`ValueChanging`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gaug ### Value change completed 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 event. +Called after a new value has been updated by terminating the dragging of the pointer. While dragging the pointer, other events ([`ValueChangeStarted`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_ValueChangeStarted), [`ValueChanging`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_ValueChanging), and [`ValueChanged`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularPointer.html#Syncfusion_UI_Xaml_Gauges_CircularPointer_ValueChanged)) will be called prior to the [`ValueChangeCompleted`](https://help.syncfusion.com/cr/uwp/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. @@ -1032,20 +749,23 @@ The [`ValueChangeCompleted`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xa {% highlight xml %} - - - - - + + + + + + + + + {% endhighlight %} {% highlight c# %} - private void CircularPointer_ValueChangeCompleted(object sender, Syncfusion.UI.Xaml.Gauges.PointerValueChangedEventArgs e) - { - - } +private void CircularPointer_ValueChangeCompleted(object sender, Syncfusion.UI.Xaml.Gauges.PointerValueChangedEventArgs e) +{ +} {% endhighlight %} diff --git a/uwp/Radial-Gauge/Ranges.md b/uwp/Radial-Gauge/Ranges.md index 14b70331b..49a091f48 100644 --- a/uwp/Radial-Gauge/Ranges.md +++ b/uwp/Radial-Gauge/Ranges.md @@ -8,794 +8,496 @@ documentation: ug --- # Ranges in UWP Radial Gauge (SfCircularGauge) -Range is a visual element, which begins and ends at the specified values within a scale. +A range is a visual element that begins and ends at the specified values within a scale. ## Setting start and end values for range -The start and end values of ranges are set by using the [`StartValue`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_StartValue) and [`EndValue`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_EndValue) properties. +The start and end values of ranges are set by using the [`StartValue`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_StartValue) and [`EndValue`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_EndValue) properties. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - - - - - - - + + + + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - circularScale.Radius = 150; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.RimStrokeThickness = 8; - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - CircularRange circularRange = new CircularRange(); - circularRange.StartValue = 0; - circularRange.EndValue = 50; - circularRange.Stroke = new SolidColorBrush(Color.FromArgb(0xff, 0xd1, 0xdb, 0xdb)); - circularScale.Ranges.Add(circularRange); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Ranges_img1](Ranges_images/Ranges_img1.png) +![UWP Radial Gauge range start and end values](Ranges_images/Ranges_img1.png) ## Range customization -A range’s UI is customized by using the [`Stroke`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_Stroke) , [`StrokeThickness`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_StrokeThickness) , and [`RangeOffset`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangeOffset) properties. First, set the [`RangePosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangePosition) property to custom, and then set the offset. +A range's UI is customized by using the [`Stroke`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_Stroke), [`StrokeThickness`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_StrokeThickness), and [`RangeOffset`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangeOffset) properties. First, set the [`RangePosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangePosition) property to Custom, and then set the offset. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - - - - - - - + + + + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - circularScale.RangePosition = RangePosition.Custom; - circularScale.RangeOffset = 0.55; - circularScale.Radius = 150; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.RimStrokeThickness = 8; - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - CircularRange circularRange = new CircularRange(); - circularRange.StartValue = 0; - circularRange.EndValue = 50; - circularRange.Stroke = new SolidColorBrush(Colors.Pink); - circularRange.StrokeThickness = 40; - circularScale.Ranges.Add(circularRange); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Ranges_img2](Ranges_images/Ranges_img2.png) +![UWP Radial Gauge range customization](Ranges_images/Ranges_img2.png) ## Setting width for range -The appearance of the circular range is customized by setting the [`StartWidth`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_StartWidth) and [`EndWidth`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_EndWidth) properties. +The appearance of the circular range is customized by setting the [`StartWidth`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_StartWidth) and [`EndWidth`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_EndWidth) properties. {% tabs %} {% highlight xml %} - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - circularScale.RangePosition = RangePosition.Inside; - circularScale.Radius = 150; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.RimStrokeThickness = 8; - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); CircularRange circularRange = new CircularRange(); - circularRange.StartValue = 10; - circularRange.EndValue = 80; - circularRange.StrokeThickness = 10; - circularRange.StartWidth = 1; - circularRange.EndWidth = 10; - circularRange.Stroke = new SolidColorBrush(Color.FromArgb(0xff, 0xd1, 0xdb, 0xdb)); - circularScale.Ranges.Add(circularRange); CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Ranges_img3](Ranges_images/Ranges_img3.png) +![UWP Radial Gauge range width](Ranges_images/Ranges_img3.png) ## Binding range stroke -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/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_BindRangeStrokeToLabels) and [`BindRangeStrokeToTicks`](https://help.syncfusion.com/cr/uwp/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/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_BindRangeStrokeToLabels) and [`BindRangeStrokeToTicks`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_BindRangeStrokeToTicks) properties to true. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale scale = new CircularScale(); - scale.Radius = 150; - scale.BindRangeStrokeToLabels = true; - scale.BindRangeStrokeToTicks = true; - CircularRange circularRange = new CircularRange(); - circularRange.StartValue = 0; - circularRange.EndValue = 40; - circularRange.Stroke = new SolidColorBrush(Colors.Green); - circularRange.StrokeThickness = 10; - scale.Ranges.Add(circularRange); - CircularRange circularRange1 = new CircularRange(); - circularRange1.StartValue = 40; - circularRange1.EndValue = 60; - circularRange1.Stroke = new SolidColorBrush(Colors.Yellow); - circularRange1.StrokeThickness = 10; - scale.Ranges.Add(circularRange1); - CircularRange circularRange2 = new CircularRange(); - circularRange2.StartValue = 60; - circularRange2.EndValue = 100; - circularRange2.Stroke = new SolidColorBrush(Colors.Red); - circularRange2.StrokeThickness = 10; - scale.Ranges.Add(circularRange2); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - scale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(scale); {% endhighlight %} {% endtabs %} -![Ranges_img4](Ranges_images/Ranges_img4.png) - +![UWP Radial Gauge binding range stroke](Ranges_images/Ranges_img4.png) ## Setting position for 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 in the following two ways: ### Range position -You can place the range by selecting one of the options available in the [`RangePosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangePosition) property. +You can place the range by selecting one of the options available in the [`RangePosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangePosition) property. -1.Inside - -2.Outside - -3.SetAsGaugeRim (Default) - -4.Custom +* Inside +* Outside +* SetAsGaugeRim (Default) +* Custom {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - circularScale.RangePosition = RangePosition.Outside; - circularScale.Radius = 150; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.RimStrokeThickness = 8; - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - CircularRange circularRange = new CircularRange(); - circularRange.StartValue = 0; - circularRange.EndValue = 40; - circularRange.Stroke = new SolidColorBrush(Colors.Green); - circularRange.StrokeThickness = 10; - circularScale.Ranges.Add(circularRange); - CircularRange circularRange1 = new CircularRange(); - circularRange1.StartValue = 40; - circularRange1.EndValue = 60; - circularRange1.Stroke = new SolidColorBrush(Colors.Yellow); - circularRange1.StrokeThickness = 10; - circularScale.Ranges.Add(circularRange1); - CircularRange circularRange2 = new CircularRange(); - circularRange2.StartValue = 60; - circularRange2.EndValue = 100; - circularRange2.Stroke = new SolidColorBrush(Colors.Red); - circularRange2.StrokeThickness = 10; - circularScale.Ranges.Add(circularRange2); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Ranges_img5](Ranges_images/Ranges_img5.png) +![UWP Radial Gauge range position](Ranges_images/Ranges_img5.png) ### Range offset -You can place the range by using [`RangeOffset`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangeOffset) property. First, set the [`RangePosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangePosition) to custom, and then set the [`RangeOffset`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangeOffset) property. +You can place the range by using the [`RangeOffset`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangeOffset) property. First, set the [`RangePosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangePosition) to Custom, and then set the [`RangeOffset`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RangeOffset) property. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - - - - - - - + + + + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - circularScale.RangeOffset = 0.5; - circularScale.RangePosition = RangePosition.Custom; - circularScale.Radius = 150; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.RimStrokeThickness = 8; - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - CircularRange circularRange = new CircularRange(); - circularRange.StartValue = 0; - circularRange.EndValue = 100; - circularRange.StrokeThickness = 8; - circularRange.Stroke = new SolidColorBrush(Color.FromArgb(0xff, 0xd1, 0xdb, 0xdb)); - circularScale.Ranges.Add(circularRange); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Ranges_img6](Ranges_images/Ranges_img6.png) +![UWP Radial Gauge range offset](Ranges_images/Ranges_img6.png) ## 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/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Ranges) property. +In addition to the default range, you can add multiple ranges to a scale by using the [`Ranges`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Ranges) property. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - circularScale.RangePosition = RangePosition.Inside; - circularScale.Radius = 150; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.RimStrokeThickness = 8; - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - CircularRange circularRange = new CircularRange(); - circularRange.StartValue = 0; - circularRange.EndValue = 40; - circularRange.Stroke = new SolidColorBrush(Colors.Green); - circularRange.StrokeThickness = 10; - circularRange.StartWidth = 1; - circularRange.EndWidth = 10; - circularScale.Ranges.Add(circularRange); - CircularRange circularRange1 = new CircularRange(); - circularRange1.StartValue = 40; - circularRange1.EndValue = 60; - circularRange1.Stroke = new SolidColorBrush(Colors.Yellow); - circularRange1.StrokeThickness = 10; - circularRange1.StartWidth = 1; - circularRange1.EndWidth = 10; - circularScale.Ranges.Add(circularRange1); - CircularRange circularRange2 = new CircularRange(); - circularRange2.StartValue = 60; - circularRange2.EndValue = 100; - circularRange2.Stroke = new SolidColorBrush(Colors.Red); - circularRange2.StrokeThickness = 10; - circularRange2.StartWidth = 1; - circularRange2.EndWidth = 10; - circularScale.Ranges.Add(circularRange2); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Ranges_img7](Ranges_images/Ranges_img7.png) +![UWP Radial Gauge multiple ranges](Ranges_images/Ranges_img7.png) ## Setting gradient color for range -You can give smooth color transition to range by specifying the different colors based on range value. +You can give a smooth color transition to a range by specifying the different colors based on the range value using the [`GradientStops`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularRange.html#Syncfusion_UI_Xaml_Gauges_CircularRange_GradientStops) property. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + - - + {% endhighlight %} {% highlight c# %} - SfCircularGauge sfCircularGauge = new SfCircularGauge(); - - CircularScale circularScale = new CircularScale(); - - circularScale.RangePosition = RangePosition.Inside; - - circularScale.Radius = 150; - - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - - circularScale.RimStrokeThickness = 8; - - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - - CircularRange circularRange = new CircularRange(); - - circularRange.StartValue = 0; - - circularRange.EndValue = 50; - - ObservableCollection gradientColor1 = new ObservableCollection(); - - GaugeGradientStop gaugeGradientStop = new GaugeGradientStop(); - - gaugeGradientStop.Value = 0; - - gaugeGradientStop.Color = Color.FromArgb(0xff, 0x30, 0xB3, 0x2D); - - gradientColor1.Add(gaugeGradientStop); - - GaugeGradientStop gaugeGradientStop1 = new GaugeGradientStop(); - - gaugeGradientStop1.Value = 50; - - gaugeGradientStop1.Color = Color.FromArgb(0xff, 0xFF, 0xDD, 0x00); - - gradientColor1.Add(gaugeGradientStop1); - - circularRange.GradientStops = gradientColor1; - - circularScale.Ranges.Add(circularRange); - - CircularPointer circularPointer = new CircularPointer(); - - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; +SfCircularGauge sfCircularGauge = new SfCircularGauge(); +CircularScale circularScale = new CircularScale(); +circularScale.RangePosition = RangePosition.Inside; +circularScale.Radius = 150; +circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); +circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); +circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); +circularScale.RimStrokeThickness = 8; +circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - circularScale.Pointers.Add(circularPointer); +CircularRange circularRange = new CircularRange(); +circularRange.StartValue = 0; +circularRange.EndValue = 50; +ObservableCollection gradientColor1 = new ObservableCollection(); +GaugeGradientStop gaugeGradientStop = new GaugeGradientStop(); +gaugeGradientStop.Value = 0; +gaugeGradientStop.Color = Color.FromArgb(0xff, 0x30, 0xB3, 0x2D); +gradientColor1.Add(gaugeGradientStop); + +GaugeGradientStop gaugeGradientStop1 = new GaugeGradientStop(); +gaugeGradientStop1.Value = 50; +gaugeGradientStop1.Color = Color.FromArgb(0xff, 0xFF, 0xDD, 0x00); +gradientColor1.Add(gaugeGradientStop1); +circularRange.GradientStops = gradientColor1; +circularScale.Ranges.Add(circularRange); - sfCircularGauge.Scales.Add(circularScale); +CircularPointer circularPointer = new CircularPointer(); +circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; +circularScale.Pointers.Add(circularPointer); +sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Ranges_img8](Ranges_images/Ranges_img8.png) +![UWP Radial Gauge gradient color for range](Ranges_images/Ranges_img8.png) diff --git a/uwp/Radial-Gauge/Rim.md b/uwp/Radial-Gauge/Rim.md index 318ea57b7..05317b79c 100644 --- a/uwp/Radial-Gauge/Rim.md +++ b/uwp/Radial-Gauge/Rim.md @@ -8,286 +8,191 @@ documentation: ug --- # Rim in UWP Radial Gauge (SfCircularGauge) -Scale determines the structure of a circular gauge by using a circular rim. By setting the [`StartAngle`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_StartAngle) and [`SweepAngle`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_SweepAngle) properties, you can change the shape of the circular gauge to a full-circular gauge, half-circular gauge, or quarter-circular gauge. +The scale determines the structure of a circular gauge by using a circular rim. By setting the [`StartAngle`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_StartAngle) and [`SweepAngle`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_SweepAngle) properties, you can change the shape of the circular gauge to a full-circular gauge, half-circular gauge, or quarter-circular gauge. -The [`StartValue`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_StartValue) and [`EndValue`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_EndValue) properties determine the overall range of the circular rim. +The [`StartValue`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_StartValue) and [`EndValue`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_EndValue) properties determine the overall range of the circular rim. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - circularScale.StartAngle = 270; - circularScale.SweepAngle = 360; - circularScale.StartValue = 0; - circularScale.EndValue = 360; - circularScale.Interval = 20; - circularScale.MinorTicksPerInterval = 0; - circularScale.Radius = 150; - circularScale.ShowFirstLabel = false; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.RimStrokeThickness = 8; - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Rim_img1](Rim_images/Rim_img1.png) +![UWP Radial Gauge rim](Rim_images/Rim_img1.png) ## Rim customization -The color and thickness of the rim can be set by using the [`RimStroke`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RimStroke) and [`RimStrokeThickness`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RimStrokeThickness) properties. +The color and thickness of the rim can be set by using the [`RimStroke`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RimStroke) and [`RimStrokeThickness`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RimStrokeThickness) properties. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - circularScale.RadiusFactor = 1; - circularScale.RimStrokeThickness = 40; - circularScale.RimStroke = new SolidColorBrush(Colors.SkyBlue); - circularScale.Radius = 150; - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Rim_img2](Rim_images/Rim_img2.png) +![UWP Radial Gauge rim customization](Rim_images/Rim_img2.png) ## Setting position for rim -You can customize the position of [`Scales`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_Scales) in the following two ways: +You can customize the position of the [`Scales`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_Scales) in the following two ways: -1.`RadiusFactor` property. - -2.`Radius` property. +1. Using the [`RadiusFactor`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RadiusFactor) property. +2. Using the [`Radius`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Radius) property. ### Setting radius factor for rim -The value for [`RadiusFactor`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RadiusFactor) should be specified in offset value. +The value for the [`RadiusFactor`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_RadiusFactor) should be specified in an offset value. {% tabs %} {% highlight xml %} - - - - - - - - - - - - - - + + + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - circularScale.RadiusFactor = 0.5; - circularScale.RimStrokeThickness = 30; - circularScale.Radius = 200; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Rim_img3](Rim_images/Rim_img3.png) +![UWP Radial Gauge rim radius factor](Rim_images/Rim_img3.png) ### Setting radius for rim -You can set the [`Radius`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Radius) of rim in pixel value. +You can set the [`Radius`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Radius) of the rim in a pixel value. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - circularScale.RimStrokeThickness = 8; - circularScale.Radius = 100; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Rim_img4](Rim_images/Rim_img4.png) +![UWP Radial Gauge rim radius](Rim_images/Rim_img4.png) diff --git a/uwp/Radial-Gauge/Scales.md b/uwp/Radial-Gauge/Scales.md index 466a73729..7ba0e766a 100644 --- a/uwp/Radial-Gauge/Scales.md +++ b/uwp/Radial-Gauge/Scales.md @@ -8,670 +8,469 @@ documentation: ug --- # Scales in UWP Radial Gauge (SfCircularGauge) -Scales contain a collection of [`CircularScale`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html) elements, which integrate labels, tick marks, and a rim to customize the basic look and feel of the circular gauge. +The scales contain a collection of [`CircularScale`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html) elements, which integrate labels, tick marks, and a rim to customize the basic look and feel of the circular gauge. ## Scale -The [`CircularScale`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.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. +The [`CircularScale`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html) contains sub elements such as a rim, ticks, labels, ranges, and pointers. They define the radius, start angle, sweep direction, sweep angle, overall minimum and maximum values, and 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/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html). A range will have one or more pointers to point out the values in a scale. +A range is a visual element that begins and ends at the specified values within a [`CircularScale`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html). A range can have one or more pointers to point out the values in a scale. {% tabs %} {% highlight xml %} - - - - - - - - - + + + + + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - circularScale.Radius = 150; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.RimStrokeThickness = 8; - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Circular Scale Image](Scales_images/Scales_img1.png) +![UWP Radial Gauge scale](Scales_images/Scales_img1.png) ## Setting start and end values for scale -The [`StartValue`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_StartValue) and [`EndValue`](https://help.syncfusion.com/cr/uwp/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. +The [`StartValue`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_StartValue) and [`EndValue`](https://help.syncfusion.com/cr/uwp/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. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - circularScale.Radius = 150; - circularScale.StartValue = -30; - circularScale.EndValue = 50; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.RimStrokeThickness = 8; - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Circular Scale Start And End Image](Scales_images/Scales_img2.png) +![UWP Radial Gauge scale start and end values](Scales_images/Scales_img2.png) ## Setting start and sweep angles for scale -The [`StartAngle`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_StartAngle) and [`SweepAngle`](https://help.syncfusion.com/cr/uwp/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. +The [`StartAngle`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_StartAngle) and [`SweepAngle`](https://help.syncfusion.com/cr/uwp/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. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - circularScale.Radius = 150; - circularScale.StartAngle = 185; - circularScale.SweepAngle = 270; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.RimStrokeThickness = 8; - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Circular Scale Start And End Angle Image](Scales_images/Scales_img3.png) - +![UWP Radial Gauge scale start and sweep angles](Scales_images/Scales_img3.png) ## Setting interval for scale -The [`Interval`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Interval) property allows you to set the interval for a scale. +The [`Interval`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Interval) property allows you to set the interval for a scale. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} SfCircularGauge sfCircularGauge = new SfCircularGauge(); - CircularScale circularScale = new CircularScale(); - circularScale.Radius = 150; - circularScale.StartValue = 0; - circularScale.EndValue = 500; - circularScale.Interval = 100; - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - circularScale.RimStrokeThickness = 8; - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - circularScale.Pointers.Add(circularPointer); - sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Circular Scale Interval Image](Scales_images/Scales_img4.png) +![UWP Radial Gauge scale interval](Scales_images/Scales_img4.png) ## Setting auto interval for scale -By default, the interval value is calculated by 10. By using the [`EnableAutoInterval`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_EnableAutoInterval) property, you can set auto interval based on the start and end values. +By default, the interval value is calculated by 10. By using the [`EnableAutoInterval`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_EnableAutoInterval) property, you can set the auto interval based on the start and end values. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} - SfCircularGauge sfCircularGauge = new SfCircularGauge(); - - CircularScale circularScale = new CircularScale(); - - circularScale.Radius = 150; - - circularScale.StartValue = 0; - - circularScale.EndValue = 1000; - - circularScale.EnableAutoInterval = true; - - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - - circularScale.RimStrokeThickness = 8; - - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - - CircularPointer circularPointer = new CircularPointer(); - - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - - circularScale.Pointers.Add(circularPointer); - - sfCircularGauge.Scales.Add(circularScale); +SfCircularGauge sfCircularGauge = new SfCircularGauge(); +CircularScale circularScale = new CircularScale(); +circularScale.Radius = 150; +circularScale.StartValue = 0; +circularScale.EndValue = 1000; +circularScale.EnableAutoInterval = true; +circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); +circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); +circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); +circularScale.RimStrokeThickness = 8; +circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); +CircularPointer circularPointer = new CircularPointer(); +circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; +circularScale.Pointers.Add(circularPointer); +sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Circular Scale Auto Interval Image](Scales_images/Scales_img5.png) +![UWP Radial Gauge scale auto interval](Scales_images/Scales_img5.png) ## Setting scale direction for scale -The [`SweepDirection`](https://help.syncfusion.com/cr/uwp/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/uwp/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 %} {% highlight xml %} - - + - - - - - - - - - - - + + + + + - - + {% endhighlight %} {% highlight c# %} - SfCircularGauge sfCircularGauge = new SfCircularGauge(); - - CircularScale circularScale = new CircularScale(); - - circularScale.Radius = 150; - - circularScale.StartValue = 0; - - circularScale.EndValue = 100; - - circularScale.SweepDirection = SweepDirection.Counterclockwise; - - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - - circularScale.RimStrokeThickness = 8; - - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - - CircularPointer circularPointer = new CircularPointer(); - - circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; - - circularScale.Pointers.Add(circularPointer); - - sfCircularGauge.Scales.Add(circularScale); +SfCircularGauge sfCircularGauge = new SfCircularGauge(); +CircularScale circularScale = new CircularScale(); +circularScale.Radius = 150; +circularScale.StartValue = 0; +circularScale.EndValue = 100; +circularScale.SweepDirection = SweepDirection.Counterclockwise; +circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); +circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); +circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); +circularScale.RimStrokeThickness = 8; +circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); +CircularPointer circularPointer = new CircularPointer(); +circularPointer.NeedlePointerVisibility = Windows.UI.Xaml.Visibility.Collapsed; +circularScale.Pointers.Add(circularPointer); +sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Circular Scale Direction Image](Scales_images/Scales_img6.png) +![UWP Radial Gauge scale direction](Scales_images/Scales_img6.png) ## Setting multiple scales for 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/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_Scales) collection. +You can add multiple scales to the same circular gauge and customize all the scales in a [`Scales`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_Scales) collection. {% tabs %} {% highlight xml %} - - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + - - + {% endhighlight %} {% highlight c# %} this.Background = new SolidColorBrush(Colors.Black); - SfCircularGauge circularGauge = new SfCircularGauge(); - CircularScale scale1 = new CircularScale(); - scale1.TickStroke = new SolidColorBrush(Colors.White); - scale1.LabelStroke = new SolidColorBrush(Colors.White); - scale1.SmallTickStroke = new SolidColorBrush(Colors.White); - scale1.Radius = 175; CircularScale scale2 = new CircularScale(); - scale2.TickStroke = new SolidColorBrush(Colors.White); - scale2.LabelStroke = new SolidColorBrush(Colors.White); - scale2.SmallTickStroke = new SolidColorBrush(Colors.White); - scale2.Radius = 90; CircularRange circularRange = new CircularRange(); - circularRange.StartValue = 0; - circularRange.EndValue = 60; - circularRange.Stroke = new SolidColorBrush(Color.FromArgb(0xFF, 0xB0, 0xB0, 0xB0)); - circularRange.StrokeThickness = 5; - scale1.Ranges.Add(circularRange); CircularRange circularRange1 = new CircularRange(); - circularRange1.StartValue = 60; - circularRange1.EndValue = 100; - circularRange1.Stroke = new SolidColorBrush(Color.FromArgb(0xFF, 0xC1, 0x25, 0x2C)); - circularRange1.StrokeThickness = 5; - scale1.Ranges.Add(circularRange1); CircularPointer circularPointer = new CircularPointer(); - circularPointer.Value = 30; - circularPointer.PointerType = PointerType.SymbolPointer; - circularPointer.Symbol = Syncfusion.UI.Xaml.Gauges.Symbol.InvertedArrow; - circularPointer.SymbolPointerWidth = 30; - circularPointer.SymbolPointerHeight = 20; - circularPointer.SymbolPointerStroke = new SolidColorBrush(Colors.Green); - circularPointer.SymbolPointerBorderBrush = new SolidColorBrush(Colors.Green); - scale1.Pointers.Add(circularPointer); CircularRange circularRange2 = new CircularRange(); - circularRange2.StartValue = 0; - circularRange2.EndValue = 60; - circularRange2.Stroke = new SolidColorBrush(Color.FromArgb(0xFF, 0xB0, 0xB0, 0xB0)); - circularRange2.StrokeThickness = 5; - scale2.Ranges.Add(circularRange2); CircularRange circularRange3 = new CircularRange(); - circularRange3.StartValue = 60; - circularRange3.EndValue = 100; - circularRange3.Stroke = new SolidColorBrush(Color.FromArgb(0xFF, 0xC1, 0x25, 0x2C)); - circularRange3.StrokeThickness = 5; - scale2.Ranges.Add(circularRange3); CircularPointer circularPointer2 = new CircularPointer(); - circularPointer2.Value = 30; - circularPointer2.PointerType = PointerType.NeedlePointer; - circularPointer2.NeedlePointerStroke = new SolidColorBrush(Color.FromArgb(0xFF, 0xC1, 0x25, 0x2C)); - scale2.Pointers.Add(circularPointer2); - circularGauge.Scales.Add(scale1); - circularGauge.Scales.Add(scale2); {% endhighlight %} {% endtabs %} -![Circular Scale Maximum Labels Image](Scales_images/Scales_img7.png) +![UWP Radial Gauge multiple scales](Scales_images/Scales_img7.png) ## Calculate radius and center based on angle -This feature is used to automatically adjust the radius and center of a circular gauge based on the `StartAngle` and `SweepAngle` properties by enable the `IsCenterAligned` property of gauge. +This feature is used to automatically adjust the radius and center of a circular gauge based on the [`StartAngle`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_StartAngle) and [`SweepAngle`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_SweepAngle) properties by enabling the [`IsCenterAligned`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_IsCenterAligned) property of the gauge. -N> Default value of the IsCenterAligned property is false. To enable the center align feature, you need to set Ticks, Labels and Range position as Custom and set IsCenterAligned as true. +N> The default value of the [`IsCenterAligned`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_IsCenterAligned) property is false. To enable the center align feature, you need to set the ticks, labels, and range positions to Custom and set [`IsCenterAligned`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_IsCenterAligned) to true. {% tabs %} {% highlight xaml %} - - - - - - - - - - - - + + + + + + + + + + + {% endhighlight %} {% highlight c# %} - SfCircularGauge sfCircularGauge = new SfCircularGauge(); - sfCircularGauge.Height = 500; - sfCircularGauge.Width = 500; - sfCircularGauge.IsCenterAligned = true; - CircularScale circularScale = new CircularScale(); - circularScale.EnableAutoAngle = true; - circularScale.StartAngle = 180; - circularScale.SweepAngle = 180; - circularScale.StartValue = 0; - circularScale.EndValue = 1000; - circularScale.SymbolPointerOffset = 1; - circularScale.Interval = 500; - circularScale.RangePointerOffset = 0; - circularScale.RimStroke = new SolidColorBrush(Colors.LightGray); - circularScale.EnableAutoInterval = true; - circularScale.RimStrokeThickness = 15; - circularScale.TickStroke = new SolidColorBrush(Colors.LightGray); - circularScale.LabelStroke = new SolidColorBrush(Colors.Black); - circularScale.FontSize = 20; - circularScale.SmallTickStroke = new SolidColorBrush(Colors.LightGray); - CircularPointer circularPointer = new CircularPointer(); - circularPointer.PointerType = PointerType.NeedlePointer; - circularPointer.Value = 500; - circularPointer.NeedleLengthFactor = 0.5; - circularPointer.NeedlePointerType = NeedlePointerType.Triangle; - circularPointer.PointerCapDiameter = 15; - circularPointer.PointerCapStroke = new SolidColorBrush(Colors.Blue); - circularPointer.NeedlePointerStroke = new SolidColorBrush(Colors.Black); - circularScale.Pointers.Add(circularPointer); - CircularPointer circularPointer1 = new CircularPointer(); - circularPointer1.RangeCap = RangeCap.Both; - circularPointer1.PointerType = PointerType.RangePointer; - circularPointer1.Value = 1000; - circularPointer1.RangePointerStrokeThickness = 15; - circularPointer1.RangePointerStroke = new SolidColorBrush(Colors.Brown); - circularScale.Pointers.Add(circularPointer1); - CircularPointer circularPointer2 = new CircularPointer(); - circularPointer2.PointerType = PointerType.SymbolPointer; - circularPointer2.Value = 300; - circularPointer2.Symbol = Syncfusion.UI.Xaml.Gauges.Symbol.InvertedArrow; - circularPointer2.SymbolPointerBorderBrush = new SolidColorBrush(Colors.Brown); - circularPointer2.SymbolPointerStroke = new SolidColorBrush(Colors.Brown); - circularPointer2.SymbolPointerWidth = 30; - circularPointer2.SymbolPointerHeight = 30; - circularScale.Pointers.Add(circularPointer2); - sfCircularGauge.Scales.Add(circularScale); - +SfCircularGauge sfCircularGauge = new SfCircularGauge(); +sfCircularGauge.Height = 500; +sfCircularGauge.Width = 500; +sfCircularGauge.IsCenterAligned = true; +CircularScale circularScale = new CircularScale(); +circularScale.EnableAutoAngle = true; +circularScale.StartAngle = 180; +circularScale.SweepAngle = 180; +circularScale.StartValue = 0; +circularScale.EndValue = 1000; +circularScale.SymbolPointerOffset = 1; +circularScale.Interval = 500; +circularScale.RangePointerOffset = 0; +circularScale.RimStroke = new SolidColorBrush(Colors.LightGray); +circularScale.EnableAutoInterval = true; +circularScale.RimStrokeThickness = 15; +circularScale.TickStroke = new SolidColorBrush(Colors.LightGray); +circularScale.LabelStroke = new SolidColorBrush(Colors.Black); +circularScale.FontSize = 20; +circularScale.SmallTickStroke = new SolidColorBrush(Colors.LightGray); + +CircularPointer circularPointer = new CircularPointer(); +circularPointer.PointerType = PointerType.NeedlePointer; +circularPointer.Value = 500; +circularPointer.NeedleLengthFactor = 0.5; +circularPointer.NeedlePointerType = NeedlePointerType.Triangle; +circularPointer.PointerCapDiameter = 15; +circularPointer.PointerCapStroke = new SolidColorBrush(Colors.Blue); +circularPointer.NeedlePointerStroke = new SolidColorBrush(Colors.Black); +circularScale.Pointers.Add(circularPointer); + +CircularPointer circularPointer1 = new CircularPointer(); +circularPointer1.RangeCap = RangeCap.Both; +circularPointer1.PointerType = PointerType.RangePointer; +circularPointer1.Value = 1000; +circularPointer1.RangePointerStrokeThickness = 15; +circularPointer1.RangePointerStroke = new SolidColorBrush(Colors.Brown); +circularScale.Pointers.Add(circularPointer1); + +CircularPointer circularPointer2 = new CircularPointer(); +circularPointer2.PointerType = PointerType.SymbolPointer; +circularPointer2.Value = 300; +circularPointer2.Symbol = Syncfusion.UI.Xaml.Gauges.Symbol.InvertedArrow; +circularPointer2.SymbolPointerBorderBrush = new SolidColorBrush(Colors.Brown); +circularPointer2.SymbolPointerStroke = new SolidColorBrush(Colors.Brown); +circularPointer2.SymbolPointerWidth = 30; +circularPointer2.SymbolPointerHeight = 30; +circularScale.Pointers.Add(circularPointer2); +sfCircularGauge.Scales.Add(circularScale); + {% endhighlight %} {% endtabs %} -![Center Aligned SfCircularGauge image](Scales_images/iscenteraligned.jpg) +![UWP Radial Gauge center aligned](Scales_images/iscenteraligned.jpg) diff --git a/uwp/Radial-Gauge/Ticks.md b/uwp/Radial-Gauge/Ticks.md index f35031436..4f181e506 100644 --- a/uwp/Radial-Gauge/Ticks.md +++ b/uwp/Radial-Gauge/Ticks.md @@ -9,13 +9,13 @@ documentation: ug # Ticks in UWP 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 ticks, small ticks are calculated using the [`MinorTicksPerInterval`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_MinorTicksPerInterval) property. +The [`Interval`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_Interval) property is used to calculate the tick count for a scale. Similarly, small ticks are calculated using the [`MinorTicksPerInterval`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_MinorTicksPerInterval) property. -The length, stroke, and stroke thickness of a tick are set using the [`TickLength`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickLength), [`TickStroke`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickStroke), and [`TickStrokeThickness`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickStrokeThickness) UI properties, respectively. Similar ticks, the length, stroke, and stroke thickness of a small tick are set using the [`SmallTickLength`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_SmallTickLength), [`SmallTickStroke`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_SmallTickStroke), and [`SmallTickStrokeThickness`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_SmallTickStrokeThickness) UI properties, respectively. +The length, stroke, and stroke thickness of a tick are set using the [`TickLength`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickLength), [`TickStroke`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickStroke), and [`TickStrokeThickness`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickStrokeThickness) properties, respectively. Similarly, the length, stroke, and stroke thickness of a small tick are set using the [`SmallTickLength`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_SmallTickLength), [`SmallTickStroke`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_SmallTickStroke), and [`SmallTickStrokeThickness`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_SmallTickStrokeThickness) properties, respectively. ### Customize major ticks for scale @@ -23,51 +23,34 @@ The length, stroke, and stroke thickness of a tick are set using the [`TickLengt {% highlight xml %} - - + - - - - - + - - + {% endhighlight %} {% highlight c# %} - SfCircularGauge sfCircularGauge = new SfCircularGauge(); - - CircularScale circularScale = new CircularScale(); - - circularScale.Radius = 150; - - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - - circularScale.TickLength = 20; - - circularScale.TickStrokeThickness = 2; - - circularScale.TickStroke = new SolidColorBrush(Colors.Brown); - - circularScale.SmallTickStroke = new SolidColorBrush(Colors.White); - - circularScale.RimStrokeThickness = 9; - - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - - sfCircularGauge.Scales.Add(circularScale); +SfCircularGauge sfCircularGauge = new SfCircularGauge(); +CircularScale circularScale = new CircularScale(); +circularScale.Radius = 150; +circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); +circularScale.TickLength = 20; +circularScale.TickStrokeThickness = 2; +circularScale.TickStroke = new SolidColorBrush(Colors.Brown); +circularScale.SmallTickStroke = new SolidColorBrush(Colors.White); +circularScale.RimStrokeThickness = 9; +circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); +sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Ticks_img1](Ticks_images/Ticks_img1.png) +![UWP Radial Gauge major ticks customization](Ticks_images/Ticks_img1.png) ### Customize minor ticks for scale @@ -75,241 +58,159 @@ The length, stroke, and stroke thickness of a tick are set using the [`TickLengt {% highlight xml %} - - + - - - - - + - - + {% endhighlight %} {% highlight c# %} - SfCircularGauge sfCircularGauge = new SfCircularGauge(); - - CircularScale circularScale = new CircularScale(); - - circularScale.Radius = 150; - - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - - circularScale.SmallTickLength = 10; - - circularScale.SmallTickStrokeThickness = 2; - - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - - circularScale.SmallTickStroke = new SolidColorBrush(Colors.Blue); - - circularScale.RimStrokeThickness = 9; - - circularScale.MinorTicksPerInterval = 3; - - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - - sfCircularGauge.Scales.Add(circularScale); +SfCircularGauge sfCircularGauge = new SfCircularGauge(); +CircularScale circularScale = new CircularScale(); +circularScale.Radius = 150; +circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); +circularScale.SmallTickLength = 10; +circularScale.SmallTickStrokeThickness = 2; +circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); +circularScale.SmallTickStroke = new SolidColorBrush(Colors.Blue); +circularScale.RimStrokeThickness = 9; +circularScale.MinorTicksPerInterval = 3; +circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); +sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Ticks_img2](Ticks_images/Ticks_img2.png) +![UWP Radial Gauge minor ticks customization](Ticks_images/Ticks_img2.png) ## Setting shape for tick -The [`TickShape`](https://help.syncfusion.com/cr/uwp/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/uwp/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 %} {% highlight xml %} - - + - - - - - + - - + {% endhighlight %} {% highlight c# %} - SfCircularGauge sfCircularGauge = new SfCircularGauge(); - - CircularScale circularScale = new CircularScale(); - - circularScale.Radius = 150; - - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - - circularScale.SmallTickLength = 10; - - circularScale.SmallTickStrokeThickness = 2; - - circularScale.TickStroke = new SolidColorBrush(Colors.Blue); - - circularScale.SmallTickStroke = new SolidColorBrush(Colors.Blue); - - circularScale.RimStrokeThickness = 9; - - circularScale.TickShape = TickShape.Triangle; - - circularScale.MinorTicksPerInterval = 3; - - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - - sfCircularGauge.Scales.Add(circularScale); +SfCircularGauge sfCircularGauge = new SfCircularGauge(); +CircularScale circularScale = new CircularScale(); +circularScale.Radius = 150; +circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); +circularScale.SmallTickLength = 10; +circularScale.SmallTickStrokeThickness = 2; +circularScale.TickStroke = new SolidColorBrush(Colors.Blue); +circularScale.SmallTickStroke = new SolidColorBrush(Colors.Blue); +circularScale.RimStrokeThickness = 9; +circularScale.TickShape = TickShape.Triangle; +circularScale.MinorTicksPerInterval = 3; +circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); +sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Ticks_img3](Ticks_images/Ticks_img3.png) +![UWP Radial Gauge tick shape](Ticks_images/Ticks_img3.png) ## Setting position for tick -The major and minor ticks can be positioned far away from the rim using the following two ways: - - 1. Using the `MajorTickOffset` and `MinorTickOffset` properties. First, set the `TickPosition` property to custom, and then set the offset of the tick. +The major and minor ticks can be positioned far away from the rim in the following two ways: + +1. Using the [`MajorTickOffset`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_MajorTickOffset) and [`MinorTickOffset`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_MinorTickOffset) properties. First, set the [`TickPosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickPosition) property to Custom, and then set the offset of the tick. {% tabs %} {% highlight xml %} - - + - - - - - + - - + {% endhighlight %} {% highlight c# %} - SfCircularGauge sfCircularGauge = new SfCircularGauge(); - - CircularScale circularScale = new CircularScale(); - - circularScale.Radius = 150; - - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - - circularScale.RimStrokeThickness = 9; - - circularScale.MinorTicksPerInterval = 3; - - circularScale.TickPosition = TickPosition.Custom; - - circularScale.MajorTickOffset = 0.5; - - circularScale.MinorTickOffset = 0.5; - - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - - sfCircularGauge.Scales.Add(circularScale); +SfCircularGauge sfCircularGauge = new SfCircularGauge(); +CircularScale circularScale = new CircularScale(); +circularScale.Radius = 150; +circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); +circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); +circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); +circularScale.RimStrokeThickness = 9; +circularScale.MinorTicksPerInterval = 3; +circularScale.TickPosition = TickPosition.Custom; +circularScale.MajorTickOffset = 0.5; +circularScale.MinorTickOffset = 0.5; +circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); +sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Ticks_img4](Ticks_images/Ticks_img4.png) - - 2. Placing the ticks inside the scale, outside the scale, or across the scale by selecting one of the options available in the `TickPosition` property. - - They are: - -1. Inside (Default) +![UWP Radial Gauge tick offset](Ticks_images/Ticks_img4.png) -2. Outside +2. Placing the ticks inside the scale, outside the scale, or across the scale by selecting one of the options available in the [`TickPosition`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.CircularScale.html#Syncfusion_UI_Xaml_Gauges_CircularScale_TickPosition) property. -3. Cross +They are: -4. Custom +* Inside (Default) +* Outside +* Cross +* Custom {% tabs %} {% highlight xml %} - - + - - - - - + - - - + {% endhighlight %} {% highlight c# %} - SfCircularGauge sfCircularGauge = new SfCircularGauge(); - - CircularScale circularScale = new CircularScale(); - - circularScale.Radius = 150; - - circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); - - circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - - circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); - - circularScale.RimStrokeThickness = 9; - - circularScale.MinorTicksPerInterval = 3; - - circularScale.TickPosition = TickPosition.Outside; - - circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); - - sfCircularGauge.Scales.Add(circularScale); +SfCircularGauge sfCircularGauge = new SfCircularGauge(); +CircularScale circularScale = new CircularScale(); +circularScale.Radius = 150; +circularScale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x57, 0xb2, 0xc6)); +circularScale.TickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); +circularScale.SmallTickStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xc1, 0xc1, 0xc1)); +circularScale.RimStrokeThickness = 9; +circularScale.MinorTicksPerInterval = 3; +circularScale.TickPosition = TickPosition.Outside; +circularScale.LabelStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x99, 0x99, 0x99)); +sfCircularGauge.Scales.Add(circularScale); {% endhighlight %} {% endtabs %} -![Ticks_img5](Ticks_images/Ticks_img5.png) +![UWP Radial Gauge tick position](Ticks_images/Ticks_img5.png) diff --git a/uwp/Radial-Gauge/annotations.md b/uwp/Radial-Gauge/annotations.md index ca7265b65..c133e50c0 100644 --- a/uwp/Radial-Gauge/annotations.md +++ b/uwp/Radial-Gauge/annotations.md @@ -11,342 +11,203 @@ documentation: ug # Annotations in UWP Radial Gauge (SfCircularGauge) -[`SfCircularGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html) supports [`Annotations`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_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 also can be added by using [`Annotations`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_Annotations) property. +[`SfCircularGauge`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html) supports [`Annotations`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_Annotations), which allows you to mark a specific area of interest in a circular gauge. You can place custom views as annotations. Text and images can also be added by using the [`Annotations`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.SfCircularGauge.html#Syncfusion_UI_Xaml_Gauges_SfCircularGauge_Annotations) property. -## Setting image annotation +## Setting image annotation -Annotations provide options to add any image over the gauge control with respect to its offset position. You can add multiple images in single control. +Annotations provide options to add any image over the gauge control with respect to its [`Offset`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_Offset) position. You can add multiple images in a single control. The image is placed using the [`ContentTemplate`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_ContentTemplate) property of [`GaugeAnnotation`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html), and its position is controlled by the [`Angle`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_Angle) and [`Offset`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Gauges.GaugeAnnotation.html#Syncfusion_UI_Xaml_Gauges_GaugeAnnotation_Offset) properties. {% tabs %} {% highlight xaml %} - - + - - - - - - - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - + {% endhighlight %} {% highlight c# %} - SfCircularGauge gauge = new SfCircularGauge(); - - CircularScale scale = new CircularScale(); - - scale.RimStrokeThickness = 20; - - scale.Radius = 150; - - scale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xe0, 0xe0, 0xe0)); - - scale.StartAngle = 90; - - scale.SweepAngle = 360; - - scale.StartValue = 0; - - scale.EndValue = 100; - - scale.Interval = 10; - - scale.RangePointerPosition = RangePointerPosition.Custom; - - scale.RangePointerOffset = 0; - - CircularPointer pointer = new CircularPointer(); - - pointer.PointerType = PointerType.RangePointer; - - pointer.Value = 73.2; - - pointer.RangePointerStrokeThickness = 20; - - pointer.RangeCap = RangeCap.Both; - - pointer.RangePointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xFC, 0xFB, 0x48)); - - scale.Pointers.Add(pointer); - - gauge.HeaderAlignment = HeaderAlignment.Custom; - - gauge.GaugeHeaderPosition = new Point(0.46, 0.5); - - TextBlock textBlock = new TextBlock(); - - textBlock.Text = "73.2 F"; - - textBlock.Height = 40; - - textBlock.Width = 120; - - textBlock.FontSize = 20; - - textBlock.FontStyle = Windows.UI.Text.FontStyle.Normal; - - textBlock.Foreground = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); - - gauge.GaugeHeader = textBlock; - - GaugeAnnotation annotation = new GaugeAnnotation(); - - var content = ""; - - content += ""; - - content += ""; - - content += ""; - - content += ""; - - content += "" + "" + ""; - - content += ""; - - annotation.ContentTemplate = (DataTemplate)XamlReader.Load(content); - - annotation.Angle = 270; - - annotation.Offset = 0.1; - - gauge.Annotations.Add(annotation); - - gauge.Scales.Add(scale); - - this.Content = gauge; +SfCircularGauge gauge = new SfCircularGauge(); +CircularScale scale = new CircularScale(); +scale.RimStrokeThickness = 20; +scale.Radius = 150; +scale.RimStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xe0, 0xe0, 0xe0)); +scale.StartAngle = 90; +scale.SweepAngle = 360; +scale.StartValue = 0; +scale.EndValue = 100; +scale.Interval = 10; +scale.RangePointerPosition = RangePointerPosition.Custom; +scale.RangePointerOffset = 0; +CircularPointer pointer = new CircularPointer(); +pointer.PointerType = PointerType.RangePointer; +pointer.Value = 73.2; +pointer.RangePointerStrokeThickness = 20; +pointer.RangeCap = RangeCap.Both; +pointer.RangePointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0xFC, 0xFB, 0x48)); +scale.Pointers.Add(pointer); +gauge.HeaderAlignment = HeaderAlignment.Custom; +gauge.GaugeHeaderPosition = new Point(0.46, 0.5); +TextBlock textBlock = new TextBlock(); +textBlock.Text = "73.2 F"; +textBlock.Height = 40; +textBlock.Width = 120; +textBlock.FontSize = 20; +textBlock.FontStyle = Windows.UI.Text.FontStyle.Normal; +textBlock.Foreground = new SolidColorBrush(Color.FromArgb(0xff, 0x42, 0x42, 0x42)); +gauge.GaugeHeader = textBlock; +GaugeAnnotation annotation = new GaugeAnnotation(); +var content = ""; +content += ""; +content += ""; +content += ""; +content += ""; +content += "" + "" + ""; +content += ""; +annotation.ContentTemplate = (DataTemplate)XamlReader.Load(content); +annotation.Angle = 270; +annotation.Offset = 0.1; +gauge.Annotations.Add(annotation); +gauge.Scales.Add(scale); +this.Content = gauge; {% endhighlight %} {% endtabs %} -![image_annotation](annotations_images/image_annotation.PNG) +![UWP Radial Gauge image annotation](annotations_images/image_annotation.PNG) -## Setting text annotation +## Setting text annotation -You can add any text over the gauge control to enhance the readability. You can add multiple text instances in single control. +You can add any text over the gauge control to enhance readability. You can add multiple text instances in a single control. {% tabs %} {% highlight xaml %} - - + - - - - - - - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + - + {% endhighlight %} {% highlight c# %} - SfCircularGauge gauge = new SfCircularGauge(); - - CircularScale scale = new CircularScale(); - - scale.Radius = 200; - - scale.StartAngle = 160; - - scale.SweepAngle = 270; - - scale.StartValue = 0; - - scale.EndValue = 15; - - scale.RangePointerOffset = 0.2; - - scale.SymbolPointerOffset = 0.5; - - CircularPointer rangePointer = new CircularPointer(); - - rangePointer.PointerType = PointerType.RangePointer; - - rangePointer.RangeStart = 1.5; - - rangePointer.RangePointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x06, 0x82, 0xF6)); - - rangePointer.Value = 13; - - rangePointer.RangeCap = RangeCap.End; - - rangePointer.RangePointerStrokeThickness = 30; - - scale.Pointers.Add(rangePointer); - - gauge.HeaderAlignment = HeaderAlignment.Custom; - - gauge.GaugeHeaderPosition = new Point(0.48, 0.48); - - TextBlock textBlock = new TextBlock(); - - textBlock.Text = "13M"; - - textBlock.Height = 40; - - textBlock.Width = 120; - - textBlock.FontSize = 20; - - textBlock.FontStyle = Windows.UI.Text.FontStyle.Normal; - - textBlock.Foreground = new SolidColorBrush(Color.FromArgb(0xff,0x06,0x82,0xF6)); - - gauge.GaugeHeader = textBlock; - - CircularPointer pointer1 = new CircularPointer(); - - pointer1.PointerType = PointerType.SymbolPointer; - - var content = ""; - - content += ""; - - content += ""; - - content += ""; - - content += ""; - - content += "" + "" + ""; - - content += ""; - - pointer1.SymbolPointerTemplate = (DataTemplate)XamlReader.Load(content); - - pointer1.Symbol = Syncfusion.UI.Xaml.Gauges.Symbol.Custom; - - pointer1.SymbolPointerWidth = 60; - - pointer1.SymbolPointerHeight = 60; - - pointer1.Value = 0; - - scale.Pointers.Add(pointer1); - - CircularPointer pointer2 = new CircularPointer(); - - pointer2.PointerType = PointerType.SymbolPointer; - - pointer2.Symbol = Syncfusion.UI.Xaml.Gauges.Symbol.Ellipse; - - pointer2.SymbolPointerWidth = 30; - - pointer2.SymbolPointerHeight = 30; - - pointer2.SymbolPointerBorderBrush = new SolidColorBrush(Color.FromArgb(0xff, 0x9e, 0x9e, 0x9e)); - - pointer2.SymbolPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x9e, 0x9e, 0x9e)); - - pointer2.Value = 13; - - scale.Pointers.Add(pointer2); - - gauge.Scales.Add(scale); - - this.Content = gauge; +SfCircularGauge gauge = new SfCircularGauge(); +CircularScale scale = new CircularScale(); +scale.Radius = 200; +scale.StartAngle = 160; +scale.SweepAngle = 270; +scale.StartValue = 0; +scale.EndValue = 15; +scale.RangePointerOffset = 0.2; +scale.SymbolPointerOffset = 0.5; + +CircularPointer rangePointer = new CircularPointer(); +rangePointer.PointerType = PointerType.RangePointer; +rangePointer.RangeStart = 1.5; +rangePointer.RangePointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x06, 0x82, 0xF6)); +rangePointer.Value = 13; +rangePointer.RangeCap = RangeCap.End; +rangePointer.RangePointerStrokeThickness = 30; +scale.Pointers.Add(rangePointer); +gauge.HeaderAlignment = HeaderAlignment.Custom; +gauge.GaugeHeaderPosition = new Point(0.48, 0.48); +TextBlock textBlock = new TextBlock(); +textBlock.Text = "13M"; +textBlock.Height = 40; +textBlock.Width = 120; +textBlock.FontSize = 20; +textBlock.FontStyle = Windows.UI.Text.FontStyle.Normal; +textBlock.Foreground = new SolidColorBrush(Color.FromArgb(0xff, 0x06, 0x82, 0xF6)); +gauge.GaugeHeader = textBlock; + +CircularPointer pointer1 = new CircularPointer(); +pointer1.PointerType = PointerType.SymbolPointer; +var content = ""; +content += ""; +content += ""; +content += ""; +content += ""; +content += "" + "" + ""; +content += ""; +pointer1.SymbolPointerTemplate = (DataTemplate)XamlReader.Load(content); +pointer1.Symbol = Syncfusion.UI.Xaml.Gauges.Symbol.Custom; +pointer1.SymbolPointerWidth = 60; +pointer1.SymbolPointerHeight = 60; +pointer1.Value = 0; +scale.Pointers.Add(pointer1); + +CircularPointer pointer2 = new CircularPointer(); +pointer2.PointerType = PointerType.SymbolPointer; +pointer2.Symbol = Syncfusion.UI.Xaml.Gauges.Symbol.Ellipse; +pointer2.SymbolPointerWidth = 30; +pointer2.SymbolPointerHeight = 30; +pointer2.SymbolPointerBorderBrush = new SolidColorBrush(Color.FromArgb(0xff, 0x9e, 0x9e, 0x9e)); +pointer2.SymbolPointerStroke = new SolidColorBrush(Color.FromArgb(0xff, 0x9e, 0x9e, 0x9e)); +pointer2.Value = 13; +scale.Pointers.Add(pointer2); +gauge.Scales.Add(scale); +this.Content = gauge; {% endhighlight %} {% endtabs %} -![text_annotation](annotations_images/text_annotation.png) +![UWP Radial Gauge text annotation](annotations_images/text_annotation.png) From 771c265ac23b1a3c482944f4ad5b0a52a82280d1 Mon Sep 17 00:00:00 2001 From: SivaThennarasu Date: Thu, 16 Jul 2026 16:52:15 +0530 Subject: [PATCH 08/25] Added the improved UG documentation for the Map control. --- uwp/Map/Annotations.md | 100 +- uwp/Map/Basic-KML-Format.md | 4 +- uwp/Map/Bubbles.md | 207 +++-- uwp/Map/Commands-for-Zooming-and-Panning.md | 106 +-- uwp/Map/Custom-Data-Binding.md | 320 ++++--- uwp/Map/Data-Binding.md | 201 ++-- uwp/Map/Displaying-Items-on-a-Map.md | 55 +- uwp/Map/Getting-Started.md | 132 ++- uwp/Map/How-To.md | 12 +- .../KML-Shapes-Rendered-in-ShapeFileLayer.md | 17 +- ...ML-Shapes-Rendered-in-SubShapeFileLayer.md | 22 +- uwp/Map/Legend.md | 159 ++-- uwp/Map/Map-Points.md | 149 ++- uwp/Map/Map-Providers.md | 286 +++--- uwp/Map/Map-Selection.md | 43 +- uwp/Map/Map-Shape-Labels.md | 65 +- uwp/Map/MapPopup.md | 107 ++- uwp/Map/Multilayer-Support.md | 348 ++++--- uwp/Map/Overview.md | 15 +- uwp/Map/ShapeType.md | 855 +++++++++--------- uwp/Map/Shapes-Color-Customization.md | 224 ++--- 21 files changed, 1652 insertions(+), 1775 deletions(-) diff --git a/uwp/Map/Annotations.md b/uwp/Map/Annotations.md index 3e32edaeb..506073bf8 100644 --- a/uwp/Map/Annotations.md +++ b/uwp/Map/Annotations.md @@ -9,93 +9,91 @@ documentation: ug # Annotations in UWP Map (SfMaps) -`Annotations` are notes used to leave some message on the map. In SfMap, annotations are denoted by the `MapAnnotations`. MapAnnotation has two major parts: +`Annotations` are notes used to leave some message on the map. In the [`SfMap`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html), annotations are denoted by the [`MapAnnotations`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.MapAnnotations.html). `MapAnnotations` has two major parts: -* AnnotationLabel -* AnnotationSymbol +* [`AnnotationLabel`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationLabel) +* [`AnnotationSymbol`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationSymbol) -`AnnotationLabel` is a “Text” that shows some information in the text format. +[`AnnotationLabel`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationLabel) is a text that shows some information in text format. -`AnnotationSymbol` is a “VisualObject” that shows a note symbolically. +[`AnnotationSymbol`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationSymbol) is a visual object that shows a note symbolically. ## Customize AnnotationLabel -AnnotationLabel’s appearance is customized by the following properties: +The appearance of `AnnotationLabel` is customized by the following properties: -* `AnnotationLabelForeground`: Gets or sets the foreground color of the annotation label. -* `AnnotationLabelFontStyle`: Gets or sets the font style of the annotation label. -* `AnnotationLabelBackground`: Gets or sets the background color of the annotation label. -* `AnnotationLabelFontFamily`: Gets or sets the font family for the annotation label. -* `AnnotationLabelFontSize`: Gets or sets the annotation label font size. +* [`AnnotationLabelForeground`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationLabelForeground): Gets or sets the foreground color of the annotation label. +* [`AnnotationLabelFontStyle`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationLabelFontStyle): Gets or sets the font style of the annotation label. +* [`AnnotationLabelBackground`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationLabelBackground): Gets or sets the background color of the annotation label. +* [`AnnotationLabelFontFamily`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationLabelFontFamily): Gets or sets the font family for the annotation label. +* [`AnnotationLabelFontSize`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_AnnotationLabelFontSize): Gets or sets the annotation label font size. {% highlight html %} - + - + - + - - + - + - - + - + {% endhighlight %} -![Features_img14](Features_images/Features_img14.png) +![UWP Map Control Annotations Customize AnnotationLabel](Features_images/Features_img14.png) ## Positioning a MapAnnotation -`MapAnnotation` can be positioned anywhere on the map based on latitude and longitude. MapAnnotation has two properties called `Latitude` and `Longitude` of string type used to set latitude and longitude co-ordinates of the MapAnnotation. +`MapAnnotation` can be positioned anywhere on the map based on latitude and longitude. `MapAnnotations` has two properties called [`Latitude`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_Latitude) and [`Longitude`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.MapAnnotations.html#Syncfusion_UI_Xaml_Maps_MapAnnotations_Longitude) of double type, used to set the latitude and longitude coordinates of the `MapAnnotations`. ### Customizing the Annotation Template -The default appearance of the annotation can be customized by using the `AnnotationTemplate` property. The annotation template property is available in the ShapeFileLayer. +The default appearance of the annotation can be customized by using the [`AnnotationTemplate`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_AnnotationTemplate) property. The `AnnotationTemplate` property is available in the [`ShapeFileLayer`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html). #### About the AnnotationTemplate Property -AnnotationTemplate is a `DataTemplate` type, used to customize or override the default template of MapAnnotations. +`AnnotationTemplate` is a `DataTemplate` type, used to customize or override the default template of `MapAnnotations`. {% highlight xml %} - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + {% endhighlight %} -![Features_img15](Features_images/Features_img15.png) +![UWP Map Control Annotations Template Customization](Features_images/Features_img15.png) diff --git a/uwp/Map/Basic-KML-Format.md b/uwp/Map/Basic-KML-Format.md index 4fd4f12a9..e35da211f 100644 --- a/uwp/Map/Basic-KML-Format.md +++ b/uwp/Map/Basic-KML-Format.md @@ -11,9 +11,9 @@ documentation: ug KML is a file format used for rendering geographical data. It uses a tag-based structure with nested elements and attributes. KML is based on the XML standard, and all tags of a KML file are case-sensitive. -Currently, the SfMaps control supports the following KML elements: +Currently, the [`SfMap`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html) control supports the following KML elements: -* Place mark +* Placemark * Point * LinearRing * Polygon diff --git a/uwp/Map/Bubbles.md b/uwp/Map/Bubbles.md index a004871ef..af5aeb29a 100644 --- a/uwp/Map/Bubbles.md +++ b/uwp/Map/Bubbles.md @@ -9,11 +9,11 @@ documentation: ug # Bubbles in UWP Map (SfMaps) -`Bubbles` in the Maps control represent the under-bound data values of the map. Bubbles are scattered throughout map shapes that contain bound values. +`Bubbles` in the Maps control represent the underlying 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. +Bubbles are included when data binding is set as mentioned above and the [`BubbleMarkerSetting`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html#Syncfusion_UI_Xaml_Maps_ShapeFileLayer_BubbleMarkerSetting) is set. -The following properties are available in the BubbleMarkerSetting: +The following properties are available in the [`BubbleMarkerSetting`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html): @@ -23,27 +23,27 @@ Type +Gets or sets the maximum height and width of the bubble. +Gets or sets the name of the underlying property in ItemsSource. @@ -52,32 +52,31 @@ Gets or sets the tree map colors. ## Adding Bubbles to a Map -To add bubbles to a map, `BubbleMarkerSetting` has to be added to the `ShapeFileLayer`. Set the `AutoFillColor` as true and set the `Fill` property. Create the `Model` and `ViewModel` as illustrated in the [Data Binding](/winrt/Maps/Data-Binding "Data Binding") topic and add the following code. Also set the `MaxSize`, `MinSize`, and `ValuePath` properties as illustrated in the following code example. +To add bubbles to a map, [`BubbleMarkerSetting`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html) has to be added to the [`ShapeFileLayer`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.ShapeFileLayer.html). Set the [`AutoFillColor`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_AutoFillColor) as true and set the [`Fill`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_Fill) property. Create the `Model` and `ViewModel` as illustrated in the [Data Binding](/winrt/Maps/Data-Binding "Data Binding") topic and add the following code. Also set the [`MaxSize`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_MaxSize), [`MinSize`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_MinSize), and [`ValuePath`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_ValuePath) properties as illustrated in the following code example. {% highlight html %} - - - - - - - - - - - - - + + + + + + + + + + + + -{% endhighlight %} +{% endhighlight %} -![Features_img2](Features_images/Features_img2.png) +![UWP Map Control Bubbles Adding Bubbles to a Map](Features_images/Features_img2.png) ## Customizing Bubble Symbol -Bubble symbol can be modified using built-in symbols like circle, rectangle, diamond, triangle, trapezoid, star, pentagon, and pushpin available in the `BubbleType` enum property. Also, bubbles can be customized by setting the CustomTemplate of the BubbleMarkerSetting. +The bubble symbol can be modified using built-in symbols like circle, rectangle, diamond, triangle, trapezoid, star, pentagon, and pushpin available in the [`BubbleType`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleType.html) enum property. Also, bubbles can be customized by setting the [`CustomTemplate`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_CustomTemplate) of the `BubbleMarkerSetting`.
Description
-AutoFillColor +[AutoFillColor](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_AutoFillColor) Boolean (true / false) Gets or sets whether the colors should be automatically filled.
-MaxSize +[MaxSize](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_MaxSize) Double -Get or sets the maximum height and width of the bubble.
-MinSize +[MinSize](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_MinSize) Double Gets or sets the minimum height and width of the bubble.
-ValuePath +[ValuePath](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_ValuePath) String -Gets or sets the name of the under-bound property in ItemsSource.
-ColorMapping +[ColorMappings](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_ColorMappings) ObservableCollection<RangeColorMapping> Gets or sets the tree map colors.
@@ -87,57 +86,57 @@ Type +Gets or sets the template to customize the bubble. `BubbleType` should be set as `Custom` to show a customized bubble shape.
Description
-BubbleType -BubbleType (enum) +[BubbleType](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_BubbleType) +[BubbleType](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleType.html) (enum) Gets or sets the type of bubble symbol needed to be used in maps.
-CustomTemplate +[CustomTemplate](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_CustomTemplate) DataTemplate -Gets or sets the template to customize the bubble.> BubbleType should be set as “Custom” to show a customized bubble shape.
{% highlight html %} - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + {% endhighlight %} -![Features_img3](Features_images/Features_img3.png) +![UWP Map Control Bubbles Customizing Bubble Symbol](Features_images/Features_img3.png) ## Range Color Mapping -`RangeColorMapping` is one of the features used to differentiate the bubble fill, based on its under-bound value and color ranges. It contains the following properties: +[`RangeColorMapping`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.RangeColorMapping.html) is one of the features used to differentiate the bubble fill, based on its underlying value and color ranges. It contains the following properties: @@ -147,63 +146,63 @@ Type
Description
-Range +[Range](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.RangeColorMapping.html#Syncfusion_UI_Xaml_Maps_RangeColorMapping_Range) Double Gets or sets the value range of the bubble.
-Color +[Color](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.ColorMapping.html#Syncfusion_UI_Xaml_Maps_ColorMapping_Color) Color Gets or sets the color values for a given range.
-The fill color of a particular bubble fill can be determined by its under-bound value and the color range. For example, consider the following color ranges: +The fill color of a particular bubble can be determined by its underlying value and the color range. For example, consider the following color ranges: {% highlight html %} - - - - - - - - + + + + + + + + -{% endhighlight %} +{% endhighlight %} -When the under-bound object value is 22789702, then the fill color of the corresponding bubble is set to “#7FEB737C”. As mentioned earlier, the under-bound value of the bubble is set through the “ValuePath” in the BubbleMarkerSetting. +When the underlying object value is 22789702, then the fill color of the corresponding bubble is set to `#7FEB737C`. As mentioned earlier, the underlying value of the bubble is set through the [`ValuePath`](https://help.syncfusion.com/cr/uwp/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 underlying value is under any of the given sorted range or above the sorted range, then the fill is set as `Black`. -`AutoFillColor` must be set as `false` to enable range color mapping. +[`AutoFillColor`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.BubbleMarkerSetting.html#Syncfusion_UI_Xaml_Maps_BubbleMarkerSetting_AutoFillColor) must be set as `false` to enable range color mapping. {% highlight html %} - - - - - - - - - - - - - - - - - - - - - - -{% endhighlight %} - -![Features_img4](Features_images/Features_img4.png) + + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} + +![UWP Map Control Bubbles Range Color Mapping](Features_images/Features_img4.png) diff --git a/uwp/Map/Commands-for-Zooming-and-Panning.md b/uwp/Map/Commands-for-Zooming-and-Panning.md index ecc3e7916..a3bc4f075 100644 --- a/uwp/Map/Commands-for-Zooming-and-Panning.md +++ b/uwp/Map/Commands-for-Zooming-and-Panning.md @@ -9,101 +9,95 @@ documentation: ug # Commands for Zooming and Panning in UWP Map (SfMaps) -The Map control contains the following commands: +The [`SfMap`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html) control contains the following commands: -* ZoomIn Command -* ZoomOut Command -* Pan Command -* ZoomReset Command -* PanReset Command +* [ZoomIn Command](#zoomin-command) +* [ZoomOut Command](#zoomout-command) +* [Pan Command](#pan-command) +* [ZoomReset Command](#zoomreset-command) +* [PanReset Command](#panreset-command) ## ZoomIn Command -`ZoomIn` command zooms in the map. +The [`ZoomInCommand`](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_ZoomInCommand) zooms in the map. {% highlight xml %} - -             -                 - - - - -         - - - -{% endhighlight %} - -{% endtabs %} - -4 . Inherit `IEditorProperties` interface of `SfSpellChecker` and Initialize all the methods and properties in interface. - -{% tabs %} - -{% highlight C# %} - -public class TextSpellEditor:IEditorProperties - -{ - -TextBox textbox; - -public TextSpellEditor(Control control) - -{ - -ControlToSpellCheck = control; - -} - -public Control ControlToSpellCheck - -{ - -get - -{ - -return textbox; - -} - -set - -{ - -textbox = value as TextBox; - -} - -} - -public string SelectedText - -{ - -get - -{ - -return textbox.SelectedText; - -} - -set - -{ - -textbox.SelectedText = value; - -} - -} - -public string Text - -{ - -get - -{ - -return textbox.Text; - -} - -set - -{ - -textbox.Text = value; - -} - -} - -public void Select(int selectionStart, int selectionLength) - -{ - -textbox.Select(selectionStart, selectionLength); - -} - -public bool HasMoreTextToCheck() - -{ - -return false; - -} - -public void Focus() - -{ - -textbox.Focus(); - -} - -public void UpdateTextField() - -{ - -throw new NotImplementedException(); - -} - -} - -{% endhighlight %} - -{% endtabs %} - -5 . In Click event of button call SpellCheck method to TextBox. - -{% tabs %} - -{% highlight C# %} - -private void Button_Click(object sender, RoutedEventArgs e) - -{ - -SpellChecker.PerformSpellCheckUsingDialog(Editor); - -} - - -{% endhighlight %} - -{% endtabs %} - -![getting-started](getting-started-images/getting-started.jpeg) - - -6 . Selected word in suggestion list can be replaced click Replace button in the spell check dialog. - diff --git a/localization.md b/localization.md deleted file mode 100644 index d450b7e9e..000000000 --- a/localization.md +++ /dev/null @@ -1,56 +0,0 @@ ---- -layout: post -title: Localization in UWP Spell Checker control | Syncfusion -description: Learn here all about Localization support in Syncfusion UWP Spell Checker (SfSpellChecker) control and more. -platform: UWP -control: SfSpellChecker -documentation: ug ---- - -# Localization in the UWP Spell Checker (SfSpellChecker) - -Localization is the process of translating the application resources into different language for the specific cultures. You can localize the SfSpellChecker by adding resource file. Application culture can be changed by setting [ApplicationLanguages.PrimaryLanguageOverride](https://msdn.microsoft.com/de-de/library/windows/apps/windows.globalization.applicationlanguages.primarylanguageoverride.aspx) before `InitializeComponent()` method. - -Below application culture changed to Arabic. - -{% tabs %} - -{% highlight c# %} - -public MainPage() - -{ - - Windows.Globalization.ApplicationLanguages.PrimaryLanguageOverride = "ar-SA"; - - this.InitializeComponent(); -} - -{% endhighlight %} - -{% endtabs %} - -To localize the SfSpellChecker based on [ApplicationLanguages.PrimaryLanguageOverride](https://msdn.microsoft.com/de-de/library/windows/apps/windows.globalization.applicationlanguages.primarylanguageoverride.aspx) using .resw files, follow the below steps. - -1. Create a folder named **Resource** in the application. - -2. Create a folder named **culture name** in the application. The culture name that indicates the name of language and country. - -![localizationimg1](localization-images/localizationimg1.png) - -3. Right Click on project and select the “Add New Item” Dialog using Ctrl+Shift+A keys. - -Create a resource .Resw file and name it as assembly name.Resources.resw (**Syncfusion.SfSpellChecker.UWP.Resources.resw**) - -![localizationimg2](localization-images/localizationimg2.png) - -For example, you have to give name as **Syncfusion.SfSpellChecker.UWP.Resources.resw** for Arabic culture. - -4. Add the Name/Value pair in Resource Designer of **Syncfusion.SfSpellChecker.UWP.Resources.resw** file and change its corresponding value to corresponding culture. - -![Localizationimg3](localization-images/Localizationimg3.png) - -You can get the SfSpellChecker’s key from default resource [Syncfusion.SfSpellChecker.UWP.Resources.resw] -(http://www.syncfusion.com/downloads/support/directtrac/general/ze/Syncfusion.SfSpellChecker.UWP.Resources-1005709407.zip). - -![localizationimg4](localization-images/localizationimg4.png) diff --git a/overview.md b/overview.md deleted file mode 100644 index 44d983e44..000000000 --- a/overview.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -layout: post -title: About UWP Spell Checker control | Syncfusion -description: Learn here all about introduction of Syncfusion UWP Spell Checker (SfSpellChecker) control, its elements and more. -platform: UWP -control: SfSpellChecker -documentation: ug ---- - -# UWP Spell Checker (SfSpellChecker) Overview - -`SfSpellChecker` control provides a simple and intuitive interface to check for spelling errors in text editor controls. We can perform spell checking on text editor control and it will also provide suggestions for the misspelled words through dialog and context menu. - -## Use Case Scenarios - -You can use Spell Checker to correct spelling mistakes for any input text. - -## Appearance of SpellChecker Dialog - -`SfSpellChecker` contains built-in dialog for checking spelling error. - -![overview](overview-images/overview.png) - - -* The Input Text is the text given as input to the Spell Checker to check the spelling. The word which is spell-checked will be highlighted in red color. -* The Suggestions List is the list box which will show the suggestions for the currently spell-checked word. - -## Features - -* Supports Context Menu suggestion. -* Supports Custom Dictionary to provide suggestions. -* Provide built-in options to Ignore, Ignore All, Replace, Replace All for error words in spell checker dialog. -* Support to Ignore Email, URL, Numbers, Mixed and Upper case words from spell check. - diff --git a/spell-checking-options.md b/spell-checking-options.md deleted file mode 100644 index 939a51fdd..000000000 --- a/spell-checking-options.md +++ /dev/null @@ -1,96 +0,0 @@ ---- -layout: post -title: Spell Check in UWP Spell Checker control | Syncfusion -description: Learn here all about Spell Check support in Syncfusion UWP Spell Checker (SfSpellChecker) control and more. -platform: UWP -control: SfSpellChecker -documentation: ug ---- - -# Spell Check in UWP Spell Checker (SfSpellChecker) - -The Spell Checking engine can also be customized to ignore certain text or words from being spell checked. By setting the respective properties, these words will be overlooked and will not indicate them as misspelled words. This option will be effective when there are a number of email id’s and addresses, HTML tags, combination of words and numbers, combination of upper and lower case words that are used frequently in the document. - -## Ignore Spell Check - - - - - - - - - - - - - - - - -
-Property

 -Description

-IgnoreEmailAddress

 -Specifies whether or not to ignore email address during Spell Check. Default value is false.

-IgnoreHtmlTags

 -Specifies whether or not to ignore HTML tags during Spell Check. Default value is false.

-IgnoreUrl

 -Specifies whether or not to ignore Internet address during Spell Check. Default value is false.

-IgnoreMixedCaseWords

 -Specifies whether or not to ignore mixed case words during Spell Check.  Default value is false.

-IgnoreUpperCaseWords

 -Specifies whether or not to ignore uppercase words during Spell Check. Default value is false.

-IgnoreAlphaNumericWords

 -Specifies whether or not to Spell Check numbers or words with numbers during Spell Check. Default value is false.

- - -## Setting Spell Check Options - -Create a spell checker instance and set the spell checking options as given below: - -{% tabs %} - -{% highlight C# %} - -SfSpellChecker SpellChecker = new SfSpellChecker(); - -SpellChecker.IgnoreUrl = true; - -SpellChecker.IgnoreUpperCaseWords = true; - -SpellChecker.IgnoreAlphaNumericWords = true; - -SpellChecker.IgnoreEmailAddress = true; - -SpellChecker.IgnoreMixedCaseWords = true; - -SpellChecker.IgnoreHtmlTags = true; - -{% endhighlight %} - -{% endtabs %} - -## Getting Suggestions for Error Word - -`SfSpellChecker` provides support to get suggestion list by passing the error word in the below methods. - -* GetSuggestions -* GetPhoneticWords -* GetAnagrams - -{% tabs %} - -{% highlight C# %} - -SfSpellChecker SpellChecker = new SfSpellChecker(); - -SpellChecker.GetSuggestions("offce"); - -SpellChecker.GetPhoneticWords("offce"); - -SpellChecker.GetAnagrams("offce"); - -{% endhighlight %} - -{% endtabs %} From 243cb986fb179f7c781f6dcbc246506eec3d0054 Mon Sep 17 00:00:00 2001 From: Priyadharshini-Sf4862 Date: Thu, 6 Aug 2026 12:01:20 +0530 Subject: [PATCH 25/25] UG Updated --- uwp-toc.html | 10 +++++++++- .../Customizations-in-Syncfusion-SfMaps.md} | 0 .../KML-Shapes-Rendered-in-ShapeFileLayer.md | 0 .../KML-Shapes-Rendered-in-SubShapeFileLayer.md | 0 4 files changed, 9 insertions(+), 1 deletion(-) rename uwp/Map/{How-To.md => How-to/Customizations-in-Syncfusion-SfMaps.md} (100%) rename uwp/Map/{ => How-to}/KML-Shapes-Rendered-in-ShapeFileLayer.md (100%) rename uwp/Map/{ => How-to}/KML-Shapes-Rendered-in-SubShapeFileLayer.md (100%) diff --git a/uwp-toc.html b/uwp-toc.html index 950282497..23ca9fa09 100644 --- a/uwp-toc.html +++ b/uwp-toc.html @@ -637,7 +637,15 @@
  • Legend
  • Basic KML Format
  • Map Providers
    • -
  • How To
    • +
  • Map Points
    • +
  • + How to + +
    • diff --git a/uwp/Map/How-To.md b/uwp/Map/How-to/Customizations-in-Syncfusion-SfMaps.md similarity index 100% rename from uwp/Map/How-To.md rename to uwp/Map/How-to/Customizations-in-Syncfusion-SfMaps.md diff --git a/uwp/Map/KML-Shapes-Rendered-in-ShapeFileLayer.md b/uwp/Map/How-to/KML-Shapes-Rendered-in-ShapeFileLayer.md similarity index 100% rename from uwp/Map/KML-Shapes-Rendered-in-ShapeFileLayer.md rename to uwp/Map/How-to/KML-Shapes-Rendered-in-ShapeFileLayer.md diff --git a/uwp/Map/KML-Shapes-Rendered-in-SubShapeFileLayer.md b/uwp/Map/How-to/KML-Shapes-Rendered-in-SubShapeFileLayer.md similarity index 100% rename from uwp/Map/KML-Shapes-Rendered-in-SubShapeFileLayer.md rename to uwp/Map/How-to/KML-Shapes-Rendered-in-SubShapeFileLayer.md