From a6fa1258ff9326067adf412308d1e2f288a50827 Mon Sep 17 00:00:00 2001 From: Madhavansf Date: Tue, 1 Sep 2026 17:50:22 +0530 Subject: [PATCH 1/7] Updated the Primary Keyword Correction for WPF menu and text input layout- #2650 --- wpf/MaskedTextBox/Appearance.md | 20 ++++----- wpf/MaskedTextBox/Getting-Started.md | 46 ++++++++++----------- wpf/MaskedTextBox/Input-Restriction.md | 34 +++++++-------- wpf/MaskedTextBox/Overview.md | 2 +- wpf/Radial-Menu/Appearance-and-Styling.md | 14 +++---- wpf/Radial-Menu/Getting-Started.md | 8 ++-- wpf/Radial-Menu/Icon.md | 6 +-- wpf/Radial-Menu/Layout-Types.md | 6 +-- wpf/Radial-Menu/Overview.md | 8 ++-- wpf/Radial-Menu/Populating-Color-Palette.md | 6 +-- wpf/Radial-Menu/Populating-Items.md | 16 +++---- wpf/Radial-Menu/ToolTip.md | 16 +++---- 12 files changed, 91 insertions(+), 91 deletions(-) diff --git a/wpf/MaskedTextBox/Appearance.md b/wpf/MaskedTextBox/Appearance.md index 793fcba6a9..741a8cd81b 100644 --- a/wpf/MaskedTextBox/Appearance.md +++ b/wpf/MaskedTextBox/Appearance.md @@ -9,11 +9,11 @@ documentation: ug # Appearance in WPF MaskedTextBox (SfMaskedEdit) -This section explains different UI customization and theming options available in [SfMaskedEdit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html). +This section explains different UI customization and theming options available in [WPF MaskedTextBox](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html). ## Setting the background -You can change the default background color and selection color of `SfMaskedEdit` by using the `Background` and `SelectionBrush` property. The default value of `Background` property is `White` and `SelectionBrush` property is `Royal Blue`. +You can change the default background color and selection color of `WPF MaskedTextBox` by using the `Background` and `SelectionBrush` property. The default value of `Background` property is `White` and `SelectionBrush` property is `Royal Blue`. {% tabs %} {% highlight XAML %} @@ -32,7 +32,7 @@ sfMaskedEdit.SelectionBrush = Brushes.Green; {% endhighlight %} {% endtabs %} -![Changing Background Color of WPF MaskedEdit](Appearence_Images/wpf-maskededit-background.png) +![Changing Background Color of WPF MaskedTextBox](Appearence_Images/wpf-maskededit-background.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/Appearance) in GitHub @@ -57,13 +57,13 @@ sfMaskedEdit.CaretBrush = Brushes.Red; {% endhighlight %} {% endtabs %} -![Changing Foreground Color of WPF MaskedEdit](Appearence_Images/wpf-maskededit-foreground.png) +![Changing Foreground Color of WPF MaskedTextBox](Appearence_Images/wpf-maskededit-foreground.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/Appearance) in GitHub ## Setting the border color -You can change the default border color of `SfMaskedEdit` by using the `BorderBrush` property. The default value of `BorderBrush` property is `Lavender`. +You can change the default border color of `WPF MaskedTextBox` by using the `BorderBrush` property. The default value of `BorderBrush` property is `Lavender`. {% tabs %} {% highlight XAML %} @@ -80,13 +80,13 @@ sfMaskedEdit.BorderBrush = Brushes.Blue; {% endhighlight %} {% endtabs %} -![Changing Border Color of WPF MaskedEdit](Appearence_Images/wpf-maskededit-border-color.png) +![Changing Border Color of WPF MaskedTextBox](Appearence_Images/wpf-maskededit-border-color.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/Appearance) in GitHub ## Change flow direction -You can change the flow direction of the `SfMaskedEdit` 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 `WPF MaskedTextBox` layout from right to left by setting the `FlowDirection` property value as `RightToLeft`. The default value of `FlowDirection` property is `LeftToRight`. {% tabs %} {% highlight XAML %} @@ -103,16 +103,16 @@ sfMaskedEdit.FlowDirection = FlowDirection.RightToLeft; {% endhighlight %} {% endtabs %} -![Changing Flow Direction of WPF MaskedEdit](Appearence_Images/wpf-maskededit-flow-direction.png) +![Changing Flow Direction of WPF MaskedTextBox](Appearence_Images/wpf-maskededit-flow-direction.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/Appearance) in GitHub ## Theme -SfMaskedEdit supports various built-in themes. Refer to the below links to apply themes for the SfMaskedEdit, +The WPF MaskedTextBox supports various built-in themes. Refer to the below links to apply themes for the WPF MaskedTextBox, * [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager) * [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme) - ![Applying Theme to WPF SfMaskedEdit](Getting-Started_images/wpf-maskededit-theme.png) + ![Applying Theme to WPF MaskedTextBox](Getting-Started_images/wpf-maskededit-theme.png) diff --git a/wpf/MaskedTextBox/Getting-Started.md b/wpf/MaskedTextBox/Getting-Started.md index 230f86bd51..1024e40a22 100644 --- a/wpf/MaskedTextBox/Getting-Started.md +++ b/wpf/MaskedTextBox/Getting-Started.md @@ -9,11 +9,11 @@ documentation: ug # Getting Started with WPF MaskedTextBox (SfMaskedEdit) -This section explains how to create a [WPF MaskedTextBox](https://www.syncfusion.com/wpf-controls/maskedtextbox) (SfMaskedEdit) and explains about its structure and features. +This section explains how to create a [WPF MaskedTextBox](https://www.syncfusion.com/wpf-controls/maskedtextbox) (WPF MaskedTextBox) and explains about its structure and features. ## Control Structure -![WPF MaskedEdit](Getting-Started_images/wpf-maskededit-structure.png) +![WPF MaskedTextBox](Getting-Started_images/wpf-maskededit-structure.png) ## Assembly deployment @@ -23,18 +23,18 @@ You can find more details about installing the NuGet package in a WPF applicatio [How to install nuget packages](https://help.syncfusion.com/wpf/installation/install-nuget-packages) -## Adding WPF SfMaskedEdit via designer +## Adding WPF MaskedTextBox via designer -You can add the `SfMaskedEdit` 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 MaskedTextBox` control to an application by dragging it from the toolbox to a view of the designer. The following dependent assembly will be added automatically. * Syncfusion.SfInput.WPF * Syncfusion.SfShared.WPF -![Dragging WPF MaskedEdit Control from Toolbox to Designer](Getting-Started_images/wpf-maskededit-toolbox.png) +![Dragging WPF MaskedTextBox Control from Toolbox to Designer](Getting-Started_images/wpf-maskededit-toolbox.png) -## Adding WPF SfMaskedEdit via XAML +## Adding WPF MaskedTextBox via XAML -To add the `SfMaskedEdit` control manually in XAML, follow these steps: +To add the `MaskedTextBox` 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, @@ -42,9 +42,9 @@ To add the `SfMaskedEdit` control manually in XAML, follow these steps: * Syncfusion.SfInput.WPF * Syncfusion.SfShared.WPF -3. Import Syncfusion® WPF schema **http://schemas.syncfusion.com/wpf** and declare the `SfMaskedEdit` control in XAML page. +3. Import Syncfusion® WPF schema **http://schemas.syncfusion.com/wpf** and declare the `MaskedTextBox` control in XAML page. -4. Declare the `SfMaskedEdit` control in XAML page. +4. Declare the `MaskedTextBox` control in XAML page. {% capture codesnippet1 %} {% tabs %} @@ -67,18 +67,18 @@ To add the `SfMaskedEdit` control manually in XAML, follow these steps: {% endcapture %} {{ codesnippet1 | OrderList_Indent_Level_1 }} -## Adding WPF SfMaskedEdit via C\# +## Adding WPF MaskedTextBox via C\# -To add the `SfMaskedEdit` control manually in C#, follow these steps: +To add the `MaskedTextBox` control manually in C#, follow these steps: 1. Create a new WPF application via Visual Studio. 2. Add the following assembly references to the project, * Syncfusion.SfInput.WPF * Syncfusion.SfShared.WPF -3. Include the required namespace and create an instance of `SfMaskedEdit` and add it to the window. +3. Include the required namespace and create an instance of `MaskedTextBox` and add it to the window. -4. Declare the `SfMaskedEdit` control using C#. +4. Declare the `MaskedTextBox` control using C#. {% capture codesnippet2 %} {% tabs %} @@ -105,7 +105,7 @@ public partial class MainWindow : Window { {% endcapture %} {{ codesnippet2 | OrderList_Indent_Level_1 }} -![WPF MaskedEdit Control](Getting-Started_images/wpf-maskededit-control.png) +![WPF MaskedTextBox Control](Getting-Started_images/wpf-maskededit-control.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/blob/master/Samples/Getting-Started) in GitHub @@ -130,9 +130,9 @@ sfMaskedEdit.Mask = @"-?\d+\.?\d*"; {% endhighlight %} {% endtabs %} -![WPF MaskedEdit displays Value in RegularExpression](MaskOptions_images/wpf-maskededit-negative-value.png) +![WPF MaskedTextBox displays Value in RegularExpression](MaskOptions_images/wpf-maskededit-negative-value.png) -Here, the `SfMaskedEdit` accept the positive and negative whole or float type numbers. +Here, the `WPF MaskedTextBox` accept the positive and negative whole or float type numbers. N> Please refer the [Restrict the user to enter valid data](https://help.syncfusion.com/wpf/maskedtextbox/input-restriction#restrict-the-user-to-enter-valid-data) page to know more about the various mask pattern with examples. @@ -140,7 +140,7 @@ N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtext ## Setting the value -You can set the value for the `SfMaskedEdit` by using the [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_Value) property. Based on the mask, the value of `Value` property is formatted. The default value of `Value` property is `null`. +You can set the value for the `WPF MaskedTextBox` by using the [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_Value) property. Based on the mask, the value of `Value` property is formatted. The default value of `Value` property is `null`. {% tabs %} {% highlight xaml %} @@ -161,7 +161,7 @@ sfMaskedEdit.Mask = @"\([0-9]\d{2}\) [0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![WPF MaskedEdit displays Value without Prompt and Literals](Working_with_SfMaskedEdit_images/wpf-maskededit-value.png) +![WPF MaskedTextBox displays Value without Prompt and Literals](Working_with_SfMaskedEdit_images/wpf-maskededit-value.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -193,7 +193,7 @@ sfMaskedEdit.Mask = @"\([0-9]\d{2}\) [0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![WPF MaskedEdit displays Value in Various Formats](Working_with_SfMaskedEdit_images/wpf-maskededit-value-format.png) +![WPF MaskedTextBox displays Value in Various Formats](Working_with_SfMaskedEdit_images/wpf-maskededit-value-format.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -216,7 +216,7 @@ sfMaskedEdit.ErrorBorderBrush = Brushes.Yellow; {% endhighlight %} {% endtabs %} -![WPF MaskedEdit displays Error Validation](Working_with_SfMaskedEdit_images/wpf-maskededit-error-validation.gif) +![WPF MaskedTextBox displays Error Validation](Working_with_SfMaskedEdit_images/wpf-maskededit-error-validation.gif) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -243,7 +243,7 @@ sfMaskedEdit.Mask = @"\+1 [0-9]\d{2}-[0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![WPF MaskedEdit displays Prompt Character](Working_with_SfMaskedEdit_images/wpf-maskededit-prompt-char.png) +![WPF MaskedTextBox displays Prompt Character](Working_with_SfMaskedEdit_images/wpf-maskededit-prompt-char.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -283,12 +283,12 @@ private void SfMaskedEdit_ValueChanged(object sender, EventArgs e) { ## Theme -SfMaskedEdit supports various built-in themes. Refer to the below links to apply themes for the SfMaskedEdit, +The WPF MaskedTextBox supports various built-in themes. Refer to the below links to apply themes for the The WPF MaskedTextBox, * [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager) * [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme) - ![Applying Theme to WPF MaskedEdit](Getting-Started_images/wpf-maskededit-theme.png) + ![Applying Theme to WPF MaskedTextBox](Getting-Started_images/wpf-maskededit-theme.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/Themes) in GitHub diff --git a/wpf/MaskedTextBox/Input-Restriction.md b/wpf/MaskedTextBox/Input-Restriction.md index 0501fd8b11..0d57377bcd 100644 --- a/wpf/MaskedTextBox/Input-Restriction.md +++ b/wpf/MaskedTextBox/Input-Restriction.md @@ -9,7 +9,7 @@ documentation: ug # Input Restriction in WPF MaskedTextBox (SfMaskedEdit) -This section explains accessing the [SfMaskedEdit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html) properties and events associated with it. +This section explains accessing the [The WPF MaskedTextBox](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html) properties and events associated with it. ## Restrict the user to enter valid data @@ -126,7 +126,7 @@ sfMaskedEdit.Mask = @"(?=123)\d{3}"; For the input mask `(?=123)\d{3}`. It allows first two digit. While entering the third digit, it will validate the regex and restrict the input. It allows the output only when the MaskText is “123” for this given input. -![WPF MaskedEdit displays Specific Values with Mask](MaskOptions_images/wpf-maskededit-mask-value.jpg) +![WPF MaskedTextBox displays Specific Values with Mask](MaskOptions_images/wpf-maskededit-mask-value.jpg) ### Restrict specific values @@ -151,7 +151,7 @@ sfMaskedEdit.Mask = @"(?!55)(?!000)(?!666)\d{3}"; For the input mask `(?!55)(?!000)(?!666)\d{3}` – `\d{3}` denotes that the output will be of 3 character length. `(?55)` denotes the value will not begin with `55`. `(?!000)(?!666)` denotes the output cannot be `000` or `666`. -![Restrict Specific Values with Mask in WPF MaskedEdit](MaskOptions_images/wpf-maskededit-value-restriction.jpg) +![Restrict Specific Values with Mask in WPF MaskedTextBox](MaskOptions_images/wpf-maskededit-value-restriction.jpg) ### Basic Mask examples @@ -264,7 +264,7 @@ N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtext ## Setting the value -You can set the value for the `SfMaskedEdit` by using the [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_Value) property. Based on the mask, the value of `Value` property is formatted. The default value of `Value` property is `null`. +You can set the value for the `The WPF MaskedTextBox` by using the [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_Value) property. Based on the mask, the value of `Value` property is formatted. The default value of `Value` property is `null`. {% tabs %} {% highlight xaml %} @@ -285,7 +285,7 @@ sfMaskedEdit.Mask = @"\([0-9]\d{2}\) [0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![WPF MaskedEdit displays Value without Prompt and Literals](Working_with_SfMaskedEdit_images/wpf-maskededit-value.png) +![WPF MaskedTextBox displays Value without Prompt and Literals](Working_with_SfMaskedEdit_images/wpf-maskededit-value.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -321,7 +321,7 @@ sfMaskedEdit.Mask = @"\([0-9]\d{2}\) [0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![WPF MaskedEdit displays Value in Various Formats](Working_with_SfMaskedEdit_images/wpf-maskededit-value-format.png) +![WPF MaskedTextBox displays Value in Various Formats](Working_with_SfMaskedEdit_images/wpf-maskededit-value-format.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -348,7 +348,7 @@ sfMaskedEdit.Mask = @"\([0-9]\d{2}\) [0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![WPF MaskedEdit displays Value with Literals](Working_with_SfMaskedEdit_images/wpf-maskededit-with-literals.png) +![WPF MaskedTextBox displays Value with Literals](Working_with_SfMaskedEdit_images/wpf-maskededit-with-literals.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -375,7 +375,7 @@ sfMaskedEdit.Mask = @"\([0-9]\d{2}\) [0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![WPF MaskedEdit displays Value with Prompt Character](Working_with_SfMaskedEdit_images/wpf-maskededit-with-prompt.png) +![WPF MaskedTextBox displays Value with Prompt Character](Working_with_SfMaskedEdit_images/wpf-maskededit-with-prompt.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -402,7 +402,7 @@ sfMaskedEdit.Mask = @"\([0-9]\d{2}\) [0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![WPF MaskedEdit displays Value with Prompt and Literals Character](Working_with_SfMaskedEdit_images/wpf-maskededit-with-prompt-and-iterals.png) +![WPF MaskedTextBox displays Value with Prompt and Literals Character](Working_with_SfMaskedEdit_images/wpf-maskededit-with-prompt-and-iterals.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -433,7 +433,7 @@ sfMaskedEdit.Mask = @"\+1 [0-9]\d{2}-[0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![Validating Input on Key Press in WPF MaskedEdit](Working_with_SfMaskedEdit_images/wpf-maskededit-input-validation.png) +![Validating Input on Key Press in WPF MaskedTextBox](Working_with_SfMaskedEdit_images/wpf-maskededit-input-validation.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -460,7 +460,7 @@ sfMaskedEdit.Mask = @"\+1 [0-9]\d{2}-[0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![Validating Input without Focus in WPF MaskedEdit](Working_with_SfMaskedEdit_images/wpf-maskededit-lostfocus.png) +![Validating Input without Focus in WPF MaskedTextBox](Working_with_SfMaskedEdit_images/wpf-maskededit-lostfocus.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -506,7 +506,7 @@ private void SfMaskedEdit_LostFocus(object sender, RoutedEventArgs e) { {% endhighlight %} {% endtabs %} -![WPF MaskedEdit displays Validation Result](Working_with_SfMaskedEdit_images/wpf-maskededit-validation-result.png) +![WPF MaskedTextBox displays Validation Result](Working_with_SfMaskedEdit_images/wpf-maskededit-validation-result.png) ## Indicates error on invalid input @@ -527,7 +527,7 @@ sfMaskedEdit.ErrorBorderBrush = Brushes.Yellow; {% endhighlight %} {% endtabs %} -![WPF MaskedEdit displays Error Validation](Working_with_SfMaskedEdit_images/wpf-maskededit-error-validation.gif) +![WPF MaskedTextBox displays Error Validation](Working_with_SfMaskedEdit_images/wpf-maskededit-error-validation.gif) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -554,7 +554,7 @@ sfMaskedEdit.Mask = @"\+1 [0-9]\d{2}-[0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![WPF MaskedEdit displays Prompt Character](Working_with_SfMaskedEdit_images/wpf-maskededit-prompt-char.png) +![WPF MaskedTextBox displays Prompt Character](Working_with_SfMaskedEdit_images/wpf-maskededit-prompt-char.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -584,7 +584,7 @@ sfMaskedEdit.Mask = @"\+1 [0-9]\d{2}-[0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![WPF MaskedEdit displays Prompt Character](Working_with_SfMaskedEdit_images/wpf-maskededit-prompt.png) +![WPF MaskedTextBox displays Prompt Character](Working_with_SfMaskedEdit_images/wpf-maskededit-prompt.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -607,7 +607,7 @@ sfMaskedEdit.Watermark = "Type here"; {% endhighlight %} {% endtabs %} -![WPF MaskedEdit with Watermark Text](Working_with_SfMaskedEdit_images/wpf-maskededit-watermark-text.jpg) +![WPF MaskedTextBox with Watermark Text](Working_with_SfMaskedEdit_images/wpf-maskededit-watermark-text.jpg) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -635,7 +635,7 @@ You can change the template of the `Watermark` by using the [WatermarkTemplate]( {% endhighlight %} {% endtabs %} -![Customizing Watermark Text in WPF MaskedEdit](Working_with_SfMaskedEdit_images/wpf-maskededit-watermark-customization.png) +![Customizing Watermark Text in WPF MaskedTextBox](Working_with_SfMaskedEdit_images/wpf-maskededit-watermark-customization.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub diff --git a/wpf/MaskedTextBox/Overview.md b/wpf/MaskedTextBox/Overview.md index 7f0f4af1b6..c1cc04a597 100644 --- a/wpf/MaskedTextBox/Overview.md +++ b/wpf/MaskedTextBox/Overview.md @@ -11,7 +11,7 @@ documentation: ug The [WPF MaskedTextBox](https://www.syncfusion.com/wpf-controls/maskedtextbox) (SfMaskedEdit) is an advanced version of the input control that restricts your input of certain types such as characters, text, and numbers by using a mask pattern. This control is used to create a template for providing information such as telephone numbers, IP addresses, product IDs, and so on. -![Overview of WPF MaskedEdit](Overview_images/wpf-maskededit.jpg) +![Overview of WPF MaskedTextBox](Overview_images/wpf-maskededit.jpg) ## Key features diff --git a/wpf/Radial-Menu/Appearance-and-Styling.md b/wpf/Radial-Menu/Appearance-and-Styling.md index 6058a450d7..865a41237e 100644 --- a/wpf/Radial-Menu/Appearance-and-Styling.md +++ b/wpf/Radial-Menu/Appearance-and-Styling.md @@ -1,7 +1,7 @@ --- layout: post -title: Appearance and Styling in WPF RadialMenu | Syncfusion® -description: Customize the appearance of the WPF RadialMenu using radius settings, rim styling, navigation buttons, and item background customization. +title: Appearance and Styling in WPF Radial Menu | Syncfusion® +description: Customize the appearance of the WPF Radial Menu using radius settings, rim styling, navigation buttons, and item background customization. platform: wpf control: SfRadialMenu documentation: ug @@ -11,7 +11,7 @@ documentation: ug ## Radius -RadiusX and RadiusY properties in the Radial Menu can be used to define the X and Y axis radius to render the control. +RadiusX and RadiusY properties in the WPF Radial Menu can be used to define the X and Y axis radius to render the control. {%highlight xaml%} @@ -56,7 +56,7 @@ RimBackground property used to fill the outer rim (outer circle). -RadialMenu outer ring filled with color +The WPF Radial Menu outer ring filled with color @@ -123,7 +123,7 @@ The RimHoverBrush property can be used to fill the expander rim while the pointe ## IsExpanderVisible -Expander arrow in the OuterRim of `SfRadialMenu` visibility can be changed by `IsExpanderVisible` property of `SfRadialMenuItem`. By default, `IsExpanderVisible` value is True. +Expander arrow in the OuterRim of `WPF Radial Menu` visibility can be changed by `IsExpanderVisible` property of `SfRadialMenuItem`. By default, `IsExpanderVisible` value is True. {%highlight xaml%} @@ -151,7 +151,7 @@ Expander arrow in the OuterRim of `SfRadialMenu` visibility can be changed by `I ## RimRadiusFactor -RimRadiusFactor property of Radial Menu can be used to set the radius of the items panel. Lowest values to this factor increases the thickness of the outer rim. Highest values to this factor decreases the thickness of the outer rim. +RimRadiusFactor property of WPF Radial Menu can be used to set the radius of the items panel. Lowest values to this factor increases the thickness of the outer rim. Highest values to this factor decreases the thickness of the outer rim. {%highlight xaml%} @@ -168,7 +168,7 @@ RimRadiusFactor property of Radial Menu can be used to set the radius of the ite ## Navigation Button Style -The navigation button displayed in the center of radial menu can be styled using NavigationButtonStyle property. +The navigation button displayed in the center of WPF Radial Menu can be styled using NavigationButtonStyle property. {%highlight xaml%} diff --git a/wpf/Radial-Menu/Getting-Started.md b/wpf/Radial-Menu/Getting-Started.md index 737907b84b..e36aacde02 100644 --- a/wpf/Radial-Menu/Getting-Started.md +++ b/wpf/Radial-Menu/Getting-Started.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting Started with WPF RadialMenu | Syncfusion® -description: Learn how to get started with the Syncfusion® WPF RadialMenu control. Explore setup, features, examples, and customization options. +title: Getting Started with WPF Radial Menu | Syncfusion® +description: Learn how to get started with the Syncfusion® WPF Radial Menu control. Explore setup, features, examples, and customization options. platform: wpf control: SfRadialMenu documentation: ug @@ -13,7 +13,7 @@ Namespace : Syncfusion.Windows.Controls.Navigation Assembly : Syncfusion.SfRadialMenu.WPF (in Syncfusion.SfRadialMenu.WPF.dll) -The following code sample shows how to create the RadialMenu from code-behind and XAML. +The following code sample shows how to create the WPF Radial Menu from code-behind and XAML. {%tabs%} {%highlight xaml%} @@ -70,7 +70,7 @@ radialMenu.Items.Add(paste); ## Theme -Radial Menu supports various built-in themes. Refer to the below links to apply themes for the Radial Menu, +The WPF Radial Menu supports various built-in themes. Refer to the below links to apply themes for the WPF Radial Menu, * [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager) diff --git a/wpf/Radial-Menu/Icon.md b/wpf/Radial-Menu/Icon.md index 7555386ac2..1afaea36f2 100644 --- a/wpf/Radial-Menu/Icon.md +++ b/wpf/Radial-Menu/Icon.md @@ -1,7 +1,7 @@ --- layout: post -title: Icon Customization in WPF RadialMenu | Syncfusion® -description: Customize the icon displayed in the center of the WPF RadialMenu to provide a distinctive navigation experience. +title: Icon Customization in WPF Radial Menu | Syncfusion® +description: Customize the icon displayed in the center of the WPF Radial Menu to provide a distinctive navigation experience. platform: wpf control: SfRadialMenu documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Icon Customization in WPF Radial Menu (SfRadialMenu) -The Icon property of the RadialMenu is used to customize the icon displayed in the center of RadialMenu circle. +The Icon property of the WPF Radial Menu is used to customize the icon displayed in the center of WPF Radial Menu circle. {%highlight xaml%} diff --git a/wpf/Radial-Menu/Layout-Types.md b/wpf/Radial-Menu/Layout-Types.md index 52520d26b8..fdc6ed6356 100644 --- a/wpf/Radial-Menu/Layout-Types.md +++ b/wpf/Radial-Menu/Layout-Types.md @@ -1,6 +1,6 @@ --- layout: post -title: Layout Types in WPF RadialMenu | Syncfusion® +title: Layout Types in WPF Radial Menu | Syncfusion® description: Configure default and custom radial layouts using visible segment counts, segment indexes, and circular panel arrangements. platform: wpf control: SfRadialMenu @@ -8,7 +8,7 @@ documentation: ug --- # Layout Types in WPF Radial Menu (SfRadialMenu) -There are two different layout types available for SfRadialMenu. +There are two different layout types available for WPF Radial Menu. * Default * Custom @@ -17,7 +17,7 @@ There are two different layout types available for SfRadialMenu. ## Default -Number of segments in the panel is determined by children count in the level. Hence segment count in each hierarchical level differs. RadialMenuItem is arranged in the sequential order as added in the RadialMenu. +Number of segments in the panel is determined by children count in the level. Hence segment count in each hierarchical level differs. RadialMenuItem is arranged in the sequential order as added in the WPF Radial Menu. ## Custom diff --git a/wpf/Radial-Menu/Overview.md b/wpf/Radial-Menu/Overview.md index a2e63c66e3..399825dc89 100644 --- a/wpf/Radial-Menu/Overview.md +++ b/wpf/Radial-Menu/Overview.md @@ -1,15 +1,15 @@ --- layout: post -title: About Syncfusion® WPF RadialMenu Control | Syncfusion® -description: Learn about the introduction of Syncfusion® Essential Studio WPF RadialMenu (SfRadialMenu) control and more details. +title: About Syncfusion® WPF Radial Menu Control | Syncfusion® +description: Learn about the introduction of Syncfusion® Essential Studio WPF Radial Menu (SfRadialMenu) control and more details. platform: wpf control: SfRadialMenu documentation: ug --- -# About Syncfusion® WPF RadialMenu (SfRadialMenu) Control +# About Syncfusion® WPF Radial Menu (SfRadialMenu) Control -The Radial Menu displays a hierarchical menu in a circular layout. Typically used as a context menu, it can expose more menu items in the same space than traditional menus. +The WPF Radial Menu displays a hierarchical menu in a circular layout. Typically used as a context menu, it can expose more menu items in the same space than traditional menus. ## Key Features diff --git a/wpf/Radial-Menu/Populating-Color-Palette.md b/wpf/Radial-Menu/Populating-Color-Palette.md index fea6dac1c8..72d2fc7e35 100644 --- a/wpf/Radial-Menu/Populating-Color-Palette.md +++ b/wpf/Radial-Menu/Populating-Color-Palette.md @@ -1,7 +1,7 @@ --- layout: post -title: Color Palette in WPF RadialMenu | Syncfusion® -description: Create interactive color palettes using radial color items to display and select colors within the WPF RadialMenu. +title: Color Palette in WPF Radial Menu | Syncfusion® +description: Create interactive color palettes using radial color items to display and select colors within the WPF Radial Menu. platform: wpf control: SfRadialMenu documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Color Palette in WPF Radial Menu (SfRadialMenu) -Color Palette can be formed in Radial Menu with the Radial Color Items. +Color Palette can be formed in WPF Radial Menu with the Radial Color Items. {%highlight xaml%} diff --git a/wpf/Radial-Menu/Populating-Items.md b/wpf/Radial-Menu/Populating-Items.md index e7d764a2ed..1c5905f583 100644 --- a/wpf/Radial-Menu/Populating-Items.md +++ b/wpf/Radial-Menu/Populating-Items.md @@ -1,7 +1,7 @@ --- layout: post -title: Populate Items in WPF RadialMenu | Syncfusion® -description: Populate RadialMenu items from business objects using data binding, display member paths, commands, and item templates. +title: Populate Items in WPF Radial Menu | Syncfusion® +description: Populate WPF Radial Menu items from business objects using data binding, display member paths, commands, and item templates. platform: wpf control: SfRadialMenu documentation: ug @@ -11,7 +11,7 @@ documentation: ug ## Items Source -Radial menu items can be populated with the business object collection. Let us create a RadialMenu which will show the list of Application commands. +Radial menu items can be populated with the business object collection. Let us create a WPF Radial Menu which will show the list of Application commands. The Application command model look likes below. @@ -86,7 +86,7 @@ Populate the Application command collection as follows. {%endhighlight%} -Bind the Application command collection to the ItemsSource property of the RadialMenu control. +Bind the Application command collection to the ItemsSource property of the WPF Radial Menu control. {%highlight xaml%} @@ -96,7 +96,7 @@ Bind the Application command collection to the ItemsSource property of the Radia {%endhighlight%} -This will populate the RadialMenu as shown in the image below. +This will populate the WPF Radial Menu as shown in the image below. @@ -110,7 +110,7 @@ This will populate the RadialMenu as shown in the image below. ## Display Member Path -DisplayMemberPath property of the Radial Menu used to define which business model property needs to be displayed inside the header of the Radial Menu items. +DisplayMemberPath property of the WPF Radial Menu used to define which business model property needs to be displayed inside the header of the WPF Radial Menu items. {%highlight xaml%} @@ -135,7 +135,7 @@ Displaying member path ## Command Path -CommandPath property of the Radial Menu can be used to bind the command in the business object to the radial menu item when items are populated using data binding. +CommandPath property of the WPF Radial Menu can be used to bind the command in the business object to the WPF Radial Menu item when items are populated using data binding. {%highlight xaml%} @@ -152,7 +152,7 @@ CommandPath property of the Radial Menu can be used to bind the command in the b ## Item Template -ItemTemplate property of the RadialMenu can be used to customize the header part of the radial menu items. +ItemTemplate property of the WPF Radial Menu can be used to customize the header part of the WPF Radial Menu items. {%highlight xaml%} diff --git a/wpf/Radial-Menu/ToolTip.md b/wpf/Radial-Menu/ToolTip.md index 28f9989aa2..af98ae5dc5 100644 --- a/wpf/Radial-Menu/ToolTip.md +++ b/wpf/Radial-Menu/ToolTip.md @@ -1,7 +1,7 @@ --- layout: post -title: ToolTips in WPF RadialMenu | Syncfusion® -description: Display tooltips for radial menu items and customize tooltip placement around the WPF RadialMenu control. +title: ToolTips in WPF Radial Menu | Syncfusion® +description: Display tooltips for WPF Radial Menu items and customize tooltip placement around the WPF Radial Menu control. platform: wpf control: SfRadialMenu documentation: ug @@ -9,17 +9,17 @@ documentation: ug # ToolTips in WPF Radial Menu (SfRadialMenu) -Tooltip support available for the radial menu items. This will show when mouse over the corresponding item. +Tooltip support available for the WPF Radial Menu items. This will show when mouse over the corresponding item. ToolTip Placement -Position of the tooltip displayed relative to the Radial Menu can be customized using ToolTipPlacement property. This have the following options. +Position of the tooltip displayed relative to the WPF Radial Menu can be customized using ToolTipPlacement property. This have the following options. * None: Tooltip is hidden from the display. -* Left: Tooltip is displayed left of the Radial Menu. -* Top: Tooltip is displayed on top of the Radial Menu. -* Right: Tooltip is displayed right of the Radial Menu. -* Bottom: Tooltip is displayed at the bottom of the Radial Menu. +* Left: Tooltip is displayed left of the WPF Radial Menu. +* Top: Tooltip is displayed on top of the WPF Radial Menu. +* Right: Tooltip is displayed right of the WPF Radial Menu. +* Bottom: Tooltip is displayed at the bottom of the WPF Radial Menu. {%highlight xaml%} From e97ae594a60baec0aebf469b1778500d1a2f16e6 Mon Sep 17 00:00:00 2001 From: Madhavansf Date: Wed, 2 Sep 2026 13:40:07 +0530 Subject: [PATCH 2/7] masked text box and radial menu updated --- wpf/MaskedTextBox/Appearance.md | 20 +++++------ wpf/MaskedTextBox/Getting-Started.md | 42 +++++++++++------------ wpf/MaskedTextBox/Input-Restriction.md | 34 +++++++++--------- wpf/MaskedTextBox/Overview.md | 4 +-- wpf/Radial-Menu/Appearance-and-Styling.md | 2 +- wpf/Radial-Menu/Getting-Started.md | 2 +- wpf/Radial-Menu/Populating-Items.md | 6 ++-- wpf/Radial-Menu/ToolTip.md | 12 +++---- 8 files changed, 61 insertions(+), 61 deletions(-) diff --git a/wpf/MaskedTextBox/Appearance.md b/wpf/MaskedTextBox/Appearance.md index 741a8cd81b..64675202a9 100644 --- a/wpf/MaskedTextBox/Appearance.md +++ b/wpf/MaskedTextBox/Appearance.md @@ -9,11 +9,11 @@ documentation: ug # Appearance in WPF MaskedTextBox (SfMaskedEdit) -This section explains different UI customization and theming options available in [WPF MaskedTextBox](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html). +This section explains different UI customization and theming options available in [SfMaskedEdit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html). ## Setting the background -You can change the default background color and selection color of `WPF MaskedTextBox` by using the `Background` and `SelectionBrush` property. The default value of `Background` property is `White` and `SelectionBrush` property is `Royal Blue`. +You can change the default background color and selection color of `SfMaskedEdit` by using the `Background` and `SelectionBrush` property. The default value of `Background` property is `White` and `SelectionBrush` property is `Royal Blue`. {% tabs %} {% highlight XAML %} @@ -32,7 +32,7 @@ sfMaskedEdit.SelectionBrush = Brushes.Green; {% endhighlight %} {% endtabs %} -![Changing Background Color of WPF MaskedTextBox](Appearence_Images/wpf-maskededit-background.png) +![Changing Background Color of SfMaskedEdit](Appearence_Images/wpf-maskededit-background.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/Appearance) in GitHub @@ -57,13 +57,13 @@ sfMaskedEdit.CaretBrush = Brushes.Red; {% endhighlight %} {% endtabs %} -![Changing Foreground Color of WPF MaskedTextBox](Appearence_Images/wpf-maskededit-foreground.png) +![Changing Foreground Color of SfMaskedEdit](Appearence_Images/wpf-maskededit-foreground.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/Appearance) in GitHub ## Setting the border color -You can change the default border color of `WPF MaskedTextBox` by using the `BorderBrush` property. The default value of `BorderBrush` property is `Lavender`. +You can change the default border color of `SfMaskedEdit` by using the `BorderBrush` property. The default value of `BorderBrush` property is `Lavender`. {% tabs %} {% highlight XAML %} @@ -80,13 +80,13 @@ sfMaskedEdit.BorderBrush = Brushes.Blue; {% endhighlight %} {% endtabs %} -![Changing Border Color of WPF MaskedTextBox](Appearence_Images/wpf-maskededit-border-color.png) +![Changing Border Color of SfMaskedEdit](Appearence_Images/wpf-maskededit-border-color.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/Appearance) in GitHub ## Change flow direction -You can change the flow direction of the `WPF MaskedTextBox` 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 `SfMaskedEdit` layout from right to left by setting the `FlowDirection` property value as `RightToLeft`. The default value of `FlowDirection` property is `LeftToRight`. {% tabs %} {% highlight XAML %} @@ -103,16 +103,16 @@ sfMaskedEdit.FlowDirection = FlowDirection.RightToLeft; {% endhighlight %} {% endtabs %} -![Changing Flow Direction of WPF MaskedTextBox](Appearence_Images/wpf-maskededit-flow-direction.png) +![Changing Flow Direction of SfMaskedEdit](Appearence_Images/wpf-maskededit-flow-direction.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/Appearance) in GitHub ## Theme -The WPF MaskedTextBox supports various built-in themes. Refer to the below links to apply themes for the WPF MaskedTextBox, +The WPF MaskedTextBox supports various built-in themes. Refer to the following links to apply them: * [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager) * [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme) - ![Applying Theme to WPF MaskedTextBox](Getting-Started_images/wpf-maskededit-theme.png) + ![Applying Theme to SfMaskedEdit](Getting-Started_images/wpf-maskededit-theme.png) diff --git a/wpf/MaskedTextBox/Getting-Started.md b/wpf/MaskedTextBox/Getting-Started.md index 1024e40a22..cebe518b3e 100644 --- a/wpf/MaskedTextBox/Getting-Started.md +++ b/wpf/MaskedTextBox/Getting-Started.md @@ -9,11 +9,11 @@ documentation: ug # Getting Started with WPF MaskedTextBox (SfMaskedEdit) -This section explains how to create a [WPF MaskedTextBox](https://www.syncfusion.com/wpf-controls/maskedtextbox) (WPF MaskedTextBox) and explains about its structure and features. +This section explains how to create a [SfMaskedEdit](https://www.syncfusion.com/wpf-controls/maskedtextbox) and describes its structure and features. ## Control Structure -![WPF MaskedTextBox](Getting-Started_images/wpf-maskededit-structure.png) +![SfMaskedEdit](Getting-Started_images/wpf-maskededit-structure.png) ## Assembly deployment @@ -25,16 +25,16 @@ You can find more details about installing the NuGet package in a WPF applicatio ## Adding WPF MaskedTextBox via designer -You can add the `WPF MaskedTextBox` 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 `SfMaskedEdit` control to an application by dragging it from the toolbox to a view of the designer. The following dependent assembly will be added automatically. * Syncfusion.SfInput.WPF * Syncfusion.SfShared.WPF -![Dragging WPF MaskedTextBox Control from Toolbox to Designer](Getting-Started_images/wpf-maskededit-toolbox.png) +![Dragging SfMaskedEdit Control from Toolbox to Designer](Getting-Started_images/wpf-maskededit-toolbox.png) ## Adding WPF MaskedTextBox via XAML -To add the `MaskedTextBox` control manually in XAML, follow these steps: +To add the `SfMaskedEdit` 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, @@ -42,9 +42,9 @@ To add the `MaskedTextBox` control manually in XAML, follow these steps: * Syncfusion.SfInput.WPF * Syncfusion.SfShared.WPF -3. Import Syncfusion® WPF schema **http://schemas.syncfusion.com/wpf** and declare the `MaskedTextBox` control in XAML page. +3. Import Syncfusion® WPF schema **http://schemas.syncfusion.com/wpf** and declare the `SfMaskedEdit` control in XAML page. -4. Declare the `MaskedTextBox` control in XAML page. +4. Declare the `SfMaskedEdit` control in XAML page. {% capture codesnippet1 %} {% tabs %} @@ -67,18 +67,18 @@ To add the `MaskedTextBox` control manually in XAML, follow these steps: {% endcapture %} {{ codesnippet1 | OrderList_Indent_Level_1 }} -## Adding WPF MaskedTextBox via C\# +## Adding WPF MaskedTextBox through C\# -To add the `MaskedTextBox` control manually in C#, follow these steps: +To add the `SfMaskedEdit` control manually in C#, follow these steps: 1. Create a new WPF application via Visual Studio. 2. Add the following assembly references to the project, * Syncfusion.SfInput.WPF * Syncfusion.SfShared.WPF -3. Include the required namespace and create an instance of `MaskedTextBox` and add it to the window. +3. Include the required namespace and create an instance of `SfMaskedEdit` and add it to the window. -4. Declare the `MaskedTextBox` control using C#. +4. Declare the `SfMaskedEdit` control using C#. {% capture codesnippet2 %} {% tabs %} @@ -105,7 +105,7 @@ public partial class MainWindow : Window { {% endcapture %} {{ codesnippet2 | OrderList_Indent_Level_1 }} -![WPF MaskedTextBox Control](Getting-Started_images/wpf-maskededit-control.png) +![SfMaskedEdit Control](Getting-Started_images/wpf-maskededit-control.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/blob/master/Samples/Getting-Started) in GitHub @@ -130,9 +130,9 @@ sfMaskedEdit.Mask = @"-?\d+\.?\d*"; {% endhighlight %} {% endtabs %} -![WPF MaskedTextBox displays Value in RegularExpression](MaskOptions_images/wpf-maskededit-negative-value.png) +![SfMaskedEdit displays Value in RegularExpression](MaskOptions_images/wpf-maskededit-negative-value.png) -Here, the `WPF MaskedTextBox` accept the positive and negative whole or float type numbers. +Here, the SfMaskedEdit accept the positive and negative whole or float type numbers. N> Please refer the [Restrict the user to enter valid data](https://help.syncfusion.com/wpf/maskedtextbox/input-restriction#restrict-the-user-to-enter-valid-data) page to know more about the various mask pattern with examples. @@ -140,7 +140,7 @@ N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtext ## Setting the value -You can set the value for the `WPF MaskedTextBox` by using the [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_Value) property. Based on the mask, the value of `Value` property is formatted. The default value of `Value` property is `null`. +You can set the value for the `SfMaskedEdit` by using the [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_Value) property. Based on the mask, the value of `Value` property is formatted. The default value of `Value` property is `null`. {% tabs %} {% highlight xaml %} @@ -161,7 +161,7 @@ sfMaskedEdit.Mask = @"\([0-9]\d{2}\) [0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![WPF MaskedTextBox displays Value without Prompt and Literals](Working_with_SfMaskedEdit_images/wpf-maskededit-value.png) +![SfMaskedEdit displays Value without Prompt and Literals](Working_with_SfMaskedEdit_images/wpf-maskededit-value.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -193,7 +193,7 @@ sfMaskedEdit.Mask = @"\([0-9]\d{2}\) [0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![WPF MaskedTextBox displays Value in Various Formats](Working_with_SfMaskedEdit_images/wpf-maskededit-value-format.png) +![SfMaskedEdit displays Value in Various Formats](Working_with_SfMaskedEdit_images/wpf-maskededit-value-format.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -216,7 +216,7 @@ sfMaskedEdit.ErrorBorderBrush = Brushes.Yellow; {% endhighlight %} {% endtabs %} -![WPF MaskedTextBox displays Error Validation](Working_with_SfMaskedEdit_images/wpf-maskededit-error-validation.gif) +![SfMaskedEdit displays Error Validation](Working_with_SfMaskedEdit_images/wpf-maskededit-error-validation.gif) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -243,7 +243,7 @@ sfMaskedEdit.Mask = @"\+1 [0-9]\d{2}-[0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![WPF MaskedTextBox displays Prompt Character](Working_with_SfMaskedEdit_images/wpf-maskededit-prompt-char.png) +![SfMaskedEdit displays Prompt Character](Working_with_SfMaskedEdit_images/wpf-maskededit-prompt-char.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -283,12 +283,12 @@ private void SfMaskedEdit_ValueChanged(object sender, EventArgs e) { ## Theme -The WPF MaskedTextBox supports various built-in themes. Refer to the below links to apply themes for the The WPF MaskedTextBox, +The WPF MaskedTextBox supports various built-in themes. Refer to the following links to apply them. * [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager) * [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme) - ![Applying Theme to WPF MaskedTextBox](Getting-Started_images/wpf-maskededit-theme.png) + ![Applying Theme to SfMaskedEdit](Getting-Started_images/wpf-maskededit-theme.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/Themes) in GitHub diff --git a/wpf/MaskedTextBox/Input-Restriction.md b/wpf/MaskedTextBox/Input-Restriction.md index 0d57377bcd..6ff7d447e8 100644 --- a/wpf/MaskedTextBox/Input-Restriction.md +++ b/wpf/MaskedTextBox/Input-Restriction.md @@ -9,7 +9,7 @@ documentation: ug # Input Restriction in WPF MaskedTextBox (SfMaskedEdit) -This section explains accessing the [The WPF MaskedTextBox](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html) properties and events associated with it. +This section explains accessing the [SfMaskedEdit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html) properties and events associated with it. ## Restrict the user to enter valid data @@ -126,7 +126,7 @@ sfMaskedEdit.Mask = @"(?=123)\d{3}"; For the input mask `(?=123)\d{3}`. It allows first two digit. While entering the third digit, it will validate the regex and restrict the input. It allows the output only when the MaskText is “123” for this given input. -![WPF MaskedTextBox displays Specific Values with Mask](MaskOptions_images/wpf-maskededit-mask-value.jpg) +![SfMaskedEdit displays Specific Values with Mask](MaskOptions_images/wpf-maskededit-mask-value.jpg) ### Restrict specific values @@ -151,7 +151,7 @@ sfMaskedEdit.Mask = @"(?!55)(?!000)(?!666)\d{3}"; For the input mask `(?!55)(?!000)(?!666)\d{3}` – `\d{3}` denotes that the output will be of 3 character length. `(?55)` denotes the value will not begin with `55`. `(?!000)(?!666)` denotes the output cannot be `000` or `666`. -![Restrict Specific Values with Mask in WPF MaskedTextBox](MaskOptions_images/wpf-maskededit-value-restriction.jpg) +![Restrict Specific Values with Mask in SfMaskedEdit](MaskOptions_images/wpf-maskededit-value-restriction.jpg) ### Basic Mask examples @@ -264,7 +264,7 @@ N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtext ## Setting the value -You can set the value for the `The WPF MaskedTextBox` by using the [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_Value) property. Based on the mask, the value of `Value` property is formatted. The default value of `Value` property is `null`. +You can set the value for the `SfMaskedEdit` by using the [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_Value) property. Based on the mask, the value of `Value` property is formatted. The default value of `Value` property is `null`. {% tabs %} {% highlight xaml %} @@ -285,7 +285,7 @@ sfMaskedEdit.Mask = @"\([0-9]\d{2}\) [0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![WPF MaskedTextBox displays Value without Prompt and Literals](Working_with_SfMaskedEdit_images/wpf-maskededit-value.png) +![SfMaskedEdit displays Value without Prompt and Literals](Working_with_SfMaskedEdit_images/wpf-maskededit-value.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -321,7 +321,7 @@ sfMaskedEdit.Mask = @"\([0-9]\d{2}\) [0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![WPF MaskedTextBox displays Value in Various Formats](Working_with_SfMaskedEdit_images/wpf-maskededit-value-format.png) +![SfMaskedEdit displays Value in Various Formats](Working_with_SfMaskedEdit_images/wpf-maskededit-value-format.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -348,7 +348,7 @@ sfMaskedEdit.Mask = @"\([0-9]\d{2}\) [0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![WPF MaskedTextBox displays Value with Literals](Working_with_SfMaskedEdit_images/wpf-maskededit-with-literals.png) +![SfMaskedEdit displays Value with Literals](Working_with_SfMaskedEdit_images/wpf-maskededit-with-literals.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -375,7 +375,7 @@ sfMaskedEdit.Mask = @"\([0-9]\d{2}\) [0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![WPF MaskedTextBox displays Value with Prompt Character](Working_with_SfMaskedEdit_images/wpf-maskededit-with-prompt.png) +![SfMaskedEdit displays Value with Prompt Character](Working_with_SfMaskedEdit_images/wpf-maskededit-with-prompt.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -402,7 +402,7 @@ sfMaskedEdit.Mask = @"\([0-9]\d{2}\) [0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![WPF MaskedTextBox displays Value with Prompt and Literals Character](Working_with_SfMaskedEdit_images/wpf-maskededit-with-prompt-and-iterals.png) +![SfMaskedEdit displays Value with Prompt and Literals Character](Working_with_SfMaskedEdit_images/wpf-maskededit-with-prompt-and-iterals.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -433,7 +433,7 @@ sfMaskedEdit.Mask = @"\+1 [0-9]\d{2}-[0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![Validating Input on Key Press in WPF MaskedTextBox](Working_with_SfMaskedEdit_images/wpf-maskededit-input-validation.png) +![Validating Input on Key Press in SfMaskedEdit](Working_with_SfMaskedEdit_images/wpf-maskededit-input-validation.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -460,7 +460,7 @@ sfMaskedEdit.Mask = @"\+1 [0-9]\d{2}-[0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![Validating Input without Focus in WPF MaskedTextBox](Working_with_SfMaskedEdit_images/wpf-maskededit-lostfocus.png) +![Validating Input without Focus in SfMaskedEdit](Working_with_SfMaskedEdit_images/wpf-maskededit-lostfocus.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -506,7 +506,7 @@ private void SfMaskedEdit_LostFocus(object sender, RoutedEventArgs e) { {% endhighlight %} {% endtabs %} -![WPF MaskedTextBox displays Validation Result](Working_with_SfMaskedEdit_images/wpf-maskededit-validation-result.png) +![SfMaskedEdit displays Validation Result](Working_with_SfMaskedEdit_images/wpf-maskededit-validation-result.png) ## Indicates error on invalid input @@ -527,7 +527,7 @@ sfMaskedEdit.ErrorBorderBrush = Brushes.Yellow; {% endhighlight %} {% endtabs %} -![WPF MaskedTextBox displays Error Validation](Working_with_SfMaskedEdit_images/wpf-maskededit-error-validation.gif) +![SfMaskedEdit displays Error Validation](Working_with_SfMaskedEdit_images/wpf-maskededit-error-validation.gif) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -554,7 +554,7 @@ sfMaskedEdit.Mask = @"\+1 [0-9]\d{2}-[0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![WPF MaskedTextBox displays Prompt Character](Working_with_SfMaskedEdit_images/wpf-maskededit-prompt-char.png) +![SfMaskedEdit displays Prompt Character](Working_with_SfMaskedEdit_images/wpf-maskededit-prompt-char.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -584,7 +584,7 @@ sfMaskedEdit.Mask = @"\+1 [0-9]\d{2}-[0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![WPF MaskedTextBox displays Prompt Character](Working_with_SfMaskedEdit_images/wpf-maskededit-prompt.png) +![SfMaskedEdit displays Prompt Character](Working_with_SfMaskedEdit_images/wpf-maskededit-prompt.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -607,7 +607,7 @@ sfMaskedEdit.Watermark = "Type here"; {% endhighlight %} {% endtabs %} -![WPF MaskedTextBox with Watermark Text](Working_with_SfMaskedEdit_images/wpf-maskededit-watermark-text.jpg) +![SfMaskedEdit with Watermark Text](Working_with_SfMaskedEdit_images/wpf-maskededit-watermark-text.jpg) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -635,7 +635,7 @@ You can change the template of the `Watermark` by using the [WatermarkTemplate]( {% endhighlight %} {% endtabs %} -![Customizing Watermark Text in WPF MaskedTextBox](Working_with_SfMaskedEdit_images/wpf-maskededit-watermark-customization.png) +![Customizing Watermark Text in SfMaskedEdit](Working_with_SfMaskedEdit_images/wpf-maskededit-watermark-customization.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub diff --git a/wpf/MaskedTextBox/Overview.md b/wpf/MaskedTextBox/Overview.md index c1cc04a597..f4e4994718 100644 --- a/wpf/MaskedTextBox/Overview.md +++ b/wpf/MaskedTextBox/Overview.md @@ -9,9 +9,9 @@ documentation: ug # About Syncfusion® WPF MaskedTextBox (SfMaskedEdit) Control -The [WPF MaskedTextBox](https://www.syncfusion.com/wpf-controls/maskedtextbox) (SfMaskedEdit) is an advanced version of the input control that restricts your input of certain types such as characters, text, and numbers by using a mask pattern. This control is used to create a template for providing information such as telephone numbers, IP addresses, product IDs, and so on. +The [SfMaskedEdit](https://www.syncfusion.com/wpf-controls/maskedtextbox) (SfMaskedEdit) is an advanced version of the input control that restricts your input of certain types such as characters, text, and numbers by using a mask pattern. This control is used to create a template for providing information such as telephone numbers, IP addresses, product IDs, and so on. -![Overview of WPF MaskedTextBox](Overview_images/wpf-maskededit.jpg) +![Overview of SfMaskedEdit](Overview_images/wpf-maskededit.jpg) ## Key features diff --git a/wpf/Radial-Menu/Appearance-and-Styling.md b/wpf/Radial-Menu/Appearance-and-Styling.md index 865a41237e..9fe21a7799 100644 --- a/wpf/Radial-Menu/Appearance-and-Styling.md +++ b/wpf/Radial-Menu/Appearance-and-Styling.md @@ -123,7 +123,7 @@ The RimHoverBrush property can be used to fill the expander rim while the pointe ## IsExpanderVisible -Expander arrow in the OuterRim of `WPF Radial Menu` visibility can be changed by `IsExpanderVisible` property of `SfRadialMenuItem`. By default, `IsExpanderVisible` value is True. +Expander arrow in the OuterRim of `SfRadialMenu` visibility can be changed by `IsExpanderVisible` property of `SfRadialMenuItem`. By default, `IsExpanderVisible` value is True. {%highlight xaml%} diff --git a/wpf/Radial-Menu/Getting-Started.md b/wpf/Radial-Menu/Getting-Started.md index e36aacde02..0113cc51e7 100644 --- a/wpf/Radial-Menu/Getting-Started.md +++ b/wpf/Radial-Menu/Getting-Started.md @@ -70,7 +70,7 @@ radialMenu.Items.Add(paste); ## Theme -The WPF Radial Menu supports various built-in themes. Refer to the below links to apply themes for the WPF Radial Menu, +The WPF Radial Menu supports various built-in themes. Refer to the following links to apply them. * [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager) diff --git a/wpf/Radial-Menu/Populating-Items.md b/wpf/Radial-Menu/Populating-Items.md index 1c5905f583..466e254b60 100644 --- a/wpf/Radial-Menu/Populating-Items.md +++ b/wpf/Radial-Menu/Populating-Items.md @@ -110,7 +110,7 @@ This will populate the WPF Radial Menu as shown in the image below. ## Display Member Path -DisplayMemberPath property of the WPF Radial Menu used to define which business model property needs to be displayed inside the header of the WPF Radial Menu items. +The DisplayMemberPath property of the WPF Radial Menu is used to specify the business model property displayed in item headers. {%highlight xaml%} @@ -135,7 +135,7 @@ Displaying member path ## Command Path -CommandPath property of the WPF Radial Menu can be used to bind the command in the business object to the WPF Radial Menu item when items are populated using data binding. +The CommandPath property of the WPF Radial Menu specifies the command in the business object that is bound to a menu item when items are populated through data binding. {%highlight xaml%} @@ -152,7 +152,7 @@ CommandPath property of the WPF Radial Menu can be used to bind the command in t ## Item Template -ItemTemplate property of the WPF Radial Menu can be used to customize the header part of the WPF Radial Menu items. +The ItemTemplate property of the WPF Radial Menu is used to customize the appearance and content of item headers. {%highlight xaml%} diff --git a/wpf/Radial-Menu/ToolTip.md b/wpf/Radial-Menu/ToolTip.md index af98ae5dc5..2c50d7228e 100644 --- a/wpf/Radial-Menu/ToolTip.md +++ b/wpf/Radial-Menu/ToolTip.md @@ -13,13 +13,13 @@ Tooltip support available for the WPF Radial Menu items. This will show when mou ToolTip Placement -Position of the tooltip displayed relative to the WPF Radial Menu can be customized using ToolTipPlacement property. This have the following options. +Position of the tooltip displayed relative to the WPF Radial Menu can be customized using ToolTipPlacement property. The following tooltip positions are supported: -* None: Tooltip is hidden from the display. -* Left: Tooltip is displayed left of the WPF Radial Menu. -* Top: Tooltip is displayed on top of the WPF Radial Menu. -* Right: Tooltip is displayed right of the WPF Radial Menu. -* Bottom: Tooltip is displayed at the bottom of the WPF Radial Menu. +* None: Hides the tooltip. +* Left: Displays the tooltip to the left of the WPF Radial Menu. +* Top: Displays the tooltip above the control. +* Right: Displays the tooltip to the right of the control. +* Bottom: Displays the tooltip below the control. {%highlight xaml%} From 3164b84eba13132185ccac947668d7d00c6264d6 Mon Sep 17 00:00:00 2001 From: Madhavansf Date: Wed, 2 Sep 2026 13:52:45 +0530 Subject: [PATCH 3/7] masked edit updated. --- wpf/MaskedTextBox/Getting-Started.md | 4 ++-- wpf/MaskedTextBox/Overview.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/wpf/MaskedTextBox/Getting-Started.md b/wpf/MaskedTextBox/Getting-Started.md index cebe518b3e..3a9a0832d5 100644 --- a/wpf/MaskedTextBox/Getting-Started.md +++ b/wpf/MaskedTextBox/Getting-Started.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with WPF MaskedTextBox (SfMaskedEdit) -This section explains how to create a [SfMaskedEdit](https://www.syncfusion.com/wpf-controls/maskedtextbox) and describes its structure and features. +This section explains how to create a [WPF MaskedTextBox](https://www.syncfusion.com/wpf-controls/maskedtextbox) and describes its structure and features. ## Control Structure @@ -132,7 +132,7 @@ sfMaskedEdit.Mask = @"-?\d+\.?\d*"; ![SfMaskedEdit displays Value in RegularExpression](MaskOptions_images/wpf-maskededit-negative-value.png) -Here, the SfMaskedEdit accept the positive and negative whole or float type numbers. +Here, the `SfMaskedEdit` accept the positive and negative whole or float type numbers. N> Please refer the [Restrict the user to enter valid data](https://help.syncfusion.com/wpf/maskedtextbox/input-restriction#restrict-the-user-to-enter-valid-data) page to know more about the various mask pattern with examples. diff --git a/wpf/MaskedTextBox/Overview.md b/wpf/MaskedTextBox/Overview.md index f4e4994718..8bfc5d8b01 100644 --- a/wpf/MaskedTextBox/Overview.md +++ b/wpf/MaskedTextBox/Overview.md @@ -9,7 +9,7 @@ documentation: ug # About Syncfusion® WPF MaskedTextBox (SfMaskedEdit) Control -The [SfMaskedEdit](https://www.syncfusion.com/wpf-controls/maskedtextbox) (SfMaskedEdit) is an advanced version of the input control that restricts your input of certain types such as characters, text, and numbers by using a mask pattern. This control is used to create a template for providing information such as telephone numbers, IP addresses, product IDs, and so on. +The [WPF MaskedTextBox](https://www.syncfusion.com/wpf-controls/maskedtextbox) (SfMaskedEdit) is an advanced version of the input control that restricts your input of certain types such as characters, text, and numbers by using a mask pattern. This control is used to create a template for providing information such as telephone numbers, IP addresses, product IDs, and so on. ![Overview of SfMaskedEdit](Overview_images/wpf-maskededit.jpg) From 610c9c845804b7d5a75c54f5d83c406766d8d7d5 Mon Sep 17 00:00:00 2001 From: Madhavansf Date: Wed, 2 Sep 2026 14:03:05 +0530 Subject: [PATCH 4/7] Encoding issue resolved. --- wpf/MaskedTextBox/Appearance.md | 2 +- wpf/Radial-Menu/Appearance-and-Styling.md | 2 +- wpf/Radial-Menu/Icon.md | 2 +- wpf/Radial-Menu/Layout-Types.md | 2 +- wpf/Radial-Menu/Populating-Color-Palette.md | 2 +- wpf/Radial-Menu/Populating-Items.md | 2 +- wpf/Radial-Menu/ToolTip.md | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/wpf/MaskedTextBox/Appearance.md b/wpf/MaskedTextBox/Appearance.md index 64675202a9..f85b2db68b 100644 --- a/wpf/MaskedTextBox/Appearance.md +++ b/wpf/MaskedTextBox/Appearance.md @@ -2,7 +2,7 @@ layout: post title: Appearance in WPF MaskedTextBox control | Syncfusion® description: Learn here all about Appearance support in Syncfusion® WPF MaskedTextBox (SfMaskedEdit) control and more. -platform: WPF +platform: wpf control: SfMaskedEdit documentation: ug --- diff --git a/wpf/Radial-Menu/Appearance-and-Styling.md b/wpf/Radial-Menu/Appearance-and-Styling.md index 9fe21a7799..4b8c1cb727 100644 --- a/wpf/Radial-Menu/Appearance-and-Styling.md +++ b/wpf/Radial-Menu/Appearance-and-Styling.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Appearance and Styling in WPF Radial Menu | Syncfusion® description: Customize the appearance of the WPF Radial Menu using radius settings, rim styling, navigation buttons, and item background customization. diff --git a/wpf/Radial-Menu/Icon.md b/wpf/Radial-Menu/Icon.md index 1afaea36f2..d7abdb0d84 100644 --- a/wpf/Radial-Menu/Icon.md +++ b/wpf/Radial-Menu/Icon.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Icon Customization in WPF Radial Menu | Syncfusion® description: Customize the icon displayed in the center of the WPF Radial Menu to provide a distinctive navigation experience. diff --git a/wpf/Radial-Menu/Layout-Types.md b/wpf/Radial-Menu/Layout-Types.md index fdc6ed6356..adae85d405 100644 --- a/wpf/Radial-Menu/Layout-Types.md +++ b/wpf/Radial-Menu/Layout-Types.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Layout Types in WPF Radial Menu | Syncfusion® description: Configure default and custom radial layouts using visible segment counts, segment indexes, and circular panel arrangements. diff --git a/wpf/Radial-Menu/Populating-Color-Palette.md b/wpf/Radial-Menu/Populating-Color-Palette.md index 72d2fc7e35..40aa1f177d 100644 --- a/wpf/Radial-Menu/Populating-Color-Palette.md +++ b/wpf/Radial-Menu/Populating-Color-Palette.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Color Palette in WPF Radial Menu | Syncfusion® description: Create interactive color palettes using radial color items to display and select colors within the WPF Radial Menu. diff --git a/wpf/Radial-Menu/Populating-Items.md b/wpf/Radial-Menu/Populating-Items.md index 466e254b60..2b3b130442 100644 --- a/wpf/Radial-Menu/Populating-Items.md +++ b/wpf/Radial-Menu/Populating-Items.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: Populate Items in WPF Radial Menu | Syncfusion® description: Populate WPF Radial Menu items from business objects using data binding, display member paths, commands, and item templates. diff --git a/wpf/Radial-Menu/ToolTip.md b/wpf/Radial-Menu/ToolTip.md index 2c50d7228e..6a85ca8581 100644 --- a/wpf/Radial-Menu/ToolTip.md +++ b/wpf/Radial-Menu/ToolTip.md @@ -1,4 +1,4 @@ ---- +--- layout: post title: ToolTips in WPF Radial Menu | Syncfusion® description: Display tooltips for WPF Radial Menu items and customize tooltip placement around the WPF Radial Menu control. From de69c32dc5474fac56017f4058a5ab127f87d652 Mon Sep 17 00:00:00 2001 From: Madhavansf Date: Thu, 3 Sep 2026 13:04:48 +0530 Subject: [PATCH 5/7] masked text box updated --- wpf/MaskedTextBox/Appearance.md | 20 +++++++------- wpf/MaskedTextBox/Getting-Started.md | 30 ++++++++++----------- wpf/MaskedTextBox/Input-Restriction.md | 36 +++++++++++++------------- wpf/MaskedTextBox/Overview.md | 4 +-- 4 files changed, 45 insertions(+), 45 deletions(-) diff --git a/wpf/MaskedTextBox/Appearance.md b/wpf/MaskedTextBox/Appearance.md index f85b2db68b..8ed868f6ea 100644 --- a/wpf/MaskedTextBox/Appearance.md +++ b/wpf/MaskedTextBox/Appearance.md @@ -9,11 +9,11 @@ documentation: ug # Appearance in WPF MaskedTextBox (SfMaskedEdit) -This section explains different UI customization and theming options available in [SfMaskedEdit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html). +This section explains the UI customization and theming options available in the [WPF MaskedTextBox](https://www.syncfusion.com/wpf-controls/maskedtextbox) control. The WPF MaskedTextBox control is implemented through the [SfMaskedEdit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html) class. ## Setting the background -You can change the default background color and selection color of `SfMaskedEdit` by using the `Background` and `SelectionBrush` property. The default value of `Background` property is `White` and `SelectionBrush` property is `Royal Blue`. +You can change the default background and selection colors of `SfMaskedEdit` by using the `Background` and `SelectionBrush` properties. The default value of the `Background` property is `White`, and the default value of the `SelectionBrush` property is `Royal Blue`. {% tabs %} {% highlight XAML %} @@ -32,13 +32,13 @@ sfMaskedEdit.SelectionBrush = Brushes.Green; {% endhighlight %} {% endtabs %} -![Changing Background Color of SfMaskedEdit](Appearence_Images/wpf-maskededit-background.png) +![Changing Background Color of WPF MaskedTextBox](Appearence_Images/wpf-maskededit-background.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/Appearance) in GitHub ## Setting the foreground -You can change the foreground color by using the `Foreground` property and can change the caret color by using the `CaretBrush` property. The default value of `Foreground` property is `Black` and `CaretBrush` property is `null`. +You can change the foreground color by using the `Foreground` property and the caret color by using the `CaretBrush` property. The default value of the `Foreground` property is `Black`, and the default value of the `CaretBrush` property is `null`. {% tabs %} {% highlight XAML %} @@ -57,13 +57,13 @@ sfMaskedEdit.CaretBrush = Brushes.Red; {% endhighlight %} {% endtabs %} -![Changing Foreground Color of SfMaskedEdit](Appearence_Images/wpf-maskededit-foreground.png) +![Changing Foreground Color of WPF MaskedTextBox](Appearence_Images/wpf-maskededit-foreground.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/Appearance) in GitHub ## Setting the border color -You can change the default border color of `SfMaskedEdit` by using the `BorderBrush` property. The default value of `BorderBrush` property is `Lavender`. +You can change the default border color of `SfMaskedEdit` by using the `BorderBrush` property. The default value of the `BorderBrush` property is `Lavender`. {% tabs %} {% highlight XAML %} @@ -80,13 +80,13 @@ sfMaskedEdit.BorderBrush = Brushes.Blue; {% endhighlight %} {% endtabs %} -![Changing Border Color of SfMaskedEdit](Appearence_Images/wpf-maskededit-border-color.png) +![Changing Border Color of WPF MaskedTextBox](Appearence_Images/wpf-maskededit-border-color.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/Appearance) in GitHub ## Change flow direction -You can change the flow direction of the `SfMaskedEdit` 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 `SfMaskedEdit` layout from right to left by setting the `FlowDirection` property to `RightToLeft`. The default value of the `FlowDirection` property is `LeftToRight`. {% tabs %} {% highlight XAML %} @@ -103,7 +103,7 @@ sfMaskedEdit.FlowDirection = FlowDirection.RightToLeft; {% endhighlight %} {% endtabs %} -![Changing Flow Direction of SfMaskedEdit](Appearence_Images/wpf-maskededit-flow-direction.png) +![Changing Flow Direction of WPF MaskedTextBox](Appearence_Images/wpf-maskededit-flow-direction.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/Appearance) in GitHub @@ -115,4 +115,4 @@ The WPF MaskedTextBox supports various built-in themes. Refer to the following l * [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme) - ![Applying Theme to SfMaskedEdit](Getting-Started_images/wpf-maskededit-theme.png) + ![Applying Theme to WPF MaskedTextBox](Getting-Started_images/wpf-maskededit-theme.png) diff --git a/wpf/MaskedTextBox/Getting-Started.md b/wpf/MaskedTextBox/Getting-Started.md index 3a9a0832d5..5446d43720 100644 --- a/wpf/MaskedTextBox/Getting-Started.md +++ b/wpf/MaskedTextBox/Getting-Started.md @@ -9,11 +9,11 @@ documentation: ug # Getting Started with WPF MaskedTextBox (SfMaskedEdit) -This section explains how to create a [WPF MaskedTextBox](https://www.syncfusion.com/wpf-controls/maskedtextbox) and describes its structure and features. +This section explains how to create a [WPF MaskedTextBox](https://www.syncfusion.com/wpf-controls/maskedtextbox) and describes its structure and features. The WPF MaskedTextBox control is implemented through the [SfMaskedEdit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html) class. ## Control Structure -![SfMaskedEdit](Getting-Started_images/wpf-maskededit-structure.png) +![WPF MaskedTextBox](Getting-Started_images/wpf-maskededit-structure.png) ## Assembly deployment @@ -23,14 +23,14 @@ You can find more details about installing the NuGet package in a WPF applicatio [How to install nuget packages](https://help.syncfusion.com/wpf/installation/install-nuget-packages) -## Adding WPF MaskedTextBox via designer +## Adding WPF WPF MaskedTextBox via designer You can add the `SfMaskedEdit` control to an application by dragging it from the toolbox to a view of the designer. The following dependent assembly will be added automatically. * Syncfusion.SfInput.WPF * Syncfusion.SfShared.WPF -![Dragging SfMaskedEdit Control from Toolbox to Designer](Getting-Started_images/wpf-maskededit-toolbox.png) +![Dragging WPF MaskedTextBox Control from Toolbox to Designer](Getting-Started_images/wpf-maskededit-toolbox.png) ## Adding WPF MaskedTextBox via XAML @@ -105,13 +105,13 @@ public partial class MainWindow : Window { {% endcapture %} {{ codesnippet2 | OrderList_Indent_Level_1 }} -![SfMaskedEdit Control](Getting-Started_images/wpf-maskededit-control.png) +![WPF MaskedTextBox Control](Getting-Started_images/wpf-maskededit-control.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/blob/master/Samples/Getting-Started) in GitHub ## Restrict the user to enter valid data -You can restrict the user to enter the valid input without any custom validation by creating the mask pattern as your requirement. You can enable the mask by setting the mask pattern to the [Mask](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_Mask) property and set the [MaskType](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_MaskType) property value as `Regex`. The default value of `Mask` property is `null` and `MaskType` property is `Simple`. +You can restrict valid input without custom validation by creating a mask pattern. Enable the mask by setting the mask pattern to the [Mask](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_Mask) property and set the [MaskType](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_MaskType) property to `Regex`. The default value of the `Mask` property is `null`, and the default value of the `MaskType` property is `Simple`. {% tabs %} {% highlight xaml %} @@ -130,7 +130,7 @@ sfMaskedEdit.Mask = @"-?\d+\.?\d*"; {% endhighlight %} {% endtabs %} -![SfMaskedEdit displays Value in RegularExpression](MaskOptions_images/wpf-maskededit-negative-value.png) +![WPF MaskedTextBox displays Value in RegularExpression](MaskOptions_images/wpf-maskededit-negative-value.png) Here, the `SfMaskedEdit` accept the positive and negative whole or float type numbers. @@ -140,7 +140,7 @@ N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtext ## Setting the value -You can set the value for the `SfMaskedEdit` by using the [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_Value) property. Based on the mask, the value of `Value` property is formatted. The default value of `Value` property is `null`. +You can set the value for the `SfMaskedEdit` by using the [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_Value) property. Based on the mask, the value of the `Value` property is formatted. The default value of the `Value` property is `null`. {% tabs %} {% highlight xaml %} @@ -161,7 +161,7 @@ sfMaskedEdit.Mask = @"\([0-9]\d{2}\) [0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![SfMaskedEdit displays Value without Prompt and Literals](Working_with_SfMaskedEdit_images/wpf-maskededit-value.png) +![WPF MaskedTextBox displays Value without Prompt and Literals](Working_with_SfMaskedEdit_images/wpf-maskededit-value.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -193,13 +193,13 @@ sfMaskedEdit.Mask = @"\([0-9]\d{2}\) [0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![SfMaskedEdit displays Value in Various Formats](Working_with_SfMaskedEdit_images/wpf-maskededit-value-format.png) +![WPF MaskedTextBox displays Value in Various Formats](Working_with_SfMaskedEdit_images/wpf-maskededit-value-format.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub ## Indicates error on invalid input -After input validation failed, you can indicate to the user about the invalid input by the showing error border. The error border automatically disappeared when the input validation is succeed. You can change the error border color by using the [ErrorBorderBrush](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_ErrorBorderBrush) property. The default value of `ErrorBorderBrush` property is `Red`. +After input validation fails, you can indicate invalid input to the user by showing an error border. The error border automatically disappears when input validation succeeds. You can change the error border color by using the [ErrorBorderBrush](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_ErrorBorderBrush) property. The default value of the `ErrorBorderBrush` property is `Red`. {% tabs %} {% highlight xaml %} @@ -216,7 +216,7 @@ sfMaskedEdit.ErrorBorderBrush = Brushes.Yellow; {% endhighlight %} {% endtabs %} -![SfMaskedEdit displays Error Validation](Working_with_SfMaskedEdit_images/wpf-maskededit-error-validation.gif) +![WPF MaskedTextBox displays Error Validation](Working_with_SfMaskedEdit_images/wpf-maskededit-error-validation.gif) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -243,13 +243,13 @@ sfMaskedEdit.Mask = @"\+1 [0-9]\d{2}-[0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![SfMaskedEdit displays Prompt Character](Working_with_SfMaskedEdit_images/wpf-maskededit-prompt-char.png) +![WPF MaskedTextBox displays Prompt Character](Working_with_SfMaskedEdit_images/wpf-maskededit-prompt-char.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub ## Value changed notification -you can notified when changing the value of `SfMaskedEdit.Value` property by using the [ValueChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html) event. +You can receive a notification when the value of the `SfMaskedEdit.Value` property changes by using the [ValueChanged](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html) event. N> Your valid input character is updated to the `Value` property based on the `ValidationMode` property. Refer [Input Validation](https://help.syncfusion.com/wpf/maskedtextbox/input-restriction#input-validation) to know more about the `ValidationMode`. @@ -289,6 +289,6 @@ The WPF MaskedTextBox supports various built-in themes. Refer to the following l * [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme) - ![Applying Theme to SfMaskedEdit](Getting-Started_images/wpf-maskededit-theme.png) + ![Applying Theme to WPF MaskedTextBox](Getting-Started_images/wpf-maskededit-theme.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/Themes) in GitHub diff --git a/wpf/MaskedTextBox/Input-Restriction.md b/wpf/MaskedTextBox/Input-Restriction.md index 6ff7d447e8..fbf5fafdf0 100644 --- a/wpf/MaskedTextBox/Input-Restriction.md +++ b/wpf/MaskedTextBox/Input-Restriction.md @@ -9,11 +9,11 @@ documentation: ug # Input Restriction in WPF MaskedTextBox (SfMaskedEdit) -This section explains accessing the [SfMaskedEdit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html) properties and events associated with it. +This section explains how to use the [WPF MaskedTextBox](https://www.syncfusion.com/wpf-controls/maskedtextbox) properties and events. The WPF MaskedTextBox control is implemented through the [SfMaskedEdit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html) class. ## Restrict the user to enter valid data -You can restrict the user to enter the valid input without any custom validation by creating the mask pattern as your requirement. You can enable the mask by setting the mask pattern to the [Mask](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_Mask) property and set the [MaskType](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_MaskType) property value as `Regex`. The default value of `Mask` property is `null` and `MaskType` property is `Simple`. The following table demonstrates the mask elements with its description, +You can restrict valid input without custom validation by creating a mask pattern. Enable the mask by setting the mask pattern to the [Mask](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_Mask) property and set the [MaskType](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_MaskType) property to `Regex`. The default value of the `Mask` property is `null`, and the default value of the `MaskType` property is `Simple`. The following table describes the mask elements: @@ -126,7 +126,7 @@ sfMaskedEdit.Mask = @"(?=123)\d{3}"; For the input mask `(?=123)\d{3}`. It allows first two digit. While entering the third digit, it will validate the regex and restrict the input. It allows the output only when the MaskText is “123” for this given input. -![SfMaskedEdit displays Specific Values with Mask](MaskOptions_images/wpf-maskededit-mask-value.jpg) +![WPF MaskedTextBox displays Specific Values with Mask](MaskOptions_images/wpf-maskededit-mask-value.jpg) ### Restrict specific values @@ -151,7 +151,7 @@ sfMaskedEdit.Mask = @"(?!55)(?!000)(?!666)\d{3}"; For the input mask `(?!55)(?!000)(?!666)\d{3}` – `\d{3}` denotes that the output will be of 3 character length. `(?55)` denotes the value will not begin with `55`. `(?!000)(?!666)` denotes the output cannot be `000` or `666`. -![Restrict Specific Values with Mask in SfMaskedEdit](MaskOptions_images/wpf-maskededit-value-restriction.jpg) +![Restrict Specific Values with Mask in WPF MaskedTextBox](MaskOptions_images/wpf-maskededit-value-restriction.jpg) ### Basic Mask examples @@ -264,7 +264,7 @@ N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtext ## Setting the value -You can set the value for the `SfMaskedEdit` by using the [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_Value) property. Based on the mask, the value of `Value` property is formatted. The default value of `Value` property is `null`. +You can set the value for the `SfMaskedEdit` by using the [Value](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html#Syncfusion_Windows_Controls_Input_SfMaskedEdit_Value) property. Based on the mask, the value of the `Value` property is formatted. The default value of the `Value` property is `null`. {% tabs %} {% highlight xaml %} @@ -285,7 +285,7 @@ sfMaskedEdit.Mask = @"\([0-9]\d{2}\) [0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![SfMaskedEdit displays Value without Prompt and Literals](Working_with_SfMaskedEdit_images/wpf-maskededit-value.png) +![WPF MaskedTextBox displays Value without Prompt and Literals](Working_with_SfMaskedEdit_images/wpf-maskededit-value.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -321,7 +321,7 @@ sfMaskedEdit.Mask = @"\([0-9]\d{2}\) [0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![SfMaskedEdit displays Value in Various Formats](Working_with_SfMaskedEdit_images/wpf-maskededit-value-format.png) +![WPF MaskedTextBox displays Value in Various Formats](Working_with_SfMaskedEdit_images/wpf-maskededit-value-format.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -348,7 +348,7 @@ sfMaskedEdit.Mask = @"\([0-9]\d{2}\) [0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![SfMaskedEdit displays Value with Literals](Working_with_SfMaskedEdit_images/wpf-maskededit-with-literals.png) +![WPF MaskedTextBox displays Value with Literals](Working_with_SfMaskedEdit_images/wpf-maskededit-with-literals.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -375,7 +375,7 @@ sfMaskedEdit.Mask = @"\([0-9]\d{2}\) [0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![SfMaskedEdit displays Value with Prompt Character](Working_with_SfMaskedEdit_images/wpf-maskededit-with-prompt.png) +![WPF MaskedTextBox displays Value with Prompt Character](Working_with_SfMaskedEdit_images/wpf-maskededit-with-prompt.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -402,7 +402,7 @@ sfMaskedEdit.Mask = @"\([0-9]\d{2}\) [0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![SfMaskedEdit displays Value with Prompt and Literals Character](Working_with_SfMaskedEdit_images/wpf-maskededit-with-prompt-and-iterals.png) +![WPF MaskedTextBox displays Value with Prompt and Literals Character](Working_with_SfMaskedEdit_images/wpf-maskededit-with-prompt-and-iterals.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -433,7 +433,7 @@ sfMaskedEdit.Mask = @"\+1 [0-9]\d{2}-[0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![Validating Input on Key Press in SfMaskedEdit](Working_with_SfMaskedEdit_images/wpf-maskededit-input-validation.png) +![Validating Input on Key Press in WPF MaskedTextBox](Working_with_SfMaskedEdit_images/wpf-maskededit-input-validation.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -460,7 +460,7 @@ sfMaskedEdit.Mask = @"\+1 [0-9]\d{2}-[0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![Validating Input without Focus in SfMaskedEdit](Working_with_SfMaskedEdit_images/wpf-maskededit-lostfocus.png) +![Validating Input without Focus in WPF MaskedTextBox](Working_with_SfMaskedEdit_images/wpf-maskededit-lostfocus.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -506,7 +506,7 @@ private void SfMaskedEdit_LostFocus(object sender, RoutedEventArgs e) { {% endhighlight %} {% endtabs %} -![SfMaskedEdit displays Validation Result](Working_with_SfMaskedEdit_images/wpf-maskededit-validation-result.png) +![WPF MaskedTextBox displays Validation Result](Working_with_SfMaskedEdit_images/wpf-maskededit-validation-result.png) ## Indicates error on invalid input @@ -527,7 +527,7 @@ sfMaskedEdit.ErrorBorderBrush = Brushes.Yellow; {% endhighlight %} {% endtabs %} -![SfMaskedEdit displays Error Validation](Working_with_SfMaskedEdit_images/wpf-maskededit-error-validation.gif) +![WPF MaskedTextBox displays Error Validation](Working_with_SfMaskedEdit_images/wpf-maskededit-error-validation.gif) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -554,7 +554,7 @@ sfMaskedEdit.Mask = @"\+1 [0-9]\d{2}-[0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![SfMaskedEdit displays Prompt Character](Working_with_SfMaskedEdit_images/wpf-maskededit-prompt-char.png) +![WPF MaskedTextBox displays Prompt Character](Working_with_SfMaskedEdit_images/wpf-maskededit-prompt-char.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -584,7 +584,7 @@ sfMaskedEdit.Mask = @"\+1 [0-9]\d{2}-[0-9]\d{2}-[0-9]\d{3}"; {% endhighlight %} {% endtabs %} -![SfMaskedEdit displays Prompt Character](Working_with_SfMaskedEdit_images/wpf-maskededit-prompt.png) +![WPF MaskedTextBox displays Prompt Character](Working_with_SfMaskedEdit_images/wpf-maskededit-prompt.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -607,7 +607,7 @@ sfMaskedEdit.Watermark = "Type here"; {% endhighlight %} {% endtabs %} -![SfMaskedEdit with Watermark Text](Working_with_SfMaskedEdit_images/wpf-maskededit-watermark-text.jpg) +![WPF MaskedTextBox with Watermark Text](Working_with_SfMaskedEdit_images/wpf-maskededit-watermark-text.jpg) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub @@ -635,7 +635,7 @@ You can change the template of the `Watermark` by using the [WatermarkTemplate]( {% endhighlight %} {% endtabs %} -![Customizing Watermark Text in SfMaskedEdit](Working_with_SfMaskedEdit_images/wpf-maskededit-watermark-customization.png) +![Customizing Watermark Text in WPF MaskedTextBox](Working_with_SfMaskedEdit_images/wpf-maskededit-watermark-customization.png) N> View [Sample](https://github.com/SyncfusionExamples/syncfusion-wpf-maskedtextbox-examples/tree/master/Samples/InputOptions) in GitHub diff --git a/wpf/MaskedTextBox/Overview.md b/wpf/MaskedTextBox/Overview.md index 8bfc5d8b01..8fd8acd748 100644 --- a/wpf/MaskedTextBox/Overview.md +++ b/wpf/MaskedTextBox/Overview.md @@ -9,9 +9,9 @@ documentation: ug # About Syncfusion® WPF MaskedTextBox (SfMaskedEdit) Control -The [WPF MaskedTextBox](https://www.syncfusion.com/wpf-controls/maskedtextbox) (SfMaskedEdit) is an advanced version of the input control that restricts your input of certain types such as characters, text, and numbers by using a mask pattern. This control is used to create a template for providing information such as telephone numbers, IP addresses, product IDs, and so on. +The [WPF MaskedTextBox](https://www.syncfusion.com/wpf-controls/maskedtextbox) is an advanced input control that restricts characters, text, and numbers by using a mask pattern. The WPF MaskedTextBox control is implemented through the [SfMaskedEdit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfMaskedEdit.html) class. It can be used to create templates for information such as telephone numbers, IP addresses, and product IDs. -![Overview of SfMaskedEdit](Overview_images/wpf-maskededit.jpg) +![Overview of WPF MaskedTextBox](Overview_images/wpf-maskededit.jpg) ## Key features From dce047a251586d55ca39ed5f2ea190a5439036d0 Mon Sep 17 00:00:00 2001 From: Madhavansf Date: Thu, 3 Sep 2026 13:51:25 +0530 Subject: [PATCH 6/7] Navigation Drawer review concerns addressed --- wpf/Navigation-Drawer/Commands-and-events.md | 36 +++++----- wpf/Navigation-Drawer/Custom-views.md | 68 +++++++++---------- .../Different-display-modes.md | 22 +++--- wpf/Navigation-Drawer/Getting-Started.md | 38 +++++------ wpf/Navigation-Drawer/Handling-Selection.md | 12 ++-- wpf/Navigation-Drawer/Header-and-Footer.md | 18 ++--- wpf/Navigation-Drawer/Keyboard-Support.md | 18 ++--- wpf/Navigation-Drawer/Overview.md | 28 ++++---- wpf/Navigation-Drawer/Populating-data.md | 52 +++++++------- 9 files changed, 146 insertions(+), 146 deletions(-) diff --git a/wpf/Navigation-Drawer/Commands-and-events.md b/wpf/Navigation-Drawer/Commands-and-events.md index 4987fa1023..6b6d0f7c15 100644 --- a/wpf/Navigation-Drawer/Commands-and-events.md +++ b/wpf/Navigation-Drawer/Commands-and-events.md @@ -1,21 +1,21 @@ ---- +--- layout: post -title: Commands and Events in WPF NavigationDrawer | Syncfusion® -description: Handle drawer opening, closing, item interaction events, and execute commands for navigation items in the WPF NavigationDrawer control. +title: Commands and Events in WPF Navigation Drawer | Syncfusion® +description: Handle drawer opening, closing, item interaction events, and execute commands for navigation items in the WPF Navigation Drawer control. platform: wpf control: NavigationDrawer documentation: ug --- -# Commands and Events in WPF NavigationDrawer +# Commands and Events in WPF Navigation Drawer -This section describes the events and command support available in the Navigation Drawer sidebar. +This section describes the events and command support available in the WPF Navigation Drawer sidebar. ## Opening event -This [Opening](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Opening) event gets triggered when the drawer menu is opening. +The [Opening](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Opening) event gets triggered when the drawer menu is opening. -Using the `Cancel` property the opening of the drawer menu can be handled. +Using the `Cancel` property, the opening of the drawer menu can be handled. {% tabs %} {% highlight xml %} @@ -98,7 +98,7 @@ namespace NavigationDrawerWPF ## Opened event -This [Opened](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Opened) event gets triggered once the drawer menu is fully animated and opened. +The [Opened](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Opened) event gets triggered once the drawer menu is fully animated and opened. {% tabs %} {% highlight xml %} @@ -181,7 +181,7 @@ namespace NavigationDrawerWPF ## Closing event -This[Closing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Closing) event gets triggered when the drawer is about to close. +The [Closing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Closing) event gets triggered when the drawer is about to close. Closing of the drawer menu can be handled using the `Cancel` property. @@ -266,7 +266,7 @@ namespace NavigationDrawerWPF ## Closed event -This [Closed](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Closed) event gets triggered once the drawer menu is Closed. +The [Closed](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Closed) event gets triggered once the drawer menu is closed. {% tabs %} {% highlight xml %} @@ -352,7 +352,7 @@ namespace NavigationDrawerWPF The [ItemClicked](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemClicked) event gets triggered when the item in the navigation menu is clicked. -N> This event will get triggered only when the display mode is either compact or expanded. +N> This event will get triggered only when the `DisplayMode` is either compact or expanded. {% tabs %} {% highlight xaml %} @@ -445,9 +445,9 @@ N> This event will get triggered only when the display mode is either compact or ## ItemCollapsed event -The [ItemCollapsed](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemCollapsed) event gets triggered when the sub items gets collapsed. +The [ItemCollapsed](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemCollapsed) event gets triggered when the sub items get collapsed. -N> This event will get triggered only when the display mode is either compact or expanded. +N> This event will get triggered only when the `DisplayMode` is either compact or expanded. {% tabs %} {% highlight xaml %} @@ -594,9 +594,9 @@ N> This event will get triggered only when the display mode is either compact or ## ItemExpanded event -The [ItemExpanded](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemExpanded) event gets triggered when the sub items gets expanded. +The [ItemExpanded](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemExpanded) event gets triggered when the sub items get expanded. -N> This event will get triggered only when the display mode is either compact or expanded. +N> This event will get triggered only when the `DisplayMode` is either compact or expanded. {% tabs %} {% highlight xaml %} @@ -737,9 +737,9 @@ N> This event will get triggered only when the display mode is either compact or ## Commands -The command binds to the `NavigationItem`, and will be executed while the items gets clicked. +The command binds to the `NavigationItem`, and will be executed while the items get clicked. -The `Tab` and `Button` navigation item types alone executes the [Command](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.NavigationItem.html#Syncfusion_UI_Xaml_NavigationDrawer_NavigationItem_Command). [CommandParameter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.NavigationItem.html#Syncfusion_UI_Xaml_NavigationDrawer_NavigationItem_CommandParameter) is user defined data value that can be passed to the `Command` when it is executed. +The `Tab` and `Button` navigation item types alone execute the [Command](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.NavigationItem.html#Syncfusion_UI_Xaml_NavigationDrawer_NavigationItem_Command). The [CommandParameter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.NavigationItem.html#Syncfusion_UI_Xaml_NavigationDrawer_NavigationItem_CommandParameter) is a user-defined data value that can be passed to the `Command` when it is executed. ### DelegateCommand class @@ -935,7 +935,7 @@ public class DelegateCommand : ICommand {% endtabs %} -![WPF NavigationDrawer displays Command](Command_image/wpf-navigation-drawer-command.png) +![WPF Navigation Drawer displays Command](Command_image/wpf-navigation-drawer-command.png) N> The `Command` execution is only applicable for compact and expanded display mode. diff --git a/wpf/Navigation-Drawer/Custom-views.md b/wpf/Navigation-Drawer/Custom-views.md index 8ee16e8089..f4e20cb610 100644 --- a/wpf/Navigation-Drawer/Custom-views.md +++ b/wpf/Navigation-Drawer/Custom-views.md @@ -1,6 +1,6 @@ ---- +--- layout: post -title: Custom Views in WPF NavigationDrawer | Syncfusion® +title: Custom Views in WPF Navigation Drawer | Syncfusion® description: Create custom navigation layouts using header, content, and footer views, and customize drawer position, animations, and panel sizing. platform: wpf control: NavigationDrawer @@ -9,17 +9,17 @@ documentation: ug # Custom Views in WPF Navigation Drawer (SfNavigationDrawer) -## Populating the with custom views +## Populating with custom views -The WPF Navigation Drawer sidebar can be populated with custom views by setting the [DisplayMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DisplayMode) as [Default](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.DisplayMode.html). In this mode the sidebar can be customized as three parts. +The WPF Navigation Drawer sidebar can be populated with custom views by setting the [DisplayMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DisplayMode) as [Default](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.DisplayMode.html). In this mode, the sidebar can be customized as three parts. -Basically the sidebar will be in hidden state and can be displayed by swipe gestures. +Basically, the sidebar will be in a hidden state and can be displayed by swipe gestures. - * DrawerHeaderView - A custom view can be provided to be displayed as a header part of the navigation menu. This can be set to the [DrawerHeaderView]() property. + * DrawerHeaderView - A custom view can be provided to be displayed as a header part of the navigation menu. This can be set to the `DrawerHeaderView` property. - * DrawerContentView - A custom view can be provided to be displayed in the body of the navigation menu. This can be set to the [DrawerContentView]() property. + * DrawerContentView - A custom view can be provided to be displayed in the body of the navigation menu. This can be set to the `DrawerContentView` property. - * DrawerFooterView - A custom view can be provided to be displayed as a footer part of the navigation menu. This can be set to the [DrawerFooterView]() property. + * DrawerFooterView - A custom view can be provided to be displayed as a footer part of the navigation menu. This can be set to the `DrawerFooterView` property. {% tabs %} {% highlight xml %} @@ -156,19 +156,19 @@ namespace NavigationDrawerWPF {% endtabs %} -![WPF NavigationdDrawer displays Custom Views](getting-started_images/wpf-navigation-drawer-custom-views.png) +![WPF Navigation Drawer displays Custom Views](getting-started_images/wpf-navigation-drawer-custom-views.png) ## Customizing the drawer ## Customize Panel size -The size of sidebar can be adjusted using the `DrawerHeight` and `DrawerWidth` properties. +The size of the sidebar can be adjusted using the `DrawerHeight` and `DrawerWidth` properties. ### DrawerHeight -The `DrawerHeight` property is used to change the height of side pane when the Position is Top or Bottom. +The `DrawerHeight` property is used to change the height of the side pane when the `Position` is `Top` or `Bottom`. -N> The DrawerHeight property is applicable only when the DisplayMode is Default. +N> The `DrawerHeight` property is applicable only when the `DisplayMode` is `Default`. {% tabs %} {% highlight xml %} @@ -243,9 +243,9 @@ namespace NavigationDrawerWPF ### DrawerWidth -The `DrawerWidth` property is used to change the width of side pane when the Position is Left or Right. +The `DrawerWidth` property is used to change the width of the side pane when the `Position` is `Left` or `Right`. -N> The DrawerWidth property is applicable only when the DisplayMode is Default. +N> The `DrawerWidth` property is applicable only when the `DisplayMode` is `Default`. {% tabs %} {% highlight xml %} @@ -323,16 +323,16 @@ namespace NavigationDrawerWPF ## Navigation Pane Sides -The supplemental pane can be drawn in and out from all the four sides. The `Position` property is used to change the side of pane and the values are: +The supplemental pane can be drawn in and out from all the four sides. The `Position` property is used to change the side of the pane and the values are: * Left * Right * Top * Bottom -N> The Position property is applicable only when the DisplayMode is Default. +N> The `Position` property is applicable only when the `DisplayMode` is `Default`. -The default position is Left. +The default position is `Left`. {% tabs %} @@ -474,7 +474,7 @@ namespace NavigationDrawerWPF {% endtabs %} -![WPF NavigationDrawer shows in Left Side](concepts-and-features_images/wpf-navigation-drawer-left-position.png) +![WPF Navigation Drawer shows in Left Side](concepts-and-features_images/wpf-navigation-drawer-left-position.png) The following code example shows how to set the SfNavigationDrawer to the right. @@ -618,7 +618,7 @@ namespace NavigationDrawerWPF {% endtabs %} -![WPF NavigationDrawer shows in Right Side](concepts-and-features_images/wpf-navigation-drawer-right-position.png) +![WPF Navigation Drawer shows in Right Side](concepts-and-features_images/wpf-navigation-drawer-right-position.png) The following code example shows how to set the SfNavigationDrawer at the top. @@ -761,7 +761,7 @@ namespace NavigationDrawerWPF {% endtabs %} -![WPF NavigationDrawer shows in Top Position](concepts-and-features_images/wpf-navigation-drawer-top-position.png) +![WPF Navigation Drawer shows in Top Position](concepts-and-features_images/wpf-navigation-drawer-top-position.png) The following code example shows how to set the SfNavigationDrawer at the bottom. @@ -904,17 +904,17 @@ namespace NavigationDrawerWPF {% endtabs %} -![WPF NavigationDrawer shows in Bottom Position](concepts-and-features_images/wpf-navigation-drawer-bottom-position.png) +![WPF Navigation Drawer shows in Bottom Position](concepts-and-features_images/wpf-navigation-drawer-bottom-position.png) ## Swipe gesture and sensitivity -The NavigationDrawer supports swipe gesture for opening and closing the drawer. +The WPF Navigation Drawer supports swipe gesture for opening and closing the drawer. ### Enabling swipe gesture It can be enabled or disabled using the `EnableSwipeGesture` property. -N> This property is applicable only when the DisplayMode is Default. +N> This property is applicable only when the `DisplayMode` is `Default`. {% tabs %} @@ -991,9 +991,9 @@ namespace NavigationDrawerWPF ### Swipe sensitivity -In smaller screens, may find it difficult to swipe the drawer from the edge, in such cases it can increase the swipe region using the `TouchThreshold` property. It can be set as below: +In smaller screens, it may be difficult to swipe the drawer from the edge. In such cases, the swipe region can be increased using the `TouchThreshold` property. It can be set as below: -N> The TouchThreshold property is applicable only when the DisplayMode is Default. +N> The `TouchThreshold` property is applicable only when the `DisplayMode` is `Default`. {% tabs %} @@ -1072,7 +1072,7 @@ namespace NavigationDrawerWPF ## Customize animations -The Transition property specifies the animations for the DrawerView panel. The [Transition](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Transition) property has the following options: +The `Transition` property specifies the animations for the DrawerView panel. The [Transition](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Transition) property has the following options: * SlideOnTop * Push @@ -1080,7 +1080,7 @@ The Transition property specifies the animations for the DrawerView panel. The [ The default transition is [SlideOnTop](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.Transition.html) that draws the DrawerContent on top of the main content. -N> The Transition property is applicable only when the DisplayMode is Default. +N> The `Transition` property is applicable only when the `DisplayMode` is `Default`. {% tabs %} {% highlight xml %} @@ -1218,10 +1218,10 @@ namespace NavigationDrawerWPF {% endtabs %} -![WPF NavigationDrawer with Slidebar at Top Position](concepts-and-features_images/wpf-navigation-drawer-slide-bar.png) +![WPF Navigation Drawer with Slidebar at Top Position](concepts-and-features_images/wpf-navigation-drawer-slide-bar.png) -The following code example shows how to set [Transition](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Transition) as [Push](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.Transition.html) to SfNavigationDrawer. This transition moves the Drawer and main content simultaneously. +The following code example shows how to set [Transition](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Transition) as [Push](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.Transition.html) to `SfNavigationDrawer`. This transition moves the Drawer and main content simultaneously. {% tabs %} {% highlight xml %} @@ -1359,10 +1359,10 @@ namespace NavigationDrawerWPF {% endtabs %} -![WPF NavigationDrawer with Slidebar](concepts-and-features_images/wpf-navigation-drawer-slidebar-push.png) +![WPF Navigation Drawer with Slidebar](concepts-and-features_images/wpf-navigation-drawer-slidebar-push.png) -The following code example shows how to set [Transition](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Transition) as [Reveal](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.Transition.html) to SfNavigationDrawer. In this transition, the Drawer content is stable and the main content is moved to reveal the drawer content. +The following code example shows how to set [Transition](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Transition) as [Reveal](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.Transition.html) to `SfNavigationDrawer`. In this transition, the Drawer content is stable and the main content is moved to reveal the drawer content. {% tabs %} @@ -1501,13 +1501,13 @@ namespace NavigationDrawerWPF {% endtabs %} -![WPF NavigationDrawer with Slidebar](concepts-and-features_images/wpf-navigation-drawer-slidebar-reveal.png) +![WPF Navigation Drawer with Slidebar](concepts-and-features_images/wpf-navigation-drawer-slidebar-reveal.png) ### Animation duration The [AnimationDuration](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_AnimationDuration) property sets the time span value, by which the DrawerContent can be brought to view. -N> The AnimationDuration property is applicable only when the DisplayMode is Default. +N> The `AnimationDuration` property is applicable only when the `DisplayMode` is `Default`. {% tabs %} {% highlight xml %} @@ -1582,7 +1582,7 @@ namespace NavigationDrawerWPF ## DrawerBackground -The [DrawerBackground](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html?tabs=tabid-1#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DrawerBackground) property is used to change the background color of the SfNavigationDrawer's side pane. +The [DrawerBackground](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html?tabs=tabid-1#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DrawerBackground) property is used to change the background color of the `SfNavigationDrawer`'s side pane. {% tabs %} {% highlight xml %} diff --git a/wpf/Navigation-Drawer/Different-display-modes.md b/wpf/Navigation-Drawer/Different-display-modes.md index 5248ddfaa1..e6d44e4b60 100644 --- a/wpf/Navigation-Drawer/Different-display-modes.md +++ b/wpf/Navigation-Drawer/Different-display-modes.md @@ -1,6 +1,6 @@ ---- +--- layout: post -title: Display Modes in WPF NavigationDrawer | Syncfusion® +title: Display Modes in WPF Navigation Drawer | Syncfusion® description: Configure compact, expanded, and default display modes with responsive behavior, automatic mode switching, and collapsible navigation panes. platform: wpf control: NavigationDrawer @@ -9,15 +9,15 @@ documentation: ug # Display Modes in WPF Navigation Drawer (SfNavigationDrawer) -The WPF Navigation drawer provides default, compact and extended [display modes](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DisplayMode) to create navigation menu for an application. Compact and Extended display modes support to populate the navigation menu using built items with different types. +The WPF Navigation Drawer provides default, compact, and extended [display modes](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DisplayMode) to create a navigation menu for an application. Compact and extended display modes support populating the navigation menu using built items with different types. -See also [different item types](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#different-item-types) topic in Navigation Drawer. +See also [different item types](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#different-item-types) topic in the WPF Navigation Drawer. ## Compact display mode A navigation sidebar is shown as a narrow bar to the width set to the [CompactModeWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_CompactModeWidth) property. The navigation menu gets expanded on clicking the built-in toggle button and appears as an overlay above the main content to the width set to the [ExpandedModeWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ExpandedModeWidth) property. -N> The navigation menu will get toggled back to compact width when any interaction performed on the main content area. +N> The navigation menu will get toggled back to compact width when any interaction is performed on the main content area. {% tabs %} {% highlight xaml %} @@ -90,7 +90,7 @@ N> The navigation menu will get toggled back to compact width when any interacti {% endtabs %} -![WPF NavigationDrawer with Compact Mode](different-displaymode_images/wpf-navigation-drawer-compact.png) +![WPF Navigation Drawer with Compact Mode](different-displaymode_images/wpf-navigation-drawer-compact.png) ## Expanded display mode @@ -170,11 +170,11 @@ When the drawer menu is toggled using the built-in toggle button, the drawer men {% endtabs %} -![WPF NavigationDrawer with Expanded Mode](different-displaymode_images/wpf-navigation-drawer-expand.png) +![WPF Navigation Drawer with Expanded Mode](different-displaymode_images/wpf-navigation-drawer-expand.png) ## Auto display mode change -The Navigation Drawer handles its display mode based on the values set to the [ExpandedModeThresholdWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ExpandedModeThresholdWidth) property. This can be enabled by setting the [AutoChangeDisplayMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_AutoChangeDisplayMode) property to `True`. +The WPF Navigation Drawer handles its display mode based on the values set to the [ExpandedModeThresholdWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ExpandedModeThresholdWidth) property. This can be enabled by setting the [AutoChangeDisplayMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_AutoChangeDisplayMode) property to `True`. This switches the display mode to compact when the application window size is less than the [ExpandedModeThresholdWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ExpandedModeThresholdWidth) and switches to expanded mode when the application window size is larger. @@ -253,16 +253,16 @@ This switches the display mode to compact when the application window size is le {% endtabs %} -![WPF NavigationDrawer with Auto Mode](different-displaymode_images/wpf-navigation-drawer-auto-mode.gif) +![WPF Navigation Drawer with Auto Mode](different-displaymode_images/wpf-navigation-drawer-auto-mode.gif) N> View [sample](https://github.com/SyncfusionExamples/wpf-sfnavigationdrawer-samples/tree/main/Display_Mode) in GitHub ## Collapsible drawer mode -A collapsible drawer can be achieved using the Navigation Drawer by setting the display mode to [Default mode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.DisplayMode.html). In this display mode, the drawer menu is populated using [custom views](https://help.syncfusion.com/wpf/navigation-drawer/custom-views). +A collapsible drawer can be achieved using the WPF Navigation Drawer by setting the display mode to [Default mode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.DisplayMode.html). In this display mode, the drawer menu is populated using [custom views](https://help.syncfusion.com/wpf/navigation-drawer/custom-views). -See also [Custom Views](https://help.syncfusion.com/wpf/navigation-drawer/custom-views) topic in Navigation Drawer. +See also [Custom Views](https://help.syncfusion.com/wpf/navigation-drawer/custom-views) topic in the WPF Navigation Drawer. {% tabs %} {% highlight xml %} diff --git a/wpf/Navigation-Drawer/Getting-Started.md b/wpf/Navigation-Drawer/Getting-Started.md index afca71595a..3853d9b3b2 100644 --- a/wpf/Navigation-Drawer/Getting-Started.md +++ b/wpf/Navigation-Drawer/Getting-Started.md @@ -1,15 +1,15 @@ --- layout: post -title: Getting Started with WPF NavigationDrawer | Syncfusion® -description: Learn how to get started with the Syncfusion® WPF NavigationDrawer control. Explore setup, features, examples, and customization options. +title: Getting Started with WPF Navigation Drawer | Syncfusion® +description: Learn how to get started with the Syncfusion® WPF Navigation Drawer control. Explore setup, features, examples, and customization options. platform: wpf control: NavigationDrawer documentation: ug --- -# Getting Started with WPF NavigationDrawer (SfNavigationDrawer) +# Getting Started with WPF Navigation Drawer (SfNavigationDrawer) -This section helps you to build your application with SfNavigationDrawer. +This section helps you to build your application with the [WPF Navigation Drawer](https://www.syncfusion.com/wpf-controls/navigation-drawer). ## Assembly Deployment @@ -28,28 +28,28 @@ Refer to this documentation to find more details about installing nuget packages ### Creating the project -Create new WPF Project in Visual Studio to display SfNavigationDrawer with data objects. +Create a new WPF project in Visual Studio to display SfNavigationDrawer with data objects. ### Adding SfNavigationDrawer from Toolbox Drag and drop the SfNavigationDrawer control from the Toolbox to your application. -![WPF NavigationDrawer shows in Toolbox](getting-started_images/wpf-navigation-drawer-toolbox.png) +![WPF Navigation Drawer shows in Toolbox](getting-started_images/wpf-navigation-drawer-toolbox.png) -Now, the Syncfusion® Controls for UWP XAML reference is added to the application references and the xmlns namespace code is generated in MainWindow.xaml as below. +Now, the Syncfusion® Controls for WPF XAML reference is added to the application references and the xmlns namespace code is generated in MainWindow.xaml as below. -![Displaying Reference of WPF NavigationDrawer](getting-started_images/wpf-navigation-drawer-reference.png) +![Displaying Reference of WPF Navigation Drawer](getting-started_images/wpf-navigation-drawer-reference.png) -![WPF NavigationDrawer with Namespace](getting-started_images/wpf-navigation-drawer-namespace.png) +![WPF Navigation Drawer with Namespace](getting-started_images/wpf-navigation-drawer-namespace.png) ### Adding control manually in XAML -In order to add control manually in XAML, do the below steps, +In order to add the control manually in XAML, do the below steps: -1. Add the below required assembly references to the project, +1. Add the following required assembly references to the project: * Syncfusion.SfNavigationDrawer.WPF -2. Import Syncfusion® WPF schema **http://schemas.syncfusion.com/wpf** in XAML page. -3. Declare SfNavigationDrawer control in XAML page. +2. Import Syncfusion® WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page. +3. Declare SfNavigationDrawer control in the XAML page. {% capture codesnippet1 %} {% tabs %} @@ -72,12 +72,12 @@ In order to add control manually in XAML, do the below steps, ### Adding control manually in C# -In order to add control manually in C#, do the below steps, +In order to add the control manually in C#, do the below steps: -1. Add the below required assembly references to the project, +1. Add the following required assembly references to the project: * Syncfusion.SfNavigationDrawer.WPF -2. Import SfTreeView namespace **Syncfusion.UI.Xaml.NavigationDrawer** . -3. Create SfNavigationDrawer control instance and add it to the Page. +2. Import the SfNavigationDrawer namespace **Syncfusion.UI.Xaml.NavigationDrawer** . +3. Create the SfNavigationDrawer control instance and add it to the Page. {% capture codesnippet2 %} {% tabs %} @@ -144,7 +144,7 @@ namespace NavigationDrawerWPF The sidebar menu can be populated using the built-in items. The items will be of type [NavigationItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.NavigationItem.html) having many properties for customization. -See also [Different display modes](https://help.syncfusion.com/wpf/navigation-drawer/different-display-modes) topic in SfNavigationDrawer. +See also [Different display modes](https://help.syncfusion.com/wpf/navigation-drawer/different-display-modes) topic in the WPF Navigation Drawer. {% tabs %} {% highlight xaml %} @@ -347,6 +347,6 @@ See also [Different display modes](https://help.syncfusion.com/wpf/navigation-dr {% endtabs %} -![WPF NavigationDrawer](getting-started_images/wpf-navigation-drawer.png) +![WPF Navigation Drawer](getting-started_images/wpf-navigation-drawer.png) N> View [sample](https://github.com/SyncfusionExamples/wpf-sfnavigationdrawer-samples/tree/main/Getting_Started) in GitHub diff --git a/wpf/Navigation-Drawer/Handling-Selection.md b/wpf/Navigation-Drawer/Handling-Selection.md index 15f077d74a..b37cdad34f 100644 --- a/wpf/Navigation-Drawer/Handling-Selection.md +++ b/wpf/Navigation-Drawer/Handling-Selection.md @@ -1,6 +1,6 @@ ---- +--- layout: post -title: Selection in WPF NavigationDrawer | Syncfusion® +title: Selection in WPF Navigation Drawer | Syncfusion® description: Get or set the selected navigation item when working with built-in navigation items or custom data-bound objects. platform: wpf control: NavigationDrawer @@ -9,11 +9,11 @@ documentation: ug # Selection in WPF Navigation Drawer (SfNavigationDrawer) -This section explains the handling of selection in SfNavigationDrawer. +This section explains the handling of selection in the WPF Navigation Drawer. -The [SelectedItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_SelectedItem) property is used for getting or setting the currently selected item of the Navigation Drawer. There are two cases in accessing the SelectedItem property. +The [SelectedItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_SelectedItem) property is used for getting or setting the currently selected item of the WPF Navigation Drawer. There are two cases in accessing the `SelectedItem` property. -The first is when the Navigation Drawer is populated with NavigationItems, then the SelectedItem property is of type NavigationItem. +The first is when the WPF Navigation Drawer is populated with `NavigationItem`, then the `SelectedItem` property is of type `NavigationItem`. {% tabs %} @@ -25,7 +25,7 @@ var selectedItem = this.navigationDrawer.SelectedItem as NavigationItem; {% endtabs %} -The other one is when the Navigation Drawer is bound to a collection of custom objects, the SelectedItem is of the type of the custom object. +The other one is when the WPF Navigation Drawer is bound to a collection of custom objects, the `SelectedItem` is of the type of the custom object. {% tabs %} diff --git a/wpf/Navigation-Drawer/Header-and-Footer.md b/wpf/Navigation-Drawer/Header-and-Footer.md index 12fb63dfbb..1ce33dc4bd 100644 --- a/wpf/Navigation-Drawer/Header-and-Footer.md +++ b/wpf/Navigation-Drawer/Header-and-Footer.md @@ -1,7 +1,7 @@ ---- +--- layout: post -title: Header and Footer in WPF NavigationDrawer | Syncfusion® -description: Customize the navigation drawer header, footer, toggle button, and create fully customized header and footer views. +title: Header and Footer in WPF Navigation Drawer | Syncfusion® +description: Customize the WPF Navigation Drawer header, footer, toggle button, and create fully customized header and footer views. platform: wpf control: NavigationDrawer documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Header and Footer in WPF Navigation Drawer (SfNavigationDrawer) -The Navigation menu's header and footer parts are fully customizable. This section explains the customization of header and footer. +The navigation menu's header and footer parts are fully customizable. This section explains the customization of the header and footer. ## Customizing the Toggle button and Header -The Navigation Drawer built-in toggle button and header can be customized using the [ToggleButtonContentTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ToggleButtonContentTemplate), [ToggleButtonIconTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ToggleButtonIconTemplate), [IsToggleButtonVisible](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_IsToggleButtonVisible) properties. +The WPF Navigation Drawer built-in toggle button and header can be customized using the [ToggleButtonContentTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ToggleButtonContentTemplate), [ToggleButtonIconTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ToggleButtonIconTemplate), and [IsToggleButtonVisible](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_IsToggleButtonVisible) properties. {% tabs %} {% highlight xaml %} @@ -97,11 +97,11 @@ The Navigation Drawer built-in toggle button and header can be customized using {% endtabs %} -![Customizing Header in WPF NavigationDrawer](Header_and_Footer_images/wpf-navigation-drawer-header-customization.png) +![Customizing Header in WPF Navigation Drawer](Header_and_Footer_images/wpf-navigation-drawer-header-customization.png) ## Customizing the Footer -The Navigation Drawer's Footer can be customized using the [FooterItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_FooterItems) property. `FooterItems` can be loaded with NavigationItem collection. +The WPF Navigation Drawer's Footer can be customized using the [FooterItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_FooterItems) property. `FooterItems` can be loaded with `NavigationItem` collection. {% tabs %} {% highlight xaml %} @@ -196,11 +196,11 @@ The Navigation Drawer's Footer can be customized using the [FooterItems](https:/ {% endtabs %} -![Customizing Footer in WPF NavigationDrawer](Header_and_Footer_images/wpf-navigation-drawer-footer-customization.png) +![Customizing Footer in WPF Navigation Drawer](Header_and_Footer_images/wpf-navigation-drawer-footer-customization.png) ## Creating a custom header and footer -The header and footer part can also be customized by loading a custom view. This can be achieved in `Default` display mode. Using the [DrawerFooterView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DrawerHeaderView) and [DrawerFooterView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DrawerFooterView) properties, custom views can be loaded to the header and footer. +The header and footer part can also be customized by loading a custom view. This can be achieved in `Default` display mode. Using the [DrawerHeaderView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DrawerHeaderView) and [DrawerFooterView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DrawerFooterView) properties, custom views can be loaded to the header and footer. See also [Custom views](https://help.syncfusion.com/wpf/navigation-drawer/custom-views) section for creating a custom navigation menu. diff --git a/wpf/Navigation-Drawer/Keyboard-Support.md b/wpf/Navigation-Drawer/Keyboard-Support.md index a5115a86a5..90d417e7a0 100644 --- a/wpf/Navigation-Drawer/Keyboard-Support.md +++ b/wpf/Navigation-Drawer/Keyboard-Support.md @@ -1,21 +1,21 @@ ---- +--- layout: post -title: Keyboard Support in WPF NavigationDrawer | Syncfusion® +title: Keyboard Support in WPF Navigation Drawer | Syncfusion® description: Navigate, focus, and select navigation items efficiently using built-in keyboard shortcuts and accessibility support. platform: wpf control: NavigationDrawer documentation: ug --- -# Keyboard Support in WPF NavigationDrawer (SfNavigationDrawer) +# Keyboard Support in WPF Navigation Drawer (SfNavigationDrawer) -This section describes the keyboard support in SfNavigationDrawer. +This section describes the keyboard support in the WPF Navigation Drawer. -* **Tab** - This key can be used to navigate between the toggle button, navigation items and footer items and the main content view. -* **Up** - This key is used to Navigate to the previous NavigationItem. -* **Down** - This key is used to Navigate to the next NavigationItem. -* **Enter and Space** - This key is used to select the currently focused item. +* **Tab** - This key can be used to navigate between the toggle button, navigation items, footer items, and the main content view. +* **Up** - This key is used to navigate to the previous `NavigationItem`. +* **Down** - This key is used to navigate to the next `NavigationItem`. +* **Enter and Space** - These keys are used to select the currently focused item. -![Keyboard Support in WPF NavigationDrawer](Keyboard_Support_image/Keyboard_Support.gif) +![Keyboard Support in WPF Navigation Drawer](Keyboard_Support_image/Keyboard_Support.gif) N> View [sample](https://github.com/SyncfusionExamples/wpf-sfnavigationdrawer-samples/tree/main/KeyboardSupportSample) in GitHub \ No newline at end of file diff --git a/wpf/Navigation-Drawer/Overview.md b/wpf/Navigation-Drawer/Overview.md index ae7882bebf..a8b54e3b89 100644 --- a/wpf/Navigation-Drawer/Overview.md +++ b/wpf/Navigation-Drawer/Overview.md @@ -1,24 +1,24 @@ --- layout: post -title: About Syncfusion® WPF NavigationDrawer Control | Syncfusion® -description: Learn about the introduction of Syncfusion® Essential Studio WPF NavigationDrawer control and more details. +title: About Syncfusion® WPF Navigation Drawer Control | Syncfusion® +description: Learn about the introduction of Syncfusion® Essential Studio WPF Navigation Drawer control and more details. platform: wpf control: NavigationDrawer documentation: ug --- -# About Syncfusion® WPF NavigationDrawer (SfNavigationDrawer) Control +# About Syncfusion® WPF Navigation Drawer Control -The WPF Navigation Drawer control is a sidebar navigation view that is used to create a navigation menu for easy navigation. It provides compact and extended display modes with built-in navigation view items with ability to switch between both modes based on available size. It also provides default mode which allows to have a custom pane view. +The [WPF Navigation Drawer](https://www.syncfusion.com/wpf-controls/navigation-drawer) control is a sidebar navigation view that is used to create a navigation menu for easy navigation. The WPF Navigation Drawer is implemented through the `SfNavigationDrawer` class. It provides compact and extended display modes with built-in navigation view items with the ability to switch between both modes based on the available size. It also provides default mode which allows to have a custom pane view. -![Overview of WPF NavigationDrawer](overview_images/wpf-navigation-drawer-overview.png) +![Overview of WPF Navigation Drawer](overview_images/wpf-navigation-drawer-overview.png) SfNavigationDrawer {:.caption} ## Use case scenarios -The Navigation Drawers are used in applications where navigating to the major module or page is a basic requirement. The Navigation Drawer is available in the following apps that signify the importance of navigating through pages: +The Navigation Drawer is used in applications where navigating to the major module or page is a basic requirement. Here are the following apps that signify the importance of navigating through pages: 1. Facebook 2. Play Store @@ -27,21 +27,21 @@ The Navigation Drawers are used in applications where navigating to the major mo ### Key features -* A sidebar menu to provide Modern UI navigation for application. -* Navigation menu can be placed on any side of the screen. -* Compact and extended display modes with support to best fit the content based on available size. -* Built-in navigation menu items: tab, button, header, multi-level hierarchal items and footer items. -* Custom views also can be added as the header and footer of the drawer. +* A sidebar menu to provide Modern UI navigation for the application. +* The navigation menu can be placed on any side of the screen. +* Compact and extended display modes with support to best fit the content based on the available size. +* Built-in navigation menu items: tab, button, header, multi-level hierarchal items, and footer items. +* Custom views can also be added as the header and footer of the drawer. ### Visual Structure -This section describes the visual elements of the NavigationDrawer control and defines terms and concepts used in the DisplayMode. +This section describes the visual elements of the WPF Navigation Drawer and defines terms and concepts used in the `DisplayMode`. -![WPF NavigationDrawer Structure](overview_images/wpf-navigation-drawer-structure.png) +![WPF Navigation Drawer Structure](overview_images/wpf-navigation-drawer-structure.png) * **Header** — Represents the header of the drawer * **Footer** — Represents the footer of the drawer. -* **NavigationDrawer Items** — Built-in items used to populate the items in the drawer pane body and footer. +* **Navigation Drawer Items** — Built-in items used to populate the items in the drawer pane body and footer. * **ToggleButton** — Built-in toggle button used to collapse and expand the drawer menu. \ No newline at end of file diff --git a/wpf/Navigation-Drawer/Populating-data.md b/wpf/Navigation-Drawer/Populating-data.md index a09324ad46..87062636bc 100644 --- a/wpf/Navigation-Drawer/Populating-data.md +++ b/wpf/Navigation-Drawer/Populating-data.md @@ -1,6 +1,6 @@ ---- +--- layout: post -title: Populate Data in WPF NavigationDrawer | Syncfusion® +title: Populate Data in WPF Navigation Drawer | Syncfusion® description: Populate navigation menus using built-in items, data binding, hierarchical data, custom icons, and multiple navigation item types. platform: wpf control: NavigationDrawer @@ -13,18 +13,18 @@ This section explains how to populate the drawer menu. ## Populating using built-in items -The WPF Navigation Drawer sidebar provides a built-in items support of type [NavigationItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.NavigationItem.html) that can be populated using the [Items] property. +The WPF Navigation Drawer sidebar provides built-in item support of type [NavigationItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.NavigationItem.html) that can be populated using the `Items` property. The below properties are available in the `NavigationItem` and can be used to define each item of the navigation menu. -* **Header** - Represents the content of the `NavigationItem.` -* **Icon** - Represents the icon in the `NavigationItem.` -* **IconTemplate** - Used to display the custom icon in the `NavigationItem.` Also see the [IconTemplate](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#icontemplate) section. -* **IconMemberPath** - Used to display the icon for sub-items, while providing the `ItemsSource.` -* **DisplayMemberPath** - Used to display the content for sub-items, while providing the `ItemsSource.` Also see the [Hierarchical Data Binding](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#hierarchical-data-binding) section. +* **Header** - Represents the content of the `NavigationItem`. +* **Icon** - Represents the icon in the `NavigationItem`. +* **IconTemplate** - Used to display the custom icon in the `NavigationItem`. Also see the [IconTemplate](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#icontemplate) section. +* **IconMemberPath** - Used to display the icon for sub-items, while providing the `ItemsSource`. +* **DisplayMemberPath** - Used to display the content for sub-items, while providing the `ItemsSource`. Also see the [Hierarchical Data Binding](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#hierarchical-data-binding) section. * **ExpanderTemplate** - Used to provide a custom view for the expander icon in both collapsed and expanded state. * **Command** — Executes when the item gets clicked. See also [Commands](https://help.syncfusion.com/wpf/navigation-drawer/commands-and-events) section. -* **CommandParameter** — [CommandParameter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.NavigationItem.html#Syncfusion_UI_Xaml_NavigationDrawer_NavigationItem_CommandParameter) is user defined data value that can be passed to the `Command` when it is executed. +* **CommandParameter** — The [CommandParameter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.NavigationItem.html#Syncfusion_UI_Xaml_NavigationDrawer_NavigationItem_CommandParameter) is a user-defined data value that can be passed to the `Command` when it is executed. * **IsChildSelected** — Gets whether any sub item is selected or not. * **ItemType** — Defines the type of navigation item. See also [Different item types](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#different-item-types) section. * **IsExpanded** — Gets whether the item is in expanded or collapsed state. @@ -235,13 +235,13 @@ The below properties are available in the `NavigationItem` and can be used to de {% endtabs %} -![Populating with Data in WPF NavigationDrawer](populating_data_images/wpf-navigation-drawer-item.png) +![Populating with Data in WPF Navigation Drawer](populating_data_images/wpf-navigation-drawer-item.png) N> View [sample](https://github.com/SyncfusionExamples/wpf-sfnavigationdrawer-samples/tree/main/Populating_With_Items) in GitHub ### IconTemplate -The IconTemplate is used to provide the custom icon for the NavigationItem. +The `IconTemplate` is used to provide the custom icon for the `NavigationItem`. ### Model @@ -372,27 +372,27 @@ The IconTemplate is used to provide the custom icon for the NavigationItem. {% endtabs %} -![WPF NavigationDrawer with Custom Icon](populating_data_images/wpf-navigation-drawer-custom-icon.png) +![WPF Navigation Drawer with Custom Icon](populating_data_images/wpf-navigation-drawer-custom-icon.png) ### Different item types The WPF Navigation Drawer has four built-in item types that can be set to each `NavigationItem`. -* **Tab** — Interactions can be performed in this type and can have selection. This type supports multi-level population having an expand and collapse icon. -* **Button** — This type is similar to a button control behavior.Interactions can be performed and does not have selection. This type supports multi-level population having an expand and collapse icon. -* **Header** — This item type does not have any interaction or selection and acts like a header label. This item will gets visible only in drawer menu expanded state. This item can be added as a sub item also but cannot have a sub item. -* **Separator** — This item type does not have any interaction or selection and acts a separator line. This item can be added as a sub item also but cannot have a sub item. +* **Tab** — Interactions can be performed in this type and it can have selection. This type supports multi-level population having an expand and collapse icon. +* **Button** — This type is similar to a button control behavior. Interactions can be performed and it does not have selection. This type supports multi-level population having an expand and collapse icon. +* **Header** — This item type does not have any interaction or selection and acts like a header label. This item gets visible only in the drawer menu expanded state. This item can be added as a sub item also but cannot have a sub item. +* **Separator** — This item type does not have any interaction or selection and acts as a separator line. This item can be added as a sub item also but cannot have a sub item. See also [Populating using built in items](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#populating-using-built-in-items) section. -N> ItemType default value is Tab. +N> The default value of `ItemType` is `Tab`. ## Data Binding -The drawer menu can be populated by [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemsSource) property. It can support, bound collection of objects through the `ItemsSource`. +The drawer menu can be populated by the [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemsSource) property. It can support a bound collection of objects through the `ItemsSource`. -[ItemTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemTemplate) property used to customize the content of the item, while using the ItemsSource and the icon of the item showing by used the [IconMemberPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_IconMemberPath) property. +The [ItemTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemTemplate) property is used to customize the content of the item, while using the `ItemsSource` and the icon of the item is shown by the [IconMemberPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_IconMemberPath) property. See also [Hierarchical Data Binding](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#hierarchical-data-binding) section. @@ -536,14 +536,14 @@ See also [Hierarchical Data Binding](https://help.syncfusion.com/wpf/navigation- {% endtabs %} -![Populating with Data in WPF NavigationDrawer](populating_data_images/wpf-navigation-drawer-data-binding.png) +![Populating with Data in WPF Navigation Drawer](populating_data_images/wpf-navigation-drawer-data-binding.png) ## Hierarchical Data Binding -The control populates the items using the [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemsSource), also it allows the sub items. +The control populates the items using the [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemsSource), and also allows the sub items. -When using the `ItemsSource` to show the content of the item achieved by [DisplayMemberPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DisplayMemberPath) property and [ItemsContainerStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemContainerStyle) property used to customize the items and allows to set the `ItemsSource` and `DisplayMemberPath` properties of the sub items. +When using the `ItemsSource`, the content of the item is shown by the [DisplayMemberPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DisplayMemberPath) property and the [ItemContainerStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemContainerStyle) property is used to customize the items and allows to set the `ItemsSource` and `DisplayMemberPath` properties of the sub items. ### Model @@ -681,14 +681,14 @@ When using the `ItemsSource` to show the content of the item achieved by [Displa {% endtabs %} -![Hierarchical Data Binding in WPF NavigationDrawer](populating_data_images/wpf-navigation-drawer-hierarchical-data-binding.png) +![Hierarchical Data Binding in WPF Navigation Drawer](populating_data_images/wpf-navigation-drawer-hierarchical-data-binding.png) N> View [sample](https://github.com/SyncfusionExamples/wpf-sfnavigationdrawer-samples/tree/main/Hierarchical_Data_Binding) in GitHub ## IndentationWidth -This property used to change the horizontal position of sub items. Left margin of the sub items depends on the [IndentationWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_IndentationWidth) property. +This property is used to change the horizontal position of sub items. The left margin of the sub items depends on the [IndentationWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_IndentationWidth) property. {% tabs %} {% highlight xaml %} @@ -818,10 +818,10 @@ This property used to change the horizontal position of sub items. Left margin o See also [Populating using built in items](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#populating-using-built-in-items) section. -![Changing Horizontal Position of WPF NavigationDrawer Items](populating_data_images/wpf-navigation-drawer-position.png) +![Changing Horizontal Position of WPF Navigation Drawer Items](populating_data_images/wpf-navigation-drawer-position.png) ## Popup support The sub-items will be displayed in the popup when the drawer menu is collapsed in the compact and expanded display modes. -![WPF NavigationDrawer with Popup Menu](populating_data_images/wpf-navigation-drawer-popup-menu.png) +![WPF Navigation Drawer with Popup Menu](populating_data_images/wpf-navigation-drawer-popup-menu.png) From 8cfcbe9e8c5c3cbe6b2fac2a7401c0d63aac8568 Mon Sep 17 00:00:00 2001 From: Madhavansf Date: Thu, 3 Sep 2026 14:00:39 +0530 Subject: [PATCH 7/7] Radial Menu updated and navigation drawer reverted --- wpf/Navigation-Drawer/Commands-and-events.md | 36 +++++----- wpf/Navigation-Drawer/Custom-views.md | 68 +++++++++---------- .../Different-display-modes.md | 22 +++--- wpf/Navigation-Drawer/Getting-Started.md | 38 +++++------ wpf/Navigation-Drawer/Handling-Selection.md | 12 ++-- wpf/Navigation-Drawer/Header-and-Footer.md | 18 ++--- wpf/Navigation-Drawer/Keyboard-Support.md | 18 ++--- wpf/Navigation-Drawer/Overview.md | 28 ++++---- wpf/Navigation-Drawer/Populating-data.md | 52 +++++++------- wpf/Radial-Menu/Appearance-and-Styling.md | 20 +++--- wpf/Radial-Menu/Icon.md | 2 +- wpf/Radial-Menu/Layout-Types.md | 10 +-- wpf/Radial-Menu/Overview.md | 6 +- wpf/Radial-Menu/Populating-Color-Palette.md | 2 +- wpf/Radial-Menu/Populating-Items.md | 12 ++-- wpf/Radial-Menu/ToolTip.md | 4 +- 16 files changed, 174 insertions(+), 174 deletions(-) diff --git a/wpf/Navigation-Drawer/Commands-and-events.md b/wpf/Navigation-Drawer/Commands-and-events.md index 6b6d0f7c15..4987fa1023 100644 --- a/wpf/Navigation-Drawer/Commands-and-events.md +++ b/wpf/Navigation-Drawer/Commands-and-events.md @@ -1,21 +1,21 @@ ---- +--- layout: post -title: Commands and Events in WPF Navigation Drawer | Syncfusion® -description: Handle drawer opening, closing, item interaction events, and execute commands for navigation items in the WPF Navigation Drawer control. +title: Commands and Events in WPF NavigationDrawer | Syncfusion® +description: Handle drawer opening, closing, item interaction events, and execute commands for navigation items in the WPF NavigationDrawer control. platform: wpf control: NavigationDrawer documentation: ug --- -# Commands and Events in WPF Navigation Drawer +# Commands and Events in WPF NavigationDrawer -This section describes the events and command support available in the WPF Navigation Drawer sidebar. +This section describes the events and command support available in the Navigation Drawer sidebar. ## Opening event -The [Opening](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Opening) event gets triggered when the drawer menu is opening. +This [Opening](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Opening) event gets triggered when the drawer menu is opening. -Using the `Cancel` property, the opening of the drawer menu can be handled. +Using the `Cancel` property the opening of the drawer menu can be handled. {% tabs %} {% highlight xml %} @@ -98,7 +98,7 @@ namespace NavigationDrawerWPF ## Opened event -The [Opened](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Opened) event gets triggered once the drawer menu is fully animated and opened. +This [Opened](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Opened) event gets triggered once the drawer menu is fully animated and opened. {% tabs %} {% highlight xml %} @@ -181,7 +181,7 @@ namespace NavigationDrawerWPF ## Closing event -The [Closing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Closing) event gets triggered when the drawer is about to close. +This[Closing](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Closing) event gets triggered when the drawer is about to close. Closing of the drawer menu can be handled using the `Cancel` property. @@ -266,7 +266,7 @@ namespace NavigationDrawerWPF ## Closed event -The [Closed](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Closed) event gets triggered once the drawer menu is closed. +This [Closed](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Closed) event gets triggered once the drawer menu is Closed. {% tabs %} {% highlight xml %} @@ -352,7 +352,7 @@ namespace NavigationDrawerWPF The [ItemClicked](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemClicked) event gets triggered when the item in the navigation menu is clicked. -N> This event will get triggered only when the `DisplayMode` is either compact or expanded. +N> This event will get triggered only when the display mode is either compact or expanded. {% tabs %} {% highlight xaml %} @@ -445,9 +445,9 @@ N> This event will get triggered only when the `DisplayMode` is either compact o ## ItemCollapsed event -The [ItemCollapsed](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemCollapsed) event gets triggered when the sub items get collapsed. +The [ItemCollapsed](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemCollapsed) event gets triggered when the sub items gets collapsed. -N> This event will get triggered only when the `DisplayMode` is either compact or expanded. +N> This event will get triggered only when the display mode is either compact or expanded. {% tabs %} {% highlight xaml %} @@ -594,9 +594,9 @@ N> This event will get triggered only when the `DisplayMode` is either compact o ## ItemExpanded event -The [ItemExpanded](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemExpanded) event gets triggered when the sub items get expanded. +The [ItemExpanded](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemExpanded) event gets triggered when the sub items gets expanded. -N> This event will get triggered only when the `DisplayMode` is either compact or expanded. +N> This event will get triggered only when the display mode is either compact or expanded. {% tabs %} {% highlight xaml %} @@ -737,9 +737,9 @@ N> This event will get triggered only when the `DisplayMode` is either compact o ## Commands -The command binds to the `NavigationItem`, and will be executed while the items get clicked. +The command binds to the `NavigationItem`, and will be executed while the items gets clicked. -The `Tab` and `Button` navigation item types alone execute the [Command](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.NavigationItem.html#Syncfusion_UI_Xaml_NavigationDrawer_NavigationItem_Command). The [CommandParameter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.NavigationItem.html#Syncfusion_UI_Xaml_NavigationDrawer_NavigationItem_CommandParameter) is a user-defined data value that can be passed to the `Command` when it is executed. +The `Tab` and `Button` navigation item types alone executes the [Command](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.NavigationItem.html#Syncfusion_UI_Xaml_NavigationDrawer_NavigationItem_Command). [CommandParameter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.NavigationItem.html#Syncfusion_UI_Xaml_NavigationDrawer_NavigationItem_CommandParameter) is user defined data value that can be passed to the `Command` when it is executed. ### DelegateCommand class @@ -935,7 +935,7 @@ public class DelegateCommand : ICommand {% endtabs %} -![WPF Navigation Drawer displays Command](Command_image/wpf-navigation-drawer-command.png) +![WPF NavigationDrawer displays Command](Command_image/wpf-navigation-drawer-command.png) N> The `Command` execution is only applicable for compact and expanded display mode. diff --git a/wpf/Navigation-Drawer/Custom-views.md b/wpf/Navigation-Drawer/Custom-views.md index f4e20cb610..8ee16e8089 100644 --- a/wpf/Navigation-Drawer/Custom-views.md +++ b/wpf/Navigation-Drawer/Custom-views.md @@ -1,6 +1,6 @@ ---- +--- layout: post -title: Custom Views in WPF Navigation Drawer | Syncfusion® +title: Custom Views in WPF NavigationDrawer | Syncfusion® description: Create custom navigation layouts using header, content, and footer views, and customize drawer position, animations, and panel sizing. platform: wpf control: NavigationDrawer @@ -9,17 +9,17 @@ documentation: ug # Custom Views in WPF Navigation Drawer (SfNavigationDrawer) -## Populating with custom views +## Populating the with custom views -The WPF Navigation Drawer sidebar can be populated with custom views by setting the [DisplayMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DisplayMode) as [Default](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.DisplayMode.html). In this mode, the sidebar can be customized as three parts. +The WPF Navigation Drawer sidebar can be populated with custom views by setting the [DisplayMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DisplayMode) as [Default](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.DisplayMode.html). In this mode the sidebar can be customized as three parts. -Basically, the sidebar will be in a hidden state and can be displayed by swipe gestures. +Basically the sidebar will be in hidden state and can be displayed by swipe gestures. - * DrawerHeaderView - A custom view can be provided to be displayed as a header part of the navigation menu. This can be set to the `DrawerHeaderView` property. + * DrawerHeaderView - A custom view can be provided to be displayed as a header part of the navigation menu. This can be set to the [DrawerHeaderView]() property. - * DrawerContentView - A custom view can be provided to be displayed in the body of the navigation menu. This can be set to the `DrawerContentView` property. + * DrawerContentView - A custom view can be provided to be displayed in the body of the navigation menu. This can be set to the [DrawerContentView]() property. - * DrawerFooterView - A custom view can be provided to be displayed as a footer part of the navigation menu. This can be set to the `DrawerFooterView` property. + * DrawerFooterView - A custom view can be provided to be displayed as a footer part of the navigation menu. This can be set to the [DrawerFooterView]() property. {% tabs %} {% highlight xml %} @@ -156,19 +156,19 @@ namespace NavigationDrawerWPF {% endtabs %} -![WPF Navigation Drawer displays Custom Views](getting-started_images/wpf-navigation-drawer-custom-views.png) +![WPF NavigationdDrawer displays Custom Views](getting-started_images/wpf-navigation-drawer-custom-views.png) ## Customizing the drawer ## Customize Panel size -The size of the sidebar can be adjusted using the `DrawerHeight` and `DrawerWidth` properties. +The size of sidebar can be adjusted using the `DrawerHeight` and `DrawerWidth` properties. ### DrawerHeight -The `DrawerHeight` property is used to change the height of the side pane when the `Position` is `Top` or `Bottom`. +The `DrawerHeight` property is used to change the height of side pane when the Position is Top or Bottom. -N> The `DrawerHeight` property is applicable only when the `DisplayMode` is `Default`. +N> The DrawerHeight property is applicable only when the DisplayMode is Default. {% tabs %} {% highlight xml %} @@ -243,9 +243,9 @@ namespace NavigationDrawerWPF ### DrawerWidth -The `DrawerWidth` property is used to change the width of the side pane when the `Position` is `Left` or `Right`. +The `DrawerWidth` property is used to change the width of side pane when the Position is Left or Right. -N> The `DrawerWidth` property is applicable only when the `DisplayMode` is `Default`. +N> The DrawerWidth property is applicable only when the DisplayMode is Default. {% tabs %} {% highlight xml %} @@ -323,16 +323,16 @@ namespace NavigationDrawerWPF ## Navigation Pane Sides -The supplemental pane can be drawn in and out from all the four sides. The `Position` property is used to change the side of the pane and the values are: +The supplemental pane can be drawn in and out from all the four sides. The `Position` property is used to change the side of pane and the values are: * Left * Right * Top * Bottom -N> The `Position` property is applicable only when the `DisplayMode` is `Default`. +N> The Position property is applicable only when the DisplayMode is Default. -The default position is `Left`. +The default position is Left. {% tabs %} @@ -474,7 +474,7 @@ namespace NavigationDrawerWPF {% endtabs %} -![WPF Navigation Drawer shows in Left Side](concepts-and-features_images/wpf-navigation-drawer-left-position.png) +![WPF NavigationDrawer shows in Left Side](concepts-and-features_images/wpf-navigation-drawer-left-position.png) The following code example shows how to set the SfNavigationDrawer to the right. @@ -618,7 +618,7 @@ namespace NavigationDrawerWPF {% endtabs %} -![WPF Navigation Drawer shows in Right Side](concepts-and-features_images/wpf-navigation-drawer-right-position.png) +![WPF NavigationDrawer shows in Right Side](concepts-and-features_images/wpf-navigation-drawer-right-position.png) The following code example shows how to set the SfNavigationDrawer at the top. @@ -761,7 +761,7 @@ namespace NavigationDrawerWPF {% endtabs %} -![WPF Navigation Drawer shows in Top Position](concepts-and-features_images/wpf-navigation-drawer-top-position.png) +![WPF NavigationDrawer shows in Top Position](concepts-and-features_images/wpf-navigation-drawer-top-position.png) The following code example shows how to set the SfNavigationDrawer at the bottom. @@ -904,17 +904,17 @@ namespace NavigationDrawerWPF {% endtabs %} -![WPF Navigation Drawer shows in Bottom Position](concepts-and-features_images/wpf-navigation-drawer-bottom-position.png) +![WPF NavigationDrawer shows in Bottom Position](concepts-and-features_images/wpf-navigation-drawer-bottom-position.png) ## Swipe gesture and sensitivity -The WPF Navigation Drawer supports swipe gesture for opening and closing the drawer. +The NavigationDrawer supports swipe gesture for opening and closing the drawer. ### Enabling swipe gesture It can be enabled or disabled using the `EnableSwipeGesture` property. -N> This property is applicable only when the `DisplayMode` is `Default`. +N> This property is applicable only when the DisplayMode is Default. {% tabs %} @@ -991,9 +991,9 @@ namespace NavigationDrawerWPF ### Swipe sensitivity -In smaller screens, it may be difficult to swipe the drawer from the edge. In such cases, the swipe region can be increased using the `TouchThreshold` property. It can be set as below: +In smaller screens, may find it difficult to swipe the drawer from the edge, in such cases it can increase the swipe region using the `TouchThreshold` property. It can be set as below: -N> The `TouchThreshold` property is applicable only when the `DisplayMode` is `Default`. +N> The TouchThreshold property is applicable only when the DisplayMode is Default. {% tabs %} @@ -1072,7 +1072,7 @@ namespace NavigationDrawerWPF ## Customize animations -The `Transition` property specifies the animations for the DrawerView panel. The [Transition](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Transition) property has the following options: +The Transition property specifies the animations for the DrawerView panel. The [Transition](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Transition) property has the following options: * SlideOnTop * Push @@ -1080,7 +1080,7 @@ The `Transition` property specifies the animations for the DrawerView panel. The The default transition is [SlideOnTop](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.Transition.html) that draws the DrawerContent on top of the main content. -N> The `Transition` property is applicable only when the `DisplayMode` is `Default`. +N> The Transition property is applicable only when the DisplayMode is Default. {% tabs %} {% highlight xml %} @@ -1218,10 +1218,10 @@ namespace NavigationDrawerWPF {% endtabs %} -![WPF Navigation Drawer with Slidebar at Top Position](concepts-and-features_images/wpf-navigation-drawer-slide-bar.png) +![WPF NavigationDrawer with Slidebar at Top Position](concepts-and-features_images/wpf-navigation-drawer-slide-bar.png) -The following code example shows how to set [Transition](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Transition) as [Push](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.Transition.html) to `SfNavigationDrawer`. This transition moves the Drawer and main content simultaneously. +The following code example shows how to set [Transition](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Transition) as [Push](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.Transition.html) to SfNavigationDrawer. This transition moves the Drawer and main content simultaneously. {% tabs %} {% highlight xml %} @@ -1359,10 +1359,10 @@ namespace NavigationDrawerWPF {% endtabs %} -![WPF Navigation Drawer with Slidebar](concepts-and-features_images/wpf-navigation-drawer-slidebar-push.png) +![WPF NavigationDrawer with Slidebar](concepts-and-features_images/wpf-navigation-drawer-slidebar-push.png) -The following code example shows how to set [Transition](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Transition) as [Reveal](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.Transition.html) to `SfNavigationDrawer`. In this transition, the Drawer content is stable and the main content is moved to reveal the drawer content. +The following code example shows how to set [Transition](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_Transition) as [Reveal](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.Transition.html) to SfNavigationDrawer. In this transition, the Drawer content is stable and the main content is moved to reveal the drawer content. {% tabs %} @@ -1501,13 +1501,13 @@ namespace NavigationDrawerWPF {% endtabs %} -![WPF Navigation Drawer with Slidebar](concepts-and-features_images/wpf-navigation-drawer-slidebar-reveal.png) +![WPF NavigationDrawer with Slidebar](concepts-and-features_images/wpf-navigation-drawer-slidebar-reveal.png) ### Animation duration The [AnimationDuration](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_AnimationDuration) property sets the time span value, by which the DrawerContent can be brought to view. -N> The `AnimationDuration` property is applicable only when the `DisplayMode` is `Default`. +N> The AnimationDuration property is applicable only when the DisplayMode is Default. {% tabs %} {% highlight xml %} @@ -1582,7 +1582,7 @@ namespace NavigationDrawerWPF ## DrawerBackground -The [DrawerBackground](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html?tabs=tabid-1#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DrawerBackground) property is used to change the background color of the `SfNavigationDrawer`'s side pane. +The [DrawerBackground](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html?tabs=tabid-1#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DrawerBackground) property is used to change the background color of the SfNavigationDrawer's side pane. {% tabs %} {% highlight xml %} diff --git a/wpf/Navigation-Drawer/Different-display-modes.md b/wpf/Navigation-Drawer/Different-display-modes.md index e6d44e4b60..5248ddfaa1 100644 --- a/wpf/Navigation-Drawer/Different-display-modes.md +++ b/wpf/Navigation-Drawer/Different-display-modes.md @@ -1,6 +1,6 @@ ---- +--- layout: post -title: Display Modes in WPF Navigation Drawer | Syncfusion® +title: Display Modes in WPF NavigationDrawer | Syncfusion® description: Configure compact, expanded, and default display modes with responsive behavior, automatic mode switching, and collapsible navigation panes. platform: wpf control: NavigationDrawer @@ -9,15 +9,15 @@ documentation: ug # Display Modes in WPF Navigation Drawer (SfNavigationDrawer) -The WPF Navigation Drawer provides default, compact, and extended [display modes](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DisplayMode) to create a navigation menu for an application. Compact and extended display modes support populating the navigation menu using built items with different types. +The WPF Navigation drawer provides default, compact and extended [display modes](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DisplayMode) to create navigation menu for an application. Compact and Extended display modes support to populate the navigation menu using built items with different types. -See also [different item types](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#different-item-types) topic in the WPF Navigation Drawer. +See also [different item types](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#different-item-types) topic in Navigation Drawer. ## Compact display mode A navigation sidebar is shown as a narrow bar to the width set to the [CompactModeWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_CompactModeWidth) property. The navigation menu gets expanded on clicking the built-in toggle button and appears as an overlay above the main content to the width set to the [ExpandedModeWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ExpandedModeWidth) property. -N> The navigation menu will get toggled back to compact width when any interaction is performed on the main content area. +N> The navigation menu will get toggled back to compact width when any interaction performed on the main content area. {% tabs %} {% highlight xaml %} @@ -90,7 +90,7 @@ N> The navigation menu will get toggled back to compact width when any interacti {% endtabs %} -![WPF Navigation Drawer with Compact Mode](different-displaymode_images/wpf-navigation-drawer-compact.png) +![WPF NavigationDrawer with Compact Mode](different-displaymode_images/wpf-navigation-drawer-compact.png) ## Expanded display mode @@ -170,11 +170,11 @@ When the drawer menu is toggled using the built-in toggle button, the drawer men {% endtabs %} -![WPF Navigation Drawer with Expanded Mode](different-displaymode_images/wpf-navigation-drawer-expand.png) +![WPF NavigationDrawer with Expanded Mode](different-displaymode_images/wpf-navigation-drawer-expand.png) ## Auto display mode change -The WPF Navigation Drawer handles its display mode based on the values set to the [ExpandedModeThresholdWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ExpandedModeThresholdWidth) property. This can be enabled by setting the [AutoChangeDisplayMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_AutoChangeDisplayMode) property to `True`. +The Navigation Drawer handles its display mode based on the values set to the [ExpandedModeThresholdWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ExpandedModeThresholdWidth) property. This can be enabled by setting the [AutoChangeDisplayMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_AutoChangeDisplayMode) property to `True`. This switches the display mode to compact when the application window size is less than the [ExpandedModeThresholdWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ExpandedModeThresholdWidth) and switches to expanded mode when the application window size is larger. @@ -253,16 +253,16 @@ This switches the display mode to compact when the application window size is le {% endtabs %} -![WPF Navigation Drawer with Auto Mode](different-displaymode_images/wpf-navigation-drawer-auto-mode.gif) +![WPF NavigationDrawer with Auto Mode](different-displaymode_images/wpf-navigation-drawer-auto-mode.gif) N> View [sample](https://github.com/SyncfusionExamples/wpf-sfnavigationdrawer-samples/tree/main/Display_Mode) in GitHub ## Collapsible drawer mode -A collapsible drawer can be achieved using the WPF Navigation Drawer by setting the display mode to [Default mode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.DisplayMode.html). In this display mode, the drawer menu is populated using [custom views](https://help.syncfusion.com/wpf/navigation-drawer/custom-views). +A collapsible drawer can be achieved using the Navigation Drawer by setting the display mode to [Default mode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.DisplayMode.html). In this display mode, the drawer menu is populated using [custom views](https://help.syncfusion.com/wpf/navigation-drawer/custom-views). -See also [Custom Views](https://help.syncfusion.com/wpf/navigation-drawer/custom-views) topic in the WPF Navigation Drawer. +See also [Custom Views](https://help.syncfusion.com/wpf/navigation-drawer/custom-views) topic in Navigation Drawer. {% tabs %} {% highlight xml %} diff --git a/wpf/Navigation-Drawer/Getting-Started.md b/wpf/Navigation-Drawer/Getting-Started.md index 3853d9b3b2..afca71595a 100644 --- a/wpf/Navigation-Drawer/Getting-Started.md +++ b/wpf/Navigation-Drawer/Getting-Started.md @@ -1,15 +1,15 @@ --- layout: post -title: Getting Started with WPF Navigation Drawer | Syncfusion® -description: Learn how to get started with the Syncfusion® WPF Navigation Drawer control. Explore setup, features, examples, and customization options. +title: Getting Started with WPF NavigationDrawer | Syncfusion® +description: Learn how to get started with the Syncfusion® WPF NavigationDrawer control. Explore setup, features, examples, and customization options. platform: wpf control: NavigationDrawer documentation: ug --- -# Getting Started with WPF Navigation Drawer (SfNavigationDrawer) +# Getting Started with WPF NavigationDrawer (SfNavigationDrawer) -This section helps you to build your application with the [WPF Navigation Drawer](https://www.syncfusion.com/wpf-controls/navigation-drawer). +This section helps you to build your application with SfNavigationDrawer. ## Assembly Deployment @@ -28,28 +28,28 @@ Refer to this documentation to find more details about installing nuget packages ### Creating the project -Create a new WPF project in Visual Studio to display SfNavigationDrawer with data objects. +Create new WPF Project in Visual Studio to display SfNavigationDrawer with data objects. ### Adding SfNavigationDrawer from Toolbox Drag and drop the SfNavigationDrawer control from the Toolbox to your application. -![WPF Navigation Drawer shows in Toolbox](getting-started_images/wpf-navigation-drawer-toolbox.png) +![WPF NavigationDrawer shows in Toolbox](getting-started_images/wpf-navigation-drawer-toolbox.png) -Now, the Syncfusion® Controls for WPF XAML reference is added to the application references and the xmlns namespace code is generated in MainWindow.xaml as below. +Now, the Syncfusion® Controls for UWP XAML reference is added to the application references and the xmlns namespace code is generated in MainWindow.xaml as below. -![Displaying Reference of WPF Navigation Drawer](getting-started_images/wpf-navigation-drawer-reference.png) +![Displaying Reference of WPF NavigationDrawer](getting-started_images/wpf-navigation-drawer-reference.png) -![WPF Navigation Drawer with Namespace](getting-started_images/wpf-navigation-drawer-namespace.png) +![WPF NavigationDrawer with Namespace](getting-started_images/wpf-navigation-drawer-namespace.png) ### Adding control manually in XAML -In order to add the control manually in XAML, do the below steps: +In order to add control manually in XAML, do the below steps, -1. Add the following required assembly references to the project: +1. Add the below required assembly references to the project, * Syncfusion.SfNavigationDrawer.WPF -2. Import Syncfusion® WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page. -3. Declare SfNavigationDrawer control in the XAML page. +2. Import Syncfusion® WPF schema **http://schemas.syncfusion.com/wpf** in XAML page. +3. Declare SfNavigationDrawer control in XAML page. {% capture codesnippet1 %} {% tabs %} @@ -72,12 +72,12 @@ In order to add the control manually in XAML, do the below steps: ### Adding control manually in C# -In order to add the control manually in C#, do the below steps: +In order to add control manually in C#, do the below steps, -1. Add the following required assembly references to the project: +1. Add the below required assembly references to the project, * Syncfusion.SfNavigationDrawer.WPF -2. Import the SfNavigationDrawer namespace **Syncfusion.UI.Xaml.NavigationDrawer** . -3. Create the SfNavigationDrawer control instance and add it to the Page. +2. Import SfTreeView namespace **Syncfusion.UI.Xaml.NavigationDrawer** . +3. Create SfNavigationDrawer control instance and add it to the Page. {% capture codesnippet2 %} {% tabs %} @@ -144,7 +144,7 @@ namespace NavigationDrawerWPF The sidebar menu can be populated using the built-in items. The items will be of type [NavigationItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.NavigationItem.html) having many properties for customization. -See also [Different display modes](https://help.syncfusion.com/wpf/navigation-drawer/different-display-modes) topic in the WPF Navigation Drawer. +See also [Different display modes](https://help.syncfusion.com/wpf/navigation-drawer/different-display-modes) topic in SfNavigationDrawer. {% tabs %} {% highlight xaml %} @@ -347,6 +347,6 @@ See also [Different display modes](https://help.syncfusion.com/wpf/navigation-dr {% endtabs %} -![WPF Navigation Drawer](getting-started_images/wpf-navigation-drawer.png) +![WPF NavigationDrawer](getting-started_images/wpf-navigation-drawer.png) N> View [sample](https://github.com/SyncfusionExamples/wpf-sfnavigationdrawer-samples/tree/main/Getting_Started) in GitHub diff --git a/wpf/Navigation-Drawer/Handling-Selection.md b/wpf/Navigation-Drawer/Handling-Selection.md index b37cdad34f..15f077d74a 100644 --- a/wpf/Navigation-Drawer/Handling-Selection.md +++ b/wpf/Navigation-Drawer/Handling-Selection.md @@ -1,6 +1,6 @@ ---- +--- layout: post -title: Selection in WPF Navigation Drawer | Syncfusion® +title: Selection in WPF NavigationDrawer | Syncfusion® description: Get or set the selected navigation item when working with built-in navigation items or custom data-bound objects. platform: wpf control: NavigationDrawer @@ -9,11 +9,11 @@ documentation: ug # Selection in WPF Navigation Drawer (SfNavigationDrawer) -This section explains the handling of selection in the WPF Navigation Drawer. +This section explains the handling of selection in SfNavigationDrawer. -The [SelectedItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_SelectedItem) property is used for getting or setting the currently selected item of the WPF Navigation Drawer. There are two cases in accessing the `SelectedItem` property. +The [SelectedItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_SelectedItem) property is used for getting or setting the currently selected item of the Navigation Drawer. There are two cases in accessing the SelectedItem property. -The first is when the WPF Navigation Drawer is populated with `NavigationItem`, then the `SelectedItem` property is of type `NavigationItem`. +The first is when the Navigation Drawer is populated with NavigationItems, then the SelectedItem property is of type NavigationItem. {% tabs %} @@ -25,7 +25,7 @@ var selectedItem = this.navigationDrawer.SelectedItem as NavigationItem; {% endtabs %} -The other one is when the WPF Navigation Drawer is bound to a collection of custom objects, the `SelectedItem` is of the type of the custom object. +The other one is when the Navigation Drawer is bound to a collection of custom objects, the SelectedItem is of the type of the custom object. {% tabs %} diff --git a/wpf/Navigation-Drawer/Header-and-Footer.md b/wpf/Navigation-Drawer/Header-and-Footer.md index 1ce33dc4bd..12fb63dfbb 100644 --- a/wpf/Navigation-Drawer/Header-and-Footer.md +++ b/wpf/Navigation-Drawer/Header-and-Footer.md @@ -1,7 +1,7 @@ ---- +--- layout: post -title: Header and Footer in WPF Navigation Drawer | Syncfusion® -description: Customize the WPF Navigation Drawer header, footer, toggle button, and create fully customized header and footer views. +title: Header and Footer in WPF NavigationDrawer | Syncfusion® +description: Customize the navigation drawer header, footer, toggle button, and create fully customized header and footer views. platform: wpf control: NavigationDrawer documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Header and Footer in WPF Navigation Drawer (SfNavigationDrawer) -The navigation menu's header and footer parts are fully customizable. This section explains the customization of the header and footer. +The Navigation menu's header and footer parts are fully customizable. This section explains the customization of header and footer. ## Customizing the Toggle button and Header -The WPF Navigation Drawer built-in toggle button and header can be customized using the [ToggleButtonContentTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ToggleButtonContentTemplate), [ToggleButtonIconTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ToggleButtonIconTemplate), and [IsToggleButtonVisible](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_IsToggleButtonVisible) properties. +The Navigation Drawer built-in toggle button and header can be customized using the [ToggleButtonContentTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ToggleButtonContentTemplate), [ToggleButtonIconTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ToggleButtonIconTemplate), [IsToggleButtonVisible](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_IsToggleButtonVisible) properties. {% tabs %} {% highlight xaml %} @@ -97,11 +97,11 @@ The WPF Navigation Drawer built-in toggle button and header can be customized us {% endtabs %} -![Customizing Header in WPF Navigation Drawer](Header_and_Footer_images/wpf-navigation-drawer-header-customization.png) +![Customizing Header in WPF NavigationDrawer](Header_and_Footer_images/wpf-navigation-drawer-header-customization.png) ## Customizing the Footer -The WPF Navigation Drawer's Footer can be customized using the [FooterItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_FooterItems) property. `FooterItems` can be loaded with `NavigationItem` collection. +The Navigation Drawer's Footer can be customized using the [FooterItems](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_FooterItems) property. `FooterItems` can be loaded with NavigationItem collection. {% tabs %} {% highlight xaml %} @@ -196,11 +196,11 @@ The WPF Navigation Drawer's Footer can be customized using the [FooterItems](htt {% endtabs %} -![Customizing Footer in WPF Navigation Drawer](Header_and_Footer_images/wpf-navigation-drawer-footer-customization.png) +![Customizing Footer in WPF NavigationDrawer](Header_and_Footer_images/wpf-navigation-drawer-footer-customization.png) ## Creating a custom header and footer -The header and footer part can also be customized by loading a custom view. This can be achieved in `Default` display mode. Using the [DrawerHeaderView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DrawerHeaderView) and [DrawerFooterView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DrawerFooterView) properties, custom views can be loaded to the header and footer. +The header and footer part can also be customized by loading a custom view. This can be achieved in `Default` display mode. Using the [DrawerFooterView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DrawerHeaderView) and [DrawerFooterView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DrawerFooterView) properties, custom views can be loaded to the header and footer. See also [Custom views](https://help.syncfusion.com/wpf/navigation-drawer/custom-views) section for creating a custom navigation menu. diff --git a/wpf/Navigation-Drawer/Keyboard-Support.md b/wpf/Navigation-Drawer/Keyboard-Support.md index 90d417e7a0..a5115a86a5 100644 --- a/wpf/Navigation-Drawer/Keyboard-Support.md +++ b/wpf/Navigation-Drawer/Keyboard-Support.md @@ -1,21 +1,21 @@ ---- +--- layout: post -title: Keyboard Support in WPF Navigation Drawer | Syncfusion® +title: Keyboard Support in WPF NavigationDrawer | Syncfusion® description: Navigate, focus, and select navigation items efficiently using built-in keyboard shortcuts and accessibility support. platform: wpf control: NavigationDrawer documentation: ug --- -# Keyboard Support in WPF Navigation Drawer (SfNavigationDrawer) +# Keyboard Support in WPF NavigationDrawer (SfNavigationDrawer) -This section describes the keyboard support in the WPF Navigation Drawer. +This section describes the keyboard support in SfNavigationDrawer. -* **Tab** - This key can be used to navigate between the toggle button, navigation items, footer items, and the main content view. -* **Up** - This key is used to navigate to the previous `NavigationItem`. -* **Down** - This key is used to navigate to the next `NavigationItem`. -* **Enter and Space** - These keys are used to select the currently focused item. +* **Tab** - This key can be used to navigate between the toggle button, navigation items and footer items and the main content view. +* **Up** - This key is used to Navigate to the previous NavigationItem. +* **Down** - This key is used to Navigate to the next NavigationItem. +* **Enter and Space** - This key is used to select the currently focused item. -![Keyboard Support in WPF Navigation Drawer](Keyboard_Support_image/Keyboard_Support.gif) +![Keyboard Support in WPF NavigationDrawer](Keyboard_Support_image/Keyboard_Support.gif) N> View [sample](https://github.com/SyncfusionExamples/wpf-sfnavigationdrawer-samples/tree/main/KeyboardSupportSample) in GitHub \ No newline at end of file diff --git a/wpf/Navigation-Drawer/Overview.md b/wpf/Navigation-Drawer/Overview.md index a8b54e3b89..ae7882bebf 100644 --- a/wpf/Navigation-Drawer/Overview.md +++ b/wpf/Navigation-Drawer/Overview.md @@ -1,24 +1,24 @@ --- layout: post -title: About Syncfusion® WPF Navigation Drawer Control | Syncfusion® -description: Learn about the introduction of Syncfusion® Essential Studio WPF Navigation Drawer control and more details. +title: About Syncfusion® WPF NavigationDrawer Control | Syncfusion® +description: Learn about the introduction of Syncfusion® Essential Studio WPF NavigationDrawer control and more details. platform: wpf control: NavigationDrawer documentation: ug --- -# About Syncfusion® WPF Navigation Drawer Control +# About Syncfusion® WPF NavigationDrawer (SfNavigationDrawer) Control -The [WPF Navigation Drawer](https://www.syncfusion.com/wpf-controls/navigation-drawer) control is a sidebar navigation view that is used to create a navigation menu for easy navigation. The WPF Navigation Drawer is implemented through the `SfNavigationDrawer` class. It provides compact and extended display modes with built-in navigation view items with the ability to switch between both modes based on the available size. It also provides default mode which allows to have a custom pane view. +The WPF Navigation Drawer control is a sidebar navigation view that is used to create a navigation menu for easy navigation. It provides compact and extended display modes with built-in navigation view items with ability to switch between both modes based on available size. It also provides default mode which allows to have a custom pane view. -![Overview of WPF Navigation Drawer](overview_images/wpf-navigation-drawer-overview.png) +![Overview of WPF NavigationDrawer](overview_images/wpf-navigation-drawer-overview.png) SfNavigationDrawer {:.caption} ## Use case scenarios -The Navigation Drawer is used in applications where navigating to the major module or page is a basic requirement. Here are the following apps that signify the importance of navigating through pages: +The Navigation Drawers are used in applications where navigating to the major module or page is a basic requirement. The Navigation Drawer is available in the following apps that signify the importance of navigating through pages: 1. Facebook 2. Play Store @@ -27,21 +27,21 @@ The Navigation Drawer is used in applications where navigating to the major modu ### Key features -* A sidebar menu to provide Modern UI navigation for the application. -* The navigation menu can be placed on any side of the screen. -* Compact and extended display modes with support to best fit the content based on the available size. -* Built-in navigation menu items: tab, button, header, multi-level hierarchal items, and footer items. -* Custom views can also be added as the header and footer of the drawer. +* A sidebar menu to provide Modern UI navigation for application. +* Navigation menu can be placed on any side of the screen. +* Compact and extended display modes with support to best fit the content based on available size. +* Built-in navigation menu items: tab, button, header, multi-level hierarchal items and footer items. +* Custom views also can be added as the header and footer of the drawer. ### Visual Structure -This section describes the visual elements of the WPF Navigation Drawer and defines terms and concepts used in the `DisplayMode`. +This section describes the visual elements of the NavigationDrawer control and defines terms and concepts used in the DisplayMode. -![WPF Navigation Drawer Structure](overview_images/wpf-navigation-drawer-structure.png) +![WPF NavigationDrawer Structure](overview_images/wpf-navigation-drawer-structure.png) * **Header** — Represents the header of the drawer * **Footer** — Represents the footer of the drawer. -* **Navigation Drawer Items** — Built-in items used to populate the items in the drawer pane body and footer. +* **NavigationDrawer Items** — Built-in items used to populate the items in the drawer pane body and footer. * **ToggleButton** — Built-in toggle button used to collapse and expand the drawer menu. \ No newline at end of file diff --git a/wpf/Navigation-Drawer/Populating-data.md b/wpf/Navigation-Drawer/Populating-data.md index 87062636bc..a09324ad46 100644 --- a/wpf/Navigation-Drawer/Populating-data.md +++ b/wpf/Navigation-Drawer/Populating-data.md @@ -1,6 +1,6 @@ ---- +--- layout: post -title: Populate Data in WPF Navigation Drawer | Syncfusion® +title: Populate Data in WPF NavigationDrawer | Syncfusion® description: Populate navigation menus using built-in items, data binding, hierarchical data, custom icons, and multiple navigation item types. platform: wpf control: NavigationDrawer @@ -13,18 +13,18 @@ This section explains how to populate the drawer menu. ## Populating using built-in items -The WPF Navigation Drawer sidebar provides built-in item support of type [NavigationItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.NavigationItem.html) that can be populated using the `Items` property. +The WPF Navigation Drawer sidebar provides a built-in items support of type [NavigationItem](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.NavigationItem.html) that can be populated using the [Items] property. The below properties are available in the `NavigationItem` and can be used to define each item of the navigation menu. -* **Header** - Represents the content of the `NavigationItem`. -* **Icon** - Represents the icon in the `NavigationItem`. -* **IconTemplate** - Used to display the custom icon in the `NavigationItem`. Also see the [IconTemplate](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#icontemplate) section. -* **IconMemberPath** - Used to display the icon for sub-items, while providing the `ItemsSource`. -* **DisplayMemberPath** - Used to display the content for sub-items, while providing the `ItemsSource`. Also see the [Hierarchical Data Binding](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#hierarchical-data-binding) section. +* **Header** - Represents the content of the `NavigationItem.` +* **Icon** - Represents the icon in the `NavigationItem.` +* **IconTemplate** - Used to display the custom icon in the `NavigationItem.` Also see the [IconTemplate](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#icontemplate) section. +* **IconMemberPath** - Used to display the icon for sub-items, while providing the `ItemsSource.` +* **DisplayMemberPath** - Used to display the content for sub-items, while providing the `ItemsSource.` Also see the [Hierarchical Data Binding](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#hierarchical-data-binding) section. * **ExpanderTemplate** - Used to provide a custom view for the expander icon in both collapsed and expanded state. * **Command** — Executes when the item gets clicked. See also [Commands](https://help.syncfusion.com/wpf/navigation-drawer/commands-and-events) section. -* **CommandParameter** — The [CommandParameter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.NavigationItem.html#Syncfusion_UI_Xaml_NavigationDrawer_NavigationItem_CommandParameter) is a user-defined data value that can be passed to the `Command` when it is executed. +* **CommandParameter** — [CommandParameter](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.NavigationItem.html#Syncfusion_UI_Xaml_NavigationDrawer_NavigationItem_CommandParameter) is user defined data value that can be passed to the `Command` when it is executed. * **IsChildSelected** — Gets whether any sub item is selected or not. * **ItemType** — Defines the type of navigation item. See also [Different item types](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#different-item-types) section. * **IsExpanded** — Gets whether the item is in expanded or collapsed state. @@ -235,13 +235,13 @@ The below properties are available in the `NavigationItem` and can be used to de {% endtabs %} -![Populating with Data in WPF Navigation Drawer](populating_data_images/wpf-navigation-drawer-item.png) +![Populating with Data in WPF NavigationDrawer](populating_data_images/wpf-navigation-drawer-item.png) N> View [sample](https://github.com/SyncfusionExamples/wpf-sfnavigationdrawer-samples/tree/main/Populating_With_Items) in GitHub ### IconTemplate -The `IconTemplate` is used to provide the custom icon for the `NavigationItem`. +The IconTemplate is used to provide the custom icon for the NavigationItem. ### Model @@ -372,27 +372,27 @@ The `IconTemplate` is used to provide the custom icon for the `NavigationItem`. {% endtabs %} -![WPF Navigation Drawer with Custom Icon](populating_data_images/wpf-navigation-drawer-custom-icon.png) +![WPF NavigationDrawer with Custom Icon](populating_data_images/wpf-navigation-drawer-custom-icon.png) ### Different item types The WPF Navigation Drawer has four built-in item types that can be set to each `NavigationItem`. -* **Tab** — Interactions can be performed in this type and it can have selection. This type supports multi-level population having an expand and collapse icon. -* **Button** — This type is similar to a button control behavior. Interactions can be performed and it does not have selection. This type supports multi-level population having an expand and collapse icon. -* **Header** — This item type does not have any interaction or selection and acts like a header label. This item gets visible only in the drawer menu expanded state. This item can be added as a sub item also but cannot have a sub item. -* **Separator** — This item type does not have any interaction or selection and acts as a separator line. This item can be added as a sub item also but cannot have a sub item. +* **Tab** — Interactions can be performed in this type and can have selection. This type supports multi-level population having an expand and collapse icon. +* **Button** — This type is similar to a button control behavior.Interactions can be performed and does not have selection. This type supports multi-level population having an expand and collapse icon. +* **Header** — This item type does not have any interaction or selection and acts like a header label. This item will gets visible only in drawer menu expanded state. This item can be added as a sub item also but cannot have a sub item. +* **Separator** — This item type does not have any interaction or selection and acts a separator line. This item can be added as a sub item also but cannot have a sub item. See also [Populating using built in items](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#populating-using-built-in-items) section. -N> The default value of `ItemType` is `Tab`. +N> ItemType default value is Tab. ## Data Binding -The drawer menu can be populated by the [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemsSource) property. It can support a bound collection of objects through the `ItemsSource`. +The drawer menu can be populated by [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemsSource) property. It can support, bound collection of objects through the `ItemsSource`. -The [ItemTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemTemplate) property is used to customize the content of the item, while using the `ItemsSource` and the icon of the item is shown by the [IconMemberPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_IconMemberPath) property. +[ItemTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemTemplate) property used to customize the content of the item, while using the ItemsSource and the icon of the item showing by used the [IconMemberPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_IconMemberPath) property. See also [Hierarchical Data Binding](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#hierarchical-data-binding) section. @@ -536,14 +536,14 @@ See also [Hierarchical Data Binding](https://help.syncfusion.com/wpf/navigation- {% endtabs %} -![Populating with Data in WPF Navigation Drawer](populating_data_images/wpf-navigation-drawer-data-binding.png) +![Populating with Data in WPF NavigationDrawer](populating_data_images/wpf-navigation-drawer-data-binding.png) ## Hierarchical Data Binding -The control populates the items using the [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemsSource), and also allows the sub items. +The control populates the items using the [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemsSource), also it allows the sub items. -When using the `ItemsSource`, the content of the item is shown by the [DisplayMemberPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DisplayMemberPath) property and the [ItemContainerStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemContainerStyle) property is used to customize the items and allows to set the `ItemsSource` and `DisplayMemberPath` properties of the sub items. +When using the `ItemsSource` to show the content of the item achieved by [DisplayMemberPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_DisplayMemberPath) property and [ItemsContainerStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_ItemContainerStyle) property used to customize the items and allows to set the `ItemsSource` and `DisplayMemberPath` properties of the sub items. ### Model @@ -681,14 +681,14 @@ When using the `ItemsSource`, the content of the item is shown by the [DisplayMe {% endtabs %} -![Hierarchical Data Binding in WPF Navigation Drawer](populating_data_images/wpf-navigation-drawer-hierarchical-data-binding.png) +![Hierarchical Data Binding in WPF NavigationDrawer](populating_data_images/wpf-navigation-drawer-hierarchical-data-binding.png) N> View [sample](https://github.com/SyncfusionExamples/wpf-sfnavigationdrawer-samples/tree/main/Hierarchical_Data_Binding) in GitHub ## IndentationWidth -This property is used to change the horizontal position of sub items. The left margin of the sub items depends on the [IndentationWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_IndentationWidth) property. +This property used to change the horizontal position of sub items. Left margin of the sub items depends on the [IndentationWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.NavigationDrawer.SfNavigationDrawer.html#Syncfusion_UI_Xaml_NavigationDrawer_SfNavigationDrawer_IndentationWidth) property. {% tabs %} {% highlight xaml %} @@ -818,10 +818,10 @@ This property is used to change the horizontal position of sub items. The left m See also [Populating using built in items](https://help.syncfusion.com/wpf/navigation-drawer/populating-data#populating-using-built-in-items) section. -![Changing Horizontal Position of WPF Navigation Drawer Items](populating_data_images/wpf-navigation-drawer-position.png) +![Changing Horizontal Position of WPF NavigationDrawer Items](populating_data_images/wpf-navigation-drawer-position.png) ## Popup support The sub-items will be displayed in the popup when the drawer menu is collapsed in the compact and expanded display modes. -![WPF Navigation Drawer with Popup Menu](populating_data_images/wpf-navigation-drawer-popup-menu.png) +![WPF NavigationDrawer with Popup Menu](populating_data_images/wpf-navigation-drawer-popup-menu.png) diff --git a/wpf/Radial-Menu/Appearance-and-Styling.md b/wpf/Radial-Menu/Appearance-and-Styling.md index 4b8c1cb727..99af88fcb1 100644 --- a/wpf/Radial-Menu/Appearance-and-Styling.md +++ b/wpf/Radial-Menu/Appearance-and-Styling.md @@ -11,7 +11,7 @@ documentation: ug ## Radius -RadiusX and RadiusY properties in the WPF Radial Menu can be used to define the X and Y axis radius to render the control. +The `RadiusX` and `RadiusY` properties in the WPF Radial Menu can be used to define the X and Y axis radius to render the control. {%highlight xaml%} @@ -24,7 +24,7 @@ RadiusX and RadiusY properties in the WPF Radial Menu can be used to define the ## CenterRimRadiusFactor -CenterRimRadiusFactor property can be used to define the radius of the center rim (inner circle). +The `CenterRimRadiusFactor` property can be used to define the radius of the center rim (inner circle). {%highlight xaml%} @@ -41,7 +41,7 @@ CenterRimRadiusFactor property can be used to define the radius of the center ri ## RimBackground -RimBackground property used to fill the outer rim (outer circle). +The `RimBackground` property is used to fill the outer rim (outer circle). {%highlight xaml%} @@ -62,7 +62,7 @@ The WPF Radial Menu outer ring filled with color ## RimActiveBrush -RimActiveBrush property used to fill the expander rim and this expander rim only visible when the items have sub items. +The `RimActiveBrush` property is used to fill the expander rim and this expander rim is only visible when the items have sub items. {%highlight xaml%} @@ -81,7 +81,7 @@ RimActiveBrush property used to fill the expander rim and this expander rim only ##RimInactiveBrush -`RimInactiveBrush` property used to fill the expander rim item background when the corresponding menu item doesn’t have sub items. +The `RimInactiveBrush` property is used to fill the expander rim item background when the corresponding menu item does not have sub items. {%highlight xaml%} @@ -106,7 +106,7 @@ RimActiveBrush property used to fill the expander rim and this expander rim only ## RimHoverBrush -The RimHoverBrush property can be used to fill the expander rim while the pointer is hovering over it. +The `RimHoverBrush` property can be used to fill the expander rim while the pointer is hovering over it. {%highlight xaml%} @@ -123,7 +123,7 @@ The RimHoverBrush property can be used to fill the expander rim while the pointe ## IsExpanderVisible -Expander arrow in the OuterRim of `SfRadialMenu` visibility can be changed by `IsExpanderVisible` property of `SfRadialMenuItem`. By default, `IsExpanderVisible` value is True. +The expander arrow in the OuterRim of `SfRadialMenu` visibility can be changed by the `IsExpanderVisible` property of `SfRadialMenuItem`. By default, the value of `IsExpanderVisible` is `True`. {%highlight xaml%} @@ -151,7 +151,7 @@ Expander arrow in the OuterRim of `SfRadialMenu` visibility can be changed by `I ## RimRadiusFactor -RimRadiusFactor property of WPF Radial Menu can be used to set the radius of the items panel. Lowest values to this factor increases the thickness of the outer rim. Highest values to this factor decreases the thickness of the outer rim. +The `RimRadiusFactor` property of the WPF Radial Menu can be used to set the radius of the items panel. Lowest values to this factor increase the thickness of the outer rim. Highest values to this factor decrease the thickness of the outer rim. {%highlight xaml%} @@ -168,7 +168,7 @@ RimRadiusFactor property of WPF Radial Menu can be used to set the radius of the ## Navigation Button Style -The navigation button displayed in the center of WPF Radial Menu can be styled using NavigationButtonStyle property. +The navigation button displayed in the center of the WPF Radial Menu can be styled using the `NavigationButtonStyle` property. {%highlight xaml%} @@ -231,7 +231,7 @@ Each `SfRadialMenuItem` can be set a different background color using `MenuBackg ## MenuMouseOverBackgroundColor -Each SfRadialMenuItem can be set with a different background color on mouse over by using the MenuMouseOverBackgroundColor property. Before that, the ShowMouseOverStyle property should be set to true. +Each `SfRadialMenuItem` can be set with a different background color on mouse over by using the `MenuMouseOverBackgroundColor` property. Before that, the `ShowMouseOverStyle` property should be set to `true`. {%highlight xaml%} diff --git a/wpf/Radial-Menu/Icon.md b/wpf/Radial-Menu/Icon.md index d7abdb0d84..1b6c15a6ef 100644 --- a/wpf/Radial-Menu/Icon.md +++ b/wpf/Radial-Menu/Icon.md @@ -9,7 +9,7 @@ documentation: ug # Icon Customization in WPF Radial Menu (SfRadialMenu) -The Icon property of the WPF Radial Menu is used to customize the icon displayed in the center of WPF Radial Menu circle. +The `Icon` property of the WPF Radial Menu is used to customize the icon displayed in the center of the WPF Radial Menu circle. {%highlight xaml%} diff --git a/wpf/Radial-Menu/Layout-Types.md b/wpf/Radial-Menu/Layout-Types.md index adae85d405..04b9aa9ddc 100644 --- a/wpf/Radial-Menu/Layout-Types.md +++ b/wpf/Radial-Menu/Layout-Types.md @@ -8,7 +8,7 @@ documentation: ug --- # Layout Types in WPF Radial Menu (SfRadialMenu) -There are two different layout types available for WPF Radial Menu. +There are two different layout types available for the WPF Radial Menu. * Default * Custom @@ -17,15 +17,15 @@ There are two different layout types available for WPF Radial Menu. ## Default -Number of segments in the panel is determined by children count in the level. Hence segment count in each hierarchical level differs. RadialMenuItem is arranged in the sequential order as added in the WPF Radial Menu. +The number of segments in the panel is determined by the children count in the level. Hence, the segment count in each hierarchical level differs. `RadialMenuItem` is arranged in the sequential order as added in the WPF Radial Menu. ## Custom -Number of segments in the panel is determined by VisibleSegmentsCount property. Hence segment count in all the hierarchical levels are same. RadialMenuItem is arranged in any order based on the SegmentIndex property. +The number of segments in the panel is determined by the `VisibleSegmentsCount` property. Hence, the segment count in all the hierarchical levels is the same. `RadialMenuItem` is arranged in any order based on the `SegmentIndex` property. ### VisibleSegmentsCount -VisibleSegmentsCount property is used to specify the number of segments available in circular panel. When children count is greater than the value given in VisibleSegmentsCount property then overflowing children are not arranged in the panel. When children count is lesser than VisibleSegmentsCount property then remaining segments are left free. +The `VisibleSegmentsCount` property is used to specify the number of segments available in the circular panel. When the children count is greater than the value given in the `VisibleSegmentsCount` property, then the overflowing children are not arranged in the panel. When the children count is less than the `VisibleSegmentsCount` property, then the remaining segments are left free. {%tabs%} {%highlight xaml%} @@ -45,7 +45,7 @@ radialMenu.LayoutType = LayoutType.Custom; ### SegmentIndex -SegmentIndex property is used to specify the index of the SfRadialMenuItem in circular panel. Based on the index, the RadialMenuItems are inserted in the segment. When SegmentIndex is not specified for a RadialMenuItem (or) two or more RadialMenuItems having the same SegmentIndex, then the menu item is arranged in the next available free segment. +The `SegmentIndex` property is used to specify the index of the `SfRadialMenuItem` in the circular panel. Based on the index, the `RadialMenuItem`s are inserted in the segment. When `SegmentIndex` is not specified for a `RadialMenuItem` (or) two or more `RadialMenuItem`s have the same `SegmentIndex`, then the menu item is arranged in the next available free segment. {%tabs%} {%highlight xaml%} diff --git a/wpf/Radial-Menu/Overview.md b/wpf/Radial-Menu/Overview.md index 399825dc89..87e0e92688 100644 --- a/wpf/Radial-Menu/Overview.md +++ b/wpf/Radial-Menu/Overview.md @@ -1,7 +1,7 @@ --- layout: post title: About Syncfusion® WPF Radial Menu Control | Syncfusion® -description: Learn about the introduction of Syncfusion® Essential Studio WPF Radial Menu (SfRadialMenu) control and more details. +description: Learn about the introduction of Syncfusion® Essential Studio WPF Radial Menu control and more details. platform: wpf control: SfRadialMenu documentation: ug @@ -9,11 +9,11 @@ documentation: ug # About Syncfusion® WPF Radial Menu (SfRadialMenu) Control -The WPF Radial Menu displays a hierarchical menu in a circular layout. Typically used as a context menu, it can expose more menu items in the same space than traditional menus. +The [WPF Radial Menu](https://www.syncfusion.com/wpf-controls/radial-menu) displays a hierarchical menu in a circular layout. The WPF Radial Menu is implemented through the `SfRadialMenu` class. Typically used as a context menu, it can expose more menu items in the same space than traditional menus. ## Key Features -* **Items Source** – Any business object collection can be bound to control. +* **Items Source** – Any business object collection can be bound to the control. * **Commanding** – Each item can be bound to a command that could perform an action. * **Color Palette** – Easy to form radial color palette layout. diff --git a/wpf/Radial-Menu/Populating-Color-Palette.md b/wpf/Radial-Menu/Populating-Color-Palette.md index 40aa1f177d..dab4bdb4ff 100644 --- a/wpf/Radial-Menu/Populating-Color-Palette.md +++ b/wpf/Radial-Menu/Populating-Color-Palette.md @@ -9,7 +9,7 @@ documentation: ug # Color Palette in WPF Radial Menu (SfRadialMenu) -Color Palette can be formed in WPF Radial Menu with the Radial Color Items. +A color palette can be formed in the WPF Radial Menu with the radial color items. {%highlight xaml%} diff --git a/wpf/Radial-Menu/Populating-Items.md b/wpf/Radial-Menu/Populating-Items.md index 2b3b130442..31e1c185b3 100644 --- a/wpf/Radial-Menu/Populating-Items.md +++ b/wpf/Radial-Menu/Populating-Items.md @@ -11,9 +11,9 @@ documentation: ug ## Items Source -Radial menu items can be populated with the business object collection. Let us create a WPF Radial Menu which will show the list of Application commands. +Radial menu items can be populated with the business object collection. Let us create a WPF Radial Menu which will show the list of application commands. -The Application command model look likes below. +The Application command model looks like below. @@ -86,7 +86,7 @@ Populate the Application command collection as follows. {%endhighlight%} -Bind the Application command collection to the ItemsSource property of the WPF Radial Menu control. +Bind the Application command collection to the `ItemsSource` property of the WPF Radial Menu control. {%highlight xaml%} @@ -110,7 +110,7 @@ This will populate the WPF Radial Menu as shown in the image below. ## Display Member Path -The DisplayMemberPath property of the WPF Radial Menu is used to specify the business model property displayed in item headers. +The `DisplayMemberPath` property of the WPF Radial Menu is used to specify the business model property displayed in item headers. {%highlight xaml%} @@ -135,7 +135,7 @@ Displaying member path ## Command Path -The CommandPath property of the WPF Radial Menu specifies the command in the business object that is bound to a menu item when items are populated through data binding. +The `CommandPath` property of the WPF Radial Menu specifies the command in the business object that is bound to a menu item when items are populated through data binding. {%highlight xaml%} @@ -152,7 +152,7 @@ The CommandPath property of the WPF Radial Menu specifies the command in the bus ## Item Template -The ItemTemplate property of the WPF Radial Menu is used to customize the appearance and content of item headers. +The `ItemTemplate` property of the WPF Radial Menu is used to customize the appearance and content of item headers. {%highlight xaml%} diff --git a/wpf/Radial-Menu/ToolTip.md b/wpf/Radial-Menu/ToolTip.md index 6a85ca8581..4f395a303c 100644 --- a/wpf/Radial-Menu/ToolTip.md +++ b/wpf/Radial-Menu/ToolTip.md @@ -9,11 +9,11 @@ documentation: ug # ToolTips in WPF Radial Menu (SfRadialMenu) -Tooltip support available for the WPF Radial Menu items. This will show when mouse over the corresponding item. +Tooltip support is available for the WPF Radial Menu items. This will show when the mouse hovers over the corresponding item. ToolTip Placement -Position of the tooltip displayed relative to the WPF Radial Menu can be customized using ToolTipPlacement property. The following tooltip positions are supported: +The position of the tooltip displayed relative to the WPF Radial Menu can be customized using the `ToolTipPlacement` property. The following tooltip positions are supported: * None: Hides the tooltip. * Left: Displays the tooltip to the left of the WPF Radial Menu.