diff --git a/wpf/Autocomplete/Autocomplete-and-filtering.md b/wpf/Autocomplete/Autocomplete-and-filtering.md index 1d4f50d4e5..7d45fc81f6 100644 --- a/wpf/Autocomplete/Autocomplete-and-filtering.md +++ b/wpf/Autocomplete/Autocomplete-and-filtering.md @@ -1,19 +1,19 @@ --- layout: post -title: Autocomplete and filtering in WPF Autocomplete control | Syncfusion® -description: Learn here all about Autocomplete and filtering support in Syncfusion® WPF Autocomplete (SfTextBoxExt) control and more. -platform: wpf +title: Autocomplete and Filtering in WPF Autocomplete Control | Syncfusion® +description: Learn about autocomplete and filtering support in Syncfusion® WPF Autocomplete (SfTextBoxExt) control and more. +platform: WPF control: SfTextBoxExt documentation: ug --- -# Autocomplete and filtering in WPF Autocomplete (SfTextBoxExt) +# Autocomplete and Filtering in WPF Autocomplete (SfTextBoxExt) -The AutoComplete functionality provides several modes of suggestions while typing. The suggested text can be appended to the original text, or can be displayed in a drop-down list so that searched item can be chosen based on the filtering option set. +The autocomplete functionality provides several modes of suggestions while typing. The suggested text can be appended to the original text or displayed in a drop-down list so that the searched item can be chosen based on the filtering option set. -## AutoComplete source +## Autocomplete Source -The [SfTextBoxExt](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html) control can be populated with a predefined list of items bind to the [AutoCompleteSource](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_AutoCompleteSource) property. The data can be either a list of strings or a custom data. +The [SfTextBoxExt](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html) control can be populated with a predefined list of items bound to the [AutoCompleteSource](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_AutoCompleteSource) property. The data can be either a list of strings or custom data. {% tabs %} @@ -34,9 +34,9 @@ For further details, refer to [Populating Autocomplete with Data](https://help.s ![AutoCompleteSource](AutoComplete_and_filtering_images/AutoCompleteSource.png) -## Custom data +## Custom Data -The [SearchItemPath](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SearchItemPath) property specifies the property path, by which the filtering has to be done when a custom data is bound to the [AutoCompleteSource](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_AutoCompleteSource) property. This property defines the value to be displayed in the drop-down suggestion box. +The [SearchItemPath](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SearchItemPath) property specifies the property path by which the filtering is done when custom data is bound to the [AutoCompleteSource](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_AutoCompleteSource) property. This property defines the value to be displayed in the drop-down suggestion box. {% tabs %} {% highlight xaml %} @@ -59,10 +59,9 @@ textBoxExt.SearchItemPath = "Name"; ![SearchItemPath](AutoComplete_and_filtering_images/SearchItemPath.png) +## Customize Using the ItemTemplate -## Customize using the ItemTemplate - -By default the drop-down window lists the filtered items as a text based on the [SearchItemPath](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SearchItemPath) property set for the data. The [AutoCompleteItemTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_AutoCompleteItemTemplate) property helps to decorate the filtered items with visual elements. The following code block explains how to add an image to the drop-down list items. +By default, the drop-down window lists the filtered items as text based on the [SearchItemPath](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SearchItemPath) property set for the data. The [AutoCompleteItemTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_AutoCompleteItemTemplate) property helps to decorate the filtered items with visual elements. The following code block explains how to add an image to the drop-down list items. {% tabs %} {% highlight xaml %} @@ -89,10 +88,9 @@ By default the drop-down window lists the filtered items as a text based on the ![ItemTemplate](AutoComplete_and_filtering_images/ItemTemplate.png) +## Filtering Options -## Filtering options - -The phenomenon of string comparison for filtering suggestions can be changed using the [SuggestionMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SuggestionMode) property. The default filtering strategy is “StartsWith” and it is case-insensitive. +The process of string comparison for filtering suggestions can be changed using the [SuggestionMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SuggestionMode) property. The default filtering strategy is "StartsWith" and is case-insensitive. @@ -266,9 +264,9 @@ textBoxExt.SuggestionMode = SuggestionMode.Contains; ### Custom -Filter items in the suggestion list based on the users' custom search. This will help you to apply our typo toleration functionality to the control. +Filter items in the suggestion list based on the user's custom search. This allows you to apply typo tolerance functionality to the control. -![custom filter](AutoComplete_and_filtering_images/Custom.png) +![Custom filter](AutoComplete_and_filtering_images/Custom.png) {% tabs %} @@ -361,9 +359,9 @@ Filter items in the suggestion list based on the users' custom search. This will {% endtabs %} -## Prefix characters constraint +## Prefix Character Constraint -Instead of displaying suggestion list on every character entry, matches can be filtered and displayed after a few character entries. This can be done using the [MinimumPrefixCharacter](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_MinimumPrefixCharacters) property. By default the constraint is set for each character entry. +Instead of displaying a suggestion list on every character entry, matches can be filtered and displayed after a few character entries. This can be done using the [MinimumPrefixCharacter](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_MinimumPrefixCharacters) property. By default, the constraint is set for each character entry. {% tabs %} @@ -389,11 +387,9 @@ textBoxExt.MinimumPrefixCharacters = 2; ![Minimum Prefix Length](AutoComplete_and_filtering_images/MinimumPrefixCharacters.png) +## Working with Case Sensitivity - -## Working with case sensitivity - -[IgnoreCase](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_IgnoreCase) option allows the control to filter the suggestions by ignoring the case. The default value is false. +The [IgnoreCase](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_IgnoreCase) option allows the control to filter the suggestions by ignoring the case. The default value is false. {% tabs %} {% highlight xaml %} @@ -417,14 +413,13 @@ textBoxExt.IgnoreCase = true; ![Ignore Case](AutoComplete_and_filtering_images/IgnoreCase.png) +## Showing Image in Token and Drop-down -## Showing image in token and drop-down +To display an image in the token, use the [ImageMemberPath](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_ImageMemberPath) property. -To display image in token use the [ImageMemberPath](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_ImageMemberPath) property. +> **Note:** This feature is applicable only for MultiSelectMode with Token mode. -N> This feature is applicable only for MultiSelectMode with Token mode. - -To display image for each drop-down item a custom template can be assigned to [AutoCompleteItemTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_AutoCompleteItemTemplate) support. +To display an image for each drop-down item, a custom template can be assigned to [AutoCompleteItemTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_AutoCompleteItemTemplate). {% tabs %} {% highlight xaml %} @@ -459,13 +454,11 @@ To display image for each drop-down item a custom template can be assigned to [A ![ImageMemberPath](AutoComplete_and_filtering_images/ImageMemberPath.png) +> **Note:** View [sample](https://github.com/SyncfusionExamples/wpf-textboxext-autocomplete) on GitHub -N> View [sample](https://github.com/SyncfusionExamples/wpf-textboxext-examples/tree/master/Samples/ImageMemberPath) in GitHub - +## Display a Message When Suggestions are Empty -## Display a message when suggestions are empty - -When the entered item is not in the suggestion list, AutoComplete displays a text indicating that there is no search results found. Th text to be displayed for this can be customized using the [NoResultsFoundTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_NoResultsFoundTemplate) property. +When the entered item is not in the suggestion list, AutoComplete displays a text indicating that there are no search results found. The text for this message can be customized using the [NoResultsFoundTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_NoResultsFoundTemplate) property. {% tabs %} {% highlight xaml %} @@ -489,7 +482,7 @@ When the entered item is not in the suggestion list, AutoComplete displays a tex ![NoResultsFoundTemplate](AutoComplete_and_filtering_images/NoResultsFoundTemplate.png) -## Restricting the maximum items filtered +## Restricting the Maximum Items Filtered The [MaximumSuggestionsCount](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_MaximumSuggestionsCount) property is used to restrict the number of suggestions displayed in the suggestion box. @@ -517,5 +510,4 @@ textBoxExt.MaximumSuggestionsCount = 3; ![MaximumSuggestionsCount](AutoComplete_and_filtering_images/MaximumSuggestionsCount.png) - -N> View [sample](https://github.com/SyncfusionExamples/wpf-textboxext-examples/tree/master/Samples/AutoComplete-and-filtering) in GitHub +> **Note:** View [sample](https://github.com/SyncfusionExamples/wpf-textboxext-autocomplete-and-filtering) on GitHub diff --git a/wpf/Autocomplete/Diacritic-Sensitivity.md b/wpf/Autocomplete/Diacritic-Sensitivity.md index db9e8315f8..695e03e6b1 100644 --- a/wpf/Autocomplete/Diacritic-Sensitivity.md +++ b/wpf/Autocomplete/Diacritic-Sensitivity.md @@ -1,15 +1,15 @@ --- layout: post -title: Diacritic Sensitivity in WPF Autocomplete control | Syncfusion® -description: Learn here all about Diacritic Sensitivity support in Syncfusion® WPF Autocomplete (SfTextBoxExt) control and more. -platform: wpf +title: Diacritic Sensitivity in WPF Autocomplete Control | Syncfusion® +description: Learn about diacritic sensitivity support in the Syncfusion® WPF Autocomplete (SfTextBoxExt) control and more. +platform: WPF control: SfTextBoxExt documentation: ug --- # Diacritic Sensitivity in WPF Autocomplete (SfTextBoxExt) -The control does not stick with one type of keyboard, so it can be populated with the items from a language with letters containing diacritics, and search for them with English characters from an en-US keyboard. Enable or disable the diacritic sensitivity using the [IgnoreDiacritic](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_IgnoreDiacritic) property. The following code example demonstrates how to enable the diacritic sensitivity. +The control supports multiple keyboard types, allowing it to be populated with items from languages containing letters with diacritics, while searching for them using English characters from an en-US keyboard. The diacritic sensitivity can be enabled or disabled using the [IgnoreDiacritic](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_IgnoreDiacritic) property. The following code example demonstrates how to enable diacritic sensitivity. {% tabs %} @@ -38,4 +38,4 @@ textBoxExt.IgnoreDiacritic = false; ![Diacritic](Diacritic_Sensitivity_images/Diacritic.png) -N> View [sample](https://github.com/SyncfusionExamples/wpf-textboxext-examples/tree/master/Samples/Diacritic-sensitivity) in GitHub +> **Note:** View [sample](https://github.com/SyncfusionExamples/wpf-textboxext-examples/tree/master/Samples/Diacritic-sensitivity) on GitHub diff --git a/wpf/Autocomplete/Dropdown-customization.md b/wpf/Autocomplete/Dropdown-customization.md index 5f534148b4..6ea7f39add 100644 --- a/wpf/Autocomplete/Dropdown-customization.md +++ b/wpf/Autocomplete/Dropdown-customization.md @@ -1,19 +1,19 @@ --- layout: post -title: Dropdown customization in WPF Autocomplete control | Syncfusion® -description: Learn here all about Dropdown customization support in Syncfusion® WPF Autocomplete (SfTextBoxExt) control and more. -platform: wpf +title: Dropdown Customization in WPF Autocomplete Control | Syncfusion® +description: Learn about dropdown customization support in the Syncfusion® WPF Autocomplete (SfTextBoxExt) control and more. +platform: WPF control: SfTextBoxExt documentation: ug --- -# Dropdown customization in WPF Autocomplete (SfTextBoxExt) +# Dropdown Customization in WPF Autocomplete (SfTextBoxExt) -Suggestion box is the drop-down list box, which displays the filtered suggestions inside a pop-up. This section explains the properties and customizations that deals with drop-down list in the `AutoComplete` control. +The suggestion box is a drop-down list box, which displays the filtered suggestions inside a pop-up. This section explains the properties and customizations that deal with the drop-down list in the `AutoComplete` control. -## Customize the background +## Customize the Background -The [DropDownBackground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_DropDownBackground) property is used to modify the background color of suggestion box. The following code example demonstrates how to change the background color of suggestion box. +The [DropDownBackground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_DropDownBackground) property is used to modify the background color of the suggestion box. The following code example demonstrates how to change the background color of the suggestion box. {% tabs %} @@ -38,16 +38,15 @@ textBoxExt.DropDownBackground = new SolidColorBrush(Colors.AliceBlue); ![Dropdown background color](Dropdown_customization_images/drop_down_background_color.png) +## Drop-down Placement -## Drop-down placement - -The [SuggestionBoxPlacement](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SuggestionBoxPlacement) property, defines the position of pop-up relative to the control. It contains three built-in options: +The [SuggestionBoxPlacement](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SuggestionBoxPlacement) property defines the position of the pop-up relative to the control. It contains three built-in options: 1. Top 2. Bottom 3. None -The default value is bottom. +The default value is `Bottom`. ### Top @@ -133,10 +132,9 @@ textBoxExt.SuggestionBoxPlacement = SuggestionBoxPlacement.None; ![None](Dropdown_customization_images/None.png) +## Setting the Maximum Height -## Setting the maximum height - -The maximum height of the suggestion box in the AutoComplete control can be changed using the [MaximumDropDownHeight](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_MaxDropDownHeight) property. +The maximum height of the suggestion box in the AutoComplete control can be changed using the [MaxDropDownHeight](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_MaxDropDownHeight) property. {% tabs %} @@ -160,9 +158,9 @@ textBoxExt.MaxDropDownHeight = 500; ![MaxDropDownHeight](Dropdown_customization_images/maximum_drop_down_height.png) -## Open the drop-down on focus +## Open the Drop-down on Focus -Suggestion box can be shown whenever the control receives focus using the [ShowSuggestionsOnFocus](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_ShowSuggestionsOnFocus) property. At that time, suggestion list is the complete list of data source. +The suggestion box can be shown whenever the control receives focus using the [ShowSuggestionsOnFocus](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_ShowSuggestionsOnFocus) property. At that time, the suggestion list is the complete list of the data source. {% tabs %} @@ -186,9 +184,9 @@ textBoxExt.ShowSuggestionsOnFocus = true; ![ShowSuggestionsOnFocus](Dropdown_customization_images/suggestion_on_focus.png) -## Open drop-down with a delay +## Open Drop-down with a Delay -The [PopupDelay](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_PopupDelay) specifies the delay after, which the suggestion pop-up should open. +The [PopupDelay](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_PopupDelay) specifies the delay after which the suggestion pop-up should open. {% tabs %} {% highlight xaml %} @@ -209,7 +207,7 @@ textBoxExt.PopupDelay = new TimeSpan(00,00,02); {% endhighlight %} {% endtabs %} -## Customizing the SelectedItem background +## Customizing the Selected Item Background The [SelectionBackgroundColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SelectionBackgroundColor) property is used to set the background color of the selected item in the suggestion box. @@ -238,9 +236,9 @@ textBoxExt.SelectionBackgroundColor = new SolidColorBrush(Colors.Red); ![Selected item background color](Dropdown_customization_images/SelectionBackgroundColor.png) -## Highlighting matched text in DropDown +## Highlighting Matched Text in DropDown -`SfTextBoxExt` supports highlighting the first matched item when a dropdown is opened by setting the `AutoHighlightMatchedItem` API to true. The default value is false. +`SfTextBoxExt` supports highlighting the first matched item when a dropdown is opened by setting the `AutoHighlightMatchedItem` property to true. The default value is false. {% tabs %} @@ -283,4 +281,4 @@ textBoxExt.SelectionBackgroundColor = new SolidColorBrush(Colors.Red); ![Highlighted Matched Item](Dropdown_customization_images/highlight_matched_item.png) -N> View [sample](https://github.com/SyncfusionExamples/wpf-textboxext-examples/tree/master/Samples/Dropdown-customization) in GitHub +> **Note:** View [sample](https://github.com/SyncfusionExamples/wpf-textboxext-examples/tree/master/Samples/Dropdown-customization) on GitHub diff --git a/wpf/Autocomplete/Getting-Started.md b/wpf/Autocomplete/Getting-Started.md index 867e52d28f..574eb0db03 100644 --- a/wpf/Autocomplete/Getting-Started.md +++ b/wpf/Autocomplete/Getting-Started.md @@ -1,45 +1,45 @@ --- layout: post -title: Getting Started with WPF Autocomplete control | Syncfusion® -description: Learn here about getting started with Syncfusion® WPF Autocomplete (SfTextBoxExt) control, its elements and more details. -platform: wpf +title: Getting Started with WPF Autocomplete Control | Syncfusion® +description: Learn about getting started with the Syncfusion® WPF Autocomplete (SfTextBoxExt) control, its elements, and more details. +platform: WPF control: SfTextBoxExt documentation: ug --- # Getting Started with WPF Autocomplete (SfTextBoxExt) -## Assembly deployment +## Assembly Deployment -Refer to this [Control Dependencies](https://help.syncfusion.com/wpf/control-dependencies#sftextboxext) section to get the list of assemblies or NuGet package that needs to be added as a reference to use the control in any application. +Refer to the [Control Dependencies](https://help.syncfusion.com/wpf/control-dependencies#sftextboxext) section to get the list of assemblies or NuGet packages required to use the control in any application. -Refer to this [How to install nuget packages](https://help.syncfusion.com/wpf/welcome-to-syncfusion-essential-wpf) documentation to find more details about installing the NuGet package in a WPF application. +Refer to the [How to Install NuGet Packages](https://help.syncfusion.com/wpf/welcome-to-syncfusion-essential-wpf) documentation for more details about installing the NuGet package in a WPF application. -## Creating a simple application +## Creating a Simple Application -Create a WPF application with [SfTextBoxExt](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html) control using the following steps: +Create a WPF application with the [SfTextBoxExt](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html) control using the following steps: -### Create a project +### Create a Project -Create a new WPF project in Visual Studio to display the [SfTextBoxExt](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html) control with their functionalities. +Create a new WPF project in Visual Studio to display the [SfTextBoxExt](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html) control with its functionalities. -### Add a control using the designer +### Add a Control Using the Designer The [SfTextBoxExt](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html) control can be added to an application by dragging it from the toolbox to a designer view. The following required assembly references will be added automatically: -* Syncfusion.SfInput.WPF -* Syncfusion.SfShared.WPF +- Syncfusion.SfInput.WPF +- Syncfusion.SfShared.WPF ![DesignerView](GettingStarted_images/Designer.png) -### Adding control manually in XAML +### Adding Control Manually in XAML -To add the control manually in XAML, follow the given steps: +To add the control manually in XAML, follow these steps: 1. Add the following required assembly references to the project: - * Syncfusion.SfInput.WPF - * Syncfusion.SfShared.WPF -2. Import Syncfusion® WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page. + - Syncfusion.SfInput.WPF + - Syncfusion.SfShared.WPF +2. Import the Syncfusion® WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page. 3. Declare the [SfTextBoxExt](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html) control in the XAML page. {% capture codesnippet1 %} diff --git a/wpf/Autocomplete/Highlighting-matched-text.md b/wpf/Autocomplete/Highlighting-matched-text.md index 4b8b360f1d..dc9e9f7539 100644 --- a/wpf/Autocomplete/Highlighting-matched-text.md +++ b/wpf/Autocomplete/Highlighting-matched-text.md @@ -1,27 +1,26 @@ --- layout: post -title: Highlighting Matched Text in WPF Autocomplete control | Syncfusion® -description: Learn here all about Highlighting Matched Text support in Syncfusion® WPF Autocomplete (SfTextBoxExt) control and more. -platform: wpf +title: Highlighting Matched Text in WPF Autocomplete Control | Syncfusion® +description: Learn about highlighting matched text support in the Syncfusion® WPF Autocomplete (SfTextBoxExt) control and more. +platform: WPF control: SfTextBoxExt documentation: ug --- # Highlighting Matched Text in WPF Autocomplete (SfTextBoxExt) -By using the [TextHighlightMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_TextHighlightMode) property, highlight matching and unmatched characters in a suggestion list to pick an item with more clarity. The default value is None. The matching text can be highlighted in the following two ways: +The [TextHighlightMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_TextHighlightMode) property allows highlighting of matching and unmatched characters in a suggestion list for greater clarity. The default value is None. Text can be highlighted in the following ways: -* First occurrence -* Multiple occurrence -* Unmatched +- First occurrence +- Multiple occurrences +- Unmatched characters +Text highlights can be customized by adjusting the color using the [HighlightedTextColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_HighlightedTextColor) property and the style using the [HighlightedTextStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_HighlightedTextStyle) property. -The text highlight can be indicated by customizing the color of the characters using [HighlightedTextColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_HighlightedTextColor) property and style of the characters using [HighlightedTextStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_HighlightedTextStyle) property. +> **Note:** The [HighlightedTextStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_HighlightedTextStyle) property style target type is [Run](https://docs.microsoft.com/en-us/dotnet/api/system.windows.documents.run?view=net-5.0). -N> The [HighlightedTextStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_HighlightedTextStyle) property style target type is [Run](https://docs.microsoft.com/en-us/dotnet/api/system.windows.documents.run?view=net-5.0). +## First Occurrence -## First occurrence - -It highlights the first position of the matching characters in the suggestion list. +Highlights the first position of the matching characters in the suggestion list. {% tabs %} @@ -48,9 +47,9 @@ textBoxExt.TextHighlightMode = OccurrenceMode.FirstOccurrence; ![First Occurrance](Highlighting_matched_text_images/FirstOccurrance.png) -## Multiple occurrence +## Multiple Occurrences -It highlights the matching character that presents everywhere in the suggestion list for "Contains" case in SuggestionMode. +Highlights matching characters that are present everywhere in the suggestion list for the "Contains" case in SuggestionMode. {% tabs %} @@ -81,7 +80,7 @@ textBoxExt.TextHighlightMode = OccurrenceMode.MultipleOccurrence; ## Unmatched -It highlights unmatched characters in the suggestion list. +Highlights unmatched characters in the suggestion list. {% tabs %} @@ -115,7 +114,6 @@ textBoxExt.TextHighlightMode = OccurrenceMode.Unmatched; {% endtabs %} -![Multiple Occurrance](Highlighting_matched_text_images/Unmatched.png) - +![Unmatched](Highlighting_matched_text_images/Unmatched.png) -N> View [sample](https://github.com/SyncfusionExamples/wpf-textboxext-examples/tree/master/Samples/TextHighlightMode) in GitHub +> **Note:** View [sample](https://github.com/SyncfusionExamples/wpf-textboxext-examples) on GitHub diff --git a/wpf/Autocomplete/Multipath-search.md b/wpf/Autocomplete/Multipath-search.md index 8caf0b8a17..15726a7536 100644 --- a/wpf/Autocomplete/Multipath-search.md +++ b/wpf/Autocomplete/Multipath-search.md @@ -1,15 +1,15 @@ --- layout: post -title: Perform multi-path search in WPF Autocomplete | Syncfusion® -description: Learn here all about Perform multi-path search in Syncfusion® WPF Autocomplete (SfTextBoxExt) control, its elements and more. -platform: wpf +title: Perform Multi-Path Search in WPF Autocomplete | Syncfusion® +description: Learn about performing multi-path search in Syncfusion® WPF Autocomplete (SfTextBoxExt) control, its elements, and more. +platform: WPF control: SfTextBoxExt documentation: ug --- -# Perform multi-path search in WPF Autocomplete +# Perform Multi-Path Search in WPF Autocomplete -Multi-path search can be achieved using the custom search feature by setting the [SuggestionMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SuggestionMode) property as `Custom`. Users can define a custom filter and can be assigned to the [Filter](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_Filter) property. +Multi-path search can be achieved using the custom search feature by setting the [SuggestionMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SuggestionMode) property to `Custom`. Users can define a custom filter and assign it to the [Filter](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_Filter) property. **Model** diff --git a/wpf/Autocomplete/Overview.md b/wpf/Autocomplete/Overview.md index 7ea74d47cf..51e22cee54 100644 --- a/wpf/Autocomplete/Overview.md +++ b/wpf/Autocomplete/Overview.md @@ -1,33 +1,32 @@ --- layout: post -title: About WPF Autocomplete control | Syncfusion® -description: Learn here all about introduction of Syncfusion® WPF Autocomplete (SfTextBoxExt) control, its elements and more details. -platform: wpf +title: Introduction to WPF Autocomplete Control | Syncfusion® +description: Discover the features and functionalities of Syncfusion® WPF Autocomplete (SfTextBoxExt) control, including its elements and additional details. +platform: WPF control: SfTextBoxExt documentation: ug --- -# WPF Autocomplete (SfTextBoxExt) Overview +# Overview of WPF Autocomplete (SfTextBoxExt) ### Description -[SfTextBoxExt](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html) is an extended version of the TextBox control. Most of the functionality of [SfTextBoxExt](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html) is inherited from the [TextBox](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.textbox?view=windowsdesktop-7.0&viewFallbackFrom=netcore-3.1) class. +The [SfTextBoxExt](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html) is an advanced version of the standard TextBox control. It extends most of the functionalities inherited from the base [TextBox](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.textbox?view=windowsdesktop-7.0&viewFallbackFrom=netcore-3.1) class. +### Key Features -### Key features - -* **AutoComplete modes**: The control provides the suggestions based on a predefined collection while typing. -* **Watermark**: The control will prompt some information when it is not in focus and contains an empty string. -* **Filtering suggestion items**: Suggestions can be filtered in 18 different modes like StartsWith, EndWith, Contains, Equals, and Custom. AutoComplete provides both the case-sensitive and insensitive modes. -* **Popup delay**: The filtering process can be delayed. Displaying filtered suggestions from a drop-down list may also be delayed for a period of time. -* **Minimum prefix characters**: Instead of displaying suggestion list on every character entry, matches can be filtered and displayed after a few character entries. -* **Customization support**: AutoComplete provides the options to customize both text box and drop-down list. -* **Diacritic sense**: The control provides the populating the items from a language with letters containing diacritics, and search for them with English characters from an en-US keyboard. -* **Highlighting Text**: The control provides the highlighting the matching text in the suggestion list based on the input given in it. -* **Custom filter**: AutoComplete provides filter the items in the suggestion list based on their filtering condition. -* **Multi selection support**: Selecting multiple items from a suggestion list. -* **Suggestion box adjustment**: Adjust the position of popup relative to the control. -* **Enable auto size**: Auto sizing can be enabled in AutoComplete control so that the control will extend its layout based on the tokens size in wrap mode. -* **AutoComplete template**: It can be used for own template. -* **NoResults found template**: Set the desire text, if the typing item does not exists in the collection. -* **Retrieving the selection**: Retrieve the selected item, index, and value. \ No newline at end of file +* **AutoComplete Modes**: Offers suggestions based on a predefined collection as you type. +* **Watermark**: Displays a prompt when the control is unfocused and empty. +* **Filtering Suggestions**: Filter suggestions using 18 different modes such as StartsWith, EndsWith, Contains, Equals, and Custom. Supports both case-sensitive and case-insensitive modes. +* **Popup Delay**: Allows delaying the filtering process and the display of filtered suggestions in a drop-down. +* **Minimum Prefix Characters**: Filters and displays matches after a specified number of characters are entered. +* **Customization Support**: Offers options to customize both the text box and the drop-down list. +* **Diacritic Sensitivity**: Supports populating items from a language with diacritics and searching with English characters from the en-US keyboard. +* **Text Highlighting**: Highlights the matching text in the suggestion list based on the input given. +* **Custom Filter**: Allows filtering of items in the suggestion list based on custom filtering conditions. +* **Multi-selection Support**: Allows selecting multiple items from the suggestion list. +* **Suggestion Box Adjustment**: Adjusts the position of the popup relative to the control. +* **Auto-size Enablement**: Automatically adjusts the size of the control based on tokens when in wrap mode. +* **AutoComplete Template**: Allows usage of a custom template. +* **No Results Found Template**: Displays custom text if the typed item is not present in the collection. +* **Selection Retrieval**: Retrieves the selected item, index, and value. diff --git a/wpf/Autocomplete/Single-and-multiple-Selection.md b/wpf/Autocomplete/Single-and-multiple-Selection.md index b29736d33c..6d3f4e701f 100644 --- a/wpf/Autocomplete/Single-and-multiple-Selection.md +++ b/wpf/Autocomplete/Single-and-multiple-Selection.md @@ -1,40 +1,38 @@ --- layout: post -title: Single and multiple selection in WPF Autocomplete | Syncfusion® -description: Learn here all about Single and multiple selection support in Syncfusion® WPF Autocomplete (SfTextBoxExt) control and more. -platform: wpf +title: Single and Multiple Selection in WPF Autocomplete | Syncfusion® +description: Explore support for single and multiple selection in Syncfusion® WPF Autocomplete (SfTextBoxExt) control, and more. +platform: WPF control: SfTextBoxExt documentation: ug --- -# Single and multiple selection in WPF Autocomplete (SfTextBoxExt) +# Single and Multiple Selection in WPF Autocomplete (SfTextBoxExt) -In AutoComplete selection can be performed using single selection or multi-selection. This can be handled by [MultiSelectMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_MultiSelectMode) property. The default value of `MultiSelectMode` is `None` which performs single selection. +In AutoComplete, selection can be managed using either single or multi-selection modes. This is controlled by the [MultiSelectMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_MultiSelectMode) property. The default value of `MultiSelectMode` is `None`, which enables single selection. -## Single selection +## Single Selection -The single selection can be performed by setting the [MultiSelectMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_MultiSelectMode) property to None. In this mode we can set and retrieve the selected item using the [SelectedItem](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SelectedItem) property. +Single selection is achieved by setting the [MultiSelectMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_MultiSelectMode) property to `None`. In this mode, you can set and retrieve the selected item using the [SelectedItem](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SelectedItem) property. -## Multi selection +## Multi-selection -The multi-selection, there are two ways to display the selection in the control. +For multi-selection, there are two ways to represent selections within the control: * Token * Delimiter -## Multiple selection using tokens +## Multiple Selection Using Tokens -Each selected items can be displayed as a token representation having a close button for each token. +Each selected item can be displayed as a token, with a close button for each token. -In token representation the control behavior of arranging the items can be done in two ways which is handled by the property [TokensWrapMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_TokensWrapMode). +In token representation, the arrangement of items is determined by the [TokensWrapMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_TokensWrapMode) property: -* `Wrap` - The selected items will be wrapped to the next line of the AutoComplete. - -* `None` - The selected items will be arranged in horizontal layout in single line. - -The [SelectedItems](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SelectedItems) property can be used to set and retrieve the items in `MultiSelectMode`. +* `Wrap` - Selected items wrap to the next line. +* `None` - Selected items display in a single horizontal line. +Use the [SelectedItems](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SelectedItems) property to set and retrieve items in `MultiSelectMode`. {% tabs %} @@ -63,7 +61,7 @@ textBoxExt.MultiSelectMode = MultiSelectMode.Token; ### Customization of Tokens -The token can be customized by overriding the default style targeting the `TokenItem` class. +Customize tokens by overriding the default style, targeting the `TokenItem` class. {% tabs %} @@ -115,12 +113,11 @@ The token can be customized by overriding the default style targeting the `Token ![Token_Customization](Single_and_multiple_selection_images/Token_Customization.png) +### Enable Auto-size in Token Mode -### Enable autosize in token mode - -In token representation when we have set `Wrap` mode enabling the [EnableAutoSize](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_EnableAutoSize) property re-renders the control height based on the number of lines the tokens are wrapped inside the control. +When using `Wrap` mode, enabling the [EnableAutoSize](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_EnableAutoSize) property re-renders the control height based on the number of lines tokens wrap inside the control. -To use this feature, it is need to set the `MultiSelectMode` as `Token` and `TokensWrapMode` as `Wrap`. By default this feature is disabled. +To use this feature, set the `MultiSelectMode` as `Token` and `TokensWrapMode` as `Wrap`. By default, this feature is disabled. {% tabs %} @@ -149,10 +146,9 @@ textBoxExt.EnableAutoSize = true; ![EnableAutoSize](Single_and_multiple_selection_images/EnableAutoSize.png) +### ShowClearButton -### ShowClearButton: - -This feature allows to show or hide the clear button in Token mode for the AutoComplete control using the [ShowClearButton]( https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_ShowClearButton) property. +This feature allows showing or hiding the clear button in Token mode for the AutoComplete control using the [ShowClearButton](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_ShowClearButton) property. {% tabs %} @@ -181,14 +177,13 @@ textBoxExt.ShowClearButton = true; ![ShowClearButton](Single_and_multiple_selection_images/ShowClearButton.png) -N> The default `ShowClearButton` property value is false. It will be only applicable for `MultiSelectMode` is `Token`. - -See also [Multiple selection using tokens ](https://help.syncfusion.com/wpf/autocomplete/single-and-multiple-selection#multiple-selection-using-tokens) topic in AutoComplete. +> Note: The default `ShowClearButton` property value is false. It applies only when `MultiSelectMode` is `Token`. +See also the [Multiple selection using tokens](https://help.syncfusion.com/wpf/autocomplete/single-and-multiple-selection#multiple-selection-using-tokens) topic in AutoComplete. -## Multiple selection using delimiter +## Multiple Selection Using Delimiter -In `Delimiter` mode, each item is separated by a character that is set to the [Delimiter](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_Delimiter) property. By default the items are separated by `,`(Comma). +In `Delimiter` mode, each item is separated by a character specified in the [Delimiter](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_Delimiter) property. By default, items are separated by a comma (`,`). {% tabs %} @@ -214,15 +209,12 @@ textBoxExt.MultiSelectMode = MultiSelectMode.Delimiter; ![Delimiter](Single_and_multiple_selection_images/Delimiter.png) +## Setting and Retrieving SelectedItem -## Setting and retrieving SelectedItem - -The [SelectedItem](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SelectedItem) property is used to select a particular item from the suggestion list or to retrieve the item that is selected. The SelectedItem property can be used in single selection where the `MultiSelectMode` as `None`. For multi-selection where the `MultiSelectMode` is set either as `Token` or `Delimiter` the selected items can be set or retrieved using the [SelectedItems](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SelectedItems) property. +The [SelectedItem](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SelectedItem) property selects or retrieves a particular item from the suggestion list. It is used for single selection when `MultiSelectMode` is `None`. For multi-selection, where `MultiSelectMode` is set to either `Token` or `Delimiter`, use the [SelectedItems](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SelectedItems) property. -The `SelectedItem` and `SelectedItems` contains the object of the custom data and using the -`SearchItemPath` property the value displayed in the text field can be retrieved. - -Model Class: +The `SelectedItem` and `SelectedItems` contain custom data objects, and the item displayed in the text field can be retrieved using the `SearchItemPath` property. +### Model Class: {% tabs %} {% highlight c# %} @@ -249,7 +241,7 @@ public class Employee {% endhighlight %} {% endtabs %} -In EmployeeViewModel class the [SelectedItem](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SelectedItem) updated initially from the Employees collection. +In the `EmployeeViewModel` class, the [SelectedItem](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SelectedItem) is initially updated from the Employees collection. {% tabs %} {% highlight c# %} @@ -334,9 +326,7 @@ private void TextBoxExt_SelectedItemChanged(DependencyObject d, DependencyProper {% endtabs %} - - -Model Class: +### Model Class: {% tabs %} {% highlight c# %} @@ -362,8 +352,7 @@ public class Employee {% endhighlight %} {% endtabs %} - -In EmployeeViewModel class the [SelectedItems](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SelectedItems) updated initially from the Employees collection. +In the `EmployeeViewModel` class, the [SelectedItems](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SelectedItems) is initially updated from the Employees collection. {% tabs %} {% highlight c# %} @@ -431,7 +420,7 @@ public class EmployeeViewModel ## Retrieving SelectedValue -The [SelectedValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SelectedValue) property is used to retrieve the selected values from the suggestion list. We have to set the [ValueMemberPath](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_ValueMemberPathProperty) property when using custom data for the value we want to retrieve from `SelectedValue` based on the `SelectedItem` object. +The [SelectedValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SelectedValue) property is used to retrieve selected values from the suggestion list. Set the [ValueMemberPath](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_ValueMemberPathProperty) property to define which data to retrieve from `SelectedValue` based on the `SelectedItem` object. {% tabs %} @@ -472,7 +461,7 @@ private void AutoComplete_SelectedItemChanged(DependencyObject d, DependencyProp ### Retrieving SuggestionIndex -When an item is selected from suggestion list, their index can be retrieved using the [SuggestionIndex](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SuggestionIndex) property. +When an item is selected from the suggestion list, its index can be retrieved using the [SuggestionIndex](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_SuggestionIndex) property. {% tabs %} @@ -508,14 +497,12 @@ private void AutoComplete_SelectedItemChanged(DependencyObject d, DependencyProp {% endtabs %} +## Displaying Images -## Displaying images - -This feature allows to provide the path for the image to be displayed in the text box control using the [ImageMemberPath](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_ImageMemberPath) property. - -N> This feature is applicable only for MultiSelectMode with Token mode. +This feature allows setting a path for images to be displayed in the text box control using the [ImageMemberPath](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_ImageMemberPath) property. -For further details, refer to [Showing image in token and dropdown](https://help.syncfusion.com/wpf/autocomplete/autocomplete-and-filtering#showing-image-in-token-and-drop-down). +> Note: This feature is applicable only with `MultiSelectMode` set to Token mode. +For more details, refer to [Showing image in token and dropdown](https://help.syncfusion.com/wpf/autocomplete/autocomplete-and-filtering#showing-image-in-token-and-drop-down). -N> View [sample](https://github.com/SyncfusionExamples/wpf-textboxext-examples/tree/master/Samples/Single-and-multiple-selection) in GitHub +> Note: View [sample](https://github.com/SyncfusionExamples/wpf-textboxext-examples/tree/master/Samples/Single-and-multiple-selection) on GitHub. diff --git a/wpf/Autocomplete/Textbox-customization.md b/wpf/Autocomplete/Textbox-customization.md index 06b3c139a7..273880e1e3 100644 --- a/wpf/Autocomplete/Textbox-customization.md +++ b/wpf/Autocomplete/Textbox-customization.md @@ -1,20 +1,19 @@ --- layout: post -title: Textbox customization in WPF Autocomplete control | Syncfusion® -description: Learn here all about Textbox customization support in Syncfusion® WPF Autocomplete (SfTextBoxExt) control and more. -platform: wpf +title: Textbox Customization in WPF Autocomplete Control | Syncfusion® +description: Discover how to customize text box support in Syncfusion® WPF Autocomplete (SfTextBoxExt) control, and more. +platform: WPF control: SfTextBoxExt documentation: ug --- -# Textbox customization in WPF Autocomplete (SfTextBoxExt) +# Textbox Customization in WPF Autocomplete (SfTextBoxExt) -AutoComplete provides the user-friendly customizing options for text box. This section explains how to customize the entire AutoComplete control. +AutoComplete offers user-friendly options for customizing the text box. This section explains how to customize the entire AutoComplete control. +## Watermark -## Water mark - -[Watermark](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_Watermark) property, allows to specify some information when the text is empty. For illustration, let us create a simple textbox and indicate enter names separated by a comma. +The [Watermark](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_Watermark) property allows specifying information when the text is empty. For illustration, let's create a simple textbox with a placeholder to enter names separated by commas. {% tabs %} {% highlight xaml %} @@ -35,7 +34,7 @@ textBoxExt.Watermark= "Enter names separated by comma (Ex : John, Kate)"; ![Watermark_Text](Textbox_customization_images/Watermark.png) -N> The Watermark property is of the object type. So, any framework elements can be hosted as Watermark content. The following example shows how to host an image and text as Watermark content. +> Note: The Watermark property is of object type, allowing any framework elements to be hosted as Watermark content. The following example demonstrates hosting an image and text as Watermark content. {% tabs %} {% highlight xaml %} @@ -61,9 +60,9 @@ N> The Watermark property is of the object type. So, any framework elements can ![Watermark_View](Textbox_customization_images/Watermark_img.png) -### Water mark template +### Watermark Template -Any business object can be bound to the Watermark property and that object can be decorated by applying the [WatermarkTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_WatermarkTemplate) property. +Any business object can be bound to the Watermark property and decorated using the [WatermarkTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_WatermarkTemplate) property. {% tabs %} {% highlight xaml %} @@ -90,12 +89,12 @@ Any business object can be bound to the Watermark property and that object can b {% endhighlight %} {% endtabs %} -![Watermark_View](Textbox_customization_images/WatermarkTemplate.png) +![Watermark_Template](Textbox_customization_images/WatermarkTemplate.png) ## Customizing the TextBox -The [Text](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_IgnoreCase), [FontSize](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_IgnoreCase), [FontWeight](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_IgnoreCase), and [FontFamily](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_IgnoreCase) properties are used to customize the text in the AutoComplete control. +Use the [Text](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_Text), [FontSize](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_FontSize), [FontWeight](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_FontWeight), and [FontFamily](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_FontFamily) properties to customize the text in the AutoComplete control. {% tabs %} @@ -123,13 +122,13 @@ textBoxExt.FontFamily = new FontFamily("Times New Roman"); {% endtabs %} -![AutoComplete Customization](Textbox_customization_images/Customization.png) +![AutoComplete_Customization](Textbox_customization_images/Customization.png) ## Setting the Dropdown Icon -This feature allows to set the drop-down icon for the TextBox control using the [ShowDropDownButton](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_ShowDropDownButton). +You can set the drop-down icon for the TextBox control using the [ShowDropDownButton](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_ShowDropDownButton) property. {% tabs %} @@ -152,11 +151,11 @@ textBoxExt.ShowDropDownButton = true; {% endhighlight %} {% endtabs %} -![DropdownIcon](Textbox_customization_images/DropDownIcon.png) +![Dropdown_Icon](Textbox_customization_images/DropDownIcon.png) ## Setting the ClearButton -This feature allows to set the ClearButton for the [SfTextBoxExt](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html) control using the [ShowClearButton](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_ShowClearButton). +To set the ClearButton for the [SfTextBoxExt](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html) control, use the [ShowClearButton](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_ShowClearButton) property. {% tabs %} @@ -183,6 +182,4 @@ textBoxExt.ShowClearButton = true; ![ClearButton](Textbox_customization_images/ClearButton.png) - - -N> View [sample](https://github.com/SyncfusionExamples/wpf-textboxext-examples/tree/master/Samples/Textbox-customization) in GitHub +> Note: View [sample](https://github.com/SyncfusionExamples/wpf-textboxext-examples/tree/master/Samples/Textbox-customization) on GitHub. diff --git a/wpf/Busy-Indicator/AnimationTypes.md b/wpf/Busy-Indicator/AnimationTypes.md index b2c7ed9359..208c0b5c12 100644 --- a/wpf/Busy-Indicator/AnimationTypes.md +++ b/wpf/Busy-Indicator/AnimationTypes.md @@ -1,17 +1,17 @@ --- layout: post -title: AnimationTypes in WPF Busy Indicator control | Syncfusion® -description: Learn here all about AnimationTypes support in Syncfusion® WPF Busy Indicator (SfBusyIndicator) control and more. -platform: wpf +title: Animation Types in WPF Busy Indicator Control | Syncfusion® +description: Learn about animation types supported in the Syncfusion® WPF Busy Indicator (SfBusyIndicator) control. +platform: WPF control: Busy Indicator documentation: ug --- -# AnimationTypes in WPF Busy Indicator (SfBusyIndicator) +# Animation Types in WPF Busy Indicator (SfBusyIndicator) -The AnimationTypes property for the SfBusyIndicator allows the user to set one of the animations from the built-in animations as the busy indicator. +The `AnimationType` property for the SfBusyIndicator allows the user to select one of the built-in animations as the busy indicator. -N> `AnimationSpeed` property is not applicable for `Fluent` animation type. +> **Note:** The `AnimationSpeed` property is not applicable for the `Fluent` animation type. {% tabs %} @@ -35,9 +35,8 @@ busyIndicator.AnimationType = AnimationTypes.Flight; {% endtabs %} +The following gif image showcases the types of animations available in BusyIndicator. -The following gif image contains the types of animation in BusyIndicator. +![Animation Types](AnimationTypes_images/BusyIndicator-animation-video.gif) -![AnimationTypes](AnimationTypes_images/BusyIndicator-animation-video.gif) - -N> View [sample](https://github.com/SyncfusionExamples/wpf-BusyIndicator-examples/tree/master/Samples/AnimationType) in GitHub +> **Note:** View the [sample](https://github.com/SyncfusionExamples/wpf-BusyIndicator-Sample) on GitHub. diff --git a/wpf/Busy-Indicator/Getting-Started.md b/wpf/Busy-Indicator/Getting-Started.md index 698563cee5..378991d4f9 100644 --- a/wpf/Busy-Indicator/Getting-Started.md +++ b/wpf/Busy-Indicator/Getting-Started.md @@ -1,19 +1,19 @@ --- layout: post -title: Getting Started with WPF Busy Indicator control | Syncfusion® -description: Learn here about getting started with Syncfusion® WPF Busy Indicator (SfBusyIndicator) control, its elements and more details. -platform: wpf +title: Getting Started with WPF Busy Indicator Control | Syncfusion® +description: Learn how to get started with the Syncfusion® WPF Busy Indicator (SfBusyIndicator) control, including its elements and additional details. +platform: WPF control: Busy Indicator documentation: ug --- # Getting Started with WPF Busy Indicator (SfBusyIndicator) -Namespace: Syncfusion.Windows.Controls.Notification. +Namespace: `Syncfusion.Windows.Controls.Notification` -Assembly: Syncfusion.SfBusyIndicator.WPF (in Syncfusion.SfBusyIndicator.WPF.dll) +Assembly: `Syncfusion.SfBusyIndicator.WPF` (in Syncfusion.SfBusyIndicator.WPF.dll) -The following code example shows how to create the SfBusyIndicator from XAML and code behind respectively. +The following code examples demonstrate how to create the `SfBusyIndicator` using XAML and C# code-behind. {% tabs %} @@ -39,15 +39,14 @@ SfBusyIndicator busyIndicator = new SfBusyIndicator(); {% endtabs %} - -N> View [sample](https://github.com/SyncfusionExamples/wpf-BusyIndicator-examples/tree/master/Samples/Getting-Started) in GitHub +> **Note:** View the [sample](https://github.com/SyncfusionExamples/wpf-BusyIndicator-examples/tree/master/Samples/Getting-Started) on GitHub. ## Theme -SfBusyIndicator supports various built-in themes. Refer to the below links to apply themes for the SfBusyIndicator, +The `SfBusyIndicator` supports various built-in themes. Refer to the links below to apply themes to the `SfBusyIndicator`: - * [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager) + * [Apply Theme Using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager) - * [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme) + * [Create a Custom Theme Using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme) - ![Setting theme to WPF SfBusyIndicator](IsBusy_images/Theme.png) \ No newline at end of file +![Setting the Theme for WPF SfBusyIndicator](IsBusy_images/Theme.png) diff --git a/wpf/Busy-Indicator/Header.md b/wpf/Busy-Indicator/Header.md index af472b618b..88c83e7b65 100644 --- a/wpf/Busy-Indicator/Header.md +++ b/wpf/Busy-Indicator/Header.md @@ -1,8 +1,8 @@ --- layout: post -title: Header in WPF Busy Indicator control | Syncfusion® -description: Learn here all about Header support in Syncfusion® WPF Busy Indicator (SfBusyIndicator) control and more. -platform: wpf +title: Header in WPF Busy Indicator Control | Syncfusion® +description: Learn all about Header support in the Syncfusion® WPF Busy Indicator (SfBusyIndicator) control and more. +platform: WPF control: Busy Indicator documentation: ug --- @@ -11,13 +11,13 @@ documentation: ug ## Header -The Header is displayed below the animation. The Header property can be used to get or set the content which indicates the information related to loading. +The Header is displayed below the animation. The `Header` property can be used to get or set the content that indicates information related to the loading process. {% tabs %} {% highlight xaml %} - + @@ -48,19 +48,19 @@ grid1.Children.Add(SfBusyIndicator) ![Header](Header_images/Header_img1.png) -Busy Indicator with header +Busy Indicator with a header {:.caption} ## Header Template -Header template can be used to get or set the template that defines how the header section of the SfBusyIndicator control is displayed. +The `HeaderTemplate` property is used to get or set the template that defines the appearance of the header section of the `SfBusyIndicator` control. {% tabs %} {% highlight xaml %} - + @@ -76,8 +76,7 @@ Header template can be used to get or set the template that defines how the head ![Header_Template](Header_images/Header_img2.png) -Busy Indicator with header template +Busy Indicator with a header template {:.caption} - -N> View [sample](https://github.com/SyncfusionExamples/wpf-BusyIndicator-examples/tree/master/Samples/Header) in GitHub +> **Note:** View the [sample](https://github.com/SyncfusionExamples/wpf-BusyIndicator-examples/tree/master/Samples/Header) on GitHub. diff --git a/wpf/Busy-Indicator/IsBusy.md b/wpf/Busy-Indicator/IsBusy.md index 72f490d2cc..df93d3b28a 100644 --- a/wpf/Busy-Indicator/IsBusy.md +++ b/wpf/Busy-Indicator/IsBusy.md @@ -1,15 +1,15 @@ --- layout: post -title: IsBusy in WPF Busy Indicator control | Syncfusion® -description: Learn here all about IsBusy support in Syncfusion® WPF Busy Indicator (SfBusyIndicator) control and more. -platform: wpf +title: IsBusy in WPF Busy Indicator Control | Syncfusion® +description: Learn all about IsBusy support in the Syncfusion® WPF Busy Indicator (SfBusyIndicator) control and more. +platform: WPF control: Busy Indicator documentation: ug --- # IsBusy in WPF Busy Indicator (SfBusyIndicator) -The IsBusy property in the BusyIndicator control is used to determine whether an animation needs to be executed or not. +The `IsBusy` property in the `SfBusyIndicator` control is used to determine whether an animation should be executed. {% tabs %} @@ -38,5 +38,4 @@ busyIndicator.IsBusy = true; Busy Indicator {:.caption} - -N> View [sample](https://github.com/SyncfusionExamples/wpf-BusyIndicator-examples/tree/master/Samples/IsBusy) in GitHub +> **Note:** View the [sample](https://github.com/SyncfusionExamples/wpf-BusyIndicator-examples/tree/master/Samples/IsBusy) on GitHub. diff --git a/wpf/Busy-Indicator/Overview.md b/wpf/Busy-Indicator/Overview.md index c69e0521cd..211062543f 100644 --- a/wpf/Busy-Indicator/Overview.md +++ b/wpf/Busy-Indicator/Overview.md @@ -1,15 +1,15 @@ --- layout: post -title: About WPF Busy Indicator control | Syncfusion® -description: Learn here all about introduction of Syncfusion® WPF Busy Indicator (SfBusyIndicator) control, its elements and more details. -platform: wpf +title: About WPF Busy Indicator Control | Syncfusion® +description: Learn about the Syncfusion® WPF Busy Indicator (SfBusyIndicator) control, its elements, and more details. +platform: WPF control: Busy Indicator documentation: ug --- # WPF Busy Indicator (SfBusyIndicator) Overview -The Busy Indicator control includes over 37 built-in animations that can be displayed within your applications. +The `SfBusyIndicator` control includes over 37 built-in animations that can be displayed within your applications. ![Busy Indicator - Overview](Overview_images/Overview_img1.png) @@ -18,10 +18,7 @@ Busy Indicator ## Key Features -* **IsBusy** – The control will show the animation when this property is set. -* **Header** – A user customized string that is displayed while showing animation. -* **Sizing** – The control view box height and width can be set. -* **AnimationTypes** – There are over 37 built-in animations that can be set with the control. - - - +- **IsBusy** – The control displays the animation when this property is set to true. +- **Header** – A user-customized string that is displayed while showing the animation. +- **Sizing** – The height and width of the control's view box can be adjusted. +- **AnimationTypes** – Select from over 37 built-in animations available with the control. diff --git a/wpf/Busy-Indicator/Sizing.md b/wpf/Busy-Indicator/Sizing.md index 9020c60744..0453e986f6 100644 --- a/wpf/Busy-Indicator/Sizing.md +++ b/wpf/Busy-Indicator/Sizing.md @@ -1,8 +1,8 @@ --- layout: post -title: Sizing in WPF Busy Indicator control | Syncfusion® -description: Learn here all about Sizing support in Syncfusion® WPF Busy Indicator (SfBusyIndicator) control and more. -platform: wpf +title: Sizing in WPF Busy Indicator Control | Syncfusion® +description: Learn about sizing support in the Syncfusion® WPF Busy Indicator (SfBusyIndicator) control and more. +platform: WPF control: Busy Indicator documentation: ug --- @@ -11,7 +11,7 @@ documentation: ug ## ViewBoxHeight -The ViewBoxHeight property allows the user to set the height of the ViewBox. +The `ViewBoxHeight` property allows the user to set the height of the ViewBox. {% tabs %} @@ -49,13 +49,11 @@ Grid1.Children.Add(SfBusyIndicator) {% endtabs %} - -![ViewboxHeight](Sizing_images/Sizing_img1.png) - +![ViewBoxHeight](Sizing_images/Sizing_img1.png) ## ViewBoxWidth -ViewBoxWidth property allows the user to set the width of the ViewBox. +The `ViewBoxWidth` property allows the user to set the width of the ViewBox. {% tabs %} @@ -99,10 +97,7 @@ Grid1.Children.Add(SfBusyIndicator) ![ViewBoxWidth](Sizing_images/Sizing_img2.png) -Busy Indicator with height and width +Busy Indicator with Height and Width {:.caption} - - - -N> View [sample](https://github.com/SyncfusionExamples/wpf-BusyIndicator-examples/tree/master/Samples/Sizing) in GitHub +> **Note:** View the [sample](https://github.com/SyncfusionExamples/wpf-BusyIndicator-examples/tree/master/Samples/Sizing) on GitHub. diff --git a/wpf/Navigation-Drawer/Commands-and-events.md b/wpf/Navigation-Drawer/Commands-and-events.md index 6c8e4044fd..765c245b2f 100644 --- a/wpf/Navigation-Drawer/Commands-and-events.md +++ b/wpf/Navigation-Drawer/Commands-and-events.md @@ -1,22 +1,21 @@ --- layout: post -title: Commands and events in WPF Navigation Drawer control | Syncfusion® -description: Learn here all about Commands and events support in Syncfusion® WPF Navigation Drawer (SfNavigationDrawer) control and more. -platform: wpf +title: Commands and Events in WPF Navigation Drawer Control | Syncfusion® +description: Learn about commands and events support in the Syncfusion® WPF Navigation Drawer (SfNavigationDrawer) control. +platform: WPF control: NavigationDrawer documentation: ug --- -# Commands and events in SfNavigationDrawer +# Commands and Events in SfNavigationDrawer -This section describes the events and command support available in the Navigation Drawer sidebar. +This section describes the events and commands supported by the Navigation Drawer sidebar. -## Opening event +## Opening Event -This [Opening](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Opening) event gets triggered when the drawer menu is opening. - -Using the `Cancel` property the opening of the drawer menu can be handled. +The [Opening](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Opening) event is triggered when the drawer menu is opening. +The opening of the drawer menu can be controlled using the `Cancel` property. {% tabs %} {% highlight xml %} @@ -96,9 +95,9 @@ namespace NavigationDrawerWPF {% endtabs %} -## Opened event +## Opened Event -This [Opened](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Opened) event gets triggered once the drawer menu is fully animated and opened. +The [Opened](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Opened) event is triggered once the drawer menu is fully animated and opened. {% tabs %} {% highlight xml %} @@ -179,11 +178,11 @@ namespace NavigationDrawerWPF {% endtabs %} -## Closing event +## Closing Event -This[Closing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Closing) event gets triggered when the drawer is about to close. +The [Closing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Closing) event is triggered when the drawer is about to close. -Closing of the drawer menu can be handled using the `Cancel` property. +The closing of the drawer menu can be controlled using the `Cancel` property. {% tabs %} {% highlight xml %} @@ -264,9 +263,9 @@ namespace NavigationDrawerWPF {% endtabs %} -## Closed event +## Closed Event -This [Closed](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Closed) event gets triggered once the drawer menu is Closed. +The [Closed](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Closed) event is triggered once the drawer menu is closed. {% tabs %} {% highlight xml %} @@ -347,10 +346,11 @@ namespace NavigationDrawerWPF {% endtabs %} +## ItemClicked Event -## ItemClicked event +The [ItemClicked](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemClicked) event is triggered when an item in the navigation menu is clicked. -The [ItemClicked](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemClicked) event gets triggered when the item in the navigation menu is clicked. +> **Note:** This event is triggered only when the display mode is either compact or expanded. N> This event will get triggered only when the display mode is either compact or expanded. @@ -443,11 +443,11 @@ N> This event will get triggered only when the display mode is either compact or {% endhighlight %} {% endtabs %} -## ItemCollapsed event +## ItemCollapsed Event -The [ItemCollapsed](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemCollapsed) event gets triggered when the sub items gets collapsed. +The [ItemCollapsed](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemCollapsed) event is triggered when sub-items are collapsed. -N> This event will get triggered only when the display mode is either compact or expanded. +> **Note:** This event is triggered only when the display mode is either compact or expanded. {% tabs %} {% highlight xaml %} @@ -592,9 +592,9 @@ N> This event will get triggered only when the display mode is either compact or {% endhighlight %} {% endtabs %} -## ItemExpanded event +## ItemExpanded Event -The [ItemExpanded](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemExpanded) event gets triggered when the sub items gets expanded. +The [ItemExpanded](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemExpanded) event is triggered when sub-items are expanded. N> This event will get triggered only when the display mode is either compact or expanded. diff --git a/wpf/Navigation-Drawer/Custom-views.md b/wpf/Navigation-Drawer/Custom-views.md index 3df72dafdc..eb250d0ab3 100644 --- a/wpf/Navigation-Drawer/Custom-views.md +++ b/wpf/Navigation-Drawer/Custom-views.md @@ -1,26 +1,21 @@ --- layout: post -title: Custom views in WPF Navigation Drawer control | Syncfusion® -description: Learn here all about Custom views support in Syncfusion® WPF Navigation Drawer (SfNavigationDrawer) control and more. -platform: wpf +title: Custom Views in WPF Navigation Drawer Control | Syncfusion® +description: Learn about custom view support in the Syncfusion® WPF Navigation Drawer (SfNavigationDrawer) control. +platform: WPF control: NavigationDrawer documentation: ug --- -# Custom views in WPF Navigation Drawer (SfNavigationDrawer) +# Custom Views in WPF Navigation Drawer (SfNavigationDrawer) -## Populating the with custom views +## Populating with Custom Views -The WPF Navigation Drawer sidebar can be populated with custom views by setting the [DisplayMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DisplayMode) as [Default](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.DisplayMode.html). In this mode the sidebar can be customized as three parts. - -Basically the sidebar will be in hidden state and can be displayed by swipe gestures. - - * DrawerHeaderView - A custom view can be provided to be displayed as a header part of the navigation menu. This can be set to the [DrawerHeaderView]() property. - - * DrawerContentView - A custom view can be provided to be displayed in the body of the navigation menu. This can be set to the [DrawerContentView]() property. - - * DrawerFooterView - A custom view can be provided to be displayed as a footer part of the navigation menu. This can be set to the [DrawerFooterView]() property. +The WPF Navigation Drawer sidebar can be populated with custom views by setting the [DisplayMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DisplayMode) to [Default](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.DisplayMode.html). In this mode, the sidebar can be customized into three parts: +* **DrawerHeaderView**: A custom view for the header of the navigation menu, set using the `DrawerHeaderView` property. +* **DrawerContentView**: A custom view for the body of the navigation menu, set using the `DrawerContentView` property. +* **DrawerFooterView**: A custom view for the footer of the navigation menu, set using the `DrawerFooterView` property. {% tabs %} {% highlight xml %} diff --git a/wpf/Navigation-Drawer/Different-display-modes.md b/wpf/Navigation-Drawer/Different-display-modes.md index d8228a8b49..69f787c027 100644 --- a/wpf/Navigation-Drawer/Different-display-modes.md +++ b/wpf/Navigation-Drawer/Different-display-modes.md @@ -1,23 +1,23 @@ --- layout: post -title: Different display modes in WPF Navigation Drawer control | Syncfusion® -description: Learn here all about Different display modes support in Syncfusion® WPF Navigation Drawer (SfNavigationDrawer) control and more. -platform: wpf +title: Different Display Modes in WPF Navigation Drawer Control | Syncfusion® +description: Learn about different display modes supported by the Syncfusion® WPF Navigation Drawer (SfNavigationDrawer) control. +platform: WPF control: NavigationDrawer documentation: ug --- -# Different display modes in WPF Navigation Drawer (SfNavigationDrawer) +# Different Display Modes in WPF Navigation Drawer (SfNavigationDrawer) -The WPF Navigation drawer provides default, compact and extended [display modes](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DisplayMode) to create navigation menu for an application. Compact and Extended display modes support to populate the navigation menu using built items with different types. +The WPF Navigation Drawer provides default, compact, and expanded [display modes](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DisplayMode) to create a navigation menu for applications. Compact and expanded display modes support the population of the navigation menu using built-in items with various types. -See also [different item types](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#different-item-types) topic in Navigation Drawer. +See also [different item types](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#different-item-types) in Navigation Drawer. -## Compact display mode +## Compact Display Mode -A navigation sidebar is shown as a narrow bar to the width set to the [CompactModeWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_CompactModeWidth) property. The navigation menu gets expanded on clicking the built-in toggle button and appears as an overlay above the main content to the width set to the [ExpandedModeWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ExpandedModeWidth) property. +The navigation sidebar is shown as a narrow bar with width set by the [CompactModeWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_CompactModeWidth) property. The navigation menu expands on clicking the built-in toggle button and appears as an overlay above the main content to the width set by the [ExpandedModeWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ExpandedModeWidth) property. -N> The navigation menu will get toggled back to compact width when any interaction performed on the main content area. +> **Note:** The navigation menu will toggle back to compact width when any interaction is performed on the main content area. {% tabs %} {% highlight xaml %} @@ -92,12 +92,11 @@ N> The navigation menu will get toggled back to compact width when any interacti ![WPF NavigationDrawer with Compact Mode](different-displaymode_images/wpf-navigation-drawer-compact.png) +## Expanded Display Mode -## Expanded display mode +The navigation sidebar stays open to the left or right of the window, based on the [Position](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Position) property, and pushes the main content alongside. The width of the drawer is defined by the [ExpandedModeWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ExpandedModeWidth) property. -The navigation sidebar stays open to the left or right of the window based on the [Position](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Position) property pushing the main content alongside. The [ExpandedModeWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ExpandedModeWidth) property defines the width of the drawer. - -When the drawer menu is toggled using the built-in toggle button, the drawer menu gets collapsed and shown as a narrow bar to the width set to the [CompactModeWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_CompactModeWidth) property. +When toggled using the built-in toggle button, the drawer menu collapses and displays as a narrow bar with width set by the [CompactModeWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_CompactModeWidth) property. {% tabs %} {% highlight xaml %} @@ -172,12 +171,11 @@ When the drawer menu is toggled using the built-in toggle button, the drawer men ![WPF NavigationDrawer with Expanded Mode](different-displaymode_images/wpf-navigation-drawer-expand.png) -## Auto display mode change - -The Navigation Drawer handles its display mode based on the values set to the [ExpandedModeThresholdWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ExpandedModeThresholdWidth) property. This can be enabled by setting the [AutoChangeDisplayMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_AutoChangeDisplayMode) property to `True`. +## Auto Display Mode Change -This switches the display mode to compact when the application window size is less than the [ExpandedModeThresholdWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ExpandedModeThresholdWidth) and switches to expanded mode when the application window size is larger. +The Navigation Drawer automatically changes its display mode according to the size of the application window. This behavior is controlled by setting the [AutoChangeDisplayMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_AutoChangeDisplayMode) property to `True`, and is based on the values set for the [ExpandedModeThresholdWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ExpandedModeThresholdWidth) property. +The display mode switches to compact when the application window size is less than `ExpandedModeThresholdWidth`, and switches to expanded mode when the window size exceeds this threshold. {% tabs %} {% highlight xaml %} @@ -255,14 +253,13 @@ This switches the display mode to compact when the application window size is le ![WPF NavigationDrawer with Auto Mode](different-displaymode_images/wpf-navigation-drawer-auto-mode.gif) -N> View [sample](https://github.com/SyncfusionExamples/wpf-sfnavigationdrawer-samples/tree/main/Display_Mode) in GitHub - +> **Note:** View [sample](https://github.com/SyncfusionExamples/wpf-sfnavigationdrawer-samples/tree/main/Display_Mode) in GitHub. -## Collapsible drawer mode +## Collapsible Drawer Mode -A collapsible drawer can be achieved using the Navigation Drawer by setting the display mode to [Default mode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.DisplayMode.html). In this display mode, the drawer menu is populated using [custom views](https://help.syncfusion.com/wpf/navigation-drawer/custom-views). +A collapsible drawer can be achieved by setting the display mode to [Default mode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.DisplayMode.html). In this display mode, the drawer menu is populated using [custom views](https://help.syncfusion.com/wpf/navigation-drawer/custom-views). -See also [Custom Views](https://help.syncfusion.com/wpf/navigation-drawer/custom-views) topic in Navigation Drawer. +See also the [Custom Views](https://help.syncfusion.com/wpf/navigation-drawer/custom-views) topic in Navigation Drawer. {% tabs %} {% highlight xml %} diff --git a/wpf/Navigation-Drawer/Getting-Started.md b/wpf/Navigation-Drawer/Getting-Started.md index d420d8c1c3..8a15a4fbbf 100644 --- a/wpf/Navigation-Drawer/Getting-Started.md +++ b/wpf/Navigation-Drawer/Getting-Started.md @@ -1,55 +1,54 @@ --- layout: post -title: Getting Started with WPF Navigation Drawer control | Syncfusion® -description: Learn here about getting started with Syncfusion® WPF Navigation Drawer (SfNavigationDrawer) control, its elements and more details. -platform: wpf +title: Getting Started with WPF Navigation Drawer Control | Syncfusion® +description: Learn how to get started with the Syncfusion® WPF Navigation Drawer (SfNavigationDrawer) control, including its elements and more details. +platform: WPF control: NavigationDrawer documentation: ug --- # Getting Started with WPF Navigation Drawer (SfNavigationDrawer) -This section helps you to build your application with SfNavigationDrawer. +This section will guide you through building your application with the SfNavigationDrawer. ## Assembly Deployment Refer to the [Control Dependencies](https://help.syncfusion.com/wpf/control-dependencies#sfnavigationdrawer) section to get the list of assemblies or NuGet package that needs to be added as a reference to use the control in any application. +Refer to the [Control Dependencies](https://help.syncfusion.com/wpf/control-dependencies#sfnavigationdrawer) section to get the list of assemblies or NuGet packages that need to be referenced to use the control in any application. -Refer to this documentation to find more details about installing nuget packages in a WPF application. +For more details on installing NuGet packages in a WPF application, refer to the linked documentation. +## Creating a Simple Application with SfNavigationDrawer -## Creating simple application with SfNavigationDrawer +- Creating the Project +- Adding SfNavigationDrawer from Toolbox +- Adding SfNavigationDrawer Control via XAML +- Adding Control Manually in C# +- Adding Content to the Control +- Adding Sidebar Menu Items -* Creating the project -* Adding SfNavigationDrawer from Toolbox -* Adding SfNavigationDrawer control from XAML -* Adding control manually in C# -* Adding content to the control -* Adding sidebar menu items +### Creating the Project -### Creating the project - -Create new WPF Project in Visual Studio to display SfNavigationDrawer with data objects. +Create a new WPF Project in Visual Studio to display SfNavigationDrawer with data objects. ### Adding SfNavigationDrawer from Toolbox -Drag and drop the SfNavigationDrawer control from the Toolbox to your application. +Drag and drop the SfNavigationDrawer control from the Toolbox into your application. -![WPF NavigationDrawer shows in Toolbox](getting-started_images/wpf-navigation-drawer-toolbox.png) +![WPF NavigationDrawer in Toolbox](getting-started_images/wpf-navigation-drawer-toolbox.png) -Now, the Syncfusion® Controls for UWP XAML reference is added to the application references and the xmlns namespace code is generated in MainWindow.xaml as below. +This action adds the Syncfusion® Controls for UWP XAML reference to the application and generates the xmlns namespace code in MainWindow.xaml as shown below. -![Displaying Reference of WPF NavigationDrawer](getting-started_images/wpf-navigation-drawer-reference.png) +![WPF NavigationDrawer Reference Display](getting-started_images/wpf-navigation-drawer-reference.png) ![WPF NavigationDrawer with Namespace](getting-started_images/wpf-navigation-drawer-namespace.png) -### Adding control manually in XAML - -In order to add control manually in XAML, do the below steps, +### Adding Control Manually in XAML -1. Add the below required assembly references to the project, - * Syncfusion.SfNavigationDrawer.WPF -2. Import Syncfusion® WPF schema **http://schemas.syncfusion.com/wpf** in XAML page. -3. Declare SfNavigationDrawer control in XAML page. +To manually add the control via XAML, perform the following steps: +1. Add the required assembly references to the project: + - Syncfusion.SfNavigationDrawer.WPF +2. Import the Syncfusion® WPF schema **http://schemas.syncfusion.com/wpf** into the XAML page. +3. Declare the SfNavigationDrawer control in the XAML page. {% capture codesnippet1 %} {% tabs %} @@ -70,14 +69,13 @@ In order to add control manually in XAML, do the below steps, {% endcapture %} {{ codesnippet1 | OrderList_Indent_Level_1 }} -### Adding control manually in C# - -In order to add control manually in C#, do the below steps, +### Adding Control Manually in C# -1. Add the below required assembly references to the project, - * Syncfusion.SfNavigationDrawer.WPF -2. Import SfTreeView namespace **Syncfusion.UI.Xaml.NavigationDrawer** . -3. Create SfNavigationDrawer control instance and add it to the Page. +To manually add the control via C#, perform the following steps: +1. Add the required assembly references to the project: + - Syncfusion.SfNavigationDrawer.WPF +2. Import the SfTreeView namespace **Syncfusion.UI.Xaml.NavigationDrawer**. +3. Create an SfNavigationDrawer control instance and add it to the Page. {% capture codesnippet2 %} {% tabs %} @@ -105,7 +103,7 @@ namespace NavigationDrawerWPF {% endcapture %} {{ codesnippet2 | OrderList_Indent_Level_1 }} -## Adding content to the control +## Adding Content to the Control {% tabs %} @@ -140,11 +138,11 @@ namespace NavigationDrawerWPF {% endtabs %} -## Adding sidebar menu items +## Adding Sidebar Menu Items -The sidebar menu can be populated using the built-in items. The items will be of type [NavigationItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.NavigationItem.html) having many properties for customization. +The sidebar menu can be populated using built-in items. The items will be of type [NavigationItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.NavigationItem.html), offering various properties for customization. -See also [Different display modes](https://help.syncfusion.com/wpf/navigation-drawer/different-display-modes) topic in SfNavigationDrawer. +For more information, see the [Different Display Modes](https://help.syncfusion.com/wpf/navigation-drawer/different-display-modes) topic in SfNavigationDrawer. {% tabs %} {% highlight xaml %} @@ -349,4 +347,4 @@ See also [Different display modes](https://help.syncfusion.com/wpf/navigation-dr ![WPF NavigationDrawer](getting-started_images/wpf-navigation-drawer.png) -N> View [sample](https://github.com/SyncfusionExamples/wpf-sfnavigationdrawer-samples/tree/main/Getting_Started) in GitHub +> **Note:** View [sample on GitHub](https://github.com/SyncfusionExamples/wpf-sfnavigationdrawer-samples/tree/main/Getting_Started). diff --git a/wpf/Navigation-Drawer/Handling-Selection.md b/wpf/Navigation-Drawer/Handling-Selection.md index 466d37ef9a..4951380532 100644 --- a/wpf/Navigation-Drawer/Handling-Selection.md +++ b/wpf/Navigation-Drawer/Handling-Selection.md @@ -1,19 +1,19 @@ --- layout: post -title: Handling Selection in WPF Navigation Drawer control | Syncfusion® -description: Learn here all about Handling Selection support in Syncfusion® WPF Navigation Drawer (SfNavigationDrawer) control and more. -platform: wpf +title: Handling Selection in WPF Navigation Drawer Control | Syncfusion® +description: Learn about handling selection support in the Syncfusion® WPF Navigation Drawer (SfNavigationDrawer) control. +platform: WPF control: NavigationDrawer documentation: ug --- # Handling Selection in WPF Navigation Drawer (SfNavigationDrawer) -This section explains the handling of selection in SfNavigationDrawer. +This section explains how to handle selection in the SfNavigationDrawer. -The [SelectedItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_SelectedItem) property is used for getting or setting the currently selected item of the Navigation Drawer. There are two cases in accessing the SelectedItem property. +The [SelectedItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_SelectedItem) property is used to get or set the currently selected item of the Navigation Drawer. There are two scenarios when accessing the `SelectedItem` property: -The first is when the Navigation Drawer is populated with NavigationItems, then the SelectedItem property is of type NavigationItem. +1. When the Navigation Drawer is populated with `NavigationItems`, the `SelectedItem` property is of type `NavigationItem`. {% tabs %} @@ -25,7 +25,7 @@ var selectedItem = this.navigationDrawer.SelectedItem as NavigationItem; {% endtabs %} -The other one is when the Navigation Drawer is bound to a collection of custom objects, the SelectedItem is of the type of the custom object. +2. When the Navigation Drawer is bound to a collection of custom objects, the `SelectedItem` is of the type of the custom object. {% tabs %} @@ -37,5 +37,4 @@ var selectedItem = this.navigationDrawer.SelectedItem as NavigationModel; {% endtabs %} - -N> View [sample](https://github.com/SyncfusionExamples/wpf-sfnavigationdrawer-samples/tree/main/Handling_Selection) in GitHub +> **Note:** View the [sample](https://github.com/SyncfusionExamples/wpf-sfnavigationdrawer-samples/tree/main/Handling_Selection) on GitHub. diff --git a/wpf/Navigation-Drawer/Header-and-Footer.md b/wpf/Navigation-Drawer/Header-and-Footer.md index 91829a7499..18ab7d4649 100644 --- a/wpf/Navigation-Drawer/Header-and-Footer.md +++ b/wpf/Navigation-Drawer/Header-and-Footer.md @@ -1,19 +1,19 @@ --- layout: post -title: Header and Footer in WPF Navigation Drawer control | Syncfusion® -description: Learn here all about Header and Footer support in Syncfusion® WPF Navigation Drawer (SfNavigationDrawer) control and more. -platform: wpf +title: Header and Footer in WPF Navigation Drawer Control | Syncfusion® +description: Learn about header and footer support in the Syncfusion® WPF Navigation Drawer (SfNavigationDrawer) control. +platform: WPF control: NavigationDrawer documentation: ug --- # Header and Footer in WPF Navigation Drawer (SfNavigationDrawer) -The Navigation menu's header and footer parts are fully customizable. This section explains the customization of header and footer. +The navigation menu's header and footer parts are fully customizable. This section explains how to customize the header and footer. -## Customizing the Toggle button and Header +## Customizing the Toggle Button and Header -The Navigation Drawer built-in toggle button and header can be customized using the [ToggleButtonContentTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ToggleButtonContentTemplate), [ToggleButtonIconTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ToggleButtonIconTemplate), [IsToggleButtonVisible](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_IsToggleButtonVisible) properties. +The Navigation Drawer’s built-in toggle button and header can be customized using the [ToggleButtonContentTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ToggleButtonContentTemplate), [ToggleButtonIconTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ToggleButtonIconTemplate), and [IsToggleButtonVisible](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_IsToggleButtonVisible) properties. {% tabs %} {% highlight xaml %} @@ -101,7 +101,7 @@ The Navigation Drawer built-in toggle button and header can be customized using ## Customizing the Footer -The Navigation Drawer's Footer can be customized using the [FooterItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_FooterItems) property. `FooterItems` can be loaded with NavigationItem collection. +The Navigation Drawer’s footer can be customized using the [FooterItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_FooterItems) property. `FooterItems` can be populated with a collection of `NavigationItem`. {% tabs %} {% highlight xaml %} @@ -198,12 +198,9 @@ The Navigation Drawer's Footer can be customized using the [FooterItems](https:/ ![Customizing Footer in WPF NavigationDrawer](Header_and_Footer_images/wpf-navigation-drawer-footer-customization.png) -## Creating a custom header and footer +## Creating a Custom Header and Footer -The header and footer part can also be customized by loading a custom view. This can be achieved in `Default` display mode. Using the [DrawerFooterView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DrawerHeaderView) and [DrawerFooterView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DrawerFooterView) properties, custom views can be loaded to the header and footer. - -See also [Custom views](https://help.syncfusion.com/wpf/navigation-drawer/custom-views) section for creating a custom navigation menu. - - -N> View [sample](https://github.com/SyncfusionExamples/wpf-sfnavigationdrawer-samples/tree/main/Header_and_Footer) in GitHub +The header and footer can also be customized by loading a custom view. This can be achieved in `Default` display mode using the [DrawerHeaderView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DrawerHeaderView) and [DrawerFooterView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DrawerFooterView) properties to load custom views into the header and footer. +For more information on creating a custom navigation menu, see [Custom Views](https://help.syncfusion.com/wpf/navigation-drawer/custom-views). +> **Note:** View the [sample](https://github.com/SyncfusionExamples/wpf-sfnavigationdrawer-samples/tree/main/Header_and_Footer) on GitHub. diff --git a/wpf/Navigation-Drawer/Keyboard-Support.md b/wpf/Navigation-Drawer/Keyboard-Support.md index 6a9ae13efe..4b5230e94a 100644 --- a/wpf/Navigation-Drawer/Keyboard-Support.md +++ b/wpf/Navigation-Drawer/Keyboard-Support.md @@ -1,21 +1,21 @@ --- layout: post -title: Keyboard Support in WPF Navigation Drawer control | Syncfusion® -description: Learn here all about Keyboard Support in Syncfusion® WPF Navigation Drawer (SfNavigationDrawer) control and more. -platform: wpf +title: Keyboard Support in WPF Navigation Drawer Control | Syncfusion® +description: Learn about keyboard support in the Syncfusion® WPF Navigation Drawer (SfNavigationDrawer) control. +platform: WPF control: NavigationDrawer documentation: ug --- -# Keyboard Support in WPF NavigationDrawer (SfNavigationDrawer) +# Keyboard Support in WPF Navigation Drawer (SfNavigationDrawer) -This section describes the keyboard support in SfNavigationDrawer. +This section describes the keyboard support available in the SfNavigationDrawer. -* **Tab** - This key can be used to navigate between the toggle button, navigation items and footer items and the main content view. -* **Up** - This key is used to Navigate to the previous NavigationItem. -* **Down** - This key is used to Navigate to the next NavigationItem. -* **Enter and Space** - This key is used to select the currently focused item. +- **Tab**: Use this key to navigate between the toggle button, navigation items, footer items, and the main content view. +- **Up Arrow**: This key is used to navigate to the previous `NavigationItem`. +- **Down Arrow**: This key is used to navigate to the next `NavigationItem`. +- **Enter** and **Space**: These keys are used to select the currently focused item. ![Keyboard Support in WPF NavigationDrawer](Keyboard_Support_image/Keyboard_Support.gif) -N> View [sample](https://github.com/SyncfusionExamples/wpf-sfnavigationdrawer-samples/tree/main/KeyboardSupportSample) in GitHub \ No newline at end of file +> **Note:** View the [sample](https://github.com/SyncfusionExamples/wpf-sfnavigationdrawer-samples/tree/main/KeyboardSupportSample) on GitHub. diff --git a/wpf/Navigation-Drawer/Overview.md b/wpf/Navigation-Drawer/Overview.md index 91ed0fc2dd..493132c249 100644 --- a/wpf/Navigation-Drawer/Overview.md +++ b/wpf/Navigation-Drawer/Overview.md @@ -1,47 +1,46 @@ --- layout: post -title: About WPF Navigation Drawer control | Syncfusion® -description: Learn here all about introduction of Syncfusion® WPF Navigation Drawer (SfNavigationDrawer) control, its elements and more details. -platform: wpf +title: Introduction to WPF Navigation Drawer Control | Syncfusion® +description: Learn about the introduction of the Syncfusion® WPF Navigation Drawer (SfNavigationDrawer) control, its elements, and more details. +platform: WPF control: NavigationDrawer documentation: ug --- # WPF Navigation Drawer (SfNavigationDrawer) Overview -The WPF Navigation Drawer control is a sidebar navigation view that is used to create a navigation menu for easy navigation. It provides compact and extended display modes with built-in navigation view items with ability to switch between both modes based on available size. It also provides default mode which allows to have a custom pane view. +The WPF Navigation Drawer control is a sidebar navigation view designed to create easy-to-use navigation menus. It offers compact and extended display modes with built-in navigation view items, allowing seamless switching between modes based on available space. Additionally, it provides a default mode that supports custom pane views. ![Overview of WPF NavigationDrawer](overview_images/wpf-navigation-drawer-overview.png) SfNavigationDrawer {:.caption} -### Use case scenarios +### Use Case Scenarios -The Navigation Drawers are used in applications where navigating to the major module or page is a basic requirement. The Navigation Drawer is available in the following apps that signify the importance of navigating through pages: +Navigation Drawers are essential in applications where navigating to major modules or pages is a primary requirement. The Navigation Drawer is a feature in the following apps, emphasizing the significance of efficient page navigation: 1. Facebook 2. Play Store -3. e-Commerce Apps +3. E-commerce Apps 4. Banking Apps -### Key features +### Key Features -* A sidebar menu to provide Modern UI navigation for application. -* Navigation menu can be placed on any side of the screen. -* Compact and extended display modes with support to best fit the content based on available size. -* Built-in navigation menu items: tab, button, header, multi-level hierarchal items and footer items. -* Custom views also can be added as the header and footer of the drawer. +* A sidebar menu provides a modern UI navigation experience for applications. +* The navigation menu can be positioned on any side of the screen. +* Compact and extended display modes adapt to fit content based on available space. +* Built-in navigation menu items include tabs, buttons, headers, multi-level hierarchical items, and footer items. +* Custom views can be added as the header and footer of the drawer. ### Visual Structure -This section describes the visual elements of the NavigationDrawer control and defines terms and concepts used in the DisplayMode. +This section describes the visual elements of the NavigationDrawer control and defines terms and concepts used in the different display modes. ![WPF NavigationDrawer Structure](overview_images/wpf-navigation-drawer-structure.png) - -* **Header** — Represents the header of the drawer -* **Footer** — Represents the footer of the drawer. -* **NavigationDrawer Items** — Built-in items used to populate the items in the drawer pane body and footer. -* **ToggleButton** — Built-in toggle button used to collapse and expand the drawer menu. \ No newline at end of file +* **Header**: Represents the header of the drawer. +* **Footer**: Represents the footer of the drawer. +* **NavigationDrawer Items**: Built-in items used to populate the drawer pane's body and footer. +* **ToggleButton**: A built-in toggle button used to collapse and expand the drawer menu. diff --git a/wpf/Navigation-Drawer/Populating-data.md b/wpf/Navigation-Drawer/Populating-data.md index 30e09e6778..27c10a16c9 100644 --- a/wpf/Navigation-Drawer/Populating-data.md +++ b/wpf/Navigation-Drawer/Populating-data.md @@ -1,36 +1,36 @@ --- layout: post -title: Populating data in WPF Navigation Drawer control | Syncfusion® -description: Learn here all about Populating data support in Syncfusion® WPF Navigation Drawer (SfNavigationDrawer) control and more. -platform: wpf +title: Populating Data in WPF Navigation Drawer Control | Syncfusion® +description: Learn about data population support in the Syncfusion® WPF Navigation Drawer (SfNavigationDrawer) control. +platform: WPF control: NavigationDrawer documentation: ug --- -# Populating data in WPF Navigation Drawer (SfNavigationDrawer) +# Populating Data in WPF Navigation Drawer (SfNavigationDrawer) -This section explains how to populate the drawer menu. +This section explains how to populate data in the drawer menu. -## Populating using built-in items +## Populating Using Built-in Items -The WPF Navigation Drawer sidebar provides a built-in items support of type [NavigationItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.NavigationItem.html) that can be populated using the [Items] property. +The WPF Navigation Drawer sidebar offers built-in item support of the type [NavigationItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.NavigationItem.html), which can be populated using the `Items` property. -The below properties are available in the `NavigationItem` and can be used to define each item of the navigation menu. +The following properties are available in the `NavigationItem` and can be used to define each item in the navigation menu: -* **Header** - Represents the content of the `NavigationItem.` -* **Icon** - Represents the icon in the `NavigationItem.` -* **IconTemplate** - Used to display the custom icon in the `NavigationItem.` Also see the [IconTemplate](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#icontemplate) section. -* **IconMemberPath** - Used to display the icon for sub-items, while providing the `ItemsSource.` -* **DisplayMemberPath** - Used to display the content for sub-items, while providing the `ItemsSource.` Also see the [Hierarchical Data Binding](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#hierarchical-data-binding) section. -* **ExpanderTemplate** - Used to provide a custom view for the expander icon in both collapsed and expanded state. -* **Command** — Executes when the item gets clicked. See also [Commands](https://help.syncfusion.com/wpf/navigation-drawer/commands-and-events) section. -* **CommandParameter** — [CommandParameter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.NavigationItem.html#Syncfusion_UI_Xaml_NavigationDrawer_NavigationItem_CommandParameter) is user defined data value that can be passed to the `Command` when it is executed. -* **IsChildSelected** — Gets whether any sub item is selected or not. -* **ItemType** — Defines the type of navigation item. See also [Different item types](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#different-item-types) section. -* **IsExpanded** — Gets whether the item is in expanded or collapsed state. -* **IsSelected** — Gets whether the item is selected or not. -* **SelectionBackground** — Used to customize the selection indicator in `NavigationItem`. -* **Items** - Used to populate the sub-items. +- **Header**: Represents the content of the `NavigationItem`. +- **Icon**: Represents the icon in the `NavigationItem`. +- **IconTemplate**: Used to display a custom icon in the `NavigationItem`. See the [IconTemplate](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#icontemplate) section for more details. +- **IconMemberPath**: Used to display the icon for sub-items when providing the `ItemsSource`. +- **DisplayMemberPath**: Used to display the content for sub-items when providing the `ItemsSource`. See the [Hierarchical Data Binding](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#hierarchical-data-binding) section for more details. +- **ExpanderTemplate**: Used to provide a custom view for the expander icon in both collapsed and expanded states. +- **Command**: Executes when the item is clicked. See the [Commands](https://help.syncfusion.com/wpf/navigation-drawer/commands-and-events) section for more details. +- **CommandParameter**: [CommandParameter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.NavigationItem.html#Syncfusion_UI_Xaml_NavigationDrawer_NavigationItem_CommandParameter) is a user-defined data value that can be passed to the `Command` when it is executed. +- **IsChildSelected**: Determines whether any sub-item is selected. +- **ItemType**: Defines the type of navigation item. See the [Different Item Types](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#different-item-types) section for more details. +- **IsExpanded**: Determines whether the item is expanded or collapsed. +- **IsSelected**: Determines whether the item is selected. +- **SelectionBackground**: Used to customize the selection indicator in `NavigationItem`. +- **Items**: Used to populate the sub-items. @@ -237,11 +237,11 @@ The below properties are available in the `NavigationItem` and can be used to de ![Populating with Data in WPF NavigationDrawer](populating_data_images/wpf-navigation-drawer-item.png) -N> View [sample](https://github.com/SyncfusionExamples/wpf-sfnavigationdrawer-samples/tree/main/Populating_With_Items) in GitHub +> **Note:** View the [sample on GitHub](https://github.com/SyncfusionExamples/wpf-sfnavigationdrawer-samples/tree/main/Populating_With_Items). ### IconTemplate -The IconTemplate is used to provide the custom icon for the NavigationItem. +The `IconTemplate` is used to provide a custom icon for the `NavigationItem`. ### Model @@ -374,27 +374,25 @@ The IconTemplate is used to provide the custom icon for the NavigationItem. ![WPF NavigationDrawer with Custom Icon](populating_data_images/wpf-navigation-drawer-custom-icon.png) +### Different Item Types -### Different item types +The WPF Navigation Drawer includes four built-in item types that can be set for each `NavigationItem`: -The WPF Navigation Drawer has four built-in item types that can be set to each `NavigationItem`. +- **Tab**: Interactable and supports selection. Supports multi-level population with expand and collapse icons. +- **Button**: Behaves similarly to button controls. Supports interactions but does not have selection. It supports multi-level populations with expand and collapse icons. +- **Header**: Functions as a header label. Not selectable and only visible when the drawer menu is expanded. +- **Separator**: Acts as a separator line. Cannot have sub-items or interactions. +See also the [Populating Using Built-in Items](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#populating-using-built-in-items) section. -* **Tab** — Interactions can be performed in this type and can have selection. This type supports multi-level population having an expand and collapse icon. -* **Button** — This type is similar to a button control behavior.Interactions can be performed and does not have selection. This type supports multi-level population having an expand and collapse icon. -* **Header** — This item type does not have any interaction or selection and acts like a header label. This item will gets visible only in drawer menu expanded state. This item can be added as a sub item also but cannot have a sub item. -* **Separator** — This item type does not have any interaction or selection and acts a separator line. This item can be added as a sub item also but cannot have a sub item. - -See also [Populating using built in items](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#populating-using-built-in-items) section. - -N> ItemType default value is Tab. +> **Note:** The default ItemType value is Tab. ## Data Binding -The drawer menu can be populated by [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemsSource) property. It can support, bound collection of objects through the `ItemsSource`. +The drawer menu can be populated via the [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemsSource) property. It supports collections of objects bound through `ItemsSource`. -[ItemTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemTemplate) property used to customize the content of the item, while using the ItemsSource and the icon of the item showing by used the [IconMemberPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_IconMemberPath) property. +The [ItemTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemTemplate) property customizes the item content when using `ItemsSource`, and the [IconMemberPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_IconMemberPath) property displays the icon of each item. -See also [Hierarchical Data Binding](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#hierarchical-data-binding) section. +See the [Hierarchical Data Binding](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#hierarchical-data-binding) section for more details. ### Model @@ -541,7 +539,7 @@ See also [Hierarchical Data Binding](https://help.syncfusion.com/wpf/navigation- ## Hierarchical Data Binding -The control populates the items using the [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemsSource), also it allows the sub items. +The control populates items using the [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemsSource), also it allows the sub items. When using the `ItemsSource` to show the content of the item achieved by [DisplayMemberPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DisplayMemberPath) property and [ItemsContainerStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemContainerStyle) property used to customize the items and allows to set the `ItemsSource` and `DisplayMemberPath` properties of the sub items. diff --git a/wpf/Radial-Menu/Appearance-and-Styling.md b/wpf/Radial-Menu/Appearance-and-Styling.md index c41279e306..a98373ad73 100644 --- a/wpf/Radial-Menu/Appearance-and-Styling.md +++ b/wpf/Radial-Menu/Appearance-and-Styling.md @@ -1,8 +1,8 @@ --- layout: post -title: Appearance and Styling in WPF Radial Menu control | Syncfusion® -description: Learn here all about Appearance and Styling support in Syncfusion® WPF Radial Menu (SfRadialMenu) control and more. -platform: wpf +title: Appearance and Styling in WPF Radial Menu Control | Syncfusion® +description: Learn about appearance and styling support in the Syncfusion® WPF Radial Menu (SfRadialMenu) control. +platform: WPF control: SfRadialMenu documentation: ug --- @@ -11,7 +11,7 @@ documentation: ug ## Radius -RadiusX and RadiusY properties in the Radial Menu can be used to define the X and Y axis radius to render the control. +The `RadiusX` and `RadiusY` properties in the Radial Menu define the X and Y axis radii to render the control. {%highlight xaml%} @@ -24,24 +24,19 @@ RadiusX and RadiusY properties in the Radial Menu can be used to define the X an ## CenterRimRadiusFactor -CenterRimRadiusFactor property can be used to define the radius of the center rim (inner circle). +The `CenterRimRadiusFactor` property defines the radius of the center rim (inner circle). {%highlight xaml%} + +{% endhighlight %} - - - -{%endhighlight%} - -![Appearance-and-Styling_img1](Appearance-and-Styling_images/Appearance-and-Styling_img1.png) - - +![Appearance-and-Styling](Appearance-and-Styling_images/Appearance-and-Styling_img1.png) ## RimBackground -RimBackground property used to fill the outer rim (outer circle). +The `RimBackground` property fills the outer rim (outer circle). {%highlight xaml%} @@ -52,17 +47,13 @@ RimBackground property used to fill the outer rim (outer circle). {%endhighlight%} -![Appearance-and-Styling_img2](Appearance-and-Styling_images/Appearance-and-Styling_img2.png) - - - -RadialMenu outer ring filled with color - +![Appearance-and-Styling](Appearance-and-Styling_images/Appearance-and-Styling_img2.png) +The outer ring of the Radial Menu filled with color. ## RimActiveBrush -RimActiveBrush property used to fill the expander rim and this expander rim only visible when the items have sub items. +The `RimActiveBrush` property fills the expander rim, which is visible only when the items have sub-items. {%highlight xaml%} @@ -99,31 +90,25 @@ RimActiveBrush property used to fill the expander rim and this expander rim only +{% endhighlight %} -{%endhighlight%} - -![Appearance-and-Styling_img7](Appearance-and-Styling_images/Appearance-and-Styling_img7.png) +![Appearance-and-Styling](Appearance-and-Styling_images/Appearance-and-Styling_img7.png) ## RimHoverBrush -The RimHoverBrush property can be used to fill the expander rim while the pointer is hovering over it. +The `RimHoverBrush` property fills the expander rim while the pointer hovers over it. {%highlight xaml%} + +{% endhighlight %} - - - -{%endhighlight%} - - - -![Appearance-and-Styling_img4](Appearance-and-Styling_images/Appearance-and-Styling_img4.png) +![Appearance-and-Styling](Appearance-and-Styling_images/Appearance-and-Styling_img4.png) ## IsExpanderVisible -Expander arrow in the OuterRim of `SfRadialMenu` visibility can be changed by `IsExpanderVisible` property of `SfRadialMenuItem`. By default, `IsExpanderVisible` value is True. +The visibility of the expander arrow in the OuterRim of `SfRadialMenu` can be changed by the `IsExpanderVisible` property of `SfRadialMenuItem`. By default, `IsExpanderVisible` is set to `True`. {%highlight xaml%} @@ -147,28 +132,23 @@ Expander arrow in the OuterRim of `SfRadialMenu` visibility can be changed by `I {%endhighlight%} -![Appearance-and-Styling_img8](Appearance-and-Styling_images/Appearance-and-Styling_img8.png) +![Appearance-and-Styling](Appearance-and-Styling_images/Appearance-and-Styling_img8.png) ## RimRadiusFactor -RimRadiusFactor property of Radial Menu can be used to set the radius of the items panel. Lowest values to this factor increases the thickness of the outer rim. Highest values to this factor decreases the thickness of the outer rim. +The `RimRadiusFactor` property of the Radial Menu sets the radius of the items panel. Lower values increase the thickness of the outer rim, whereas higher values decrease it. {%highlight xaml%} + +{% endhighlight %} - - - -{%endhighlight%} - -![Appearance-and-Styling_img5](Appearance-and-Styling_images/Appearance-and-Styling_img5.png) - - +![Appearance-and-Styling](Appearance-and-Styling_images/Appearance-and-Styling_img5.png) ## Navigation Button Style -The navigation button displayed in the center of radial menu can be styled using NavigationButtonStyle property. +The navigation button displayed in the center of the radial menu can be styled using the `NavigationButtonStyle` property. {%highlight xaml%} @@ -183,8 +163,7 @@ IsOpen="True" /> ## MenuBackgroundColor -Each `SfRadialMenuItem` can be set a different background color using `MenuBackgroundColor` property. - +The `MenuBackgroundColor` property allows each `SfRadialMenuItem` to have a different background color. {% tabs %} {% highlight XAML %} @@ -227,11 +206,12 @@ Each `SfRadialMenuItem` can be set a different background color using `MenuBackg {% endtabs %} -![menubackground](menu-item-customization-images/menubackground.png) +![Menu Background](menu-item-customization-images/menubackground.png) ## MenuMouseOverBackgroundColor -Each SfRadialMenuItem can be set with a different background color on mouse over by using the MenuMouseOverBackgroundColor property. Before that, the ShowMouseOverStyle property should be set to true. +The `MenuMouseOverBackgroundColor` property sets a different background color on mouse-over for each `SfRadialMenuItem`. Ensure the `ShowMouseOverStyle` property is set to `True`. +{% highlight xaml %} {%highlight xaml%} @@ -258,7 +238,4 @@ Each SfRadialMenuItem can be set with a different background color on mouse over {%endhighlight%} -![Appearance-and-Styling_img6](Appearance-and-Styling_images/Appearance-and-Styling_img6.png) - - - +![Appearance-and-Styling](Appearance-and-Styling_images/Appearance-and-Styling_img6.png) diff --git a/wpf/Radial-Menu/Getting-Started.md b/wpf/Radial-Menu/Getting-Started.md index f131e3dbed..f199e5435a 100644 --- a/wpf/Radial-Menu/Getting-Started.md +++ b/wpf/Radial-Menu/Getting-Started.md @@ -1,19 +1,19 @@ --- layout: post -title: Getting Started with WPF Radial Menu control | Syncfusion® -description: Learn here about getting started with Syncfusion® WPF Radial Menu (SfRadialMenu) control, its elements and more. -platform: wpf +title: Getting Started with WPF Radial Menu Control | Syncfusion® +description: Learn about getting started with the Syncfusion® WPF Radial Menu (SfRadialMenu) control, its elements, and more. +platform: WPF control: SfRadialMenu documentation: ug --- # Getting Started with WPF Radial Menu (SfRadialMenu) -Namespace : Syncfusion.Windows.Controls.Navigation +**Namespace:** Syncfusion.Windows.Controls.Navigation -Assembly : Syncfusion.SfRadialMenu.WPF (in Syncfusion.SfRadialMenu.WPF.dll) +**Assembly:** Syncfusion.SfRadialMenu.WPF (contained in Syncfusion.SfRadialMenu.WPF.dll) -The following code sample shows how to create the RadialMenu from code-behind and XAML. +The following code samples demonstrate how to create the RadialMenu in both code-behind and XAML. {%tabs%} {%highlight xaml%} @@ -70,10 +70,9 @@ radialMenu.Items.Add(paste); ## Theme -Radial Menu supports various built-in themes. Refer to the below links to apply themes for the Radial Menu, +The Radial Menu supports various built-in themes. Refer to the links below to apply themes for the Radial Menu: - * [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager) - - * [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme) +- [Apply a theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager) +- [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme) -![Setting theme in WPF Radial Menu](appearance-and-styling_images/wpf-radial-menu-setting-theme.png) +![Setting Theme in WPF Radial Menu](appearance-and-styling_images/wpf-radial-menu-setting-theme.png) diff --git a/wpf/Radial-Menu/Icon.md b/wpf/Radial-Menu/Icon.md index 44a15d8455..d055f4c3a1 100644 --- a/wpf/Radial-Menu/Icon.md +++ b/wpf/Radial-Menu/Icon.md @@ -1,15 +1,15 @@ --- layout: post -title: Icon in WPF Radial Menu control | Syncfusion® -description: Learn here all about Icon support in Syncfusion® WPF Radial Menu (SfRadialMenu) control, its elements and more. -platform: wpf +title: Icon in WPF Radial Menu Control | Syncfusion® +description: Learn about icon support in the Syncfusion® WPF Radial Menu (SfRadialMenu) control, its elements, and more. +platform: WPF control: SfRadialMenu documentation: ug --- # Icon in WPF Radial Menu (SfRadialMenu) -The Icon property of the RadialMenu is used to customize the icon displayed in the center of RadialMenu circle. +The `Icon` property of the Radial Menu is used to customize the icon displayed at the center of the Radial Menu circle. {%highlight xaml%} @@ -33,12 +33,6 @@ The Icon property of the RadialMenu is used to customize the icon displayed in t +{% endhighlight %} - -{%endhighlight%} - - - -![Concepts_img4](Concepts_images/Concepts_img4.png) - - +![Concepts](Concepts_images/Concepts_img4.png) diff --git a/wpf/Radial-Menu/Layout-Types.md b/wpf/Radial-Menu/Layout-Types.md index 637960d4fb..6a8c144924 100644 --- a/wpf/Radial-Menu/Layout-Types.md +++ b/wpf/Radial-Menu/Layout-Types.md @@ -1,31 +1,30 @@ --- layout: post -title: Layout Types in WPF Radial Menu control | Syncfusion® -description: Learn here all about Layout Types support in Syncfusion® WPF Radial Menu (SfRadialMenu) control and more. -platform: wpf +title: Layout Types in WPF Radial Menu Control | Syncfusion® +description: Learn about the layout types supported in the Syncfusion® WPF Radial Menu (SfRadialMenu) control. +platform: WPF control: SfRadialMenu documentation: ug --- # Layout Types in WPF Radial Menu (SfRadialMenu) -There are two different layout types available for SfRadialMenu. +The SfRadialMenu offers two different layout types: +- Default +- Custom -* Default -* Custom - - Both the layout types divide the available space equally among all the children in the circular panel. +Both layout types divide the available space equally among all the children in the circular panel. ### Default -Number of segments in the panel is determined by children count in the level. Hence segment count in each hierarchical level differs. RadialMenuItem is arranged in the sequential order as added in the RadialMenu. +In this layout, the number of segments in the panel is determined by the count of children at each level. Thus, the segment count differs at each hierarchical level. `RadialMenuItems` are arranged in the sequence they are added to the RadialMenu. ### Custom -Number of segments in the panel is determined by VisibleSegmentsCount property. Hence segment count in all the hierarchical levels are same. RadialMenuItem is arranged in any order based on the SegmentIndex property. +In this layout, the number of segments in the panel is determined by the `VisibleSegmentsCount` property, ensuring the segment count remains constant across all hierarchical levels. `RadialMenuItems` can be arranged in any order based on the `SegmentIndex` property. ### VisibleSegmentsCount -VisibleSegmentsCount property is used to specify the number of segments available in circular panel. When children count is greater than the value given in VisibleSegmentsCount property then overflowing children are not arranged in the panel. When children count is lesser than VisibleSegmentsCount property then remaining segments are left free. +The `VisibleSegmentsCount` property specifies the number of segments available in the circular panel. If the number of children exceeds `VisibleSegmentsCount`, the extra children are not displayed. If fewer children exist, the remaining segments are left empty. {%tabs%} {%highlight xaml%} @@ -45,7 +44,7 @@ radialMenu.LayoutType = LayoutType.Custom; ### SegmentIndex -SegmentIndex property is used to specify the index of the SfRadialMenuItem in circular panel. Based on the index, the RadialMenuItems are inserted in the segment. When SegmentIndex is not specified for a RadialMenuItem (or) two or more RadialMenuItems having the same SegmentIndex, then the menu item is arranged in the next available free segment. +The `SegmentIndex` property specifies the index of a `SfRadialMenuItem` within the circular panel. Based on this index, `RadialMenuItems` are inserted into segments. If `SegmentIndex` is not specified or multiple `RadialMenuItems` have the same `SegmentIndex`, the menu items are placed in the next available free segment. {%tabs%} {%highlight xaml%} @@ -81,3 +80,4 @@ radialMenu.Items.Add(item6); radialMenu.Items.Add(item3);  + diff --git a/wpf/Radial-Menu/Overview.md b/wpf/Radial-Menu/Overview.md index 9988f27d87..d6e8dcfb0f 100644 --- a/wpf/Radial-Menu/Overview.md +++ b/wpf/Radial-Menu/Overview.md @@ -1,21 +1,21 @@ --- layout: post -title: About WPF Radial Menu control | Syncfusion® -description: Learn here all about introduction of Syncfusion® WPF Radial Menu (SfRadialMenu) control, its elements and more. -platform: wpf +title: Introduction to WPF Radial Menu Control | Syncfusion® +description: Learn about the introduction to the Syncfusion® WPF Radial Menu (SfRadialMenu) control, its elements, and more. +platform: WPF control: SfRadialMenu documentation: ug --- # WPF Radial Menu (SfRadialMenu) Overview -The Radial Menu displays a hierarchical menu in a circular layout. Typically used as a context menu, it can expose more menu items in the same space than traditional menus. +The Radial Menu provides a hierarchical menu in a circular layout. Commonly used as a context menu, it can present more menu items within the same space compared to traditional menus. ### Key Features -* **Items Source** – Any business object collection can be bound to control. -* **Commanding** – Each item can be bound to a command that could perform an action. -* **Color Palette** – Easy to form radial color palette layout. +- **Items Source**: Bind to any business object collection. +- **Commanding**: Bind each item to a command to perform specific actions. +- **Color Palette**: Easily create a radial color palette layout. diff --git a/wpf/Radial-Menu/Populating-Color-Palette.md b/wpf/Radial-Menu/Populating-Color-Palette.md index 740c693f97..8968d5e19e 100644 --- a/wpf/Radial-Menu/Populating-Color-Palette.md +++ b/wpf/Radial-Menu/Populating-Color-Palette.md @@ -1,15 +1,15 @@ --- layout: post -title: Populating Color Palette in WPF Radial Menu control | Syncfusion® -description: Learn here all about Populating Color Palette support in Syncfusion® WPF Radial Menu (SfRadialMenu) control and more. -platform: wpf +title: Populating Color Palette in WPF Radial Menu Control | Syncfusion® +description: Learn about populating color palette support in the Syncfusion® WPF Radial Menu (SfRadialMenu) control. +platform: WPF control: SfRadialMenu documentation: ug --- # Populating Color Palette in WPF Radial Menu (SfRadialMenu) -Color Palette can be formed in Radial Menu with the Radial Color Items. +A color palette can be created in the Radial Menu using Radial Color Items. {%highlight xaml%} @@ -51,7 +51,4 @@ Color Palette can be formed in Radial Menu with the Radial Color Items. {%endhighlight%} - - -![Concepts_img5](Concepts_images/Concepts_img5.png) - +![Concepts](Concepts_images/Concepts_img5.png) diff --git a/wpf/Radial-Menu/Populating-Items.md b/wpf/Radial-Menu/Populating-Items.md index 638b96f3a1..689e922338 100644 --- a/wpf/Radial-Menu/Populating-Items.md +++ b/wpf/Radial-Menu/Populating-Items.md @@ -1,8 +1,8 @@ --- layout: post -title: Populating Items in WPF Radial Menu control | Syncfusion® -description: Learn here all about Populating Items support in Syncfusion® WPF Radial Menu (SfRadialMenu) control and more. -platform: wpf +title: Populating Items in WPF Radial Menu Control | Syncfusion® +description: Learn about populating items support in the Syncfusion® WPF Radial Menu (SfRadialMenu) control. +platform: WPF control: SfRadialMenu documentation: ug --- @@ -11,9 +11,9 @@ documentation: ug ## Items Source -Radial menu items can be populated with the business object collection. Let us create a RadialMenu which will show the list of Application commands. +Radial menu items can be populated from a collection of business objects. Let's create a RadialMenu that displays a list of application commands. -The Application command model look likes below. +The Application command model is defined as follows: @@ -41,7 +41,7 @@ The Application command model look likes below. {%endhighlight%} -Create the Application command collection as follows. +Create the Application command collection as follows: {%highlight c#%} @@ -96,21 +96,12 @@ Bind the Application command collection to the ItemsSource property of the Radia {%endhighlight%} -This will populate the RadialMenu as shown in the image below. - - - - - -![Concepts_img1](Concepts_images/Concepts_img1.png) - - - +This setup will populate the RadialMenu as shown in the image below. ## Display Member Path -DisplayMemberPath property of the Radial Menu used to define which business model property needs to be displayed inside the header of the Radial Menu items. +The `DisplayMemberPath` property of the Radial Menu specifies which property of the business model is displayed in the header of the Radial Menu items. {%highlight xaml%} @@ -135,7 +126,7 @@ Displaying member path ## Command Path -CommandPath property of the Radial Menu can be used to bind the command in the business object to the radial menu item when items are populated using data binding. +The `CommandPath` property of the Radial Menu binds the command in the business object to the radial menu item when items are populated using data binding. {%highlight xaml%} @@ -152,7 +143,7 @@ CommandPath property of the Radial Menu can be used to bind the command in the b ## Item Template -ItemTemplate property of the RadialMenu can be used to customize the header part of the radial menu items. +The `ItemTemplate` property of the RadialMenu customizes the header part of the radial menu items. {%highlight xaml%} @@ -182,7 +173,4 @@ ItemTemplate property of the RadialMenu can be used to customize the header part {%endhighlight%} -![Concepts_img3](Concepts_images/Concepts_img3.png) - - - +![Item Template Customization](Concepts_images/Concepts_img3.png) diff --git a/wpf/Radial-Menu/ToolTip.md b/wpf/Radial-Menu/ToolTip.md index f36501e15a..0ea9b8a3b1 100644 --- a/wpf/Radial-Menu/ToolTip.md +++ b/wpf/Radial-Menu/ToolTip.md @@ -1,35 +1,30 @@ --- layout: post -title: ToolTip in WPF Radial Menu control | Syncfusion® -description: Learn here all about ToolTip support in Syncfusion® WPF Radial Menu (SfRadialMenu) control, its elements and more. -platform: wpf +title: ToolTip in WPF Radial Menu Control | Syncfusion® +description: Learn about tooltip support in the Syncfusion® WPF Radial Menu (SfRadialMenu) control, its elements, and more. +platform: WPF control: SfRadialMenu documentation: ug --- # ToolTip in WPF Radial Menu (SfRadialMenu) -Tooltip support available for the radial menu items. This will show when mouse over the corresponding item. +Tooltip support is available for radial menu items, appearing when hovering over the corresponding item. -ToolTip Placement +### ToolTip Placement -Position of the tooltip displayed relative to the Radial Menu can be customized using ToolTipPlacement property. This have the following options. +The position of the tooltip relative to the Radial Menu can be customized using the `ToolTipPlacement` property. The following options are available: -* None: Tooltip is hidden from the display. -* Left: Tooltip is displayed left of the Radial Menu. -* Top: Tooltip is displayed on top of the Radial Menu. -* Right: Tooltip is displayed right of the Radial Menu. -* Bottom: Tooltip is displayed at the bottom of the Radial Menu. +- **None**: Tooltip is hidden from the display. +- **Left**: Tooltip is displayed to the left of the Radial Menu. +- **Top**: Tooltip is displayed on top of the Radial Menu. +- **Right**: Tooltip is displayed to the right of the Radial Menu. +- **Bottom**: Tooltip is displayed at the bottom of the Radial Menu. {%highlight xaml%} + +{% endhighlight %} - - -{%endhighlight%} - -![Concepts_img6](Concepts_images/Concepts_img6.png) - - - +![ToolTip in Radial Menu](Concepts_images/Concepts_img6.png) diff --git a/wpf/Range-Slider/Customization.md b/wpf/Range-Slider/Customization.md index b7644b72c6..27ee6b8fee 100644 --- a/wpf/Range-Slider/Customization.md +++ b/wpf/Range-Slider/Customization.md @@ -1,19 +1,19 @@ --- layout: post -title: Styling and Appearance in WPF Range Slider control | Syncfusion® -description: Learn here all about Styling and Appearance support in Syncfusion® WPF Range Slider (SfRangeSlider) control and more. -platform: wpf +title: Styling and Appearance in WPF Range Slider Control | Syncfusion® +description: Learn about styling and appearance support in the Syncfusion® WPF Range Slider (SfRangeSlider) control. +platform: WPF control: SfRangeSlider documentation: ug --- # Styling and Appearance in WPF Range Slider (SfRangeSlider) -[SfRangeSlider](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html) makes it possible to change the appearance by providing certain properties. +[SfRangeSlider](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html) allows you to change its appearance using various properties. ## InactiveTrackStyle -Modify the appearance of the inactive track using the [InactiveTrackStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_InactiveTrackStyle) property. +Modify the appearance of the inactive track with the [InactiveTrackStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_InactiveTrackStyle) property. {% tabs %} @@ -69,7 +69,7 @@ Modify the appearance of the inactive track using the [InactiveTrackStyle](https ## ActiveTrackStyle -Modify the appearance of the active track by using the [ActiveTrackStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_ActiveTrackStyle) property. +Modify the appearance of the active track using the [ActiveTrackStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_ActiveTrackStyle) property. {% tabs %} @@ -142,7 +142,7 @@ Modify the appearance of the active track by using the [ActiveTrackStyle](https: ## ThumbStyle -Modify the appearance of the thumb by using the [ThumbStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_ThumbStyle) property. +Modify the appearance of the thumb using the [ThumbStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_ThumbStyle) property. {% tabs %} @@ -249,21 +249,21 @@ Modify the appearance of the thumb by using the [ThumbStyle](https://help.syncfu ## Tick Customization -Modify the appearance of the ticks by using the following properties: +Modify the appearance of the ticks using the following properties: -* TickStroke -* ActiveTickStroke -* TickLength -* TickStrokeThickness -* MinorTickStroke -* ActiveMinorTickStroke -* MinorTickLength -* MinorTickStrokeThickness +- `TickStroke` +- `ActiveTickStroke` +- `TickLength` +- `TickStrokeThickness` +- `MinorTickStroke` +- `ActiveMinorTickStroke` +- `MinorTickLength` +- `MinorTickStrokeThickness` ### TickStroke -Use the [TickStroke](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_TickStroke) property, to change the color of major ticks. +Use the [TickStroke](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_TickStroke) property to change the color of major ticks. {% tabs %} @@ -310,7 +310,7 @@ Use the [TickStroke](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Contr ### ActiveTickStroke -Use the [ActiveTickStroke](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_ActiveTickStroke) property, to change the active major ticks color. +Use the [ActiveTickStroke](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_ActiveTickStroke) property to change the color of active major ticks. {% tabs %} @@ -359,7 +359,7 @@ Use the [ActiveTickStroke](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows ### TickLength -Use the [TickLength](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_TickLength) property, to change the height of the major ticks. +Use the [TickLength](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_TickLength) property to adjust the height of the major ticks. {% tabs %} @@ -409,7 +409,7 @@ Use the [TickLength](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Contr ### TickStrokeThickness -Use the [TickStrokeThickness](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_TickStrokeThickness) property, to change the thickness of the major ticks. +Use the [TickStrokeThickness](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_TickStrokeThickness) property to adjust the thickness of the major ticks. {% tabs %} @@ -461,7 +461,7 @@ Use the [TickStrokeThickness](https://help.syncfusion.com/cr/wpf/Syncfusion.Wind ### MinorTickStroke -Use the [MinorTickStroke](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_MinorTickStroke) property, to change the minor ticks color. +Use the [MinorTickStroke](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_MinorTickStroke) property to change the color of minor ticks. {% tabs %} @@ -510,7 +510,7 @@ Use the [MinorTickStroke](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows. ### ActiveMinorTickStroke -Use the [ActiveMinorTickStroke](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_ActiveMinorTickStroke) property, to change the color of the active minor ticks. +Use the [ActiveMinorTickStroke](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_ActiveMinorTickStroke) property to change the color of the active minor ticks. {% tabs %} @@ -559,7 +559,7 @@ Use the [ActiveMinorTickStroke](https://help.syncfusion.com/cr/wpf/Syncfusion.Wi ### MinorTickLength -Use the [MinorTickLength](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_MinorTickLength) property, to change the height of the minor ticks. +Use the [MinorTickLength](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_MinorTickLength) property to change the height of the minor ticks. {% tabs %} diff --git a/wpf/Range-Slider/Direction-Reversed.md b/wpf/Range-Slider/Direction-Reversed.md index 101c393a4c..ff2e3212c7 100644 --- a/wpf/Range-Slider/Direction-Reversed.md +++ b/wpf/Range-Slider/Direction-Reversed.md @@ -1,15 +1,17 @@ --- layout: post -title: Direction Reversed in WPF Range Slider control | Syncfusion® -description: Learn here all about Direction Reversed support in Syncfusion® WPF Range Slider (SfRangeSlider) control and more. -platform: wpf +title: Direction Reversed in WPF Range Slider Control | Syncfusion® +description: Discover how to configure Direction Reversed in the Syncfusion® WPF Range Slider (SfRangeSlider) control. +platform: WPF control: SfRangeSlider documentation: ug --- # Direction Reversed in WPF Range Slider (SfRangeSlider) -The direction of increasing value can be changed using [IsDirectionReversed](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider~IsDirectionReversed.html) property. When this property is set to True, the direction of increasing value is towards left in the horizontal orientation and down in the vertical orientation. The default is false. +The direction of the increasing value can be altered using the [IsDirectionReversed](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider~IsDirectionReversed.html) property. When set to `true`, the direction of increasing value is towards the left in horizontal orientation and downwards in vertical orientation. By default, this property is set to `false`. + +## Code Examples {% tabs %} diff --git a/wpf/Range-Slider/Gestures.md b/wpf/Range-Slider/Gestures.md index 45443619b2..5fb703085d 100644 --- a/wpf/Range-Slider/Gestures.md +++ b/wpf/Range-Slider/Gestures.md @@ -1,41 +1,32 @@ --- layout: post -title: Gestures in WPF Range Slider control | Syncfusion® -description: Learn here all about Gestures support in Syncfusion® WPF Range Slider (SfRangeSlider) control and more. -platform: wpf +title: Gestures in WPF Range Slider Control | Syncfusion® +description: Learn about Gesture support in the Syncfusion® WPF Range Slider (SfRangeSlider) control and more. +platform: WPF control: SfRangeSlider documentation: ug --- # Gestures in WPF Range Slider (SfRangeSlider) -### Keyboard - -The focused Thumb moves a certain distance on every navigation key press. +## Keyboard Gestures +The focused thumb shifts a specified distance with each navigation key press. ### Left Key -Thumb moves left and updates the corresponding value. - +The thumb shifts left, updating its value accordingly. ### Right Key -Thumbs moves right and updates the corresponding value. - +The thumb shifts right, updating its value accordingly. ### Down Key -Thumb moves down and updates the corresponding value. - +The thumb shifts down, updating its value accordingly. ### Up Key -Thumb moves up and updates the corresponding value. - -N> When the SnapsTo property is set to Ticks then the Thumb snaps to next tick based on the navigation key pressed. - -### Mouse - -RangeSlider allows the mouse gesture to update the value of the SfRangeSlider either by dragging the thumb to a certain distance or by pressing the specified region in the track. - -N> When the thumb is released between two steps or when the pointer is pressed between two steps, then the value and thumb automatically snaps to nearest value. - +The thumb shifts up, updating its value accordingly. +> **Note**: When the `SnapsTo` property is set to `Ticks`, the thumb snaps to the next tick based on the navigation key pressed. +## Mouse Gestures +The RangeSlider supports mouse gestures, allowing the SfRangeSlider's value to be updated either by dragging the thumb or by clicking a specific region of the track. +> **Note**: When the thumb is released between two steps, or when the pointer is clicked between two steps, the value and thumb position automatically snap to the nearest value. diff --git a/wpf/Range-Slider/Getting-Started.md b/wpf/Range-Slider/Getting-Started.md index 9e14bf9106..e4d8b37175 100644 --- a/wpf/Range-Slider/Getting-Started.md +++ b/wpf/Range-Slider/Getting-Started.md @@ -1,17 +1,17 @@ --- layout: post -title: Getting Started with WPF Range Slider control | Syncfusion® -description: Learn here about getting started with Syncfusion® WPF Range Slider (SfRangeSlider) control, its elements and more. -platform: wpf +title: Getting Started with WPF Range Slider Control | Syncfusion® +description: Discover how to integrate and utilize the Syncfusion® WPF Range Slider (SfRangeSlider) control, including its components and features. +platform: WPF control: SfRangeSlider documentation: ug --- # Getting Started with WPF Range Slider (SfRangeSlider) -This section describes how to design a [SfRangeSlider](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider.html) control in a WPF application and overview of its basic functionalities. +This section provides a comprehensive guide on designing an [SfRangeSlider](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider.html) control in a WPF application and gives an overview of its basic functionalities. -## Assembly deployment +## Assembly Deployment Namespace:  Syncfusion.Windows.Controls.Input @@ -63,9 +63,9 @@ The steps to create a [SfRangeSlider](https://help.syncfusion.com/cr/wpf/Syncfus {% endtabs %} -### Adding a control manually in code +### Adding a Control Manually in Code -The following code sample shows how to create the [SfRangeSlider](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider.html) from code-behind. +The following code demonstrates how to create an [SfRangeSlider](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider.html) in code-behind. {% tabs %} @@ -89,10 +89,9 @@ SfRangeSlider rangeSlider = new SfRangeSlider() ## Theme -SfRangeSlider supports various built-in themes. Refer to the below links to apply themes for the SfRangeSlider, +The SfRangeSlider supports various built-in themes. Use the following resources to apply themes: - * [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager) - - * [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme) +- [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager) +- [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme) ![Setting theme in WPF Range Slider](getting-started_images/wpf-range-slider-theme.png) \ No newline at end of file diff --git a/wpf/Range-Slider/How-To.md b/wpf/Range-Slider/How-To.md index b6fd435273..e3655f53ca 100644 --- a/wpf/Range-Slider/How-To.md +++ b/wpf/Range-Slider/How-To.md @@ -1,19 +1,19 @@ --- layout: post -title: Events | SfRangeSlider | wpf | Syncfusion® -description: This section provides details about all events and their arguments in Syncfusion® WPF RangeSlider (SfRangeSlider). -platform: wpf +title: Events in SfRangeSlider for WPF | Syncfusion® +description: Learn about triggering events and handling their arguments in the Syncfusion® WPF RangeSlider (SfRangeSlider). +platform: WPF control: SfRangeSlider documentation: ug --- -# Events in WPF RangeSlider(SfRangeSlider) +# Events in WPF RangeSlider (SfRangeSlider) -## How to trigger LabelLoaded event? +## How to Trigger the `LabelLoaded` Event -The [LabelLoaded](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_LabelLoaded) event is triggered when the slider label is created. The argument contains the label content. +The [LabelLoaded](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_LabelLoaded) event is triggered when the slider label is created. The event arguments contain the label content as follows: -`Content` - Used to gets or sets the content of the label. +`Content` - Used to get or set the content of the label. {% tabs %} @@ -61,14 +61,14 @@ The [LabelLoaded](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls {% endtabs %} -## How to trigger RangeChangedEvent? +## How to Trigger the `RangeChanged` Event -The [RangeChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_RangeChanged) event is triggered when either `RangeStart` or `RangeEnd` values are changed. The argument contains the following information. +The [RangeChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_RangeChanged) event is triggered when either `RangeStart` or `RangeEnd` values change. The event arguments contain the following information: -`NewEndValue` – Gets or sets the new end value of range slider. -`NewStartValue` – Gets or sets the new start value of range slider. -`OldStartValue` – Gets or sets the old start value of range slider. -`OldEndValue` – Gets or set the old end value of range slider. +- `NewEndValue` – Gets or sets the new end value of the range slider. +- `NewStartValue` – Gets or sets the new start value of the range slider. +- `OldStartValue` – Gets or sets the old start value of the range slider. +- `OldEndValue` – Gets or sets the old end value of the range slider. {% tabs %} @@ -120,12 +120,12 @@ The [RangeChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Control {% endtabs %} -## How to trigger RangeStartChanged event? +## How to Trigger the `RangeStartChanged` Event -The [RangeStartChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_RangeStartChanged) event is triggered when `RangeStart` value is changed. The argument contains the following information. +The [RangeStartChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_RangeStartChanged) event is triggered when the `RangeStart` value changes. The event arguments contain the following information: -`OldStartValue` – Gets or sets the old start value of range slider. -`NewStartValue` – Gets or sets the new start value of range slider. +- `OldStartValue` – Gets or sets the old start value of the range slider. +- `NewStartValue` – Gets or sets the new start value of the range slider. {% tabs %} @@ -175,12 +175,12 @@ The [RangeStartChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Co {% endtabs %} -## How to trigger RangeEndChanged event? +## How to Trigger the `RangeEndChanged` Event -The [RangeEndChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_RangeEndChanged) event is triggered when `RangeEnd` value is changed. The argument contains the following information. +The [RangeEndChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_RangeEndChanged) event is triggered when the `RangeEnd` value changes. The event arguments contain the following information: -`OldEndValue` – Gets or sets the old end value of range slider. -`NewEndValue` – Gets or sets the new end value of range slider. +- `OldEndValue` – Gets or sets the old end value of the range slider. +- `NewEndValue` – Gets or sets the new end value of the range slider. {% tabs %} diff --git a/wpf/Range-Slider/Intermediate-Values.md b/wpf/Range-Slider/Intermediate-Values.md index 9729d1b2c7..c97e6d71c4 100644 --- a/wpf/Range-Slider/Intermediate-Values.md +++ b/wpf/Range-Slider/Intermediate-Values.md @@ -1,29 +1,25 @@ --- layout: post -title: Intermediate Values in WPF Range Slider control | Syncfusion® -description: Learn here all about Intermediate Values support in Syncfusion® WPF Range Slider (SfRangeSlider) control and more. -platform: wpf +title: Intermediate Values in WPF Range Slider Control | Syncfusion® +description: Explore how to manage intermediate values in the Syncfusion® WPF Range Slider (SfRangeSlider) control. +platform: WPF control: SfRangeSlider documentation: ug --- # Intermediate Values in WPF Range Slider (SfRangeSlider) -It is possible to get an intermediate value before either the tick value or the step value is snapped when interacting with SfRangeSlider. +The Syncfusion SfRangeSlider allows retrieval of intermediate values during interactions, before snapping to either the tick value or step value. +## IntermediateValue -### IntermediateValue +Retrieves the current intermediate value. This property is applicable when `ShowRange` is set to false. -Gets the intermediate value. This works when ShowRange is false. +## IntermediateRangeStart -### IntermediateRangeStart - -Gets the intermediate RangeStart value. - -### IntermediateRangeEnd - -Gets the intermediate RangeEnd value. - -N> Above properties are read only properties and cannot set through XAML or code behind. +Retrieves the current intermediate `RangeStart` value. +## IntermediateRangeEnd +Retrieves the current intermediate `RangeEnd` value. +> **Note**: The above properties are read-only and cannot be set through XAML or code-behind. diff --git a/wpf/Range-Slider/Label-Support.md b/wpf/Range-Slider/Label-Support.md index f358f7c10d..b47668a452 100644 --- a/wpf/Range-Slider/Label-Support.md +++ b/wpf/Range-Slider/Label-Support.md @@ -1,8 +1,8 @@ --- layout: post -title: Label Support in WPF Range Slider control | Syncfusion® -description: Learn here all about Label Support in Syncfusion® WPF Range Slider (SfRangeSlider) control, its elements and more. -platform: wpf +title: Label Support in WPF Range Slider Control | Syncfusion® +description: Explore comprehensive label support in the Syncfusion® WPF Range Slider (SfRangeSlider) including features and customization options. +platform: WPF control: SfRangeSlider documentation: ug --- @@ -46,10 +46,7 @@ LabelOrientation specifies the orientation of the labels as either horizontal or ## CustomLabels -CustomLabels is an observable collection of items that contains the Label and Value properties. Create an observable collection of items by specifying the custom labels for corresponding values as illustrated in the following code example. - -Create a ViewModel class with CustomCollection property. - +`CustomLabels` is an observable collection that includes `Label` and `Value` properties. The following example demonstrates how to define a ViewModel with a `CustomCollection` property to hold these values. {% tabs %} {% highlight c# %} @@ -75,8 +72,7 @@ Create a ViewModel class with CustomCollection property. {% endtabs %} -In the following code example, the CustomCollection property is bound to [CustomLabels](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider~CustomLabels.html) property in the SfRangeSlider control that populates the custom labels collection. - +This custom collection is then bound to the `CustomLabels` property of the SfRangeSlider. {% tabs %} {% highlight XAML %} @@ -118,13 +114,13 @@ In the following code example, the CustomCollection property is bound to [Custom {% endtabs %} -![Label-Support_img1](Label-Support_images/Label-Support_img1.png) +![Custom Labels in Action](Label-Support_images/Label-Support_img1.png) RangeSlider with CustomLabels ## ShowCustomLabels -The default value for [ShowCustomLabels](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider~ShowCustomLabels.html) is false. When set to true, it displays the custom labels with the corresponding Tool tip for specific values based on the [CustomLabels](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider~CustomLabels.html) collection. +By default, [ShowCustomLabels](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider~ShowCustomLabels.html) is `false`. When enabled, it displays custom labels based on the `CustomLabels` collection. {% tabs %} @@ -173,7 +169,7 @@ RangeSlider with ShowCustomLabels ## LabelPlacement -[LabelPlacement](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider~LabelPlacement.html) property describes the position of the custom labels for particular values mentioned in the CustomLabels collection. Available options for this property are: +The [LabelPlacement](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider~LabelPlacement.html) property sets the position of custom labels. Options include: 1. BottomRight 2. TopLeft @@ -221,7 +217,7 @@ The following code example illustrates the usage of the LabelPlacement property. {% endtabs %} -![Label-Support_img3](Label-Support_images/Label-Support_img3.png) +![Custom Label Placement](Label-Support_images/Label-Support_img3.png) LabelPlacement in BottomRight @@ -272,7 +268,7 @@ LabelPlacement in TopLeft ## ShowValueLabels -The default value of the [ShowValueLabels](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider~ShowValueLabels.html) property is false. When set to true, it displays the label for all the ticks based on the ValuePlacement property. +[ShowValueLabels](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider~ShowValueLabels.html) is `false` by default. When `true`, it shows labels for all ticks as defined by the `ValuePlacement` property. {% tabs %} @@ -316,7 +312,7 @@ ShowValueLabels property ## ValuePlacement -The [ValuePlacement](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider~ValuePlacement.html) property describes the position of the labels for all the ticks. Available options for this property are: +The [ValuePlacement](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider~ValuePlacement.html) property manages label positioning for ticks. Options are `TopLeft` or `BottomRight`. 1. BottomRight 2. TopLeft @@ -409,7 +405,7 @@ ValuePlacement in BottomRight ## LabelOrientation -The [LabelOrientation](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider~LabelOrientation.html) property describes the orientation of the labels for both ticks and custom labels. Available options for this property are: +[LabelOrientation](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider~LabelOrientation.html) determines whether labels are horizontal or vertical: 1. Horizontal 2. Vertical @@ -456,7 +452,7 @@ The following code example illustrates the usage of [LabelOrientation](https://h {% endtabs %} -![Label-Support_img8](Label-Support_images/Label-Support_img8.png) +![Horizontal Label Orientation](Label-Support_images/Label-Support_img8.png) LabelOrientation as Horizontal @@ -500,7 +496,4 @@ LabelOrientation as Horizontal {% endtabs %} -![Label-Support_img9](Label-Support_images/Label-Support_img9.png) - -LabelOrientation as Vertical - +![Vertical Label Orientation](Label-Support_images/Label-Support_img9.png) diff --git a/wpf/Range-Slider/Minimum-and-maximum.md b/wpf/Range-Slider/Minimum-and-maximum.md index 260c232d5b..d1d30bf863 100644 --- a/wpf/Range-Slider/Minimum-and-maximum.md +++ b/wpf/Range-Slider/Minimum-and-maximum.md @@ -1,16 +1,19 @@ --- layout: post -title: Minimum and Maximum in WPF Range Slider control | Syncfusion® -description: Learn here all about Minimum and Maximum support in Syncfusion® WPF Range Slider (SfRangeSlider) control and more. -platform: wpf +title: Minimum and Maximum Settings in WPF Range Slider Control | Syncfusion® +description: Discover how to configure minimum and maximum values in the Syncfusion® WPF Range Slider (SfRangeSlider) control. +platform: WPF control: SfRangeSlider documentation: ug --- -# Minimum and Maximum in WPF Range Slider (SfRangeSlider) +# Minimum and Maximum Settings in WPF Range Slider (SfRangeSlider) -Gets or sets the minimum and maximum possible value of the range. +The `Minimum` and `Maximum` properties in the SfRangeSlider control allow you to define the upper and lower bounds of the range slider. +## Defining Minimum and Maximum Properties + +Here is how you can set up these properties using XAML and C#: {% tabs %} {% highlight XAML %} diff --git a/wpf/Range-Slider/Orientation.md b/wpf/Range-Slider/Orientation.md index de272546f4..4138674e26 100644 --- a/wpf/Range-Slider/Orientation.md +++ b/wpf/Range-Slider/Orientation.md @@ -1,15 +1,15 @@ --- layout: post -title: Orientation in WPF Range Slider control | Syncfusion® -description: Learn here all about Orientation support in Syncfusion® WPF Range Slider (SfRangeSlider) control and more. -platform: wpf +title: Orientation Settings in WPF Range Slider Control | Syncfusion® +description: Discover how to configure orientation settings for the Syncfusion® WPF Range Slider (SfRangeSlider) control. +platform: WPF control: SfRangeSlider documentation: ug --- -# Orientation in WPF Range Slider (SfRangeSlider) +# Orientation Settings in WPF Range Slider (SfRangeSlider) -The [Orientation](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider~Orientation.html) property has the following two options. +The [Orientation](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider~Orientation.html) property of the SfRangeSlider allows you to specify its alignment either horizontally or vertically. The default setting is Horizontal. 1. Horizontal 2. Vertical @@ -48,7 +48,7 @@ The default option is Horizontal. {% endtabs %} -![Horizontal](Orientation_images/Orientation_img1.png) +![Horizontal Orientation](Orientation_images/Orientation_img1.png) The following code sample illustrates how to set vertical orientation to [SfRangeSlider](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider.html). @@ -87,7 +87,4 @@ The following code sample illustrates how to set vertical orientation to [SfRang {% endtabs %} -![Vertical](Orientation_images/Orientation_img2.png) - - - +![Vertical Orientation](Orientation_images/Orientation_img2.png) diff --git a/wpf/Range-Slider/Overview.md b/wpf/Range-Slider/Overview.md index d610253969..358a14c47c 100644 --- a/wpf/Range-Slider/Overview.md +++ b/wpf/Range-Slider/Overview.md @@ -1,26 +1,26 @@ --- layout: post -title: About WPF Range Slider control | Syncfusion® -description: Learn here all about introduction of Syncfusion® WPF Range Slider (SfRangeSlider) control, its elements and more. -platform: wpf +title: Introduction to WPF Range Slider Control | Syncfusion® +description: Explore the features and capabilities of the Syncfusion® WPF Range Slider (SfRangeSlider) control, including customization and interactions. +platform: WPF control: SfRangeSlider documentation: ug --- # WPF Range Slider (SfRangeSlider) Overview -[SfRangeSlider](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html) control allows the value range to be selected within the defined minimum and maximum limit. The range can be selected by moving the Thumb control along a track. In terms of appearance, this control is highly customizable and offers many options such as orientation, selection range, custom label support, touch support, snap to tick, tick placement, tooltip support etc. +The [SfRangeSlider](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html) control enables the selection of a value range within specified minimum and maximum limits. Users can select the range by moving the thumb controls along a track. This control is highly customizable, offering options such as orientation, selection range, custom label support, touch interaction, snap-to-tick functionality, tick placement, and tooltip support. -![Overview in WPF Range Slider](overview_images/wpf-range-slider-overview.png) +![Overview of WPF Range Slider](overview_images/wpf-range-slider-overview.png) -Key Features: +## Key Features -* **Orientation** — Set the orientation of the RangeSlider either horizontally or vertically. -* **SelectionRange** — Select the range of values using two thumbs. -* **Move the Thumb to the Tapped Position** — Allow the thumb of RangeSlider to tapped position of the track. -* **Styling and Appearance** — The control is completely customizable in terms of the UI. Change the appearance of the control as required. -* **ToolTip Support** — Shows the value of the RangeSlider. It is fully customizable. -* **Gestures** — Provides both KeyGesture and MouseGesture. +- **Orientation**: Configure the RangeSlider orientation to be either horizontal or vertical. +- **Selection Range**: Define a range of values using two thumbs for precise selection. +- **Thumb Positioning**: Allow the RangeSlider thumb to move to the tapped track position. +- **Styling and Appearance**: Customize the UI and appearance of the control to fit application requirements. +- **ToolTip Support**: Display the RangeSlider value with customizable tooltips. +- **Gestures**: Support for both KeyGesture and MouseGesture inputs. diff --git a/wpf/Range-Slider/Range.md b/wpf/Range-Slider/Range.md index 808f87afca..90c44a7ced 100644 --- a/wpf/Range-Slider/Range.md +++ b/wpf/Range-Slider/Range.md @@ -1,20 +1,19 @@ --- layout: post -title: Range in WPF Range Slider control | Syncfusion® -description: Learn here all about Range support in Syncfusion® WPF Range Slider (SfRangeSlider) control, its elements and more. -platform: wpf +title: Range Management in WPF Range Slider Control | Syncfusion® +description: Discover how to manage ranges in the Syncfusion® WPF Range Slider (SfRangeSlider) control, including configuration and draggable range features. +platform: WPF control: SfRangeSlider documentation: ug --- -# Range in WPF Range Slider (SfRangeSlider) +# Range Management in WPF Range Slider (SfRangeSlider) -The [SfRangeSlider](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider.html) control provides support to select the range of value using two thumbs. +The [SfRangeSlider](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider.html) control supports selecting a range of values using two thumbs for precision. ## ShowRange -When ShowRange property is set to true, two thumbs are placed in the track. One thumb is used to update the start of the range selection and another thumb is used to update the end of the range selection. - +When the `ShowRange` property is set to `true`, the SfRangeSlider displays two thumbs on the track, allowing users to define both the start and end of the range. {% tabs %} {% highlight XAML %} @@ -51,7 +50,7 @@ When ShowRange property is set to true, two thumbs are placed in the track. One ![ShowRange](Range_images/Range_img1.png) -N> When the `ShowRange` property is set to true, both ToolTip will display RangeStart and RangeEnd. +> **Note**: When `ShowRange` is enabled, tooltips will display both `RangeStart` and `RangeEnd`. ## RangeStart @@ -135,7 +134,7 @@ Gets or sets the end value of the range end. ## Drag Selected Range -The `AllowRangeDrag` API allows the range in the Range Slider to be adjusted and the range to be dragged without changing the start and end ranges individually. The default value of `AllowRangeDrag` is false. +The `AllowRangeDrag` property enables dragging the range as a whole, without changing the start and end values individually. Its default value is `false`. {% tabs %} diff --git a/wpf/Range-Slider/Thumb-ToolTip.md b/wpf/Range-Slider/Thumb-ToolTip.md index 3d51a375bf..1faeb7b54d 100644 --- a/wpf/Range-Slider/Thumb-ToolTip.md +++ b/wpf/Range-Slider/Thumb-ToolTip.md @@ -1,21 +1,21 @@ --- layout: post -title: Thumb ToolTip in WPF Range Slider control | Syncfusion® -description: Learn here all about Thumb ToolTip support in Syncfusion® WPF Range Slider (SfRangeSlider) control and more. -platform: wpf +title: Thumb ToolTip in WPF Range Slider Control | Syncfusion® +description: Explore the Thumb ToolTip configurations in the Syncfusion® WPF Range Slider (SfRangeSlider) control, including precision, format, and positioning. +platform: WPF control: SfRangeSlider documentation: ug --- # Thumb ToolTip in WPF Range Slider (SfRangeSlider) -The Thumb tooltip displays the current value where the Thumb stands. +The Thumb tooltip in the SfRangeSlider displays the current value at the thumb's position on the slider. ![ToolTip](Thumb-ToolTip_images/Thumb-ToolTip_img1.png) ## Thumb ToolTip Precision -[ThumbToolTipPrecision](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider~ThumbToolTipPrecision.html) property is used to define the precision of the value displayed in the tooltip. +The [`ThumbToolTipPrecision`](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider~ThumbToolTipPrecision.html) property defines the precision of the value shown in the tooltip. {% tabs %} @@ -36,13 +36,11 @@ The Thumb tooltip displays the current value where the Thumb stands. ![Precision](Thumb-ToolTip_images/Thumb-ToolTip_img2.png) -N> ThumbToolTipPrecision property is only applicable, if ToolTipFormat value is N. +> **Note**: `ThumbToolTipPrecision` is applicable only if `ToolTipFormat` value is set to "N". +## Thumb ToolTip Format -## Thumb ToolTipFormat - -The [ToolTipFormat](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_ToolTipFormat) property, specifies the format specifier by which to format the ToolTip display value. - +The [`ToolTipFormat`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRangeSlider.html#Syncfusion_Windows_Controls_Input_SfRangeSlider_ToolTipFormat) property specifies the format specifier for the tooltip display value. {% tabs %} @@ -78,21 +76,18 @@ The [ToolTipFormat](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Contro ![Format](Thumb-ToolTip_images/ToolTip-Format.png) - -N> Default value of `ToolTipFormat` is N. - +> **Note**: The default value of `ToolTipFormat` is "N". ## Thumb ToolTip Position -The position of the Thumb tooltip in relation to the Thumb can be controlled by the [ThumbToolTipPlacement](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider~ThumbToolTipPlacement.html) property. It has the following options. - +The [`ThumbToolTipPlacement`](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider~ThumbToolTipPlacement.html) property controls the tooltip's position relative to the thumb, offering three options: 1. BottomRight 2. TopLeft 3. None ### BottomRight -Tooltip is placed either below the Thumb in horizontal orientation or right of the Thumb in vertical orientation. +Places the tooltip below the thumb in horizontal orientation and to the right in vertical orientation. {% tabs %} @@ -128,12 +123,11 @@ Tooltip is placed either below the Thumb in horizontal orientation or right of t ![BottomRight](Thumb-ToolTip_images/Thumb-ToolTip_img4.png) - -N> This option displays the tooltip to right in vertical orientation. +> **Note**: Displays tooltip to the right in vertical orientation. ### TopLeft -Tooltip is placed either above the Thumb in horizontal orientation or left of the Thumb in vertical orientation. +Places the tooltip above the thumb in horizontal orientation and to the left in vertical orientation. {% tabs %} @@ -169,12 +163,11 @@ Tooltip is placed either above the Thumb in horizontal orientation or left of th ![TopLeft](Thumb-ToolTip_images/Thumb-ToolTip_img3.png) -N> This option displays the tooltip to left in vertical orientation. +> **Note**: Displays tooltip to the left in vertical orientation. ### None -No Tooltip appears. - +Disables the tooltip display. {% tabs %} {% highlight XAML %} @@ -209,9 +202,9 @@ No Tooltip appears. ![None](Thumb-ToolTip_images/Thumb-ToolTip_img5.png) -## ThumbInterval +## Thumb Interval -[ThumbInterval](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider~ThumbInterval.html) is an interval between the two thumbs, the thumbs cannot be moved within this range. +The [`ThumbInterval`](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider~ThumbInterval.html) property defines the interval between two thumbs, preventing movement within this range. {% tabs %} diff --git a/wpf/Range-Slider/Ticks.md b/wpf/Range-Slider/Ticks.md index 6bf72bfeb8..c8f47eda8f 100644 --- a/wpf/Range-Slider/Ticks.md +++ b/wpf/Range-Slider/Ticks.md @@ -1,19 +1,18 @@ --- layout: post -title: Ticks in WPF Range Slider control | Syncfusion® -description: Learn here all about Ticks support in Syncfusion® WPF Range Slider (SfRangeSlider) control, its elements and more. -platform: wpf +title: Configuring Ticks in WPF Range Slider Control | Syncfusion® +description: Discover how to configure ticks in the Syncfusion® WPF Range Slider (SfRangeSlider) control, including frequency, placement, and customization options. +platform: WPF control: SfRangeSlider documentation: ug --- -# Ticks in WPF Range Slider (SfRangeSlider) - -RangeSlider makes it possible to place tick marks along the track in a uniform manner and also to customize the position of the tick marks. +# Configuring Ticks in WPF Range Slider (SfRangeSlider) +The SfRangeSlider enables the placement of tick marks along the track, allowing for uniform distribution and customization of tick positioning. ## Tick Frequency -The [TickFrequency](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider~TickFrequency.html) property is used to define the number of ticks along the track, based on Minimum and Maximum values. +The [`TickFrequency`](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider~TickFrequency.html) property defines how many ticks appear along the track, based on defined minimum and maximum values. {% tabs %} @@ -49,11 +48,11 @@ The [TickFrequency](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Sy ![TickFrequency](Ticks_images/Ticks_img1.png) -N> When the SnapsTo property is set to Ticks, the TickFrequency is used to specify the interval between snap points. +> **Note**: When `SnapsTo` is set to `Ticks`, `TickFrequency` determines the interval between snap points. -## MinorTickFrequency +## Minor Tick Frequency -The `MinorTickFrequency` property, determines the number of minor ticks on the track between the major ticks. +The `MinorTickFrequency` property sets the number of minor ticks between each major tick on the track. {% tabs %} diff --git a/wpf/Range-Slider/Touch-Support.md b/wpf/Range-Slider/Touch-Support.md index f03ca96821..5ea2ef1266 100644 --- a/wpf/Range-Slider/Touch-Support.md +++ b/wpf/Range-Slider/Touch-Support.md @@ -1,20 +1,20 @@ --- layout: post -title: Touch Support in WPF Range Slider control | Syncfusion® -description: Learn here all about Touch Support in Syncfusion® WPF Range Slider (SfRangeSlider) control, its elements and more. -platform: wpf +title: Touch Support in WPF Range Slider Control | Syncfusion® +description: Explore how to implement touch support in the Syncfusion® WPF Range Slider (SfRangeSlider) control using the MoveToPoint API for flexible thumb movement. +platform: WPF control: SfRangeSlider documentation: ug --- # Touch Support in WPF Range Slider (SfRangeSlider) -[MoveToPoint](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider~MoveToPoint.html) API allows the [SfRangeSlider](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider.html) to move the thumb by tapping or clicking the track of the [SfRangeSlider](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider.html). This property provides the following options: +The [`MoveToPoint`](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider~MoveToPoint.html) API enables the [SfRangeSlider](https://help.syncfusion.com/cr/wpf/Syncfusion.SfInput.Wpf~Syncfusion.Windows.Controls.Input.SfRangeSlider.html) to reposition the thumb by tapping or clicking on the track. Available options include: -* MoveToTapPosition -* IncrementBySmallChange -* IncrementByLargeChange -* None +- MoveToTapPosition +- IncrementBySmallChange +- IncrementByLargeChange +- None ### MoveToTapPosition diff --git a/wpf/Range-Slider/Visual-Structure.md b/wpf/Range-Slider/Visual-Structure.md index 8e4f2b5255..56920868fc 100644 --- a/wpf/Range-Slider/Visual-Structure.md +++ b/wpf/Range-Slider/Visual-Structure.md @@ -1,26 +1,25 @@ --- layout: post -title: Visual Structure in WPF Range Slider control | Syncfusion® -description: Learn here all about Visual Structure support in Syncfusion® WPF Range Slider (SfRangeSlider) control and more. -platform: wpf +title: Visual Structure of WPF Range Slider Control | Syncfusion® +description: Discover the visual structure and components of the Syncfusion® WPF Range Slider (SfRangeSlider) control. +platform: WPF control: SfRangeSlider documentation: ug --- -# Visual Structure in WPF Range Slider (SfRangeSlider) +# Visual Structure of WPF Range Slider (SfRangeSlider) -This section describes the visual elements of the RangeSlider control and defines terms and concepts used in the RangeSlider. +This section outlines the visual elements that constitute the RangeSlider control and explains terms and concepts essential to understanding its structure. ![VisualStructure](Overview_images/VisualStructure.png) - -* **Inactive Major Tick Mark** — Inactive major ticks to give the better indication between the Minimum to RangeStart and RangeEnd to Maximum. -* **Inactive Minor Tick Mark** — Inactive minor ticks to give the better indication between Major ticks in unselected part. -* **Active Minor Tick Mark** — Active minor ticks to give the better indication between Major ticks in selection part. -* **Active Major Tick Mark** — Active major ticks to give the better indication between the RangeStart and RangeEnd thumbs. -* **Thumb** — Thumb can be dragged along the track. -* **Active Track** — Selection range marked with RangeStart and RangeEnd thumbs. -* **Inactive Track** — The horizontal or vertical line is used to move the thumbs along it. -* **Range Start** — Thumb indicates the start of the selection range. -* **Range End** — Thumb indicates the end of the selection range. -* **Value Label** — indicates the value of the RangeSlider. +- **Inactive Major Tick Mark**: Provides visual demarcation from the `Minimum` to `RangeStart`, and `RangeEnd` to `Maximum`. +- **Inactive Minor Tick Mark**: Enhances visibility of intervals between major ticks in the non-selected segment. +- **Active Minor Tick Mark**: Signifies divisions between major ticks within the selected range. +- **Active Major Tick Mark**: Highlights major ticks between the `RangeStart` and `RangeEnd` thumbs. +- **Thumb**: Movable element that can be dragged along the track. +- **Active Track**: The range tapped by the `RangeStart` and `RangeEnd` thumbs. +- **Inactive Track**: The guideline along which thumbs slide, either horizontally or vertically. +- **Range Start**: Thumb marking the commencement of the selected range. +- **Range End**: Thumb marking the conclusion of the selected range. +- **Value Label**: Displays the current value of the RangeSlider. diff --git a/wpf/Rating/Appearance-and-Styling.md b/wpf/Rating/Appearance-and-Styling.md index d8e5fff70e..49ce7a8bb6 100644 --- a/wpf/Rating/Appearance-and-Styling.md +++ b/wpf/Rating/Appearance-and-Styling.md @@ -1,25 +1,25 @@ --- layout: post -title: Appearance and Styling in WPF Rating control | Syncfusion® -description: Learn here all about Appearance and Styling support in Syncfusion® WPF Rating (SfRating) control and more. -platform: wpf +title: Customizing Appearance and Styling in WPF Rating Control | Syncfusion® +description: Discover how to customize the appearance and styling of the Syncfusion® WPF Rating (SfRating) control, focusing on item sizes, colors, and styles. +platform: WPF control: SfRating documentation: ug --- -# Appearance and Styling in WPF Rating (SfRating) +# Customizing Appearance and Styling in WPF Rating (SfRating) -When the default view is not needed, you can customize the view of WPF SfRating control. The SfRating control provides support to customize the size, item count, and space between rating items. +The default view of the SfRating control can be altered to suit your needs by customizing the size, item count, and spacing between rating items. -N> These properties are available in SfRatingItem. To set this property, use the ItemContainerStyle property of the SfRating control. +> **Note**: These properties are available in `SfRatingItem`. To set these properties, use the `ItemContainerStyle` property of the SfRating control. -## Set fill color +## Setting Fill Colors -The SfRating control supports to set the fill color to the selected and unselected items. +The SfRating control allows for specifying fill colors for both selected and unselected items. -### Selected items +### Selected Items -The `RatedFill` property fills the rated area with the specified solid color in the SfRating control. +Use the `RatedFill` property to fill the rated area with a specified color in the SfRating control. {% highlight xaml %} @@ -33,11 +33,11 @@ The `RatedFill` property fills the rated area with the specified solid color in {% endhighlight %} -![Rated item ](images/rated_fill.png) +![Rated item](images/rated_fill.png) -### Unselected items +### Unselected Items -The `UnRatedFill` property fills the unrated area with the specified solid color in the SfRating control. +The `UnRatedFill` property fills the unrated area with a specified color in the SfRating control. {% highlight xaml %} @@ -56,11 +56,11 @@ The `UnRatedFill` property fills the unrated area with the specified solid color ## Set stroke color -The SfRating control supports to set the stroke color to the selected and unselected items. +SfRating control supports setting stroke colors for both selected and unselected items. -### Selected items +### Selected Items -The `RatedStroke` property sets the stroke color to the rated area with the specified solid color to the selected items in the SfRating control. +The `RatedStroke` property sets the stroke color for the rated area with the specified color. {% highlight xaml %} @@ -77,10 +77,9 @@ The `RatedStroke` property sets the stroke color to the rated area with the spec ![Rated item stroke color](images/ratedstroke.png) -### Unselected items - -The `UnratedStroke` property sets the stroke color to the unrated area with the specified solid color in the SfRating control. +### Unselected Items +The `UnRatedStroke` property specifies the stroke color for the unrated area. {% highlight xaml %} @@ -96,13 +95,13 @@ The `UnratedStroke` property sets the stroke color to the unrated area with the ![Unrated item stroke color](images/unratedstroke.png) -## Set stroke thickness +## Setting Stroke Thickness -The SfRating control supports to set the stroke thickness to the selected and unselected items. +The SfRating control also supports customizing stroke thickness for selected and unselected items. -### Selected items +### Selected Items -The `RatedStrokeThickness` property sets the stroke thickness to the rated area with the specified value in the SfRating control. +The `RatedStrokeThickness` property defines the stroke thickness for the rated area. {% highlight xaml %} @@ -119,9 +118,9 @@ The `RatedStrokeThickness` property sets the stroke thickness to the rated area ![Rated item stroke thickness](images/ratedstrokethickness.png) -### Unselected items +### Unselected Items -The `UnratedStrokeThickness` property sets the stroke thickness to the unrated area with the specified value in the SfRating control. +The `UnRatedStrokeThickness` property sets the stroke thickness for unrated items. {% highlight xaml %} @@ -138,9 +137,12 @@ The `UnratedStrokeThickness` property sets the stroke thickness to the unrated a ![Unrated item stroke thickness](images/unratedstrokethickness.png) -### PointerOverFill +## Pointer Over Effects + +SfRating enables customization of interactions through pointer effects. -The `PointerOverFill` property fills the mouse over area with the specified solid color in the SfRating control. +### PointerOverFill +The `PointerOverFill` property fills the area under the mouse pointer with a specified color. {% highlight xaml %} @@ -154,12 +156,11 @@ The `PointerOverFill` property fills the mouse over area with the specified soli {% endhighlight %} -![PointOverFill](images/pointover_fill.png) +![PointerOverFill](images/pointover_fill.png) ### PointerOverStroke -The `PointerOverStroke` property sets the stroke color to the mouse over area with the specified solid color in the SfRating control. - +Sets the stroke color for the area under the mouse pointer using the `PointerOverStroke` property. {% highlight xaml %} @@ -172,11 +173,11 @@ The `PointerOverStroke` property sets the stroke color to the mouse over area wi {% endhighlight %} -![PointOverStroke](images/pointover_stroke.png) +![PointerOverStroke](images/pointover_stroke.png) ### PointerOverStrokeThickness -The `PointerOverStrokeThickness` property sets the stroke thickness to the mouse over area with the specified value in the SfRating control. +The `PointerOverStrokeThickness` property sets stroke thickness for the mouse-over area. {% highlight xaml %} @@ -193,9 +194,8 @@ The `PointerOverStrokeThickness` property sets the stroke thickness to the mouse ![PointerOverStrokeThickness](images/pointover_strokethickness.png) -### Height - -You can set the height of each SfRatingItem using the `Height` property. +## Customizing Item Height +Adjust the height of each `SfRatingItem` by using the `Height` property. {% tabs %} @@ -233,7 +233,7 @@ public MainWindow() ![SfRating item custom height](images/height_customization.png) -To set same height to each SfRatingItem, use the `ItemContainerStyle` property. +To set the same height for each `SfRatingItem`, use the `ItemContainerStyle` property. {% highlight xaml %} @@ -247,4 +247,4 @@ To set same height to each SfRatingItem, use the `ItemContainerStyle` property. {% endhighlight %} -![SfRating item normal height](images/equal_height.png) +![SfRating item uniform height](images/equal_height.png) diff --git a/wpf/Rating/Getting-Started.md b/wpf/Rating/Getting-Started.md index ad1f4a2d4e..aa3337e72e 100644 --- a/wpf/Rating/Getting-Started.md +++ b/wpf/Rating/Getting-Started.md @@ -1,51 +1,49 @@ --- layout: post -title: Getting Started with WPF Rating control | Syncfusion® -description: Learn here about getting started with Syncfusion® WPF Rating (SfRating) control, its elements and more. -platform: wpf +title: Getting Started with WPF Rating Control | Syncfusion® +description: Explore how to set up and customize the Syncfusion® WPF Rating (SfRating) control, including deployment and basic features. +platform: WPF control: SfRating documentation: ug --- # Getting Started with WPF Rating (SfRating) -This section explains how to configure the [SfRating](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html) control in a real-time scenario and also provides a walk-through on some of the customization features available in the SfRating control. +This section provides a step-by-step guide to configuring the [SfRating](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html) control in real-time scenarios, along with walkthroughs of its customization features. -## Assembly deployment +## Assembly Deployment -Refer to the [control dependencies](https://help.syncfusion.com/wpf/control-dependencies#sfrating) section to get the list of assemblies or NuGet package that needs to be added as a reference to use the [SfRating](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html) control in any application. +Refer to the [control dependencies](https://help.syncfusion.com/wpf/control-dependencies#sfrating) to identify the necessary assemblies or NuGet packages for using the [SfRating](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html) control in your application. -You can find more details about installing the NuGet package in a WPF application in the following link: -[How to install nuget packages](https://help.syncfusion.com/wpf/visual-studio-integration/nuget-packages) +For more information about installing NuGet packages in a WPF application, visit: [How to Install NuGet Packages](https://help.syncfusion.com/wpf/visual-studio-integration/nuget-packages) +## Creating an Application with SfRating Control +In this walkthrough, you will create a WPF application featuring the [SfRating](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html) control. Here's what's covered: +1. [Creating a Project](#creating-a-project) +2. [Adding Control via Designer](#adding-control-via-designer) +3. [Adding Control Manually in XAML](#adding-control-manually-in-xaml) +4. [Adding Control Manually in C#](#adding-control-manually-in-c) -## Creating Application with SfRating control -In this walk through, user will create a WPF application that contains [SfRating](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html) control. -1. [Creating project](#creating-project) -2. [Adding control via designer](#adding-control-via-designer) -3. [Adding control manually in XAML](#adding-control-manually-in-xaml) -4. [Adding control manually in C#](#add-control-manually-in-c) +## Creating a Project -## Creating project +This section provides detailed instructions for creating a new project in Visual Studio to display the [SfRating](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html) control. -Below section provides detailed information to create new project in Visual Studio to display [SfRating](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html) control. - -## Adding control via designer -The [SfRating](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html) control can be added to the application by dragging it from Toolbox and dropping it in designer. The required assembly will be added automatically. +## Adding Control via Designer +To add the [SfRating](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html) control to your application, drag and drop it from the Toolbox into the designer. The required assembly will be added automatically. ![Adding Control via Designer in WPF Rating](getting-started-images/wpf-rating-add-control-designer.png) -## Adding control manually in XAML +## Adding Control Manually in XAML -In order to add [SfRating](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html) control manually in XAML, do the below steps, +To manually add the [SfRating](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html) control in XAML, follow these steps: -1. Add the below required assembly references to the project, +1. Add the following required assembly references to your project: - * Syncfusion.SfShared.WPF - * Syncfusion.SfInput.WPF + - Syncfusion.SfShared.WPF + - Syncfusion.SfInput.WPF -2. Import Syncfusion® WPF schema **http://schemas.syncfusion.com/wpf** in XAML page. +2. Import the Syncfusion® WPF schema **http://schemas.syncfusion.com/wpf** into your XAML page. -3. Declare [SfRating](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html) in XAML page. +3. Declare [SfRating](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html) within your XAML page. {% capture codesnippet1 %} {% tabs %} @@ -71,18 +69,18 @@ In order to add [SfRating](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows {% endcapture %} {{ codesnippet1 | OrderList_Indent_Level_1 }} -## Add control manually in C# +## Adding Control Manually in C# -In order to add [SfRating](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html) control manually in C#, do the below steps, +To manually add the [SfRating](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html) control in C#, follow these steps: -1. Add the below required assembly references to the project, +1. Add the following required assembly references to your project: - * Syncfusion.SfShared.WPF - * Syncfusion.SfInput.WPF + - Syncfusion.SfShared.WPF + - Syncfusion.SfInput.WPF -2. Import SfRating namespace **Syncfusion.Windows.Controls.Input**. +2. Import the SfRating namespace: **Syncfusion.Windows.Controls.Input**. -3. Create SfRating control instance and add it to window. +3. Create an instance of the SfRating control and add it to the window. {% capture codesnippet2 %} {% tabs %} @@ -118,11 +116,11 @@ namespace SfRating_GettingStarted {% endcapture %} {{ codesnippet2 | OrderList_Indent_Level_1 }} -## Customize number of rating items +## Customizing the Number of Rating Items -The number of rating items to be displayed can be customized using [ItemCounts](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html#Syncfusion_Windows_Controls_Input_SfRating_ItemsCount) property in [SfRating](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html) control. +You can customize the number of rating items displayed using the [ItemsCount](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html#Syncfusion_Windows_Controls_Input_SfRating_ItemsCount) property in the [SfRating](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html) control. -N> The default value of ItemsCount is 0. +> **Note**: The default value of `ItemsCount` is 0. {% tabs %} @@ -144,12 +142,11 @@ SfRating rating = new SfRating() {% endtabs %} -## Set value - -The display value to be selected among the rating items can be set in the [SfRating](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html) control using [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html#Syncfusion_Windows_Controls_Input_SfRating_Value) property. +## Setting the Value -N> By default, value of this property is 0. +The displayed value selected among the rating items can be set using the [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html#Syncfusion_Windows_Controls_Input_SfRating_Value) property. +> **Note**: By default, the `Value` property is set to 0. {% tabs %} {% highlight xaml %} @@ -171,11 +168,11 @@ SfRating rating = new SfRating() {% endtabs %} -## Precision of selection +## Precision of Selection -The [SfRating](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html) control provides option to rate the items in full, half, and exact value using the [Precision](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html#Syncfusion_Windows_Controls_Input_SfRating_Precision) property. +The [SfRating](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html) control allows you to rate items with full, half, or exact precision using the [Precision](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html#Syncfusion_Windows_Controls_Input_SfRating_Precision) property. -N> By default, the value of Precision property is `Standard`. +> **Note**: The default value of `Precision` is `Standard`. {% tabs %} @@ -200,14 +197,13 @@ SfRating rating = new SfRating() ![SfRating Getting Started](images/gettingstarted.png) -[View Sample in GitHub](https://github.com/SyncfusionExamples/SfRating-getting-started) +[View Sample on GitHub](https://github.com/SyncfusionExamples/SfRating-getting-started) -## Theme +## Themes -SfRating supports various built-in themes. Refer to the below links to apply themes for the SfRating, +SfRating supports various built-in themes. Refer to the following links to apply themes to the SfRating: - * [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager) - - * [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme) +- [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager) +- [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme) ![Setting Theme in WPF Rating](getting-started-images/wpf-rating-setting-theme.png) \ No newline at end of file diff --git a/wpf/Rating/Number-of-Items.md b/wpf/Rating/Number-of-Items.md index 7ad922e22e..b820d40a34 100644 --- a/wpf/Rating/Number-of-Items.md +++ b/wpf/Rating/Number-of-Items.md @@ -1,13 +1,13 @@ --- layout: post -title: Number of Items | SfRating | wpf | Syncfusion® -description: Learn here about Number of items in Syncfusion® Essential Studio® WPF Rating (SfRating) control, its elements, and more. -platform: wpf +title: Configuring the Number of Items in WPF Rating Control | SfRating | Syncfusion® +description: Explore how to configure the number of rating items in the Syncfusion® WPF Rating (SfRating) control and understand its elements. +platform: WPF control: SfRating documentation: ug --- -# Number of Items in WPF Rating (SfRating) control +# Configuring the Number of Items in WPF Rating (SfRating) Control The control allows the user to rate items from a predefined list of items. @@ -27,3 +27,12 @@ The following code sample shows how to use the ItemsCount property: + +## Example Usage + +Here's how you can set the number of items in the SfRating control: +{% highlight xaml %} + +{% endhighlight %} + +![Number of Items in SfRating](Number-of-Items_images/Number-of-Items_img1.png) diff --git a/wpf/Rating/Overview.md b/wpf/Rating/Overview.md index 5ea9303a06..e775e4f2bc 100644 --- a/wpf/Rating/Overview.md +++ b/wpf/Rating/Overview.md @@ -1,21 +1,20 @@ --- layout: post -title: About WPF Rating control | Syncfusion® -description: Learn here all about introduction of Syncfusion® WPF Rating (SfRating) control, its elements and more. -platform: wpf -control: Rating +title: Introduction to WPF Rating Control | Syncfusion® +description: Explore the Syncfusion® WPF Rating (SfRating) control, its features, and use cases for various applications. +platform: WPF +control: SfRating documentation: ug --- -# WPF Rating (SfRating) Overview +# Overview of WPF Rating (SfRating) Control +The SfRating control for WPF is a versatile component that uses stars to visually represent ratings. It allows for the customization of item size and the number of displayed items, making it ideal for scenarios like movie or application ratings. -The SfRating control for WPF provides the number of stars that represent a rating. It is used to configure the item size, and the number of displayed items in the SfRating control. The SfRating control can be used in various scenarios such as rating movies, rating applications, etc. +![SfRating Overview](images/gettingstarted.png) -![SfRating overview](images/gettingstarted.png) +## Key Features -## Key features +- **Precision**: Offers options to determine the desired accuracy level of ratings. -* `Precision`: Options to decide the accuracy level of rating. - -* `Item count`: Supports to determine the number of rating items to be displayed. +- **Item Count**: Enables setting the number of rating items to be displayed. diff --git a/wpf/Rating/Precision.md b/wpf/Rating/Precision.md index d5bc767230..bf1bc08d25 100644 --- a/wpf/Rating/Precision.md +++ b/wpf/Rating/Precision.md @@ -1,19 +1,18 @@ --- layout: post -title: Precision in WPF Rating control | Syncfusion® -description: Learn here all about Precision support in Syncfusion® WPF Rating (SfRating) control, its elements and more. -platform: wpf +title: Precision Settings in WPF Rating Control | Syncfusion® +description: Explore how precision settings in the Syncfusion® WPF Rating (SfRating) control affect rating accuracy and filling behavior. +platform: WPF control: SfRating documentation: ug --- -# Precision in WPF Rating (SfRating) +# Precision Settings in WPF Rating (SfRating) -The precision mode defines the accuracy level of the SfRating control. It has Standard, Half, and Exact options. By default, the precision mode of the SfRating control is set to `Standard`. +The precision mode in the SfRating control defines its accuracy level, specifying how rating items are filled. The available options are Standard, Half, and Exact, with the default mode being `Standard`. +## Standard -### Standard - -When the precision mode of the SfRating control is set to `Standard`, the rating item will be filled completely based on the rating value. +With the precision mode set to `Standard`, each rating item is filled entirely based on the rating value. {% tabs %} diff --git a/wpf/Rating/Restrict-User-Selection.md b/wpf/Rating/Restrict-User-Selection.md index 78c1a0ff06..a79cbf8c3d 100644 --- a/wpf/Rating/Restrict-User-Selection.md +++ b/wpf/Rating/Restrict-User-Selection.md @@ -1,15 +1,15 @@ --- layout: post -title: Restrict User Selection in WPF Rating control | Syncfusion® -description: Learn here all about Restrict User Selection support in Syncfusion® WPF Rating (SfRating) control and more. -platform: wpf +title: Restrict User Selection in WPF Rating Control | Syncfusion® +description: Learn all about the Restrict User Selection feature in the Syncfusion® WPF Rating (SfRating) control. +platform: WPF control: SfRating documentation: ug --- # Restrict User Selection in WPF Rating (SfRating) -The SfRating control provides support to changeable or unchangeable values. This is achieved using the `IsReadOnly` property. When this property is set to true, the rating value becomes unchangeable. By default, value of this property is false. +The `SfRating` control allows for both changeable and unchangeable rating values. This functionality is controlled by the `IsReadOnly` property. Setting this property to `true` makes the rating value unchangeable. By default, this property is set to `false`. {% tabs %} @@ -34,4 +34,4 @@ public MainWindow() {% endtabs %} -![SfRating read only](images/readOnly.png) +![SfRating Read-Only](images/readOnly.png) diff --git a/wpf/Rating/ToolTip.md b/wpf/Rating/ToolTip.md index 9a46e94b65..d41bd4f565 100644 --- a/wpf/Rating/ToolTip.md +++ b/wpf/Rating/ToolTip.md @@ -1,15 +1,15 @@ --- layout: post -title: ToolTip in WPF Rating control | Syncfusion® -description: Learn here all about ToolTip support in Syncfusion® WPF Rating (SfRating) control, its elements and more. -platform: wpf +title: ToolTip in WPF Rating Control | Syncfusion® +description: Learn about ToolTip support in the Syncfusion® WPF Rating (SfRating) control, including its features and more. +platform: WPF control: SfRating documentation: ug --- # ToolTip in WPF Rating (SfRating) -Tooltip provides additional information about objects that are unfamiliar to users and are not directly displayed in UI. In the WPF SfRating control, tooltip shows the data of `Value` property. It will be displayed when the mouse is hovered over the rating items, and it will be disappeared when the mouse is moved from the rating items. The tooltip is enabled or disabled using the `ShowToolTip` property. The default value of this property is true. +A tooltip provides additional information about objects that may not be immediately recognizable to users and do not have direct UI representation. In the WPF `SfRating` control, the tooltip displays the data of the `Value` property. It appears when the mouse hovers over the rating items and disappears when the mouse is moved away. The tooltip can be enabled or disabled using the `ShowToolTip` property, which defaults to `true`. {% tabs %} @@ -38,11 +38,11 @@ public MainWindow() ![SfRating tooltip](images/ToolTip.png) -### Set tooltip precision +### Set Tooltip Precision -The `AutoToolTipPrecision` property sets the number precisions to be displayed after decimal point in tooltip. To set AutoToolTipPrecision, set the precision mode to `Exact`. +The `AutoToolTipPrecision` property defines the number of decimal places displayed in the tooltip. To configure `AutoToolTipPrecision`, set the precision mode to `Exact`. -N> The default value of this property is 1. +> **Note:** The default value of `AutoToolTipPrecision` is 1. {% tabs %} diff --git a/wpf/TextInputLayout/Assistive-Labels.md b/wpf/TextInputLayout/Assistive-Labels.md index a376ea1918..c979b530ba 100644 --- a/wpf/TextInputLayout/Assistive-Labels.md +++ b/wpf/TextInputLayout/Assistive-Labels.md @@ -1,19 +1,19 @@ --- layout: post -title: Assistive Labels in WPF TextInputLayout control | Syncfusion -description: Learn here all about Assistive Labels support in Syncfusion WPF TextInputLayout (SfTextInputLayout) control and more. -platform: wpf +title: Assistive Labels in WPF TextInputLayout Control | Syncfusion +description: Learn all about assistive labels support in the Syncfusion WPF TextInputLayout (SfTextInputLayout) control and more. +platform: WPF control: SfTextInputLayout documentation: ug --- # Assistive Labels in WPF TextInputLayout (SfTextInputLayout) -Assistive labels provide additional information about the text entered in the control of the input view. +Assistive labels provide additional information about the text entered in the input view control. -## Helper text +## Helper Text -Helper text provides additional guidance on the `Input` field, such as `How to use it?` and can be set using the `HelperText` property. +Helper text provides additional guidance on the `Input` field, such as instructions on how to use it. This can be set using the `HelperText` property. {% tabs %} @@ -40,13 +40,13 @@ inputLayout.InputView = new TextBox(); ![Helper text](Images/helpertext.png) -### Helper text visibility +### Helper Text Visibility -We can specify the display state of the helper text using the `HelperTextVisibility` property, the type of which is [`Visibility`](https://docs.microsoft.com/en-us/dotnet/api/system.windows.visibility?view=netframework-4.8). +The display state of the helper text can be specified using the `HelperTextVisibility` property, which is of type [`Visibility`](https://docs.microsoft.com/en-us/dotnet/api/system.windows.visibility?view=netframework-4.8). -## Error message +## Error Message -If the text `Input` is not acknowledged, the troubleshooting instructions will be shown in the error message. Error messages are shown below the input line until the correct text has been entered. It can be set using the `ErrorText` property, but it will only be shown when the `HasError` property is set to `true`. +If the text input is not valid, troubleshooting instructions are displayed in the error message. Error messages are shown below the input line until the correct text is entered. They can be set using the `ErrorText` property, and will only appear when the `HasError` property is set to `true`. {% tabs %} @@ -78,10 +78,10 @@ inputLayout.InputView = new TextBox(); ![Error text](Images/errortext.png) -N> Error validations should be done in the application level. +> **Note:** Error validations should be implemented at the application level. -## Character counter -Character counter is used when characters need to be limited. Use the `CharMaxLength` property to set the limit for characters. We can specify the display state of the character count using the `CharCountVisibility` property, the type of which is [`Visibility`](https://docs.microsoft.com/en-us/dotnet/api/system.windows.visibility?view=netframework-4.8). +## Character Counter +A character counter is used when character input needs to be limited. Use the `CharMaxLength` property to set the character limit. The display state of the character count can be specified using the `CharCountVisibility` property, which is of type [`Visibility`](https://docs.microsoft.com/en-us/dotnet/api/system.windows.visibility?view=netframework-4.8). {% tabs %} @@ -114,5 +114,4 @@ inputLayout.InputView = new TextBox(); ![Character count](Images/charactercount.png) -N> When the number of characters to be entered in the input view exceeds the `CharMaxLength`, the `ErrorForeground` value will be applied to the hint label, base line, border and counter label. - +> **Note:** When the number of characters entered in the input view exceeds the `CharMaxLength`, the `ErrorForeground` value will be applied to the hint label, baseline, border, and counter label. diff --git a/wpf/TextInputLayout/Customization.md b/wpf/TextInputLayout/Customization.md index c22a24c865..39c2f99122 100644 --- a/wpf/TextInputLayout/Customization.md +++ b/wpf/TextInputLayout/Customization.md @@ -1,21 +1,21 @@ --- layout: post -title: Customization in WPF TextInputLayout control | Syncfusion -description: Learn here all about Customization support in Syncfusion WPF TextInputLayout (SfTextInputLayout) control and more. -platform: wpf +title: Customization in WPF TextInputLayout Control | Syncfusion +description: Learn about customization support in the Syncfusion WPF TextInputLayout (SfTextInputLayout) control and more. +platform: WPF control: SfTextInputLayout documentation: ug --- # Customization in WPF TextInputLayout (SfTextInputLayout) -Based on the text input layout state, the colors will be applied to the hint label, base line, border and assistive labels. +Based on the text input layout state, colors are applied to the hint label, baseline, border, and assistive labels. -## Focused color +## Focused Color -When the input view is focused, the value of the `FocusedForeground` property will be added to the hint label, base line and border. +When the input view is focused, the `FocusedForeground` property value is applied to the hint label, baseline, and border. -I> The cursor color of the input view is the same as the `Accent` color of the application. +> **Important:** The cursor color of the input view matches the `Accent` color of the application. {% tabs %} @@ -43,13 +43,10 @@ inputLayout.InputView = new TextBox() { Text = "John" }; ![WPF TextInputLayout Focused color](Images/Focusedcolor.png) -N> The current active color of the text input layout can be obtained from the `ActiveForeground` property. +> **Note:** The current active color of the text input layout can be obtained from the `ActiveForeground` property. Since error is not a state, the error color will not be set to `ActiveForeground` when the `HasError` property is set to `true`. +## Unfocused Color -Since error is not a state, the error color will not be set to `ActiveForeground` when `HasError` property is set to `true`. - -## Unfocused color - -When the input view is unfocused, the `Foreground` property value will be applied to the hint label, base line and border. +When the input view is unfocused, the `Foreground` property value is applied to the hint label, baseline, and border. {% tabs %} @@ -77,9 +74,9 @@ inputLayout.InputView = new TextBox() { Text = "John" }; ![WPF TextInputLayout Unfocused color](Images/Unfocusedcolor.png) -## Error color +## Error Color -When the input layout is set to error state, the `ErrorForeground` property value will be added to the hint label, base line, border and error text. +When the input layout is set to an error state, the `ErrorForeground` property value is applied to the hint label, baseline, border, and error text. {% tabs %} @@ -110,8 +107,8 @@ inputLayout.InputView = new TextBox() { Text = "John/" }; ![WPF TextInputLayout Error color](Images/Errorcolor.png) -## Container color -The color of the container can be customized by setting the `ContainerBackground` property. It is applicable when the `ContainerType` property is set to `Filled` and `Outlined`. +## Container Color +The color of the container can be customized by setting the `ContainerBackground` property. It is applicable when the `ContainerType` property is set to `Filled` or `Outlined`. {% tabs %} @@ -142,11 +139,11 @@ inputLayout.InputView = new Entry() { TextBox = "John" }; ![WPF TextInputLayout Container color](Images/Containercolor.png) -N> Container color is not applicable for `None' type. +> **Note:** Container color is not applicable for the `None` type. -## Outline corner radius +## Outline Corner Radius -The corner radius of the outlined border can be customized by setting `OutlineCornerRadius` property. +The corner radius of the outlined border can be customized by setting the `OutlineCornerRadius` property. {% tabs %} @@ -175,5 +172,4 @@ inputLayout.InputView = new TextBox(); ![WPF TextInputLayout Outline radius](Images/outlineradius.png) ->**NOTE** -It is only applicable to the `Outlined` type of container. +> **Note:** It is only applicable to the `Outlined` type of container. diff --git a/wpf/TextInputLayout/Getting-Started.md b/wpf/TextInputLayout/Getting-Started.md index 37657767b7..04d11059ff 100644 --- a/wpf/TextInputLayout/Getting-Started.md +++ b/wpf/TextInputLayout/Getting-Started.md @@ -1,19 +1,19 @@ --- layout: post -title: Getting Started with WPF TextInputLayout control | Syncfusion -description: Learn here about getting started with Syncfusion Essential Studio WPF TextInputLayout (SfTextInputLayout) control, its elements and more. -platform: wpf +title: Getting Started with WPF TextInputLayout Control | Syncfusion +description: Learn how to get started with Syncfusion Essential Studio WPF TextInputLayout (SfTextInputLayout) control, including its elements and more. +platform: WPF control: SfTextInputLayout documentation: ug --- # Getting Started with WPF TextInputLayout (SfTextInputLayout) -This section explains the steps needed to configure the control of the text input layout. +This section explains the steps needed to configure the text input layout control. -## Adding TextInputLayout reference +## Adding TextInputLayout Reference -Refer to this [document](https://help.syncfusion.com/wpf/add-syncfusion-controls) to learn how to add Syncfusion controls in Visual Studio projects through various ways. Refer to this [document](https://help.syncfusion.com/wpf/control-dependencies) to learn about the assemblies required for adding TextInputLayout to your project. +Refer to this [document](https://help.syncfusion.com/wpf/add-syncfusion-controls) to learn how to add Syncfusion controls in Visual Studio projects through various methods. Refer to this [document](https://help.syncfusion.com/wpf/control-dependencies) to learn about the assemblies required for adding TextInputLayout to your project. ## Initialize TextInputLayout @@ -35,7 +35,7 @@ using Syncfusion.UI.Xaml.TextInputLayout; {% endtabs %} -You can either use the below schemas or the above mentioned namespace to refer the TextInputLayout control in xaml. +You can either use the below schema or the above namespace to refer to the TextInputLayout control in XAML. {% tabs %} @@ -68,9 +68,10 @@ Then, initialize the text input layout as demonstrated in the following code sni {% endtabs %} -## Adding hint +## Adding Hint + +A floating label for the text input layout can be added by setting the `Hint` property. The display state of the hint label can be specified using the `HintVisibility` property, which is of type [`Visibility`](https://docs.microsoft.com/en-us/dotnet/api/system.windows.visibility?view=netframework-4.8). -Floating label for the text input layout can be added by setting the `Hint` property. We can specify the display state of the hint label using the `HintVisibility` property, the type of which is [`Visibility`](https://docs.microsoft.com/en-us/dotnet/api/system.windows.visibility?view=netframework-4.8). {% tabs %} {% highlight xaml %} @@ -92,18 +93,18 @@ inputLayout.InputView = new TextBox(); {% endtabs %} -When focusing the input view, the hint label will be moved to the top position; it will be returned to the original position when proceeding further (on unfocused) without entering any value. +When the input view is focused, the hint label will move to the top position; it will return to the original position when unfocused without any value entered. -Run the project, and check if you get following output to make sure that the project has been configured properly to add the text input layout control. +Run the project and verify the following output to ensure the project is configured properly to add the text input layout control. ![Adding hint](Images/hintlabel.gif) ## Theme -SfTextInputLayout supports various built-in themes. Refer to the below links to apply themes for the SfTextInputLayout, +SfTextInputLayout supports various built-in themes. Refer to the following links to apply themes for the SfTextInputLayout: - * [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager) +- [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager) - * [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme) +- [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme) ![Setting theme to WPF TextInputLayout](Images/Theme.png) diff --git a/wpf/TextInputLayout/Hint-Position.md b/wpf/TextInputLayout/Hint-Position.md index b976f5700e..1359a56605 100644 --- a/wpf/TextInputLayout/Hint-Position.md +++ b/wpf/TextInputLayout/Hint-Position.md @@ -1,22 +1,21 @@ --- layout: post -title: Hint Position in WPF TextInputLayout control | Syncfusion -description: Learn here all about Hint Position support in Syncfusion WPF TextInputLayout (SfTextInputLayout) control and more. -platform: wpf +title: Hint Position in WPF TextInputLayout Control | Syncfusion +description: Learn about hint position support in the Syncfusion WPF TextInputLayout (SfTextInputLayout) control and more. +platform: WPF control: SfTextInputLayout documentation: ug --- # Hint Position in WPF TextInputLayout (SfTextInputLayout) -We can decide how the floating label will display by setting the `HintFloatMode` property. +The display of the floating label can be controlled by setting the `HintFloatMode` property. ->**NOTE** -The default value of the `HintFloatMode` is `Float`. +> **Note:** The default value of `HintFloatMode` is `Float`. ## Float -The hint label will be float to the top of input view get focused. +The hint label will float to the top of the input view when it receives focus. {% tabs %} @@ -48,7 +47,7 @@ inputLayout.InputView = new TextBox(); ## AlwaysFloat -The hint label will be positioned always at the top of input view. +The hint label will always be positioned at the top of the input view. {% tabs %} diff --git a/wpf/TextInputLayout/Overview.md b/wpf/TextInputLayout/Overview.md index 371ecf08f6..2aeb9fc957 100644 --- a/wpf/TextInputLayout/Overview.md +++ b/wpf/TextInputLayout/Overview.md @@ -1,24 +1,24 @@ --- layout: post -title: About WPF TextInputLayout control | Syncfusion -description: Learn here all about introduction of Syncfusion Essential Studio WPF TextInputLayout (SfTextInputLayout) control, its elements and more. -platform: wpf +title: About WPF TextInputLayout Control | Syncfusion +description: Learn about the introduction of Syncfusion Essential Studio WPF TextInputLayout (SfTextInputLayout) control, its elements and more. +platform: WPF control: SfTextInputLayout documentation: ug --- # WPF TextInputLayout (SfTextInputLayout) Overview -The text input layout control for WPF adds decorative elements such as floating labels, icons, and assistive labels on the top of [`TextBox`](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.textbox)control. +The text input layout control for WPF adds decorative elements such as floating labels, icons, and assistive labels on top of the [`TextBox`](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.textbox) control. -## Key features +## Key Features -* Displays floating labels when the input view is focused. -* Displays help labels. -* Displays error labels. -* Displays character count. -* Displays leading and trailing icons. -* Supports filled, outlined, and none container types. -* Provides options to customize the thickness of the base line. -* Provides option to customize the corner radius of the outlined border. -* Provides RTL support. \ No newline at end of file +- Displays floating labels when the input view is focused. +- Displays help labels. +- Displays error labels. +- Displays character count. +- Displays leading and trailing icons. +- Supports filled, outlined, and none container types. +- Provides options to customize the thickness of the baseline. +- Provides options to customize the corner radius of the outlined border. +- Supports RTL (Right-to-Left) layout. diff --git a/wpf/TextInputLayout/Supported-Input-Views.md b/wpf/TextInputLayout/Supported-Input-Views.md index d477afbfe2..e1e7d4b724 100644 --- a/wpf/TextInputLayout/Supported-Input-Views.md +++ b/wpf/TextInputLayout/Supported-Input-Views.md @@ -1,29 +1,25 @@ --- layout: post -title: Supported Input Views in WPF TextInputLayout control | Syncfusion -description: Learn here all about Supported Input Views support in Syncfusion WPF TextInputLayout (SfTextInputLayout) control and more. -platform: wpf +title: Supported Input Views in WPF TextInputLayout Control | Syncfusion +description: Learn about supported input views in the Syncfusion WPF TextInputLayout (SfTextInputLayout) control and more. +platform: WPF control: SfTextInputLayout documentation: ug --- # Supported Input Views in WPF TextInputLayout (SfTextInputLayout) -Input views can be added to the text input layout control by setting the [InputView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TextInputLayout.SfTextInputLayout.html#Syncfusion_UI_Xaml_TextInputLayout_SfTextInputLayout_InputView) property. To reduce the XAML syntax, the [InputView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TextInputLayout.SfTextInputLayout.html#Syncfusion_UI_Xaml_TextInputLayout_SfTextInputLayout_InputView) property is applied with the ContentPropertyAttribute. The [SfTextInputLayout](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TextInputLayout.html) has the following controls as the supported input views. +Input views can be added to the text input layout control by setting the [InputView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TextInputLayout.SfTextInputLayout.html#Syncfusion_UI_Xaml_TextInputLayout_SfTextInputLayout_InputView) property. To reduce XAML syntax, the [InputView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TextInputLayout.SfTextInputLayout.html#Syncfusion_UI_Xaml_TextInputLayout_SfTextInputLayout_InputView) property is applied with the `ContentPropertyAttribute`. The [SfTextInputLayout](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TextInputLayout.html) supports the following controls as input views: -* TextBox - -* PasswordBox - -* ComboBox - -* [`ComboBoxAdv`](https://help.syncfusion.com/wpf/combobox/overview) - -* [`SfTextBoxExt`](https://help.syncfusion.com/wpf/autocomplete/overview) +- TextBox +- PasswordBox +- ComboBox +- [`ComboBoxAdv`](https://help.syncfusion.com/wpf/combobox/overview) +- [`SfTextBoxExt`](https://help.syncfusion.com/wpf/autocomplete/overview) ## TextBox -You can enter the text as an input by adding the [TextBox](https://docs.microsoft.com/en-us/dotnet/desktop/wpf/controls/textbox-overview?view=netframeworkdesktop-4.8) in the [SfTextInputLayout](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TextInputLayout.html). +You can enter text as input by adding a [TextBox](https://docs.microsoft.com/en-us/dotnet/desktop/wpf/controls/textbox-overview?view=netframeworkdesktop-4.8) in the [SfTextInputLayout](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TextInputLayout.html). {% tabs %} @@ -51,7 +47,7 @@ You can enter the text as an input by adding the [TextBox](https://docs.microsof ## PasswordBox -You can enter the password characters as an input by adding the [PasswordBox](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.passwordbox?view=netcore-3.1) in the [SfTextInputLayout](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TextInputLayout.html). +You can enter password characters as input by adding a [PasswordBox](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.passwordbox?view=netcore-3.1) in the [SfTextInputLayout](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TextInputLayout.html). {% tabs %} @@ -143,7 +139,7 @@ You can use the [`ComboBoxAdv`](https://help.syncfusion.com/wpf/combobox/overvie ## Autocomplete (SfTextBoxExt) -You can use the [`SfTextBoxExt`](https://help.syncfusion.com/wpf/autocomplete/overview) control to enter the text as an input in the [`SfTextInputLayout`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TextInputLayout.html). +You can use the [`SfTextBoxExt`](https://help.syncfusion.com/wpf/autocomplete/overview) control to enter text as input in the [`SfTextInputLayout`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.TextInputLayout.html). {% tabs %} diff --git a/wpf/TextInputLayout/container-type.md b/wpf/TextInputLayout/container-type.md index 3c91a2f20a..4ee498e97c 100644 --- a/wpf/TextInputLayout/container-type.md +++ b/wpf/TextInputLayout/container-type.md @@ -1,8 +1,8 @@ --- layout: post -title: Container Type in WPF TextInputLayout control | Syncfusion -description: Learn here all about Container Type support in Syncfusion WPF TextInputLayout (SfTextInputLayout) control and more. -platform: wpf +title: Container Type in WPF TextInputLayout Control | Syncfusion +description: Learn all about container type support in the Syncfusion WPF TextInputLayout (SfTextInputLayout) control and more. +platform: WPF control: SfTextInputLayout documentation: ug --- @@ -11,7 +11,7 @@ documentation: ug Containers enhance the discoverability of the input view by creating a contrast between the input view and the assistive elements. -N> The default value of the `ContainerType` is `Outlined`. +> **Note:** The default value of the `ContainerType` is `Outlined`. ## Outlined @@ -45,7 +45,7 @@ inputLayout.InputView = new TextBox() { Text = "John" }; ## Filled -The background of the input view will be filled with container color, and the base line stroke and thickness will be changed based on the state of the input view. +The background of the input view will be filled with the container color, and the baseline stroke and thickness will be changed based on the state of the input view. {% tabs %} @@ -74,7 +74,7 @@ inputLayout.InputView = new TextBox() { Text = "John" }; ## None -The container will have an empty background and enough space. +The container will have an empty background and sufficient space. {% tabs %} diff --git a/wpf/TextInputLayout/custom-icons.md b/wpf/TextInputLayout/custom-icons.md index 47a51348a1..6b2172ab56 100644 --- a/wpf/TextInputLayout/custom-icons.md +++ b/wpf/TextInputLayout/custom-icons.md @@ -1,19 +1,19 @@ --- layout: post -title: Custom Icons in WPF TextInputLayout control | Syncfusion -description: Learn here all about Custom Icons support in Syncfusion WPF TextInputLayout (SfTextInputLayout) control and more. -platform: wpf +title: Custom Icons in WPF TextInputLayout Control | Syncfusion +description: Learn all about custom icons support in the Syncfusion WPF TextInputLayout (SfTextInputLayout) control and more. +platform: WPF control: SfTextInputLayout documentation: ug --- # Custom Icons in WPF TextInputLayout (SfTextInputLayout) -Any custom icons can be added to the leading edge or the trailing edge of the input view in the text input layout control. Events and commands linked to custom icons should be handled at the application level. +Custom icons can be added to the leading or trailing edges of the input view in the text input layout control. Events and commands linked to custom icons should be handled at the application level. -Unicode or font icons for labels can be shown as icons. +Unicode or font icons for labels can be displayed as icons. -## Leading view +## Leading View A label can be added as a leading icon to the input view by setting the `LeadingView` property. It can be placed inside or outside the container by setting the `LeadingViewPosition` property. By default, it is placed `Outside`. @@ -49,7 +49,7 @@ inputLayout.InputView = new TextBox(); ![leadingview](Images/leadingview.png) -## Trailing view +## Trailing View A label can be added as a trailing icon to the input view by setting the `TrailingView` property. It can be placed either inside or outside the input view container by setting the `TrailingViewPosition` property. By default, it is placed `Inside`. diff --git a/wpf/TextInputLayout/right-to-left.md b/wpf/TextInputLayout/right-to-left.md index 2c1003b51c..d05d9955ec 100644 --- a/wpf/TextInputLayout/right-to-left.md +++ b/wpf/TextInputLayout/right-to-left.md @@ -1,15 +1,15 @@ --- layout: post -title: Right to Left in WPF TextInputLayout control | Syncfusion -description: Learn here all about Right to Left support in Syncfusion WPF TextInputLayout (SfTextInputLayout) control and more. -platform: wpf +title: Right-to-Left in WPF TextInputLayout Control | Syncfusion +description: Learn about right-to-left support in the Syncfusion WPF TextInputLayout (SfTextInputLayout) control and more. +platform: WPF control: SfTextInputLayout documentation: ug --- -# Right to Left in WPF TextInputLayout (SfTextInputLayout) +# Right-to-Left in WPF TextInputLayout (SfTextInputLayout) -The TextInputLayout supports to change the flow of text to the right-to-left direction by setting the `FlowDirection` to `RightToLeft`. +The TextInputLayout supports changing the flow of text to the right-to-left direction by setting the `FlowDirection` property to `RightToLeft`. {% tabs %} {% highlight xaml %}