diff --git a/wpf/Badge/Alignment-positioning.md b/wpf/Badge/Alignment-positioning.md index 75a1eeb56..cdd835141 100644 --- a/wpf/Badge/Alignment-positioning.md +++ b/wpf/Badge/Alignment-positioning.md @@ -13,7 +13,7 @@ This section explains the alignment and positioning functionalities available in ## Alignment of Badge -you can align the `Badge` either horizontally or vertically by using the `HorizontalAlignment` or `VerticalAlignment` properties. The default value of `HorizontalAlignment` property is `Right` and `VerticalAlignment` property is `Top`. +You can align the `Badge` either horizontally or vertically by using the `HorizontalAlignment` or `VerticalAlignment` properties. The default value of the `HorizontalAlignment` property is `Right` and the `VerticalAlignment` property is `Top`. @@ -26,6 +26,9 @@ The control can be populated using [ItemsSource](https://learn.microsoft.com/en- {%highlight c#%} +using System.Collections.ObjectModel; +using System.ComponentModel; + public class ViewModel : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; diff --git a/wpf/CheckedListBox/Getting-Started.md b/wpf/CheckedListBox/Getting-Started.md index 25ad8a5a6..20b9c4488 100644 --- a/wpf/CheckedListBox/Getting-Started.md +++ b/wpf/CheckedListBox/Getting-Started.md @@ -20,15 +20,15 @@ Refer to the [control dependencies](https://help.syncfusion.com/wpf/control-depe Further information on installing the NuGet package can be found in the following link: [How to install nuget packages](https://help.syncfusion.com/wpf/installation/install-nuget-packages). -You can also use the [Syncfusion Reference Manager](https://help.syncfusion.com/wpf/visual-studio-integration/visual-studio-extensions/add-references) to refer the CheckListBox's dependent assemblies. +You can also use the [Syncfusion Reference Manager](https://help.syncfusion.com/wpf/visual-studio-integration/visual-studio-extensions/add-references) to refer to the CheckListBox's dependent assemblies. ## Creating simple application with CheckListBox control -In this walk through, the user will create a WPF application that contains the [CheckListBox](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.CheckListBox.html) control. +In this walkthrough, you will create a WPF application that contains the [CheckListBox](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.CheckListBox.html) control. ## Creating project -In Visual Studio, create a new WPF project to show the features of the [CheckListBox](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.CheckListBox.html) control and add the following namespace to the added assemblies. +In Visual Studio, create a new WPF project to show the features of the [CheckListBox](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.CheckListBox.html) control, and then add the following namespace to the referenced assemblies. ## Adding control via designer @@ -59,7 +59,7 @@ To add the WPF [CheckListBox](https://help.syncfusion.com/cr/wpf/Syncfusion.Wind xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" - xmlns:local="clr-namespace:GettingStartedComboBox" + xmlns:local="clr-namespace:GettingStarted" xmlns:syncfusion="http://schemas.syncfusion.com/wpf" x:Class="GettingStarted.MainWindow" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> @@ -95,7 +95,8 @@ To add the `CheckListBox` control manually in C#, follow these steps, using System.Windows; using Syncfusion.Windows.Tools.Controls; -namespace ComboBox + +namespace GettingStarted { /// /// Interaction logic for MainWindow.xaml @@ -248,7 +249,7 @@ checkListBox.DisplayMemberPath = "Name"; ## Check or Uncheck items -You can check or uncheck the items in the [CheckListBox](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.CheckListBox.html) by clicking on the CheckBox or the content of the item. You can use `Space` key to uncheck or check the previously selected item. +You can check or uncheck the items in the [CheckListBox](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.CheckListBox.html) by clicking on the CheckBox or the content of the item. You can use the `Space` key to uncheck or check the previously selected item. You can programmatically check the items in CheckListBox by adding the items in the [SelectedItems](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.CheckListBox.html#Syncfusion_Windows_Tools_Controls_CheckListBox_SelectedItems) property. @@ -312,7 +313,7 @@ N> Refer [Localization of Syncfusion WPF Controls](https://help.syncfusion.com/w The following screenshot shows the localized `CheckListBox` control. -![WPF CheckListBox contain localized SelectAll item](Getting-Started_images/localized.png) +![WPF CheckListBox contains localized SelectAll item](Getting-Started_images/localized.png) [View Sample in GitHub](https://github.com/SyncfusionExamples/wpf-checked-listbox-examples/tree/master/Samples/Localization) diff --git a/wpf/CheckedListBox/Grouping.md b/wpf/CheckedListBox/Grouping.md index 44dfc3225..a3bcc926a 100644 --- a/wpf/CheckedListBox/Grouping.md +++ b/wpf/CheckedListBox/Grouping.md @@ -9,9 +9,9 @@ documentation: ug # Grouping in WPF CheckListBox - By default, the [CheckListBox](https://www.syncfusion.com/wpf-ui-controls/CheckedListBox) items are in the listed view. We can group the `CheckListBox` items by adding the group description to the `CollectionView.GroupDescriptions` collection. + By default, the [CheckListBox](https://www.syncfusion.com/wpf-ui-controls/CheckedListBox) items are displayed in a listed view. You can group the `CheckListBox` items by adding a group description to the `CollectionView.GroupDescriptions` collection. - The selection state of group header varies based on the checked or unchecked state of the child items. Group can be expanded or collapsed and the child items present in the group can be checked or unchecked based on the user’s perspective. + The selection state of the group header varies based on the checked or unchecked state of the child items. Groups can be expanded or collapsed, and the child items in a group can be checked or unchecked based on the user's perspective. {% tabs %} {% highlight C# %} @@ -76,7 +76,7 @@ Click [here](https://github.com/SyncfusionExamples/wpf-checked-listbox-examples/ ## Nested Grouping - We can create a multi-level nested groups for the `CheckListBox` items by adding the two or more group descriptions to the `CollectionView.GroupDescriptions` collection. Child level groups are created by order of group descriptions added to the collection. + We can create multi-level nested groups for the `CheckListBox` items by adding two or more group descriptions to the `CollectionView.GroupDescriptions` collection. Child level groups are created in the order of the group descriptions added to the collection. {% tabs %} {% highlight C# %} @@ -102,7 +102,7 @@ class ViewModel { public ViewModel() { Vegetables = new ObservableCollection(); Vegetables.Add(new Vegetable { Price=10, Name="Yarrow", Category="Leafy and Salad"}); - Vegetables.Add(new Vegetable { Price=20", Name="Pumpkins", Category="Leafy and Salad"}); + Vegetables.Add(new Vegetable { Price=20, Name="Pumpkins", Category="Leafy and Salad"}); Vegetables.Add(new Vegetable { Price=30, Name="Cabbage", Category="Leafy and Salad"}); Vegetables.Add(new Vegetable { Price=10, Name="Spinach", Category="Leafy and Salad"}); Vegetables.Add(new Vegetable { Price=20, Name="Wheat Grass", Category="Leafy and Salad"}); @@ -147,7 +147,7 @@ Click [here](https://github.com/SyncfusionExamples/wpf-checked-listbox-examples/ ## Custom grouping -`CheckListBox` allows you to group the items based on custom logic when the common grouping functionality doesn’t meet your requirement. We can achieve this by using the `IValueConverter`. +`CheckListBox` allows you to group the items based on custom logic when the common grouping functionality does not meet your requirement. This can be achieved by using the `IValueConverter`. {% tabs %} {% highlight C# %} diff --git a/wpf/CheckedListBox/How-to/check-the-item-in-checklistbox-when-initiating.md b/wpf/CheckedListBox/How-to/check-the-item-in-checklistbox-when-initiating.md index 5e60b8077..6945eb581 100644 --- a/wpf/CheckedListBox/How-to/check-the-item-in-checklistbox-when-initiating.md +++ b/wpf/CheckedListBox/How-to/check-the-item-in-checklistbox-when-initiating.md @@ -9,12 +9,13 @@ documentation: ug # How to Check an Item on Init in WPF CheckListBox -To check the items when initiating the CheckListBox control, items need to be added in the SelectedItems collection._ The following code illustrates this: +To check the items when initiating the CheckListBox control, items need to be added to the `SelectedItems` collection. The following code illustrates this: {% tabs %} {% highlight c#%} -this.ListBox.SelectedItems.Add(this.ListBox.Items[4]); +// Assuming the CheckListBox is named 'checkListBox' and contains items +this.checkListBox.SelectedItems.Add(this.checkListBox.Items[4]); {%endhighlight%} {% endtabs %} diff --git a/wpf/CheckedListBox/Item-Selection.md b/wpf/CheckedListBox/Item-Selection.md index c766f1634..be6106bbc 100644 --- a/wpf/CheckedListBox/Item-Selection.md +++ b/wpf/CheckedListBox/Item-Selection.md @@ -9,7 +9,7 @@ documentation: ug # Item Selection in WPF CheckListBox -In CheckListBox, selection of item can be done by single click using the property [IsCheckOnFirstClick](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.CheckListBox.html#Syncfusion_Windows_Tools_Controls_CheckListBox_IsCheckOnFirstClick). If it is false, then the selection is done when double click is detected. By default, the value of this property is “True”. +In `CheckListBox`, checking of an item can be done with a single click using the [IsCheckOnFirstClick](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.CheckListBox.html#Syncfusion_Windows_Tools_Controls_CheckListBox_IsCheckOnFirstClick) property. If this property is set to `false`, the item is checked only when a double click is detected. By default, the value of this property is `True`. Here is the code for setting this property. @@ -24,14 +24,14 @@ Here is the code for setting this property. - + {%endhighlight%} {%highlight c#%} // Enable the IsCheckOnFirstClick property. -checkListBox.IsCheckOnFirstClick = true; +checkListBox.IsCheckOnFirstClick = true; {%endhighlight%} {% endtabs %} diff --git a/wpf/CheckedListBox/Layout-Related-Features.md b/wpf/CheckedListBox/Layout-Related-Features.md index b278df190..e958ba938 100644 --- a/wpf/CheckedListBox/Layout-Related-Features.md +++ b/wpf/CheckedListBox/Layout-Related-Features.md @@ -9,16 +9,16 @@ documentation: ug # Layout Related Features in WPF CheckListBox -This section illustrates the Layout-related features of CheckListBox control. The following features are discussed: +This section illustrates the layout-related features of the `CheckListBox` control. The following features are discussed: ## Alignment for CheckListBox -The check box in the CheckListBox Item can be aligned to the left or right side of the control using the CheckBoxAlignment property. This dependency property sets the alignment of the check box of the items. Following are the alignment options. +The check box in the `CheckListBox` item can be aligned to the left or right side of the control by using the `CheckBoxAlignment` property. This dependency property sets the alignment of the check box for the items. The following are the alignment options: -* Left: Check box in the CheckListBox Item is aligned to the left -* Right: Check box in the CheckListBox Item is aligned to the right +* `Left`: The check box in the `CheckListBox` item is aligned to the left. +* `Right`: The check box in the `CheckListBox` item is aligned to the right. -To set the CheckBoxAlignment to Right, use the following code. +The default value of `CheckBoxAlignment` is `Left`. To set the `CheckBoxAlignment` to `Right`, use the following code. {% tabs %} {%highlight xaml%} @@ -31,7 +31,7 @@ To set the CheckBoxAlignment to Right, use the following code. - + {%endhighlight%} @@ -84,7 +84,7 @@ FlowDirection = "RightToLeft" ## Set VisualStyle for CheckListBox -The appearance of the CheckListBox control is customized by applying a suitable style using the VisualStyle property. +The appearance of the `CheckListBox` control is customized by applying a suitable style using the `VisualStyle` property. Property table @@ -98,7 +98,7 @@ Description VisualStyle Sets the visual style for the CheckListBox control. The options provided are as follows.
    -
  • BlendOffice2003
    • +
  • Blend
  • Office2007Blue
  • Office2007Black
  • Office2007Silver
    • @@ -109,6 +109,8 @@ Sets the visual style for the CheckListBox control. The options provided are as
  • Metro
  • Transparent
+ +N> The legacy `BlendOffice2003` style has been deprecated. Use `Blend` instead. diff --git a/wpf/CheckedListBox/Sorting.md b/wpf/CheckedListBox/Sorting.md index d805c0afe..4e2f0ae46 100644 --- a/wpf/CheckedListBox/Sorting.md +++ b/wpf/CheckedListBox/Sorting.md @@ -9,7 +9,7 @@ documentation: ug # Sorting in WPF CheckListBox - By default, the [CheckListBox](https://www.syncfusion.com/wpf-controls/checkedlistbox) are arranged based on the order they added in to the `Items` collection. We can sort the `CheckListBox` items by adding the sorting direction to the `CollectionView.SortDescriptions` collection. The `CheckListBox` items can be sorted either in ascending or descending order based on the user’s perspective. + By default, the [CheckListBox](https://www.syncfusion.com/wpf-controls/checkedlistbox) items are arranged based on the order in which they were added to the `Items` collection. You can sort the `CheckListBox` items by adding a `SortDescription` to the `CollectionView.SortDescriptions` collection. The `CheckListBox` items can be sorted in either ascending or descending order, based on the user's preference. {% tabs %} {% highlight C# %} diff --git a/wpf/CheckedListBox/Virtualization.md b/wpf/CheckedListBox/Virtualization.md index d4c6880a2..d53c191ef 100644 --- a/wpf/CheckedListBox/Virtualization.md +++ b/wpf/CheckedListBox/Virtualization.md @@ -92,7 +92,7 @@ Click [here](https://github.com/SyncfusionExamples/wpf-checked-listbox-examples/ ## Disable the Virtualization -We can only load the particular items to visible at a time. If we want to make some items as checked that are not in view, then we need to disable the virtualization, otherwise the items will not be checked until they are in view. We can disable the virtualization by using the `ItemsPanel` template. +By default, only the items that are currently visible are loaded. If you want to mark items as checked that are not currently in view, you need to disable the virtualization; otherwise, the items will not be checked until they are brought into view. You can disable virtualization by using the `ItemsPanel` template. {% tabs %} {% highlight XAML %} diff --git a/wpf/Color-Palette/Appearance.md b/wpf/Color-Palette/Appearance.md index e042dbda5..e4e670850 100644 --- a/wpf/Color-Palette/Appearance.md +++ b/wpf/Color-Palette/Appearance.md @@ -13,10 +13,12 @@ This section explains different UI customization options available in [ColorPale ## Setting the Foreground -You can change the foreground color for `ColorPalette` by setting the `Foreground` property. The default color value of `Foreground` property is `Gray`. +You can change the foreground color of the `SfColorPalette` by setting the `Foreground` property. The default value of the `Foreground` property is `Gray`. + +> The C# sample below requires the `using System.Windows.Media;` namespace for `Brushes`. {% tabs %} -{% highlight xaml %} +{% highlight XAML %} @@ -36,10 +38,12 @@ N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-sfcolorpal ## Setting the Background -You can change the background color for `ColorPalette` by setting the `Background` property. The default color value of `Background` property is `Snow`. +You can change the background color of the `SfColorPalette` by setting the `Background` property. The default value of the `Background` property is `Snow`. + +> The C# sample below requires the `using System.Windows.Media;` namespace for `Brushes`. {% tabs %} -{% highlight xaml %} +{% highlight XAML %} @@ -57,12 +61,14 @@ sfColorPalette.Background = Brushes.Red; N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-sfcolorpalette-examples/tree/master/Samples/Appearance) in GitHub -## Change flow direction +## Changing the Flow Direction + +You can change the flow direction of the `SfColorPalette` layout to right-to-left by setting the `FlowDirection` property value to `RightToLeft`. The default value of the `FlowDirection` property is `LeftToRight`. -You can change the flow direction of the `ColorPalette` layout from right to left by setting the `FlowDirection` property value as `RightToLeft`. The Default value of `FlowDirection` property is `LeftToRight`. +> The C# sample below requires the `using System.Windows;` namespace for `FlowDirection`. {% tabs %} -{% highlight xaml %} +{% highlight XAML %} @@ -82,7 +88,7 @@ N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-sfcolorpal ## Theme -ColorPalette supports various built-in themes. Refer to the below links to apply themes for the ColorPalette, +ColorPalette supports various built-in themes. Refer to the links below to apply themes for the ColorPalette: * [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager) diff --git a/wpf/Color-Palette/Getting-Started.md b/wpf/Color-Palette/Getting-Started.md index c5b8f9814..aefae917c 100644 --- a/wpf/Color-Palette/Getting-Started.md +++ b/wpf/Color-Palette/Getting-Started.md @@ -137,7 +137,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-wpf- ## Select a Color -You can select any color by clicking the respective color item in the [SfColorPalette](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Media.SfColorPalette.html) You can get selected color from the [SelectedColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Media.SfColorPalette.html#Syncfusion_Windows_Controls_Media_SfColorPalette_SelectedColor) property. If you selecting any color, then the selected color will be displayed as tooltip. +You can select any color by clicking the respective color item in the [SfColorPalette](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Media.SfColorPalette.html). You can get the selected color from the [SelectedColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Media.SfColorPalette.html#Syncfusion_Windows_Controls_Media_SfColorPalette_SelectedColor) property. When you select a color, the color value is also displayed in a tooltip. ![Select a color from the WPF Color Palette](getting-started_images/wpf-color-palette-selected-color.png) @@ -145,22 +145,25 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-wpf- ## Binding a selected color -You can bind the selected color of [SfColorPalette](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Media.SfColorPalette.html) to any objects by using the [SelectedColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Media.SfColorPalette.html#Syncfusion_Windows_Controls_Media_SfColorPalette_SelectedColor) property. +You can bind the selected color of the [SfColorPalette](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Media.SfColorPalette.html) to any UI element by using the [SelectedColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Media.SfColorPalette.html#Syncfusion_Windows_Controls_Media_SfColorPalette_SelectedColor) property. -Here, the `SelectedColor` of the `SfColorPalette` bind with the `Rectangle.Fill` property with color to brush converter. +In the example below, the `SelectedColor` of the `SfColorPalette` is bound to the `Rectangle.Fill` property through a color-to-brush value converter. {% tabs %} {% highlight C# %} //ColorToBrushConverter.cs -public class ColorToSolidColorBrushValueConverter : IValueConverter { - public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { +public class ColorToSolidColorBrushValueConverter : IValueConverter +{ + public object Convert(object value, Type targetType, object parameter, CultureInfo culture) + { if (null == value) return null; Color color = (Color)value; return new SolidColorBrush(color); } - public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { + public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) + { return true; } } @@ -168,6 +171,8 @@ public class ColorToSolidColorBrushValueConverter : IValueConverter { {% endhighlight %} {% endtabs %} +> The C# converter class above requires the following `using` directives: `System`, `System.Globalization`, `System.Windows.Data`, and `System.Windows.Media`. + {% tabs %} {% highlight xaml %} @@ -195,19 +200,19 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-wpf ## Navigate to the list of swatches -You can navigate and select a different colors from the different swatches by clicking the Swatches button which is placed on the right top corner of the [SfColorPalette](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Media.SfColorPalette.html) control. +You can navigate to and select different colors from the various swatches by clicking the Swatches button, which is placed on the top-right corner of the [SfColorPalette](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Media.SfColorPalette.html) control. ### List of swatches ![List of swatches in WPF Color Palette](getting-started_images/wpf-color-palette-swatches-list.png) -![Navigate and changes the color swatches in WPF Color Palette](getting-started_images/wpf-color-palette-navigate-swatches.gif) +![Navigate and change the color swatches in WPF Color Palette](getting-started_images/wpf-color-palette-navigate-swatches.gif) N> [View Sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-wpf-sfcolorpalette-examples/tree/master/Samples/DataBinding). ## Theme -ColorPalette supports various built-in themes. Refer to the below links to apply themes for the ColorPalette, +ColorPalette supports various built-in themes. Refer to the links below to apply themes for the ColorPalette: * [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager) diff --git a/wpf/Color-Palette/Overview.md b/wpf/Color-Palette/Overview.md index d1ea46076..592f459fd 100644 --- a/wpf/Color-Palette/Overview.md +++ b/wpf/Color-Palette/Overview.md @@ -9,22 +9,20 @@ documentation: ug # About Syncfusion® WPF SfColorPalette Control -The various elements of the [sfColorPalette](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Media.SfColorPalette.html) are illustrated in the following screenshot. +The various elements of the [SfColorPalette](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Media.SfColorPalette.html) are illustrated in the following screenshot. -![Visual Structure of Sf WPF Color Palatte](overview_images/wpf-color-palette-visual-structure.png) +![Visual Structure of WPF Color Palette](overview_images/wpf-color-palette-visual-structure.png) - * The [Swatch button](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Media.ColorPaletteButton.html) is used to switch between available color packages. + * The [Swatch button](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Media.ColorPaletteButton.html) switches between available color palettes. - * In Swatch button different [Color Swatches](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Media.ColorSwatches.html) are available to allow the user to select colors. + * In the Swatch button, different [Color Swatches](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Media.ColorSwatches.html) are available to allow the user to select a palette. - * The [Color item](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Media.ColorItem.html) displays the various color items available in current swatch. + * The [Color item](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Media.ColorItem.html) displays the individual color items available in the current swatch. - * Color ToolTip shows preview of the hovered color item. + * The Color ToolTip shows a preview of the hovered color item. ## Key features -* **Color Swatches** – You can choose different color items from the different swatches colors. - -* **SelectedColor** – Returns the currently selected color. - -* **Binding support** – Selected color can be bound with any object. \ No newline at end of file +* **Color Swatches** - Choose a color item from any of the predefined color swatches (for example, Standard, Office, and Modern). +* **SelectedColor** - `SelectedColor` is a `Color` property that returns the currently selected color. The default value is `null` (no color selected). +* **Binding support** - The selected color can be bound to any UI element. \ No newline at end of file diff --git a/wpf/Color-Picker-Palette/Appearance.md b/wpf/Color-Picker-Palette/Appearance.md index cdc48c704..88269f6d3 100644 --- a/wpf/Color-Picker-Palette/Appearance.md +++ b/wpf/Color-Picker-Palette/Appearance.md @@ -13,7 +13,7 @@ This section explains different UI customization, styling, theming options avail ## Change flow direction -We can change the flow direction of the `ColorPickerPalette` layout from right to left by setting the `FlowDirection` property value as `RightToLeft`. The Default value of `FlowDirection` property is `LeftToRight`. +You can change the flow direction of the `ColorPickerPalette` layout to right-to-left by setting the `FlowDirection` property to `RightToLeft`. The default value of `FlowDirection` is `LeftToRight`. {% tabs %} {% highlight xaml %} diff --git a/wpf/Color-Picker-Palette/Getting-Started.md b/wpf/Color-Picker-Palette/Getting-Started.md index 5e2449e08..f272e8f6c 100644 --- a/wpf/Color-Picker-Palette/Getting-Started.md +++ b/wpf/Color-Picker-Palette/Getting-Started.md @@ -3,7 +3,7 @@ layout: post title: Getting Started with WPF ColorPickerPalette | Syncfusion® description: Learn how to get started with the Syncfusion WPF ColorPickerPalette control. Explore setup, features, examples, and customization options. platform: wpf -control: colorPickerPalette +control: ColorPickerPalette documentation: ug --- @@ -15,14 +15,14 @@ This section explains how to create a [WPF ColorPickerPalette](https://www.syncf ![WPF Color Picker Palette control structure](getting-started_images/wpf-color-picker-palette-control-structure.png) -* The Selected Color represents the color that you select. -* The Drop-Down represents a button, `ColorPickerPalette` window will open when you click on it. -* The Automatic Color represents the Color, which can be set by you as default color. -* The ToolTip with Color Details represents the ToolTip, when the mouse hovers on the Color. -* The Standard Colors stores the standard colors like Red, Green, Blue and so on. -* The Recently User Colors stores the Colors that are recently selected. -* The More Colors Option provides wide range of color in addition to colors in the palette. -* The Theme Variant Colors represents the Theme colors with variant. +* The selected color represents the color that you have selected. +* The drop-down represents a button; the `ColorPickerPalette` window opens when you click it. +* The automatic color represents the default color that you can configure. +* The tooltip with color details is shown when the mouse hovers over a color. +* The standard colors store colors such as red, green, and blue. +* The recently used colors store the colors that have been recently selected. +* The more-colors option provides a wide range of colors in addition to those in the palette. +* The theme-variant colors represent the theme colors and their variants. ### More Color Window @@ -30,15 +30,15 @@ This section explains how to create a [WPF ColorPickerPalette](https://www.syncf ## Assembly deployment -Refer to the [control dependencies](https://help.syncfusion.com/wpf/control-dependencies#colorpickerpalette) section to get the list of assemblies or NuGet package that needs to be added as reference to use the control in any application. +Refer to the [control dependencies](https://help.syncfusion.com/wpf/control-dependencies#colorpickerpalette) section to get the list of assemblies or NuGet packages that need to be added as a reference to use the control in any application. -You can find more details about installing the NuGet package in a WPF application in the following link: +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/installation/install-nuget-packages) ## Adding WPF ColorPickerPalette via designer -You can add the WPF Color Picker Palette control to an application by dragging it from the toolbox to a view of the designer. The following dependent assembly will be added automatically. +You can add the WPF Color Picker Palette control to an application by dragging it from the toolbox onto a view in the designer. The following dependent assemblies will be added automatically: * Syncfusion.Shared.WPF @@ -47,14 +47,14 @@ You can add the WPF Color Picker Palette control to an application by dragging i ## Adding WPF ColorPickerPalette via XAML To add the `ColorPickerPalette` control manually in XAML, follow these steps: + 1. Create a new WPF project in Visual Studio. -2. Add the following assembly references to the project, +2. Add the following assembly references to the project: + * Syncfusion.Shared.WPF -3. Import Syncfusion® WPF schema **http://schemas.syncfusion.com/wpf** and declare the `ColorPickerPalette` control in XAML page. - -4. Declare the `ColorPickerPalette` control in XAML page. +3. Import the Syncfusion® WPF schema **http://schemas.syncfusion.com/wpf** and declare the `ColorPickerPalette` control on the XAML page. {% capture codesnippet1 %} {% tabs %} @@ -79,14 +79,13 @@ To add the `ColorPickerPalette` control manually in XAML, follow these steps: ## Adding WPF ColorPickerPalette via C\# -To add the `ColorPickerPalette` control manually in C#, follow these steps: +To add the `ColorPickerPalette` in Visual Studio. -1. Create a new WPF application via Visual Studio. +2. Add the following assembly reference to the project: -2. Add the following assembly references to the project, * Syncfusion.Shared.WPF -3. Include the required namespace and create an instance of `ColorPickerPalette` and add it to the window. +3. Include the required namespace, create an instance of `ColorPickerPalette`, and add it to the window. 4. Declare the `ColorPickerPalette` control using C#. @@ -103,8 +102,7 @@ public partial class MainWindow : Window { //Creating an instance of ColorPickerPalette control ColorPickerPalette colorPickerPalette = new ColorPickerPalette(); colorPickerPalette.Width = 60; - colorPickerPalette.Height = 40; - + colorPickerPalette.Height = 40; //Adding ColorPickerPalette as window content this.Content = colorPickerPalette; } @@ -117,9 +115,9 @@ public partial class MainWindow : Window { ![WPF Color Picker Palette control added by xaml and code](getting-started_images/wpf-color-picker-palette-control-added-via-xaml-code.png) -## Accessing a Color programmatically +You can set or change the selected color of the `ColorPickerPalette` programmatically by setting the [Color](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_Color) property. To get the selected color's name, use the [ColorName](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_ColorName) property, which holds the name of the selected color item. The default value of `Color` is `Black`, and the default value of `ColorName` is the string `"Color"`. -We can set or change the selected color of the `ColorPickerPalette` programmatically by setting the value for [Color](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_Color) property. If we want know the selected color name, use the [ColorName](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_ColorName) property that holds the name of the selected color item. The default value of `Color` and `ColorName` property is `Black` and `Color`. +N> You can also set or change the selected color brush by using the [SelectedBrush](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_SelectedBrush) property. Setting either `Color` or `SelectedBrush` updates the other Palette_Color property. If we want know the selected color name, use the [ColorName](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_ColorName) property that holds the name of the selected color item. The default value of `Color` and `ColorName` property is `Black` and `Color`. N> You can also set or changes the selected color brush by using the [SelectedBrush](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_SelectedBrush) property. @@ -149,7 +147,7 @@ Here, `Red` color is selected color in the `ColorPickerPalette`. ## Select color from color palette -We can select a different colors from Theme Color and Standard Color panels. we can show or hide the variant colors of the base Theme Colors and Standard Colors by using the [GenerateThemeVariants](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_GenerateThemeVariants) and [GenerateStandardVariants](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_GenerateStandardVariants) properties value as `true` or `false`. +You can select different colors from the Theme Color and Standard Color panels. You can show or hide the variant colors of the base Theme Colors and Standard Colors by setting the [GenerateThemeVariants](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_GenerateThemeVariants) and [GenerateStandardVariants](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_GenerateStandardVariants) properties to `true` or `false`. {% tabs %} {% highlight xaml %} @@ -177,11 +175,15 @@ colorPickerPalette.Height = 40; ## Add your own color in the palette -If we want to allow the user to select a color from own colors, add that color with its name using [CustomColor.ColorName](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.CustomColor.html#Syncfusion_Windows_Tools_Controls_CustomColor_ColorName) and [CustomColor.Color](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.CustomColor.html#Syncfusion_Windows_Tools_Controls_CustomColor_Color) into the [CustomColorsCollection](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_CustomColorsCollection) and set the [SetCustomColors](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_SetCustomColors) property value as `true`. The provided `CustomColor.ColorName` is shown in the tooltip while mouse hovering on the color item. We can change the custom color panel header text and its visibility by using the [CustomHeaderText](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_CustomHeaderText) and [CustomHeaderVisibility](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_CustomHeaderVisibility) properties. The default value of `CustomHeaderText` is `CustomColors` and default value of `CustomHeaderVisibility` is `Visible`. +To allow the user to select from your own colors, add the color and its name using [CustomColor.ColorName](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.CustomColor.html#Syncfusion_Windows_Tools_Controls_CustomColor_ColorName) and [CustomColor.Color](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.CustomColor.html#Syncfusion_Windows_Tools_Controls_CustomColor_Color) to the [CustomColorsCollection](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_CustomColorsCollection), and set the [SetCustomColors](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_SetCustomColors) property to `true`. The `CustomColor.ColorName` is shown in the tooltip when the mouse hovers over the color item. You can change the custom-color panel header text and its visibility by using the [CustomHeaderText](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_CustomHeaderText) and [CustomHeaderVisibility](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_CustomHeaderVisibility) properties. The default value of `CustomHeaderText` is `CustomColors`, and the default value of `CustomHeaderVisibility` is `Visible`. {% tabs %} {% highlight C# %} +// Required usings: +// using System.Collections.ObjectModel; +// using Syncfusion.Windows.Shared; // for NotificationObject + public class ViewModel : NotificationObject { private ObservableCollection newColorCollection; public ObservableCollection NewColorCollection { @@ -221,16 +223,18 @@ public class ViewModel : NotificationObject { - +N> The `local:` xmlns used above refers to the namespace of your `ViewModel` class. Add `xmlns:local="clr-namespace:YourNamespace"` to the root element of your XAML. + {% endhighlight %} {% endtabs %} @@ -258,7 +262,7 @@ ColorPickerPalette colorPickerPalette = new ColorPickerPalette(); colorPickerPalette.RecentlyUsedPanelVisibility = Visibility.Visible; colorPickerPalette.Width = 60; colorPickerPalette.Height = 40; - +To choose from a wider range of standard and custom colors, click the **More Color** option and select a color from either the Standard Colors tab or the Custom Colors tab, then click **OK**. {% endhighlight %} {% endtabs %} @@ -294,7 +298,7 @@ N> We can show or hide all color panels. Refer the [Dealing with ColorPickerPale ## Reset selected color -If you want to reset the selected color as `Transparent` color, click the `No Color` button. You will be display the `No color` button only by setting the [NoColorVisibility](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_NoColorVisibility) property value as `Visible`. The default value of `NoColorVisibility` property is `Collapsed`. +To reset the selected color to `Transparent`, click the **No Color** button. The **No Color** button is displayed only when the [NoColorVisibility](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_NoColorVisibility) property is set to `Visible`. The default value of `NoColorVisibility` property is `Collapsed`. {% tabs %} {% highlight xaml %} @@ -316,7 +320,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-col ## Selected brush or color changed notification -The selected brush or color changed in `ColorPickerPalette` can be examined using [SelectedBrushChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html) event. The `SelectedBrushChangedEventArgs` contains the old and newly selected brush and its color values in the `OldBrush`,`NewBrush` and `OldColor`, `NewColor` properties. +The selected brush or color in `ColorPickerPalette` can be observed using the [SelectedBrushChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html) event. The `SelectedBrushChangedEventArgs` contains the old and newly selected brush and its color values in the `OldBrush`, `NewBrush`, `OldColor`, and `NewColor` properties. {% tabs %} {% highlight xaml %} diff --git a/wpf/Color-Picker-Palette/Overview.md b/wpf/Color-Picker-Palette/Overview.md index a27799512..321f9252c 100644 --- a/wpf/Color-Picker-Palette/Overview.md +++ b/wpf/Color-Picker-Palette/Overview.md @@ -9,6 +9,15 @@ documentation: ug # About Syncfusion® WPF ColorPickerPalette Control -The [ColorPickerPalette](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html) control provides a rich visual interface for color selection. The structure of the control represents a palette which is displayed as a Drop-down with selected color highlighted at the top. Its provides standard colors and the various theme colors to choose. The control also has a ToolTip support which bears the name of the color. More color options are embedded with the control that provides you with a wide range of color options. +The [ColorPickerPalette](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html) control provides a rich visual interface for color selection. The structure of the control represents a palette that is displayed as a drop-down with the selected color highlighted at the top. It provides standard colors and various theme colors to choose from. The control also has tooltip support that displays the name of each color. More color options are embedded in the control, providing a wide range of color options. -![WPF Color Picker Palette control structure](getting-started_images/wpf-color-picker-palette-structure.png) \ No newline at end of file +![WPF Color Picker Palette control structure](getting-started_images/wpf-color-picker-palette-structure.png) + +## Features + +* Three display modes: drop-down, palette, and split. +* Built-in standard, theme, automatic, recently-used, and custom color panels. +* Theme color variants and standard color variants. +* Customizable header, icons, color item size, and popup size. +* Tooltip support showing the name of each color. +* MVVM-friendly with `SelectedCommand`, `SelectedBrushChanged`, and `Color` properties. \ No newline at end of file diff --git a/wpf/Color-Picker-Palette/Working-with-ColorPickerPalette.md b/wpf/Color-Picker-Palette/Working-with-ColorPickerPalette.md index 3998e271c..2493e849b 100644 --- a/wpf/Color-Picker-Palette/Working-with-ColorPickerPalette.md +++ b/wpf/Color-Picker-Palette/Working-with-ColorPickerPalette.md @@ -9,17 +9,17 @@ documentation: ug # Color Selection in WPF ColorPickerPalette -This section explains the different types of colors available in the [ColorPickerPalette](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html) and how to choose the colors and its panel customizations. +This section explains the different types of colors available in the [ColorPickerPalette](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html) and how to choose the colors and customize the panels. ## Accessing a Color programmatically -We can get or change the selected color of the `ColorPickerPalette` programmatically by setting the value to the [Color](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_Color) property. If we want know the selected color name, use the [ColorName](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_ColorName) property that holds the name of the selected color item. The default value of `Color` and `ColorName` property is `Black` and `Color`. +You can get or change the selected color of the `ColorPickerPalette` programmatically by setting the [Color](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_Color) property. To get the selected color's name, use the [ColorName](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_ColorName) property, which holds the name of the selected color item. The default value of `Color` is `Black`, and the default value of `ColorName` is the string `"Color"`. {% tabs %} {% highlight xaml %} @@ -37,13 +37,13 @@ colorPickerPalette.Height = 40; ![WPF Color Picker Palette programmatically picked the red color](dealing-with-colorpickerpalette_images/wpf-programmatically-picked-red.png) -Here, `Red` color is selected color in the `ColorPickerPalette`. +Here, `Red` is the selected color in the `ColorPickerPalette`. -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-color-picker-palette-wpf-examples/tree/master/Samples/Getting-Started) +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-color-picker-palette-wpf-examples/tree/master/Samples/Getting-Started) ## Accessing a color brush programmatically -You can get or change the selected brush of the `ColorPickerPalette` programmatically by setting the value to the [SelectedBrush](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_SelectedBrush) property. The default value of `SelectedBrush` property is `Black`. +You can get or change the selected brush of the `ColorPickerPalette` programmatically by setting the [SelectedBrush](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_SelectedBrush) property. The default value of `SelectedBrush` is `Black`. {% tabs %} {% highlight xaml %} @@ -61,20 +61,20 @@ colorPickerPalette.SelectedBrush = Brushes.Yellow; ![ColorPickerPalette programmatically picked the yellow color brush](Dealing-with-ColorPickerPalette_images/Colorbrushprogrammatically.png) -Here, `Yellow` color brush is selected in the `ColorPickerPalette`. +Here, the `Yellow` color brush is selected in the `ColorPickerPalette`. -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-color-picker-palette-wpf-examples/tree/master/Samples/Getting-Started) +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-color-picker-palette-wpf-examples/tree/master/Samples/Getting-Started) ## Setting automatic color -If we want to change the default selected color on application launching, set the value for [AutomaticColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_AutomaticColor) property. If we changed the selected color, then we can easily make the default color as selected color by clicking the automatic color panel. We can hide the automatic color visibility by setting the [AutomaticColorVisibility](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_AutomaticColorVisibility) property value as `Collapsed`. The default value of `AutomaticColor` property is `Black` and the default value of `AutomaticColorVisibility` property is `Visible`. +To change the default selected color when the application launches, set the [AutomaticColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_AutomaticColor) property. If you have changed the selected color, you can return to the default color by clicking the automatic-color panel. You can hide the automatic color by setting the [AutomaticColorVisibility](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_AutomaticColorVisibility) property to `Collapsed`. The default value of `AutomaticColor` is `Black`, and the default value of `AutomaticColorVisibility` is `Visible`. {% tabs %} {% highlight xaml %} @@ -84,7 +84,7 @@ If we want to change the default selected color on application launching, set th ColorPickerPalette colorPickerPalette = new ColorPickerPalette(); colorPickerPalette.AutomaticColor = Colors.Green; -colorPickerPalette.AutomaticColorVisibility= Visibility.Visible; +colorPickerPalette.AutomaticColorVisibility = Visibility.Visible; colorPickerPalette.Width = 60; colorPickerPalette.Height = 40; @@ -93,11 +93,11 @@ colorPickerPalette.Height = 40; ![WPF Color Picker Palette with automatic color](dealing-with-colorpickerpalette_images/wpf-automatic-color.png) -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-color-picker-palette-wpf-examples/tree/master/Samples/Getting-Started) +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-color-picker-palette-wpf-examples/tree/master/Samples/Getting-Started) ## Select transparent color programmatically -You can set a transparent color as selected color programmatically by setting the color code `#00000000` or `Colors.Transparent` for `Color` property to indicate the null value. +You can set the selected color to transparent programmatically by setting the color code `#00000000` or `Colors.Transparent` for the `Color` property. {% tabs %} {% highlight xaml %} @@ -116,13 +116,13 @@ colorPickerPalette.Color = Colors.Transparent; ![ColorPickerPalette selected a transparent color programmatically](Dealing-with-ColorPickerPalette_images/Nullvalue.png) -## Select a predefined colors +## Select a predefined color -We can select a color from either various theme color items or standard color items. We can show or hide the color items panel visibilities. +You can select a color from either the theme color items or the standard color items. You can show or hide each panel individually. ### Select a color from theme color items -We can select a various theme colors by setting the value for [Themes](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_Themes) property. Based on the `Themes` value, the respective base color items are displayed with its variants. If we want allow the user to select only base theme colors without its variants color, use the [GenerateThemeVariants](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_GenerateThemeVariants) property as `false`. We can hide the theme color panel by setting the [ThemePanelVisibility](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_ThemePanelVisibility) property value as `Collapsed`. The default value of `Themes` property is `Office` and default value of `ThemePanelVisibility` property is `Visible`. +You can select various theme colors by setting the [Themes](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_Themes) property. Based on the `Themes` value, the corresponding base color items are displayed with their variants. To allow the user to select only base theme colors without their variants, set the [GenerateThemeVariants](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_GenerateThemeVariants) property to `false`. You can hide the theme-color panel by setting the [ThemePanelVisibility](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_ThemePanelVisibility) property to `Collapsed`. The default value of `Themes` is `Office`, and the default value of `ThemePanelVisibility` is `Visible`. ![WPF Color Picker Palette with various theme color items](dealing-with-colorpickerpalette_images/wpf-themes-items.png) @@ -130,9 +130,9 @@ We can select a various theme colors by setting the value for [Themes](https://h {% highlight xaml %} @@ -154,14 +154,14 @@ colorPickerPalette.Height = 40; ### Select a color from standard color items -We can select a standard colors from the standard color panel. If we want allow the user to select standard colors with its variant colors, use the [GenerateStandardVariants](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_GenerateStandardVariants) property as `true`. We can hide the standard color panel by setting the [StandardPanelVisibility](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_StandardPanelVisibility) property value as `Collapsed`. The default value of `GenerateStandardVariants` property is `false` and default value of `StandardPanelVisibility` property is `Visible`. +You can select standard colors from the standard-color panel. To allow the user to select standard colors along with their variants, set the [GenerateStandardVariants](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_GenerateStandardVariants) property to `true`. You can hide the standard-color panel by setting the [StandardPanelVisibility](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_StandardPanelVisibility) property to `Collapsed`. The default value of `GenerateStandardVariants` is `false`, and the default value of `StandardPanelVisibility` is `Visible`. {% tabs %} {% highlight xaml %} - @@ -182,13 +182,13 @@ colorPickerPalette.Height = 40; ## Show white and black color variants -If we want to allow the user to select the theme color from white or black or both color variants, use the [BlackWhiteVisibility](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_BlackWhiteVisibility) property as `White` or `Black` or `Both`. The default value of `BlackWhiteVisibility` property is `None`. +To allow the user to select the theme color from white, black, or both variants, set the [BlackWhiteVisibility](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_BlackWhiteVisibility) property to `White`, `Black`, or `Both`. The default value of `BlackWhiteVisibility` is `None`. {% tabs %} {% highlight xaml %} @@ -208,11 +208,15 @@ colorPickerPalette.Height = 40; ## Add your own colors in the palette -If we want to allow the user to select a color from own colors, add that color with its name using [CustomColor.ColorName](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.CustomColor.html#Syncfusion_Windows_Tools_Controls_CustomColor_ColorName) and [CustomColor.Color](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.CustomColor.html#Syncfusion_Windows_Tools_Controls_CustomColor_Color) into the [CustomColorsCollection](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_CustomColorsCollection) and set the [SetCustomColors](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_SetCustomColors) property value as `true`. The provided `CustomColor.ColorName` is shown in the tooltip while mouse hovering on the color item. We can change the custom color panel header text and its visibility by using the [CustomHeaderText](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_CustomHeaderText) and [CustomHeaderVisibility](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_CustomHeaderVisibility) properties. The default value of `CustomHeaderText` is `CustomColors` and default value of `CustomHeaderVisibility` is `Visible`. +To allow the user to select from your own colors, add the color and its name using [CustomColor.ColorName](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.CustomColor.html#Syncfusion_Windows_Tools_Controls_CustomColor_ColorName) and [CustomColor.Color](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.CustomColor.html#Syncfusion_Windows_Tools_Controls_CustomColor_Color) to the [CustomColorsCollection](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_CustomColorsCollection), and set the [SetCustomColors](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_SetCustomColors) property to `true`. The `CustomColor.ColorName` is shown in the tooltip when the mouse hovers over the color item. You can change the custom-color panel header text and its visibility by using the [CustomHeaderText](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_CustomHeaderText) and [CustomHeaderVisibility](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_CustomHeaderVisibility) properties. The default value of `CustomHeaderText` is `CustomColors`, and the default value of `CustomHeaderVisibility` is `Visible`. {% tabs %} {% highlight C# %} +// Required usings: +// using System.Collections.ObjectModel; +// using Syncfusion.Windows.Shared; // for NotificationObject + public class ViewModel : NotificationObject { private ObservableCollection newColorCollection; public ObservableCollection NewColorCollection { @@ -252,12 +256,12 @@ public class ViewModel : NotificationObject { - @@ -265,19 +269,21 @@ public class ViewModel : NotificationObject { {% endhighlight %} {% endtabs %} +N> The `local:` xmlns used above refers to the namespace of your `ViewModel` class. Add `xmlns:local="clr-namespace:YourNamespace"` to the root element of your XAML. + ![WPF Color Picker Palette with own color items](dealing-with-colorpickerpalette_images/wpf-own-color-items.png) Click [here](https://github.com/SyncfusionExamples/syncfusion-color-picker-palette-wpf-examples/tree/master/Samples/CustomColors) to download the sample that showcases how to add your own color items into the palette. -## Recently used color items +## Recently used color items -The recently selected color items are displayed in the RecentlyUsedPanel. If we want to choose a color which are previously selected, use the RecentlyUsedPanel. We can hide the RecentlyUsedPanel by using the [RecentlyUsedPanelVisibility](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_RecentlyUsedPanelVisibility) property value as `Collapsed`. The default value of `RecentlyUsedPanelVisibility` property is `Visible`. +The recently selected colors are displayed in the `RecentlyUsedPanel`. To choose a color that was previously selected, use the `RecentlyUsedPanel`. You can hide the `RecentlyUsedPanel` by setting the [RecentlyUsedPanelVisibility](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_RecentlyUsedPanelVisibility) property to `Collapsed`. The default value of `RecentlyUsedPanelVisibility` is `Visible`. {% tabs %} {% highlight xaml %} @@ -297,20 +303,19 @@ colorPickerPalette.Height = 40; ## Choosing a color from MoreColor window -In addition to colors in Theme colors and Standard colors, MoreColor feature allows you to select wide range of color options. MoreColor feature includes two categories namely Standard Colors and Custom Colors. We can hide the visibility of the MoreColor Option by using the [MoreColorOptionVisibility](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_MoreColorOptionVisibility) property value as `Collapsed`. +In addition to the Theme Colors and Standard Colors, the MoreColor feature allows you to select a wide range of color options. The MoreColor feature includes two categories: Standard Colors and Custom Colors. You can hide the MoreColor option by setting the [MoreColorOptionVisibility](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_MoreColorOptionVisibility) property to `Collapsed`. ![WPF Color Picker Palette with more color panel](dealing-with-colorpickerpalette_images/wpf-more-color-panel.png) ### Selecting more standard colors -We can select color from 140 standard colors clustered in the shape of a Hexagon. If we want to hide the Standard color tab, use the [IsStandardTabVisible](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_IsStandardTabVisible) property value as `Collapsed`. The color chosen from this cluster will also be added in the RecentlyUsedPanel. - +You can select from 140 standard colors clustered in the shape of a hexagon. To hide the Standard Colors tab, set the [IsStandardTabVisible](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_IsStandardTabVisible) property to `Collapsed`. The color chosen from this cluster is also added to the `RecentlyUsedPanel`. {% tabs %} {% highlight xaml %} @@ -330,14 +335,13 @@ colorPickerPalette.Height = 40; ### Selecting more custom colors -We can select any color and adjusting its saturation level by using the custom tab color picker . If we want to hide the custom color tab, use the [IsCustomTabVisible](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_IsCustomTabVisible) property value as `Collapsed`. The color chosen from custom color picker will also be added in the RecentlyUsedPanel. - +You can select any color and adjust its saturation level using the custom-color tab picker. To hide the Custom Colors tab, set the [IsCustomTabVisible](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_IsCustomTabVisible) property to `Collapsed`. The color chosen from the custom-color picker is also added to the `RecentlyUsedPanel`. {% tabs %} {% highlight xaml %} @@ -355,11 +359,11 @@ colorPickerPalette.Height = 40; ![WPF Color Picker Palette with custom color tab](dealing-with-colorpickerpalette_images/wpf-custom-tab.png) -N> If we set `IsCustomTabVisible` and `IsStandardTabVisible` property value as `false`, then MoreColor option automatically hides. +N> If you set both `IsCustomTabVisible` and `IsStandardTabVisible` to `false`, the MoreColor option is hidden automatically. ## Clear the colour you picked with a transparent colour -If you want to clear the selected color with a `Transparent` color, click the `No Color` button. You will be display the `No color` button only by setting the [NoColorVisibility](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_NoColorVisibility) property value as `Visible`. The default value of `NoColorVisibility` property is `Collapsed`. +To clear the selected color (set it to `Transparent`), click the **No Color** button. The **No Color** button is displayed only when the [NoColorVisibility](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_NoColorVisibility) property is set to `Visible`. The default value of `NoColorVisibility` is `Collapsed`. {% tabs %} {% highlight xaml %} @@ -377,17 +381,17 @@ colorPickerPalette.NoColorVisibility = Visibility.Visible; ![ColorPickerPalette reset selected color as Transparent by clicking the No color button](Dealing-with-ColorPickerPalette_images/wpf-reset-transparency-button.png) -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-color-picker-palette-wpf-examples/tree/master/Samples/Getting-Started) +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-color-picker-palette-wpf-examples/tree/master/Samples/Getting-Started) ## Selected brush or color changed notification -The selected brush or color changed in `ColorPickerPalette` can be examined using `SelectedBrushChanged` event. The `SelectedBrushChangedEventArgs` contains the old and newly selected brush and its color values in the `OldBrush`,`NewBrush` and `OldColor`, `NewColor` properties. You can also get the selected brush and color changed notification by using the [SelectedCommand](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_SelectedCommand) property. +The selected brush or color in `ColorPickerPalette` can be observed using the [SelectedBrushChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html) event. The `SelectedBrushChangedEventArgs` contains the old and newly selected brush and its color values in the `OldBrush`, `NewBrush`, `OldColor`, and `NewColor` properties. You can also receive a notification when the selected brush or color changes by using the [SelectedCommand](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_SelectedCommand) property. {% tabs %} {% highlight xaml %} @@ -409,22 +413,23 @@ colorPickerPalette.Height = 40; //Invoked when the selected color or brush is changed private void ColorPickerPalette_SelectedBrushChanged(object sender, SelectedBrushChangedEventArgs e) { //Old and newly selected brushes - var OldBrush = e.OldBrush ; + var oldBrush = e.OldBrush; var newBrush = e.NewBrush; //Old and newly selected colors var oldColor = e.OldColor; - var newColor = e.NewColor; + var newColor = e.NewColor; } {% endhighlight %} -{% endtabs %} +{% endtabs %} ## Customize the header -You can customize the appearance of the `ColorPickerPalette` header and can display the selected color name in the header by using the [HeaderTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_HeaderTemplate) property. +You can customize the appearance of the `ColorPickerPalette` header and display the selected color name in it by using the [HeaderTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_HeaderTemplate) property. + +N> The `DataContext` of `HeaderTemplate` is the `ColorPickerPalette` instance. -N> The `DataContext` of `HeaderTemplate` is `ColorPickerPalette` {% tabs %} {% highlight xaml %} @@ -435,32 +440,32 @@ N> The `DataContext` of `HeaderTemplate` is `ColorPickerPalette` - + - - - - @@ -468,7 +473,7 @@ N> The `DataContext` of `HeaderTemplate` is `ColorPickerPalette` @@ -482,13 +487,13 @@ N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-color-picker-p ## Tooltip support -Tooltip is used to show the information about the segment, when you mouse over on the segment. We can show information about the name of the color item using tooltip when hovering the mouse on the specific color item. +A tooltip is used to show information about a color item when the mouse hovers over it. The `ColorPickerPalette` displays the name of each color in the tooltip by default. No additional configuration is required. ![WPF Color Picker Palette with tooltip support](appearance_images/wpf-color-picker-palette-tooltip-support.gif) ## Expanded mode -If you want to directly use the palette without drop down button, set the `Mode` property value as `Palette`. +By default, `ColorPickerPalette` is shown as a drop-down button. To use the palette directly without a drop-down button, set the `Mode` property to `Palette`. To use the palette as both a button and a drop-down, set the `Mode` property to `Split`. {% tabs %} {% highlight xaml %} @@ -511,24 +516,31 @@ N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-color-picker-p ## ColorPickerPalette as a command button -By default, ColorPickerPalette acts like a dropdown. It opening a color palette when clicking anywhere on the header. By setting the [Mode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_Mode) property to `Split`, it acts like a button and dropdown as explained below. -1. When clicking on the dropdown arrow button, It acts like a dropdown. -2. When you click on the header area, it acts like a button and [SelectedCommand](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_SelectedCommand) will be triggered. Using this command, you can do some action like applying the selected color as background of selected text. +By default, `ColorPickerPalette` acts like a drop-down. It opens a color palette when you click anywhere on the header. By setting the [Mode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_Mode) property to `Split`, it acts as both a button and a drop-down as explained below: + +1. When you click the drop-down arrow button, it acts like a drop-down. +2. When you click the header area, it acts like a button and the [SelectedCommand](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_SelectedCommand) is triggered. Using this command, you can perform an action such as applying the selected color to the selected text. ![ColorPickerPalette in drop down and split mode](dealing-with-colorpickerpalette_images/wpf-drop-down-split-mode.png) -For example, if you want to apply a last selected color as a foreground to a TextEditor's selected text. You can direct click the button instead of opening the dropdown and selecting an already selected color again. +For example, if you want to apply the last selected color as a foreground to a `TextEditor`'s selected text, you can click the button directly instead of opening the drop-down and selecting an already selected color again. {% tabs %} {% highlight C# %} //ViewModel.cs +// Required usings: +// using System.Windows.Documents; +// using System.Windows.Input; +// using Syncfusion.Windows.Shared; // for NotificationObject, DelegateCommand +// using Syncfusion.Windows.Tools.Controls; // for ColorSelectedCommandArgs + public class ViewModel : NotificationObject -{ +{ private ICommand selectionChangedCommand; private ICommand loadedChangedCommand; private RichTextBox TextBox; - + public ICommand SelectionChangedCommand { get { return selectionChangedCommand; @@ -563,32 +575,30 @@ public class ViewModel : NotificationObject {% tabs %} {% highlight xaml %} - - - - - - - - - - - - Hello, world! - Thanks to the RichTextBox control, - this FlowDocument is completely editable! - - + + + + + + + + + Hello, world! + Thanks to the RichTextBox control, + this FlowDocument is completely editable! + + {% endhighlight %} {% highlight C# %} @@ -604,14 +614,14 @@ N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-color-picker-p ## Change color item size -We can change each color item size by using the [BorderWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_BorderWidth) and [BorderHeight](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_BorderHeight) properties. Based on the color items size, the color palette is resized. The default value of `BorderWidth` and `BorderHeight` properties is `17`. +You can change each color item's size by using the [BorderWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_BorderWidth) and [BorderHeight](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_BorderHeight) properties. The palette is resized based on the color item size. The default value of both `BorderWidth` and `BorderHeight` is `17`. {% tabs %} {% highlight xaml %} - @@ -632,14 +642,14 @@ colorPickerPalette.Height = 40; ## Change color palette size -We can change the color palette pop size by using the [PopupWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_PopupWidth) and [PopupHeight](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_PopupHeight) properties. Based on the popup color palette size, the color items are resized. The default value of `PopupWidth` and `PopupHeight` properties is `175` and `200`. +You can change the pop-up size by using the [PopupWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_PopupWidth) and [PopupHeight](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_PopupHeight) properties. The color items are resized based on the pop-up size. The default value of `PopupWidth` is `175`, and the default value of `PopupHeight` is `200`. {% tabs %} {% highlight xaml %} - @@ -658,21 +668,22 @@ colorPickerPalette.Height = 40; ![WPF Color Picker Palette popup size changed](dealing-with-colorpickerpalette_images/wpf-popup-changed-size.png) - -N> If we use both `PopupWidth` & `PopupHeight` and `BorderWidth` & `BorderHeight`, then `BorderWidth` & `BorderHeight` properties have higher priority. +N> If you use both `PopupWidth`/`PopupHeight` and `BorderWidth`/`BorderHeight`, the `BorderWidth`/`BorderHeight` properties have higher priority. ## Change header and more color icons -We can set the icons for control header which is placed left to the DropDown button and more color panel header by using the [Icon](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_Icon) and [MoreColorsIcon](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_MoreColorsIcon) properties. We can change the icon size for the control icon and more color icon by using the [IconSize](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_IconSize) and [MoreColorsIconSize](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_MoreColorsIconSize) properties. +You can set the icons for the control header, which is placed to the left of the drop-down button, and for the more-color panel header by using the [Icon](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_Icon) and [MoreColorsIcon](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_MoreColorsIcon) properties. You can change the icon size for the control icon and the more-color icon by using the [IconSize](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_IconSize) and [MoreColorsIconSize](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ColorPickerPalette.html#Syncfusion_Windows_Tools_Controls_ColorPickerPalette_MoreColorsIconSize) properties. The `IconSize` and `MoreColorsIconSize` properties accept two comma-separated `double` values: width and height. + +N> The image paths shown below assume the images are added to the project with a `Resource` build action. Add the images to your project, then reference them using a `pack://` URI such as `pack://application:,,,/Resources/Label.png`. {% tabs %} {% highlight xaml %} - @@ -680,13 +691,15 @@ We can set the icons for control header which is placed left to the DropDown but {% endhighlight %} {% endtabs %} -![WPF Color Picker Palette popup size changed](dealing-with-colorpickerpalette_images/wpf-popup-size.png) +![WPF Color Picker Palette icons changed](dealing-with-colorpickerpalette_images/wpf-popup-size.png) Click [here](https://github.com/SyncfusionExamples/syncfusion-color-picker-palette-wpf-examples/tree/master/Samples/Getting-Started) to download the sample that showcases features and different type color items with its panel visibility customization. -## Hide the drop down button +## Hide the drop-down button + +You can hide the drop-down button in the `ColorPickerPalette` by setting its visibility to `Collapsed`. You can then open the pop-up palette by clicking the header area. -You can hide the dropdown button in the `ColorPickerPalette` by setting the dropdown button visibility as `Collapsed`. You can open a popup color palette by clicking the header of the `ColorPickerPalette`. +N> The example below uses the `UpDownBorder` template part. Template-part names are subject to change between versions; if the part name does not match, inspect the default template using a tool such as XAML Spy or Snoop. {% tabs %} {% highlight xaml %} diff --git a/wpf/Color-Picker/Appearance.md b/wpf/Color-Picker/Appearance.md index 0c75ae869..3fff3b8b2 100644 --- a/wpf/Color-Picker/Appearance.md +++ b/wpf/Color-Picker/Appearance.md @@ -9,11 +9,11 @@ documentation: ug # Appearance in WPF ColorPicker -This section explains different UI customization, styling, theming options available in [ColoPicker](https://www.syncfusion.com/wpf-ui-controls/colorpicker) control. +This section explains the UI customization, styling, and theming options available for the [ColorPicker](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html) control. ## Change Header Template -We can customize the header of the `ColorPicker` by using the [HeaderTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_HeaderTemplate) property. +You can customize the header of the `ColorPicker` by using the [HeaderTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_HeaderTemplate) property. {% tabs %} {% highlight xaml %} @@ -45,7 +45,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/wpf-colorpicker ## Change flow direction -We can change the flow direction of the `ColorPicker` layout from right to left by setting the `FlowDirection` property value as `RightToLeft`. The Default value of `FlowDirection` property is `LeftToRight`. +You can change the flow direction of the `ColorPicker` layout to right-to-left by setting the `FlowDirection` property to `RightToLeft`. The default value of `FlowDirection` is `LeftToRight`. {% tabs %} {% highlight xaml %} @@ -67,7 +67,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/wpf-colorpicker ## Setting ToolTip -ToolTip is used to show the information about the segment, when you mouse over on the segment. We can show information about the selected color name using tooltip when click and dragging the mouse on the color palette. Tooltip is enabled by default, you can disable it by setting [EnableToolTip](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_EnableToolTip) to `false`. +The tooltip shows information about the color under the cursor. The selected color name is shown in a tooltip when you click and drag the mouse on the color palette. The tooltip is enabled by default; you can disable it by setting [EnableToolTip](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_EnableToolTip) to `false`. {% tabs %} {% highlight XAML %} @@ -83,7 +83,7 @@ colorPicker.EnableToolTip = true; {% endhighlight %} {% endtabs %} -![ColorPicker with TooTip support](Selection-Mode_images/ColorPicker_Tooltip.png) +![ColorPicker with ToolTip support](Selection-Mode_images/ColorPicker_Tooltip.png) N> [View Sample in GitHub](https://github.com/SyncfusionExamples/wpf-colorpicker-examples/tree/master/Samples/Appearance) diff --git a/wpf/Color-Picker/Choose-a-color.md b/wpf/Color-Picker/Choose-a-color.md index 62f4ba444..5055e8b52 100644 --- a/wpf/Color-Picker/Choose-a-color.md +++ b/wpf/Color-Picker/Choose-a-color.md @@ -13,11 +13,11 @@ This section explains how to select a solid color from different color models, h ## What is solid color? -Solid color comprises a single color with its alpha, red, blue and green channels or use one of the predefined color provided by the `Colors` class. +A solid color is defined by a single color with its alpha, red, blue, and green channels, or you can use one of the predefined colors provided by the `Colors` class. ## How to select your solid color -Choosing solid color from HSV(Hue, saturation and value) explained below. +Choosing a solid color from HSV (Hue, Saturation, and Value) is explained below. ### Hue @@ -43,7 +43,7 @@ Value works in conjunction with saturation and describes the brightness or inten ### RGB -We can pick a color in RGB (Red, green, and blue) color format by setting the value of the `VisualizationStyle` property as [ColorSelectionMode.RGB](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.ColorSelectionMode.html). Color formats can be switched from HSV to RGB at runtime, using built-in color model `ComboBox`. +You can pick a color in the RGB (Red, Green, Blue) format by setting the `VisualizationStyle` property to [ColorSelectionMode.RGB](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.ColorSelectionMode.html). Color formats can be switched between HSV and RGB at runtime using the built-in color-model `ComboBox`. {% tabs %} {% highlight xaml %} @@ -64,7 +64,7 @@ this.Content = colorPicker; ### HSV -We can pick a color in HSV (Hue, Saturation, and Value/Brightness) color format by setting the value of the `VisualizationStyle` property as [ColorSelectionMode.HSV](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.ColorSelectionMode.html). Color formats can be switched from RGB to HSV at runtime, using built-in color model `ComboBox`. +You can pick a color in the HSV (Hue, Saturation, Value/Brightness) format by setting the `VisualizationStyle` property to [ColorSelectionMode.HSV](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.ColorSelectionMode.html). Color formats can be switched between RGB and HSV at runtime using the built-in color-model `ComboBox`. {% tabs %} {% highlight xaml %} @@ -85,19 +85,19 @@ this.Content = colorPicker; ## Get solid color using Hexadecimal code -Hexadecimal color values are also supported in `ColorPicker`, the built-in `TextBox` helps with color selection and editing. Based on the hexadecimal values in the `TextBox`, the color will be picked. +Hexadecimal color values are also supported in `ColorPicker`. The built-in `TextBox` allows you to enter or edit a color by hex value. The color is selected based on the hex value entered in the `TextBox`. ![ColorPicker with Hexadecimal color value editor](Selection-Mode_images/ColorPicker_Hexadecimal_Color-Code.png) ## Pick a color from anywhere (Eye Dropper) -`ColorPicker` consist of `eye-dropper` which can be dragged across the anywhere on the screen and picks the color where it is currently hovering above, along with the associated hexadecimal (HEX) color value. +`ColorPicker` includes an eye-dropper that you can drag anywhere on the screen. The eye-dropper picks the color of the pixel under it, along with the associated hexadecimal (HEX) color value. ![ColorPicker with Eye-Dropper](Selection-Mode_images/ColorPicker_Eyedropper.gif) ## Select a standard color -`ColorPicker` has built-in color `ComboBox` to select standard color easily. By default, the standard color `ComboBox` is not shown in the `ColorPicker`. If we want to use the standard color `ComboBox`, use the [IsColorPaletteVisible](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_IsColorPaletteVisible) property value as `true`. The default value of `IsColorPaletteVisible` property is `false`. +`ColorPicker` has a built-in color `ComboBox` to select a standard color easily. By default, the standard-color `ComboBox` is not shown. To display it, set the [IsColorPaletteVisible](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_IsColorPaletteVisible) property to `true`. The default value of `IsColorPaletteVisible` is `false`. {% tabs %} {% highlight xaml %} @@ -118,7 +118,7 @@ colorPicker.IsColorPaletteVisible = true; ## Solid color changed notification -Selected color changed in [ColorPicker](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html) can be examined using [ColorChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html) event. +The selected color in [ColorPicker](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html) can be observed using the [ColorChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_ColorChanged) event. {% tabs %} {% highlight xaml %} @@ -150,18 +150,20 @@ private void ColorPicker_ColorChanged(DependencyObject d, DependencyPropertyChan ## Get color name from color property -`ColorPicker` come along with method which returns the nearest names of [Color](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorEdit.html#Syncfusion_Windows_Shared_ColorEdit_Color) property, this can be obtained by [SuchColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorEdit.html#Syncfusion_Windows_Shared_ColorEdit_SuchColor_System_Windows_Media_Color_) method. We can get similar four color names of the `Color` property by passing the index value from 0 to 3 in the `SuchColor` method. +`ColorEdit` (the editable variant of `ColorPicker`) provides a [SuchColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorEdit.html#Syncfusion_Windows_Shared_ColorEdit_SuchColor_System_Windows_Media_Color_) method that returns up to four similar color names for the current [Color](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorEdit.html#Syncfusion_Windows_Shared_ColorEdit_Color) value. Pass an index from 0 to 3 to retrieve each name. {% tabs %} {% highlight xaml %} - - + + + + {% endhighlight %} {% highlight C# %} -ColorPicker colorPicker= new ColorPicker(); +ColorEdit colorPicker = new ColorEdit(); colorPicker.SelectedBrushChanged += ColorPicker_SelectedBrushChanged; {% endhighlight %} @@ -170,16 +172,18 @@ colorPicker.SelectedBrushChanged += ColorPicker_SelectedBrushChanged; {% tabs %} {% highlight C# %} -private void ColorPicker_SelectedBrushChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) -{ +private void ColorPicker_SelectedBrushChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { + //Display the nearest color name textBlock.Text = Syncfusion.Windows.Shared.ColorEdit.SuchColor(colorPicker.Color)[0]; } {% endhighlight %} {% endtabs %} +N> `SuchColor` is defined on the `ColorEdit` control. If you are using `ColorPicker`, cast the underlying model or switch the example to `ColorEdit`. + ![ColorPicker with selected color name](Selection-Mode_images/ColorPicker_Selected_ColorName.png) - We can select a gradient colors which is explained in the [Select gradient color](https://help.syncfusion.com/wpf/color-picker/gradient-brush) page. + You can select a gradient color, which is explained in the [Select gradient color](https://help.syncfusion.com/wpf/color-picker/gradient-brush) page. Click [here](https://github.com/SyncfusionExamples/wpf-colorpicker-examples/tree/master/Samples/ChooseColor) to download the sample that showcases how to select a solid color from the `ColorPicker`. diff --git a/wpf/Color-Picker/Customization.md b/wpf/Color-Picker/Customization.md index 467220bad..6eaa1d75d 100644 --- a/wpf/Color-Picker/Customization.md +++ b/wpf/Color-Picker/Customization.md @@ -11,78 +11,82 @@ documentation: ug # Customization in WPF ColorPicker -[ColorPicker](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html) has build-in color palette to select solid color easily. This can be enabled using [IsColorPaletteVisible](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_IsColorPaletteVisible) property. +[ColorPicker](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html) has a built-in color palette to select a solid color easily. This can be enabled using the [IsColorPaletteVisible](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_IsColorPaletteVisible) property. {% tabs %} {% highlight xaml %} - + + + {% endhighlight %} {% highlight C# %} - IsColorPaletteVisible.IsColorPaletteVisible = true; +colorEdit.IsColorPaletteVisible = true; {% endhighlight %} {% endtabs %} -![WPF ColorPicker IsColorPaletteVisible](ScRGB-Color_images/ColorPicker_ColorPalleteEnabled.png) - +![WPF ColorPicker with color palette enabled](ScRGB-Color_images/ColorPicker_ColorPalleteEnabled.png) ## Gradient brush display mode -Brush representation of ColorPicker can be customized using [GradientBrushDisplayMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_GradientBrushDisplayMode) property. +The brush representation of `ColorPicker` can be customized using the [GradientBrushDisplayMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_GradientBrushDisplayMode) property. The default value of `GradientBrushDisplayMode` is `Default`. {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight C# %} -colorPicker1.GradientBrushDisplayMode = Syncfusion.Windows.Tools.GradientBrushDisplayMode.Extended; +colorPicker.GradientBrushDisplayMode = Syncfusion.Windows.Tools.GradientBrushDisplayMode.Extended; {% endhighlight %} {% endtabs %} -![ColorPicker-HeaderTemplate-WPF](New-User-Interface-Support_images/GradientDisplayMode_Default.png) +![ColorPicker with Extended gradient display mode](New-User-Interface-Support_images/GradientDisplayMode_Default.png) {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight C# %} -colorPicker1.GradientBrushDisplayMode = Syncfusion.Windows.Tools.GradientBrushDisplayMode.Default; +colorPicker.GradientBrushDisplayMode = Syncfusion.Windows.Tools.GradientBrushDisplayMode.Default; {% endhighlight %} {% endtabs %} -![ColorPicker-HeaderTemplate-WPF](New-User-Interface-Support_images/GradientDisplayMode_Extended.png) +![ColorPicker with Default gradient display mode](New-User-Interface-Support_images/GradientDisplayMode_Extended.png) -## Inverted Color +## Inverted Color -[ColorEdit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorEdit.html) has option to get the contrast/inverted color of the selected color using [InvertColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorEdit.html#Syncfusion_Windows_Shared_ColorEdit_InvertColor) property. +[ColorEdit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorEdit.html) provides a way to get the inverted color of the selected color using the [InvertColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorEdit.html#Syncfusion_Windows_Shared_ColorEdit_InvertColor) property. This is useful for generating a contrast color for the current selection. {% tabs %} {% highlight xaml %} - - - - - - + + + + + + + + {% endhighlight %} {% highlight C# %} -textblock2.Background = ColorEdit2.Brush; - -textblock2.Foreground = new SolidColorBrush(ColorEdit3.InvertColor); +textBlock.Background = colorEdit.Brush; +textBlock.Foreground = new SolidColorBrush(colorEdit.InvertColor); {% endhighlight %} {% endtabs %} @@ -91,18 +95,22 @@ textblock2.Foreground = new SolidColorBrush(ColorEdit3.InvertColor); ## ScRGB-Color -ScRGB color can be obtained by setting [IsScRGBColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorEdit.html#Syncfusion_Windows_Shared_ColorEdit_IsScRGBColor) property in ColorEdit. +ScRGB is a wide-gamut color space that allows color values outside the sRGB range (such as those beyond 1.0 or below 0.0). To enable ScRGB color editing in `ColorEdit`, set the [IsScRGBColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorEdit.html#Syncfusion_Windows_Shared_ColorEdit_IsScRGBColor) property to `true`. The default value of `IsScRGBColor` is `false`. {% tabs %} {% highlight xaml %} - + + + {% endhighlight %} {% highlight C# %} - ColorEdit2.IsScRGBColor = true; +colorEdit.IsScRGBColor = true; {% endhighlight %} {% endtabs %} -![WPF ColorPicker IsAlphaVisible](ScRGB-Color_images/ColorPicker_IsScRGBColor.png) \ No newline at end of file +![WPF ColorPicker with ScRGB color editing](ScRGB-Color_images/ColorPicker_IsScRGBColor.png) + +N> `IsScRGBColor` is a `ColorEdit`-only property and is not available on `ColorPicker`. \ No newline at end of file diff --git a/wpf/Color-Picker/Getting-Started.md b/wpf/Color-Picker/Getting-Started.md index 9b8f8cd40..757dceb2e 100644 --- a/wpf/Color-Picker/Getting-Started.md +++ b/wpf/Color-Picker/Getting-Started.md @@ -23,11 +23,11 @@ Refer to this [documentation](https://help.syncfusion.com/wpf/installation/insta ## Adding WPF ColorPicker via designer -`ColorPicker` can be added to an application by dragging it from the toolbox to a designer view. The following dependent assemblies will be added automatically: +`ColorPicker` can be added to an application by dragging it from the toolbox onto a view in the designer. The following dependent assembly will be added automatically: * Syncfusion.Shared.WPF - ![WPF Color Picker Drag and dropped from ToolBox](getting-started_images/wpf-color-picker-drag-and-dropped-from-toolbox.png) +![WPF Color Picker Drag and dropped from ToolBox](getting-started_images/wpf-color-picker-drag-and-dropped-from-toolbox.png) ## Adding WPF ColorPicker via XAML @@ -39,24 +39,21 @@ To add the `ColorPicker` manually in XAML, follow these steps: * Syncfusion.Shared.WPF -3. Import Syncfusion® WPF schema **http://schemas.syncfusion.com/wpf**, and declare the `ColorPicker` in WPF XAML page. +3. Import the Syncfusion® WPF schema **http://schemas.syncfusion.com/wpf** and declare the `ColorPicker` on the XAML page. {% capture codesnippet1 %} {% tabs %} {% highlight XAML %} - - - - + + + + {% endhighlight %} {% endtabs %} @@ -69,51 +66,40 @@ To add the `ColorPicker` manually in XAML, follow these steps: To add the `ColorPicker` manually in C#, follow these steps: -1. Create a new WPF application via Visual Studio. +1. Create a new WPF application in Visual Studio. -2. Add the following required assembly references to the project: +2. Add the following required assembly reference to the project: * Syncfusion.Shared.WPF -3. Include the required namespace. +3. Include the required namespace and create an instance of `ColorPicker`. {% capture codesnippet2 %} {% tabs %} {% highlight C# %} -using Syncfusion.Windows.Shared; - -{% endhighlight %} -{% endtabs %} -{% endcapture %} -{{ codesnippet2 | OrderList_Indent_Level_1 }} - - -4. Create an instance of `ColorPicker`, and add it to the window. - -{% capture codesnippet3 %} -{% tabs %} -{% highlight C# %} +// Required usings: +// using Syncfusion.Windows.Shared; ColorPicker colorPicker = new ColorPicker(); colorPicker.Width = 300; -colorPicker.Height=100; +colorPicker.Height = 100; {% endhighlight %} {% endtabs %} {% endcapture %} -{{ codesnippet3 | OrderList_Indent_Level_1 }} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ![WPF Color Picker Control](getting-started_images/wpf-color-picker-dropdown.png) ## Select a Color -We can select a solid color or gradient color from a `ColorPicker` using the [Color](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_Color) and [Brush](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_Brush) properties. +You can select a solid color or a gradient color from `ColorPicker` using the [Color](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_Color) and [Brush](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_Brush) properties. The default value of `Color` is `Transparent`, and the default value of `Brush` is `null`. ### Select Solid Color -We can select the solid color by using the `Color` property. +You can select a solid color by using the `Color` property. {% tabs %} {% highlight xaml %} @@ -134,11 +120,11 @@ colorPicker.Color = Colors.Yellow; ### Select a Gradient Color -We can select a linear or radial gradient color which holds the multiple colors from the `ColorPicker`. +You can select a linear or radial gradient brush that contains multiple colors from the `ColorPicker`. -#### Linear Gradient #### +#### Linear Gradient -Linear Gradient color can be selected by the multiple colors and their location along the gradient axis using the `GradientStops` objects and [StartPoint](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorEdit.html#Syncfusion_Windows_Shared_ColorEdit_Startpoint) and [EndPoint](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorEdit.html#Syncfusion_Windows_Shared_ColorEdit_Endpoint) properties. Based on the `StartPoint` and `EndPoint`, the selected colors will be combined in linear manner. +A linear gradient can be configured with multiple colors and their locations along the gradient axis using `GradientStop` objects and the [StartPoint](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorEdit.html#Syncfusion_Windows_Shared_ColorEdit_Startpoint) and [EndPoint](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorEdit.html#Syncfusion_Windows_Shared_ColorEdit_Endpoint) properties. The selected colors are combined in a linear manner based on `StartPoint` and `EndPoint`. {% tabs %} {% highlight xaml %} @@ -174,27 +160,32 @@ colorPicker.Brush = linearGradient; ![Choose a Linear Gradient from WPF Color Picker](getting-started_images/wpf-color-picker-linear-gradient.png) -#### Radial Gradient #### +#### Radial Gradient -Radial Gradient color is similar to Linear Gradient color, except for the axis defined by the circle. Based on the [GradientOrigin](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorEdit.html#Syncfusion_Windows_Shared_ColorEdit_GradientOrigin), `Center` and `RadiusPoint` properties values, the selected gradient colors are combined in a circle manner. +A radial gradient is similar to a linear gradient, except that the axis is defined by a circle. The selected gradient colors are combined in a circular manner based on the [GradientOrigin](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorEdit.html#Syncfusion_Windows_Shared_ColorEdit_GradientOrigin), `Center`, and `RadiusPoint` property values. {% tabs %} {% highlight xaml %} - - - + + + - - + + {% endhighlight %} {% highlight c# %} -//Creating a +// Required usings: +// using System.Windows; +// using System.Windows.Media; +// using Syncfusion.Windows.Shared; + +//Creating a radial gradient brush RadialGradientBrush radialGradient = new RadialGradientBrush(); radialGradient.GradientOrigin = new Point(0.5, 0.5); radialGradient.Center = new Point(0.5, 0.5); @@ -205,6 +196,7 @@ radialGradient.GradientStops.Add(new GradientStop(Colors.Red, 0.25)); radialGradient.GradientStops.Add(new GradientStop(Colors.Blue, 0.75)); radialGradient.GradientStops.Add(new GradientStop(Colors.LimeGreen, 1.0)); +//Assigning the radial gradient brush to ColorPicker colorPicker.Brush = radialGradient; {% endhighlight %} @@ -214,13 +206,7 @@ colorPicker.Brush = radialGradient; ### Change Selected Color at runtime -`ColorPicker` consist of bunch of input components to select color and edit its properties at runtime. - -![Choose and edit a color from WPF Color Picker at runtime](getting-started_images/wpf-color-picker-Choose-edit-color.gif) - -## Color and Brush changed notification - -Selected Color and Brush changed in [ColorPicker](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html) can be examined using [SelectedBrushChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_SelectedBrushChanged) and [ColorChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_ColorChanged) events. +The selected color and brush in [ColorPicker](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html) can be observed using the [SelectedBrushChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_SelectedBrushChanged) and [ColorChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_ColorChanged) events. {% tabs %} {% highlight xaml %} @@ -232,7 +218,7 @@ Selected Color and Brush changed in [ColorPicker](https://help.syncfusion.com/cr {% endhighlight %} {% highlight c# %} -ColorPicker colorPicker = new ColorPicker(); +ColorPicker colorPicker = new ColorPicker(); colorPicker.SelectedBrushChanged += ColorPicker_SelectedBrushChanged; colorPicker.ColorChanged += ColorPicker_ColorChanged; @@ -243,15 +229,17 @@ colorPicker.ColorChanged += ColorPicker_ColorChanged; {% highlight c# %} //Invoked when the selected color is changed -private void ColorPicker_ColorChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) -{ - // Enter your code here +private void ColorPicker_ColorChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { + //Read the new and old color + Color newColor = (Color)e.NewValue; + Color oldColor = (Color)e.OldValue; } //Invoked when the selected brush is changed -private void ColorPicker_SelectedBrushChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) -{ - // Enter your code here +private void ColorPicker_SelectedBrushChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { + //Read the new and old brush + Brush newBrush = (Brush)e.NewValue; + Brush oldBrush = (Brush)e.OldValue; } {% endhighlight %} @@ -259,7 +247,7 @@ private void ColorPicker_SelectedBrushChanged(DependencyObject d, DependencyProp ## Change opacity of the color -We can change the opacity of the selected color by using the A-Alpha value editor or delicate slider in the `ColorPicker`. We can hide the A-Alpha value editor and delicate slider by using the [IsAlphaVisible](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_IsAlphaVisible) property value as `false`. The default value of the `IsAlphaVisible` property is `true`. +You can change the opacity of the selected color using the A (alpha) value editor or the alpha slider in the `ColorPicker`. You can hide the alpha value editor and the slider by setting the [IsAlphaVisible](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_IsAlphaVisible) property to `false`. The default value of `IsAlphaVisible` is `true`. {% tabs %} {% highlight xaml %} @@ -275,17 +263,17 @@ colorPicker.IsAlphaVisible = false; {% endhighlight %} {% endtabs %} -![WPF Color Picker hides the Alpha slider and vale editor](scrgb-color_images/wpf-color-picker-alpha-and-vale.png) +![WPF Color Picker hides the Alpha slider and value editor](scrgb-color_images/wpf-color-picker-alpha-and-vale.png) ## Switch between Solid, Linear and Gradient brush mode -We can change the color selection mode directly by clicking on the corresponding Solid, Linear or Gradient brush mode buttons which are placed in the bottom right corner of the `ColorPicker`. +You can switch the color-selection mode by clicking the corresponding Solid, Linear, or Gradient button placed in the bottom-right corner of the `ColorPicker`. The default brush mode is `Solid`. ![WPF Color Picker popup gradient Editor](colorpicker-with-gradient-support_images/wpf-color-picker-switch-brushes.png) -### Restrict the brush mode from Solid to Gradient +### Hide the brush mode switch buttons - We can restrict color selection mode switching at runtime by setting the [EnableSolidToGradientSwitch](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_EnableSolidToGradientSwitch) property value as `false`. It will hide the Solid, Linear and Gradient brush switch buttons. +You can hide the Solid, Linear, and Gradient brush-mode switch buttons by setting the [EnableSolidToGradientSwitch](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_EnableSolidToGradientSwitch) property to `false`. The default value of `EnableSolidToGradientSwitch` is `true`. {% tabs %} {% highlight xaml %} @@ -296,7 +284,7 @@ We can change the color selection mode directly by clicking on the corresponding {% highlight C# %} -ColorPicker colorPicker = new ColorPicker (); +ColorPicker colorPicker = new ColorPicker(); colorPicker.EnableSolidToGradientSwitch = false; {% endhighlight %} diff --git a/wpf/Color-Picker/Gradient-Brush.md b/wpf/Color-Picker/Gradient-Brush.md index 9b2344768..aa7f254ff 100644 --- a/wpf/Color-Picker/Gradient-Brush.md +++ b/wpf/Color-Picker/Gradient-Brush.md @@ -13,39 +13,39 @@ This section gives a brief note on how to create gradient color, modify their co ## What is a gradient color? -A gradient color paints an area with multiple colors that blend into each other along an axis. [ColorPicker](https://www.syncfusion.com/wpf-ui-controls/colorpicker) now comes with Gradient tools which returns a brush of type Linear and Radial gradient colors. The offsets can be added or dropped dynamically and its position can be changed to produce different color combinations. +A gradient color paints an area with multiple colors that blend along an axis. [ColorPicker](https://www.syncfusion.com/wpf-ui-controls/colorpicker) includes gradient tools that return a brush of type `LinearGradientBrush` or `RadialGradientBrush`. Offsets can be added or removed dynamically, and their positions can be changed to produce different color combinations. ![ColorPicker with Gradient Mode](ColorPicker-with-Gradient-Support_images/ColorPicker_Gradient_Mode.png) ## Create Gradient colors using GradientStops Editor -We can add a multiple color combination for the gradient color using the `GradientStopsEditor`. We can add new gradient stops, change the offset and change the color of the gradient stops at run-time. The created gradient stops are combined together provides a gradient color. +You can add a multiple-color combination for the gradient color using the `GradientStopsEditor`. You can add new gradient stops, change the offset, and change the color of the gradient stops at runtime. The created gradient stops are combined together to provide a gradient color. ![ColorPicker with GradientStopsEditors](ColorPicker-with-Gradient-Support_images/ColorPicker_Stopper_editing.png) ### Add or Remove GradientStops -We can add a more colors for the gradient color by using the gradient stops. Gradient stops can be added to existing gradient by clicking on the `GradientStopEditor`. +You can add more colors to the gradient by using gradient stops. Gradient stops can be added to an existing gradient by clicking the `GradientStopEditor`. -To remove a gradient stops, select the gradient stop which want to be remove and press `Delete` key or mouse drag it away, so that it will removed from the `GradientStopsEditor`. +To remove a gradient stop, select the gradient stop you want to remove and press the `Delete` key, or drag it away with the mouse so that it is removed from the `GradientStopEditor`. ![ColorPicker with add and removing gradient colors](ColorPicker-with-Gradient-Support_images/ColorPicker_Stopper_Adding.gif) ### Rearrange GradientStops -We can re-arrange the color combination of the gradient color by adjusting the gradient stops. Gradient stops positions can be altered just by dragging it along the `GradientStopEditor`. The Gradient color will be generated on the basis of the order of the gradient stops arranged. +You can rearrange the color combination of the gradient by adjusting the gradient stops. Gradient-stop positions can be changed by dragging them along the `GradientStopEditor`. The gradient color is generated based on the order of the gradient stops. ![ColorPicker with arranging the gradient colors](ColorPicker-with-Gradient-Support_images/ColorPicker_Stopper_Arranging.gif) ### Change GradientStops Colors -We can change the colors for created gradient color by changing the color of gradient stops. Color of a gradient stops changed by selecting that particular gradient stop and change the color from the color picker. +You can change the colors of a created gradient by changing the color of its gradient stops. The color of a gradient stop is changed by selecting that particular gradient stop and choosing a new color from the color picker. ![ColorPicker with changing the gradient colors](ColorPicker-with-Gradient-Support_images/ColorPicker_Stopper_Changing.gif) ## Create Linear Gradient colors -We can create linear gradient color by programmatically using the `LinearGradientBrush` with its `LinearGradientBrush.GradientStops`, `StartPoint` and `EndPoint` properties or can create and change it at runtime by using `GradientStopsEditor` and `StartPoint`, `EndPoint` input options available in the `GradientPropertyEditor`. By default, the linear gradient colors are combined horizontally by start and end points. The default value of `StartPoint` is (0.5, 0) and `EndPoint` is (0.5, 1). +You can create a linear gradient color programmatically using `LinearGradientBrush` with its `GradientStops`, `StartPoint`, and `EndPoint` properties. You can also create and change the linear gradient at runtime by using the `GradientStopsEditor` and the `StartPoint`/`EndPoint` input options available in the `GradientPropertyEditor`. By default, the linear gradient colors are combined horizontally. The default value of `StartPoint` is `(0.5, 0)`, and the default value of `EndPoint` is `(0.5, 1)`. ![ColorPicker with LinearGradient Editor](ColorPicker-with-Gradient-Support_images/ColorPicker_LinearGradient_Mode.png) @@ -125,7 +125,7 @@ Here, Linear Gradient created by the gradient colors and their location along th ## Create Radial Gradient colors -We can create radial gradient colors by programmatically using the `RadialGradientBrush ` with its `RadialGradientBrush.GradientStops`, `GradientOrigin`, `Radius` and `Centre` properties. Radial gradient brush colors can changed at runtime using the `GradientStopsEditor` and its `GradientOrigin`, `Centre` and `Radius` can be changed at runtime using the input options available in the `GradientPropertyEditor`. +You can create a radial gradient color programmatically using `RadialGradientBrush` with its `GradientStops`, `GradientOrigin`, `Radius`, and `Center` properties. Radial gradient brush colors can be changed at runtime using the `GradientStopsEditor`, and the `GradientOrigin`, `Center`, and `Radius` can be changed at runtime using the input options available in the `GradientPropertyEditor`. @@ -216,12 +216,12 @@ Here, Radial Gradient created by the gradient colors and their location along th ## Show or Hide RadialGradientBrush properties -We can control the visibility of RadialGradientBrush properties using the `IsGradientOriginVisible`, `IsCenterVisible`, and `IsRadiusVisible` properties. By default, all RadialGradientBrush properties are visible, with their default values as `True`. To hide any of these properties, change the respective property value to `False`. +You can control the visibility of RadialGradientBrush properties using the `IsGradientOriginVisible`, `IsCenterVisible`, and `IsRadiusVisible` properties. By default, all RadialGradientBrush properties are visible (`True`). To hide any of these properties, set its value to `False`. {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% endtabs %} @@ -238,24 +238,24 @@ colorPicker.IsCenterVisible = false; ## Reverse the Gradient Colors -[ColorPicker](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html) comes with the reverse button which helps in changing the gradient colors upside down or in case of radial gradient inside out. +[ColorPicker](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html) includes a reverse button that flips the gradient — vertically for a linear gradient, and inside-out for a radial gradient. ![ColorPicker with gradient color reverse button](ColorPicker-with-Gradient-Support_images/ColorPicker_Reverse_Button_change.png) ## Show selected gradient color name -By default, the selected Gradient mode name is displayed in `ColorPicker`. If we want to display the selected gradient color name instead of the Gradient mode name, use the [GradientBrushDisplayMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_GradientBrushDisplayMode) value as `Extended`. The default value of `GradientBrushDisplayMode` property is `Default`. +By default, the selected gradient mode name is displayed in `ColorPicker`. To display the selected gradient color name instead, set the [GradientBrushDisplayMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_GradientBrushDisplayMode) property to `Extended`. The default value of `GradientBrushDisplayMode` is `Default`. {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight C# %} ColorPicker colorPicker = new ColorPicker(); -colorPicker.GradientBrushDisplayMode = GradientBrushDisplayMode.Extended; +colorPicker.GradientBrushDisplayMode = GradientBrushDisplayMode.Extended; {% endhighlight %} {% endtabs %} @@ -264,32 +264,32 @@ colorPicker.GradientBrushDisplayMode = GradientBrushDisplayMode.Extended; ## Show gradient color value editor -We can display the gradient property editor either in popup mode or in extended mode. By default, the gradient property editor is displayed in the extended mode. If we want display the gradient property editor only in a popup, use the [GradientPropertyEditorMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_GradientPropertyEditorMode) property value as `PopUp`. +You can display the gradient property editor in either pop-up mode or extended mode. By default, the editor is displayed in extended mode. To display the editor only in a pop-up, set the [GradientPropertyEditorMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_GradientPropertyEditorMode) property to `Popup`. The default value of `GradientPropertyEditorMode` is `Extended`. {% tabs %} {% highlight xaml %} - + {% endhighlight %} {% highlight C# %} ColorPicker colorPicker = new ColorPicker(); -colorPicker.GradientPropertyEditorMode = GradientPropertyEditorMode.Popup; +colorPicker.GradientPropertyEditorMode = GradientPropertyEditorMode.Popup; {% endhighlight %} {% endtabs %} -![Colorpicker with popup and expanded gradient property editor](ColorPicker-with-Gradient-Support_images/Colorpicker_Popup_gradientEditor.png) +![ColorPicker with popup and expanded gradient property editor](ColorPicker-with-Gradient-Support_images/Colorpicker_Popup_gradientEditor.png) -## Switch between Solid, Gradient mode +## Switch between Solid, Linear, and Gradient brush mode -We can change the brush mode from solid to gradient or vice versa at runtime as well as programmatically. By default, the `Solid` brush mode is enabled. If we want `Gradient` brush mode, use the [BrushMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorEdit.html#Syncfusion_Windows_Shared_ColorEdit_BrushMode) property value as `Gradient`. +You can switch the brush mode from solid to linear or radial gradient (and vice versa) either at runtime or programmatically. By default, the `Solid` brush mode is enabled. To enable the `Gradient` brush mode, set the [BrushMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorEdit.html#Syncfusion_Windows_Shared_ColorEdit_BrushMode) property to `Gradient`. You can also switch the brush mode by clicking the corresponding Solid, Linear, or Gradient button placed in the bottom-right corner of the `ColorPicker`. To hide these buttons, set [EnableSolidToGradientSwitch](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_EnableSolidToGradientSwitch) to `false`. The default value of `EnableSolidToGradientSwitch` is `true`. {% tabs %} {% highlight xaml %} - + {% endhighlight %} @@ -333,7 +333,7 @@ colorPicker.EnableSolidToGradientSwitch = false; ## Gradient color changed notification -Selected gradient color changed in [ColorPicker](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html) can be examined using [SelectedBrushChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html) event. +The selected gradient color in [ColorPicker](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html) can be observed using the [SelectedBrushChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorPicker.html#Syncfusion_Windows_Shared_ColorPicker_SelectedBrushChanged) event. {% tabs %} {% highlight xaml %} @@ -344,7 +344,7 @@ Selected gradient color changed in [ColorPicker](https://help.syncfusion.com/cr/ {% endhighlight %} {% highlight c# %} -ColorPicker colorPicker = new ColorPicker(); +ColorPicker colorPicker = new ColorPicker(); colorPicker.SelectedBrushChanged += ColorPicker_SelectedBrushChanged; {% endhighlight %} @@ -354,9 +354,10 @@ colorPicker.SelectedBrushChanged += ColorPicker_SelectedBrushChanged; {% highlight c# %} //Invoked when the selected brush is changed -private void ColorPicker_SelectedBrushChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) -{ - // Enter your code here +private void ColorPicker_SelectedBrushChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { + //Read the new and old brush + Brush newBrush = (Brush)e.NewValue; + Brush oldBrush = (Brush)e.OldValue; } {% endhighlight %} diff --git a/wpf/Color-Picker/Overview.md b/wpf/Color-Picker/Overview.md index c04e84669..3cd59b972 100644 --- a/wpf/Color-Picker/Overview.md +++ b/wpf/Color-Picker/Overview.md @@ -9,19 +9,18 @@ documentation: ug # About Syncfusion® WPF ColorPicker Control - WPF [ColorPicker](https://www.syncfusion.com/wpf-controls/colorpicker) is an user interface to select and adjust color values. This supports various color specifications like RGB (Red Green Blue), HSV (Hue Saturation Value), and Hex codes. +WPF [ColorPicker](https://www.syncfusion.com/wpf-controls/colorpicker) is a user interface to select and adjust color values. It supports various color models such as RGB (Red, Green, Blue), HSV (Hue, Saturation, Value), and hex codes. - ![Syncfusion WPF Color Picker](getting-started_images/wpf-color-picker-overview.png) +![Syncfusion WPF Color Picker](Getting-Started_images/wpf-color-picker-overview.png) -This section also discusses the WPF `ColorEdit` control, which is similar to the `ColorPicker`. +This section also discusses the WPF [`ColorEdit`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.ColorEdit.html) control, which is the editable variant of `ColorPicker` and is used in the customization examples. ## Features -* **Color Editing** - Drag the handle to pick your favorite color in the picker region or set the color values manually with input control (RGB or HSV or Hex codes). - -* A slider displaying the **Hue spectrum**, allowing for selection of a hue value. -* **Gradient Editor** - Sliders capable of altering the stops of a linear or radial brush. -* **EyeDropper** - Drag the eyedropper to anywhere in your application to pick the color of a specific location or even a point. -* Supports **ToolTip** to show the selected color while dragging the picker in `ColorEdit` control. -* Supports **rich set of Themes** to alter the look and feel of the control according to the application needs. -* Comes with build-in color palette drop down for ease color selection. \ No newline at end of file +* **Color editing** - Drag the handle to pick a color in the picker region, or set the color values manually with the input controls (RGB, HSV, or hex codes). +* A slider that displays the **hue spectrum**, allowing selection of a hue value. +* **Gradient editor** - Sliders capable of altering the stops of a linear or radial brush. +* **Eye-dropper** - Drag the eye-dropper anywhere in your application to pick the color of a specific location or pixel. +* Supports a **tooltip** to show the selected color while dragging the picker in the `ColorEdit` control. +* Supports a **rich set of themes** to alter the look and feel of the control according to the application's needs. +* Comes with a built-in color palette drop-down for easy color selection (enable with `IsColorPaletteVisible="True"`). \ No newline at end of file diff --git a/wpf/Currency-TextBox/Appearance.md b/wpf/Currency-TextBox/Appearance.md index b022f5733..5a8454da1 100644 --- a/wpf/Currency-TextBox/Appearance.md +++ b/wpf/Currency-TextBox/Appearance.md @@ -110,7 +110,7 @@ currencyTextBox.Background = Brushes.Cyan; {% endhighlight %} {% endtabs %} -![WPF CurrencyTextBox with Cyan Bbackground](Appearance_images/wpf-currency-textbox-background.png) +![WPF CurrencyTextBox with Cyan Background](Appearance_images/wpf-currency-textbox-background.png) ## Setting the Corner Radius @@ -143,7 +143,7 @@ currencyTextBox.CornerRadius = new CornerRadius(5); {% tabs %} {% highlight XAML %} - + {% endhighlight %} {% highlight C# %} @@ -159,7 +159,7 @@ currencyTextBox.SelectionOpacity = 0.3; ![WPF CurrencyTextBox with Red Selection Background](Appearance_images/wpf-currency-textbox-selection.png) -## Align Value +## Aligning the Value `CurrencyTextBox` allows to display the value from right or center or left side by setting the [TextAlignment](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.textblock.textalignment?view=netframework-4.8) property to `Right` or `Left` or `Center`. The Default value of `TextAlignment` is `Left`. @@ -211,4 +211,4 @@ CurrencyTextBox supports various built-in themes. Refer to the below links to ap * [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme) - ![Applying Theme to WPF CurrencyTextBox](Getting-Started_images/wpf-currency-textbox-theme.png) + ![Applying Theme to WPF CurrencyTextBox](Getting-Started_images/wpf-currency-textbox-theme.png) \ No newline at end of file diff --git a/wpf/Currency-TextBox/Changing-Currency-Value.md b/wpf/Currency-TextBox/Changing-Currency-Value.md index ca0d67637..44d4aa948 100644 --- a/wpf/Currency-TextBox/Changing-Currency-Value.md +++ b/wpf/Currency-TextBox/Changing-Currency-Value.md @@ -48,7 +48,9 @@ ViewModel.cs {% tabs %} {% highlight C# %} -class ViewModel : NotificationObject +using Syncfusion.Windows.Shared; + +public class ViewModel : NotificationObject { private double myValue; public double MyValue @@ -70,9 +72,9 @@ class ViewModel : NotificationObject ![WPF CurrencyTextBox displays Binding Value](Changing-Currency-Value_images/wpf-currency-textbox-binding-value.png) -## Change currency value by pasting the clipboard's text +## Change Currency Value by Pasting the Clipboard's Text -By default, `CurrencyTextBox` simply replaces the whole value by copied value with the current number format. If you want to replace or insert the copied value on specific place, use the [PasteMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_PasteMode) property value as `Advanced`. The default value of `PasteMode` property is `Default`. +By default, `CurrencyTextBox` simply replaces the whole value with the copied value using the current number format. If you want to replace or insert the copied value at a specific position, set the [PasteMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_PasteMode) property to `Advanced`. The default value of `PasteMode` is `Default` (always replace the entire value, regardless of the cursor position or selection). The following table explains the pasting behaviour in `Advanced` paste mode, @@ -152,7 +154,7 @@ currencyTextBox.ShowSpinButton = true; ## Value Changed Event -The `CurrencyTextBox` control can notify changes in value through the [ValueChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html) event. In `ValueChanged` event, you can get old value and new value from the `OldValue` and `NewValue` properties. +The `CurrencyTextBox` control can notify changes in value through the [ValueChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html) event. In the `ValueChanged` event, you can get the old and new value from the `OldValue` and `NewValue` properties. {%tabs%} {% highlight xaml %} @@ -163,7 +165,7 @@ The `CurrencyTextBox` control can notify changes in value through the [ValueChan {% highlight C# %} CurrencyTextBox currencyTextBox = new CurrencyTextBox(); -currencyTextBox.ValueChanged += new PropertyChangedCallback(CurrencyTextBox_ValueChanged); +currencyTextBox.ValueChanged += CurrencyTextBox_ValueChanged; {% endhighlight %} {%endtabs%} @@ -235,7 +237,7 @@ currencyTextBox.UseNullOption = true; ## Setting Watermark Text -We can display certain information within the control by using the [WaterMarkText](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkText) property. `WaterMarkText` is shown when the [WatermarkTextIsVisible](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkTextIsVisible) property is `true` and the value is `null` or empty, the control is not in focus and the `UseNullOption` property is `true`. +You can display placeholder text within the control by setting the [WatermarkText](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkText) property. The `WatermarkText` is shown only when the [WatermarkTextIsVisible](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkTextIsVisible) property is `true`, the `Value` is `null` or empty (which requires the `UseNullOption` property to be `true` because `Value` is non-nullable by default), the control is not in focus, and the `UseNullOption` property is `true`. ### Setting the WatermarkText Foreground diff --git a/wpf/Currency-TextBox/Culture-and-Number-Formats.md b/wpf/Currency-TextBox/Culture-and-Number-Formats.md index 88541db64..629770ef1 100644 --- a/wpf/Currency-TextBox/Culture-and-Number-Formats.md +++ b/wpf/Currency-TextBox/Culture-and-Number-Formats.md @@ -9,7 +9,7 @@ documentation: ug # Culture and Formatting in WPF CurrencyTextBox -Value of `CurrencyTextBox` can be formatted in following ways: +Value of `CurrencyTextBox` can be formatted in the following ways: * Culture * NumberFormatInfo @@ -47,21 +47,30 @@ By default the US culture uses “,” as the `CurrencyGroupSeparator` "$" as `C ![WPF CurrencyTextBox with France Culture](Culture-and-Number-Formats_images/wpf-currency-textbox-france-culture.png) -## NumberFormatInfo based formatting +## NumberFormatInfo-Based Formatting -The number formatting of `CurrencyTextBox` can be customized by setting [NumberFormat](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_NumberFormat) property. +The number formatting of `CurrencyTextBox` can be customized by setting the [NumberFormat](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_NumberFormat) property. {% tabs %} {% highlight xaml %} - - - - - + + + + + + + + + {% endhighlight %} @@ -84,11 +93,13 @@ currencyTextBox.NumberFormat = new NumberFormatInfo() ![WPF CurrencyTextBox with Formatting](Culture-and-Number-Formats_images/wpf-currency-textbox-formatting.png) -The following code illustrate how to set currency group size by using the `NumberFormat` property. +The following code illustrates how to set the currency group size by using the `NumberFormat` property. {% tabs %} {% highlight C# %} +using System.Globalization; + CurrencyTextBox currencyTextBox = new CurrencyTextBox(); currencyTextBox.Width = 150; currencyTextBox.Height = 25; @@ -111,9 +122,9 @@ currencyTextBox.NumberFormat = new NumberFormatInfo() ## Formatting with dedicated properties -The number formatting of `CurrencyTextBox` can also be customized by setting the [CurrencyGroupSeparator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_CurrencyGroupSeparator), [CurrencyGroupSizes](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_CurrencyGroupSizes), [CurrencyDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_CurrencyDecimalDigits) and [CurrencyDecimalSeparator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_CurrencyDecimalSeparator), [CurrencySymbol](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_CurrencySymbol), [CurrencyNegativePattern](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_CurrencyNegativePattern), and [CurrencyPositivePattern](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_CurrencyPositivePattern) properties of CurrencyTextBox. You can show the group separator by enable the [GroupSeperatorEnabled](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_GroupSeperatorEnabled) property to `true`. +The number formatting of `CurrencyTextBox` can also be customized by setting the [CurrencyGroupSeparator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_CurrencyGroupSeparator), [CurrencyGroupSizes](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_CurrencyGroupSizes), [CurrencyDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_CurrencyDecimalDigits) and [CurrencyDecimalSeparator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_CurrencyDecimalSeparator), [CurrencySymbol](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_CurrencySymbol), [CurrencyNegativePattern](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_CurrencyNegativePattern), and [CurrencyPositivePattern](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_CurrencyPositivePattern) properties of CurrencyTextBox. You can show the group separator by enabling the [GroupSeparatorEnabled](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_GroupSeparatorEnabled) property (`true`). -The following code illustrate how to format using the `CurrencyDecimalSeparator`, `CurrencyDecimalDigits`, `CurrencyGroupSeparator`, `CurrencyGroupSizes` property of the `CurrencyTextBox`. +The following code illustrates how to format using the `CurrencyDecimalSeparator`, `CurrencyDecimalDigits`, `CurrencyGroupSeparator`, and `CurrencyGroupSizes` properties of the `CurrencyTextBox`. {% tabs %} {% highlight C# %} @@ -124,19 +135,19 @@ currencyTextBox.Height = 25; currencyTextBox.Value = 123456789; currencyTextBox.CurrencySymbol = "#"; currencyTextBox.CurrencyDecimalDigits = 4; -currencyTextBox.GroupSeperatorEnabled = true; +currencyTextBox.GroupSeparatorEnabled = true; currencyTextBox.CurrencyGroupSeparator = "/"; currencyTextBox.CurrencyDecimalSeparator = "*"; // Adding the currency group size via CurrencyGroupSizes property. -currencyTextBox.CurrencyGroupSizes = new Int32Collection() { 4, 3, 2 }; +currencyTextBox.CurrencyGroupSizes = new int[] { 4, 3, 2 }; {% endhighlight %} {% endtabs %} ![WPF CurrencyTextBox with Formatting](Culture-and-Number-Formats_images/wpf-currency-textbox-number-format.png) -N> When you use both the `NumberFormat` and the dedicated properties (`CurrencyGroupSeparator`, `CurrencySymbol`, `CurrencyDecimalDigits`, `CurrencyDecimalSeparator` and `CurrencyGroupSizes`) to format the value of `CurrencyTextBox`, the `CurrencyGroupSeparator`and `CurrencyGroupSizes` properties have higher priority. +N> When you use both the `NumberFormat` and the dedicated properties (`CurrencyGroupSeparator`, `CurrencySymbol`, `CurrencyDecimalDigits`, `CurrencyDecimalSeparator` and `CurrencyGroupSizes`) to format the value of `CurrencyTextBox`, the `CurrencyGroupSeparator` and `CurrencyGroupSizes` properties have higher priority. N> When you use both `NumberFormat` and `Culture`, the `NumberFormat` will have a higher priority. @@ -188,7 +199,7 @@ currencyTextBox.CurrencyPositivePattern = 3; {% endhighlight %} {% endtabs %} -![WPF CurrencyTextBox displays Postive Value Pattern](Culture-and-Number-Formats_images/wpf-currency-textbox-positive-value.png) +![WPF CurrencyTextBox displays Positive Value Pattern](Culture-and-Number-Formats_images/wpf-currency-textbox-positive-value.png) ### Negative Value Pattern diff --git a/wpf/Currency-TextBox/Getting-Started.md b/wpf/Currency-TextBox/Getting-Started.md index c5d5e1729..e98e4625c 100644 --- a/wpf/Currency-TextBox/Getting-Started.md +++ b/wpf/Currency-TextBox/Getting-Started.md @@ -41,7 +41,7 @@ To add the CurrencyTextBox control manually in XAML, follow these steps: {% highlight XAML %} @@ -121,7 +121,7 @@ currencyTextBox.Value = 100; {% endhighlight %} {% endtabs %} -![WPF Currency TextBox diplays Value](getting-started_images/wpf-currency-textbox-value.png) +![WPF Currency TextBox displays Value](getting-started_images/wpf-currency-textbox-value.png) N> Do not use the [Text](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.textbox.text?redirectedfrom=MSDN&view=netframework-4.7.2#System_Windows_Controls_TextBox_Text) property to set the value for the CurrencyTextBox. Use only the `Value` property. @@ -133,10 +133,8 @@ The following code snippets illustrate the value binding from one `CurrencyTextB {% tabs %} {% highlight XAML %} - - {% endhighlight %} {% endtabs %} @@ -145,7 +143,9 @@ ViewModel.cs {% tabs %} {% highlight C# %} -class ViewModel : NotificationObject +using Syncfusion.Windows.Shared; + +public class ViewModel : NotificationObject { private double myValue; public double MyValue @@ -169,7 +169,7 @@ class ViewModel : NotificationObject ## Value Changed Notification -The `CurrencyTextBox` control can notifies the value changes through the [ValueChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html) event. You can get old value and new Value from `OldValue` and `NewValue` properties in `ValueChanged` event. +The `CurrencyTextBox` control can notify value changes through the [ValueChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html) event. You can get the old and new value from the `OldValue` and `NewValue` properties in the `ValueChanged` event. {%tabs%} {% highlight xaml %} @@ -180,7 +180,7 @@ The `CurrencyTextBox` control can notifies the value changes through the [ValueC {% highlight C# %} CurrencyTextBox currencyTextBox = new CurrencyTextBox(); -currencyTextBox.ValueChanged += new PropertyChangedCallback(CurrencyTextBox_ValueChanged); +currencyTextBox.ValueChanged += CurrencyTextBox_ValueChanged; {% endhighlight %} {%endtabs%} diff --git a/wpf/Currency-TextBox/Overview.md b/wpf/Currency-TextBox/Overview.md index cf6b7f0e0..60226d13b 100644 --- a/wpf/Currency-TextBox/Overview.md +++ b/wpf/Currency-TextBox/Overview.md @@ -11,7 +11,7 @@ documentation: ug The `CurrencyTextBox` is a specialized input control designed to accept, format, and display numeric values as currency in WPF applications. It enforces numeric input, formats numbers according to currency conventions, and exposes a concise API for common scenarios such as data binding, range validation, culture-aware formatting, and UI-driven value adjustment. The control is intended for forms, financial entry screens, reporting dialogs, dashboards, and any UI that requires reliable currency input and presentation. -## Control structure +## Control Structure The `CurrencyTextBox` combines a text-editing area with a number-formatting layer and optional adorner for visual feedback. Typical visual elements include a watermark (placeholder text) when the control is empty, the formatted currency text, and an optional range adorner that can act like a progress indicator based on `MinValue`/`MaxValue`. @@ -19,14 +19,14 @@ The `CurrencyTextBox` combines a text-editing area with a number-formatting laye ![WPF Currency TextBox with Watermark Text](getting-started_images/wpf-currency-textbox-watermark.png) -## Typical usage scenarios +## Typical Usage Scenarios - Data-entry forms where users input monetary values (invoices, purchase orders, budgets). - Financial dashboards that present editable currency fields with immediate formatting. - Localized applications that must display currency values according to the user's culture and regional settings. - UI components that need numeric constraints, e.g., limits, step increments, or visual progress indication for values within a range. -## Key capabilities +## Key Capabilities - Value enforcement and parsing: accepts only decimal-compatible characters and exposes the current numeric value through the `Value` property. - Formatting and culture support: formats the displayed value as currency using either a `NumberFormatInfo` instance or the `Culture` property; supports dedicated formatting properties such as `CurrencySymbol`, `CurrencyDecimalDigits`, and `CurrencyGroupSeparator`. See details in [Culture and Formatting](Culture-and-Number-Formats.md). @@ -36,16 +36,20 @@ The `CurrencyTextBox` combines a text-editing area with a number-formatting laye - Data binding and notifications: supports two‑way binding on the `Value` property and exposes value-change notifications so view models can react immediately to user edits. - Accessibility and read-only mode: supports `IsReadOnly` and related caret behavior to present values without allowing edits while keeping selection and focusable behavior as needed. -## Integration and quick start +## Assembly Deployment + +Refer to the [control dependencies](https://help.syncfusion.com/wpf/control-dependencies#currencytextbox) 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. + +## Integration and Quick Start To add a `CurrencyTextBox` to your view and get started quickly, see the step-by-step instructions in [Getting Started](Getting-Started.md). That page shows the required assembly reference, XAML and C# examples, and the preferred `Value`-based approach for setting and binding currency data. -## Behavior and developer notes +## Behavior and Developer Notes - Prefer the `Value` property rather than `Text` when reading or setting the control programmatically; `Value` always represents the parsed numeric value. - When both `NumberFormat` and `Culture` are specified, `NumberFormat` takes precedence for display formatting. - `CurrencyDecimalDigits`, `MinimumCurrencyDecimalDigits`, and `MaximumCurrencyDecimalDigits` control decimal precision and interact according to explicit precedence rules documented in the formatting guide. -## Theming, styling and extensibility +## Theming, Styling and Extensibility The `CurrencyTextBox` supports built-in visual themes and can be styled using standard WPF templates and brushes. Visual states for positive, negative and zero values can be customized to make value meaning immediately perceptible. For examples and theming notes see the related Getting Started and Culture/Formatting documentation. diff --git a/wpf/Currency-TextBox/Range-Adorner.md b/wpf/Currency-TextBox/Range-Adorner.md index 94502aaab..046e94b14 100644 --- a/wpf/Currency-TextBox/Range-Adorner.md +++ b/wpf/Currency-TextBox/Range-Adorner.md @@ -9,12 +9,14 @@ documentation: ug # Range Adorner in WPF CurrencyTextBox +## Assembly Deployment + [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_Value) of [CurrencyTextBox](https://www.syncfusion.com/wpf-ui-controls/currency-textbox) can be visually indicated like a progress bar using range-adorner feature, this feature is disabled by default. You can show the adorner over `CurrencyTextBox` control by setting [EnableRangeAdorner](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_EnableRangeAdorner) property to `true`. Default value of `EnableRangeAdorner` is `false`. The adorner layer can be filled in the control area on the basis of the minimum and maximum values with considering the given value. Range Adorner is not displayed when a `MinValue` or `MaxValue` property is not set. {% tabs %} {% highlight XAML %} - + {% endhighlight %} {% highlight C# %} @@ -30,7 +32,7 @@ currencyTextBox.EnableRangeAdorner =true; ![WPF CurrencyTextBox displays RangeAdorner](Range-Adorner_images/wpf-currency-textbox-range-adorner.png) -## Changing background of range-adorner +## Changing the Background of the Range Adorner You can change the background color of the range adorner using [RangeAdornerBackground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_RangeAdornerBackground) property. @@ -52,4 +54,4 @@ currencyTextBox.RangeAdornerBackground = Brushes.LightGreen; {% endhighlight %} {% endtabs %} -![Changing Background of RangeAdorner of WPF CurrencyTextBox](Range-Adorner_images/wpf-currency-textbox-range-adorner-background.png) +![Changing Background of RangeAdorner of WPF CurrencyTextBox](Range-Adorner_images/wpf-currency-textbox-range-adorner-background.png) \ No newline at end of file diff --git a/wpf/Currency-TextBox/Restriction-or-Validation.md b/wpf/Currency-TextBox/Restriction-or-Validation.md index ee2597d94..98bfb49aa 100644 --- a/wpf/Currency-TextBox/Restriction-or-Validation.md +++ b/wpf/Currency-TextBox/Restriction-or-Validation.md @@ -13,27 +13,27 @@ This section explains how to validate or restrict the `CurrencyTextBox` control ## Restrict the value within minimum and maximum value -The [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_Value) of the [CurrencyTextBox](https://www.syncfusion.com/wpf-ui-controls/currency-textbox) can be restricted within the maximum and minimum limits. Once the value has reached the maximum or minimum value , the value does not exceed the limit. We can change the maximum and minimum limits by using the [MinValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_MinValue) property and [MaxValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_MaxValue) property. +The [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_Value) of the [CurrencyTextBox](https://www.syncfusion.com/wpf-controls/currency-textbox) can be restricted within the maximum and minimum limits. Once the value has reached the maximum or minimum value, the value does not exceed the limit. You can change the maximum and minimum limits by using the [MinValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_MinValue) and [MaxValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_MaxValue) properties. The default validation mode for `MinValidation` and `MaxValidation` is `OnLostFocus`. You can choose when to validate the maximum and minimum limits while changing the values by using the [MinValidation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MinValidation) and [MaxValidation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MaxValidation) properties. -* `OnKeyPress` — When setting the `MaxValidation` or `MinValidation` to `OnKeyPress`, the value in the `CurrencyTextBox` will be validated shortly after pressing a key. So, it is not possible to provide any invalid input at all and the value does not exceed the maximum and minimum limits. +* `OnKeyPress` — When `MaxValidation` or `MinValidation` is set to `OnKeyPress`, the value in the `CurrencyTextBox` is validated shortly after each key press. As a result, it is not possible to enter any invalid input and the value will never exceed the configured maximum or minimum limits. -* `OnLostFocus` - When setting `MaxValidation` or `MinValidation` to `OnLostFocus`, the value in the `CurrencyTextBox` is validated, when the `CurrencyTextBox` loses the focus. That is, the `CurrencyTextBox` will accept any value, validation will only take place after the `CurrencyTextBox` has lost its keyboard focus. After validation, when the value of the `CurrencyTextBox` is greater than the `MaxValue` or less than the `MinValue`, the value will be automatically set to `MaxValue` or `MinValue`. +* `OnLostFocus` - When `MaxValidation` or `MinValidation` is set to `OnLostFocus`, the value in the `CurrencyTextBox` is validated when the control loses keyboard focus. The `CurrencyTextBox` will accept any value during editing; validation takes place only after focus is lost. If the value is then greater than `MaxValue` or less than `MinValue`, it is automatically reset to `MaxValue` or `MinValue`, respectively. * [MaxValueOnExceedMaxDigit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MaxValueOnExceedMaxDigit) - When you give input greater than specified maximum limit, `MaxValueOnExceedMaxDigit` property will decide either it should retain the old value or reset to maximum limit that is specified. For example, if `MaxValue` is set to 100 and you are trying to input 200. `Value` will changed to 100 when `MaxValueOnExceedMaxDigit` is `true`. When `MaxValueOnExceedMaxDigit` is `false`, 20 will be retained and last entered 0 will be ignored. - N> `MaxValueOnExceedMinDigit` property will be enabled only when the `MaxValidation` is set to `OnKeyPress`. + N> `MaxValueOnExceedMaxDigit` property takes effect only when the `MaxValidation` is set to `OnKeyPress`. * [MinValueOnExceedMinDigit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MinValueOnExceedMinDigit) - When you give input less than specified minimum limit, `MinValueOnExceedMinDigit` property will decide either it should retain the old value or reset to minimum limit that is specified. For example, if `MinValue` is set to 200 and the `Value` is 205 and you are trying change the value to 20. `Value` will changed to 200 when `MinValueOnExceedMinDigit` is `true`. When `MinValueOnExceedMinDigit` is `false`, Old value 205 will be retained. - N> `MinValueOnExceedMinDigit` will be enabled only when the `MinValidation` is set to `OnKeyPress`. + N> `MinValueOnExceedMinDigit` takes effect only when the `MinValidation` is set to `OnKeyPress`. {% tabs %} {% highlight XAML %} {% endhighlight %} @@ -47,22 +47,21 @@ currencyTextBox.MaxValue =100; currencyTextBox.MinValidation = MinValidation.OnKeyPress; currencyTextBox.MaxValidation = MaxValidation.OnLostFocus; currencyTextBox.MinValueOnExceedMinDigit = true; -currencyTextBox.MaxValueOnExceedMaxDigit = true; {% endhighlight %} {% endtabs %} `MinValidation` is set to OnKeyPress, it cannot let to enter a value less than the `MinValue`. If try to enter a value less than the `MinValue`, then the `MinValue` will set to the `Value` property because `MinValueOnExceedMinDigit` is set to `true`. -![Validate minimun value of CurrencyTextBox on pressing a key](Restriction-or-Validation_images/wpf-currency-textbox-min-value-validation.jpeg) +![Validate minimum value of CurrencyTextBox on pressing a key](Restriction-or-Validation_images/wpf-currency-textbox-min-value-validation.jpeg) `MaxValidation` is set to OnLostFocus, so the `MaxValidation` will be performed only in the lost focus. ![Validate maximum value of CurrencyTextBox when keyboard focus is lost](Restriction-or-Validation_images/wpf-currency-textbox-max-value-validation.jpeg) -## Restrict number of decimal digits +## Restrict Number of Decimal Digits -You can format the decimal digits in the [CurrencyTextBox](https://www.syncfusion.com/wpf-ui-controls/currency-textbox) control using [CurrencyDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_CurrencyDecimalDigits) property. You can also restrict the decimal digits of the text within minimum and maximum limit in `CurrencyTextBox` control using [MinimumCurrencyDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_MinimumCurrencyDecimalDigits) and [MaximumCurrencyDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_MaximumCurrencyDecimalDigits) properties. The default value of `MinimumCurrencyDecimalDigits`,`MaximumCurrencyDecimalDigits` and `CurrencyDecimalDigits` properties is **-1**. +You can format the decimal digits in the [CurrencyTextBox](https://www.syncfusion.com/wpf-controls/currency-textbox) control using [CurrencyDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_CurrencyDecimalDigits) property. You can also restrict the decimal digits of the text within minimum and maximum limit in `CurrencyTextBox` control using [MinimumCurrencyDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_MinimumCurrencyDecimalDigits) and [MaximumCurrencyDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.CurrencyTextBox.html#Syncfusion_Windows_Shared_CurrencyTextBox_MaximumCurrencyDecimalDigits) properties. The default value of `MinimumCurrencyDecimalDigits`,`MaximumCurrencyDecimalDigits` and `CurrencyDecimalDigits` properties is **-1**. N> If the value of `MinimumCurrencyDecimalDigits` property is greater than the value of `MaximumCurrencyDecimalDigits` property, the text of `CurrencyTextBox` will be updated based on value of `MinimumCurrencyDecimalDigits` property. @@ -111,9 +110,9 @@ currencyTextBox.CurrencyDecimalDigits = 3; ![CurrencyTextBox WPF change decimal digits](Restriction-or-Validation_images/currencytextbox-wpf-decimaldigits.png) -## Read only mode +## Read-Only Mode -The `CurrencyTextBox` cannot allow the user input, edits when [IsReadOnly](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.primitives.textboxbase.isreadonly?redirectedfrom=MSDN&view=netframework-4.7.2#System_Windows_Controls_Primitives_TextBoxBase_IsReadOnly) property is sets to `true`. The user can still select text and display the cursor on the `CurrencyTextBox` by setting the [IsReadOnlyCaretVisible](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.primitives.textboxbase.isreadonlycaretvisible?view=netframework-4.8) property to `true`. However, value can be changed programmatically in readonly mode. +The `CurrencyTextBox` does not allow the user to input or edit the value when the [IsReadOnly](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.primitives.textboxbase.isreadonly?view=netframework-4.8) property is set to `true`. The user can still select text and display the cursor on the `CurrencyTextBox` by setting the [IsReadOnlyCaretVisible](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.primitives.textboxbase.isreadonlycaretvisible?view=netframework-4.8) property to `true`. However, the value can still be changed programmatically in read-only mode. {% tabs %} {% highlight XAML %} diff --git a/wpf/Currency-TextBox/Step-Interval.md b/wpf/Currency-TextBox/Step-Interval.md index 7f121b8cd..61b9ece64 100644 --- a/wpf/Currency-TextBox/Step-Interval.md +++ b/wpf/Currency-TextBox/Step-Interval.md @@ -39,7 +39,7 @@ currencyTextBox.ScrollInterval = 3; ## Change Value on Mouse Wheel -The `CurrencyTextBox` allows you to increase or decrease the `Value` based on the `ScrollInterval` by the Mouse scrolling over the control When the [IsScrollingOnCircle](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.Editorbase.html#Syncfusion_Windows_Shared_EditorBase_IsScrollingOnCircle) property is `true`. The default value of `IsScrollingOnCircle` property is `true`. +The `CurrencyTextBox` allows you to increase or decrease the `Value` based on the `ScrollInterval` by scrolling the mouse wheel over the control when the [IsScrollingOnCircle](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_IsScrollingOnCircle) property is `true`. The default value of `IsScrollingOnCircle` is `true`. {% tabs %} {% highlight XAML %} @@ -87,9 +87,9 @@ currencyTextBox.EnableExtendedScrolling = true; ![Changing Value by Clicking and Drag in WPF CurrencyTextBox](Step-Interval_images/wpf-currency-textbox-drag-and-drop.gif) -## Allow or restrict selection on focus +## Allow or Restrict Selection on Focus -`CurrencyTextBox` allows you to automatically select text by setting [TextSelectionOnFocus](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_TextSelectionOnFocus) property to `true` and when the control got focus. If you want to restrict the selection on when control got focus, use the `TextSelectionOnFocus` property value as `false`. The default value of the `TextSelectionOnFocus` property is `true`. +`CurrencyTextBox` allows you to automatically select its text when the control receives focus by setting the [TextSelectionOnFocus](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_TextSelectionOnFocus) property to `true`. If you want to restrict text selection on focus, set `TextSelectionOnFocus` to `false`. The default value of the `TextSelectionOnFocus` property is `true`. {% tabs %} {% highlight XAML %} @@ -100,7 +100,12 @@ currencyTextBox.EnableExtendedScrolling = true; {% highlight C# %} CurrencyTextBox currencyTextBox = new CurrencyTextBox(); -currencyTextBox.TextSelectionOnFocus = true; +currencyTextBox.Width = 150; +currencyTextBox.Height = 25; +currencyTextBox.TextSelectionOnFocus = false; + +// Add the CurrencyTextBox to an existing container, for example: +this.Content = currencyTextBox; {% endhighlight %} {% endtabs %} diff --git a/wpf/Domain-UpDown/Appearance-and-Styling.md b/wpf/Domain-UpDown/Appearance-and-Styling.md index 3fbcd8fb6..f69e51634 100644 --- a/wpf/Domain-UpDown/Appearance-and-Styling.md +++ b/wpf/Domain-UpDown/Appearance-and-Styling.md @@ -11,7 +11,7 @@ documentation: ug ## Spin animation -Items will spin up or down with smooth transition. The transition can be disabled using the EnableSpinAnimation property. +Items will spin up or down with a smooth transition. The transition can be disabled using the `EnableSpinAnimation` property. The default value of `EnableSpinAnimation` is `True`. {% tabs %} {%highlight xaml%} @@ -26,36 +26,45 @@ Items will spin up or down with smooth transition. The transition can be disable ## Accent brush -The AccentBrush property is used to decorate the hot spots of a control with a solid color. +The `AccentBrush` property is used to decorate the hot spots of the `SfDomainUpDown` control with a solid color. The default value is the system accent color. {% tabs %} {%highlight xaml%} - - - - - - + + + + + {%endhighlight%} {% endtabs %} -## Customize Up,Down button Style +## Customize Up, Down button Style -We can customize the appearance of the up/down buttons in the [SfDomainUpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfDomainUpDown.html) control by using the [UpDownStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfDomainUpDown.html#Syncfusion_Windows_Controls_Input_SfDomainUpDown_UpDownStyle) property. +You can customize the appearance of the up/down buttons in the [SfDomainUpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfDomainUpDown.html) control by using the [UpDownStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfDomainUpDown.html#Syncfusion_Windows_Controls_Input_SfDomainUpDown_UpDownStyle) property. -This property allows you to apply a custom style and template to the internal SfUpDown control, which hosts the up/down buttons. +This property allows you to apply a custom style and template to the internal `SfUpDown` control, which hosts the up/down buttons. {% tabs %} {%highlight xaml%} - + + + + diff --git a/wpf/Domain-UpDown/AutoReverse.md b/wpf/Domain-UpDown/AutoReverse.md index f321e78d2..099e6cc0f 100644 --- a/wpf/Domain-UpDown/AutoReverse.md +++ b/wpf/Domain-UpDown/AutoReverse.md @@ -9,7 +9,12 @@ documentation: ug # AutoReverse in WPF SfDomainUpdown -Incrementing the value starts from the maximum value once it has reached the minimum value and starts from the minimum value once it has reached the maximum value. +The `AutoReverse` property controls how the value wraps when it reaches the upper or lower bound. When `AutoReverse` is `True`, incrementing past the maximum value continues from the minimum value, and decrementing past the minimum value continues from the maximum value. The default value of `AutoReverse` is `False`. + +N> The `editors:` namespace must be declared on the root element: +`xmlns:editors="clr-namespace:Syncfusion.Windows.Controls.Input;assembly=Syncfusion.SfInput.WPF"` + +A `DataContext` that exposes an `Employees` property must also be set for the binding below to resolve. {% tabs %} {%highlight xaml%} @@ -17,10 +22,9 @@ Incrementing the value starts from the maximum value once it has reached the min - + ItemsSource="{Binding Employees}" /> {%endhighlight%} {% endtabs %} diff --git a/wpf/Domain-UpDown/Gestures.md b/wpf/Domain-UpDown/Gestures.md index 19b4c54d2..814e20ce7 100644 --- a/wpf/Domain-UpDown/Gestures.md +++ b/wpf/Domain-UpDown/Gestures.md @@ -9,7 +9,23 @@ documentation: ug # Gestures in WPF SfDomainUpdown +The `SfDomainUpDown` control supports the following input gestures for moving between items. All gestures are enabled by default. + ## Mouse Wheel -The current item moves up or down when mouse wheel is scrolled. +The current item moves up or down when the mouse wheel is scrolled. + +## Keyboard + +* `Up Arrow` / `Down Arrow`: Move to the previous or next item. +* `Page Up` / `Page Down`: Move to the first or last item. +* `Home` / `End`: Jump to the first or last item. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} +{% endtabs %} diff --git a/wpf/Domain-UpDown/Getting-Started.md b/wpf/Domain-UpDown/Getting-Started.md index 1c85defaa..c01d77789 100644 --- a/wpf/Domain-UpDown/Getting-Started.md +++ b/wpf/Domain-UpDown/Getting-Started.md @@ -13,13 +13,13 @@ This section provides you an overview of working with [SfDomainUpDown](https://h ## Assembly deployment -Refer to the [control dependencies](https://help.syncfusion.com/wpf/control-dependencies#sfdomainupdown) section to get the list of assemblies or NuGet package 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#sfdomainupdown) section to get the list of assemblies or NuGet packages that need to be added as a reference to use the control in any application. Further information on installing the NuGet package can be found in the following link. [How to install nuget packages](https://help.syncfusion.com/wpf/installation/install-nuget-packages). You can also use the [Syncfusion Reference Manager](https://help.syncfusion.com/wpf/visual-studio-integration/visual-studio-extensions/add-references) to refer to the SfDomainUpDown's dependent assemblies. ## Creating Application with SfDomainUpDown control -In this walk through, you will create a WPF application that contains the [SfDomainUpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfDomainUpDown.html) control. +In this walkthrough, you will create a WPF application that contains the [SfDomainUpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfDomainUpDown.html) control. ## Creating project @@ -54,8 +54,7 @@ To add the control manually in XAML page, follow the given steps: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" - xmlns:local="clr-namespace:GettingStartedComboBox" - xmlns:syncfusion="http://schemas.syncfusion.com/wpf" x:Class="GettingStartedComboBox.MainWindow" + xmlns:syncfusion="http://schemas.syncfusion.com/wpf" x:Class="GettingStartedDomainUpDown.MainWindow" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> @@ -89,7 +88,8 @@ To add the control manually in C#, follow the given steps: using System.Windows; using Syncfusion.Windows.Controls.Input; -namespace ComboBox + +namespace GettingStartedDomainUpDown { /// /// Interaction logic for MainWindow.xaml @@ -116,7 +116,7 @@ namespace ComboBox ![SfDomainUpDown control implemented](Getting-Started_images/Spin-Button_img6.png) -## Populating by DataBinding +## Populating with Data Binding You can populate the [SfDomainUpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfDomainUpDown.html) control using the [ItemsSource](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.itemscontrol.itemssourceproperty?view=netframework-4.7.2) property. @@ -208,7 +208,7 @@ N> [View sample in GitHub](https://github.com/SyncfusionExamples/WPF-GettingStar ## Spin button alignment -You can customize the position of the spin button in the [SfDomainUpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfDomainUpDown.html) control using the [SpinButtonsAlignment](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfDomainUpDown.html#Syncfusion_Windows_Controls_Input_SfDomainUpDown_SpinButtonsAlignment) property. +You can customize the position of the spin button in the [SfDomainUpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfDomainUpDown.html) control using the [SpinButtonsAlignment](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfDomainUpDown.html#Syncfusion_Windows_Controls_Input_SfDomainUpDown_SpinButtonsAlignment) property. The `SpinButtonsAlignment` enum is defined in the `Syncfusion.Windows.Controls` namespace. For more details and additional examples, see [Spin Button Alignment](Spin-Button-Alignment.md). {% tabs %} {% highlight XAML %} @@ -218,22 +218,25 @@ You can customize the position of the spin button in the [SfDomainUpDown](https: {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Controls; + SfDomainUpDown domainUpDown1 = new SfDomainUpDown(); domainUpDown1.Height = 30; domainUpDown1.Width = 150; -domainUpDown1.SpinButtonsAlignment = Syncfusion.Windows.Controls.SpinButtonsAlignment.Right; +domainUpDown1.SpinButtonsAlignment = SpinButtonsAlignment.Right; +domainUpDown1.Value = "James"; {% endhighlight %} {% endtabs %} -1.Right +1. Right ![SpinButton aligned right](Getting-Started_images/Spin-Button-Alignment_img1.png) -2.Left +2. Left ![SpinButton aligned left](Getting-Started_images/Spin-Button-Alignment_img3.png) -3.Both +3. Both ![SpinButton aligned both](Getting-Started_images/Spin-Button-Alignment_img5.png) diff --git a/wpf/Domain-UpDown/Populating-Data.md b/wpf/Domain-UpDown/Populating-Data.md index 3d1ef4e12..f48ea1f36 100644 --- a/wpf/Domain-UpDown/Populating-Data.md +++ b/wpf/Domain-UpDown/Populating-Data.md @@ -9,7 +9,7 @@ documentation: ug # Populating Data in WPF SfDomainUpdown -The DomainUpDown control can be populated with a predefined list of items. +The `DomainUpDown` control can be populated with a predefined list of items. The following example shows how to populate the control with a list of employees. For example, in the following code, the DomainUpDown populates a list of employees: @@ -25,11 +25,14 @@ public class Employee {%endhighlight%} {% endtabs %} -Create a collection attribute: +Create a collection property: {% tabs %} {%highlight c#%} +// Required usings: +// using System.Collections.Generic; + private List employees; public List Employees { @@ -55,30 +58,35 @@ Employees.Add(new Employee { Name = "Jacob", Email = "jacob@syncfusion.com" }); ## ItemsSource -Bind the Employees collection to the ItemsSource property of DomainUpDown: +Bind the `Employees` collection to the `ItemsSource` property of the `DomainUpDown` control. Set the `DataContext` to an instance of your view model so the binding resolves. {% tabs %} -{%highlight c#%} +{%highlight xaml%} - - - - - - + + + + + + + + {%endhighlight%} {% endtabs %} -N> When the ContentTemplate property of the DomainUpDown control is not set, Items will be displayed as business objects in the control. +N> When the `ContentTemplate` property of the `DomainUpDown` control is not set, items are displayed by calling `ToString()` on each data object. ## ContentTemplate -ContentTemplate helps the user decorate the content with visual elements. At this point, the control is populated with list of employees, and the Employee model contains two properties: Name and Email. In this example, the control is set to display content based on Name. +`ContentTemplate` lets you decorate the content with visual elements. In the example below, the control is set to display the `Name` property of each `Employee` alongside an image. {% tabs %} {%highlight xaml%} @@ -87,18 +95,18 @@ ContentTemplate helps the user decorate the content with visual elements. At thi HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" - ItemsSource="{Binding Employees}"> - - - - - - - - + ItemsSource="{Binding Employees}"> + + + + + + + + {%endhighlight%} {% endtabs %} -![Populating-Data_img1](Populating-Data_images/Populating-Data_img1.png) +![Populating Data](Populating-Data_images/Populating-Data_img1.png) diff --git a/wpf/Domain-UpDown/Spin-Button-Alignment.md b/wpf/Domain-UpDown/Spin-Button-Alignment.md index 293db3efe..954bbbea1 100644 --- a/wpf/Domain-UpDown/Spin-Button-Alignment.md +++ b/wpf/Domain-UpDown/Spin-Button-Alignment.md @@ -9,15 +9,17 @@ documentation: ug # Spin Button Alignment in WPF SfDomainUpdown -The spin button’s position in the DomainUpDown control can be changed using SpinButtonsAlignment. It contains three modes for positioning spin buttons: +The spin button's position in the `DomainUpDown` control can be changed using the `SpinButtonsAlignment` property (defined in the `Syncfusion.Windows.Controls` namespace). The default value is `Right`. The property accepts three values: -1. Right -2. Left -3. Both +1. `Right`: Spin buttons are aligned on the right side of the control. +2. `Left`: Spin buttons are aligned on the left side of the control. +3. `Both`: The decrement button is aligned on the left, and the increment button is aligned on the right. + +N> All examples below assume an `editors:` xmlns is declared and a `DataContext` exposing an `Employees` property is set. ## Right -Spin buttons will be aligned on the right side of the control. +The spin buttons are aligned on the right side of the control. {% tabs %} {%highlight xaml%} @@ -25,21 +27,20 @@ Spin buttons will be aligned on the right side of the control. - + Width="200" + SpinButtonsAlignment="Right" + ItemsSource="{Binding Employees}" /> {%endhighlight%} {% endtabs %} -![Spin-Button-Alignment_img1](Spin-Button-Alignment_images/Spin-Button-Alignment_img1.png) +![Spin button aligned right](Spin-Button-Alignment_images/Spin-Button-Alignment_img1.png) ![Spin-Button-Alignment_img2](Spin-Button-Alignment_images/Spin-Button-Alignment_img2.png) ## Left -Spin buttons will be aligned on the left side of the control. +The spin buttons are aligned on the left side of the control. {% tabs %} {%highlight xaml%} @@ -47,20 +48,18 @@ Spin buttons will be aligned on the left side of the control. + Width="200" + SpinButtonsAlignment="Left" + ItemsSource="{Binding Employees}" /> {%endhighlight%} {% endtabs %} -![Spin-Button-Alignment_img3](Spin-Button-Alignment_images/Spin-Button-Alignment_img3.png) - -![Spin-Button-Alignment_img4](Spin-Button-Alignment_images/Spin-Button-Alignment_img4.png) +![Spin button aligned left](Spin-Button-Alignment_images/Spin-Button-Alignment_img3.png) ## Both -The spin button’s decrement button will be aligned on the left side of the control and the increment button is aligned on the right side of the control. +The spin button's decrement button is aligned on the left side of the control, and the increment button is aligned on the right side of the control. {% tabs %} {%highlight xaml%} @@ -68,12 +67,11 @@ The spin button’s decrement button will be aligned on the left side of the con - + Width="200" + SpinButtonsAlignment="Both" + ItemsSource="{Binding Employees}" /> {%endhighlight%} {% endtabs %} -![Spin-Button-Alignment_img5](Spin-Button-Alignment_images/Spin-Button-Alignment_img5.png) +![Spin button aligned both](Spin-Button-Alignment_images/Spin-Button-Alignment_img5.png) diff --git a/wpf/Double-TextBox/Appearance-and-Styling.md b/wpf/Double-TextBox/Appearance-and-Styling.md index acaea79af..d00206c95 100644 --- a/wpf/Double-TextBox/Appearance-and-Styling.md +++ b/wpf/Double-TextBox/Appearance-and-Styling.md @@ -13,11 +13,11 @@ This section deals with the appearance of `DoubleTextBox` control and contains t ## Setting the Foreground -The [DoubleTextBox](https://www.syncfusion.com/wpf-controls/double-textbox) control [Foreground](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.control.foreground?view=netframework-4.8) can be modified based on the value of the control. The following are the foreground for `DoubleTextBox` control. +The foreground of the [DoubleTextBox](https://www.syncfusion.com/wpf-controls/double-textbox) control can be modified based on the value of the control by using the [Foreground](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.control.foreground?view=netframework-4.8) and the value-specific brushes described below. ### Foreground for Positive Value -We can change a positive color for the value of `DoubleTextBox` by setting the [PositiveForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_PositiveForeground) property and it will be applied when the [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_Value) is positive. The default color of `PositiveForeground` is `Black`. +You can change the foreground color applied to positive values of `DoubleTextBox` by setting the [PositiveForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_PositiveForeground) property. It is applied when the [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_Value) is positive. The default color of `PositiveForeground` is `Black`. {% tabs %} {% highlight XAML %} @@ -39,7 +39,7 @@ doubleTextBox.PositiveForeground = Brushes.Blue; ### Foreground for Negative Value -We can change a negative color for the value of `DoubleTextBox` by setting the [NegativeForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_NegativeForeground) property and it will be applied when the [ApplyNegativeForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_ApplyNegativeForeground) property is `true` and the `Value` is negative. The default color of `NegativeForeground` is `Red`. +You can change the foreground color applied to negative values of `DoubleTextBox` by setting the [NegativeForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_NegativeForeground) property. It is applied when the [ApplyNegativeForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_ApplyNegativeForeground) property is `true` and the `Value` is negative. The default color of `NegativeForeground` is `Red`. The default value of `ApplyNegativeForeground` is `true`. {% tabs %} {% highlight XAML %} @@ -63,8 +63,7 @@ doubleTextBox.NegativeForeground = Brushes.SpringGreen; ### Foreground for Zero Value -We can change a zero color for the value of `DoubleTextBox` by setting the [ZeroColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_ZeroColor) property and it will be applied when the [ApplyZeroColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_ApplyZeroColor) property is `true` and the `Value` is zero. -The default color of `ZeroColor` is `Green`. +You can change the foreground color applied when the `Value` of `DoubleTextBox` is zero by setting the [ZeroColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_ZeroColor) property. It is applied when the [ApplyZeroColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_ApplyZeroColor) property is `true` and the `Value` is zero. The default value of `ApplyZeroColor` is `true`. The default color of `ZeroColor` is `Green`. {% tabs %} {% highlight XAML %} @@ -112,7 +111,7 @@ doubleTextBox.Background = Brushes.Cyan; ## Setting the Corner Radius -Corner Radius indicates the degree to which the corners of the border can be rounded. To create curved borders for the `DoubleTextBox`, use [CornerRadius](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_CornerRadius) property. The default value of `CornerRadius` property is 1. +Corner Radius indicates the degree to which the corners of the border can be rounded. To create curved borders for the `DoubleTextBox`, use the [CornerRadius](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_CornerRadius) property. The default value of `CornerRadius` is 1. {% tabs %} {% highlight XAML %} @@ -122,10 +121,13 @@ Corner Radius indicates the degree to which the corners of the border can be rou {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; +using System.Windows; + DoubleTextBox doubleTextBox = new DoubleTextBox(); doubleTextBox.Width = 100; doubleTextBox.Height = 25; -doubleTextBox.CornerRadius = new CornerRadius(5); +doubleTextBox.CornerRadius = new CornerRadius(5); {% endhighlight %} {% endtabs %} @@ -134,7 +136,7 @@ doubleTextBox.CornerRadius = new CornerRadius(5); ## Apply Background for Selection -`DoubleTextBox` allows different brushes to highlight the selected text by setting the [SelectionBrush](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.primitives.textboxbase.selectionbrush?view=netframework-4.8) and [SelectionOpacity](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.primitives.textboxbase.selectionopacity?view=netframework-4.8) properties. The `SelectionOpacity` property specifies the opacity of the `SelectionBrush`. +`DoubleTextBox` allows different brushes to highlight the selected text by setting the [SelectionBrush](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.primitives.textboxbase.selectionbrush?view=netframework-4.8) and [SelectionOpacity](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.primitives.textboxbase.selectionopacity?view=netframework-4.8) properties. The `SelectionOpacity` property specifies the opacity of the `SelectionBrush`. The default value of `SelectionOpacity` is `0.4`. {% tabs %} {% highlight XAML %} @@ -144,11 +146,14 @@ doubleTextBox.CornerRadius = new CornerRadius(5); {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; +using System.Windows.Media; + DoubleTextBox doubleTextBox = new DoubleTextBox(); doubleTextBox.Width = 100; doubleTextBox.Height = 25; doubleTextBox.SelectionBrush = Brushes.Red; -doubleTextBox.SelectionOpacity = 0.3; +doubleTextBox.SelectionOpacity = 0.5; {% endhighlight %} {% endtabs %} @@ -157,7 +162,7 @@ doubleTextBox.SelectionOpacity = 0.3; ## Align Value -`DoubleTextBox` allows to display the value from right or center or left side by setting the [TextAlignment](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.textblock.textalignment?view=netframework-4.8) property to `Right` or `Left` or `Center`. The Default value of `TextAlignment` is `Left`. +`DoubleTextBox` allows you to display the value from the right, center, or left side by setting the [TextAlignment](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.textblock.textalignment?view=netframework-4.8) property to `Right`, `Left`, or `Center`. The default value of `TextAlignment` is `Left`. {% tabs %} {% highlight XAML %} @@ -179,7 +184,7 @@ doubleTextBox.TextAlignment = TextAlignment.Center; ## Setting ToolTip -`DoubleTextBox` provides support for ToolTip to display certain information when the mouse hovers on the `DoubleTextBox`. You can customize the tooltip information by setting the [ToolTip](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.tooltip?view=netframework-4.8) property. +`DoubleTextBox` provides support for a ToolTip to display certain information when the mouse hovers over the `DoubleTextBox`. You can customize the tooltip information by setting the [ToolTip](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.tooltip?view=netframework-4.8) property. {% tabs %} {% highlight XAML %} diff --git a/wpf/Double-TextBox/Changing-Double-Value.md b/wpf/Double-TextBox/Changing-Double-Value.md index b8a9e3594..919056a46 100644 --- a/wpf/Double-TextBox/Changing-Double-Value.md +++ b/wpf/Double-TextBox/Changing-Double-Value.md @@ -11,22 +11,24 @@ documentation: ug The [DoubleTextBox](https://www.syncfusion.com/wpf-ui-controls/double-textbox) allows the user to change the value using the [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_Value) property. -{%tabs%} -{% highlight xaml %} +{% tabs %} +{% highlight XAML %} -{% endhighlight %} +{% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; + DoubleTextBox doubleTextBox = new DoubleTextBox(); doubleTextBox.Width = 150; doubleTextBox.Height = 25; doubleTextBox.Value = 10; {% endhighlight %} -{%endtabs%} +{% endtabs %} ![WPF DoubleTextBox displays Value](Changing-Double-Value_images/wpf-double-textbox-value.jpeg) @@ -34,20 +36,22 @@ Data binding is the process of establishing a connection between the application The following code snippets illustrate the value binding from one `DoubleTextBox` to another. -{%tabs%} -{% highlight xaml %} +{% tabs %} +{% highlight XAML %} {% endhighlight %} -{%endtabs%} +{% endtabs %} ViewModel.cs -{%tabs%} +{% tabs %} {% highlight C# %} +using Syncfusion.Windows.Shared; + class ViewModel : NotificationObject { private double myValue; @@ -66,15 +70,15 @@ class ViewModel : NotificationObject } {% endhighlight %} -{%endtabs%} +{% endtabs %} ![WPF DoubleTextBox displays Binding Value](Changing-Double-Value_images/wpf-double-textbox-binding-value.png) ## Change double value by pasting the clipboard's text -By default, `DoubleTextBox` simply replaces the whole value by copied value with the current number format. If you want to replace or insert the copied value on specific place, use the [PasteMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_PasteMode) property value as `Advanced`. The default value of `PasteMode` property is `Default`. +By default, `DoubleTextBox` simply replaces the whole value with the copied value using the current number format. If you want to replace or insert the copied value at a specific place, set the [PasteMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_PasteMode) property to `Advanced`. The default value of `PasteMode` is `Default`. -The following table explains the pasting behaviour in `Advanced` paste mode, +The following table explains the pasting behavior in `Advanced` paste mode:
@@ -85,7 +89,7 @@ The following table explains the pasting behaviour in `Advanced` paste mode, - + @@ -95,84 +99,92 @@ The following table explains the pasting behaviour in `Advanced` paste mode, - + - + - +If the selected text does not contain a number decimal separator, then the copied value must not contain a number decimal separator. Otherwise, the paste operation is not performed.
1 When the whole value is selectedIt simply replaces the whole value by copied value with the current number format.It simply replaces the whole value with the copied value using the current number format.
2
3 When the cursor is at some position and the copied value contains a number decimal separatorIt won’t perform pasting operation.The paste operation is not performed.
4 When the cursor is at some position and the control value is 0 or nullIt simply replaces the whole value by copied value with the current number format.It simply replaces the whole value with the copied value using the current number format.
5 When a part of the number is selectedIf the selected value contains a number decimal separator, then copied value must contain number decimal separator. Otherwise, it won’t perform pasting operation. +If the selected value contains a number decimal separator, then the copied value must contain a number decimal separator. Otherwise, the paste operation is not performed. -If the selected text does not contain a number decimal separator, then copied value must not contain number decimal separator. Otherwise, it won’t perform pasting operation.
-{%tabs%} -{% highlight xaml %} +{% tabs %} +{% highlight XAML %} - -{% endhighlight %} +{% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; + DoubleTextBox doubleTextBox = new DoubleTextBox(); doubleTextBox.PasteMode = PasteMode.Advanced; doubleTextBox.Value = 12345.67; {% endhighlight %} -{%endtabs%} +{% endtabs %} ![WPF DoubleTextBox displays Pasting Copied Value in Specific Place](Changing-Double-Value_images/wpf-double-textbox-paste-value.png) ## Show UpDown Button -You can increment or decrement the double value of `DoubleTextBox` by setting the `ShowSpinButton` property value as `true`. Click UpButton to increment or DownButton to decrement the double value. The default value of `ShowSpinButton` property is `false`. +You can increment or decrement the double value of `DoubleTextBox` by setting the `ShowSpinButton` property to `true`. Click the Up button to increment or the Down button to decrement the double value. The default value of `ShowSpinButton` is `false`. -{%tabs%} -{% highlight xaml %} +{% tabs %} +{% highlight XAML %} {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; + DoubleTextBox doubleTextBox = new DoubleTextBox(); doubleTextBox.ShowSpinButton = true; {% endhighlight %} -{%endtabs%} +{% endtabs %} ![WPF DoubleTextBox displays SpinButton](Changing-Double-Value_images/wpf-double-textbox-spin-button.gif) ## Value Changed Event -The `DoubleTextbox` control can notify changes in value through the [ValueChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html) event. In `ValueChanged` event, you can get old value and new value from the `OldValue` and `NewValue` properties. +The `DoubleTextBox` control notifies value changes through the [ValueChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html) event. In the `ValueChanged` event, you can get the old value and new value from the `OldValue` and `NewValue` properties. -{%tabs%} -{% highlight xaml %} +{% tabs %} +{% highlight XAML %} {% endhighlight %} -{% highlight C# %} +{% highlight C# %} + +using Syncfusion.Windows.Shared; DoubleTextBox doubleTextBox = new DoubleTextBox(); -doubleTextBox.ValueChanged += new PropertyChangedCallback(DoubleTextBox_ValueChanged); +doubleTextBox.ValueChanged += new PropertyChangedCallbackHandler(DoubleTextBox_ValueChanged); {% endhighlight %} -{%endtabs%} +{% endtabs %} You can handle the event as follows: {% tabs %} {% highlight C# %} +using System.Windows; + private void DoubleTextBox_ValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { // Get old and new value @@ -185,9 +197,9 @@ private void DoubleTextBox_ValueChanged(DependencyObject d, DependencyPropertyCh ## Setting the Null value - By default, the `DoubleTextBox` control will display zero value when the `Value` is set to `null`. You can use the [NullValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextbox.html#Syncfusion_Windows_Shared_DoubleTextBox_NullValue) and [UseNullOption](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_UseNullOption) properties to show the null or any other value instead of zero. - - The default value of the `NullValue` property is `null`, you can reset this to any other double value. It will display only on setting the `UseNullOption` property is set to `true`. + By default, the `DoubleTextBox` control will display a zero value when the `Value` is set to `null`. You can use the [NullValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_NullValue) and [UseNullOption](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_UseNullOption) properties to show a null or any other value instead of zero. + + The default value of the `NullValue` property is `null`; you can reset it to any other double value. The `NullValue` is displayed only when the `UseNullOption` property is set to `true`. The default value of `UseNullOption` is `false`. **NullValue = Null** @@ -235,11 +247,11 @@ doubleTextBox.UseNullOption = true; ## Setting Watermark Text -We can display certain information within the control by using the [WaterMarkText](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkText) property. `WaterMarkText` is shown when the [WatermarkTextIsVisible](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkTextIsVisible) property is `true` and the value is `null` or empty, the control is not in focus and the `UseNullOption` property is `true`. +You can display certain information within the control by using the [WaterMarkText](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkText) property. `WaterMarkText` is shown when the [WatermarkTextIsVisible](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkTextIsVisible) property is `true`, the value is `null` or empty, the control is not in focus, and the `UseNullOption` property is `true`. ### Setting the WatermarkText Foreground -The `DoubleTextBox` allows you to set the desired brush as a foreground for `WaterMarkText` using [WaterMarkTextForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkTextForeground) property. The default color of `WaterMarkTextForeground` is `Black`. +The `DoubleTextBox` allows you to set the desired brush as a foreground for `WaterMarkText` using the [WaterMarkTextForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkTextForeground) property. The default color of `WaterMarkTextForeground` is `Black`. The default value of `WatermarkTextIsVisible` is `true`. {% tabs %} {% highlight XAML %} @@ -266,13 +278,13 @@ doubleTextBox.WatermarkTextForeground = Brushes.Red; ### Setting Watermark Template -You can customize the Visual appearance of the `WatermarkText` by using the [WatermarkTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkTemplate) property. +You can customize the visual appearance of the `WatermarkText` by using the [WatermarkTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkTemplate) property. Use the [WatermarkOpacity](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkOpacity) property to adjust the opacity of the watermark. The default value of `WatermarkOpacity` is `1`. -{% highlight xaml %} +{% highlight XAML %} diff --git a/wpf/Double-TextBox/Culture-and-Number-Formats.md b/wpf/Double-TextBox/Culture-and-Number-Formats.md index b6f3181a8..935badda5 100644 --- a/wpf/Double-TextBox/Culture-and-Number-Formats.md +++ b/wpf/Double-TextBox/Culture-and-Number-Formats.md @@ -19,13 +19,16 @@ Value of `DoubleTextBox` can be formatted in following ways: The [DoubleTextBox](https://www.syncfusion.com/wpf-controls/double-textbox) provides support for globalization by using the [Culture](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_Culture) property. The `Culture` property is used to format the decimal separator and group separator of the `DoubleTextBox` value based on the respective culture. -{%tabs%} -{% highlight xaml %} +{% tabs %} +{% highlight XAML %} {% endhighlight %} -{% highlight C# %} +{% highlight C# %} + +using Syncfusion.Windows.Shared; +using System.Globalization; DoubleTextBox doubleTextBox = new DoubleTextBox(); doubleTextBox.Width = 150; @@ -33,12 +36,12 @@ doubleTextBox.Height = 25; doubleTextBox.Value = 1234567; //Setting Latin culture for double textbox. -doubleTextBox.Culture = new System.Globalization.CultureInfo("bs-Latn"); +doubleTextBox.Culture = new CultureInfo("bs-Latn"); {% endhighlight %} -{%endtabs%} +{% endtabs %} -By default the US culture uses “,” as the `NumberGroupSeparator` and "." as the `NumberDecimalSeparator` where as the Latin culture uses “.” as the `NumberGroupSeparator` and "," as the `NumberDecimalSeparator`. +By default the US culture uses “,” as the `NumberGroupSeparator` and "." as the `NumberDecimalSeparator`, whereas the Latin culture uses “.” as the `NumberGroupSeparator` and "," as the `NumberDecimalSeparator`. **Default Culture** @@ -50,25 +53,37 @@ By default the US culture uses “,” as the `NumberGroupSeparator` and "." as ## NumberFormatInfo based formatting -The number formatting of `DoubleTextBox` can be customized by setting [NumberFormat](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_NumberFormat) property. +The number formatting of `DoubleTextBox` can be customized by setting the [NumberFormat](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_NumberFormat) property. {% tabs %} {% highlight XAML %} - - - - - + + + + + + + + + {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; +using System.Globalization; + DoubleTextBox doubleTextBox = new DoubleTextBox(); doubleTextBox.Width = 200; doubleTextBox.Height = 25; @@ -86,21 +101,24 @@ doubleTextBox.NumberFormat = new NumberFormatInfo() ![WPF DoubleTextBox with Formatting](Culture-and-Number-Formats-images/wpf-double-textbox-formatting.jpeg) -The following code illustrate how to set number group size by using the `NumberFormat` property. +The following code illustrates how to set the number group size by using the `NumberFormat` property. {% tabs %} {% highlight C# %} +using Syncfusion.Windows.Shared; +using System.Globalization; + DoubleTextBox doubleTextBox = new DoubleTextBox(); doubleTextBox.Width = 200; doubleTextBox.Height = 25; doubleTextBox.Value = 123456789; -doubleTextBox.NumberFormat = new System.Globalization.NumberFormatInfo() +doubleTextBox.NumberFormat = new NumberFormatInfo() { - NumberDecimalDigits =4, + NumberDecimalDigits = 4, NumberGroupSeparator = "/", NumberDecimalSeparator = "*", - + // Adding the Number group size via NumberFormat property. NumberGroupSizes = new int[] { 2, 3, 4 } }; @@ -111,13 +129,16 @@ doubleTextBox.NumberFormat = new System.Globalization.NumberFormatInfo() ## Formatting with dedicated properties -The number formatting of `DoubleTextBox` can also be customized by setting [NumberGroupSeparator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_NumberGroupSeparator), [NumberGroupSizes](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_NumberGroupSizes), [NumberDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_NumberDecimalDigits), and [NumberDecimalSeparator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_NumberDecimalSeparator) properties. You can show the group separator by enable the [GroupSeperatorEnabled](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_GroupSeperatorEnabled) property to `true`. +The number formatting of `DoubleTextBox` can also be customized by setting the [NumberGroupSeparator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_NumberGroupSeparator), [NumberGroupSizes](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_NumberGroupSizes), [NumberDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_NumberDecimalDigits), and [NumberDecimalSeparator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_NumberDecimalSeparator) properties. You can show the group separator by enabling the [GroupSeperatorEnabled](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_GroupSeperatorEnabled) property to `true`. The default value of `GroupSeperatorEnabled` is `false`. -The following code illustrate how to format using the `NumberDecimalSeparator`, `NumberDecimalDigits`, `NumberGroupSeparator`, `NumberGroupSizes` property of the `DoubleTextBox`. +The following code illustrates how to format using the `NumberDecimalSeparator`, `NumberDecimalDigits`, `NumberGroupSeparator`, and `NumberGroupSizes` properties of the `DoubleTextBox`. {% tabs %} {% highlight C# %} +using Syncfusion.Windows.Shared; +using System.Globalization; + DoubleTextBox doubleTextBox = new DoubleTextBox(); doubleTextBox.Width = 150; doubleTextBox.Height = 25; @@ -127,13 +148,13 @@ doubleTextBox.NumberDecimalSeparator = "*"; doubleTextBox.NumberDecimalDigits = 3; // Adding the Number group size via NumberGroupSizes property. -doubleTextBox.NumberGroupSizes = new Int32Collection() { 4, 3, 2}; +doubleTextBox.NumberGroupSizes = new int[] { 4, 3, 2 }; {% endhighlight %} {% endtabs %} ![WPF DoubleTextBox with Formatting](Culture-and-Number-Formats-images/wpf-double-textbox-number-format.png) -N> When you use both the `NumberFormat` and the dedicated properties (`NumberGroupSeparator`, `NumberGroupSizes`, `NumberDecimalDigits`, and `NumberDecimalSeparator`) to format the value of `DoubleTextbox`, the `NumberGroupSeparator`, `NumberGroupSizes`, `NumberDecimalDigits`, and `NumberDecimalSeparator` properties have higher priority. +N> When you use both the `NumberFormat` and the dedicated properties (`NumberGroupSeparator`, `NumberGroupSizes`, `NumberDecimalDigits`, and `NumberDecimalSeparator`) to format the value of `DoubleTextBox`, the dedicated properties take priority over `NumberFormat`. -N> When you use both `NumberFormat` and `Culture`, the `NumberFormat` will have a higher priority. +N> When you use both `NumberFormat` and `Culture`, the `NumberFormat` will have a higher priority. diff --git a/wpf/Double-TextBox/Getting-Started.md b/wpf/Double-TextBox/Getting-Started.md index 726fad7c6..cd363f89a 100644 --- a/wpf/Double-TextBox/Getting-Started.md +++ b/wpf/Double-TextBox/Getting-Started.md @@ -30,11 +30,14 @@ You can add the [DoubleTextBox](https://www.syncfusion.com/wpf-controls/double-t ## Adding WPF DoubleTextBox via XAML To add the DoubleTextBox control manually in XAML, follow these steps: + 1. Create a new WPF project in Visual Studio. -2. Add the **Syncfusion.Shared.WPF** assembly references to the project. - -3. Import Syncfusion® WPF schema **http://schemas.syncfusion.com/wpf** and declare the `DoubleTextBox` control in XAML page. +2. Add the **Syncfusion.Shared.WPF** assembly reference to the project. + +3. Import the Syncfusion® WPF schema with the `xmlns:syncfusion="http://schemas.syncfusion.com/wpf"` namespace mapping. + +4. Declare the `DoubleTextBox` control in the XAML page. {% capture codesnippet1 %} {% tabs %} @@ -147,6 +150,8 @@ ViewModel.cs {% tabs %} {% highlight C# %} +using Syncfusion.Windows.Shared; + class ViewModel : NotificationObject { private double myValue; @@ -171,27 +176,31 @@ class ViewModel : NotificationObject ## Value Changed Notification -The `DoubleTextbox` control can notifies the value changes through the [ValueChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html) event. You can get old value and new Value from `OldValue` and `NewValue` properties in `ValueChanged` event. +The `DoubleTextBox` control can notify value changes through the [ValueChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html) event. You can get the old value and new value from the `OldValue` and `NewValue` properties of the `ValueChanged` event. -{%tabs%} -{% highlight xaml %} +{% tabs %} +{% highlight XAML %} {% endhighlight %} -{% highlight C# %} +{% highlight C# %} + +using Syncfusion.Windows.Shared; DoubleTextBox doubleTextBox = new DoubleTextBox(); -doubleTextBox.ValueChanged += new PropertyChangedCallback(DoubleTextBox_ValueChanged); +doubleTextBox.ValueChanged += new PropertyChangedCallbackHandler(DoubleTextBox_ValueChanged); {% endhighlight %} -{%endtabs%} +{% endtabs %} You can handle the event as follows: {% tabs %} {% highlight C# %} +using System.Windows; + private void DoubleTextBox_ValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { // Get old and new value @@ -204,17 +213,21 @@ private void DoubleTextBox_ValueChanged(DependencyObject d, DependencyPropertyCh ## Min Max Value Restriction -The `Value` of `DoubleTextBox` can be restricted within maximum and minimum limit. You can define the minimum and maximum values by setting the [MinValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_MinValue) and [MaxValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_MaxValue) properties. It allows the user to enter the value between `MinValue` and `MaxValue`. +The `Value` of `DoubleTextBox` can be restricted within a maximum and minimum limit. You can define the minimum and maximum values by setting the [MinValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_MinValue) and [MaxValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_MaxValue) properties. It allows the user to enter a value between `MinValue` and `MaxValue`. + +For details on validation behavior (`OnKeyPress`, `OnLostFocus`, `MaxValueOnExceedMaxDigit`, `MinValueOnExceedMinDigit`), see [Restriction or Validation](Restriction-or-Validation.md). {% tabs %} {% highlight XAML %} - + {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; + DoubleTextBox doubleTextBox = new DoubleTextBox(); -doubleTextBox.Width = 100; +doubleTextBox.Width = 150; doubleTextBox.Height = 25; //Setting minimum value doubleTextBox.MinValue = -999.99; @@ -227,19 +240,19 @@ doubleTextBox.Value = 100; ![Restricts Minimum and Maximum Value of WPF DoubleTextBox](Getting-Started_images/wpf-double-textbox-value.jpeg) -## Step Interval to increase or decrease the value +## Step Interval for incrementing or decrementing the value -The `DoubleTextBox` control allows to increase or decrease the value by pressing up and down arrow keys in keyboard or mouse wheel over the control. The [ScrollInterval](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_ScrollInterval) property is used to specify the increment or decrement intervals. The default value of `ScrollInterval` is 1. +The `DoubleTextBox` control allows you to increase or decrease the value by pressing the up and down arrow keys on the keyboard or by scrolling the mouse wheel over the control. The [ScrollInterval](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_ScrollInterval) property specifies the increment or decrement intervals. The default value of `ScrollInterval` is 1. {% tabs %} -{% highlight xaml %} +{% highlight XAML %} - {% endhighlight %} - {% highlight C# %} + DoubleTextBox doubleTextBox = new DoubleTextBox(); doubleTextBox.Width = 150; doubleTextBox.Height = 25; @@ -254,19 +267,33 @@ doubleTextBox.ScrollInterval = 4; ![WPF DoubleTextBox displays Incrementing Interval Value](Getting-Started_images/wpf-double-textbox-step-interval.png) -## Formatting the value +## Formatting the Value You can customize the number format by either setting the [NumberFormat](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_NumberFormat) property or the [NumberGroupSeparator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_NumberGroupSeparator), [NumberGroupSizes](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_NumberGroupSizes), [NumberDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_NumberDecimalDigits), and [NumberDecimalSeparator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_NumberDecimalSeparator) properties of `DoubleTextBox`. +For details, see [Culture and Number Formats](Culture-and-Number-Formats.md). + {% tabs %} {% highlight XAML %} - - - - - + + + + + + + + + {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; +using System.Globalization; + DoubleTextBox doubleTextBox = new DoubleTextBox(); doubleTextBox.Width = 200; doubleTextBox.Height = 25; @@ -286,26 +313,29 @@ doubleTextBox.NumberFormat = new NumberFormatInfo() The `DoubleTextBox` provides support for globalization by using the [Culture](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_Culture) property. The `Culture` is used to format the decimal separator and group separator of the `DoubleTextBox` value based on the respective culture. -{%tabs%} -{% highlight xaml %} +{% tabs %} +{% highlight XAML %} {% endhighlight %} -{% highlight C# %} +{% highlight C# %} + +using Syncfusion.Windows.Shared; +using System.Globalization; DoubleTextBox doubleTextBox = new DoubleTextBox(); doubleTextBox.Width = 150; doubleTextBox.Height = 25; doubleTextBox.Value = 1234567; -doubleTextBox.Culture = new System.Globalization.CultureInfo("en-US"); +doubleTextBox.Culture = new CultureInfo("en-US"); {% endhighlight %} -{%endtabs%} +{% endtabs %} ![WPF DoubleTextBox with Culture](Getting-Started_images/wpf-double-textbox-culture.png) -N> When you use both `NumberFormat` and `Culture`, the `NumberFormat` will have a higher priority. +N> When you use both `NumberFormat` and `Culture`, the `NumberFormat` will have a higher priority. For details, see [Culture and Number Formats](Culture-and-Number-Formats.md). ## Theme diff --git a/wpf/Double-TextBox/Overview.md b/wpf/Double-TextBox/Overview.md index d2f3a8771..a24aecb79 100644 --- a/wpf/Double-TextBox/Overview.md +++ b/wpf/Double-TextBox/Overview.md @@ -9,7 +9,7 @@ documentation: ug # About Syncfusion® WPF DoubleTextBox Control -The [DoubleTextBox](https://www.syncfusion.com/wpf-controls/double-textbox) control restricts input to double values with support for data binding, watermark, null value and support for culture. It provides various customization options to improve its appearance and suit an applications. +The [DoubleTextBox](https://www.syncfusion.com/wpf-controls/double-textbox) control restricts input to double values with support for data binding, watermark, null value, and culture. It provides various customization options to improve its appearance and suit an application. ## Control structure @@ -21,7 +21,7 @@ The [DoubleTextBox](https://www.syncfusion.com/wpf-controls/double-textbox) cont The core features of the `DoubleTextBox` are as follows: -* Provides the ability to control the range of input values by using the `MinValue` and `MaxValue` properties. +* Provides the ability to control the range of input values by using the [MinValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_MinValue) and [MaxValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_MaxValue) properties. * Provides different foreground brushes for positive, negative, and zero values. * Provides data binding support. * Provides built-in Visual Styles and themes. @@ -29,3 +29,5 @@ The core features of the `DoubleTextBox` are as follows: * Provides Number Format support. * Provides Null Value support. * Provides culture support. +* Provides Range Adorner support. +* Provides Step Interval support. diff --git a/wpf/Double-TextBox/Range-Adorner.md b/wpf/Double-TextBox/Range-Adorner.md index 14cabf8a2..be0e0e61e 100644 --- a/wpf/Double-TextBox/Range-Adorner.md +++ b/wpf/Double-TextBox/Range-Adorner.md @@ -9,7 +9,7 @@ documentation: ug # Range Adorner in WPF DoubleTextBox -Value of DoubleTextBox can be visually indicated like a progress bar using range-adorner feature, this feature is disabled by default. You can show the adorner over [DoubleTextBox](https://www.syncfusion.com/wpf-ui-controls/double-textbox) control by setting [EnableRangeAdorner](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_EnableRangeAdorner) property to `true`. default value of `EnableRangeAdorner` is `false`. The adorner layer can be filled in the control area on the basis of the minimum and maximum values with considering the given value. Range Adorner is not displayed when a `MinValue` or `MaxValue` property is not set. +The value of `DoubleTextBox` can be visually indicated like a progress bar using the range adorner feature. This feature is disabled by default. You can show the adorner over the [DoubleTextBox](https://www.syncfusion.com/wpf-controls/double-textbox) control by setting the [EnableRangeAdorner](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_EnableRangeAdorner) property to `true`. The default value of `EnableRangeAdorner` is `false`. The adorner layer fills the control area on the basis of the minimum and maximum values, taking the current `Value` into account. The Range Adorner is not displayed when the `MinValue` or `MaxValue` property is not set. When the `Value` is outside the `[MinValue, MaxValue]` range, the adorner is clamped to the nearest bound. {% tabs %} {% highlight XAML %} @@ -19,20 +19,22 @@ Value of DoubleTextBox can be visually indicated like a progress bar using range {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; + DoubleTextBox doubleTextBox = new DoubleTextBox(); doubleTextBox.MinValue = 0; doubleTextBox.MaxValue = 100; doubleTextBox.Value = 63; -doubleTextBox.EnableRangeAdorner =true; +doubleTextBox.EnableRangeAdorner = true; {% endhighlight %} {% endtabs %} ![WPF DoubleTextBox displays RangeAdorner](Range-Adorner_images/wpf-double-textbox-range-adorner.png) -## Changing background of range-adorner +## Changing the Background of the Range Adorner -You can change the background color of the range adorner using [RangeAdornerBackground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_RangeAdornerBackground) property. +You can change the background color of the range adorner using the [RangeAdornerBackground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_RangeAdornerBackground) property. The default value of `RangeAdornerBackground` is a light-blue brush. {% tabs %} {% highlight XAML %} @@ -42,6 +44,9 @@ You can change the background color of the range adorner using [RangeAdornerBack {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; +using System.Windows.Media; + DoubleTextBox doubleTextBox = new DoubleTextBox(); doubleTextBox.MinValue = 0; doubleTextBox.MaxValue = 100; diff --git a/wpf/Double-TextBox/Restriction-or-Validation.md b/wpf/Double-TextBox/Restriction-or-Validation.md index fa5a26633..d96656a32 100644 --- a/wpf/Double-TextBox/Restriction-or-Validation.md +++ b/wpf/Double-TextBox/Restriction-or-Validation.md @@ -13,21 +13,21 @@ This section explains how to validate or restrict the `DoubleTextBox` control va ## Restrict the value within minimum and maximum value -The [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_Value) of the [DoubleTextBox](https://www.syncfusion.com/wpf-ui-controls/double-textbox) can be restricted within the maximum and minimum limits. Once the value has reached the maximum or minimum value , the value does not exceed the limit. We can change the maximum and minimum limits by using the [MinValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_MinValue) property and [MaxValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_MaxValue) property. +The [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_Value) of the [DoubleTextBox](https://www.syncfusion.com/wpf-controls/double-textbox) can be restricted within the maximum and minimum limits. Once the value has reached the maximum or minimum value, the value does not exceed the limit. You can change the maximum and minimum limits by using the [MinValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_MinValue) and [MaxValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_MaxValue) properties. You can choose when to validate the maximum and minimum limits while changing the values by using the [MinValidation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MinValidation) and [MaxValidation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MaxValidation) properties. -* `OnKeyPress` — When setting the `MaxValidation` or `MinValidation` to `OnKeyPress`, the value in the `DoubleTextBox` will be validated shortly after pressing a key. So, it is not possible to provide any invalid input at all and the value does not exceed the maximum and minimum limits. +* `OnKeyPress` — When `MaxValidation` or `MinValidation` is set to `OnKeyPress`, the value in the `DoubleTextBox` is validated shortly after pressing a key. As a result, invalid input is not allowed, and the value does not exceed the maximum and minimum limits. -* `OnLostFocus` - When setting `MaxValidation` or `MinValidation` to `OnLostFocus`, the value in the `DoubleTextBox` is validated, when the `DoubleTextBox` loses the focus. That is, the `DoubleTextBox` will accept any value, validation will only take place after the `DoubleTextBox` has lost its keyboard focus. After validation, when the value of the `DoubleTextBox` is greater than the `MaxValue` or less than the `MinValue`, the value will be automatically set to `MaxValue` or `MinValue`. +* `OnLostFocus` - When `MaxValidation` or `MinValidation` is set to `OnLostFocus`, the value in the `DoubleTextBox` is validated when the control loses keyboard focus. The control will accept any value while editing, and validation only takes place after focus is lost. After validation, when the value of the `DoubleTextBox` is greater than the `MaxValue` or less than the `MinValue`, the value will be automatically set to `MaxValue` or `MinValue`. -* [MaxValueOnExceedMaxDigit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MaxValueOnExceedMaxDigit) - When you give input greater than specified maximum limit, `MaxValueOnExceedMaxDigit` property will decide either it should retain the old value or reset to maximum limit that is specified. For example, if `MaxValue` is set to 100 and you are trying to input 200. `Value` will changed to 100 when `MaxValueOnExceedMaxDigit` is `true`. When `MaxValueOnExceedMaxDigit` is `false`, 20 will be retained and last entered 0 will be ignored. +* [MaxValueOnExceedMaxDigit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MaxValueOnExceedMaxDigit) - When you give input greater than the specified maximum limit, `MaxValueOnExceedMaxDigit` decides whether to retain the old value or reset to the specified maximum limit. For example, if `MaxValue` is set to 100 and you are trying to input 200, the `Value` will change to 100 when `MaxValueOnExceedMaxDigit` is `true`. When `MaxValueOnExceedMaxDigit` is `false`, 20 will be retained and the last entered 0 will be ignored. - N> `MaxValueOnExceedMinDigit` property will be enabled only when the `MaxValidation` is set to `OnKeyPress`. + N> `MaxValueOnExceedMaxDigit` is only effective when the `MaxValidation` is set to `OnKeyPress`. -* [MinValueOnExceedMinDigit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MinValueOnExceedMinDigit) - When you give input less than specified minimum limit, `MinValueOnExceedMinDigit` property will decide either it should retain the old value or reset to minimum limit that is specified. For example, if `MinValue` is set to 200 and the `Value` is 205 and you are trying change the value to 20. `Value` will changed to 200 when `MinValueOnExceedMinDigit` is `true`. When `MinValueOnExceedMinDigit` is `false`, Old value 205 will be retained. +* [MinValueOnExceedMinDigit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MinValueOnExceedMinDigit) - When you give input less than the specified minimum limit, `MinValueOnExceedMinDigit` decides whether to retain the old value or reset to the specified minimum limit. For example, if `MinValue` is set to 200 and the `Value` is 205, and you try to change the value to 20, the `Value` will change to 200 when `MinValueOnExceedMinDigit` is `true`. When `MinValueOnExceedMinDigit` is `false`, the old value 205 will be retained. - N> `MinValueOnExceedMinDigit` will be enabled only when the `MinValidation` is set to `OnKeyPress`. + N> `MinValueOnExceedMinDigit` is only effective when the `MinValidation` is set to `OnKeyPress`. {% tabs %} {% highlight XAML %} @@ -39,11 +39,13 @@ You can choose when to validate the maximum and minimum limits while changing th {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; + DoubleTextBox doubleTextBox = new DoubleTextBox(); doubleTextBox.Width = 150; doubleTextBox.Height = 25; doubleTextBox.MinValue = 10; -doubleTextBox.MaxValue =100; +doubleTextBox.MaxValue = 100; doubleTextBox.MinValidation = MinValidation.OnKeyPress; doubleTextBox.MaxValidation = MaxValidation.OnLostFocus; doubleTextBox.MinValueOnExceedMinDigit = true; @@ -60,11 +62,11 @@ doubleTextBox.MaxValueOnExceedMaxDigit = true; ![Validate maximum value of DoubleTextBox when keyboard focus is lost](Restriction-or-Validation_images/wpf-double-textbox-max-value-validation.jpeg) -## Restrict number of decimal digit +## Restrict number of decimal digits -You can format the decimal digits in the [DoubleTextBox](https://www.syncfusion.com/wpf-ui-controls/double-textbox) control using [NumberDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_NumberDecimalDigits) property. You can restrict the decimal digits of the text within maximum and minimum limits in `DoubleTextBox` control using [MinimumNumberDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_MinimumNumberDecimalDigits) and [MaximumNumberDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_MaximumNumberDecimalDigits) properties. The default value of `MinimumNumberDecimalDigits`,`MaximumNumberDecimalDigits` and `DoubleDecimalDigits` properties is **-1**. +You can format the decimal digits in the [DoubleTextBox](https://www.syncfusion.com/wpf-controls/double-textbox) control using the [NumberDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_NumberDecimalDigits) property. You can restrict the decimal digits of the text within maximum and minimum limits using the [MinimumNumberDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_MinimumNumberDecimalDigits) and [MaximumNumberDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_MaximumNumberDecimalDigits) properties. The default value of `MinimumNumberDecimalDigits` and `MaximumNumberDecimalDigits` is **-1**, which means the value is unbounded. -N> If the value of `MinimumNumberDecimalDigits` property is greater than the value of `MaximumNumberDecimalDigits` property, the text of `DoubleTextBox` will be updated based on the value of `MinimumNumberDecimalDigits` property. +N> If the value of `MinimumNumberDecimalDigits` is greater than the value of `MaximumNumberDecimalDigits`, the text of `DoubleTextBox` will be updated based on the value of `MinimumNumberDecimalDigits`. {% tabs %} {% highlight XAML %} @@ -76,6 +78,8 @@ N> If the value of `MinimumNumberDecimalDigits` property is greater than the val {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; + DoubleTextBox doubleTextBox = new DoubleTextBox(); doubleTextBox.Value = 125.32545; doubleTextBox.MaximumNumberDecimalDigits = 4; @@ -93,13 +97,15 @@ When value of `MinimumNumberDecimalDigits`, `MaximumNumberDecimalDigits` and `Nu {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; + DoubleTextBox doubleTextBox = new DoubleTextBox(); doubleTextBox.Value = 125.32545; doubleTextBox.MaximumNumberDecimalDigits = 4; @@ -111,9 +117,9 @@ doubleTextBox.NumberDecimalDigits = 3; ![DoubleTextBox WPF change decimal digits](Restriction-or-Validation_images/doubletextbox-wpf-decimaldigits.png) -## Read only mode +## Read-only mode -The `DoubleTextBox` cannot allow the user input, edits when [IsReadOnly](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.primitives.textboxbase.isreadonly?redirectedfrom=MSDN&view=netframework-4.7.2#System_Windows_Controls_Primitives_TextBoxBase_IsReadOnly) property is sets to `true`. The user can still select text and display the cursor on the `DoubleTextBox` by setting the [IsReadOnlyCaretVisible](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.primitives.textboxbase.isreadonlycaretvisible?view=netframework-4.8) property to `true`. However, value can be changed programmatically in readonly mode. +The `DoubleTextBox` does not allow user input or edits when the [IsReadOnly](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.primitives.textboxbase.isreadonly?view=netframework-4.8#System_Windows_Controls_Primitives_TextBoxBase_IsReadOnly) property is set to `true`. The user can still select text and display the cursor in the `DoubleTextBox` by setting the [IsReadOnlyCaretVisible](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.primitives.textboxbase.isreadonlycaretvisible?view=netframework-4.8) property to `true`. The default value of `IsReadOnly` is `false` and the default value of `IsReadOnlyCaretVisible` is `false`. The `Value` can still be changed programmatically in read-only mode. {% tabs %} {% highlight XAML %} @@ -121,6 +127,8 @@ The `DoubleTextBox` cannot allow the user input, edits when [IsReadOnly](https:/ {% endhighlight %} +using Syncfusion.Windows.Shared; + {% highlight C# %} DoubleTextBox doubleTextBox = new DoubleTextBox(); diff --git a/wpf/Double-TextBox/Step-Interval.md b/wpf/Double-TextBox/Step-Interval.md index 84bfada80..5ca5c731b 100644 --- a/wpf/Double-TextBox/Step-Interval.md +++ b/wpf/Double-TextBox/Step-Interval.md @@ -9,13 +9,13 @@ documentation: ug # Step Interval in WPF DoubleTextBox -The [DoubleTextBox](https://www.syncfusion.com/wpf-ui-controls/double-textbox) control allows you to increase or decrease the value by pressing up-arrow and down-arrow keys in keyboard or mouse wheel over the control. The [ScrollInterval](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_ScrollInterval) property is used to specify the increment or decrement interval. The default value of `ScrollInterval` is 1. +The [DoubleTextBox](https://www.syncfusion.com/wpf-controls/double-textbox) control allows you to increase or decrease the value by pressing the up and down arrow keys on the keyboard or by scrolling the mouse wheel over the control. The [ScrollInterval](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_ScrollInterval) property specifies the increment or decrement interval. The default value of `ScrollInterval` is 1. For example, the `ScrollInterval` value is set to 4. So, that the `DoubleTextBox` control [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.DoubleTextBox.html#Syncfusion_Windows_Shared_DoubleTextBox_Value) increases or decreases by 4 while pressing Up arrow or Down arrow keys and Mouse wheel scrolling up or down. -## Change Value on Up, Down arrow key +## Change Value on Up, Down Arrow Key -The `DoubleTextBox` control allows you to increase or decrease the `Value` of `DoubleTextBox` based on the `ScrollInterval` by pressing the up arrow and down arrow keys on the keyboard. +The `DoubleTextBox` control allows you to increase or decrease the `Value` based on the `ScrollInterval` by pressing the up arrow and down arrow keys on the keyboard. {% tabs %} {% highlight XAML %} @@ -26,6 +26,8 @@ The `DoubleTextBox` control allows you to increase or decrease the `Value` of `D {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; + DoubleTextBox doubleTextBox = new DoubleTextBox(); doubleTextBox.Width = 150; doubleTextBox.Height = 25; @@ -39,17 +41,19 @@ doubleTextBox.ScrollInterval = 2; ## Change Value on Mouse Wheel -The `DoubleTextBox` allows you to increase or decrease the `Value` based on the `ScrollInterval` by the Mouse scrolling over the control When the [IsScrollingOnCircle](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.Editorbase.html#Syncfusion_Windows_Shared_EditorBase_IsScrollingOnCircle) property is `true`. The default value of `IsScrollingOnCircle` property is `true`. +The `DoubleTextBox` allows you to increase or decrease the `Value` based on the `ScrollInterval` when scrolling the mouse wheel over the control. This is enabled when the [IsScrollingOnCircle](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_IsScrollingOnCircle) property is `true`. The default value of `IsScrollingOnCircle` is `true`. {% tabs %} {% highlight XAML %} - {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; + DoubleTextBox doubleTextBox = new DoubleTextBox(); doubleTextBox.Width = 150; doubleTextBox.Height = 25; @@ -64,17 +68,19 @@ doubleTextBox.ScrollInterval = 3; ## Change Value on Click and Drag -The `DoubleTextBox` allows you to increase or decrease the value based on the `ScrollInterval` by clicking and dragging the mouse when the [EnableExtendedScrolling](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_EnableExtendedScrolling) property is `true`. `DoubleTextBox` value increases when you click and drag the mouse to the right or the top of the screen and decreases when the mouse moves to the left or the bottom of the screen. Before that, the control should be in an unfocused state. +The `DoubleTextBox` allows you to increase or decrease the value based on the `ScrollInterval` by clicking and dragging the mouse when the [EnableExtendedScrolling](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_EnableExtendedScrolling) property is `true`. The `DoubleTextBox` increases when you click and drag the mouse to the right or top of the screen, and decreases when the mouse moves to the left or bottom of the screen. Before that, the control should be in an unfocused state. The default value of `EnableExtendedScrolling` is `false`. {% tabs %} {% highlight XAML %} - {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; + DoubleTextBox doubleTextBox = new DoubleTextBox(); doubleTextBox.Width = 120; doubleTextBox.Height = 25; @@ -89,7 +95,7 @@ doubleTextBox.EnableExtendedScrolling = true; ## Allow or restrict selection on focus -`DoubleTextBox` allows you to automatically select text by setting [TextSelectionOnFocus](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_TextSelectionOnFocus) property to `true` and when the control got focus. If you want to restrict the selection on when control got focus, use the `TextSelectionOnFocus` property value as `false`. The default value of the `TextSelectionOnFocus` property is `true`. +`DoubleTextBox` allows you to automatically select the text when the control receives focus, by setting the [TextSelectionOnFocus](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_TextSelectionOnFocus) property to `true`. If you want to restrict selection when the control receives focus, set `TextSelectionOnFocus` to `false`. The default value of `TextSelectionOnFocus` is `true`. {% tabs %} {% highlight XAML %} @@ -99,8 +105,10 @@ doubleTextBox.EnableExtendedScrolling = true; {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; + DoubleTextBox doubleTextBox = new DoubleTextBox(); -doubleTextBox.TextSelectionOnFocus = true; +doubleTextBox.TextSelectionOnFocus = false; {% endhighlight %} {% endtabs %} diff --git a/wpf/Integer-TextBox/Appearance.md b/wpf/Integer-TextBox/Appearance.md index fcaf84498..5dffecb06 100644 --- a/wpf/Integer-TextBox/Appearance.md +++ b/wpf/Integer-TextBox/Appearance.md @@ -13,11 +13,11 @@ This section deals with the appearance of `IntegerTextBox` control and contains ## Setting the Foreground -The [IntegerTextBox](https://www.syncfusion.com/wpf-controls/integer-textbox) control [Foreground](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.control.foreground?view=netframework-4.8) can be modified based on the value of the control. The following are the foreground for `IntegerTextBox` control. +The foreground of the [IntegerTextBox](https://www.syncfusion.com/wpf-controls/integer-textbox) control can be modified based on the value of the control by using the [Foreground](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.control.foreground?view=netframework-4.8) and the value-specific brushes described below. ### Foreground for Positive Value -We can change a positive color for the value of `IntegerTextBox` by setting the [PositiveForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_PositiveForeground) property and it will be applied when the [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_Value) is positive. The default color of `PositiveForeground` is `Black`. +You can change the foreground color applied to positive values of `IntegerTextBox` by setting the [PositiveForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_PositiveForeground) property. It is applied when the [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_Value) is positive. The default color of `PositiveForeground` is `Black`. {% tabs %} {% highlight XAML %} @@ -38,9 +38,9 @@ integerTextBox.PositiveForeground = Brushes.Blue; ![Changing Positive Value Color in WPF IntegerTextBox](Appearance_images/wpf-integer-textbox-positive-color.jpg) -### Foreground for Negative Value +### Foreground for Negative Value -We can change a negative color for the value of `IntegerTextBox` by setting the [NegativeForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_NegativeForeground) property and it will be applied when the [ApplyNegativeForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_ApplyNegativeForeground) property is `true` and the `Value` is negative. The default color of `NegativeForeground` is `Red`. +You can change the foreground color applied to negative values of `IntegerTextBox` by setting the [NegativeForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_NegativeForeground) property. It is applied when the [ApplyNegativeForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_ApplyNegativeForeground) property is `true` and the `Value` is negative. The default color of `NegativeForeground` is `Red`. The default value of `ApplyNegativeForeground` is `true`. {% tabs %} {% highlight XAML %} @@ -65,8 +65,7 @@ integerTextBox.NegativeForeground = Brushes.SpringGreen; ### Foreground for Zero Value -We can change a zero color for the value of `IntegerTextBox` by setting the [ZeroColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_ZeroColor) property and it will be applied when the [ApplyZeroColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_ApplyZeroColor) property is `true` and the `Value` is zero. -The default color of `ZeroColor` is `Green`. +You can change the foreground color applied when the `Value` of `IntegerTextBox` is zero by setting the [ZeroColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_ZeroColor) property. It is applied when the [ApplyZeroColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_ApplyZeroColor) property is `true` and the `Value` is zero. The default value of `ApplyZeroColor` is `true`. The default color of `ZeroColor` is `Green`. {% tabs %} {% highlight XAML %} @@ -114,22 +113,23 @@ integerTextBox.Background = Brushes.Cyan; ## Setting the Corner Radius -Corner Radius indicates the degree to which the corners of the border can be rounded. To create curved borders for the `IntegerTextBox`, use [CornerRadius](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_CornerRadius) property. The default value of `CornerRadius` property is 1. +Corner Radius indicates the degree to which the corners of the border can be rounded. To create curved borders for the `IntegerTextBox`, use the [CornerRadius](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_CornerRadius) property. The default value of `CornerRadius` is 1. {% tabs %} - {% highlight XAML %} {% endhighlight %} - {% highlight C# %} +using Syncfusion.Windows.Shared; +using System.Windows; + IntegerTextBox integerTextBox = new IntegerTextBox(); integerTextBox.Width = 100; integerTextBox.Height = 25; -integerTextBox.CornerRadius = new CornerRadius(5); +integerTextBox.CornerRadius = new CornerRadius(5); {% endhighlight %} {% endtabs %} @@ -138,7 +138,7 @@ integerTextBox.CornerRadius = new CornerRadius(5); ## Apply Background for Selection -`IntegerTextBox` allows different brushes to highlight the selected text by setting the [SelectionBrush](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.primitives.textboxbase.selectionbrush?view=netframework-4.8) and [SelectionOpacity](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.primitives.textboxbase.selectionopacity?view=netframework-4.8) properties. The `SelectionOpacity` property specifies the opacity of the `SelectionBrush`. +`IntegerTextBox` allows different brushes to highlight the selected text by setting the [SelectionBrush](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.primitives.textboxbase.selectionbrush?view=netframework-4.8) and [SelectionOpacity](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.primitives.textboxbase.selectionopacity?view=netframework-4.8) properties. The `SelectionOpacity` property specifies the opacity of the `SelectionBrush`. The default value of `SelectionOpacity` is `0.4`. {% tabs %} {% highlight XAML %} @@ -148,11 +148,14 @@ integerTextBox.CornerRadius = new CornerRadius(5); {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; +using System.Windows.Media; + IntegerTextBox integerTextBox = new IntegerTextBox(); integerTextBox.Width = 100; integerTextBox.Height = 25; integerTextBox.SelectionBrush = Brushes.Red; -integerTextBox.SelectionOpacity = 0.3; +integerTextBox.SelectionOpacity = 0.5; {% endhighlight %} {% endtabs %} @@ -161,7 +164,7 @@ integerTextBox.SelectionOpacity = 0.3; ## Align Value -`IntegerTextBox` allows to display the value from right or center or left side by setting the [TextAlignment](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.textblock.textalignment?view=netframework-4.8) property to `Right` or `Left` or `Center`. The Default value of `TextAlignment` is `Left`. +`IntegerTextBox` allows you to display the value from the right, center, or left side by setting the [TextAlignment](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.textblock.textalignment?view=netframework-4.8) property to `Right`, `Left`, or `Center`. The default value of `TextAlignment` is `Left`. {% tabs %} {% highlight XAML %} @@ -183,7 +186,7 @@ integerTextBox.TextAlignment = TextAlignment.Center; ## Setting ToolTip -`IntegerTextBox` provides support for ToolTip to display certain information when the mouse hovers on the `IntegerTextBox`. You can customize the tooltip information by setting the [ToolTip](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.tooltip?view=netframework-4.8) property. +`IntegerTextBox` provides support for a ToolTip to display certain information when the mouse hovers over the `IntegerTextBox`. You can customize the tooltip information by setting the [ToolTip](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.tooltip?view=netframework-4.8) property. {% tabs %} {% highlight XAML %} diff --git a/wpf/Integer-TextBox/Changing-Integer-Value.md b/wpf/Integer-TextBox/Changing-Integer-Value.md index d3cdf96bf..016b3b7b4 100644 --- a/wpf/Integer-TextBox/Changing-Integer-Value.md +++ b/wpf/Integer-TextBox/Changing-Integer-Value.md @@ -11,22 +11,24 @@ documentation: ug The [IntegerTextBox](https://www.syncfusion.com/wpf-ui-controls/integer-textbox) allows the user to change the value using the [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_Value) property. -{%tabs%} -{% highlight xaml %} +{% tabs %} +{% highlight XAML %} -{% endhighlight %} +{% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; + IntegerTextBox integerTextBox = new IntegerTextBox(); integerTextBox.Width = 150; integerTextBox.Height = 25; integerTextBox.Value = 10; {% endhighlight %} -{%endtabs%} +{% endtabs %} ![WPF IntegerTextBox displays Value](Changing-Integer-Value_images/wpf-integer-textbox-value.png) @@ -34,20 +36,22 @@ Data binding is the process of establishing a connection between the application The following code snippets illustrate the value binding from one `IntegerTextBox` to another. -{%tabs%} -{% highlight xaml %} +{% tabs %} +{% highlight XAML %} {% endhighlight %} -{%endtabs%} +{% endtabs %} ViewModel.cs {% tabs %} {% highlight C# %} +using Syncfusion.Windows.Shared; + class ViewModel : NotificationObject { private int myValue; @@ -72,9 +76,9 @@ class ViewModel : NotificationObject ## Change integer value by pasting the clipboard's text -By default, `IntegerTextBox` simply replaces the whole value by copied value with the current number format. If you want to replace or insert the copied value on specific place, use the [PasteMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_PasteMode) property value as `Advanced`. The default value of `PasteMode` property is `Default`. +By default, `IntegerTextBox` simply replaces the whole value with the copied value using the current number format. If you want to replace or insert the copied value at a specific place, set the [PasteMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_PasteMode) property to `Advanced`. The default value of `PasteMode` is `Default`. In `Advanced` mode, the pasted value is treated as an integer and any decimal portion is rejected. -The following table explains the pasting behaviour in `Advanced` paste mode, +The following table explains the pasting behavior in `Advanced` paste mode for integer values: @@ -85,66 +89,75 @@ The following table explains the pasting behaviour in `Advanced` paste mode, - + - - + + - - + + - + - - + + + + + + +
1 When the whole value is selectedIt simply replaces the whole value by copied value with the current number format.The copied integer value replaces the whole value with the current number format.
2When the cursor is at some position and the copied value does not contain a number decimal separatorIt inserts the copied value into the current cursor position.When the cursor is at some position and the copied value is a valid integerThe copied integer is inserted at the current cursor position.
3When the cursor is at some position and the copied value contains a number decimal separatorIt won’t perform pasting operation.When the cursor is at some position and the copied value is not a valid integer (for example, contains a decimal separator, letters, or exceeds the Int64 range)The paste operation is not performed.
4 When the cursor is at some position and the control value is 0 or nullIt simply replaces the whole value by copied value with the current number format.The copied value replaces the whole value with the current number format.
5When a part of the number is selected and copied value contains number decimal separator it won’t perform pasting operation.When a part of the number is selected and the copied value is not a valid integerThe paste operation is not performed.
6When the copied value falls outside the configured MinValue or MaxValue rangeThe paste operation is not performed.
-{%tabs%} -{% highlight xaml %} +{% tabs %} +{% highlight XAML %} - -{% endhighlight %} +{% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; + IntegerTextBox integerTextBox = new IntegerTextBox(); integerTextBox.PasteMode = PasteMode.Advanced; integerTextBox.Value = 12345; {% endhighlight %} -{%endtabs%} +{% endtabs %} ![WPF IntegerTextBox displays Pasting Copied Value in Specific Place](Changing-Integer-Value_images/wpf-integer-textbox-paste-value.png) ## Show UpDown Button -You can increment or decrement the integer value of `IntegerTextBox` by setting the `ShowSpinButton` property value as `true`. Click UpButton to increment or DownButton to decrement the integer value. The default value of `ShowSpinButton` property is `false`. +You can increment or decrement the integer value of `IntegerTextBox` by setting the `ShowSpinButton` property to `true`. Click the Up button to increment or the Down button to decrement the integer value. The default value of `ShowSpinButton` is `false`. -{%tabs%} -{% highlight xaml %} +{% tabs %} +{% highlight XAML %} {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; + IntegerTextBox integerTextBox = new IntegerTextBox(); integerTextBox.ShowSpinButton = true; {% endhighlight %} -{%endtabs%} +{% endtabs %} ![WPF IntegerTextBox displays SpinButton](Changing-Integer-Value_images/wpf-integer-textbox-spinbutton.gif) @@ -152,25 +165,29 @@ integerTextBox.ShowSpinButton = true; The `IntegerTextBox` control can notify changes in value through the [ValueChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html) event. In `ValueChanged` event, you can get old value and new value from the `OldValue` and `NewValue` properties. -{%tabs%} -{% highlight xaml %} +{% tabs %} +{% highlight XAML %} {% endhighlight %} -{% highlight C# %} +{% highlight C# %} + +using Syncfusion.Windows.Shared; IntegerTextBox integerTextBox = new IntegerTextBox(); -integerTextBox.ValueChanged += new PropertyChangedCallback(IntegerTextBox_ValueChanged); +integerTextBox.ValueChanged += new PropertyChangedCallbackHandler(IntegerTextBox_ValueChanged); {% endhighlight %} -{%endtabs%} +{% endtabs %} You can handle the event as follows: {% tabs %} {% highlight C# %} +using System.Windows; + private void IntegerTextBox_ValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { // Get old and new value @@ -233,11 +250,11 @@ integerTextBox.UseNullOption = true; ## Setting Watermark Text -We can display certain information within the control by using the [WaterMarkText](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkText) property. `WaterMarkText` is shown when the [WatermarkTextIsVisible](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkTextIsVisible) property is `true` and the value is `null` or empty, the control is not in focus and the `UseNullOption` property is `true`. +You can display certain information within the control by using the [WaterMarkText](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkText) property. `WaterMarkText` is shown when the [WatermarkTextIsVisible](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkTextIsVisible) property is `true`, the value is `null` or empty, the control is not in focus, and the `UseNullOption` property is `true`. ### Setting the WatermarkText Foreground -The `IntegerTextBox` allows you to set the desired brush as a foreground for `WaterMarkText` using [WaterMarkTextForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkTextForeground) property. The default color of `WaterMarkTextForeground` is `Black`. +The `IntegerTextBox` allows you to set the desired brush as a foreground for `WaterMarkText` using the [WaterMarkTextForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkTextForeground) property. The default color of `WaterMarkTextForeground` is `Black`. The default value of `WatermarkTextIsVisible` is `true`. {% tabs %} {% highlight XAML %} @@ -249,6 +266,9 @@ The `IntegerTextBox` allows you to set the desired brush as a foreground for `Wa {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; +using System.Windows.Media; + IntegerTextBox integerTextBox = new IntegerTextBox(); integerTextBox.Width = 100; integerTextBox.Height = 25; @@ -264,13 +284,13 @@ integerTextBox.WatermarkTextForeground = Brushes.Red; ### Setting Watermark Template -You can customize the Visual appearance of the `WatermarkText` by using the [WatermarkTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkTemplate) property. +You can customize the visual appearance of the `WatermarkText` by using the [WatermarkTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkTemplate) property. Use the [WatermarkOpacity](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkOpacity) property to adjust the opacity of the watermark. The default value of `WatermarkOpacity` is `1`. -{% highlight xaml %} +{% highlight XAML %} @@ -285,6 +305,6 @@ You can customize the Visual appearance of the `WatermarkText` by using the [Wat ![Customizing Watermark Text in WPF IntegerTextBox](Changing-Integer-Value_images/wpf-integer-textbox-watermark-customization.png) -N> The `UseNullOption` property must be enabled if you want to see `NullValue` or `WaterMarkText` in `IntegerTextBox` control. +N> The `UseNullOption` property must be enabled if you want to see `NullValue` or `WaterMarkText` in `IntegerTextBox`. N> If both `NullValue` and `WaterMarkText` are specified, you will only see `NullValue` but not `WaterMarkText`. diff --git a/wpf/Integer-TextBox/Culture-and-Number-Formats.md b/wpf/Integer-TextBox/Culture-and-Number-Formats.md index 07fad0257..72b4bbf84 100644 --- a/wpf/Integer-TextBox/Culture-and-Number-Formats.md +++ b/wpf/Integer-TextBox/Culture-and-Number-Formats.md @@ -20,26 +20,28 @@ Value of `IntegerTextBox` can be formatted in following ways: The [IntegerTextBox](https://www.syncfusion.com/wpf-controls/integer-textbox) provides support for globalization by using the [Culture](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_Culture) property. The `Culture` property is used to format the number group size and group separator of the `IntegerTextBox` value based on the respective culture. {% tabs %} -{% highlight xaml %} +{% highlight XAML %} {% endhighlight %} - {% highlight C# %} +using Syncfusion.Windows.Shared; +using System.Globalization; + IntegerTextBox integerTextBox = new IntegerTextBox(); integerTextBox.Width = 150; integerTextBox.Height = 25; integerTextBox.Value = 1234567; //Setting Latin culture for integer textbox. -integerTextBox.Culture = new System.Globalization.CultureInfo("bs-Latn"); +integerTextBox.Culture = new CultureInfo("bs-Latn"); {% endhighlight %} {% endtabs %} -By default the US culture uses “,” as the `NumberGroupSeparator` where as the Latin culture uses “.” as the `NumberGroupSeparator`. +By default the US culture uses “,” as the `NumberGroupSeparator`, whereas the Latin culture uses “.” as the `NumberGroupSeparator`. **Default Culture** @@ -51,42 +53,57 @@ By default the US culture uses “,” as the `NumberGroupSeparator` where as th ## NumberFormatInfo based formatting -The number formatting of `IntegerTextBox` can be customized by setting [NumberFormat](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_NumberFormat) property. - -{%tabs%} -{% highlight xaml %} +The number formatting of `IntegerTextBox` can be customized by setting the [NumberFormat](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_NumberFormat) property. - - - - - +{% tabs %} +{% highlight XAML %} + + + + + + + + + + {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; +using System.Globalization; + IntegerTextBox integerTextBox = new IntegerTextBox(); integerTextBox.Width = 150; integerTextBox.Height = 25; integerTextBox.GroupSeperatorEnabled = true; integerTextBox.Value = 123456789012345; -integerTextBox.Culture = new System.Globalization.CultureInfo("en-US"); -integerTextBox.NumberFormat = new System.Globalization.NumberFormatInfo() -{ -NumberGroupSeparator = "/" +integerTextBox.Culture = new CultureInfo("en-US"); +integerTextBox.NumberFormat = new NumberFormatInfo() +{ + NumberGroupSeparator = "/" }; {% endhighlight %} -{%endtabs%} +{% endtabs %} ![WPF IntegerTextBox with Formatting](Culture-and-Number-Formats_images/wpf-integer-textbox-formatting.png) -The following code illustrate how to set `NumberGroupSizes` by using the `NumberFormat`property. +The following code illustrates how to set `NumberGroupSizes` by using the `NumberFormat` property. {% tabs %} {% highlight C# %} +using Syncfusion.Windows.Shared; +using System.Globalization; + IntegerTextBox integerTextBox = new IntegerTextBox(); integerTextBox.Width = 150; integerTextBox.Height = 25; @@ -105,27 +122,28 @@ integerTextBox.NumberFormat = new NumberFormatInfo() ## Formatting with dedicated properties -The number formatting of `IntegerTextBox` can also be customized by setting the [NumberGroupSeparator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_NumberGroupSeparator) property and the [NumberGroupSizes](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_NumberGroupSizes) property. -You can show the group separator by enable the [GroupSeperatorEnabled](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_GroupSeperatorEnabled) property to `true`. +The number formatting of `IntegerTextBox` can also be customized by setting the [NumberGroupSeparator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_NumberGroupSeparator) and [NumberGroupSizes](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_NumberGroupSizes) properties. You can show the group separator by enabling the [GroupSeperatorEnabled](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_GroupSeperatorEnabled) property to `true`. The default value of `GroupSeperatorEnabled` is `false`. -The following code illustrate how to format using the `NumberGroupSeparator`, `NumberGroupSizes` property of the `IntegerTextBox`. +The following code illustrates how to format using the `NumberGroupSeparator` and `NumberGroupSizes` properties of the `IntegerTextBox`. Use a standard `int[]` for the `NumberGroupSizes` property. {% tabs %} {% highlight C# %} +using Syncfusion.Windows.Shared; + IntegerTextBox integerTextBox = new IntegerTextBox(); integerTextBox.Width = 150; integerTextBox.Height = 25; integerTextBox.Value = 123456789012345; integerTextBox.NumberGroupSeparator = "/"; integerTextBox.GroupSeperatorEnabled = true; -integerTextBox.NumberGroupSizes = new Int32Collection() { 2, 3, 0 }; +integerTextBox.NumberGroupSizes = new int[] { 2, 3, 0 }; {% endhighlight %} {% endtabs %} ![WPF IntegerTextBox with Formatting](Culture-and-Number-Formats_images/wpf-integer-textbox-number-format.png) -N> When you use both the `NumberFormat` and the dedicated properties (`NumberGroupSeparator` and `NumberGroupSizes`) to format the value of `IntegerTextBox`, the `NumberGroupSeparator`and `NumberGroupSizes` properties have higher priority. +N> When you use both the `NumberFormat` and the dedicated properties (`NumberGroupSeparator` and `NumberGroupSizes`) to format the value of `IntegerTextBox`, the dedicated properties take priority over `NumberFormat`. -N> When you use both `NumberFormat` and `Culture`, the `NumberFormat` will have a higher priority. +N> When you use both `NumberFormat` and `Culture`, the `NumberFormat` will have a higher priority. diff --git a/wpf/Integer-TextBox/Getting-Started.md b/wpf/Integer-TextBox/Getting-Started.md index e3f66d118..1474eab3b 100644 --- a/wpf/Integer-TextBox/Getting-Started.md +++ b/wpf/Integer-TextBox/Getting-Started.md @@ -30,11 +30,14 @@ You can add the [IntegerTextBox](https://www.syncfusion.com/wpf-controls/integer ## Adding WPF IntegerTextBox via XAML To add the IntegerTextBox control manually in XAML, follow these steps: + 1. Create a new WPF project in Visual Studio. -2. Add the **Syncfusion.Shared.WPF** assembly references to the project. - -3. Import Syncfusion® WPF schema **http://schemas.syncfusion.com/wpf** and declare the `IntegerTextBox` control in XAML page. +2. Add the **Syncfusion.Shared.WPF** assembly reference to the project. + +3. Import the Syncfusion® WPF schema with the `xmlns:syncfusion="http://schemas.syncfusion.com/wpf"` namespace mapping. + +4. Declare the `IntegerTextBox` control in the XAML page. {% capture codesnippet1 %} {% tabs %} @@ -127,7 +130,7 @@ N> Do not use the [Text](https://learn.microsoft.com/en-us/dotnet/api/system.win ### Binding Value -Data binding is the method of forming a connection between the application UI and business logic. Data binding can be unidirectional (source -> target or target <- source) or bidirectional (source <-> target). You can bind data to the `IntegerTextBox` using the `Value` Property. +Data binding establishes a connection between the application UI and business logic. Data binding can be unidirectional (source -> target or target <- source) or bidirectional (source <-> target). You can bind data to the `IntegerTextBox` using the `Value` property. The following code snippets illustrate the value binding from one `IntegerTextBox` to another. @@ -144,6 +147,8 @@ The following code snippets illustrate the value binding from one `IntegerTextBo {% tabs %} {% highlight C# %} +using Syncfusion.Windows.Shared; + class ViewModel : NotificationObject { private int myValue; @@ -168,27 +173,31 @@ class ViewModel : NotificationObject ## Value Changed Notification -The `IntegerTextBox` control can notifies the value changes through the [ValueChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_ValueChanged) event. You can get old value and new Value from `OldValue` and `NewValue` properties in `ValueChanged` event. +The `IntegerTextBox` control can notify value changes through the [ValueChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_ValueChanged) event. You can get the old value and new value from the `OldValue` and `NewValue` properties of the `ValueChanged` event. -{%tabs%} -{% highlight xaml %} +{% tabs %} +{% highlight XAML %} {% endhighlight %} -{% highlight C# %} +{% highlight C# %} + +using Syncfusion.Windows.Shared; IntegerTextBox integerTextBox = new IntegerTextBox(); -integerTextBox.ValueChanged += new PropertyChangedCallback(IntegerTextBox_ValueChanged); +integerTextBox.ValueChanged += new PropertyChangedCallbackHandler(IntegerTextBox_ValueChanged); {% endhighlight %} -{%endtabs%} +{% endtabs %} You can handle the event as follows: {% tabs %} {% highlight C# %} +using System.Windows; + private void IntegerTextBox_ValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { // Get old and new value @@ -201,7 +210,7 @@ private void IntegerTextBox_ValueChanged(DependencyObject d, DependencyPropertyC ## Min Max Value Restriction -The `Value` of `IntegerTextBox` can be restricted within maximum and minimum limit. You can define the minimum and maximum values by setting the [MinValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_MinValue) and [MaxValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_MaxValue) properties. It allows the user to enter the value between `MinValue` and `MaxValue`. +The `Value` of `IntegerTextBox` can be restricted within a maximum and minimum limit. You can define the minimum and maximum values by setting the [MinValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_MinValue) and [MaxValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_MaxValue) properties. It allows the user to enter a value between `MinValue` and `MaxValue`. {% tabs %} {% highlight XAML %} @@ -211,6 +220,8 @@ The `Value` of `IntegerTextBox` can be restricted within maximum and minimum lim {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; + IntegerTextBox integerTextBox = new IntegerTextBox(); integerTextBox.Width = 100; integerTextBox.Height = 25; @@ -225,19 +236,21 @@ integerTextBox.Value = 100; ![Restricts Minimum and Maximum Value of WPF IntegerTextBox](getting-started_images/wpf-integer-textbox-max-and-min-value.png) -## Step Interval to increase or decrease the value +## Step Interval for incrementing or decrementing the value -The `IntegerTextBox` control allows to increase or decrease the value by pressing up and down arrow keys in keyboard or mouse wheel over the control. The [ScrollInterval](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_ScrollInterval) property is used to specify the increment or decrement intervals. The default value of `ScrollInterval` is 1. +The `IntegerTextBox` control allows you to increase or decrease the value by pressing the up and down arrow keys on the keyboard or by scrolling the mouse wheel over the control. The [ScrollInterval](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_ScrollInterval) property specifies the increment or decrement intervals. The default value of `ScrollInterval` is 1. The default value of `IsScrollingOnCircle` is `true`. {% tabs %} -{% highlight xaml %} +{% highlight XAML %} - {% endhighlight %} - {% highlight C# %} + +using Syncfusion.Windows.Shared; + IntegerTextBox integerTextBox = new IntegerTextBox(); integerTextBox.Width = 150; integerTextBox.Height = 25; @@ -252,27 +265,29 @@ integerTextBox.ScrollInterval = 4; ![WPF IntegerTextBox displays Incrementing Interval Value](getting-started_images/wpf-integer-textbox-step-interval.png) -## Formatting the value +## Formatting the Value -You can customize the number format by either setting the [NumberFormat](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_NumberFormat) property or the [NumberGroupSeparator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_NumberGroupSeparator) and the [NumberGroupSizes](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_NumberGroupSizes) property of IntegerTextBox. +You can customize the number format by either setting the [NumberFormat](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_NumberFormat) property or the [NumberGroupSeparator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_NumberGroupSeparator) and the [NumberGroupSizes](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_NumberGroupSizes) properties of `IntegerTextBox`. Decimal properties (`NumberDecimalDigits` and `NumberDecimalSeparator`) are not applicable to integer values. {% tabs %} {% highlight XAML %} - {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; +using System.Globalization; + IntegerTextBox integerTextBox = new IntegerTextBox(); integerTextBox.Width = 150; integerTextBox.Height = 25; integerTextBox.Value = 123456789012345; -integerTextBox.Culture = new System.Globalization.CultureInfo("en-US"); -integerTextBox.NumberFormat = new System.Globalization.NumberFormatInfo() -{ -NumberGroupSeparator = "/" +integerTextBox.Culture = new CultureInfo("en-US"); +integerTextBox.NumberFormat = new NumberFormatInfo() +{ + NumberGroupSeparator = "/" }; {% endhighlight %} {% endtabs %} @@ -283,26 +298,29 @@ NumberGroupSeparator = "/" The `IntegerTextBox` provides support for globalization by using the [Culture](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_Culture) property. The `Culture` is used to format the group separator of the `IntegerTextBox` value based on the respective culture. -{%tabs%} -{% highlight xaml %} +{% tabs %} +{% highlight XAML %} {% endhighlight %} -{% highlight C# %} +{% highlight C# %} + +using Syncfusion.Windows.Shared; +using System.Globalization; IntegerTextBox integerTextBox = new IntegerTextBox(); integerTextBox.Width = 100; integerTextBox.Height = 25; integerTextBox.Value = 1234567; -integerTextBox.Culture = new System.Globalization.CultureInfo("en-US"); +integerTextBox.Culture = new CultureInfo("en-US"); {% endhighlight %} -{%endtabs%} +{% endtabs %} ![WPF IntegerTextBox with Localization](getting-started_images/wpf-integer-textbox-localization.png) -N> When you use both `NumberFormat` and `Culture`, the `NumberFormat` will have a higher priority. +N> When you use both `NumberFormat` and `Culture`, the `NumberFormat` will have a higher priority. ## Theme diff --git a/wpf/Integer-TextBox/Overview.md b/wpf/Integer-TextBox/Overview.md index d9d6b3988..e7aea6cce 100644 --- a/wpf/Integer-TextBox/Overview.md +++ b/wpf/Integer-TextBox/Overview.md @@ -9,23 +9,26 @@ documentation: ug # About Syncfusion® WPF Integer TextBoxControl -The [IntegerTextBox](https://www.syncfusion.com/wpf-controls/integer-textbox) control restricts text box input to only integer values with support for data binding, Watermark, Null Value, and culture support. It provides many customization options to improve its appearance and to suit your applications. +The [IntegerTextBox](https://www.syncfusion.com/wpf-controls/integer-textbox) control restricts text box input to integer values (up to `Int64`) with support for data binding, Watermark, Null Value, and culture. It provides many customization options to improve its appearance and to suit your application. ## Control structure -![WPF IntegerTextBox](getting-started_images/wpf-integer-textbox.png) +![WPF IntegerTextBox](Getting-Started_images/wpf-integer-textbox.png) -![WPF IntegerTextBox with Watermark Text](getting-started_images/wpf-integer-textbox-watermark-text.png) +![WPF IntegerTextBox with Watermark Text](Getting-Started_images/wpf-integer-textbox-watermark-text.png) ## Features The core features of the `IntegerTextBox` are as follows: -* Supports upto Int64 data type. -* Provides the ability to control the range of input values by using the `MinValue` and `MaxValue` properties. +* Supports up to `Int64` data type (the `Value` property is of type `long`). +* Provides the ability to control the range of input values by using the [MinValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_MinValue) and [MaxValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_MaxValue) properties. * Provides different foreground brushes for positive and negative numbers. * Provides data binding support. * Provides built-in Visual Styles and themes. * Provides Watermark support. * Provides Number Format support. +* Provides Null Value support. * Provides culture support. +* Provides Range Adorner support. +* Provides Step Interval support. diff --git a/wpf/Integer-TextBox/Range-Adorner.md b/wpf/Integer-TextBox/Range-Adorner.md index 9ddf53675..db08f4e1a 100644 --- a/wpf/Integer-TextBox/Range-Adorner.md +++ b/wpf/Integer-TextBox/Range-Adorner.md @@ -7,9 +7,9 @@ control: IntegerTextBox documentation: ug --- -# Range Adorner in WPF IntegerTextBox +# Range Adorner in WPF IntegerTextBox -[Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_Value) of [IntegerTextBox](https://www.syncfusion.com/wpf-ui-controls/integer-textbox) can be visually indicated like a progress bar using range-adorner feature, this feature is disabled by default. You can show the adorner over `IntegerTextBox` control by setting [EnableRangeAdorner](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_EnableRangeAdorner) property to `true`. Default value of `EnableRangeAdorner` is `false`. The adorner layer can be filled in the control area on the basis of the minimum and maximum values with considering the given value. Range Adorner is not displayed when a `MinValue` or `MaxValue` property is not set. +The [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_Value) of the [IntegerTextBox](https://www.syncfusion.com/wpf-controls/integer-textbox) can be visually indicated like a progress bar using the range adorner feature. This feature is disabled by default. You can show the adorner over the `IntegerTextBox` control by setting the [EnableRangeAdorner](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_EnableRangeAdorner) property to `true`. The default value of `EnableRangeAdorner` is `false`. The adorner layer fills the control area on the basis of the minimum and maximum values, taking the current `Value` into account. The Range Adorner is not displayed when the `MinValue` or `MaxValue` property is not set. When the `Value` is outside the `[MinValue, MaxValue]` range, the adorner is clamped to the nearest bound. {% tabs %} {% highlight XAML %} @@ -19,20 +19,22 @@ documentation: ug {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; + IntegerTextBox integerTextBox = new IntegerTextBox(); integerTextBox.MinValue = 0; integerTextBox.MaxValue = 100; integerTextBox.Value = 63; -integerTextBox.EnableRangeAdorner =true; +integerTextBox.EnableRangeAdorner = true; {% endhighlight %} {% endtabs %} ![WPF IntegerTextBox displays Range Adorner](Range-Adorner_images/wpf-integer-textbox-range-adorner.png) -## Changing background of range-adorner +## Changing the Background of the Range Adorner -You can change the background color of the range adorner using [RangeAdornerBackground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_RangeAdornerBackground) property. +You can change the background color of the range adorner using the [RangeAdornerBackground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_RangeAdornerBackground) property. The default value of `RangeAdornerBackground` is a light-blue brush. {% tabs %} {% highlight XAML %} @@ -42,6 +44,9 @@ You can change the background color of the range adorner using [RangeAdornerBack {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; +using System.Windows.Media; + IntegerTextBox integerTextBox = new IntegerTextBox(); integerTextBox.MinValue = 0; integerTextBox.MaxValue = 100; diff --git a/wpf/Integer-TextBox/Restriction-or-Validation.md b/wpf/Integer-TextBox/Restriction-or-Validation.md index a116ba5bb..f6639990a 100644 --- a/wpf/Integer-TextBox/Restriction-or-Validation.md +++ b/wpf/Integer-TextBox/Restriction-or-Validation.md @@ -13,19 +13,19 @@ This section explains how to validate or restrict the [IntegerTextBox](https://h ## Restrict the value within minimum and maximum value -The [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_Value) of the [IntegerTextBox](https://help.syncfusion.com/cr/wpf/Syncfusion.Shared.Wpf~Syncfusion.Windows.Shared.IntegerTextBox.html) can be restricted within the maximum and minimum limits. Once the value has reached the maximum or minimum value , the value does not exceed the limit. We can change the minimum and maximum limits by using the [MinValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_MinValue) and [MaxValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_MaxValue) properties. +The [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_Value) of the [IntegerTextBox](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html) can be restricted within the maximum and minimum limits. Once the value has reached the maximum or minimum value, the value does not exceed the limit. You can change the minimum and maximum limits by using the [MinValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_MinValue) and [MaxValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_MaxValue) properties. You can choose when to validate the maximum and minimum limits while changing the values by using the [MinValidation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MinValidation) and [MaxValidation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MaxValidation) properties. -* `OnKeyPress` — When [MaxValidation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MaxValidation) or [MinValidation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MinValidation) properties value is `OnKeyPress`, the value in the IntegerTextBox will be validated shortly after pressing a key. It is not possible to provide any invalid input at all and the value does not exceed the maximum and minimum limits. +* `OnKeyPress` — When [MaxValidation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MaxValidation) or [MinValidation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MinValidation) is set to `OnKeyPress`, the value in the `IntegerTextBox` is validated shortly after pressing a key. As a result, invalid input is not allowed, and the value does not exceed the maximum and minimum limits. -* `OnLostFocus` - When [MaxValidation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MaxValidation) or [MinValidation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MinValidation) properties is `OnLostFocus`, the value in the IntegerTextBox is validated only when the IntegerTextBox loses the focus. After validation, when the value of the IntegerTextBox is greater than the `MaxValue` or less than the `MinValue`, the value will be automatically set to `MaxValue` or `MinValue`. +* `OnLostFocus` - When [MaxValidation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MaxValidation) or [MinValidation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MinValidation) is set to `OnLostFocus`, the value in the `IntegerTextBox` is validated when the control loses keyboard focus. After validation, when the value of the `IntegerTextBox` is greater than the `MaxValue` or less than the `MinValue`, the value will be automatically set to `MaxValue` or `MinValue`. -* [MaxValueOnExceedMaxDigit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MaxValueOnExceedMaxDigit) - When you give input greater than specified maximum limit, MaxValueOnExceedMaxDigit property will either retain the old value or reset to maximum limit that is specified. For example, if `MaxValue` is set to 100 and you are trying to input 200. `Value` will changed to 100 when `MaxValueOnExceedMaxDigit` is `true` or 20 will be retained if `MaxValueOnExceedMaxDigit` is `false`. +* [MaxValueOnExceedMaxDigit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MaxValueOnExceedMaxDigit) - When you give input greater than the specified maximum limit, `MaxValueOnExceedMaxDigit` decides whether to retain the old value or reset to the specified maximum limit. For example, if `MaxValue` is set to 100 and you are trying to input 200, the `Value` will change to 100 when `MaxValueOnExceedMaxDigit` is `true`, or 20 will be retained if `MaxValueOnExceedMaxDigit` is `false`. -* [MinValueOnExceedMinDigit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MinValueOnExceedMinDigit) - When you give input less than specified minimum limit, `MinValueOnExceedMinDigit` property will either it should retain the old value or reset to minimum limit that is specified. For example, if `MinValue` is set to 200 and the `Value` is 205 and you are trying change the value to 20. `Value` will changed to 200 when `MinValueOnExceedMinDigit` is `true` or when `MinValueOnExceedMinDigit` is `false`, Old value 205 will be retained. +* [MinValueOnExceedMinDigit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MinValueOnExceedMinDigit) - When you give input less than the specified minimum limit, `MinValueOnExceedMinDigit` decides whether to retain the old value or reset to the specified minimum limit. For example, if `MinValue` is set to 200 and the `Value` is 205, and you try to change the value to 20, the `Value` will change to 200 when `MinValueOnExceedMinDigit` is `true`, or the old value 205 will be retained if `MinValueOnExceedMinDigit` is `false`. - N> `MaxValueOnExceedMinDigit` and `MinValueOnExceedMinDigit` properties will be enabled only when the `MaxValidation` and `MinValidation` is set to `OnKeyPress`. + N> `MaxValueOnExceedMaxDigit` and `MinValueOnExceedMinDigit` are only effective when the corresponding `MaxValidation` and `MinValidation` properties are set to `OnKeyPress`. {% tabs %} {% highlight XAML %} @@ -37,11 +37,13 @@ You can choose when to validate the maximum and minimum limits while changing th {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; + IntegerTextBox integerTextBox = new IntegerTextBox(); -integerTextBox.Width = 100; +integerTextBox.Width = 150; integerTextBox.Height = 25; integerTextBox.MinValue = 10; -integerTextBox.MaxValue =100; +integerTextBox.MaxValue = 100; integerTextBox.MinValidation = MinValidation.OnKeyPress; integerTextBox.MaxValidation = MaxValidation.OnLostFocus; integerTextBox.MinValueOnExceedMinDigit = true; @@ -50,17 +52,17 @@ integerTextBox.MaxValueOnExceedMaxDigit = true; {% endhighlight %} {% endtabs %} -When `MinValidation` value is OnKeyPress, you cannot enter value less than the `MinValue`. If try to enter a value less than the `MinValue`, then the `MinValue` will set to the `Value` property because `MinValueOnExceedMinDigit` is set to `true`. +When `MinValidation` is set to `OnKeyPress`, you cannot enter a value less than the `MinValue`. If you try to enter a value less than the `MinValue`, the `MinValue` will be set to the `Value` property because `MinValueOnExceedMinDigit` is set to `true`. ![Validating Minimum Value of WPF IntegerTextBox](Restriction-or-Validation_images/wpf-integer-textbox-min-value-validation.png) -`MaxValidation` is set to OnLostFocus, so the `MaxValidation` will be performed only in the lost focus. +`MaxValidation` is set to `OnLostFocus`, so the `MaxValidation` will be performed only on lost focus. ![Validating Maximum Value of WPF IntegerTextBox](Restriction-or-Validation_images/wpf-integer-textbox-max-value-validation.png) -## Read only mode +## Read-only mode -The [IntegerTextBox](https://help.syncfusion.com/cr/wpf/Syncfusion.Shared.Wpf~Syncfusion.Windows.Shared.IntegerTextBox.html) doesn't allow the user input on application runtime when [IsReadOnly](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.primitives.textboxbase.isreadonly?redirectedfrom=MSDN&view=netframework-4.7.2#System_Windows_Controls_Primitives_TextBoxBase_IsReadOnly) property is `true`. The user can still select text and display the cursor on the `IntegerTextBox` by setting the [IsReadOnlyCaretVisible](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.primitives.textboxbase.isreadonlycaretvisible?view=netframework-4.8) property to `true`. +The [IntegerTextBox](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html) does not allow user input or edits at runtime when the [IsReadOnly](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.primitives.textboxbase.isreadonly?view=netframework-4.8#System_Windows_Controls_Primitives_TextBoxBase_IsReadOnly) property is set to `true`. The user can still select text and display the cursor in the `IntegerTextBox` by setting the [IsReadOnlyCaretVisible](https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.primitives.textboxbase.isreadonlycaretvisible?view=netframework-4.8) property to `true`. The default value of `IsReadOnly` is `false` and the default value of `IsReadOnlyCaretVisible` is `false`. The `Value` can still be changed programmatically in read-only mode. {% tabs %} {% highlight XAML %} @@ -70,6 +72,8 @@ The [IntegerTextBox](https://help.syncfusion.com/cr/wpf/Syncfusion.Shared.Wpf~Sy {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; + IntegerTextBox integerTextBox = new IntegerTextBox(); integerTextBox.Value = 78; integerTextBox.IsReadOnly = true; @@ -80,22 +84,20 @@ integerTextBox.IsReadOnlyCaretVisible = true; ![WPF IntegerTextBox in Read-only Mode](Restriction-or-Validation_images/wpf-integer-textbox-readonly.png) -## Customize the behavior for invalid value - -You can customize how the [IntegerTextBox](https://help.syncfusion.com/cr/wpf/Syncfusion.Shared.Wpf~Syncfusion.Windows.Shared.IntegerTextBox.html) behaves when entered value is not equal to the value of [ValidationValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_ValidationValue) property, using [InvalidValueBehavior](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_InvalidValueBehavior) property. It can be customized by below values, +## Customizing the Behavior for an Invalid Value - * `DisplayErrorMessage` - Shows a MessageBox with message" String validation failed" after focus is lost from IntegerTextBox. +You can customize how the [IntegerTextBox](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html) behaves when the entered value is not equal to the [ValidationValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_ValidationValue) property, by using the [InvalidValueBehavior](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_InvalidValueBehavior) property. It can be customized by the following values: - * `None` - Validation will not occurs. +* `DisplayErrorMessage` - Shows a MessageBox with the message "String validation failed" after focus is lost from the `IntegerTextBox`. +* `None` - Validation will not occur. +* `ResetValue` - Resets the entered value to `0` after focus is lost. - * `ResetValue` - Resets the entered value to 0 after focus is lost. - -N> By default ValidationValue property value is String.Empty. +N> By default the `ValidationValue` property value is `String.Empty`. The `ValidationValue` is a string; the entered value is compared to it as a string. {% tabs %} {% highlight XAML %} - By default ValidationValue property value is String.Empty. {% endhighlight %} {% highlight C# %} -DoubleTextBox doubleTextBox1 = new DoubleTextBox() +using Syncfusion.Windows.Shared; +using System.Windows; + +IntegerTextBox integerTextBox = new IntegerTextBox() { Height = 30, Width = 120, - InvalidValueBehavior = InvalidInputBehavior.DisplayErrorMessage, + InvalidValueBehavior = InvalidValueBehavior.DisplayErrorMessage, ValidationValue = "1222", HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center diff --git a/wpf/Integer-TextBox/Step-Interval.md b/wpf/Integer-TextBox/Step-Interval.md index 8b702bb86..fd46e71f0 100644 --- a/wpf/Integer-TextBox/Step-Interval.md +++ b/wpf/Integer-TextBox/Step-Interval.md @@ -9,23 +9,25 @@ documentation: ug # Step Interval in WPF IntegerTextBox -The [IntegerTextBox](https://www.syncfusion.com/wpf-ui-controls/integer-textbox) control allows you to increase or decrease the value by pressing up-arrow and down-arrow keys in keyboard or mouse wheel over the control. The [ScrollInterval](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_ScrollInterval) property is used to specify the increment or decrement interval. The default value of `ScrollInterval` is 1. +The [IntegerTextBox](https://www.syncfusion.com/wpf-controls/integer-textbox) control allows you to increase or decrease the value by pressing the up and down arrow keys on the keyboard or by scrolling the mouse wheel over the control. The [ScrollInterval](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_ScrollInterval) property specifies the increment or decrement interval. The default value of `ScrollInterval` is 1. - For example, the `ScrollInterval` value is set to 4. So, that the `IntegerTextBox` control [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_Value) increases or decreases by 4 while pressing Up arrow or Down arrow keys and Mouse wheel scrolling up or down. + For example, if the `ScrollInterval` value is set to 4, the `IntegerTextBox` control [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.IntegerTextBox.html#Syncfusion_Windows_Shared_IntegerTextBox_Value) increases or decreases by 4 while pressing the Up arrow or Down arrow keys and mouse wheel scrolling up or down. -## Change Value on Up, Down arrow key +## Change Value on Up, Down Arrow Key -The `IntegerTextBox` control allows you to increase or decrease the `Value` of `IntegerTextBox` based on the `ScrollInterval` by pressing the up arrow and down arrow keys on the keyboard. +The `IntegerTextBox` control allows you to increase or decrease the `Value` based on the `ScrollInterval` by pressing the up arrow and down arrow keys on the keyboard. {% tabs %} {% highlight XAML %} + Height="25" Value="10" ScrollInterval="2"/> {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; + IntegerTextBox integerTextBox = new IntegerTextBox(); integerTextBox.Width = 150; integerTextBox.Height = 25; @@ -39,17 +41,19 @@ integerTextBox.ScrollInterval = 2; ## Change Value on Mouse Wheel -The `IntegerTextBox` allows you to increase or decrease the `Value` based on the `ScrollInterval` by the Mouse scrolling over the control When the [IsScrollingOnCircle](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.Editorbase.html#Syncfusion_Windows_Shared_EditorBase_IsScrollingOnCircle) property is `true`. The default value of `IsScrollingOnCircle` property is `true`. +The `IntegerTextBox` allows you to increase or decrease the `Value` based on the `ScrollInterval` when scrolling the mouse wheel over the control. This is enabled when the [IsScrollingOnCircle](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_IsScrollingOnCircle) property is `true`. The default value of `IsScrollingOnCircle` is `true`. {% tabs %} {% highlight XAML %} - {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; + IntegerTextBox integerTextBox = new IntegerTextBox(); integerTextBox.Width = 150; integerTextBox.Height = 25; @@ -64,17 +68,19 @@ integerTextBox.ScrollInterval = 3; ## Change Value on Click and Drag -The `IntegerTextBox` allows you to increase or decrease the value based on the `ScrollInterval` by clicking and dragging the mouse when the [EnableExtendedScrolling](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_EnableExtendedScrolling) property is `true`. `IntegerTextBox` value increases when the cursor moves to the right or the top of the screen and decreases when you click and drag the mouse to the left or the bottom of the screen. Before that, the control should be in an unfocused state. +The `IntegerTextBox` allows you to increase or decrease the value based on the `ScrollInterval` by clicking and dragging the mouse when the [EnableExtendedScrolling](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_EnableExtendedScrolling) property is `true`. The `IntegerTextBox` value increases when you click and drag the mouse to the right or top of the screen, and decreases when you click and drag the mouse to the left or bottom of the screen. Before that, the control should be in an unfocused state. The default value of `EnableExtendedScrolling` is `false`. {% tabs %} {% highlight XAML %} - {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; + IntegerTextBox integerTextBox = new IntegerTextBox(); integerTextBox.Width = 120; integerTextBox.Height = 25; @@ -87,9 +93,9 @@ integerTextBox.EnableExtendedScrolling = true; ![Changing Value by Clicking and Drag in WPF IntegerTextBox](Step-Interval_images/wpf-integer-textbox-drag-and-drop.gif) -## Allow or restrict selection on focus +## Allow or Restrict Selection on Focus -`IntegerTextBox` allows you to automatically select text by setting [TextSelectionOnFocus](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_TextSelectionOnFocus) property to `true` and when the control got focus. If you want to restrict the selection on when control got focus, use the `TextSelectionOnFocus` property value as `false`. The default value of the `TextSelectionOnFocus` property is `true`. +`IntegerTextBox` allows you to automatically select the text when the control receives focus, by setting the [TextSelectionOnFocus](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_TextSelectionOnFocus) property to `true`. If you want to restrict selection when the control receives focus, set `TextSelectionOnFocus` to `false`. The default value of `TextSelectionOnFocus` is `true`. {% tabs %} {% highlight XAML %} @@ -99,16 +105,18 @@ integerTextBox.EnableExtendedScrolling = true; {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; + IntegerTextBox integerTextBox = new IntegerTextBox(); -integerTextBox.TextSelectionOnFocus = true; +integerTextBox.TextSelectionOnFocus = false; {% endhighlight %} {% endtabs %} -### TextSelectionOnFocus = "False" +**TextSelectionOnFocus = "False"** ![Restrict Text Selection in WPF IntegerTextBox](Step-Interval_images/wpf-integer-textbox-restrict-selection.png) -### TextSelectionOnFocus = "True" +**TextSelectionOnFocus = "True"** ![WPF IntegerTextBox displays Text Selection](Step-Interval_images/wpf-integer-textbox-text-selection.png) diff --git a/wpf/NumericUpdown/Formatting.md b/wpf/NumericUpdown/Formatting.md index 5c9fbb236..0b35065ba 100644 --- a/wpf/NumericUpdown/Formatting.md +++ b/wpf/NumericUpdown/Formatting.md @@ -13,7 +13,7 @@ This section explains how to format the value in WPF UpDown control. ## Decimal digit -The [NumberDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_NumberDecimalDigits) property is used to specify the number of digits to be displayed after the decimal point in the [UpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html) control. +The [NumberDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_NumberDecimalDigits) property is used to specify the number of digits displayed after the decimal point. The default value is `0`. {% tabs %} @@ -39,7 +39,7 @@ grid.Children.Add(updown); ## Group separator -The group separator is the character used to group the values. You can show the group separator in UpDown control by enable [GroupSeparatorEnabled](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_GroupSeperatorEnabled) property. The default value is `False`. +The group separator is the character used to group the values. To show the group separator, enable the [GroupSeperatorEnabled](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_GroupSeperatorEnabled) property (note the historical API spelling "Seperator"). The default value is `False`. {% tabs %} @@ -62,17 +62,25 @@ updown.GroupSeperatorEnabled = true; ## NumberFormatInfo -The number formatting of UpDown control can be customized by setting [UpDown.NumberFormatInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_NumberFormatInfo) property by specifying the culture-specific group separator, decimal separator, and the number of decimal digits. You can show the group separator by enable the [GroupSeparatorEnabled](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_GroupSeperatorEnabled) property. +The number formatting of `UpDown` can be customized by setting the [NumberFormatInfo](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_NumberFormatInfo) property, which specifies the culture-specific group separator, decimal separator, and number of decimal digits. You can show the group separator by enabling the [GroupSeparatorEnabled](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_GroupSeperatorEnabled) property. {% tabs %} {% highlight XAML %} - - - - - + + + + + + + + {% endhighlight %} diff --git a/wpf/NumericUpdown/Getting-Started.md b/wpf/NumericUpdown/Getting-Started.md index 292a9157f..7b410ed98 100644 --- a/wpf/NumericUpdown/Getting-Started.md +++ b/wpf/NumericUpdown/Getting-Started.md @@ -8,28 +8,27 @@ documentation: ug --- # Getting Started with WPF UpDown -This section explains how to create [WPF NumericUpdown](https://www.syncfusion.com/wpf-controls/numericupdown) (UpDown) control and its structure. +This section explains how to create the [WPF NumericUpDown](https://www.syncfusion.com/wpf-controls/numericupdown) (UpDown) control and describes its structure. ## Structure of UpDown ![WPF UpDown Control](gettingstarted-images/wpf-updown-structure.jpeg) - The following are the elements of the UpDown control: -* **Text area** - It is the area where the numeric values are displayed. -* **Increment button** - It is a repeat button that can be clicked to increment the current value of the UpDown control. -* **Decrement button** - It is a repeat button that can be clicked to decrement the current value of the UpDown control. +* **Text area** - The area where the numeric values are displayed. +* **Increment button** - A repeat button that can be clicked to increment the current value. +* **Decrement button** - A repeat button that can be clicked to decrement the current value. ## Assembly deployment -Refer to the [control dependencies](https://help.syncfusion.com/wpf/control-dependencies#updown) 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#updown) section to get the list of assemblies or NuGet packages that need to be added as a reference to use the control in any application. [Click_here](https://help.syncfusion.com/wpf/installation/install-nuget-packages) to find more details on how to install nuget packages in WPF application. ## Adding WPF UpDown control via designer -The [UpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html) control can be added to an application by dragging it from the toolbox to design view. The following dependent assembly will be added automatically. +The [UpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html) control can be added to an application by dragging it from the toolbox onto a view in the designer. The following dependent assembly will be added automatically: * Syncfusion.Shared.WPF @@ -37,28 +36,28 @@ The [UpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown ## Adding WPF UpDown control via XAML -In order to add the [UpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html) control manually in XAML, do the below steps, +To add the [UpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html) control manually in XAML, follow these steps: 1. Create a new WPF project in Visual Studio. -2. Add the following required assembly reference to the project. +2. Add the following required assembly reference to the project: * Syncfusion.Shared.WPF -3. Import Syncfusion® WPF schema http://schemas.syncfusion.com/wpf and declare the UpDown control in XAML page. +3. Import the Syncfusion® WPF schema **http://schemas.syncfusion.com/wpf** and declare the `UpDown` control on the XAML page. {% capture codesnippet1 %} {% tabs %} {% highlight XAML %} - - - + + @@ -70,26 +69,26 @@ In order to add the [UpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windo ![WPF UpDown Control](gettingstarted-images/wpf-updown-designer.jpeg) - ## Adding WPF UpDown control via C# -In order to add the UpDown control manually in C#, do the below steps, +To add the `UpDown` control manually in C#, follow these steps: -1. Create a new WPF application via Visual Studio. +1. Create a new WPF application in Visual Studio. -2. Add the following required assembly reference to the project. +2. Add the following required assembly reference to the project: * Syncfusion.Shared.WPF -3. Import UpDown namespace **Syncfusion.Windows.Shared**. - -4. Create an instance of UpDown control and add it to the main window. +3. Include the required namespace and create an instance of `UpDown`. {% capture codesnippet2 %} {% tabs %} {% highlight C# %} +// Required usings: +// using Syncfusion.Windows.Shared; + UpDown updown = new UpDown(); updown.Width = 100; updown.Height = 23; @@ -105,7 +104,7 @@ grid.Children.Add(updown); ## Value -The [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_Value) property is used for set the value to UpDown control. +The [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_Value) property is used to set the value of the `UpDown` control. The default value is `0` (or `null` if `UseNullOption` is enabled). {% tabs %} @@ -127,13 +126,13 @@ updown.Value = 10; ## Step Value -The [Step](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_Step) property is used to specify the interval to increase or decrease the value while pressing the spin or repeat buttons in the UpDown control. +The [Step](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_Step) property is used to specify the interval applied to the value when the spin or repeat buttons are pressed. The default value of `Step` is `1`. {% tabs %} {% highlight XAML %} - + {% endhighlight %} @@ -156,35 +155,34 @@ The number formatting of UpDown control can be customized by setting [UpDown.Num {% highlight XAML %} - + xmlns:globalization="clr-namespace:System.Globalization" + Title="MainWindow" Height="350" Width="525"> - - - - - + + + + + + + {% endhighlight %} {% highlight C# %} -//Assign a value updown.Value = 100000; +updown.GroupSeperatorEnabled = true; //Initialize numberformatinfo NumberFormatInfo numberFormatInfo = new NumberFormatInfo(); - -// set the format of number and group -updown.GroupSeperatorEnabled = true; +numberFormatInfo.NumberGroupSeparator = "/"; +numberFormatInfo.NumberDecimalDigits = 3; +numberFormatInfo.NumberDecimalSeparator = "*"; updown.NumberFormatInfo = numberFormatInfo; -updown.NumberFormatInfo.NumberGroupSeparator = "/"; -updown.NumberFormatInfo.NumberDecimalDigits = 3; -updown.NumberFormatInfo.NumberDecimalSeparator = "*"; {% endhighlight %} @@ -192,14 +190,13 @@ updown.NumberFormatInfo.NumberDecimalSeparator = "*"; ![WPF UpDown with Number Format](gettingstarted-images/wpf-updown-number-format.png) -For more number formatting in UpDown control, you can use the [Culture](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_Culture) property. The `Culture` property is used to format the values based on the respective culture. +For more number formatting in `UpDown`, you can use the [Culture](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_Culture) property. The `Culture` property is used to format the values based on the selected culture. {% tabs %} {% highlight XAML %} - - + {% endhighlight %} diff --git a/wpf/NumericUpdown/Interaction.md b/wpf/NumericUpdown/Interaction.md index 6e332ff3e..97253a366 100644 --- a/wpf/NumericUpdown/Interaction.md +++ b/wpf/NumericUpdown/Interaction.md @@ -13,11 +13,11 @@ This section explains about how to change the value by using mouse and keyboard ## Keyboard and Mouse support -The `UpDown` control allows to increase or decrease the value by pressing up-arrow and down-arrow keys in keyboard or mouse wheel over the control. The [Step](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_Step) property is used to specify the interval of increment or decrement. +The `UpDown` control allows you to increase or decrease the value by pressing the up-arrow or down-arrow keys, or by using the mouse wheel over the control. The [Step](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_Step) property specifies the increment or decrement interval. -### Increment or decrement value in mouse wheel +### Increment or decrement value with the mouse wheel -You can increase or decrease the current value by scrolling over `UpDown` control. You can enable it by setting the [IsScrollingOnCircle](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_IsScrollingOnCircle) property as `true`. You can disable the value changing on mouse scrolling by using the `IsScrollingOnCircle` property as `false`. The default value of `IsScrollingOnCircle` property is `true`. +You can increase or decrease the current value by scrolling over the `UpDown` control. To enable mouse-wheel scrolling, set the [IsScrollingOnCircle](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_IsScrollingOnCircle) property to `true`. Set it to `false` to disable value changes on mouse scroll. The default value of `IsScrollingOnCircle` is `true`. {% tabs %} @@ -42,11 +42,9 @@ grid.Children.Add(updown); ## Step -The [Step](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_Step) property is used to specify the interval to increase or decrease the value while pressing the spin buttons in the UpDown control. For example, the `Step` value is set to 5 so that the `UpDown` control value increases or decreases by 5 while pressing the spin buttons. +The [Step](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_Step) property is used to specify the interval applied to the value when the spin buttons are pressed. For example, if `Step` is set to `5`, the `UpDown` value increases or decreases by `5` each time a spin button is pressed. The default value of `Step` is `1`. -Another way, - -You can also increase or decrease the present value of UpDown control by using up-arrow and down-arrow keys in keyboard. +You can also increase or decrease the current value by pressing the up-arrow or down-arrow keys. {% tabs %} @@ -71,9 +69,9 @@ updown.Step = 5; ## Animation speed -When a value change in the UpDown control by using the repeated buttons, the transition from the current value to the new value is animated in UpDown control. The animation speed can be controlled by using [AnimationSpeed](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_AnimationSpeed) property. +When the value changes via the repeat buttons, the transition from the current value to the new value is animated. The animation speed can be controlled by using the [AnimationSpeed](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_AnimationSpeed) property. The value is expressed in seconds, in the range `0` to `1`. -N> Specifying whether its 0 to 1 seconds or milliseconds. +N> A value of `0` disables the animation. {% tabs %} @@ -98,7 +96,9 @@ updown.AnimationSpeed = 0.5; ## Range Adorner -You can show the adorner over UpDown control based on the minimum and maximum values by setting [EnableRangeAdorner](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_EnableRangeAdorner) property to `true`. The default value is `false`. You can also change the background color of the range adorner using [RangeAdornerBackground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_RangeAdornerBackground) property. +You can show a visual adorner over the `UpDown` control that represents the minimum and maximum range by setting the [EnableRangeAdorner](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_EnableRangeAdorner) property to `true`. The default value is `false`. You can also change the background color of the range adorner using the [RangeAdornerBackground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_RangeAdornerBackground) property. + +N> Both `MinValue` and `MaxValue` must be set for the range adorner to be visible. {% tabs %} diff --git a/wpf/NumericUpdown/Overview.md b/wpf/NumericUpdown/Overview.md index 2c51b8086..4c012787a 100644 --- a/wpf/NumericUpdown/Overview.md +++ b/wpf/NumericUpdown/Overview.md @@ -11,24 +11,18 @@ documentation: ug # About Syncfusion® WPF UpDown Control -The WPF [Updown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html) control displays numeric values. The value can be edited by scrolling the values and by using the Increment and Decrement buttons of the UpDown control. It allows to define maximum and minimum values to which the user can increment/decrement the input’s value. Also can specify the interval, that will be applied to the value upon each increase/decrease. +The WPF [UpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html) control displays numeric values. The value can be edited by scrolling, or by using the **Increment** and **Decrement** buttons of the UpDown control. It allows you to define the maximum and minimum values that bound the increment/decrement range. You can also specify the interval applied to the value on each increase or decrease. ![WPF UpDown](overview_images/wpf-updown.png) ## Features -**Value** - Provides different set of values. The values are Minimum and Maximum value. - -**Null value** - Provides option to set the null value. - -**Editing** - Provides option to change the value by up and down and also edit the text part. - -**Culture** - Provides different culture support based on NumberDecimalSeparator in UpDown. - -**Animation** - Provides animation support for speed of the UpDown control. - -**Keyboard and Mouse support** - Provide option to change the value by using keyboard and mouse. - -**Appearance** - Provides support for several built-in skins and blendable support for customize the appearance. +* **Value** - Provides a range defined by `Minimum` and `Maximum` values. +* **Null value** - Provides an option to set a null value. +* **Editing** - Provides options to change the value using the up/down buttons and to edit the value directly in the text area. +* **Culture** - Provides culture support for the number formatting. +* **Animation** - Provides animation for the value-change transition. +* **Keyboard and mouse support** - Provides options to change the value using the keyboard and mouse. +* **Appearance** - Provides several built-in skins and customizable styles. diff --git a/wpf/NumericUpdown/Restriction.md b/wpf/NumericUpdown/Restriction.md index 0eb834d0a..2244100a5 100644 --- a/wpf/NumericUpdown/Restriction.md +++ b/wpf/NumericUpdown/Restriction.md @@ -9,11 +9,11 @@ documentation: ug # Restriction in WPF UpDown -This section explains about how to set the value and restrict the minimum and maximum value in WPF UpDown control. +This section explains how to set the value and restrict the minimum and maximum value of the WPF `UpDown` control. ## Value -The [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_Value) property is used for set the value to UpDown control. +The [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_Value) property is used to set the value of the `UpDown` control. The default value is `0` (or `null` when `UseNullOption` is enabled). {% tabs %} @@ -39,7 +39,16 @@ grid.Children.Add(updown); ### Value event -The UpDown control notifies the value changes through [ValueChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html) and [ValueChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html) events. You can use the `OldValue` and `NewValue` property to get the old and new value in `ValueChanged` event. In `ValueChanging` event, you can use the `Cancel` property in event argument to avoid the changes. +The `UpDown` control notifies value changes through the [ValueChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_ValueChanged) and [ValueChanging](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_ValueChanging) events. Use the `OldValue` and `NewValue` properties of `ValueChanged` to read the new and old values. In the `ValueChanging` event, set the `Cancel` property on the event argument to prevent the change. + +{% highlight XAML %} + + + +{% endhighlight %} {% tabs %} @@ -48,13 +57,13 @@ The UpDown control notifies the value changes through [ValueChanged](https://hel updown.ValueChanged += Up_ValueChanged; updown.ValueChanging += Up_ValueChanging; -private void Up_ValueChanging(object sender, ValueChangingEventArgs e) +private void Up_ValueChanging(object sender, Syncfusion.Windows.Shared.ValueChangingEventArgs e) { - // To cancel the changing value - e.Cancel = true; + // Cancel the value change + e.Cancel = true; } -private void Up_ValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) +private void Up_ValueChanged(object sender, RoutedPropertyChangedEventArgs e) { // Get old and new value var newValue = e.NewValue; @@ -67,8 +76,7 @@ private void Up_ValueChanged(DependencyObject d, DependencyPropertyChangedEventA ## Null value -The [UpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html) control accepts null values. When the [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_Value) is set to null, the UpDown control will show zero value by default. You can change this to display some other numerical value using -[NullValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_NullValue) property. The [UseNullOption](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_UseNullOption) property must be enabled to see the `NullValue` specified. +The [UpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html) control accepts null values. When the [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_Value) is set to null, the control shows `0` by default. To display a different numerical value when `Value` is null, set the [NullValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_NullValue) property. The [UseNullOption](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_UseNullOption) property must be enabled for `NullValue` to take effect. {% tabs %} @@ -93,7 +101,7 @@ updown.NullValue = 2; ## Watermark -The [NullValueText](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_NullValueText) property enables the `UpDown` control to show watermark text instead of numeric value when [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_Value) is null. The [UseNullOption](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_UseNullOption) property must be enabled to see the `NullValueText` specified. +The [NullValueText](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_NullValueText) property enables the `UpDown` control to display watermark text instead of a numeric value when [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_Value) is null. The [UseNullOption](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_UseNullOption) property must be enabled for `NullValueText` to take effect. {% tabs %} @@ -120,15 +128,12 @@ N> The `UseNullOption` property must be enabled if you want to see the `NullValu ## Minimum and Maximum value -The value of `UpDown` control can be restricted within maximum and minimum limit. The spin button helps to increase or decrease the value by using mouse interaction. Once the increase or decrease value reached the predefined maximized or minimized value, the value does not change. +The value of the `UpDown` control can be restricted to a maximum and minimum limit. The spin button increments or decrements the value by mouse interaction; once the increment or decrement reaches the predefined maximum or minimum, the value stops changing. -Another way, +Similarly, the keyboard does not allow you to enter a value above or below the predefined maximum or minimum. -By using the keyboard, you can not enter the value above or below the predefined maximized or minimized value. - -* **MaxValue** - The [MaxValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_MaxValue) property is the maximum value that can be set for the `UpDown` control. - -* **MinValue** - The [MinValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_MinValue) property is the minimum value that can be set for the `UpDown` control. +* **MaxValue** - The [MaxValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_MaxValue) property sets the maximum value the control accepts. The default value is `double.MaxValue`. +* **MinValue** - The [MinValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_MinValue) property sets the minimum value the control accepts. The default value is `double.MinValue`. {% tabs %} @@ -152,15 +157,18 @@ updown.MinValue = 0; ### Minimum and Minimum validation -You can choose when to validate the maximum and minimum limit, while changing the values by using [MaxValidation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_MaxValidation) and [MinValidation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_MinValidation) property. +You can choose when to validate against the maximum and minimum limits while changing values by using the [MaxValidation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_MaxValidation) and [MinValidation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_MinValidation) properties. The accepted values are `OnKeyPress` and `OnLostFocus`. -* **OnKeyPress** - On setting the [MaxValidation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_MaxValidation) or [MinValidation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_MinValidation) to OnKeyPress, then the value in the UpDown control is validated soon after a key is pressed. So, it is not possible to provide any invalid input at all. +* **OnKeyPress** - The value is validated as soon as a key is pressed, so an invalid input is not accepted at all. +* **OnLostFocus** - The value is accepted during editing but is validated when the control loses focus. If the value is greater than `MaxValue` or less than `MinValue`, it is automatically reset to the corresponding limit. -* **OnLostFocus** - On setting the [MaxValidation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_MaxValidation) or [MinValidation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_MinValidation) to OnLostFocus, then the value in the UpDown control is validated when the UpDown control loses focus. That is, the `UpDown` will accept any value, validation will be happen only after control loose its keyboard focus. After validation, when the value of the UpDown control is greater than the MaxValue or lesser than the MinValue, the value will be changed automatically is set to MaxValue or MinValue respectively. +### MaxValueOnExceedMaxDigit -* **MaxValueOnExceedMaxDigit** - When you give input greater than specified maximum limit, `MaxValueOnExceedMaxDigit` property will decide either it should retain the old value or reset to maximum limit that is specified. For example, if `MaxValue` is set to 100 and you are trying to input 200. Value will changed to 100 when `MaxValueOnExceedMaxDigit` is enabled. When `MaxValueOnExceedMaxDigit` is false, 20 will be retained and last entered 0 will be ignored. +When you enter an input greater than the specified maximum, the [MaxValueOnExceedMaxDigit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_MaxValueOnExceedMaxDigit) property decides whether the entered value is reset to the maximum or retained as a partial value. For example, if `MaxValue` is `100` and you enter `200`, the value is reset to `100` when `MaxValueOnExceedMaxDigit` is `true`; when `false`, `20` is retained and the last digit (`0`) is ignored. -* **MinValueOnExceedMinDigit** - Similarly, When you give input lesser than specified minimum limit, `MinValueOnExceedMinDigit` property will decide either it should retain the old value or reset to minimum limit that is specified. +### MinValueOnExceedMinDigit + +Similarly, when you enter an input less than the specified minimum, the [MinValueOnExceedMinDigit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_MinValueOnExceedMinDigit) property decides whether the entered value is reset to the minimum or retained as a partial value {% tabs %} @@ -181,7 +189,6 @@ updown.MaxValueOnExceedMaxDigit = true; {% endtabs %} - ## AllowEdit The [AllowEdit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_AllowEdit) property is used to restrict the editing in `UpDown` control by setting it's value to `False`. The default value is `True`. diff --git a/wpf/NumericUpdown/Styles-and-Templates.md b/wpf/NumericUpdown/Styles-and-Templates.md index a536780a0..886c40b8f 100644 --- a/wpf/NumericUpdown/Styles-and-Templates.md +++ b/wpf/NumericUpdown/Styles-and-Templates.md @@ -9,13 +9,11 @@ documentation: ug # Styles and Templates in WPF UpDown - -The background and foreground of the [UpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html) control can be customized by editing its style or by using the properties exposed by the `UpDown` control. - +You can customize the background and foreground of the [UpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html) control by editing its style or by setting the exposed properties. ## Positive color -The background and foreground for the positive value can be customized using the `Background` and `Foreground` properties of the UpDown control. +You can customize the background and foreground for positive values using the `Background` and `Foreground` properties of the `UpDown` control. {% tabs %} @@ -43,7 +41,7 @@ grid.Children.Add(updown); ## Negative color -The background and foreground for the negative value can be customized using the [NegativeBackground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_NegativeBackground) and [NegativeForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_NegativeForeground) properties of UpDown control. The `NegativeBackground` and `NegativeForeground` properties are enabled by setting the [EnableNegativeColors](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_EnableNegativeColors) property is set to `True`. +You can customize the background and foreground for negative values using the [NegativeBackground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_NegativeBackground) and [NegativeForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_NegativeForeground) properties of the `UpDown` control. The negative colors are enabled by setting [EnableNegativeColors](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_EnableNegativeColors) to `True`. {% tabs %} @@ -68,7 +66,7 @@ updown.NegativeForeground = Brushes.BlueViolet; ## Zero color -The color of zero value can be changed by using the [ZeroColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_ZeroColor) property. The `ZeroColor` property can be enabled by setting the [ApplyZeroColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_ApplyZeroColor) property is set to `True`. +You can change the color of the zero value using the [ZeroColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_ZeroColor) property. The zero color is enabled by setting [ApplyZeroColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_ApplyZeroColor) to `True`. {% tabs %} @@ -91,7 +89,7 @@ updown.ZeroColor = Brushes.DarkViolet; ## Focused color -The background, foreground and border color for the UpDown control can be customized using the [FocusedBackground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_FocusedBackground), [FocusedBorderBrush](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_FocusedBorderBrush) and [FocusedForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_FocusedForeground) properties when the control is focused. These properties will work only when value of `EnableFocusedColors` property is **True**. By default, the value of [EnableFocusedColors](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_EnableFocusedColors) property is **True**. +You can customize the background, foreground, and border color for the `UpDown` control while focused using the [FocusedBackground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_FocusedBackground), [FocusedBorderBrush](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_FocusedBorderBrush), and [FocusedForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_FocusedForeground) properties. These properties take effect only when [EnableFocusedColors](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html#Syncfusion_Windows_Shared_UpDown_EnableFocusedColors) is `True`. The default value of `EnableFocusedColors` is `True`. {% tabs %} @@ -115,7 +113,7 @@ updown.FocusedBorderBrush = Brushes.Green; ![Changing Focused Value Color in WPF UpDown](StylesandTemplates-images/wpf-updown-focused.png) -N> The positive, negative and zero value colors get default color of the control while focusing the Updown control. +N> While the control is focused, the positive, negative, and zero colors revert to the default focus colors. ## Theme diff --git a/wpf/Percent-TextBox/Appearance.md b/wpf/Percent-TextBox/Appearance.md index 3c3edd791..93304a272 100644 --- a/wpf/Percent-TextBox/Appearance.md +++ b/wpf/Percent-TextBox/Appearance.md @@ -17,7 +17,7 @@ The [PercentTextBox](https://www.syncfusion.com/wpf-ui-controls/percent-textbox) ### Foreground for Positive Value -We can change a positive color for the percent value of `PercentTextBox` by setting the [PositiveForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_PositiveForeground) property and it will be applied when the [PercentValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentValue) is positive. The default color of `PositiveForeground` is `Black`. +You can change the color for positive percent values of `PercentTextBox` by setting the [PositiveForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_PositiveForeground) property; it will be applied when the [PercentValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentValue) is positive. The default color of `PositiveForeground` is `Black`. {% tabs %} {% highlight XAML %} @@ -40,12 +40,12 @@ percentTextBox.PositiveForeground = Brushes.Blue; ### Foreground for Negative Value -We can change a negative color for the value of `PercentTextBox` by setting the [NegativeForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_NegativeForeground) property and it will be applied when the [ApplyNegativeForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_ApplyNegativeForeground) property is `true` and the `PercentValue` is negative. The default color of `NegativeForeground` is `Red`. +You can change the color for negative percent values of `PercentTextBox` by setting the [NegativeForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_NegativeForeground) property; it will be applied when the [ApplyNegativeForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_ApplyNegativeForeground) property is `true` and the `PercentValue` is negative. The default color of `NegativeForeground` is `Red`. The default value of `ApplyNegativeForeground` is `false`. {% tabs %} {% highlight XAML %} - {% endhighlight %} @@ -65,8 +65,7 @@ percentTextBox.NegativeForeground = Brushes.SpringGreen; ### Foreground for Zero Value -We can change a zero color for the percent value of `PercentTextBox` by setting the [ZeroColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_ZeroColor) property and it will be applied when the [ApplyZeroColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_ApplyZeroColor) property is `true` and the `PercentValue` is zero. -The default color of `ZeroColor` is `Green`. +You can change the color for zero percent values of `PercentTextBox` by setting the [ZeroColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_ZeroColor) property; it will be applied when the [ApplyZeroColor](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_ApplyZeroColor) property is `true` and the `PercentValue` is zero. The default color of `ZeroColor` is `Green`. The default value of `ApplyZeroColor` is `false`. {% tabs %} {% highlight XAML %} @@ -93,6 +92,8 @@ percentTextBox.ZeroColor = Brushes.DarkGoldenrod; `PercentTextBox` allows different brushes to fill the control. The [Background](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.control.background?view=netframework-4.8) property can be used to modify the control background color. The default color of `Background` is `White`. +> The C# sample below requires the `using System.Windows.Media;` namespace for `Brushes`. + {% tabs %} {% highlight XAML %} @@ -114,7 +115,7 @@ percentTextBox.Background = Brushes.Cyan; ## Setting the Corner Radius -Corner Radius indicates the degree to which the corners of the border can be rounded. To create curved borders for the `PercentTextBox`, use [CornerRadius](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_CornerRadius) property. The default value of `CornerRadius` property is 1. +Corner Radius indicates the degree to which the corners of the border can be rounded. To create curved borders for the `PercentTextBox`, use the [CornerRadius](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_CornerRadius) property. The default value of the `CornerRadius` property is 1. {% tabs %} @@ -140,6 +141,8 @@ percentTextBox.CornerRadius = new CornerRadius(5); `PercentTextBox` allows different brushes to highlight the selected text by setting the [SelectionBrush](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.primitives.textboxbase.selectionbrush?view=netframework-4.8) and [SelectionOpacity](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.primitives.textboxbase.selectionopacity?view=netframework-4.8) properties. The `SelectionOpacity` property specifies the opacity of the `SelectionBrush`. +> The C# sample below requires the `using System.Windows.Media;` namespace for `Brushes`. + {% tabs %} {% highlight XAML %} @@ -152,16 +155,16 @@ PercentTextBox percentTextBox = new PercentTextBox(); percentTextBox.Width = 100; percentTextBox.Height = 25; percentTextBox.SelectionBrush = Brushes.Red; -percentTextBox.SelectionOpacity = 0.3; +percentTextBox.SelectionOpacity = 0.5; {% endhighlight %} {% endtabs %} ![WPF PercentTextBox with Red Selection Background](Appearance_images/wpf-percent-textbox-selection-background.png) -## Align Value +## Aligning the Value -`PercentTextBox` allows to display the value from right or center or left side by setting the [TextAlignment](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.textblock.textalignment?view=netframework-4.8) property to `Right` or `Left` or `Center`. The Default value of `TextAlignment` is `Left`. +`PercentTextBox` allows you to display the value on the right, left, or center by setting the [TextAlignment](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.textblock.textalignment?view=netframework-4.8) property to `Right`, `Left`, or `Center`. The default value of `TextAlignment` is `Left`. {% tabs %} {% highlight XAML %} diff --git a/wpf/Percent-TextBox/Changing-Percent-Value.md b/wpf/Percent-TextBox/Changing-Percent-Value.md index 1464429d5..f4b41dae4 100644 --- a/wpf/Percent-TextBox/Changing-Percent-Value.md +++ b/wpf/Percent-TextBox/Changing-Percent-Value.md @@ -32,16 +32,16 @@ percentTextBox.PercentValue = 10; Data binding is the process of establishing a connection between the application UI and business logic. Data binding can be unidirectional (source -> target or target <- source) or bidirectional (source <-> target). By assigning a percent value to the `PercentValue` property by binding, you can change the `PercentTextBox` percent value. -The following code snippets illustrate the percent value binding from one `PercentTextBox` to another. +The following code snippets illustrate the percent value binding from one `PercentTextBox` to another. To make the binding work, set the `DataContext` of the Window to an instance of `ViewModel` (for example, `DataContext = new ViewModel()` in the code-behind). -{%tabs%} +{% tabs %} {% highlight xaml %} {% endhighlight %} -{%endtabs%} +{% endtabs %} ViewModel.cs @@ -72,7 +72,7 @@ class ViewModel : NotificationObject ## Change percent value by pasting the clipboard's text -By default, `PercentTextBox` simply replaces the whole value by copied value with the current number format. If you want to replace or insert the copied value on specific place, use the [PasteMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_PasteMode) property value as `Advanced`. The default value of `PasteMode` property is `Default`. +By default, `PercentTextBox` simply replaces the whole value with the copied value using the current number format. If you want to replace or insert the copied value at a specific place, use the [PasteMode](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_PasteMode) property value as `Advanced`. The default value of the `PasteMode` property is `Default`. The following table explains the pasting behaviour in `Advanced` paste mode, @@ -111,7 +111,7 @@ If the selected text does not contain a number decimal separator, then copied va -{%tabs%} +{% tabs %} {% highlight xaml %} + {% endhighlight %} {% highlight C# %} PercentTextBox percentTextBox = new PercentTextBox(); +percentTextBox.MinValue = 0; +percentTextBox.MaxValue = 100; percentTextBox.ShowSpinButton = true; {% endhighlight %} -{%endtabs%} +{% endtabs %} ![WPF PercentTextBox displays SpinButton](Changing-Percent-Value_images/wpf-percent-textbox-spinbutton.gif) ## Value Changed Event -The `PercentTextBox` control can notify changes in percent value through the [PercentValueChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentValueChanged) event. In `PercentValueChanged` event, you can get old percent value and new percent value from the `OldValue` and `NewValue` properties. +The `PercentTextBox` control can notify changes in percent value through the [PercentValueChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentValueChanged) event. In the `PercentValueChanged` event, you can get the old percent value and new percent value from the `OldValue` and `NewValue` properties. -{%tabs%} +{% tabs %} {% highlight xaml %} @@ -166,7 +168,7 @@ PercentTextBox percentTextBox = new PercentTextBox(); percentTextBox.PercentValueChanged += new PropertyChangedCallback(PercentTextBox_PercentValueChanged); {% endhighlight %} -{%endtabs%} +{% endtabs %} You can handle the event as follows: @@ -185,9 +187,9 @@ private void PercentTextBox_PercentValueChanged(DependencyObject d, DependencyPr ## Setting the Null value - By default, the `PercentTextBox` control will display zero value when the `PercentValue` is set to `null`. You can use the [NullValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_NullValue) and [UseNullOption](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_UseNullOption) properties to show the null or any other percent value instead of zero. + By default, the `PercentTextBox` control will display zero when the `PercentValue` is set to `null`. You can use the [NullValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_NullValue) and [UseNullOption](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_UseNullOption) properties to show the null value or any other percent value instead of zero. - The default value of the `NullValue` property is `null`, you can reset this to any other percent value. It will display only on setting the `UseNullOption` property is set to `true`. + The default value of the `NullValue` property is `null`; you can reset this to any other percent value. The `NullValue` is displayed only when the `UseNullOption` property is set to `true`. The default value of `UseNullOption` is `false`. **NullValue = Null** @@ -235,11 +237,11 @@ percentTextBox.UseNullOption = true; ## Setting Watermark Text -We can display certain information within the control by using the [WaterMarkText](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkText) property. `WaterMarkText` is shown when the [WatermarkTextIsVisible](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkTextIsVisible) property is `true` and the Percent value is `null` or empty, the control is not in focus and the `UseNullOption` property is `true`. +You can display certain information within the control by using the [WatermarkText](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkText) property. `WatermarkText` is shown when the [WatermarkTextIsVisible](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkTextIsVisible) property is `true`, the `PercentValue` is `null` or empty, the control is not in focus, and the `UseNullOption` property is `true`. The default value of `WatermarkTextIsVisible` is `false`. ### Setting the WatermarkText Foreground -The `PercentTextBox` allows you to set the desired brush as a foreground for `WaterMarkText` using [WaterMarkTextForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkTextForeground) property. The default color of `WaterMarkTextForeground` is `Black`. +`PercentTextBox` allows you to set the desired brush as a foreground for `WatermarkText` using the [WatermarkTextForeground](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkTextForeground) property. The default color of `WatermarkTextForeground` is `Black`. {% tabs %} {% highlight XAML %} @@ -266,8 +268,9 @@ percentTextBox.WatermarkTextForeground = Brushes.Red; ### Setting Watermark Template -You can customize the Visual appearance of the `WatermarkText` by using the [WatermarkTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkTemplate) property. +You can customize the visual appearance of the `WatermarkText` by using the [WatermarkTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_WatermarkTemplate) property. The `WatermarkOpacity` property (used in the sample below) controls the opacity of the watermark content; its default value is `1`. +{% tabs %} {% highlight xaml %} {% endhighlight %} +{% endtabs %} ![Customizing Watermark Text in WPF PercentTextBox](Changing-Percent-Value_images/wpf-percent-textbox-watermark-customization.png) -N> The `UseNullOption` property must be enabled if you want to see `NullValue` or `WaterMarkText` in `PercentTextBox` control. +N> The `UseNullOption` property must be enabled if you want to see `NullValue` or `WatermarkText` in the `PercentTextBox` control. -N> If both `NullValue` and `WaterMarkText` are specified, you will only see `NullValue` but not `WaterMarkText`. +N> If both `NullValue` and `WatermarkText` are specified, you will only see `NullValue` but not `WatermarkText`. diff --git a/wpf/Percent-TextBox/Culture-and-Number-Formats.md b/wpf/Percent-TextBox/Culture-and-Number-Formats.md index 44a108f17..cc6efaf6f 100644 --- a/wpf/Percent-TextBox/Culture-and-Number-Formats.md +++ b/wpf/Percent-TextBox/Culture-and-Number-Formats.md @@ -28,6 +28,8 @@ The [PercentTextBox](https://www.syncfusion.com/wpf-controls/percent-textbox) pr {% endhighlight %} {% highlight C# %} +using System.Globalization; + PercentTextBox percentTextBox = new PercentTextBox(); percentTextBox.Width = 150; percentTextBox.Height = 25; @@ -39,7 +41,7 @@ percentTextBox.Culture = new CultureInfo("bs-Latn"); {% endhighlight %} {% endtabs %} -By default the US culture uses “,” as the `PercentGroupSeparator` and "." as the `PercentDecimalSeparator` where as the Latin culture uses “.” as the `PercentGroupSeparator` and "," as the `PercentDecimalSeparator`. +By default, the US culture uses “.” as the `PercentDecimalSeparator` and "," as the `PercentGroupSeparator`, whereas the Latin culture uses “,” as the `PercentDecimalSeparator` and “.” as the `PercentGroupSeparator`. **Default Culture** @@ -51,7 +53,9 @@ By default the US culture uses “,” as the `PercentGroupSeparator` and "." as ## NumberFormatInfo based formatting -The number formatting of `PercentTextBox` can be customized by setting [NumberFormat](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_NumberFormat) property. +The number formatting of `PercentTextBox` can be customized by setting the [NumberFormat](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_NumberFormat) property. + +To use the XAML sample below, add the `xmlns:numberformat="clr-namespace:Syncfusion.Windows.Shared;assembly=Syncfusion.Shared.WPF"` namespace mapping to the root element. The `NumberFormatInfo` type used here is `Syncfusion.Windows.Shared.NumberFormatInfo`. {% tabs %} {% highlight xaml %} @@ -68,6 +72,8 @@ The number formatting of `PercentTextBox` can be customized by setting [NumberFo {% endhighlight %} {% highlight C# %} +using Syncfusion.Windows.Shared; + PercentTextBox percentTextBox = new PercentTextBox(); percentTextBox.Width = 150; percentTextBox.Height = 25; @@ -85,11 +91,13 @@ percentTextBox.NumberFormat = new NumberFormatInfo() ![WPF PercentTextBox with Formatting](Culture-and-Number-Formats_images/wpf-percent-textbox-formatting.png) -The following code illustrate how to set percent group size by using the `NumberFormat` property. +The following code illustrates how to set the percent group size by using the `NumberFormat` property. {% tabs %} {% highlight C# %} +using Syncfusion.Windows.Shared; + PercentTextBox percentTextBox = new PercentTextBox(); percentTextBox.Width = 150; percentTextBox.Height = 25; @@ -112,13 +120,16 @@ percentTextBox.NumberFormat = new NumberFormatInfo() ## Formatting with dedicated properties -The number formatting of `PercentTextBox` can also be customized by setting the [PercentGroupSeparator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentGroupSeparator), [PercentGroupSizes](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentGroupSizes), [PercentDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentDecimalDigits), [PercentDecimalSeparator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentDecimalSeparator), `PercentNegativePattern`, `PercentPositivePattern`, and [PercentageSymbol](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentageSymbol) properties of PercentTextBox. You can show the group separator by setting the [GroupSeperatorEnabled](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_GroupSeperatorEnabled) property to `true`. +The number formatting of `PercentTextBox` can also be customized by setting the [PercentGroupSeparator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentGroupSeparator), [PercentGroupSizes](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentGroupSizes), [PercentDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentDecimalDigits), [PercentDecimalSeparator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentDecimalSeparator), [PercentNegativePattern](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentNegativePattern), [PercentPositivePattern](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentPositivePattern), and [PercentageSymbol](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentageSymbol) properties of `PercentTextBox`. You can show the group separator by setting the [GroupSeperatorEnabled](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_GroupSeperatorEnabled) property to `true`. The default value of `GroupSeperatorEnabled` is `false`. -The following code illustrate how to format using the `PercentDecimalSeparator`, `PercentDecimalDigits`, `PercentGroupSeparator`, `PercentGroupSizes` property of the `PercentTextBox`. +The following code illustrates how to format using the `PercentDecimalSeparator`, `PercentDecimalDigits`, `PercentGroupSeparator`, and `PercentGroupSizes` properties of the `PercentTextBox`. {% tabs %} {% highlight C# %} +using System.Windows.Media.Collections; +using Syncfusion.Windows.Shared; + PercentTextBox percentTextBox = new PercentTextBox(); percentTextBox.Width = 150; percentTextBox.Height = 25; @@ -129,7 +140,7 @@ percentTextBox.PercentDecimalDigits = 4; percentTextBox.PercentDecimalSeparator = "/"; percentTextBox.PercentGroupSeparator = "*"; -// Adding the percent group size via NumberGroupSizes property. +// Adding the percent group size via PercentGroupSizes property. percentTextBox.PercentGroupSizes = new Int32Collection() { 4, 3, 2}; {% endhighlight %} @@ -137,13 +148,13 @@ percentTextBox.PercentGroupSizes = new Int32Collection() { 4, 3, 2}; ![WPF PercentTextBox with Formatting](Culture-and-Number-Formats_images/wpf-percent-textbox-number-format.png) -N> When you use both the `NumberFormat` and the dedicated properties (`PercentGroupSeparator`, `PercentageSymbol`, `PercentDecimalDigits`, `PercentDecimalSeparator` and `PercentGroupSizes`) to format the value of `PercentTextBox`, the `PercentGroupSeparator`and `PercentGroupSizes` properties have higher priority. +N> When you use both the `NumberFormat` and the dedicated properties (`PercentGroupSeparator`, `PercentageSymbol`, `PercentDecimalDigits`, `PercentDecimalSeparator`, and `PercentGroupSizes`) to format the value of `PercentTextBox`, the `PercentGroupSeparator` and `PercentGroupSizes` properties have higher priority. N> When you use both `NumberFormat` and `Culture`, the `NumberFormat` will have a higher priority. ## Positive Value Pattern -You can use the [PercentPositivePattern](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentPositivePattern) property to customize the location of the percent symbol and the positive percent values. In the table below,"%" denotes the symbol of the percent, and "n" denotes the number. +You can use the [PercentPositivePattern](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentPositivePattern) property to customize the location of the percent symbol and the positive percent values. In the table below, "%" denotes the symbol of the percent, and "n" denotes the number. The default value of `PercentPositivePattern` is `0`. **PercentPositivePattern table** @@ -184,18 +195,18 @@ n% PercentTextBox percentTextBox = new PercentTextBox(); percentTextBox.Width = 150; percentTextBox.Height = 25; -percentTextBox.Value = 1234; +percentTextBox.PercentValue = 1234; percentTextBox.PercentPositivePattern = 3; {% endhighlight %} {% endtabs %} -![WPF PercentTextBox with Third Postive Pattern](Culture-and-Number-Formats_images/wpf-percent-textbox-third-positive-pattern.png) +![WPF PercentTextBox with Third Positive Pattern](Culture-and-Number-Formats_images/wpf-percent-textbox-third-positive-pattern.png) ## Negative Value Pattern -You can use the [PercentNegativePattern](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentNegativePattern) property to customize the location of the percent symbol and the negative percent values. In the table below,"%" denotes the symbol of the percent, and "n" denotes the number. +You can use the [PercentNegativePattern](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentNegativePattern) property to customize the location of the percent symbol and the negative percent values. In the table below, "%" denotes the symbol of the percent, and "n" denotes the number. The default value of `PercentNegativePattern` is `0`. **PercentNegativePattern table** diff --git a/wpf/Percent-TextBox/Getting-Started.md b/wpf/Percent-TextBox/Getting-Started.md index f22888f44..13c2c0f4b 100644 --- a/wpf/Percent-TextBox/Getting-Started.md +++ b/wpf/Percent-TextBox/Getting-Started.md @@ -32,8 +32,12 @@ You can add the [PercentTextBox](https://www.syncfusion.com/wpf-controls/percent To add the PercentTextBox control manually in XAML, follow these steps: 1. Create a new WPF project in Visual Studio. -2. Add the **Syncfusion.Shared.WPF** assembly references to the project. - +2. Add the **Syncfusion.Shared.WPF** assembly references to the project. You can install the required NuGet package using the Package Manager Console: + + ``` + Install-Package Syncfusion.Shared.WPF + ``` + 3. Import Syncfusion® WPF schema **http://schemas.syncfusion.com/wpf** and declare the `PercentTextBox` control in XAML page. {% capture codesnippet1 %} @@ -127,9 +131,9 @@ N> Do not use the [Text](https://learn.microsoft.com/en-us/dotnet/api/system.win ### Binding Value -Data binding is the method of forming a connection between the application UI and business logic. Data binding can be unidirectional (source -> target or target <- source) or bidirectional (source <-> target). You can bind data to the `PercentTextBox` using the `Value` Property. +Data binding is the method of forming a connection between the application UI and business logic. Data binding can be unidirectional (source -> target or target <- source) or bidirectional (source <-> target). You can bind data to the `PercentTextBox` using the `PercentValue` Property. -The following code snippets illustrate the percent value binding from one `PercentTextBox` to another. +The following code snippets illustrate the percent value binding from one `PercentTextBox` to another. To make the binding work, set the `DataContext` of the Window to an instance of `ViewModel` (for example, `DataContext = new ViewModel()` in the code-behind). {% tabs %} {% highlight XAML %} @@ -169,7 +173,7 @@ class ViewModel : NotificationObject ## Value Changed Notification -The `PercentTextBox` control can notifies the percent value changes through the [PercentValueChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentValueChanged) event. You can get old percent value and new percent value from `OldValue` and `NewValue` properties in `PercentValueChanged` event. +The `PercentTextBox` control can notify percent value changes through the [PercentValueChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentValueChanged) event. You can get the old percent value and new percent value from the `OldValue` and `NewValue` properties in the `PercentValueChanged` event. {%tabs%} {% highlight xaml %} @@ -202,7 +206,9 @@ private void PercentTextBox_PercentValueChanged(DependencyObject d, DependencyPr ## Min Max Value Restriction -The `PercentValue` of `PercentTextBox` can be restricted within maximum and minimum limit. You can define the minimum and maximum values by setting the [MinValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_MinValue) and [MaxValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_MaxValue) properties. It allows the user to enter the percent value between `MinValue` and `MaxValue`. +The `PercentValue` of `PercentTextBox` can be restricted within the maximum and minimum limits. You can define the minimum and maximum values by setting the [MinValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_MinValue) and [MaxValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_MaxValue) properties. It allows the user to enter a percent value between the `MinValue` and `MaxValue`. + +> For more options such as validation behavior (`MinValidation`, `MaxValidation`) and exceed-digit handling, see [Restriction or Validation](restriction-or-validation). {% tabs %} {% highlight XAML %} @@ -227,7 +233,9 @@ percentTextBox.PercentValue = 100; ## Step Interval to increase or decrease the value -The `PercentTextBox` control allows to increase or decrease the percent value by pressing up and down arrow keys in keyboard or mouse wheel over the control. The [ScrollInterval](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_ScrollInterval) property is used to specify the increment or decrement intervals. The default value of `ScrollInterval` is 1. +The `PercentTextBox` control allows you to increase or decrease the percent value by pressing the up and down arrow keys on the keyboard or by scrolling the mouse wheel over the control. The [ScrollInterval](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_ScrollInterval) property is used to specify the increment or decrement intervals. The default value of `ScrollInterval` is 1. The default value of `IsScrollingOnCircle` is `true`. + +> For more options such as click-and-drag scrolling (`EnableExtendedScrolling`) and text selection on focus, see [Step Interval](step-interval). {% tabs %} {% highlight xaml %} @@ -256,6 +264,8 @@ percentTextBox.ScrollInterval = 4; You can customize the number format by either setting the [NumberFormat](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_NumberFormat) property or the [PercentGroupSeparator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentGroupSeparator), [PercentGroupSizes](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentGroupSizes), [PercentDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentDecimalDigits), [PercentDecimalSeparator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentDecimalSeparator), [PercentNegativePattern](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentNegativePattern), [PercentPositivePattern](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentPositivePattern), and [PercentageSymbol](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentageSymbol) properties of `PercentTextBox`. +> For detailed examples, see [Culture and Number Formats](culture-and-number-formats). + {% tabs %} {% highlight XAML %} diff --git a/wpf/Percent-TextBox/Overview.md b/wpf/Percent-TextBox/Overview.md index bb7c8d5a3..19736aa50 100644 --- a/wpf/Percent-TextBox/Overview.md +++ b/wpf/Percent-TextBox/Overview.md @@ -9,7 +9,7 @@ documentation: ug # About Syncfusion® WPF PercentTextBox Control -The [PercentTextBox](https://www.syncfusion.com/wpf-controls/percent-textbox) control restricts text box input to only double values and displays the percentage of the given value with support for data binding, Watermark, Null Value, and culture support. It provides many customization options to enhance the appearance and to suit the applications. +The [PercentTextBox](https://www.syncfusion.com/wpf-controls/percent-textbox) control restricts text box input to only double values and displays the value as a percentage, with support for data binding, watermark, null value, and culture. It provides many customization options to enhance the appearance and to suit the applications. ## Control structure @@ -21,11 +21,11 @@ The [PercentTextBox](https://www.syncfusion.com/wpf-controls/percent-textbox) co The core features of the PercentTextBox are as follows: -* Provides the ability to control the range of the input values by using the `MinValue` and `MaxValue` properties. -* Provides different foreground brushes for positive, negative, and zero values. +* Provides the ability to control the range of the input values by using the [MinValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_MinValue) and [MaxValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_MaxValue) properties. +* Provides different foreground brushes for positive, negative, and zero values using `PositiveForeground`, `NegativeForeground` (`ApplyNegativeForeground`), and `ZeroColor` (`ApplyZeroColor`) properties. * Provides data binding support. * Provides built-in Visual Styles and themes. -* Provides Watermark support. -* Provides Number Format support. -* Provides Null Value support. +* Provides watermark support. +* Provides number format support. +* Provides null value support. * Provides culture support. diff --git a/wpf/Percent-TextBox/Range-Adorner.md b/wpf/Percent-TextBox/Range-Adorner.md index 37cb0e15e..e2304d3e7 100644 --- a/wpf/Percent-TextBox/Range-Adorner.md +++ b/wpf/Percent-TextBox/Range-Adorner.md @@ -9,7 +9,7 @@ documentation: ug # Range Adorner in WPF PercentTextBox -[Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html) of [PercentTextBox](https://www.syncfusion.com/wpf-controls/percent-textbox) can be visually indicated like a progress bar using range-adorner feature, this feature is disabled by default. You can show the adorner over `PercentTextBox` control by setting [EnableRangeAdorner](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_EnableRangeAdorner) property to `true`. default value of `EnableRangeAdorner` is `false`. The adorner layer can be filled in the control area on the basis of the minimum and maximum values with considering the given value. Range Adorner is not displayed when a `MinValue` or `MaxValue` property is not set. +The [PercentTextBox](https://www.syncfusion.com/wpf-controls/percent-textbox) control provides a range-adorner feature that visually indicates the [PercentValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentValue) like a progress bar. This feature is disabled by default. You can show the adorner over the `PercentTextBox` control by setting the [EnableRangeAdorner](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_EnableRangeAdorner) property to `true`. The default value of `EnableRangeAdorner` is `false`. The adorner fills the control area based on the minimum and maximum values, considering the current value. The Range Adorner is not displayed when the `MinValue` or `MaxValue` property is not set. {% tabs %} {% highlight XAML %} diff --git a/wpf/Percent-TextBox/Restriction-or-Validation.md b/wpf/Percent-TextBox/Restriction-or-Validation.md index fa47b61fc..ea9073437 100644 --- a/wpf/Percent-TextBox/Restriction-or-Validation.md +++ b/wpf/Percent-TextBox/Restriction-or-Validation.md @@ -13,21 +13,21 @@ This section explains how to validate or restrict the `PercentTextBox` control v ## Restrict the value within minimum and maximum value -The [PercentValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentValue) of the [PercentTextBox](https://www.syncfusion.com/wpf-ui-controls/percent-textbox) can be restricted within the maximum and minimum limits. Once the percent value has reached the maximum or minimum value , the value does not exceed the limit. We can change the maximum and minimum limits by using the [MinValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_MinValue) property and [MaxValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_MaxValue) property. +The [PercentValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentValue) of the [PercentTextBox](https://www.syncfusion.com/wpf-ui-controls/percent-textbox) can be restricted within the maximum and minimum limits. Once the percent value has reached the maximum or minimum value, the value will not exceed the limit. You can change the maximum and minimum limits by using the [MinValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_MinValue) and [MaxValue](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_MaxValue) properties. -You can choose when to validate the maximum and minimum limits while changing the percent values by using the [MinValidation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MinValidation) and [MaxValidation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MaxValidation) properties. +You can choose when to validate the maximum and minimum limits while changing the percent values by using the [MinValidation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MinValidation) and [MaxValidation](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MaxValidation) properties. The default value of both properties is `OnKeyPress`. -* `OnKeyPress` — When setting the `MaxValidation` or `MinValidation` to `OnKeyPress`, the percent value in the `PercentTextBox` will be validated shortly after pressing a key. So, it is not possible to provide any invalid input at all and the percent value does not exceed the maximum and minimum limits. +* `OnKeyPress` — When setting the `MaxValidation` or `MinValidation` to `OnKeyPress`, the percent value in the `PercentTextBox` will be validated shortly after pressing a key. So, it is not possible to provide any invalid input at all, and the percent value will not exceed the maximum and minimum limits. -* `OnLostFocus` - When setting `MaxValidation` or `MinValidation` to `OnLostFocus`, the percent value in the `PercentTextBox` is validated, when the `PercentTextBox` loses the focus. That is, the `PercentTextBox` will accept any percent value, validation will only take place after the `PercentTextBox` has lost its keyboard focus. After validation, when the percent value of the `PercentTextBox` is greater than the `MaxValue` or less than the `MinValue`, the percent value will be automatically set to `MaxValue` or `MinValue`. +* `OnLostFocus` - When setting `MaxValidation` or `MinValidation` to `OnLostFocus`, the percent value in the `PercentTextBox` is validated when the `PercentTextBox` loses focus. That is, the `PercentTextBox` will accept any percent value; validation will only take place after the `PercentTextBox` has lost its keyboard focus. After validation, when the percent value of the `PercentTextBox` is greater than the `MaxValue` or less than the `MinValue`, the percent value will be automatically set to `MaxValue` or `MinValue`. -* [MaxValueOnExceedMaxDigit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MaxValueOnExceedMaxDigit) - When you give input greater than specified maximum limit, `MaxValueOnExceedMaxDigit` property will decide either it should retain the old percent value or reset to maximum limit that is specified. For example, if `MaxValue` is set to 100 and you are trying to input 200. `PercentValue` will changed to 100 when `MaxValueOnExceedMaxDigit` is `true`. When `MaxValueOnExceedMaxDigit` is `false`, 20 will be retained and last entered 0 will be ignored. +* [MaxValueOnExceedMaxDigit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MaxValueOnExceedMaxDigit) - When you give input greater than the specified maximum limit, the `MaxValueOnExceedMaxDigit` property will decide whether to retain the old percent value or reset to the maximum limit. For example, if `MaxValue` is set to 100 and you are trying to input 200, `PercentValue` will be changed to 100 when `MaxValueOnExceedMaxDigit` is `true`. When `MaxValueOnExceedMaxDigit` is `false`, 20 will be retained and the last entered 0 will be ignored. - N> `MaxValueOnExceedMinDigit` property will be enabled only when the `MaxValidation` is set to `OnKeyPress`. + N> `MaxValueOnExceedMaxDigit` property is enabled only when the `MaxValidation` is set to `OnKeyPress`. -* [MinValueOnExceedMinDigit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MinValueOnExceedMinDigit) - When you give input less than specified minimum limit, `MinValueOnExceedMinDigit` property will decide either it should retain the old percent value or reset to minimum limit that is specified. For example, if `MinValue` is set to 200 and the `PercentValue` is 205 and you are trying change the percent value to 20. `PercentValue` will changed to 200 when `MinValueOnExceedMinDigit` is `true`. When `MinValueOnExceedMinDigit` is `false`, Old percent value 205 will be retained. +* [MinValueOnExceedMinDigit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.EditorBase.html#Syncfusion_Windows_Shared_EditorBase_MinValueOnExceedMinDigit) - When you give input less than the specified minimum limit, the `MinValueOnExceedMinDigit` property will decide whether to retain the old percent value or reset to the minimum limit. For example, if `MinValue` is set to 200 and the `PercentValue` is 205 and you are trying to change the percent value to 20, `PercentValue` will be changed to 200 when `MinValueOnExceedMinDigit` is `true`. When `MinValueOnExceedMinDigit` is `false`, the old percent value 205 will be retained. - N> `MinValueOnExceedMinDigit` will be enabled only when the `MinValidation` is set to `OnKeyPress`. + N> `MinValueOnExceedMinDigit` is enabled only when the `MinValidation` is set to `OnKeyPress`. {% tabs %} {% highlight XAML %} @@ -52,25 +52,25 @@ percentTextBox.MaxValueOnExceedMaxDigit = true; {% endhighlight %} {% endtabs %} -`MinValidation` is set to OnKeyPress, it cannot let to enter a percent value less than the `MinValue`. If try to enter a percent value less than the `MinValue`, then the `MinValue` will set to the `PercentValue` property because `MinValueOnExceedMinDigit` is set to `true`. +`MinValidation` is set to `OnKeyPress`, so it will not allow entering a percent value less than the `MinValue`. If you try to enter a percent value less than the `MinValue`, then the `MinValue` will be set to the `PercentValue` property because `MinValueOnExceedMinDigit` is set to `true`. -![Validate minimun value of PercentTextBox on pressing a key](Restriction-or-Validation_images/wpf-percent-textbox-min-value-validation.jpeg) +![Validate minimum value of PercentTextBox on pressing a key](Restriction-or-Validation_images/wpf-percent-textbox-min-value-validation.jpeg) -`MaxValidation` is set to OnLostFocus, so the `MaxValidation` will be performed only in the lost focus. +`MaxValidation` is set to `OnLostFocus`, so the `MaxValidation` will be performed only on lost focus. ![Validate maximum value of PercentTextBox when keyboard focus is lost](Restriction-or-Validation_images/wpf-percent-textbox-max-value-validation.jpeg) -## Restrict number of decimal digit +## Restrict number of decimal digits -You can format the decimal digits in the [PercentTextBox](https://www.syncfusion.com/wpf-ui-controls/percent-textbox) control using [PercentDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentDecimalDigits) property. You can restrict the decimal digits of text within maximum and minimum limits in `PercentTextBox` control using [MinPercentDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_MinPercentDecimalDigits) and [MaxPercentDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_MaxPercentDecimalDigits) properties. The default value of `MinPercentDecimalDigits`,`MaxPercentDecimalDigits` and `DoubleDecimalDigits` properties is **-1**. +You can format the decimal digits in the [PercentTextBox](https://www.syncfusion.com/wpf-ui-controls/percent-textbox) control using the [PercentDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_PercentDecimalDigits) property. You can restrict the decimal digits of the text within maximum and minimum limits in the `PercentTextBox` control using the [MinPercentDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_MinPercentDecimalDigits) and [MaxPercentDecimalDigits](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.PercentTextBox.html#Syncfusion_Windows_Shared_PercentTextBox_MaxPercentDecimalDigits) properties. The default value of the `MinPercentDecimalDigits`, `MaxPercentDecimalDigits`, and `DoubleDecimalDigits` properties is **-1** (unrestricted). `DoubleDecimalDigits` controls the decimal digits used to display the underlying double value when the control is not focused. -N> If the value of `MinPercentDecimalDigits` property is greater than value of the `MaxPercentDecimalDigits` property, the text of `PercentTextBox` will be updated based on value of `MinPercentDecimalDigits` property. +N> If the value of the `MinPercentDecimalDigits` property is greater than the value of the `MaxPercentDecimalDigits` property, the text of `PercentTextBox` will be updated based on the value of the `MinPercentDecimalDigits` property. {% tabs %} {% highlight XAML %} - @@ -78,7 +78,7 @@ N> If the value of `MinPercentDecimalDigits` property is greater than value of t {% highlight C# %} PercentTextBox percentTextBox = new PercentTextBox(); -percentTextBox.Value = 125.32545; +percentTextBox.PercentValue = 125.32545; percentTextBox.MaxPercentDecimalDigits = 4; percentTextBox.MinPercentDecimalDigits = 1; @@ -87,12 +87,12 @@ percentTextBox.MinPercentDecimalDigits = 1; ![PercentTextBox WPF restricts the number of decimal digits](Restriction-or-Validation_images/percenttextbox-wpf-restrict-numberof-decimal-digits.png) -When the value of `MinPercentDecimalDigits`, `MaxPercentDecimalDigits` and `PercentDecimalDigits` properties are specified, `PercentDecimalDigits` property takes high precedence and updates the text of `PercentTextBox` property. +When the values of `MinPercentDecimalDigits`, `MaxPercentDecimalDigits`, and `PercentDecimalDigits` are specified, the `PercentDecimalDigits` property takes higher precedence and updates the text of the `PercentTextBox` property. {% tabs %} {% highlight XAML %} - The `syncfusion:` prefix used below requires `xmlns:syncfusion="http://schemas.syncfusion.com/wpf"` to be declared on the root `` element. {% capture codesnippet1 %} {% tabs %} {% highlight XAML %} - - - - - - - - - - - - + + + + + + + + + + + Click="SpellCheck_ButtonClick" + HorizontalAlignment="Center"/> @@ -175,24 +179,21 @@ If you want to disable the spell check operation, use the `EnableSpellCheck` pro - - - + - EnableSpellCheck="False"/> - + Click="SpellCheck_ButtonClick" + HorizontalAlignment="Center"/> @@ -224,53 +225,21 @@ N> View [Sample](https://github.com/SyncfusionExamples/WPF-SpellChecker-examples You can get the suggestion list by passing the error word in the below methods. -* [GetSuggestions](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfSpellChecker.html#Syncfusion_Windows_Controls_SfSpellChecker_GetSuggestions_System_String_) - To get a list of suggestion words for an error word -* [GetPhoneticWords](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfSpellChecker.html#Syncfusion_Windows_Controls_SfSpellChecker_GetPhoneticWords_System_String_) - To get a list of phonetic words for an error word -* [GetAnagrams](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfSpellChecker.html#Syncfusion_Windows_Controls_SfSpellChecker_GetAnagrams_System_String_) - To get a list of anagram words for an error word +* [GetSuggestions](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfSpellChecker.html#Syncfusion_Windows_Controls_SfSpellChecker_GetSuggestions_System_String_) - Returns a list of suggestion words for an error word. +* [GetPhoneticWords](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfSpellChecker.html#Syncfusion_Windows_Controls_SfSpellChecker_GetPhoneticWords_System_String_) - Returns a list of phonetic words for an error word. +* [GetAnagrams](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfSpellChecker.html#Syncfusion_Windows_Controls_SfSpellChecker_GetAnagrams_System_String_) - Returns a list of anagram words for an error word. {% tabs %} -{% highlight xaml %} - - - - - - - - - EnableContextMenu="True" - EnableSpellCheck="True"/> - - - - - - -{% endhighlight %} {% highlight c# %} -//Enable Contextmenu to spellcheck -spellChecker.EnableContextMenu = true; +//Get a list of suggestion words for an error word +List suggestions = spellChecker.GetSuggestions("Natusre"); -{% endhighlight %} -{% endtabs %} +//Get a list of phonetic words for an error word +List phoneticWords = spellChecker.GetPhoneticWords("Natusre"); -{% tabs %} -{% highlight C# %} - -//Call SpellCheck method to open SpellCheck on button click -private void SpellCheck_ButtonClick(object sender, RoutedEventArgs e) { - spellChecker.PerformSpellCheckUsingDialog(); -} +//Get a list of anagram words for an error word +List anagramWords = spellChecker.GetAnagrams("Natusre"); {% endhighlight %} {% endtabs %} @@ -315,7 +284,7 @@ IgnoreAlphaNumericWords | Specifies whether or not to Spell Check numbers or wor + HorizontalAlignment="Center"/> @@ -374,20 +343,19 @@ By default, when the spell check is completed, it will be notified by using the Text="Natusre is an importsant and integral part of mankind. It is one of the greattest blessings for human lifve. Howeverq, nowadays humans fail to recognize it as one. Nature has been an inspiration for numerous poets, writeqrs, artists and more of yesteryears." Name="textbox" TextWrapping="Wrap"> - - + - - + Click="SpellCheck_ButtonClick" + HorizontalAlignment="Center"/> @@ -407,10 +375,10 @@ private void SpellCheck_ButtonClick(object sender, RoutedEventArgs e) { spellChecker.PerformSpellCheckUsingDialog(); } -private void SpellChecker_SpellCheckCompleted(object sender, EventArgs e) { - //Restrict the message box showing - (e as SpellCheckCompletedEventArgs).ShowMessageBox = false; - } +private void SpellChecker_SpellCheckCompleted(object sender, SpellCheckCompletedEventArgs e) { + //Suppress the completion message box + e.ShowMessageBox = false; +} {% endhighlight %} {% endtabs %} @@ -427,4 +395,4 @@ WPF SpellChecker (SfSpellChecker) supports various built-in themes. Refer to the * [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme) -![Setting theme to WPF SpellChecker](gettingstarted-images/Theme.png) +![Setting theme to WPF SpellChecker](gettingstarted-images/Theme.png) \ No newline at end of file diff --git a/wpf/SpellChecker/Overview.md b/wpf/SpellChecker/Overview.md index 5ac63f500..8d02744d3 100644 --- a/wpf/SpellChecker/Overview.md +++ b/wpf/SpellChecker/Overview.md @@ -9,7 +9,7 @@ documentation: ug # About Syncfusion® WPF SfSpellChecker Control -[SfSpellChecker](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfSpellChecker.html) control provides a simple and intuitive interface to check for spelling errors in text editor controls. You can perform spell checking on text editor control and it will also provide suggestions for the misspelled words through dialog and context menu. You can use spell check for any language(culture) input text and custom dictionary supports. +[SfSpellChecker](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfSpellChecker.html) control provides a simple and intuitive interface to check for spelling errors in text-editor controls. You can perform spell-checking on a text editor, and it provides suggestions for misspelled words through both a dialog and a context menu. You can use spell-checking for any language (culture) input text, and add custom dictionary support. ## Control structure @@ -17,10 +17,9 @@ documentation: ug ## Features -* Supports Context Menu suggestion. -* Supports spell check for any language(culture) -* Supports Custom Dictionary to provide suggestions. -* Provide built-in options to Ignore, Ignore All, Replace, Replace All for error words in spell checker dialog. -* Support to Ignore Email, URL, Numbers, Mixed and Upper case words from spell check. -* Highlights the error words. - +* Supports context-menu suggestions. +* Supports spell-checking for any language (culture). +* Supports custom dictionaries to provide suggestions. +* Provides built-in options to Ignore, Ignore All, Replace, and Replace All for error words in the SpellChecker dialog. +* Supports ignoring emails, URLs, numbers, mixed-case, and upper-case words during spell check. +* Highlights the error words in the text. diff --git a/wpf/SpellChecker/custom-dictionary-support.md b/wpf/SpellChecker/custom-dictionary-support.md index 820d9675a..7c1ab6033 100644 --- a/wpf/SpellChecker/custom-dictionary-support.md +++ b/wpf/SpellChecker/custom-dictionary-support.md @@ -13,28 +13,28 @@ You can use a default and custom dictionaries to spell check the document based ## Default SpellCheck Dictionary -[SfSpellChecker](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfSpellChecker.html) provides built-in dictionary for `English` language and it provides suitable suggestion of the error words. +[SfSpellChecker](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfSpellChecker.html) provides a built-in dictionary for the `English` language and returns suitable suggestions for misspelled words. ## Load your own dictionaries for any language -You can add your own dictionary to [SfSpellChecker.Dictionaries](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfSpellChecker.html#Syncfusion_Windows_Controls_SfSpellChecker_Dictionaries) collection. `SfSpellChecker` support 3 standard dictionary file format: +You can add your own dictionary to the [SfSpellChecker.Dictionaries](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfSpellChecker.html#Syncfusion_Windows_Controls_SfSpellChecker_Dictionaries) collection. `SfSpellChecker` supports three standard dictionary file formats: - * 1.Hunspell - * 2.Ispell - * 3.OpenOffice - -N> Built-in dictionary will be disabled once custom dictionary is added to SfSpellChecker +1. Hunspell +2. Ispell +3. OpenOffice + +N> The built-in dictionary is disabled when a custom dictionary is added to `SfSpellChecker`. ## SpellCheck using Hunspell dictionary -You can check spelling mistakes using `Hunspell` dictionary format. This format contains files as follows, +You can check spelling mistakes using the `Hunspell` dictionary format. This format contains the following files: -* Affix file with grammar rules- `*.aff`, -* Basic Words file - `*.dic` file. +* Affix file with grammar rules - `*.aff` +* Basic-words file - `*.dic` ### Adding Hunspell Dictionary -1. Add your [HunspellDictionary](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.HunspellDictionary.html)'s required culture `*.aff` and `*.dic` files and add them as `Resource` into the application. +1. Add the [HunspellDictionary](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.HunspellDictionary.html)'s required-culture `*.aff` and `*.dic` files to the project, and include them as `Resource` items. In Visual Studio, select the files in **Solution Explorer**, open the **Properties** window, and set **Build Action** to `Resource`. ![Adding Basic word and Grammar files as resource into the application](Dictionary_images/HunspellAdding.png) @@ -44,7 +44,7 @@ You can check spelling mistakes using `Hunspell` dictionary format. This format 4. Setting the required culture to the [SfSpellChecker.Culture](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfSpellChecker.html#Syncfusion_Windows_Controls_SfSpellChecker_Culture) property. -N> The following code snippets shows how to add Hunspell dictionary to the `SpellChecker`. Please refer [Adding SfSpellChecker to an application](https://help.syncfusion.com/windowsforms/spell-checker/getting-started#adding-wpf-sfspellchecker-to-an-application) to know how to configure SfSpellChecker. +N> The following code snippets show how to add a Hunspell dictionary to the SpellChecker. Please refer to [Adding WPF SfSpellChecker to an application](Getting-Started.md#adding-wpf-sfspellchecker-to-an-application) to learn how to configure `SfSpellChecker`. {% capture codesnippet1 %} {% tabs %} @@ -132,16 +132,14 @@ N> You can add multiple `HunspellDictionary` with various culture files into the ## SpellCheck using Ispell dictionary -You can check spelling mistakes using `Ispell` dictionary format. This format contains files as follows, - -`Ispell` dictionary contains two files as follows, +You can check spelling mistakes using the `Ispell` dictionary format. The `Ispell` dictionary contains the following files: -* Affix file with grammar rules- `*.aff`, -* Basic Words file - `*.xlg` or `*.dic` file. +* Affix file with grammar rules - `*.aff` +* Basic-words file - `*.xlg` or `*.dic` ### Adding Ispell Dictionary -1. Add your [IspellDictionary](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.IspellDictionary.html)'s required culture `*.aff` and `*.dic` files and add them as `Resource` into the application. +1. Add the [IspellDictionary](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.IspellDictionary.html)'s required-culture `*.aff` and `*.dic` files to the project, and include them as `Resource` items. ![Adding Basic word and Grammar files as resource into the application](Dictionary_images/IspellAdding.png) @@ -237,16 +235,14 @@ N> You can add multiple `IspellDictionary` with various culture files into the ` ## SpellCheck using OpenOffice dictionary -You can check spelling mistakes using `OpenOffice` dictionary format. This format contains files as follows, - -`OpenOffice` dictionary contains two files as follows, +You can check spelling mistakes using the `OpenOffice` dictionary format. The `OpenOffice` dictionary contains the following files: -* Affix file with grammar rules- `*.aff`, -* Basic Words file - `*.dic` file. +* Affix file with grammar rules - `*.aff` +* Basic-words file - `*.dic` ### Adding OpenOffice Dictionary -1. Add your [OpenOfficeDictionary](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.OpenOfficeDictionary.html)'s required culture `*.aff` and `*.dic` files and add them as `Resource` into the application. +1. Add the [OpenOfficeDictionary](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.OpenOfficeDictionary.html)'s required-culture `*.aff` and `*.dic` files to the project, and include them as `Resource` items. ![Adding Basic word and Grammar files as resource into the application](Dictionary_images/OpenOfficeAdding.png) @@ -463,21 +459,20 @@ N> You can add multiple `CustomDictionary` with various culture word files into N> [View Sample in GitHub](https://github.com/SyncfusionExamples/WPF-SpellChecker-examples/tree/master/Samples/CustomSpellCheck) -## Switch language(Culture) at runtime +## Switch language (culture) at runtime -You can add `Hunspell`, `Ispell`, or `OpenOffice` dictionaries one or more times with various culture into the `SfSpellChecker.Dictionaries` collection. You can change the spell check culture at runtime by changing the `SfSpellChecker.Culture` property. Based on the current `SfSpellChecker.Culture` respective dictionary is used to spell check. +You can add `Hunspell`, `Ispell`, or `OpenOffice` dictionaries one or more times with various cultures into the `SfSpellChecker.Dictionaries` collection. The dictionary that matches the current `SfSpellChecker.Culture` is used for spell checking. You can change the spell-check culture at runtime by changing the `SfSpellChecker.Culture` property. {% tabs %} {% highlight xaml %} - - - + - !--Adding english cultured Hunspell dictionary--> + - + - + Click="SpellCheck_ButtonClick" + HorizontalAlignment="Center"/> {% endhighlight %} {% highlight c# %} +// Required usings: +// using System; +// using System.Globalization; +// using Syncfusion.Windows.Controls; + SfSpellChecker spellChecker = new SfSpellChecker(); -// Adding Hunspell dictonaries in Dictionaries collection +// Adding Hunspell dictionaries in Dictionaries collection spellChecker.Dictionaries = new DictionaryCollection(); //Add French culture Hunspell dictionary @@ -524,33 +524,30 @@ spellChecker.Dictionaries.Add( new HunspellDictionary() { Culture = new CultureInfo("fr-FR"), - GrammarUri = new Uri("/HunSpellCheck;component//French/fr-FR.aff", UriKind.Relative), - DictionaryUri = new Uri("/HunSpellCheck;component//French/fr-FR.dic", UriKind.Relative) - } -); + GrammarUri = new Uri("/HunSpellCheck;component/French/fr-FR.aff", UriKind.Relative), + DictionaryUri = new Uri("/HunSpellCheck;component/French/fr-FR.dic", UriKind.Relative) + }); //Add Spanish culture Hunspell dictionary spellChecker.Dictionaries.Add( new HunspellDictionary() { Culture = new CultureInfo("es-ES"), - GrammarUri = new Uri("/HunSpellCheck;component//Spanish/es-ES.aff", UriKind.Relative), - DictionaryUri = new Uri("/HunSpellCheck;component//Spanish/es-ES.dic", UriKind.Relative) - } -); + GrammarUri = new Uri("/HunSpellCheck;component/Spanish/es-ES.aff", UriKind.Relative), + DictionaryUri = new Uri("/HunSpellCheck;component/Spanish/es-ES.dic", UriKind.Relative) + }); //Add US culture Hunspell dictionary spellChecker.Dictionaries.Add( new HunspellDictionary() { Culture = new CultureInfo("en-US"), - GrammarUri = new Uri("/HunSpellCheck;component//US/en-US.aff", UriKind.Relative), - DictionaryUri = new Uri("/HunSpellCheck;component//US/en-US.dic", UriKind.Relative) - } -); + GrammarUri = new Uri("/HunSpellCheck;component/US/en-US.aff", UriKind.Relative), + DictionaryUri = new Uri("/HunSpellCheck;component/US/en-US.dic", UriKind.Relative) + }); -//Setting a required dictionary's french culture for SpellChecker -spellChecker.Culture = spellChecker.Dictionaries[0].Culture;; +//Set the initial culture for the SpellChecker +spellChecker.Culture = spellChecker.Dictionaries[0].Culture; //Assigning a spellchecker to the TextBox SfSpellChecker.SetSpellChecker(textbox, spellChecker); @@ -571,5 +568,5 @@ private void SpellCheck_ButtonClick(object sender, RoutedEventArgs e) { ![SpellCheck using Hunspell dictionary](Dictionary_images/HunSpell.png) -Here, `SpellChecker.Culture` is `fr-FR` culture. So, `fr-FR` cultured `Hunspell` dictionary is used as speck check dictionary. +Here, `SpellChecker.Culture` is initially `fr-FR`, so the `fr-FR` Hunspell dictionary is used as the spell-check dictionary. After switching the `Culture` to `es-ES`, the Spanish dictionary is used. diff --git a/wpf/Tabbed-MDI-Form/Adding-and-Removing-Items-from-the-Document-Container-Control.md b/wpf/Tabbed-MDI-Form/Adding-and-Removing-Items-from-the-Document-Container-Control.md index d1a12b451..a7d484b00 100644 --- a/wpf/Tabbed-MDI-Form/Adding-and-Removing-Items-from-the-Document-Container-Control.md +++ b/wpf/Tabbed-MDI-Form/Adding-and-Removing-Items-from-the-Document-Container-Control.md @@ -9,38 +9,35 @@ documentation: ug # Adding and Removing Items in WPF DocumentContainer -This topic illustrates how to add and remove items from Document Container control. - -## Adding items - -Document Container allows the user to add new elements to its container(such as button, text block), using Items.Add method. Use the following code snippet, for calling this method. +This topic illustrates how to add and remove items from the DocumentContainer control. +## Adding Items +The DocumentContainer allows you to add new elements (such as a `Button` or `TextBlock`) to its container by using the `Items.Add` method. Use the following code snippet to add an item. {% tabs %} -{% highlight xaml %} - - +{% highlight XAML %} + + - - +