diff --git a/context-menu-suggestion.md b/context-menu-suggestion.md deleted file mode 100644 index 2943bcbcd..000000000 --- a/context-menu-suggestion.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -layout: post -title: Context Menu Suggestion in UWP Spell Checker control | Syncfusion -description: Learn here all about Context Menu Suggestion support in Syncfusion UWP Spell Checker (SfSpellChecker) control and more. -platform: UWP -control: SfSpellChecker -documentation: ug ---- - -# Context Menu Suggestion in UWP Spell Checker (SfSpellChecker) - -`SfSpellChecker` offers Microsoft Office application like context menu suggestions and helps to correct spell errors by choosing correct option from the listed suggestions. - -The following steps helps to add context menu suggestion in the TextBox control. - -1) Create a UWP project in Visual Studio. - -2) Create a class which inherits `IEditorProperties` interface of `SfSpellChecker` and Initialize all the methods and properties. - -{% tabs %} - -{% highlight C# %} - - -public class TextSpellEditor:IEditorProperties - -{ - -TextBox textbox; - -public TextSpellEditor(Control control) - -{ - -ControlToCheck = control; - -} - -public Control ControlToCheck - -{ - -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(Windows.UI.Xaml.FocusState.Pointer); - -} - -public void UpdateTextField() - -{ - -throw new NotImplementedException(); - -} - -} - -} - - -{% endhighlight %} - -{% endtabs %} - -3) Initiate `PerformSpellCheckUsingContextMenu` method by passing `IEditorProperties` interface argument. - -{% tabs %} - -{% highlight C# %} - - -TextSpellEditor TextEditor = new TextSpellEditor(Textboxx); - -SpellEditor = TextEditor; - -SpellChecker.PerformSpellCheckUsingContextMenu(SpellEditor); - -{% endhighlight %} - -{% endtabs %} - -![Suggestion using context menu](context-menu-suggestion-images/context-menu-suggestion.jpeg) - - diff --git a/custom-dictionary-support.md b/custom-dictionary-support.md deleted file mode 100644 index 6f249923c..000000000 --- a/custom-dictionary-support.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -layout: post -title: Custom Dictionary in UWP Spell Checker control | Syncfusion -description: Learn here all about Custom Dictionary support in Syncfusion UWP Spell Checker (SfSpellChecker) control and more. -platform: UWP -control: SfSpellChecker -documentation: ug ---- - -# Custom Dictionary in UWP Spell Checker (SfSpellChecker) - -`SfSpellChecker` provides predefined dictionary for English language and also supports to custom dictionary based on Application requirement. `SfSpellChecker` provides suggestions based on custom dictionary. Users can use their own dictionaries for the different languages. Please follow the below steps for custom language spell checking. - -**Step 1:** Need to create dictionary file for user desired language and add necessary words details in it. - -**Step 2:** Then need to attach it with the application and define this file location in its property named CustomDictionaryPath. - -`CustomDictionaryPath` property is used to passing the file path of the user defined custom dictionary. - ->**Note:** The BuildAction of dictionary file should set as "Content". - -## Setting CustomDictionaryPath - -Create a `SfSpellChecker` instance and set the `CustomDictionaryPath` as given in the below code. - -{% tabs %} - -{% highlight C# %} - -SfSpellChecker SpellCheck = new SfSpellChecker(); - -SpellCheck.CustomDictionaryPath = "custom.txt"; - -{% endhighlight %} - -{% endtabs %} diff --git a/getting-started.md b/getting-started.md deleted file mode 100644 index 405f6d065..000000000 --- a/getting-started.md +++ /dev/null @@ -1,205 +0,0 @@ ---- -layout: post -title: Getting Started with UWP Spell Checker control | Syncfusion -description: Learn here about getting started with Syncfusion UWP Spell Checker (SfSpellChecker) control, its elements and more. -platform: UWP -control: SfSpellChecker -documentation: ug ---- - -# Getting Started with UWP Spell Checker (SfSpellChecker) - -Spell checking operation can be done on Text editor controls through `SfSpellChecker` in UWP application by implementing `IEditorProperties` interface. - -The following steps helps to add `SfSpellChecker`. - -1 . Create a UWP project in Visual Studio and include `Syncfusion.SfSpellChecker.UWP` assembly. - -2 . Create an instance of `SfSpellChecker` using “Syncfusion.UI.Xaml.Controls” namespace. - -{% tabs %} - -{% highlight C# %} - -Syncfusion.UI.Xaml.Controls.SfSpellChecker spellChecker = new Syncfusion.UI.Xaml.Controls.SfSpellChecker(); - -{% endhighlight %} - -{% endtabs %} - -3 . Create instance of Button and TextBox to input control for SpellCheck. - -{% tabs %} - -{% highlight XAML %} - - - - - - - - - -{% 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 197718db0..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 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 %} 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/Digital-Gauge/Digital-Characters.md b/uwp/Digital-Gauge/Digital-Characters.md index 1ce85e314..5fae7a356 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. + +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 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 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 used to display both letters and numbers. Compared to the 14-segment display, it splits the top and bottom horizontal bars into two segments each, which produces a more refined look and is preferred when each character needs to be rendered with finer detail. {% 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 x 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..2c95fcaed 100644 --- a/uwp/Digital-Gauge/Getting-Started.md +++ b/uwp/Digital-Gauge/Getting-Started.md @@ -9,81 +9,86 @@ 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. ## 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..c13d922e4 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. * 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..2fe0e4e41 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. 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) diff --git a/uwp/Linear-Gauge/GettingStarted.md b/uwp/Linear-Gauge/GettingStarted.md index 8cab3540b..b6726c8cd 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,74 +80,46 @@ 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 - • ScaleBarStroke - • ScaleBarSize - • ScaleBarLength - • ScaleBarBorderThickness - • Interval - • Minimum - • Maximum {% 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 %} @@ -167,96 +133,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 +197,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 +252,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 +354,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 +409,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/tree/master/Gauge/Gauge). diff --git a/uwp/Linear-Gauge/Labels.md b/uwp/Linear-Gauge/Labels.md index 202b8c41e..3e8ef888d 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` 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..656231d68 100644 --- a/uwp/Linear-Gauge/Ticks.md +++ b/uwp/Linear-Gauge/Ticks.md @@ -1,79 +1,62 @@ --- 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 about Ticks support in Syncfusion UWP Linear Gauge (SfLinearGauge), including tick customization, positioning, and minor tick intervals. 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..645e837c2 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 [`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, or by using the [`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) diff --git a/uwp/Map/Annotations.md b/uwp/Map/Annotations.md index 3e32edaeb..60800986d 100644 --- a/uwp/Map/Annotations.md +++ b/uwp/Map/Annotations.md @@ -2,100 +2,95 @@ layout: post title: Annotations in UWP Map control | Syncfusion description: Learn here all about Annotations support in Syncfusion Essential UWP Map (SfMaps) control, its elements, and more. -platform: UWP +platform: uwp control: SfMaps 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) : A text that shows some information in text format. -`AnnotationLabel` is a “Text” that shows some information in the 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) : 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..901e95902 100644 --- a/uwp/Map/Basic-KML-Format.md +++ b/uwp/Map/Basic-KML-Format.md @@ -1,8 +1,8 @@ --- layout: post title: Basic KML Format in UWP Map control | Syncfusion -description: Learn here all about Basic KML Format support in Syncfusion UWP Map (SfMaps) control and more. -platform: UWP +description: Learn how to load and display KML geographic data using the Syncfusion UWP Map control, including supported elements and styling options. +platform: uwp control: SfMap documentation: ug --- @@ -11,7 +11,7 @@ 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 * Point diff --git a/uwp/Map/Bubbles.md b/uwp/Map/Bubbles.md index a004871ef..19d9a5107 100644 --- a/uwp/Map/Bubbles.md +++ b/uwp/Map/Bubbles.md @@ -1,19 +1,19 @@ --- layout: post title: Bubbles in UWP Map control | Syncfusion -description: Learn here all about Bubbles support in Syncfusion UWP Map (SfMaps) control and more. -platform: UWP +description: Learn how to add and customize bubbles in the Syncfusion UWP Map control, including bubble symbols, size settings, and range color mapping. +platform: uwp control: SfMaps 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..2cd5f62b1 100644 --- a/uwp/Map/Commands-for-Zooming-and-Panning.md +++ b/uwp/Map/Commands-for-Zooming-and-Panning.md @@ -2,108 +2,102 @@ layout: post title: Commands for Zooming and Panning in UWP Map control | Syncfusion description: Learn here all about Commands for Zooming and Panning support in Syncfusion UWP Map (SfMaps) control and more. -platform: UWP +platform: uwp control: Maps 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](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_ZoomInCommand) +* [ZoomOut Command](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_ZoomOutCommand) +* [Pan Command](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_PanCommand) +* [ZoomReset Command](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_ResetCommand) +* [PanReset Command](https://help.syncfusion.com/cr/uwp/Syncfusion.UI.Xaml.Maps.SfMap.html#Syncfusion_UI_Xaml_Maps_SfMap_PanResetCommand) ## 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 %} - -             -                 - - - - -