From c307124498360e61fc11fe3e7ce2004d4c2663be Mon Sep 17 00:00:00 2001 From: Mahalakshmi Venkatesan Date: Tue, 18 Oct 2022 11:02:45 +0530 Subject: [PATCH 1/4] Corrected the indent issues in the UG documentation --- wpf/Add-Syncfusion-Controls.md | 53 +++++--- wpf/Autocomplete/Getting-Started.md | 21 +++- wpf/Badge/Getting-Started.md | 6 + wpf/Badge/Overview.md | 14 +-- wpf/Breadcrumb/Command-Binding.md | 9 ++ wpf/Breadcrumb/Getting-Started.md | 15 +++ wpf/Breadcrumb/Populating-Data.md | 30 +++++ wpf/Breadcrumb/Progress-Bar.md | 16 ++- wpf/Breadcrumb/Template-Customizing.md | 9 ++ wpf/Bullet-Graph/Caption.md | 3 + wpf/Bullet-Graph/Labels.md | 3 + wpf/Bullet-Graph/Ticks.md | 3 + wpf/Busy-Indicator/Overview.md | 8 +- wpf/Button/Getting-Started.md | 6 + wpf/Calculator/Getting-Started.md | 6 + wpf/Calculator/Overview.md | 8 +- wpf/Calendar/Getting-Started.md | 33 +++-- wpf/Card-View/Getting-Started.md | 15 ++- wpf/Card-View/Overview.md | 12 +- wpf/Carousel/Getting-Started.md | 33 +++-- wpf/CheckedListBox/Getting-Started.md | 37 ++++-- wpf/Chromeless-Window/Getting-Started.md | 10 +- .../TitleBarCustomization.md | 10 +- wpf/Circular-ProgressBar/Getting-Started.md | 14 ++- wpf/Color-Palette/Getting-Started.md | 10 +- wpf/Color-Palette/Overview.md | 6 +- wpf/Color-Picker-Palette/Getting-Started.md | 8 +- wpf/Color-Picker/Getting-Started.md | 29 +++-- wpf/ComboBox/Getting-Started.md | 14 +++ wpf/ComboBox/MultiSelection-Support.md | 9 ++ wpf/Currency-TextBox/Getting-Started.md | 9 ++ wpf/DataPager/DataBinding.md | 8 ++ wpf/DataPager/Getting-Started.md | 29 +++-- wpf/DatePicker/Getting-Started.md | 18 ++- wpf/DateTimePicker/Getting-Started.md | 22 ++-- wpf/DateTimePicker/Overview.md | 16 +-- wpf/Docking/Dealing-with-Windows.md | 6 + wpf/Docking/Getting-Started.md | 12 ++ wpf/Docking/Pattern-and-Practices.md | 116 ++++++++++++------ wpf/Docking/Tabbed-Window.md | 11 +- wpf/Domain-UpDown/Getting-Started.md | 41 +++++-- wpf/Double-TextBox/Getting-Started.md | 9 ++ wpf/DropDown-Button/Getting-Started.md | 6 + wpf/Gantt/Auto-Update-Hierarchy.md | 18 ++- wpf/Gantt/Custom-Node-Style.md | 8 +- wpf/Gantt/Custom-Schedule.md | 14 +-- wpf/Gantt/Getting-Started.md | 4 - wpf/Gantt/Highlighting-Tasks.md | 3 + wpf/Gantt/Zooming.md | 6 + wpf/GridSplitter/Getting-Started.md | 6 + wpf/Grouping/Data-Binding.md | 12 +- wpf/Grouping/Data-Manipulation.md | 50 +++++--- wpf/Grouping/Using-Grouping.md | 18 ++- wpf/HeatMap/Getting-Started.md | 12 ++ wpf/Integer-TextBox/Getting-Started.md | 9 ++ wpf/Kanban-Board/Getting-started.md | 7 +- wpf/Linear-Gauge/Labels.md | 3 + wpf/Linear-Gauge/Pointers.md | 3 + wpf/Linear-Gauge/Ranges.md | 3 + wpf/Linear-ProgressBar/Getting-Started.md | 6 + wpf/Maps/Basic-KML-Format.md | 3 + wpf/Maps/UserInteraction.md | 3 + wpf/MaskedTextBox/Getting-Started.md | 12 +- wpf/Menu/Getting-Started.md | 9 ++ wpf/Multi-Column-DropDown/Getting-Started.md | 12 ++ wpf/Multi-Column-DropDown/Selection.md | 3 + .../Styles-and-Templates.md | 2 +- wpf/Navigation-Drawer/Getting-Started.md | 6 + wpf/Notify-Icon/Getting-Started.md | 34 ++--- wpf/NumericUpdown/Getting-Started.md | 24 ++-- ...Binding-Type-in-silverlight-application.md | 8 +- wpf/Percent-TextBox/Getting-Started.md | 9 ++ wpf/PropertyGrid/CategoryEditor-support.md | 6 + wpf/PropertyGrid/CustomEditor-support.md | 6 + wpf/PropertyGrid/Getting-Started.md | 6 + wpf/Radial-Menu/Overview.md | 6 +- wpf/Radial-Slider/Getting-Started.md | 37 +++--- wpf/Range-Selector/Getting-Started.md | 11 +- wpf/Rating/Getting-Started.md | 6 + wpf/Smith-Chart/Getting-Started.md | 7 +- wpf/SpellChecker/Getting-Started.md | 6 + wpf/SpellChecker/custom-dictionary-support.md | 24 ++++ wpf/Split-Button/Getting-Started.md | 6 + wpf/Step-ProgressBar/Getting-Started.md | 4 + wpf/Surface-Chart/Getting-Started.md | 6 + wpf/Syntax-Editor/Getting-Started.md | 39 +++--- wpf/Syntax-Editor/Printing.md | 10 +- wpf/Syntax-Editor/Text-Navigation.md | 9 ++ wpf/Tab-Navigation/Animation.md | 21 ++++ wpf/Tab-Navigation/Data-binding.md | 16 ++- wpf/Tab-Navigation/Getting-Started.md | 6 + wpf/Tab-Splitter/Getting-Started.md | 41 +++++-- wpf/TabControl/Getting-Started.md | 12 +- wpf/Tabbed-MDI-Form/Getting-Started.md | 6 + wpf/Testing/coded-ui.md | 41 +++++-- wpf/Tile-Control/Getting-Started.md | 6 + wpf/Tile-Control/Hub-Tile-Control.md | 9 ++ wpf/Tile-Control/Overview.md | 10 +- wpf/Tile-View/Data-Binding-Support.md | 10 +- wpf/Tile-View/Getting-Started.md | 33 +++-- wpf/TimePicker/Getting-Started.md | 6 + wpf/TimePicker/Overview.md | 4 +- wpf/TimeSpan-Editor/Getting-Started.md | 6 + wpf/ToolBar/Getting-Started.md | 7 ++ wpf/TreeGrid/Getting-Started.md | 30 ++++- wpf/Wizard-Control/Getting-Started.md | 6 + wpf/Wizard-Control/Interactive-Features.md | 25 +++- 107 files changed, 1194 insertions(+), 350 deletions(-) diff --git a/wpf/Add-Syncfusion-Controls.md b/wpf/Add-Syncfusion-Controls.md index 5fd7d18ab7..5cd39a62d3 100644 --- a/wpf/Add-Syncfusion-Controls.md +++ b/wpf/Add-Syncfusion-Controls.md @@ -18,13 +18,13 @@ The Syncfusion WPF controls can be added in a Visual Studio projects by using ei Syncfusion UI for WPF are added automatically to the Visual Studio Toolbox during installation. The following steps help you to add the required Essential WPF control using drag and drop from the Toolbox. For example: **SfTextBoxExt** -1) Create a WPF project in Visual Studio. +1. Create a WPF project in Visual Studio. -2) Find **SfTextBoxExt** by typing the name of the "SfTextBoxExt" in the search box. +2. Find **SfTextBoxExt** by typing the name of the "SfTextBoxExt" in the search box. ![Drag and drop from toolbox](ThroughDragndDrop_images/AddSyncfusionControls_img1.jpeg) -3) Drag **SfTextBoxExt** and drop it in the designer. +3. Drag **SfTextBoxExt** and drop it in the designer. ![WPF TextBoxExt control](ThroughDragndDrop_images/AddSyncfusionControls_img2.jpeg) @@ -32,13 +32,14 @@ Syncfusion UI for WPF are added automatically to the Visual Studio Toolbox durin The following steps help you to add a required Essential WPF Control using XAML Code, for example: **SfTextBoxExt**. -1) Create a WPF project in Visual Studio and refer the following assemblies: +1. Create a WPF project in Visual Studio and refer the following assemblies: -* Syncfusion.SfInput.WPF.dll -* Syncfusion.SfShared.WPF.dll + * Syncfusion.SfInput.WPF.dll + * Syncfusion.SfShared.WPF.dll -2) Include an XML namespace for the above assemblies to the Main window. +2. Include an XML namespace for the above assemblies to the Main window. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -51,9 +52,12 @@ The following steps help you to add a required Essential WPF Control using XAML {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} -3) Now, add the SfTextBoxExt control with a required optimal name using the included namespace. +3. Now, add the SfTextBoxExt control with a required optimal name using the included namespace. +{% capture codesnippet2 %} {% tabs %} {% highlight XAML %} @@ -63,18 +67,21 @@ The following steps help you to add a required Essential WPF Control using XAML {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ## Using Code-Behind Syncfusion UI for WPF can be added at runtime using C# / VB. The following steps help you to add required Essential WPF control using code. For example: **SfTextBoxExt**. -1) Create a WPF project in Visual Studio and refer to the following assemblies: +1. Create a WPF project in Visual Studio and refer to the following assemblies: -* Syncfusion.SfInput.WPF.dll -* Syncfusion.SfShared.WPF.dll + * Syncfusion.SfInput.WPF.dll + * Syncfusion.SfShared.WPF.dll -2) Create an instance of **SfTextBoxExt**, using its namespace. +2. Create an instance of **SfTextBoxExt**, using its namespace. +{% capture codesnippet3 %} {% tabs %} {% highlight C# %} @@ -90,9 +97,12 @@ Dim textBoxExt1 As New Syncfusion.Windows.Controls.Input.SfTextBoxExt() {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} -3) Set the Size and Alignment of the control with required value. +3. Set the Size and Alignment of the control with required value. +{% capture codesnippet4 %} {% tabs %} {% highlight C# %} @@ -116,9 +126,12 @@ textBoxExt1.HorizontalAlignment = HorizontalAlignment.Center {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} -4) Add the created instance to the parent window (or the needed layout panels). +4. Add the created instance to the parent window (or the needed layout panels). +{% capture codesnippet5 %} {% tabs %} {% highlight C# %} @@ -136,6 +149,8 @@ Me.Content = textBoxExt1 {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet5 | OrderList_Indent_Level_1 }} ![WPF TextBoxExt control](ThroughDragndDrop_images/AddSyncfusionControls_img3.jpeg) @@ -149,15 +164,15 @@ I> The Syncfusion WPF templates are available from v16.1.0.24. The following steps direct you to create the Syncfusion WPF project using the Visual Studio Project Template. -1) To create a Syncfusion WPF project, choose New Project-> Syncfusion->Windows->Syncfusion WPF Application from Visual Studio. +1. To create a Syncfusion WPF project, choose New Project-> Syncfusion->Windows->Syncfusion WPF Application from Visual Studio. ![Create WPF application](Add-Syncfusion-Control_images\Syncfusion-Project-Template-Gallery-1.png) -2) Name the Project, choose the destination location when required and set the framework of the project, then click OK. +2. Name the Project, choose the destination location when required and set the framework of the project, then click OK. N> Minimum target Framework is 4.0 for Syncfusion WPF project templates. -3) Choose the options to configure the Syncfusion WPF Application by using the following Project Configuration Wizard. +3. Choose the options to configure the Syncfusion WPF Application by using the following Project Configuration Wizard. ![WPF Project configuration wizard](Add-Syncfusion-Control_images\Syncfusion-Project-Template-Gallery-2.png) @@ -179,12 +194,12 @@ N> Minimum target Framework is 4.0 for Syncfusion WPF project templates. ![Select the WPF Control](Add-Syncfusion-Control_images\Syncfusion-Project-Template-Gallery-6.png) -4) Once the Project Configuration Wizard is done, the Syncfusion WPF project is created with required references and XAML. +4. Once the Project Configuration Wizard is done, the Syncfusion WPF project is created with required references and XAML. ![Added assemblies for WPF control](Add-Syncfusion-Control_images\Syncfusion-Project-Template-Gallery-7.png) ![Shows project folder for added control](Add-Syncfusion-Control_images\Syncfusion-Project-Template-Gallery-8.png) -5) Then, Syncfusion licensing registration required message box will be shown as follows, if you have installed the trial setup or NuGet packages since Syncfusion introduced the licensing system with the 2018 Volume 2 (v16.2.0.41) Essential Studio release. Please navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/license-key#how-to-generate-syncfusion-license-key), which is shown in the licensing message box to generate and register the Syncfusion license key for your project. Refer to this [blog](https://blog.syncfusion.com/post/Whats-New-in-2018-Volume-2-Licensing-Changes-in-the-1620x-Version-of-Essential-Studio.aspx) post for understanding the licensing changes introduced in Essential Studio. +5. Then, Syncfusion licensing registration required message box will be shown as follows, if you have installed the trial setup or NuGet packages since Syncfusion introduced the licensing system with the 2018 Volume 2 (v16.2.0.41) Essential Studio release. Please navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/license-key#how-to-generate-syncfusion-license-key), which is shown in the licensing message box to generate and register the Syncfusion license key for your project. Refer to this [blog](https://blog.syncfusion.com/post/Whats-New-in-2018-Volume-2-Licensing-Changes-in-the-1620x-Version-of-Essential-Studio.aspx) post for understanding the licensing changes introduced in Essential Studio. ![Shows syncfusion license registration message](Add-Syncfusion-Control_images\Syncfusion-Project-Template-Gallery-9.png) \ No newline at end of file diff --git a/wpf/Autocomplete/Getting-Started.md b/wpf/Autocomplete/Getting-Started.md index 0b48a7da51..f0325fb00a 100644 --- a/wpf/Autocomplete/Getting-Started.md +++ b/wpf/Autocomplete/Getting-Started.md @@ -42,6 +42,7 @@ To add the control manually in XAML, follow the given steps: 2. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page. 3. Declare the [SfTextBoxExt](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html) control in the XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -64,6 +65,8 @@ To add the control manually in XAML, follow the given steps: {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ### Add a control manually in C# @@ -75,6 +78,7 @@ To add the control manually in C#, follow the given steps: 2. Import the [SfTextBoxExt](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html) namespace using **Syncfusion.Windows.Controls.Input;**. 3. Create an [SfTextBoxExt](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html) instance, and add it to the window. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -102,6 +106,8 @@ namespace TextBoxExt {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ![GettingStarted](GettingStarted_images/GettingStarted.png) @@ -111,8 +117,9 @@ AutoComplete is a data-bound control. So before create binding to the control, y For illustration, let us create a textbox, which will populate a list of employees. -1.Create data object class named **Employee** and declare properties as shown below, +1. Create data object class named **Employee** and declare properties as shown below, +{% capture codesnippet3 %} {% highlight c# %} public class Employee @@ -134,10 +141,13 @@ public class Employee } {% endhighlight %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} -2.Create a **EmployeeViewModel** class with Employees property and Employees property is initialized with several data objects in constructor. +2. Create a **EmployeeViewModel** class with Employees property and Employees property is initialized with several data objects in constructor. +{% capture codesnippet4 %} {% highlight c# %} public class EmployeeViewModel @@ -165,12 +175,15 @@ public class Employee } {% endhighlight %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} -3.To populate the AutoComplete with data, set the [AutoCompleteSource](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_AutoCompleteSource) property to `IEnumerable` implementation. +3. To populate the AutoComplete with data, set the [AutoCompleteSource](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_AutoCompleteSource) property to `IEnumerable` implementation. Bind the collection created in previous step to [AutoCompleteSource](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfTextBoxExt.html#Syncfusion_Windows_Controls_Input_SfTextBoxExt_AutoCompleteSource) property in XAML by setting EmployeeViewModel as `DataContext`. +{% capture codesnippet5 %} {% tabs %} {% highlight xaml %} @@ -215,6 +228,8 @@ this.Content = textBoxExt; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet5 | OrderList_Indent_Level_1 }} For further details, refer to [AutoComplete source](https://help.syncfusion.com/wpf/autocomplete/autocomplete-and-filtering#autocomplete-source). diff --git a/wpf/Badge/Getting-Started.md b/wpf/Badge/Getting-Started.md index c8a3c2249a..532f180c8b 100644 --- a/wpf/Badge/Getting-Started.md +++ b/wpf/Badge/Getting-Started.md @@ -34,6 +34,7 @@ To add the `SfBadge` manually in XAML, follow these steps: 3. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf**, and declare the `SfBadge` in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -52,6 +53,8 @@ To add the `SfBadge` manually in XAML, follow these steps: {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Adding WPF SfBadge via C# @@ -68,6 +71,7 @@ To add the `SfBadge` control manually in C#, follow these steps: 4. Declare the `SfBadge` control using C#. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -92,6 +96,8 @@ namespace GettingStarted {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ## Adding badge for a Button diff --git a/wpf/Badge/Overview.md b/wpf/Badge/Overview.md index 5b93f753ef..a36b42af33 100644 --- a/wpf/Badge/Overview.md +++ b/wpf/Badge/Overview.md @@ -17,12 +17,12 @@ documentation: ug ## Key features -* Position - Position the `Badge` text around the `Badge` content. -* Predefined colors - Customize the `Badge` background with predefined colors for the success, warning, error and information states. -* Animation - Use animations for `Badge` text. -* Predefined and custom shapes for `Badge` control. -* Rotation - Rotate the `Badge` to any angle. -* Alignment - Align the `Badge` at any position -* Custom UI - Customized UI for control and its content. +* **Position** - Position the `Badge` text around the `Badge` content. +* **Predefined colors** - Customize the `Badge` background with predefined colors for the success, warning, error and information states. +* **Animation** - Use animations for `Badge` text. +* **Shapes**-Predefined and custom shapes for `Badge` control. +* **Rotation** - Rotate the `Badge` to any angle. +* **Alignment** - Align the `Badge` at any position +* **Custom UI** - Customized UI for control and its content. diff --git a/wpf/Breadcrumb/Command-Binding.md b/wpf/Breadcrumb/Command-Binding.md index 0e1e355706..e58c531e84 100644 --- a/wpf/Breadcrumb/Command-Binding.md +++ b/wpf/Breadcrumb/Command-Binding.md @@ -15,6 +15,7 @@ The steps to listen to the command binding are as follows: 1. Create a DelegateCommand class inherited from ICommand, which will be used in the ViewModel sample class. +{% capture codesnippet1 %} {% tabs %} {% highlight c# %} @@ -49,9 +50,12 @@ public class DelegateCommand : ICommand {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} 2. Create the ViewModel sample class, to bind the command in the sample WPF application. +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} @@ -90,10 +94,13 @@ public class ViewModel : INotifyPropertyChanged {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} 1. Bind the command in the HierarchyNavigator control. 2. To do this, create a new instance of the ViewModel sample class and set DataContext for the parent StackPanel. This will reflect changes in the children. Whenever the selected item changes, the TextBox Text value will change. +{% capture codesnippet3 %} {% tabs %} {% highlight xaml %} @@ -111,3 +118,5 @@ public class ViewModel : INotifyPropertyChanged {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} diff --git a/wpf/Breadcrumb/Getting-Started.md b/wpf/Breadcrumb/Getting-Started.md index e65c9a976b..603442f0b5 100644 --- a/wpf/Breadcrumb/Getting-Started.md +++ b/wpf/Breadcrumb/Getting-Started.md @@ -43,6 +43,7 @@ To add the control manually in XAML, follow the given steps: 2. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page. 3. Declare the HierarchyNavigator control the in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Add control manually in C\# @@ -68,6 +71,7 @@ To add the control manually in C#, follow the given steps: 2. Import the HierarchyNavigator namespace **using Syncfusion.Windows.Tools.Controls;**. 3. Create a HierarchyNavigator instance, and add it to the window. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} using Syncfusion.Windows.Tools; @@ -90,6 +94,8 @@ namespace HierarchicalNavigatorSample } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ![wpf hierarchical navigator control added by code](Getting-Started_images/wpf-hierarchy-navigator-control-added-manually.png) @@ -151,6 +157,7 @@ The steps to bind to a Business Object collection are as follows: **1. Create a class named HierarchyItem.** +{% capture codesnippet3 %} {% tabs %} {% highlight C# %} public class HierarchyItem @@ -181,9 +188,12 @@ public class HierarchyItem } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} **2. Create a collection for ItemsSource to bind HierarchyItem.** +{% capture codesnippet4 %} {% tabs %} {% highlight C# %} public class HierarchicalItemsSource : ObservableCollection @@ -205,9 +215,12 @@ public class HierarchicalItemsSource : ObservableCollection } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} **3. In XAML, bind the collections to the ItemsSource property of the HierarchyNavigator control** +{% capture codesnippet5 %} {% tabs %} {% highlight XAML %} @@ -222,6 +235,8 @@ public class HierarchicalItemsSource : ObservableCollection {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet5 | OrderList_Indent_Level_1 }} ![wpf hierarchy navigator control items added by data binding](Getting-Started_images/wpf-hierarchy-navigator-control-data-binding.png) diff --git a/wpf/Breadcrumb/Populating-Data.md b/wpf/Breadcrumb/Populating-Data.md index 66f035dfd4..4250f553c4 100644 --- a/wpf/Breadcrumb/Populating-Data.md +++ b/wpf/Breadcrumb/Populating-Data.md @@ -15,6 +15,7 @@ The steps to add items to the HierarchyNavigator in XAML are as follows: 1. Create a [HierarchyNavigator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.HierarchyNavigator.html) control. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml%} @@ -23,9 +24,12 @@ The steps to add items to the HierarchyNavigator in XAML are as follows: {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} 2. Add the [HierarchyNavigatorItem](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.HierarchyNavigatorItem.html) to the [HierarchyNavigator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.HierarchyNavigator.html) control. +{% capture codesnippet2 %} {% tabs %} {% highlight xaml %} @@ -46,9 +50,12 @@ The steps to add items to the HierarchyNavigator in XAML are as follows: {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} 3. The snippet below demonstrates the steps to add items to a [HierarchyNavigator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.HierarchyNavigator.html) control in code: +{% capture codesnippet3 %} {% tabs %} {% highlight c# %} @@ -79,6 +86,8 @@ hierarchyNavigator1.Items.Add(hierarchyNavigatorItem1); {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} The following figure shows the items added in code displayed on the interface. @@ -98,6 +107,7 @@ The steps to bind to a Business Object collection are as follows: 1. Create a class named HierarchyItem. +{% capture codesnippet4 %} {% tabs %} {% highlight c# %} @@ -130,9 +140,12 @@ public class HierarchyItem {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} 2. Create a collection for `ItemsSource` to bind with. +{% capture codesnippet5 %} {% tabs %} {% highlight c# %} @@ -156,10 +169,13 @@ public class HierarchicalItemsSource : ObservableCollection {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet5 | OrderList_Indent_Level_1 }} 3. In XAML, bind the collections to the `ItemsSource` property of the [HierarchyNavigator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.HierarchyNavigator.html) control. +{% capture codesnippet6 %} {% tabs %} {% highlight xaml %} @@ -176,6 +192,8 @@ public class HierarchicalItemsSource : ObservableCollection {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet6 | OrderList_Indent_Level_1 }} The following screenshot shows the items added in code displayed on the interface. @@ -218,6 +236,7 @@ The steps to bind XML data to a [HierarchyNavigator](https://help.syncfusion.com 1. Create a separate class that represents the node in an XML document. In this example, a class named Category is created. +{% capture codesnippet7 %} {% tabs %} {% highlight c# %} @@ -236,9 +255,12 @@ public class HierarchyItem {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet7 | OrderList_Indent_Level_1 }} 2. Convert the XML data to a collection, and then bind the collection to the `ItemsSource` property of [HierarchyNavigator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.HierarchyNavigator.html). +{% capture codesnippet8 %} {% tabs %} {% highlight c# %} @@ -273,10 +295,13 @@ public partial class MainPage : UserControl {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet8 | OrderList_Indent_Level_1 }} 3. The code for the [HierarchyNavigator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.HierarchyNavigator.html) is shown below. Declare HierarchicalDataTemplate, because the data is in a hierarchical structure. Refer Template Customizing. +{% capture codesnippet9 %} {% tabs %} {% highlight xaml %} @@ -290,6 +315,8 @@ public partial class MainPage : UserControl {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet9 | OrderList_Indent_Level_1 }} The image displayed below shows the output of the above code—items bound to XML data. @@ -314,6 +341,7 @@ The steps to bind XML data through WCF services are as follows: 4. Add an ASP.NET Web application with the sample application, and then add a new WCF Service item to the Web application, to create a WCF service application. 5. Create an Observable Collection from XML data to bind in ItemsSource, as shown below in the service class that has a return type of ObservableCollection. +{% capture codesnippet10 %} {% tabs %} {% highlight c# %} @@ -411,6 +439,8 @@ x:Name="Window" Title="MainWindow" UseLayoutRounding="True" Width="640" Heig {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet10 | OrderList_Indent_Level_1 }} The image displayed below shows the output of the above code—items bound to XML data. diff --git a/wpf/Breadcrumb/Progress-Bar.md b/wpf/Breadcrumb/Progress-Bar.md index 4eb3a1d89d..64a762fa1d 100644 --- a/wpf/Breadcrumb/Progress-Bar.md +++ b/wpf/Breadcrumb/Progress-Bar.md @@ -15,10 +15,11 @@ The progress bar for the HierarchyNavigator control can be displayed or removed. -There are two methods to display the progress bar: +### There are two methods to display the progress bar: 1. Calling the ShowProgressBar method in HierarchyNavigator, which displays the progress bar for a time span of 500 ms. +{% capture codesnippet1 %} {% tabs %} {% highlight c# %} @@ -27,9 +28,12 @@ hierarchyNavigator.ShowProgressBar(); {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} 2. Passing an argument in the method to show a specified time span. The image below shows a time span of 1000 ms that has been passed. +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} @@ -38,11 +42,14 @@ hierarchyNavigator.ShowProgressBar(new TimeSpan(0, 0, 0, 0, 1000)); {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} -The progress bar can be canceled by using two methods: +### The progress bar can be canceled by using two methods: 1. Calling the CancelProgressBar method in HierarchyNavigator. +{% capture codesnippet3 %} {% tabs %} {% highlight c# %} @@ -51,9 +58,12 @@ hierarchyNavigator.CancelProgressBar(); {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} 2. Passing an argument in the method to cancel the progress bar within a particular span of time. This method helps users cancel the progress bar when preferred. The image displayed below shows a time span of 1000 ms that has been passed. +{% capture codesnippet4 %} {% tabs %} {% highlight c# %} @@ -62,3 +72,5 @@ hierarchyNavigator.CancelProgressBar(new TimeSpan(0, 0, 0, 0, 1000)); {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} diff --git a/wpf/Breadcrumb/Template-Customizing.md b/wpf/Breadcrumb/Template-Customizing.md index 279d53d991..57da668ae6 100644 --- a/wpf/Breadcrumb/Template-Customizing.md +++ b/wpf/Breadcrumb/Template-Customizing.md @@ -19,6 +19,7 @@ The steps to create a HierarchicalDataTemplate are as follows: 1. Create a Business Object with its collections. +{% capture codesnippet1 %} {% tabs %} {% highlight c# %} @@ -67,10 +68,13 @@ public class HierarchicalItemsSource : ObservableCollection {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} 2. Add HierarchicalDataTemplate. 3. Add a template and ItemsSource to bind the object collections. +{% capture codesnippet2 %} {% tabs %} {% highlight xaml %} @@ -83,9 +87,12 @@ public class HierarchicalItemsSource : ObservableCollection {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} 4. Add hierarchicalItemsSource with the HierarchyNavigator control ItemsSource property. +{% capture codesnippet3 %} {% tabs %} {% highlight xaml %} @@ -95,5 +102,7 @@ public class HierarchicalItemsSource : ObservableCollection {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} ![Template-Customizing_img1](Template-Customizing_images/Template-Customizing_img1.png) diff --git a/wpf/Bullet-Graph/Caption.md b/wpf/Bullet-Graph/Caption.md index 76b5d7c8f3..f104216533 100644 --- a/wpf/Bullet-Graph/Caption.md +++ b/wpf/Bullet-Graph/Caption.md @@ -50,6 +50,7 @@ The caption in the bullet graph can be placed in the start or end of the quantit 1. Near (Default) 2. Far +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -80,5 +81,7 @@ The caption in the bullet graph can be placed in the start or end of the quantit {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ![Caption_img2](Caption_images/CaptionPosition.png) diff --git a/wpf/Bullet-Graph/Labels.md b/wpf/Bullet-Graph/Labels.md index 108369cb59..a7282ff9b2 100644 --- a/wpf/Bullet-Graph/Labels.md +++ b/wpf/Bullet-Graph/Labels.md @@ -51,6 +51,7 @@ The labels in the scale can be placed above or below the qualitative ranges by c 1. Below (Default) 2. Above +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -67,5 +68,7 @@ The labels in the scale can be placed above or below the qualitative ranges by c {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ![Labels_img2](Labels_images/Labels_img2.png) diff --git a/wpf/Bullet-Graph/Ticks.md b/wpf/Bullet-Graph/Ticks.md index 8f93662bbf..0e6c06b56e 100644 --- a/wpf/Bullet-Graph/Ticks.md +++ b/wpf/Bullet-Graph/Ticks.md @@ -59,6 +59,7 @@ They are: 2. Above 3. Cross +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -75,5 +76,7 @@ They are: {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ![Ticks_img1](Ticks_images/Ticks_img1.png) diff --git a/wpf/Busy-Indicator/Overview.md b/wpf/Busy-Indicator/Overview.md index 11d8bef381..fa546db356 100644 --- a/wpf/Busy-Indicator/Overview.md +++ b/wpf/Busy-Indicator/Overview.md @@ -18,10 +18,10 @@ Busy Indicator ## Key Features -* IsBusy – The control will show the animation when this property is set. -* Header – A user customized string that is displayed while showing animation. -* Sizing – The control view box height and width can be set. -* AnimationTypes – There are over 37 built-in animations that can be set with the control. +* **IsBusy** – The control will show the animation when this property is set. +* **Header** – A user customized string that is displayed while showing animation. +* **Sizing** – The control view box height and width can be set. +* **AnimationTypes** – There are over 37 built-in animations that can be set with the control. diff --git a/wpf/Button/Getting-Started.md b/wpf/Button/Getting-Started.md index 3f2a987303..e1f31048a4 100644 --- a/wpf/Button/Getting-Started.md +++ b/wpf/Button/Getting-Started.md @@ -57,6 +57,7 @@ In order to add the control manually in XAML, follow the below steps. 3. Declare ButtonAdv control in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -74,6 +75,8 @@ In order to add the control manually in XAML, follow the below steps. {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ### Adding control manually in C# @@ -87,6 +90,7 @@ In order to the add control manually in C#, do the below steps. 3. Create ButtonAdv control instance and add it to the window. +{% capture codesnippet2 %} {% tabs %} {% highlight xaml %} @@ -124,6 +128,8 @@ using Syncfusion.Windows.Tools.Controls; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ## Setting label diff --git a/wpf/Calculator/Getting-Started.md b/wpf/Calculator/Getting-Started.md index e20a9609c2..4ee4052480 100644 --- a/wpf/Calculator/Getting-Started.md +++ b/wpf/Calculator/Getting-Started.md @@ -45,6 +45,7 @@ In order to add [SfCalculator](https://help.syncfusion.com/cr/wpf/Syncfusion.Win 3. Declare [SfCalculator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfCalculator.html) in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Add control manually in C# @@ -72,6 +75,7 @@ In order to add [SfCalculator](https://help.syncfusion.com/cr/wpf/Syncfusion.Win 3. Create SfCalculator control instance and add it to the window. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} using Syncfusion.Windows.Controls.Input; @@ -94,6 +98,8 @@ namespace SfCalculatorSample } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ![wpf SfCalculator control added by code](Getting-Started_images/wpf-sfcalculator-control-added-manually.png) diff --git a/wpf/Calculator/Overview.md b/wpf/Calculator/Overview.md index f4dc144656..638cbc2e11 100644 --- a/wpf/Calculator/Overview.md +++ b/wpf/Calculator/Overview.md @@ -15,7 +15,7 @@ The [SfCalculator](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Control ## Key features -* Value – The Value property retrieves the current value calculated from the calculator. This is a **Read-Only** property. -* Memory – The Memory property retrieves the value stored in memory. -* DefaultValue - The Default value property shows default value in the value TextBox. -* DisplayText - The DisplayText property shows watermark in the value TextBox. \ No newline at end of file +* **Value** – The Value property retrieves the current value calculated from the calculator. This is a **Read-Only** property. +* **Memory** – The Memory property retrieves the value stored in memory. +* **DefaultValue** - The Default value property shows default value in the value TextBox. +* **DisplayText** - The DisplayText property shows watermark in the value TextBox. \ No newline at end of file diff --git a/wpf/Calendar/Getting-Started.md b/wpf/Calendar/Getting-Started.md index 17881fdff9..46c12d0728 100644 --- a/wpf/Calendar/Getting-Started.md +++ b/wpf/Calendar/Getting-Started.md @@ -25,26 +25,27 @@ Refer to this [documentation](https://help.syncfusion.com/wpf/visual-studio-inte ## Adding WPF CalendarEdit via designer -1) The `CalendarEdit` can be added to an application by dragging it from the toolbox to a designer view. The following dependent assemblies will be added automatically: +1. The `CalendarEdit` can be added to an application by dragging it from the toolbox to a designer view. The following dependent assemblies will be added automatically: -* Syncfusion.Shared.WPF + * Syncfusion.Shared.WPF ![wpf calendar control added by designer](Getting-Started_images/wpf-calendar-control-added-by-designer.png) -2) Set the properties for `CalendarEdit` in design mode using the SmartTag feature. +2. Set the properties for `CalendarEdit` in design mode using the SmartTag feature. ## Adding WPF CalendarEdit via XAML To add the `CalendarEdit` manually in XAML, follow these steps: -1) Create a new WPF project in Visual Studio. +1. Create a new WPF project in Visual Studio. -2) Add the following required assembly references to the project: +2. Add the following required assembly references to the project: -* Syncfusion.Shared.WPF + * Syncfusion.Shared.WPF -3) Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf**, and declare the CalendarEdit in XAML page. +3. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf**, and declare the CalendarEdit in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -68,19 +69,22 @@ To add the `CalendarEdit` manually in XAML, follow these steps: {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Adding WPF CalendarEdit via C# To add the `CalendarEdit` manually in C#, follow these steps: -1) Create a new WPF application via Visual Studio. +1. Create a new WPF application via Visual Studio. -2) Add the following required assembly references to the project: +2. Add the following required assembly references to the project: -* Syncfusion.Shared.WPF + * Syncfusion.Shared.WPF -3) Include the required namespace. +3. Include the required namespace. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -88,9 +92,12 @@ using Syncfusion.Windows.Shared; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} -4) Create an instance of `CalendarEdit`, and add it to the window. +4. Create an instance of `CalendarEdit`, and add it to the window. +{% capture codesnippet3 %} {% tabs %} {% highlight C# %} @@ -103,6 +110,8 @@ calendarEdit.Width = 200; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} ![wpf calendar control added by code-behind](Getting-Started_images/Codebehind_CalendarEdit.png) diff --git a/wpf/Card-View/Getting-Started.md b/wpf/Card-View/Getting-Started.md index 6b2d762e95..b17b7987d8 100644 --- a/wpf/Card-View/Getting-Started.md +++ b/wpf/Card-View/Getting-Started.md @@ -35,12 +35,13 @@ Refer to the [NuGet Packages Documentation](https://help.syncfusion.com/wpf/visu To add the `CardView` control manually in XAML, follow these steps: -1. Create a new WPF project in Visual Studio. +1. Create a new WPF project in Visual Studio. 2. Add the following required assembly references to the project: * Syncfusion.Shared.WPF * Syncfusion.Tools.WPF 3. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf**, and declare the `CardView` control in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -62,6 +63,8 @@ To add the `CardView` control manually in XAML, follow these steps: {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Adding WPF CardView control via C# @@ -71,8 +74,9 @@ To add the `CardView` control manually in C#, follow these steps: 2. Add the following required assembly references to the project: * Syncfusion.Shared.WPF * Syncfusion.Tools.WPF -3) Include the required namespace. +3. Include the required namespace. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -80,9 +84,12 @@ using Syncfusion.Windows.Tools.Controls; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} -4) Create an instance of `CardView` control, and add it to the window. +4. Create an instance of `CardView` control, and add it to the window. +{% capture codesnippet3 %} {% tabs %} {% highlight C# %} @@ -104,6 +111,8 @@ namespace CardViewSample {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} ![wpf card view control added manually](Getting-Started_images/wpf-card-view-control-added-manually.png) diff --git a/wpf/Card-View/Overview.md b/wpf/Card-View/Overview.md index 29c1d6a4cf..9f029302a2 100644 --- a/wpf/Card-View/Overview.md +++ b/wpf/Card-View/Overview.md @@ -17,9 +17,9 @@ The WPF [CardView](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.C ## Key features -* Editing - Allows to editing the fields in the GroupViewItems. -* Grouping - Allows to Grouping between the CardViewItems. -* Filtering - Allows to filtering based on the field's values in the GroupViewItems. -* Sorting - Allows Sorting between the CardViewItems. -* Header - Shows or hides the CardView Header panel. -* Custom UI - Allows to customize the CardViewItems. \ No newline at end of file +* **Editing** - Allows to editing the fields in the GroupViewItems. +* **Grouping** - Allows to Grouping between the CardViewItems. +* **Filtering** - Allows to filtering based on the field's values in the GroupViewItems. +* **Sorting** - Allows Sorting between the CardViewItems. +* **Header** - Shows or hides the CardView Header panel. +* **Custom UI** - Allows to customize the CardViewItems. \ No newline at end of file diff --git a/wpf/Carousel/Getting-Started.md b/wpf/Carousel/Getting-Started.md index 0383c8291e..432b071548 100644 --- a/wpf/Carousel/Getting-Started.md +++ b/wpf/Carousel/Getting-Started.md @@ -23,26 +23,27 @@ Refer to this [documentation](https://help.syncfusion.com/wpf/visual-studio-inte ## Adding WPF Carousel via designer -1) The WPF `Carousel` can be added to an application by dragging it from the toolbox to a designer view. The following dependent assemblies will be added automatically: +1. The WPF `Carousel` can be added to an application by dragging it from the toolbox to a designer view. The following dependent assemblies will be added automatically: -* Syncfusion.Shared.WPF + * Syncfusion.Shared.WPF ![wpf Carousel control added by designer](Getting-Started_images/wpf-carousel-control-added-by-designer.png) -2) Set the properties for `Carousel` in design mode using the SmartTag feature. +2. Set the properties for `Carousel` in design mode using the SmartTag feature. ## Adding WPF Carousel via XAML To add the `Carousel` manually in XAML, follow these steps: -1) Create a new WPF project in Visual Studio. +1. Create a new WPF project in Visual Studio. -2) Add the following required assembly references to the project: +2. Add the following required assembly references to the project: -* Syncfusion.Shared.WPF + * Syncfusion.Shared.WPF -3) Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf**, and declare the Carousel in XAML page. +3. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf**, and declare the Carousel in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -66,19 +67,22 @@ To add the `Carousel` manually in XAML, follow these steps: {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Adding WPF Carousel via C# To add the `Carousel` manually in C#, follow these steps: -1) Create a new WPF application via Visual Studio. +1. Create a new WPF application via Visual Studio. -2) Add the following required assembly references to the project: +2. Add the following required assembly references to the project: -* Syncfusion.Shared.WPF + * Syncfusion.Shared.WPF -3) Include the required namespace. +3. Include the required namespace. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -86,9 +90,12 @@ using Syncfusion.Windows.Shared; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} -4) Create an instance of `Carousel`, and add it to the window. +4. Create an instance of `Carousel`, and add it to the window. +{% capture codesnippet3 %} {% tabs %} {% highlight C# %} @@ -101,6 +108,8 @@ carousel.Width = 260; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} ![wpf Carousel control added by code-behind](Getting-Started_images/Codebehind_Carousel.png) diff --git a/wpf/CheckedListBox/Getting-Started.md b/wpf/CheckedListBox/Getting-Started.md index 70ccdca8e1..70fef58097 100644 --- a/wpf/CheckedListBox/Getting-Started.md +++ b/wpf/CheckedListBox/Getting-Started.md @@ -40,15 +40,16 @@ The WPF [CheckListBox](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Too To add the WPF [CheckListBox](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.CheckListBox.html) control manually in XAML, follow these steps, -1.Add the following assembly references to the project. +1. Add the following assembly references to the project. -* Syncfusion.Shared.WPF -* Syncfusion.Tools.WPF + * Syncfusion.Shared.WPF + * Syncfusion.Tools.WPF -2.Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page. +2. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page. -3.Declare the `CheckListBox` control in XAML page. +3. Declare the `CheckListBox` control in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -70,20 +71,24 @@ To add the WPF [CheckListBox](https://help.syncfusion.com/cr/wpf/Syncfusion.Wind {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} + ## Adding control manually in C# To add the `CheckListBox` control manually in C#, follow these steps, -1.Add the following assembly references to the project. +1. Add the following assembly references to the project. -* Syncfusion.Shared.WPF -* Syncfusion.Tools.WPF + * Syncfusion.Shared.WPF + * Syncfusion.Tools.WPF -2.Import CheckListBox namespace **Syncfusion.Windows.Tools.Controls**. +2. Import CheckListBox namespace **Syncfusion.Windows.Tools.Controls**. -3.Create the `CheckListBox` control instance and add it to the window. +3. Create the `CheckListBox` control instance and add it to the window. +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} @@ -112,6 +117,8 @@ namespace ComboBox {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ## Populating items using CheckListBoxItem @@ -159,8 +166,9 @@ this.Content = checkListBox; You can populate the items to the WPF [CheckListBox](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.CheckListBox.html) control by using the `ItemsSource` property. The `DisplayMemberPath` property is used to the name or path of the property displayed for each data item in the control. -1.Create Model and populate it with required properties. Create the ViewModel class and populate ObservableCollection object with the Model objects. +1. Create Model and populate it with required properties. Create the ViewModel class and populate ObservableCollection object with the Model objects. +{% capture codesnippet3 %} {% tabs %} {% highlight C# %} @@ -205,9 +213,12 @@ public class ViewModel {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} -2.Now create an instance of ViewModel in **DataContext** property of the CheckListBox control in **MainWindow.xaml** and bind the collection property from ViewModel to the `ItemSource` property of CheckListBox. Set the property from Model class to be displayed in the `DisplayMemberPath` property. +2. Now create an instance of ViewModel in **DataContext** property of the CheckListBox control in **MainWindow.xaml** and bind the collection property from ViewModel to the `ItemSource` property of CheckListBox. Set the property from Model class to be displayed in the `DisplayMemberPath` property. +{% capture codesnippet4 %} {% tabs %} {% highlight XAML %} @@ -230,6 +241,8 @@ checkListBox.DisplayMemberPath = "Name"; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} ![CheckListBox control items displayed](Getting-Started_images/wpf-checklistbox-control-items.png) diff --git a/wpf/Chromeless-Window/Getting-Started.md b/wpf/Chromeless-Window/Getting-Started.md index 3921840ffe..f9c09562df 100644 --- a/wpf/Chromeless-Window/Getting-Started.md +++ b/wpf/Chromeless-Window/Getting-Started.md @@ -39,10 +39,11 @@ Create a new WPF project in Visual Studio to display chromeless window. The following steps help you add ChromelessWindow: -1. Create a WPF project, and refer the following assemblies: +1. Create a WPF project, and refer the following assemblies: * Syncfusion.Shared.WPF.dll. 2. Include an XML namespace for the above assemblies to the Main window. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} -3. Change the Window to ChromelessWindow. +3. Change the Window to ChromelessWindow. {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} + ## Adding control through code behind @@ -62,6 +66,7 @@ To add control manually through code behind, follow the given steps: 2. Import the Circular ProgressBar namespace **using Syncfusion.UI.Xaml.ProgressBar;**. 3. Create an Circular ProgressBar instance, and add it to the window. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} using Syncfusion.UI.Xaml.ProgressBar; @@ -86,6 +91,9 @@ namespace SfProgressBar } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} + ![wpf Circular ProgressBar control added through code](Getting-Started_images/wpf-SfCircularProgressBar-control-added-manually.png) diff --git a/wpf/Color-Palette/Getting-Started.md b/wpf/Color-Palette/Getting-Started.md index 86024acd00..978b7b7416 100644 --- a/wpf/Color-Palette/Getting-Started.md +++ b/wpf/Color-Palette/Getting-Started.md @@ -54,6 +54,7 @@ In order to add [SfColorPalette](https://help.syncfusion.com/cr/wpf/Syncfusion.W 3. Declare [SfColorPalette](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Media.SfColorPalette.html) control in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -76,6 +77,8 @@ In order to add [SfColorPalette](https://help.syncfusion.com/cr/wpf/Syncfusion.W {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ![ColorPalette added by xaml code](Getting-Started_images/ColorPalette_img.png) @@ -91,6 +94,7 @@ In order to add [SfColorPalette](https://help.syncfusion.com/cr/wpf/Syncfusion.W 2. Import SfColorPalette namespace **Syncfusion.Windows.Controls.Media** . +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} @@ -100,11 +104,13 @@ using Syncfusion.Windows.Controls.Media; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} 3. Create [sfColorPalette](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Media.SfColorPalette.html) control instance and add it to the Page. +{% capture codesnippet3 %} {% tabs %} - {% highlight c# %} public partial class MainWindow : Window @@ -124,6 +130,8 @@ using Syncfusion.Windows.Controls.Media; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-wpf-sfcolorpalette-examples/tree/master/Samples/DataBinding) diff --git a/wpf/Color-Palette/Overview.md b/wpf/Color-Palette/Overview.md index ffd2368bb0..b73803a805 100644 --- a/wpf/Color-Palette/Overview.md +++ b/wpf/Color-Palette/Overview.md @@ -23,8 +23,8 @@ The various elements of the [sfColorPalette](https://help.syncfusion.com/cr/wpf/ ## Key features -Color Swatches – You can choose different color items from the different swatches colors. +* **Color Swatches** – You can choose different color items from the different swatches colors. -SelectedColor – Returns the currently selected color. +* **SelectedColor** – Returns the currently selected color. -Binding support – Selected color can be bound with any object. \ No newline at end of file +* **Binding support** – Selected color can be bound with any object. \ No newline at end of file diff --git a/wpf/Color-Picker-Palette/Getting-Started.md b/wpf/Color-Picker-Palette/Getting-Started.md index 065ad8231e..7bcc9c5f59 100644 --- a/wpf/Color-Picker-Palette/Getting-Started.md +++ b/wpf/Color-Picker-Palette/Getting-Started.md @@ -54,8 +54,9 @@ To add the `ColorPickerPalette` control manually in XAML, follow these steps: 3. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** and declare the `ColorPickerPalette` control in XAML page. -4. Declare the `ColorPickerPalette` control in XAML page. +4. Declare the `ColorPickerPalette` control in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -73,6 +74,8 @@ To add the `ColorPickerPalette` control manually in XAML, follow these steps: {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Adding WPF ColorPickerPalette via C\# @@ -87,6 +90,7 @@ To add the `ColorPickerPalette` control manually in C#, follow these steps: 4. Declare the `ColorPickerPalette` control using C#. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -108,6 +112,8 @@ public partial class MainWindow : Window { {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ![ColorPickerPalette control added by xaml and code](Getting-Started_images/Getting-Started_Designer.png) diff --git a/wpf/Color-Picker/Getting-Started.md b/wpf/Color-Picker/Getting-Started.md index c05e2af93b..675d082585 100644 --- a/wpf/Color-Picker/Getting-Started.md +++ b/wpf/Color-Picker/Getting-Started.md @@ -33,14 +33,15 @@ Refer to this [documentation](https://help.syncfusion.com/wpf/visual-studio-inte To add the `ColorPicker` manually in XAML, follow these steps: -1) Create a new WPF project in Visual Studio. +1. Create a new WPF project in Visual Studio. -2) Add the following required assembly reference to the project: +2. Add the following required assembly reference to the project: -* Syncfusion.Shared.WPF + * Syncfusion.Shared.WPF -3) Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf**, and declare the `ColorPicker` in WPF XAML page. +3. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf**, and declare the `ColorPicker` in WPF XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -59,6 +60,8 @@ To add the `ColorPicker` manually in XAML, follow these steps: {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ![ColorPicker Dropdown](Getting-Started_images/ColorPicker_Dropdown.png) @@ -66,14 +69,15 @@ To add the `ColorPicker` manually in XAML, follow these steps: To add the `ColorPicker` manually in C#, follow these steps: -1) Create a new WPF application via Visual Studio. +1. Create a new WPF application via Visual Studio. -2) Add the following required assembly references to the project: +2. Add the following required assembly references to the project: -* Syncfusion.Shared.WPF + * Syncfusion.Shared.WPF -3) Include the required namespace. +3. Include the required namespace. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -81,9 +85,13 @@ using Syncfusion.Windows.Shared; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} -4) Create an instance of `ColorPicker`, and add it to the window. +4. Create an instance of `ColorPicker`, and add it to the window. + +{% capture codesnippet3 %} {% tabs %} {% highlight C# %} @@ -93,6 +101,9 @@ colorPicker.Height=100; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} + ![ColorPicker Control](Getting-Started_images/ColorPicker_Dropdown.png) diff --git a/wpf/ComboBox/Getting-Started.md b/wpf/ComboBox/Getting-Started.md index 15874c8333..72495ac405 100644 --- a/wpf/ComboBox/Getting-Started.md +++ b/wpf/ComboBox/Getting-Started.md @@ -45,6 +45,7 @@ In order to add [ComboBoxAdv](https://help.syncfusion.com/cr/wpf/Syncfusion.Wind 3. Declare [ComboBoxAdv](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ComboBoxAdv.html) in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -66,6 +67,8 @@ In order to add [ComboBoxAdv](https://help.syncfusion.com/cr/wpf/Syncfusion.Wind {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Adding control manually in C# In order to add [ComboBoxAdv](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ComboBoxAdv.html) control manually in C#, do the below steps, @@ -78,6 +81,7 @@ In order to add [ComboBoxAdv](https://help.syncfusion.com/cr/wpf/Syncfusion.Wind 3. Create ComboBoxAdv control instance and add it to the page. +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} @@ -105,6 +109,8 @@ namespace ComboBox {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ## Adding items in ComboBoxAdv Items can be added in the [ComboBoxAdv](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ComboBoxAdv.html#) control by following ways. @@ -166,6 +172,8 @@ The items in [ComboBoxAdv](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows ### Creating Model and ViewModel data for DataBinding 1. Create data object class named **PopulationInfo** and declare properties as shown below, + +{% capture codesnippet3 %} {% tabs %} {% highlight c# %} public class PopulationInfo @@ -201,8 +209,12 @@ public class PopulationInfo } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} 2. Create a **ViewModel** class with several data objects in constructor. + +{% capture codesnippet4 %} {% tabs %} {% highlight c# %} public class PopulationViewModel @@ -233,6 +245,8 @@ public class PopulationViewModel } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} ### Binding to Data To bind the [ComboBoxAdv](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ComboBoxAdv.html) to data, bind the collection created in previous step to [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.ComboBoxAdv.html#) property in XAML by setting `PopulationViewModel` as `DataContext`. diff --git a/wpf/ComboBox/MultiSelection-Support.md b/wpf/ComboBox/MultiSelection-Support.md index e979276624..40cf0f38c8 100644 --- a/wpf/ComboBox/MultiSelection-Support.md +++ b/wpf/ComboBox/MultiSelection-Support.md @@ -68,6 +68,7 @@ In the below example, first two items from the Observable Collection bound to th 1. Create a data object class named **Country** and declare the property as follows. +{% capture codesnippet1 %} {% tabs %} {% highlight C# %} @@ -80,9 +81,12 @@ public class Country {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} 2. Create a **ViewModel** class with `SelectedItems`, which are initialized with data objects in constructor. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -139,9 +143,12 @@ public class ViewModel : INotifyPropertyChanged {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} 3. To bind the `ComboBoxAdv` to data, bind the collection created in the previous step to the [ItemsSource](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.itemscontrol.itemssource?view=netcore-3.1#System_Windows_Controls_ItemsControl_ItemsSource) property in XAML by setting the `ViewModel` as `DataContext`. +{% capture codesnippet3 %} {% tabs %} {% highlight XAML %} @@ -158,6 +165,8 @@ public class ViewModel : INotifyPropertyChanged {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} ![Adding multiple selections to an application in WPF ComboBoxAdv](Comboboxadv_images/wpf-comboboxadv-multiSelection.png) diff --git a/wpf/Currency-TextBox/Getting-Started.md b/wpf/Currency-TextBox/Getting-Started.md index b906661eae..9cb144a290 100644 --- a/wpf/Currency-TextBox/Getting-Started.md +++ b/wpf/Currency-TextBox/Getting-Started.md @@ -36,6 +36,7 @@ To add the CurrencyTextBox control manually in XAML, follow these steps: 3. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** and declare the `CurrencyTextBox` control in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Adding WPF CurrencyTextBox via C\# @@ -61,6 +64,7 @@ To add the CurrencyTextBox control manually in C#, follow these steps: 3. Include the required namespace. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -68,9 +72,12 @@ using Syncfusion.Windows.Shared; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} 4. Create an instance of CurrencyTextBox and add it to the window. +{% capture codesnippet3 %} {% tabs %} {% highlight C# %} @@ -89,6 +96,8 @@ this.Content = currencyTextBox; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} ![WPF CurrencyTextBox Control](Getting-Started_images/wpf-currency-textbox-control.png) diff --git a/wpf/DataPager/DataBinding.md b/wpf/DataPager/DataBinding.md index 308decfdda..78e1df1c4b 100644 --- a/wpf/DataPager/DataBinding.md +++ b/wpf/DataPager/DataBinding.md @@ -137,6 +137,7 @@ The following steps help you to achieve an OnDemandLoading with the SfDataPager 1. Set the UseOnDemandPaging property to true. 2. Set the PageCount value for the SfDataPager control. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -159,9 +160,13 @@ The following steps help you to achieve an OnDemandLoading with the SfDataPager {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} + 3. Wire up the OnDemandLoading event of SfDataPager. +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} void OnDemandLoading(object sender, OnDemandLoadingEventArgs args) @@ -170,6 +175,9 @@ void OnDemandLoading(object sender, OnDemandLoadingEventArgs args) } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} + The following screenshot displays the output for OnDemandPaging, diff --git a/wpf/DataPager/Getting-Started.md b/wpf/DataPager/Getting-Started.md index bd18b58e2c..1350cad8ab 100644 --- a/wpf/DataPager/Getting-Started.md +++ b/wpf/DataPager/Getting-Started.md @@ -75,12 +75,13 @@ The following steps help you to use the SfDataPager in an application: 3. When you drag the SfDataPager to the window, it automatically adds the required references to the current application.To add the SfDataPager using code, you can add the following assemblies to the project. - I. Syncfusion.Data.WPF + *Syncfusion.Data.WPF - II. Syncfusion.SfGrid.WPF + *Syncfusion.SfGrid.WPF -4.You can either drag the control from Visual Studio or Expression Blend, or add the control to your project manually. You need to add the namespace to make use of SfDataPager in your application. +4. You can either drag the control from Visual Studio or Expression Blend, or add the control to your project manually. You need to add the namespace to make use of SfDataPager in your application. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} -5.Create Business object class named as OrderInfo +5. Create Business object class named as OrderInfo +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} public class OrderInfo @@ -152,9 +156,12 @@ public class OrderInfo } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} -6.Add the following code in ViewModel class +6. Add the following code in ViewModel class +{% capture codesnippet3 %} {% tabs %} {% highlight c# %} public class ViewModel @@ -189,9 +196,12 @@ public class ViewModel } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} -7.Set the ViewModel instance as DataContext to window. Now, you can bind the data collection to the SfDataPagerSource property. +7. Set the ViewModel instance as DataContext to window. Now, you can bind the data collection to the SfDataPagerSource property. +{% capture codesnippet4 %} {% tabs %} {% highlight xaml %} @@ -207,9 +217,12 @@ public class ViewModel {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} -8.Then bind the PagedSource property of the SfDataPager control into the SfDataGridItemsSource property. +8. Then bind the PagedSource property of the SfDataPager control into the SfDataGridItemsSource property. +{% capture codesnippet5 %} {% tabs %} {% highlight xaml %} @@ -230,6 +243,8 @@ public class ViewModel {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet5 | OrderList_Indent_Level_1 }} The following screenshot displays the output for Implementation of the SfDataPager in the SfDataGrid Control. diff --git a/wpf/DatePicker/Getting-Started.md b/wpf/DatePicker/Getting-Started.md index 76213780e8..71e06b4797 100644 --- a/wpf/DatePicker/Getting-Started.md +++ b/wpf/DatePicker/Getting-Started.md @@ -36,12 +36,13 @@ The `SfDatePicker` control can be added to an application by dragging it from th To add the control manually in XAML, follow the given steps: -1. Add the following required assembly references to the project: +1. Add the following required assembly references to the project: * Syncfusion.SfInput.WPF * Syncfusion.SfShared.WPF -2. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page. -3. Declare the `SfDatePicker` control in the XAML page. +2. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page. +3. Declare the `SfDatePicker` control in the XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -59,17 +60,20 @@ To add the control manually in XAML, follow the given steps: {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Add control manually in C\# To add the control manually in C#, follow the given steps: -1. Add the following required assembly references to the project: +1. Add the following required assembly references to the project: * Syncfusion.SfInput.WPF * Syncfusion.SfShared.WPF -2. Import the `SfDatePicker` namespace **using Syncfusion.Windows.Controls.Input;**. -3. Create an `SfDatePicker` instance, and add it to the window. +2. Import the `SfDatePicker` namespace **using Syncfusion.Windows.Controls.Input;**. +3. Create an `SfDatePicker` instance, and add it to the window. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -90,6 +94,8 @@ namespace SfDatePickerSample { {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ![WPF DatePicker Added by Code](GettingStarted_images/wpf-datepicker-added-by-code.png) diff --git a/wpf/DateTimePicker/Getting-Started.md b/wpf/DateTimePicker/Getting-Started.md index f394721254..aad5434884 100644 --- a/wpf/DateTimePicker/Getting-Started.md +++ b/wpf/DateTimePicker/Getting-Started.md @@ -41,14 +41,15 @@ N> You can customize the properties of DateTimeEdit control using the SmartTag. To add the control manually in XAML page, follow the given steps: -1.Add the following required assembly references to the project, +1. Add the following required assembly references to the project, -* Syncfusion.Shared.WPF + * Syncfusion.Shared.WPF -2.Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** in XAML page. +2. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** in XAML page. -3.Declare the `DateTimeEdit` control in XAML page. +3. Declare the `DateTimeEdit` control in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -70,19 +71,22 @@ To add the control manually in XAML page, follow the given steps: {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Adding control manually in C# To add the control manually in C#, follow the given steps: -1.Add the following required assembly references to the project, +1. Add the following required assembly references to the project, -* Syncfusion.Shared.WPF + * Syncfusion.Shared.WPF -2.Import the `DateTimeEdit` namespace **Syncfusion.Windows.Shared**. +2. Import the `DateTimeEdit` namespace **Syncfusion.Windows.Shared**. -3.Create the `DateTimeEdit` control instance and add it to the page. +3. Create the `DateTimeEdit` control instance and add it to the page. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -100,6 +104,8 @@ this.Content = dateTimeEdit; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ![overview of WPF DateTimeEdit](Getting-Started_images/wpf-datetimeedit-overview.png) diff --git a/wpf/DateTimePicker/Overview.md b/wpf/DateTimePicker/Overview.md index 480c82a3d8..d4d99036ad 100644 --- a/wpf/DateTimePicker/Overview.md +++ b/wpf/DateTimePicker/Overview.md @@ -15,18 +15,18 @@ The [DateTimeEdit](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared. ## Key features -**Editing mode** - Supports the default text editing and mask mode that helps to restrict the date input in formatted values based on pre-defined or custom date-time pattern. +* **Editing mode** - Supports the default text editing and mask mode that helps to restrict the date input in formatted values based on pre-defined or custom date-time pattern. -**Date-range support** - Supports the maximum and minimum dates in order to prevent users from setting a date or time within a given range. +* **Date-range support** - Supports the maximum and minimum dates in order to prevent users from setting a date or time within a given range. -**Globalization** - Supports different date-time formats and patterns based on cultures. +* **Globalization** - Supports different date-time formats and patterns based on cultures. -**Date validation** - Supports date validation when date range constraints are met. +* **Date validation** - Supports date validation when date range constraints are met. -**Accessibility** - Provides touch, keyboard, and mouse support to make applications available to a wide variety of users. +* **Accessibility** - Provides touch, keyboard, and mouse support to make applications available to a wide variety of users. -**Watermark** - Supports to display watermark text when a selected date is null. +* **Watermark** - Supports to display watermark text when a selected date is null. -**Styles** - Provides a rich set of built-in themes and customizes the style of each part of `DateTimeEdit`. +* **Styles** - Provides a rich set of built-in themes and customizes the style of each part of `DateTimeEdit`. -**Testing** - Provides QTP add-in that contains custom libraries, which helps [QTP](https://help.syncfusion.com/wpf/datetimepicker/ui-automation#quick-test-professional-qtp) to recognize `DateTimeEdit`. \ No newline at end of file +* **Testing** - Provides QTP add-in that contains custom libraries, which helps [QTP](https://help.syncfusion.com/wpf/datetimepicker/ui-automation#quick-test-professional-qtp) to recognize `DateTimeEdit`. \ No newline at end of file diff --git a/wpf/Docking/Dealing-with-Windows.md b/wpf/Docking/Dealing-with-Windows.md index dd23673f00..d8969a1558 100644 --- a/wpf/Docking/Dealing-with-Windows.md +++ b/wpf/Docking/Dealing-with-Windows.md @@ -152,6 +152,7 @@ DockingManager.SetState(content1, DockState.Float) * Setting state as Document – To create document window in the DockingManager, set [UseDocumentContainer](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.DockingManager.html#Syncfusion_Windows_Tools_Controls_DockingManager_UseDocumentContainer) as True for DockingManager and set its state as Document. +{% capture codesnippet1 %} {% tabs %} {% highlight C# %} @@ -169,12 +170,15 @@ DockingManager.SetState(content1, DockState.Document) {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ![WPF Docking Window Document State](Dealing-with-Windows_images/wpf-docking-window-document-state.jpeg) * Setting state as AutoHidden +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -190,6 +194,8 @@ DockingManager.SetState(content1, DockState.AutoHidden) {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ![WPF Docking Window AutoHidden State](Dealing-with-Windows_images/wpf-docking-window-autohidden-state.jpeg) diff --git a/wpf/Docking/Getting-Started.md b/wpf/Docking/Getting-Started.md index baff304e94..cc3cdc9fbc 100644 --- a/wpf/Docking/Getting-Started.md +++ b/wpf/Docking/Getting-Started.md @@ -44,6 +44,7 @@ In order to add [DockingManager](https://help.syncfusion.com/cr/wpf/Syncfusion.W 3. Declare [DockingManager](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.DockingManager.html) in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -71,6 +72,8 @@ In order to add [DockingManager](https://help.syncfusion.com/cr/wpf/Syncfusion.W {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Adding control manually in C# In order to add [DockingManager](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.DockingManager.html) control manually in C#, do the below steps, @@ -84,6 +87,7 @@ In order to add [DockingManager](https://help.syncfusion.com/cr/wpf/Syncfusion.W 3. Create DockingManager control instance and add it to the page. +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} @@ -123,6 +127,8 @@ namespace DockingManager_Sample {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ![WPF Docking in Visual Studio](Getting-Started_images/wpf-docking-in-visual-studio.jpeg) @@ -328,6 +334,7 @@ You can customize the visual styles of [DockingManager](https://help.syncfusion. * Include an namespace for the `SfSkinManager` assembly to the MainWindow. +{% capture codesnippet3 %} {% tabs %} {% highlight XAML %} @@ -355,9 +362,12 @@ using Syncfusion.SfSkinManager; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} * Now apply the value as `VisualStudio2013` to the [VisualStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.SfSkinManager.SfSkinManager.html#Syncfusion_SfSkinManager_SfSkinManager_SetVisualStyle_System_Windows_DependencyObject_Syncfusion_SfSkinManager_VisualStyles_) property of the SfSkinManager for the DockingManager control. +{% capture codesnippet4 %} {% tabs %} {% highlight XAML %} @@ -385,6 +395,8 @@ SfSkinManager.SetVisualStyle(SyncDockingManager,VisualStyles.VisualStudio2013); {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} ![WPF Docking Visual Styles](Getting-Started_images/wpf-docking-visual-styles.jpeg) diff --git a/wpf/Docking/Pattern-and-Practices.md b/wpf/Docking/Pattern-and-Practices.md index 302899d7df..2ff3cdde47 100644 --- a/wpf/Docking/Pattern-and-Practices.md +++ b/wpf/Docking/Pattern-and-Practices.md @@ -128,20 +128,21 @@ N> [Download sample from GitHub](https://github.com/SyncfusionExamples/working-w The following steps helps to create sample project in the PRISM 5.0. -1.Create a New WPF project and add the following references to the solution project. +1. Create a New WPF project and add the following references to the solution project. -* Microsoft.Practices.Composite.dll -* Microsoft.Practices.Composite.Presentation.dll -* Microsoft.Practices.Composite.UnityExtensions.dll -* Microsoft.Practices.ServiceLocation.dll -* Microsoft.Practices.Unity.dll + * Microsoft.Practices.Composite.dll + * Microsoft.Practices.Composite.Presentation.dll + * Microsoft.Practices.Composite.UnityExtensions.dll + * Microsoft.Practices.ServiceLocation.dll + * Microsoft.Practices.Unity.dll -2.Rename MainWindow to Shell in the Project. +2. Rename MainWindow to Shell in the Project. -3.Add new class called Bootstrapper.cs to initialize the prism application. +3. Add new class called Bootstrapper.cs to initialize the prism application. Here MainWindow is treated as shell, so returning the MainWindow in the CreateShell method. +{% capture codesnippet1 %} {% tabs %} {% highlight C# %} @@ -179,10 +180,13 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} -4.Override OnStartup method in the App.xaml.cs to execute Bootstrapper when the application starts +4. Override OnStartup method in the App.xaml.cs to execute Bootstrapper when the application starts +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -213,18 +217,25 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} +5. Next, create regions in the shell. To do this, first add the following namespace in the shell Window. -5.Next, create regions in the shell. To do this, first add the following namespace in the shell Window. +{% capture codesnippet3 %} {% highlight XAML %} xmlns:prsm="http://www.codeplex.com/prism" {% endhighlight %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} In the following code example, a region called “MainRegion” has been created to load DockingManager Module views. +{% capture codesnippet4 %} + {% tabs %} {% highlight XAML %} @@ -244,8 +255,10 @@ In the following code example, a region called “MainRegion” has been created {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_2 }} -6.Add Module to the project. +6. Add Module to the project. Right-click the Solution project, point to “Add” and then click “NewProject”. Then a new window called AddNewProject opens. Select “ClassLibrary” from Visual C#, then rename the project with desired name and click OK. Now a New Module is created in the Solution Project. @@ -263,8 +276,9 @@ Also add the following Prism assemblies: * Microsoft.Practices.ServiceLocation.dll * Microsoft.Practices.Unity.dll -7.In the Shell project, add the reference to the type of DockingManager module by registering with ModuleCatalog instance in the ConfigureModuleCatalog method. +7. In the Shell project, add the reference to the type of DockingManager module by registering with ModuleCatalog instance in the ConfigureModuleCatalog method. +{% capture codesnippet5 %} {% tabs %} {% highlight C# %} @@ -289,9 +303,12 @@ End Sub {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet5 | OrderList_Indent_Level_1 }} -8.Adding Views to the Module, shown here is BottomLeftModule, similarly the view for the module can be added according to number of modules. +8. Adding Views to the Module, shown here is BottomLeftModule, similarly the view for the module can be added according to number of modules. +{% capture codesnippet6 %} {% tabs %} {% highlight XAML %} @@ -311,11 +328,14 @@ End Sub {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet6 | OrderList_Indent_Level_1 }} -9.Add a region to the shell. +9. Add a region to the shell. After creating View for the Module, register the view as Module using the following code example. +{% capture codesnippet7 %} {% tabs %} {% highlight C# %} @@ -355,6 +375,8 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet7 | OrderList_Indent_Level_1 }} Then when run the project, it is added as three of the Module in the Shell. The number of modules can be add based on the complexity of the project. @@ -370,22 +392,23 @@ Essential WPF controls are flexible with all the `Prism` versions. This section ### Setting up WPF application -1.Create a WPF application and rename the file MainWindow.xaml as Shell.xaml and MainWindow.xaml.cs as Shell.xaml.cs. +1. Create a WPF application and rename the file MainWindow.xaml as Shell.xaml and MainWindow.xaml.cs as Shell.xaml.cs. -2.Rename the class name MainWindow as Shell in all the occurrences. +2. Rename the class name MainWindow as Shell in all the occurrences. -3.Add reference to the following assemblies +3. Add reference to the following assemblies -* Prism -* Prism.WPF -* Prism.Unity.WPF -* Microsoft.Practices.ServiceLocation -* Microsoft.Practices.Unity -* Microsoft.Practices.Unity.Configuration -* Microsoft.Practices.Unity.RegistrationByConvention + * Prism + * Prism.WPF + * Prism.Unity.WPF + * Microsoft.Practices.ServiceLocation + * Microsoft.Practices.Unity + * Microsoft.Practices.Unity.Configuration + * Microsoft.Practices.Unity.RegistrationByConvention -4.In the Shell.xaml file, add the namespace definition for Prism Library as given below: +4. In the Shell.xaml file, add the namespace definition for Prism Library as given below: +{% capture codesnippet8 %} {% tabs %} {% highlight XAML %} @@ -401,9 +424,12 @@ Essential WPF controls are flexible with all the `Prism` versions. This section {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet8 | OrderList_Indent_Level_1 }} -5.Create an instance of the control in Shell.xaml file and set the attached property RegionManager.RegionName for it. Here we have used `DockingManager` control. +5. Create an instance of the control in Shell.xaml file and set the attached property RegionManager.RegionName for it. Here we have used `DockingManager` control. +{% capture codesnippet9 %} {% tabs %} {% highlight XAML %} @@ -413,15 +439,18 @@ Essential WPF controls are flexible with all the `Prism` versions. This section {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet9 | OrderList_Indent_Level_1 }} When we create an instance for Shell, it will resolve the value of the RegionManager.RegionName attached property and create a region for connecting it with the DockingManager. ### Setting up the Bootstrapper -1.Create and add a class file for the Bootstrapper to the project. +1. Create and add a class file for the Bootstrapper to the project. -2.Add the following using statements to the class that are referred by Bootstrapper. +2. Add the following using statements to the class that are referred by Bootstrapper. +{% capture codesnippet10 %} {% tabs %} {% highlight C# %} @@ -434,11 +463,14 @@ using Prism.Modularity; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet10 | OrderList_Indent_Level_1 }} -3.Create a class Bootstrapper and inherit it from UnityBootstrapper. +3. Create a class Bootstrapper and inherit it from UnityBootstrapper. -4.Override the methods CreateShell, InitializeShell and ConfigureModuleCatalog as given below. +4. Override the methods CreateShell, InitializeShell and ConfigureModuleCatalog as given below. +{% capture codesnippet11 %} {% tabs %} {% highlight C# %} @@ -463,9 +495,12 @@ public class Bootstrapper: UnityBootstrapper {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet11 | OrderList_Indent_Level_1 }} -5.Remove the StartUpUri in App.xaml file and override the OnStartUp method in App.xaml.cs file. In that instantiate the Bootstrapper and run it as given below: +5. Remove the StartUpUri in App.xaml file and override the OnStartUp method in App.xaml.cs file. In that instantiate the Bootstrapper and run it as given below: +{% capture codesnippet12 %} {% tabs %} {% highlight C# %} @@ -480,13 +515,16 @@ protected override void OnStartup(StartupEventArgs e) {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet12 | OrderList_Indent_Level_1 }} ### Adding modules to the project -1.Create as many ClassLibrary projects for the modules. Here three class libraries are created for three modules. +1. Create as many ClassLibrary projects for the modules. Here three class libraries are created for three modules. -2.Design views for all the modules in their projects as required. We have created UserControl as views and configured the attached properties of `DockingManager` for it. +2. Design views for all the modules in their projects as required. We have created UserControl as views and configured the attached properties of `DockingManager` for it. +{% capture codesnippet13 %} {% tabs %} {% highlight XAML %} @@ -522,9 +560,12 @@ protected override void OnStartup(StartupEventArgs e) {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet13 | OrderList_Indent_Level_1 }} -3.Create a class implementing IModule interface for all the modules in their project. Using Initialize method register the view to the region using region name(“MainRegion”). +3. Create a class implementing IModule interface for all the modules in their project. Using Initialize method register the view to the region using region name(“MainRegion”). +{% capture codesnippet14 %} {% tabs %} {% highlight C# %} @@ -545,9 +586,12 @@ public class ProgramModule : IModule {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet14 | OrderList_Indent_Level_1 }} -4.Add all the modules as reference projects in main application. Add all modules to module catalog in Bootstrapper.cs as given below +4. Add all the modules as reference projects in main application. Add all modules to module catalog in Bootstrapper.cs as given below +{% capture codesnippet15 %} {% tabs %} {% highlight C# %} @@ -563,6 +607,8 @@ protected override void ConfigureModuleCatalog() {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet15 | OrderList_Indent_Level_1 }} ### Create RegionAdapter for DockingManager diff --git a/wpf/Docking/Tabbed-Window.md b/wpf/Docking/Tabbed-Window.md index e946d1a52d..7c7ed201f7 100644 --- a/wpf/Docking/Tabbed-Window.md +++ b/wpf/Docking/Tabbed-Window.md @@ -24,7 +24,7 @@ The tabs of the Docked window are placed at the bottom, by default. To place the * Setting DockTabAlignment as `Left`. - +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -48,13 +48,15 @@ DockingManager1.DockTabAlignment = Dock.Left; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ![WPF Docking Left TabAlignment](TabbedWindow_images/wpf-docking-left-tab-alignment.jpeg) - * Setting DockTabAlignment as `Right` +{% capture codesnippet2 %} {% tabs %} {% highlight XAML %} @@ -78,6 +80,8 @@ DockingManager1.DockTabAlignment = Dock.Right; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ![WPF Docking Right TabAlignment](TabbedWindow_images/wpf-docking-right-tab-alignment.jpeg) @@ -85,6 +89,7 @@ DockingManager1.DockTabAlignment = Dock.Right; * Setting DockTabAlignment as `Top` +{% capture codesnippet3 %} {% tabs %} @@ -109,6 +114,8 @@ SyncDockingManager.DockTabAlignment = Dock.Top; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} ![WPF Docking Top TabAlignment](TabbedWindow_images/wpf-docking-top-tab-alignment.jpeg) diff --git a/wpf/Domain-UpDown/Getting-Started.md b/wpf/Domain-UpDown/Getting-Started.md index b3a12eb85b..ff9a975d6b 100644 --- a/wpf/Domain-UpDown/Getting-Started.md +++ b/wpf/Domain-UpDown/Getting-Started.md @@ -35,15 +35,16 @@ The [SfDomainUpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Contr To add the control manually in XAML page, follow the given steps: -1.Add the following required assembly references to the project, +1. Add the following required assembly references to the project, -* Syncfusion.SfInput.WPF -* Syncfusion.SfShared.WPF + * Syncfusion.SfInput.WPF + * Syncfusion.SfShared.WPF -2.Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page or Syncfusion.Windows.Tools.Controls namespace. +2. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page or Syncfusion.Windows.Tools.Controls namespace. -3.Declare [SfDomainUpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfDomainUpDown.html) in XAML page. +3. Declare [SfDomainUpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfDomainUpDown.html) in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -65,20 +66,23 @@ To add the control manually in XAML page, follow the given steps: {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Adding control manually in C# To add the control manually in C#, follow the given steps: -1.Add the following required assembly references to the project, +1. Add the following required assembly references to the project, -* Syncfusion.SfInput.WPF -* Syncfusion.SfShared.WPF + * Syncfusion.SfInput.WPF + * Syncfusion.SfShared.WPF -2.Import the `SfDomainUpDown` namespace **Syncfusion.Windows.Controls.Input**. +2. Import the `SfDomainUpDown` namespace **Syncfusion.Windows.Controls.Input**. -3.Create the `SfDomainUpDown` control instance and add it to the page. +3. Create the `SfDomainUpDown` control instance and add it to the page. +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} @@ -106,6 +110,8 @@ namespace ComboBox {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ![SfDomainUpDown control implemented](Getting-Started_images/Spin-Button_img6.png) @@ -114,8 +120,9 @@ namespace ComboBox You can populate the [SfDomainUpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfDomainUpDown.html) control using the [ItemsSource](https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.itemscontrol.itemssourceproperty?view=netframework-4.7.2) property. -1.You can create a data object class named **Employee** as Model and declare properties as shown below, +1. You can create a data object class named **Employee** as Model and declare properties as shown below, +{% capture codesnippet3 %} {% tabs %} {% highlight C# %} @@ -139,9 +146,12 @@ public class Employee {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} -2.You can create a **ViewModel** class with several data objects in constructor. +2. You can create a **ViewModel** class with several data objects in constructor. +{% capture codesnippet4 %} {% tabs %} {% highlight C# %} @@ -168,9 +178,12 @@ public class ViewModel {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} -3.You can bind the Employees property from the ViewModel class to the ItemSource property of `SfDomainUpDown` control and the control is set to display content based on the Name inside the [ContentTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfDomainUpDown.html#Syncfusion_Windows_Controls_Input_SfDomainUpDown_ContentTemplateProperty) property. +3. You can bind the Employees property from the ViewModel class to the ItemSource property of `SfDomainUpDown` control and the control is set to display content based on the Name inside the [ContentTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfDomainUpDown.html#Syncfusion_Windows_Controls_Input_SfDomainUpDown_ContentTemplateProperty) property. +{% capture codesnippet5 %} {% tabs %} {% highlight XAML %} @@ -186,6 +199,8 @@ public class ViewModel {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet5 | OrderList_Indent_Level_1 }} ![wpf domain up down control added by code](Getting-Started_images/wpf-domain-updown-control-data-binding.png) diff --git a/wpf/Double-TextBox/Getting-Started.md b/wpf/Double-TextBox/Getting-Started.md index e20951769a..acfb27c69e 100644 --- a/wpf/Double-TextBox/Getting-Started.md +++ b/wpf/Double-TextBox/Getting-Started.md @@ -36,6 +36,7 @@ To add the DoubleTextBox control manually in XAML, follow these steps: 3. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** and declare the `DoubleTextBox` control in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Adding WPF DoubleTextBox via C\# @@ -61,6 +64,7 @@ To add the DoubleTextBox control manually in C#, follow these steps: 3. Include the required namespace. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -68,9 +72,12 @@ using Syncfusion.Windows.Shared; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} 4. Create an instance of DoubleTextBox and add it to the window. +{% capture codesnippet3 %} {% tabs %} {% highlight C# %} @@ -89,6 +96,8 @@ this.Content = doubleTextBox; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} ![WPF DoubleTextBox Control](Getting-Started_images/wpf-double-textbox-control.png) diff --git a/wpf/DropDown-Button/Getting-Started.md b/wpf/DropDown-Button/Getting-Started.md index c5a24d3756..9d7381834f 100644 --- a/wpf/DropDown-Button/Getting-Started.md +++ b/wpf/DropDown-Button/Getting-Started.md @@ -57,6 +57,7 @@ In order to add the control manually in XAML, follow the below steps. 3. Declare DropDownButtonAdv control in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -74,6 +75,8 @@ In order to add the control manually in XAML, follow the below steps. {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ### Adding control manually in C# @@ -87,6 +90,7 @@ In order to add control manually in C#, do the below steps. 3. Create DropDownButtonAdv control instance and add it to the window. +{% capture codesnippet2 %} {% tabs %} {% highlight xaml %} @@ -124,6 +128,8 @@ using Syncfusion.Windows.Tools.Controls; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ## Setting label diff --git a/wpf/Gantt/Auto-Update-Hierarchy.md b/wpf/Gantt/Auto-Update-Hierarchy.md index 159e47acdc..527592c324 100644 --- a/wpf/Gantt/Auto-Update-Hierarchy.md +++ b/wpf/Gantt/Auto-Update-Hierarchy.md @@ -44,6 +44,7 @@ To use the auto updating hierarchy support in an application: 1. Create a simple class structure for business objects. +{% capture codesnippet1 %} {% highlight c# %} public class Task : NotificationObject { @@ -149,10 +150,12 @@ public class Task : NotificationObject } {% endhighlight %} - +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} 2. Create a collection of business objects to bind them as ItemsSource for the Gantt control. +{% capture codesnippet2 %} {% highlight c# %} TaskDetails = new ObservableCollection(); TaskDetails = GetData(); @@ -243,9 +246,12 @@ ObservableCollection GetData() })); } {% endhighlight %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} 3. Set the collection as ItemsSource of the Gantt control. +{% capture codesnippet3 %} {% highlight xaml %} GetData() {% endhighlight %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} ## Using Custom Logics in Business Objects @@ -268,6 +276,7 @@ To use your own logics in business objects: 1. Create a simple class structure for business objects. Add custom calculations on business objects to update the hierarchy when its state changed. +{% capture codesnippet4 %} {% highlight c# %} public class Task : NotificationObject @@ -438,6 +447,7 @@ public class Task : NotificationObject 2. Create a collection of business objects to bind it as ItemsSource of the Gantt control. +{% capture codesnippet5 %} {% highlight c# %} TaskDetails = new ObservableCollection(); @@ -597,12 +607,14 @@ ObservableCollection GetData() } {% endhighlight %} +{% endcapture %} +{{ codesnippet5 | OrderList_Indent_Level_1 }} 3. Set the UseAutoUpdateHierarchy property as false to handle the custom calculations on the business objects. Set the collection as ItemsSource of the Gantt control. N> If you use the TaskDetails class as your business object, then you should not set the UseAutoUpdateHierarchy property as false. - +{% capture codesnippet6 %} {% highlight xaml %} GetData() {% endhighlight %} +{% endcapture %} +{{ codesnippet6 | OrderList_Indent_Level_1 }} Output: diff --git a/wpf/Gantt/Custom-Node-Style.md b/wpf/Gantt/Custom-Node-Style.md index 8cc6cd8531..3080c2901f 100644 --- a/wpf/Gantt/Custom-Node-Style.md +++ b/wpf/Gantt/Custom-Node-Style.md @@ -53,7 +53,7 @@ MileStone The following code illustrates how to define style: - +{% capture codesnippet1 %} {% highlight xaml %} {% endhighlight %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} 1. Add the style as a resource to the Gantt control in your application. The following code illustrates how to add the styles to the application: - +{% capture codesnippet2 %} {% highlight xaml %} {% endhighlight %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ![Custom-Node-Style_img1](Custom-Node-Style_images/Custom-Node-Style_img1.png) diff --git a/wpf/Gantt/Custom-Schedule.md b/wpf/Gantt/Custom-Schedule.md index 651fea5eaa..59978a1cda 100644 --- a/wpf/Gantt/Custom-Schedule.md +++ b/wpf/Gantt/Custom-Schedule.md @@ -34,13 +34,13 @@ GanttScheduleRowInfo class will have following fields: 2. CellsPerUnit—Gets the information of a cell size of preceding row in the schedule based on the immediate next row. In CustomDateTime Schedule, the CellsPerUnit will be used to customize the cell. For example, in quarterly basis month cell, You need to draw a schedule by consolidating three months. For this, you need to define the CellsPerUnit of that corresponding row as 3. 3. TimeUnit—Gets the information about the type of row, when the schedule type is CustomDateTime. The Time unit can be any one of the following: -* Seconds-represents the corresponding row as second's row. -* Minutes—represents the corresponding row as minute’s row. -* Hours—represents the corresponding row as hour’s row. -* Days—represents the corresponding row as day’s row. -* Weeks—represents the corresponding row as week’s row. -* Months—represents the corresponding row as month’s row. -* Years—represents the corresponding row as year’s row. + * Seconds-represents the corresponding row as second's row. + * Minutes—represents the corresponding row as minute’s row. + * Hours—represents the corresponding row as hour’s row. + * Days—represents the corresponding row as day’s row. + * Weeks—represents the corresponding row as week’s row. + * Months—represents the corresponding row as month’s row. + * Years—represents the corresponding row as year’s row. #### Use Case Scenario diff --git a/wpf/Gantt/Getting-Started.md b/wpf/Gantt/Getting-Started.md index 312352a270..9f0de6992c 100644 --- a/wpf/Gantt/Getting-Started.md +++ b/wpf/Gantt/Getting-Started.md @@ -215,22 +215,18 @@ The following are the steps to create Gantt control through designer. ![Designer page in application](Getting-Started_images/Getting-Started_img6.png) - 2. Select GanttControl from ToolBox. ![ToolBox window in application](Getting-Started_images/Getting-Started_img7.png) - 3. Drag-and-drop the GanttControl to Designer View. ![Loading WPF gantt control to designer page](Getting-Started_images/Getting-Started_img8.png) - 4. Gantt control is added to the window. Assembly reference will also be added to Project file. ![WPF Gantt control loaded in designer page](Getting-Started_images/Getting-Started_img9.png) - 5. Now you can customize the properties of Gantt control in the Properties Window. ## Adjusting chart and grid size diff --git a/wpf/Gantt/Highlighting-Tasks.md b/wpf/Gantt/Highlighting-Tasks.md index e45f26d86f..128e4d4522 100644 --- a/wpf/Gantt/Highlighting-Tasks.md +++ b/wpf/Gantt/Highlighting-Tasks.md @@ -48,6 +48,7 @@ To highlight a set of tasks in Gantt chart region: 1. Bind the tasks that need to be highlighted with Gantt’s HighlightedItems API. 2. If required, change the value of the Gantt’s HighlightItemBrush API to change the item highlight color. The default color is red. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -59,6 +60,8 @@ To highlight a set of tasks in Gantt chart region: {% endhighlight %} {% highlight c# %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} /// Codes in View Model  ///  diff --git a/wpf/Gantt/Zooming.md b/wpf/Gantt/Zooming.md index 1b2629d2e6..728711b244 100644 --- a/wpf/Gantt/Zooming.md +++ b/wpf/Gantt/Zooming.md @@ -29,6 +29,7 @@ To add the built-in zooming: 2. Set the UseOnDemandSchedule API value as _true_. If need set BaseCellMinLength and BaseCellMaxLength, the default value of these APIs are 20 and 40 respectively. 3. Use a slider or any control to provide the zoom factor dynamically. Bind the Gantt’s zoom factor to that control value. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -66,6 +67,8 @@ void slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs _zoomFactors  = new List { 100d, 200d, 300d, 400d, 600d, 800d, 1000d }; diff --git a/wpf/GridSplitter/Getting-Started.md b/wpf/GridSplitter/Getting-Started.md index 4dbfb6b103..93982b9534 100644 --- a/wpf/GridSplitter/Getting-Started.md +++ b/wpf/GridSplitter/Getting-Started.md @@ -37,6 +37,7 @@ To add the control manually in XAML, follow the given steps: 2. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page. 3. Declare the `SfGridSplitter` control in the XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -54,6 +55,8 @@ To add the control manually in XAML, follow the given steps: {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Add control manually in C\# @@ -65,6 +68,7 @@ To add the control manually in C#, follow the given steps: 2. Import the `SfGridSplitter` namespace **using Syncfusion.Windows.Controls.Input;**. 3. Create an `SfGridSplitter` instance, and add it to the window. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -86,6 +90,8 @@ namespace SfGridSplitterSample { {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ![SfGridSplitter control added by code](Getting-Started-images/WPF-Grid-Splitter.png) diff --git a/wpf/Grouping/Data-Binding.md b/wpf/Grouping/Data-Binding.md index 5bafc7f036..c8b34d56d5 100644 --- a/wpf/Grouping/Data-Binding.md +++ b/wpf/Grouping/Data-Binding.md @@ -29,8 +29,9 @@ The first thing you need to do is to derive a class that will serve as your cust -2.Create a custom object class and add it to the 'Class1' file generated by Step 1. Name the class 'MyObject', and let it have four string properties named A, B, C and D. Also add a constructor that accepts an integer argument. Given below is the sample code for this. Note that you are making B a property only to hold digits. You will be using this property later to illustrate summarizing of data. +2. Create a custom object class and add it to the 'Class1' file generated by Step 1. Name the class 'MyObject', and let it have four string properties named A, B, C and D. Also add a constructor that accepts an integer argument. Given below is the sample code for this. Note that you are making B a property only to hold digits. You will be using this property later to illustrate summarizing of data. +{% capture codesnippet1 %} {% tabs %} {% highlight c# %} @@ -269,9 +270,12 @@ End Module {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} -3.Add the code to the Main function as follows. This creates a random list of 'MyObject' and echoes this list to the console. +3. Add the code to the Main function as follows. This creates a random list of 'MyObject' and echoes this list to the console. +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} @@ -339,12 +343,14 @@ Sub Main() End Sub {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ![Data-Binding_img2](Data-Binding_images/Data-Binding_img2.png) -4.An ArrayList of Objects is created. +4. An ArrayList of Objects is created. ## Setting a Datasource In the Grouping Engine diff --git a/wpf/Grouping/Data-Manipulation.md b/wpf/Grouping/Data-Manipulation.md index dcf5f3130a..f4151beea3 100644 --- a/wpf/Grouping/Data-Manipulation.md +++ b/wpf/Grouping/Data-Manipulation.md @@ -17,8 +17,9 @@ The following data manipulation techniques are available in Essential Grouping: Another collection that is part of the schema information in the Engine.TableDescriptor is the RecordFilters collection. This collection lets you filter the data to see only the items that are in your data list and that satisfy the criteria that is specified. You can express the criteria as a logical expression using the property names, algebraic, and logical operators. You can also use LIKE, MATCH, and IN operators. -1.In the Console Application used in lessons 1 and 2, comment out all the code that is in the Main method and add the following code to create a data object and set it into the Grouping Engine. +1. In the Console Application used in lessons 1 and 2, comment out all the code that is in the Main method and add the following code to create a data object and set it into the Grouping Engine. +{% capture codesnippet1 %} {% tabs %} {% highlight c# %} @@ -93,25 +94,26 @@ End Sub {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} +2. You are now ready to apply a filter to the data. Say for example you want to see only those items whose property D has the value d1. You must observe that D is a string that has non-numeric values. So, in this case you will need to use one of the string comparison operators (LIKE or MATCH) in your filter condition. +3. To add a filter condition, you will need to add a RecordFilterDescriptor to the Engine.TableDescriptor.RecordFilters collection. -2.You are now ready to apply a filter to the data. Say for example you want to see only those items whose property D has the value d1. You must observe that D is a string that has non-numeric values. So, in this case you will need to use one of the string comparison operators (LIKE or MATCH) in your filter condition. -3.To add a filter condition, you will need to add a RecordFilterDescriptor to the Engine.TableDescriptor.RecordFilters collection. +4. Do the following steps: -Do the following steps: - -1.List the data before the filter. -2.Apply the filter by creating a RecordFilterDescriptor. -3.Add it to the RecordFilters collection. -4.List the filtered data. + 1.List the data before the filter. + 2.Apply the filter by creating a RecordFilterDescriptor. + 3.Add it to the RecordFilters collection. + 4.List the filtered data. N> To list the data, instead of accessing the Table.Records collections, you were using the Table.FilteredRecords collections. The FilteredRecords collection only includes the records that satisfy all filters in the RecordFilters collection. Add this code at the end of the Main method. -5.Note that the constructor on theRecordFilterDescription takes an expression, "[D] LIKE 'd1'". This expression will be _True_ only for those items in the list where property D has the value d1. - +5. Note that the constructor on theRecordFilterDescription takes an expression, "[D] LIKE 'd1'". This expression will be _True_ only for those items in the list where property D has the value d1. +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} @@ -230,11 +232,14 @@ Dim obj As MyObject = CType(rec.GetData(), MyObject) {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ![Data-Manipulation_img2](Data-Manipulation_images/Data-Manipulation_img2.png) -6.You can apply more complex filters. Here is the code that will remove any existing filters and filter the property D being d1 or property b equal 2. Note here that since you expect property B to display only numeric data you must use the = operator in the comparison. +6. You can apply more complex filters. Here is the code that will remove any existing filters and filter the property D being d1 or property b equal 2. Note here that since you expect property B to display only numeric data you must use the = operator in the comparison. +{% capture codesnippet3 %} {% tabs %} {% highlight c# %} @@ -299,6 +304,8 @@ Dim obj As MyObject = CType(rec.GetData(), MyObject) {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} ![Data-Manipulation_images3](Data-Manipulation_images/Data-Manipulation_img3.png) @@ -312,8 +319,9 @@ You can add new properties to your data object that are algebraic expressions in To add an expression, you need to create an ExpressionFieldDescriptor and add it to the Engine.TableDescriptor.Expression.Fields collection. Here we illustrate this process by adding an expression that computes 2.1 times the value of property B plus 3.2. -1.In the Console Application, comment out all the code that is in the Main method and add this code to create a data object and set it into the GroupingEngine. +1. In the Console Application, comment out all the code that is in the Main method and add this code to create a data object and set it into the GroupingEngine. +{% capture codesnippet4 %} {% tabs %} {% highlight c# %} @@ -377,9 +385,12 @@ groupingEngine.SetSourceList(list) {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} -2.Now you must add code to list the data, add an expression property and then display the value of the expression. To retrieve the value, you must use the Record.GetValue method by passing it as the name of the expression that you had assigned when it was created. +2. Now you must add code to list the data, add an expression property and then display the value of the expression. To retrieve the value, you must use the Record.GetValue method by passing it as the name of the expression that you had assigned when it was created. +{% capture codesnippet5 %} {% tabs %} {% highlight c# %} @@ -477,6 +488,8 @@ Next rec {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet5 | OrderList_Indent_Level_1 }} ![Data-Manipulation_img4](Data-Manipulation_images/Data-Manipulation_img4.png) @@ -687,6 +700,7 @@ The following steps illustrate how to do custom sorting using the IComparer prop 1. Here, you must create a class that implements IComparer which can accept value such as ax, where x is a digit which is used to do the comparison. This leads to numerical sorting, ignoring the leading character. 2. Add this code immediately following the end of the Class1 code. +{% capture codesnippet6 %} {% tabs %} {% highlight c# %} @@ -809,10 +823,12 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet6 | OrderList_Indent_Level_1 }} +3. Add this code to the Main method to use this custom comparer to sort column A. -3.Add this code to the Main method to use this custom comparer to sort column A. - +{% capture codesnippet7 %} {% tabs %} {% highlight c# %} @@ -1000,6 +1016,8 @@ Console.ReadLine() {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet7 | OrderList_Indent_Level_1 }} ![Data-Manipulation_img7](Data-Manipulation_images/Data-Manipulation_img7.png) diff --git a/wpf/Grouping/Using-Grouping.md b/wpf/Grouping/Using-Grouping.md index 64e5e2473c..dd09562868 100644 --- a/wpf/Grouping/Using-Grouping.md +++ b/wpf/Grouping/Using-Grouping.md @@ -25,6 +25,7 @@ We will now continue using the same sample created in the previous section and a 1. To group the 'MyObject' ArrayList by a particular property, say property C, you have to add only the property name ("C") to the grouping.Engine.TableDescriptor.GroupedColumns collections. Add the following code snippet to the bottom of the Main method. +{% capture codesnippet1 %} {% tabs %} {% highlight c# %} @@ -77,8 +78,10 @@ Next rec {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} -2.After running the code from step 1, a screen similar to the one below will be displayed. Note that the bottom list displayed is now sorted by column C. This is a one side effect of grouping by column C. +2. After running the code from step 1, a screen similar to the one below will be displayed. Note that the bottom list displayed is now sorted by column C. This is a one side effect of grouping by column C. @@ -137,6 +140,7 @@ The Grouping.Group class has two properties that are used to recursively access 4. Add the following code below the Main method to implement a recursive method to display records in a Group. +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} @@ -254,9 +258,12 @@ End Sub {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} -5.Once you have your ShowRecordsUnderGroup method, you only have to retrieve a particular group from the Groups collection and then call the method. So, after grouping on property C, you can view all the records whose Category is "c1" using the code like the one given below the Main method. +5. Once you have your ShowRecordsUnderGroup method, you only have to retrieve a particular group from the Groups collection and then call the method. So, after grouping on property C, you can view all the records whose Category is "c1" using the code like the one given below the Main method. +{% capture codesnippet3 %} {% tabs %} {% highlight c# %} @@ -288,13 +295,16 @@ Console.ReadLine() {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} ![Using-Grouping_img3](Using-Grouping_images/Using-Grouping_img3.png) -6.Similar code can be used to display all the records by passing the 'primary' group to your ShowRecordsUnderGroup method. To implement this, add the following code to the Main method. +6. Similar code can be used to display all the records by passing the 'primary' group to your ShowRecordsUnderGroup method. To implement this, add the following code to the Main method. +{% capture codesnippet4 %} {% tabs %} {% highlight c# %} @@ -324,6 +334,8 @@ Console.ReadLine() {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} ## Adding a Summary diff --git a/wpf/HeatMap/Getting-Started.md b/wpf/HeatMap/Getting-Started.md index 009b88cf94..db66337549 100644 --- a/wpf/HeatMap/Getting-Started.md +++ b/wpf/HeatMap/Getting-Started.md @@ -109,6 +109,7 @@ Now data is ready, next we need to configure data source and map rows and column * Prepare ItemsMapping add it in resource. +{% capture codesnippet1 %} {% highlight xaml %} @@ -130,9 +131,12 @@ Now data is ready, next we need to configure data source and map rows and column {% endhighlight %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} * Set items source and mapping +{% capture codesnippet2 %} {% highlight xaml %} {% endhighlight %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} * This will show a grid with data as in following image. @@ -151,6 +157,7 @@ Next we can configure color range for these values using color mapping * Configure items mapping based on items source. +{% capture codesnippet3 %} {% highlight xaml %} @@ -159,9 +166,12 @@ Next we can configure color range for these values using color mapping {% endhighlight %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} * Set ColorMapping +{% capture codesnippet4 %} {% highlight xaml %} {% endhighlight %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} * This will show the grid data with color based on the range given. diff --git a/wpf/Integer-TextBox/Getting-Started.md b/wpf/Integer-TextBox/Getting-Started.md index dd834962fd..3ccbe88e73 100644 --- a/wpf/Integer-TextBox/Getting-Started.md +++ b/wpf/Integer-TextBox/Getting-Started.md @@ -36,6 +36,7 @@ To add the IntegerTextBox control manually in XAML, follow these steps: 3. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** and declare the `IntegerTextBox` control in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Adding WPF IntegerTextBox via C\# @@ -61,6 +64,7 @@ To add the IntegerTextBox control manually in C#, follow these steps: 3. Include the required namespace. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -68,9 +72,12 @@ using Syncfusion.Windows.Shared; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} 4. Create an instance of IntegerTextBox and add it to the window. +{% capture codesnippet3 %} {% tabs %} {% highlight C# %} @@ -89,6 +96,8 @@ this.Content = integerTextBox; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} ![WPF IntegerTextBox Control](Getting-Started_images/wpf-integer-textbox-control.png) diff --git a/wpf/Kanban-Board/Getting-started.md b/wpf/Kanban-Board/Getting-started.md index 90cb2512b0..5341e2309b 100644 --- a/wpf/Kanban-Board/Getting-started.md +++ b/wpf/Kanban-Board/Getting-started.md @@ -36,6 +36,7 @@ In this walk through, you will create a new application that contains the SfKanb 1. Add the required assembly references to the project as discussed in the Reference Essential Studio Components in your Solution section. 2. Add the “Syncfusion.UI.Xaml.Kanban” namespace to the application as shown below. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -45,11 +46,13 @@ xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.Kanban;assembly=Syncfusion.Sf {% highlight c# %} using Syncfusion.UI.Xaml.Kanban; {% endhighlight %} - {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} 3. Create an instance of SfKanban control. +{% capture codesnippet2 %} {% tabs %} {% highlight xaml %} @@ -65,6 +68,8 @@ SfKanban kanban = new SfKanban(); {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} #### Adding SfKanban from toolbox diff --git a/wpf/Linear-Gauge/Labels.md b/wpf/Linear-Gauge/Labels.md index 2010b82d15..c17149bdfb 100644 --- a/wpf/Linear-Gauge/Labels.md +++ b/wpf/Linear-Gauge/Labels.md @@ -126,6 +126,7 @@ The labels in the scale can be placed above or below the linear scale by choosin 2. Below (Default) +{% capture codesnippet1 %} {% tabs %} {% highlight xml %} @@ -168,6 +169,8 @@ The labels in the scale can be placed above or below the linear scale by choosin {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ![Linear Gauge Labels with position customization](Labels_images/Labels_img3.png) diff --git a/wpf/Linear-Gauge/Pointers.md b/wpf/Linear-Gauge/Pointers.md index 7676db390e..a929f8233c 100644 --- a/wpf/Linear-Gauge/Pointers.md +++ b/wpf/Linear-Gauge/Pointers.md @@ -315,6 +315,7 @@ You can modify the size of symbol pointer by changing the [`SymbolPointerHeight` 3. Cross +{% capture codesnippet1 %} {% tabs %} {% highlight xml %} @@ -386,6 +387,8 @@ You can modify the size of symbol pointer by changing the [`SymbolPointerHeight` {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ![Pointers - Linear Gauge](Pointers_images/Pointers_img5.png) diff --git a/wpf/Linear-Gauge/Ranges.md b/wpf/Linear-Gauge/Ranges.md index c41158a49d..b8a6eaca28 100644 --- a/wpf/Linear-Gauge/Ranges.md +++ b/wpf/Linear-Gauge/Ranges.md @@ -374,6 +374,7 @@ The range can be placed above or below the scale by choosing one of the followin 1. Above(Default) 2. Below +{% capture codesnippet1 %} {% tabs %} {% highlight xml %} @@ -443,6 +444,8 @@ The range can be placed above or below the scale by choosing one of the followin {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ![Ranges - Linear Gauge](Ranges_images/Ranges_img5.png) diff --git a/wpf/Linear-ProgressBar/Getting-Started.md b/wpf/Linear-ProgressBar/Getting-Started.md index c11bfa4845..eff2c09cdf 100644 --- a/wpf/Linear-ProgressBar/Getting-Started.md +++ b/wpf/Linear-ProgressBar/Getting-Started.md @@ -34,6 +34,7 @@ To add control manually in XAML, follow the given steps: 2. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page. 3. Declare the SfLinearProgressBar control in the XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Adding control through code behind @@ -65,6 +68,7 @@ To add control manually through code behind, follow the given steps: ![WPF Linear ProgressBar control added through code](Getting-Started_images/wpf-SfLinearProgressBar-control-added-manually.png) +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} using Syncfusion.UI.Xaml.ProgressBar; @@ -86,6 +90,8 @@ namespace SfProgressBar } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ## Theme diff --git a/wpf/Maps/Basic-KML-Format.md b/wpf/Maps/Basic-KML-Format.md index 5b6ddee649..bbad72db07 100644 --- a/wpf/Maps/Basic-KML-Format.md +++ b/wpf/Maps/Basic-KML-Format.md @@ -35,6 +35,7 @@ A KML file can be rendered with the help of the ShapeFileLayer in SfMap. The KML 2. Folder names 3. KmlFileName.kml +{% capture codesnippet1 %} {% highlight xaml %} @@ -45,6 +46,8 @@ A KML file can be rendered with the help of the ShapeFileLayer in SfMap. The KML {% endhighlight %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ![KML Shapes Support in ShapeFileLayer](KML-Shapes-Rendered-in-ShapeFileLayer_images/KML-Shapes-Rendered-in-ShapeFileLayer_img1.png) diff --git a/wpf/Maps/UserInteraction.md b/wpf/Maps/UserInteraction.md index 59561fc213..6cc1b73433 100644 --- a/wpf/Maps/UserInteraction.md +++ b/wpf/Maps/UserInteraction.md @@ -615,6 +615,7 @@ Calculate the initial zoom level automatically based on the [`Radius`](https://h * [`Center`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Maps.ImageryLayer.html#Syncfusion_UI_Xaml_Maps_ImageryLayer_Center) - Represents center point of ImageryLayer. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -672,6 +673,8 @@ Calculate the initial zoom level automatically based on the [`Radius`](https://h {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ### Geo-bounds diff --git a/wpf/MaskedTextBox/Getting-Started.md b/wpf/MaskedTextBox/Getting-Started.md index aee503789e..bc6d56d44a 100644 --- a/wpf/MaskedTextBox/Getting-Started.md +++ b/wpf/MaskedTextBox/Getting-Started.md @@ -39,13 +39,14 @@ To add the `SfMaskedEdit` control manually in XAML, follow these steps: 2. Add the following assembly references to the project, - * Syncfusion.SfInput.WPF - * Syncfusion.SfShared.WPF + * Syncfusion.SfInput.WPF + * Syncfusion.SfShared.WPF 3. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** and declare the `SfMaskedEdit` control in XAML page. -4. Declare the `SfMaskedEdit` control in XAML page. +4. Declare the `SfMaskedEdit` control in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -63,6 +64,8 @@ To add the `SfMaskedEdit` control manually in XAML, follow these steps: {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Adding WPF SfMaskedEdit via C\# @@ -77,6 +80,7 @@ To add the `SfMaskedEdit` control manually in C#, follow these steps: 4. Declare the `SfMaskedEdit` control using C#. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -98,6 +102,8 @@ public partial class MainWindow : Window { {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ![WPF MaskedEdit Control](Getting-Started_images/wpf-maskededit-control.png) diff --git a/wpf/Menu/Getting-Started.md b/wpf/Menu/Getting-Started.md index 03b722409f..6be277b192 100644 --- a/wpf/Menu/Getting-Started.md +++ b/wpf/Menu/Getting-Started.md @@ -98,6 +98,7 @@ In order to add [MenuAdv](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows. 3. Declare [MenuAdv](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.MenuAdv.html) in XAML page. +{% capture codesnippet1 %} {% highlight xaml %} @@ -119,6 +120,8 @@ In order to add [MenuAdv](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows. {% endhighlight %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Adding control manually in C# In order to add [MenuAdv](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.MenuAdv.html) control manually in C#, do the below steps, @@ -129,14 +132,18 @@ In order to add [MenuAdv](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows. 2. Import MenuAdv namespace **Syncfusion.Windows.Shared**. +{% capture codesnippet2 %} {% highlight C# %} using Syncfusion.Windows.Shared; {% endhighlight %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} 3. Create MenuAdv control instance and add it to the page. +{% capture codesnippet3 %} {% highlight C# %} MenuAdv mAdv = new MenuAdv(); @@ -172,6 +179,8 @@ mAdv.Items.Add(product); this.Content = mAdv; {% endhighlight %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} [View sample in GitHub](https://github.com/SyncfusionExamples/WPF-menuadv-getting-started-sample) diff --git a/wpf/Multi-Column-DropDown/Getting-Started.md b/wpf/Multi-Column-DropDown/Getting-Started.md index 7a485a0091..71eeb3b791 100644 --- a/wpf/Multi-Column-DropDown/Getting-Started.md +++ b/wpf/Multi-Column-DropDown/Getting-Started.md @@ -88,6 +88,7 @@ In order to add control manually in XAML, do the below steps, 2. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** or SfMultiColumnDropDownControl namespace **Syncfusion.UI.Xaml.Grid** in XAML page. 3. Declare `SfMultiColumnDropDownControl` in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ### Adding control manually in C# @@ -113,6 +116,7 @@ In order to add the control manually in C#, do the below steps, 2. Import SfMultiColumnDropDownControl namespace Syncfusion.UI.Xaml.Grid. 3. Create `SfMultiColumnDropDownControl` instance and add it to the Page. +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} using Syncfusion.UI.Xaml.Grid; @@ -133,6 +137,8 @@ namespace WpfApplication1 } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ## Creating Data Model for sample application @@ -140,6 +146,7 @@ Before binding `ItemsSource` to the control, you must create data model for Appl 1. Create data object class named `OrderInfo` and declare properties as shown below, +{% capture codesnippet3 %} {% tabs %} {% highlight c# %} public class OrderInfo @@ -191,9 +198,12 @@ public class OrderInfo } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} 2. Create a `ViewModel` class with `Orders` property and Orders property is initialized with several data objects in constructor. +{% capture codesnippet4 %} {% tabs %} {% highlight c# %} public class ViewModel @@ -228,6 +238,8 @@ public class ViewModel } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} ## Binding to Data diff --git a/wpf/Multi-Column-DropDown/Selection.md b/wpf/Multi-Column-DropDown/Selection.md index 0758c2f8d3..5d1545b526 100644 --- a/wpf/Multi-Column-DropDown/Selection.md +++ b/wpf/Multi-Column-DropDown/Selection.md @@ -44,6 +44,7 @@ You can select multiple rows at same time by setting [SelectionMode](https://hel 3. By using `Space` key. 4. By interacting with the checkbox in the `Selector column`. +{% capture codesnippet1 %} {% tabs %} {% highlight xml %} {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ### Adding control manually in C# @@ -76,6 +79,7 @@ In order to add control manually in C#, do the below steps, 2. Import SfTreeView namespace **Syncfusion.UI.Xaml.NavigationDrawer** . 3. Create SfNavigationDrawer control instance and add it to the Page. +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} using Syncfusion.UI.Xaml.NavigationDrawer; @@ -98,6 +102,8 @@ namespace NavigationDrawerWPF } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ## Adding content to the control diff --git a/wpf/Notify-Icon/Getting-Started.md b/wpf/Notify-Icon/Getting-Started.md index 92ce757918..804fe1ef1f 100644 --- a/wpf/Notify-Icon/Getting-Started.md +++ b/wpf/Notify-Icon/Getting-Started.md @@ -32,17 +32,18 @@ Create a new WPF project to show the [NotifyIcon](https://help.syncfusion.com/cr To add the control manually to the XAML page, follow the given steps: -1.Add the following required assembly references to the project, +1. Add the following required assembly references to the project, -* Syncfusion.Shared.WPF -* Syncfusion.Tools.WPF -* Syncfusion.Shared.WPF.Classic -* Syncfusion.Tools.WPF.Classic + * Syncfusion.Shared.WPF + * Syncfusion.Tools.WPF + * Syncfusion.Shared.WPF.Classic + * Syncfusion.Tools.WPF.Classic -2.Import Syncfusion.WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page or **clr-namespace:Syncfusion.Windows.Tools.Controls;assembly=Syncfusion.Tools.Wpf.Classic** namespace. +2. Import Syncfusion.WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page or **clr-namespace:Syncfusion.Windows.Tools.Controls;assembly=Syncfusion.Tools.Wpf.Classic** namespace. -3.Declare the `NotifyIcon` control in XAML page. +3. Declare the `NotifyIcon` control in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -65,22 +66,25 @@ To add the control manually to the XAML page, follow the given steps: {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Adding control manually in C# To add the control manually in C#, follow the given steps: -1.Add the following required assembly references to the project, +1. Add the following required assembly references to the project, -* Syncfusion.Shared.WPF -* Syncfusion.Tools.WPF -* Syncfusion.Shared.WPF.Classic -* Syncfusion.Tools.WPF.Classic + * Syncfusion.Shared.WPF + * Syncfusion.Tools.WPF + * Syncfusion.Shared.WPF.Classic + * Syncfusion.Tools.WPF.Classic -2.Import the `NotifyIcon` namespace **Syncfusion.Windows.Tools.Controls**. +2. Import the `NotifyIcon` namespace **Syncfusion.Windows.Tools.Controls**. -3.Create the `NotifyIcon` control instance and add it to the page. +3. Create the `NotifyIcon` control instance and add it to the page. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -109,6 +113,8 @@ namespace NotifyIcon_GettingStarted {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ## Show the notify icon diff --git a/wpf/NumericUpdown/Getting-Started.md b/wpf/NumericUpdown/Getting-Started.md index 306346f8a5..f59807c742 100644 --- a/wpf/NumericUpdown/Getting-Started.md +++ b/wpf/NumericUpdown/Getting-Started.md @@ -39,14 +39,15 @@ The [UpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown In order to add the [UpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Shared.UpDown.html) control manually in XAML, do the below steps, -1) Create a new WPF project in Visual Studio. +1. Create a new WPF project in Visual Studio. -2) Add the following required assembly reference to the project. +2. Add the following required assembly reference to the project. -* Syncfusion.Shared.WPF + * Syncfusion.Shared.WPF -3) Import Syncfusion WPF schema http://schemas.syncfusion.com/wpf and declare the UpDown control in XAML page. +3. Import Syncfusion WPF schema http://schemas.syncfusion.com/wpf and declare the UpDown control in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -64,6 +65,8 @@ In order to add the [UpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windo {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ![WPF UpDown Control](GettingStarted-images/wpf-updown-designer.jpeg) @@ -72,16 +75,17 @@ In order to add the [UpDown](https://help.syncfusion.com/cr/wpf/Syncfusion.Windo In order to add the UpDown control manually in C#, do the below steps, -1) Create a new WPF application via Visual Studio. +1. Create a new WPF application via Visual Studio. -2) Add the following required assembly reference to the project. +2. Add the following required assembly reference to the project. -* Syncfusion.Shared.WPF + * Syncfusion.Shared.WPF -3) Import UpDown namespace **Syncfusion.Windows.Shared**. +3. Import UpDown namespace **Syncfusion.Windows.Shared**. -3) Create an instance of UpDown control and add it to the main window. +4. Create an instance of UpDown control and add it to the main window. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -94,6 +98,8 @@ grid.Children.Add(updown); {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ![WPF UpDown Control](GettingStarted-images/wpf-updown-code.jpeg) diff --git a/wpf/OLAP-Common/How-To/Connect-WCF-Service-by-an-additional-Binding-Type-in-silverlight-application.md b/wpf/OLAP-Common/How-To/Connect-WCF-Service-by-an-additional-Binding-Type-in-silverlight-application.md index 154b3d6016..b0e7e2c91c 100644 --- a/wpf/OLAP-Common/How-To/Connect-WCF-Service-by-an-additional-Binding-Type-in-silverlight-application.md +++ b/wpf/OLAP-Common/How-To/Connect-WCF-Service-by-an-additional-Binding-Type-in-silverlight-application.md @@ -73,7 +73,7 @@ contract="Syncfusion.OlapSilverlight.Manager.IOlapDataProvider" /> * Declare the _IOlapDataProvider_ for Service instantiation as given in the following code: - +{% capture codesnippet1 %} {% highlight c# %} @@ -89,9 +89,13 @@ IOlapDataProvider DataProvider = null; Dim DataProvider As IOlapDataProvider = Nothing {% endhighlight %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} * Specify the _basicHttpBinding_ and Instantiate the _DataProvider_ from the _ChannelFactory_ as given in the following code: +{% capture codesnippet2 %} + {% tabs %} {% highlight c# %} @@ -143,3 +147,5 @@ End Sub {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} \ No newline at end of file diff --git a/wpf/Percent-TextBox/Getting-Started.md b/wpf/Percent-TextBox/Getting-Started.md index 3d0cd8ad3c..46151394a2 100644 --- a/wpf/Percent-TextBox/Getting-Started.md +++ b/wpf/Percent-TextBox/Getting-Started.md @@ -36,6 +36,7 @@ To add the PercentTextBox control manually in XAML, follow these steps: 3. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** and declare the `PercentTextBox` control in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Adding WPF PercentTextBox via C\# @@ -61,6 +64,7 @@ To add the PercentTextBox control manually in C#, follow these steps: 3. Include the required namespace. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -68,9 +72,12 @@ using Syncfusion.Windows.Shared; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} 4. Create an instance of PercentTextBox and add it to the window. +{% capture codesnippet3 %} {% tabs %} {% highlight C# %} @@ -89,6 +96,8 @@ this.Content = percentTextBox; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} ![WPF PercentTextBox Control](Getting-Started_images/wpf-percent-textbox-control.png) diff --git a/wpf/PropertyGrid/CategoryEditor-support.md b/wpf/PropertyGrid/CategoryEditor-support.md index 18a193bfe1..8e5e6261b6 100644 --- a/wpf/PropertyGrid/CategoryEditor-support.md +++ b/wpf/PropertyGrid/CategoryEditor-support.md @@ -19,6 +19,7 @@ For example, the `Background`, `BorderBrush` and `Foreground` are brush type pro a) `ColorEdit` control visibility converter +{% capture codesnippet1 %} {% tabs %} {% highlight C# %} @@ -51,9 +52,12 @@ public class SelectedIndexToVisibility : IValueConverter { {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} b) Creating the CategoryEditor for the properties: +{% capture codesnippet2 %} {% tabs %} {% highlight xaml %} @@ -130,6 +134,8 @@ public class SelectedIndexToVisibility : IValueConverter { {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} By Default, the properties are arranged like the key-value pairs with its value editor. Using the `CategoryEditor`, the `Background`, `Foreground` and `BorderBrush` property value editors are arranged by our wish. diff --git a/wpf/PropertyGrid/CustomEditor-support.md b/wpf/PropertyGrid/CustomEditor-support.md index ee93f0d6d1..3066392547 100644 --- a/wpf/PropertyGrid/CustomEditor-support.md +++ b/wpf/PropertyGrid/CustomEditor-support.md @@ -431,6 +431,7 @@ N> `ConstructorParameter` property will work only if a value is assigned for the 1. Create a custom editor for the desired property item in `PropertyGrid`. Add constructor with parameters in the custom editor class. +{% capture codesnippet1 %} {% tabs %} {% highlight C# %} @@ -494,9 +495,12 @@ public class IntegerEditor : ITypeEditor {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} 2. Create `Employee` and `ViewModel` classes with required properties. Pass the required objects in an object array and assign it to the `ConstructorParameter` property of `CustomEditor` as shown below. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -548,6 +552,8 @@ class ViewModel {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} Since we have assigned the custom editor for property type **long(Int64)**, the custom editor will be applied for `Age` property item. You can also create custom editor and set value for `ConstructorParameter` property in xaml file as shown below. diff --git a/wpf/PropertyGrid/Getting-Started.md b/wpf/PropertyGrid/Getting-Started.md index 9ef63fbe89..1f59afcec7 100644 --- a/wpf/PropertyGrid/Getting-Started.md +++ b/wpf/PropertyGrid/Getting-Started.md @@ -43,6 +43,7 @@ To add the `PropertyGrid` control manually in XAML, follow these steps: 3. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** and declare the `PropertyGrid` control in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -62,6 +63,8 @@ To add the `PropertyGrid` control manually in XAML, follow these steps: {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Adding WPF PropertyGrid via C# @@ -76,6 +79,7 @@ To add the `PropertyGrid` control manually in C#, follow these steps: 3. Include the required namespace and create an instance of `PropertyGrid` and add it to the window. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -99,6 +103,8 @@ public partial class MainWindow : Window { {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ![PropertyGrid control added to Window by code](Getting-Started_images/Getting-Started_img15.png) diff --git a/wpf/Radial-Menu/Overview.md b/wpf/Radial-Menu/Overview.md index 2aa320f47f..c8be5d01f6 100644 --- a/wpf/Radial-Menu/Overview.md +++ b/wpf/Radial-Menu/Overview.md @@ -13,9 +13,9 @@ The Radial Menu displays a hierarchical menu in a circular layout. Typically use ### Key Features -* Items Source – Any business object collection can be bound to control. -* Commanding – Each item can be bound to a command that could perform an action. -* Color Palette – Easy to form radial color palette layout. +* **Items Source** – Any business object collection can be bound to control. +* **Commanding** – Each item can be bound to a command that could perform an action. +* **Color Palette** – Easy to form radial color palette layout. diff --git a/wpf/Radial-Slider/Getting-Started.md b/wpf/Radial-Slider/Getting-Started.md index c93d2796d6..a8da2b3dbc 100644 --- a/wpf/Radial-Slider/Getting-Started.md +++ b/wpf/Radial-Slider/Getting-Started.md @@ -23,28 +23,29 @@ Refer to this [documentation](https://help.syncfusion.com/wpf/visual-studio-inte ## Adding WPF SfRadialSlider via designer -1) The `SfRadialSlider` can be added to an application by dragging it from the toolbox to a designer view. The following dependent assemblies will be added automatically: +1. The `SfRadialSlider` can be added to an application by dragging it from the toolbox to a designer view. The following dependent assemblies will be added automatically: -* Syncfusion.SfRadialMenu.WPF -* Syncfusion.SfShared.WPF + * Syncfusion.SfRadialMenu.WPF + * Syncfusion.SfShared.WPF ![wpf SfRadialSlider control added by designer](GettingStarted_images/wpf-SfRadialSlider-control-added-by-designer.png) -2) Set the properties for `SfRadialSlider` in design mode using the SmartTag feature. +2. Set the properties for `SfRadialSlider` in design mode using the SmartTag feature. ## Adding WPF SfRadialSlider via XAML To add the `SfRadialSlider` manually in XAML, follow these steps: -1) Create a new WPF project in Visual Studio. +1. Create a new WPF project in Visual Studio. -2) Add the following required assembly references to the project: +2. Add the following required assembly references to the project: -* Syncfusion.SfRadialMenu.WPF -* Syncfusion.SfShared.WPF + * Syncfusion.SfRadialMenu.WPF + * Syncfusion.SfShared.WPF -3) Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf**, and declare the SfRadialSlider in XAML page. +3. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf**, and declare the SfRadialSlider in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -68,19 +69,22 @@ To add the `SfRadialSlider` manually in XAML, follow these steps: {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Adding WPF SfRadialSlider via C# To add the `SfRadialSlider` manually in C#, follow these steps: -1) Create a new WPF application via Visual Studio. +1. Create a new WPF application via Visual Studio. -2) Add the following required assembly references to the project: +2. Add the following required assembly references to the project: -* Syncfusion.Shared.WPF + * Syncfusion.Shared.WPF -3) Include the required namespace. +3. Include the required namespace. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -88,9 +92,12 @@ using Syncfusion.Windows.Shared; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} -4) Create an instance of `SfRadialSlider`, and add it to the window. +4. Create an instance of `SfRadialSlider`, and add it to the window. +{% capture codesnippet3 %} {% tabs %} {% highlight C# %} @@ -103,6 +110,8 @@ radialSlider.Width = 200; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} ![wpf SfRadialSlider control added by code-behind](GettingStarted_images/Codebehind_SfRadialSlider.png) diff --git a/wpf/Range-Selector/Getting-Started.md b/wpf/Range-Selector/Getting-Started.md index 567034956c..8dfff017bc 100644 --- a/wpf/Range-Selector/Getting-Started.md +++ b/wpf/Range-Selector/Getting-Started.md @@ -34,11 +34,14 @@ The following section explains how to create SfDateTimeRangeNavigator. 3. Add the following namespace in your XAML page: +{% capture codesnippet1 %} {% highlight xaml %} xmlns:Syncfusion="clr-namespace:Syncfusion.UI.Xaml.Charts" {% endhighlight %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ### Initialize the SfDateTimeRangeNavigator @@ -204,14 +207,16 @@ This section explains how to create an application using the date-time range nav 2. Choose Windows > Extensions > Syncfusion.SfChart.WPF. 3. Add the following namespace in your C# file: MainPage.xaml.cs. - +{% capture codesnippet2 %} {% highlight c# %} using Syncfusion.UI.Xaml.Charts; {% endhighlight %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} -Initialize the Range Navigator +### Initialize the Range Navigator {% highlight c# %} @@ -219,7 +224,7 @@ SfDateTimeRangNavigator rangenavigator = new SfDateTimeRangNavigator (); {% endhighlight %} -Create a Sample Data Source +### Create a Sample Data Source {% highlight c# %} diff --git a/wpf/Rating/Getting-Started.md b/wpf/Rating/Getting-Started.md index b40234b9a9..d9075875e5 100644 --- a/wpf/Rating/Getting-Started.md +++ b/wpf/Rating/Getting-Started.md @@ -47,6 +47,7 @@ In order to add [SfRating](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows 3. Declare [SfRating](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.Input.SfRating.html) in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -67,6 +68,8 @@ In order to add [SfRating](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Add control manually in C# @@ -81,6 +84,7 @@ In order to add [SfRating](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows 3. Create SfRating control instance and add it to window. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -111,6 +115,8 @@ namespace SfRating_GettingStarted {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ## Customize number of rating items diff --git a/wpf/Smith-Chart/Getting-Started.md b/wpf/Smith-Chart/Getting-Started.md index 5788c18077..089b721aed 100644 --- a/wpf/Smith-Chart/Getting-Started.md +++ b/wpf/Smith-Chart/Getting-Started.md @@ -58,9 +58,12 @@ XX.X450.0.X 4. Add the following namespace in your XAML window. +{% capture codesnippet1 %} {% highlight xaml %} xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.SmithChart;assembly=Syncfusion.SfSmithChart.WPF" {% endhighlight %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} @@ -455,12 +458,14 @@ Some developers prefer code behind as the first approach for development to crea 2. Choose Windows > Extensions >Syncfusion.SfSmithChart.WPF 3. Add the following namespace in your C# file, MainWindow.xaml.cs. - +{% capture codesnippet2 %} {% highlight c# %} using Syncfusion.UI.Xaml.SmithChart; {% endhighlight %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ### Initialize the chart diff --git a/wpf/SpellChecker/Getting-Started.md b/wpf/SpellChecker/Getting-Started.md index 9eb44ad8e3..0d0d3cc5ae 100644 --- a/wpf/SpellChecker/Getting-Started.md +++ b/wpf/SpellChecker/Getting-Started.md @@ -35,6 +35,7 @@ You can add the `SfSpellChecker` to an application by the following steps, 2. Add `TextBox` control and set [SfSpellChecker.SpellChecker](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfSpellChecker.html#Syncfusion_Windows_Controls_SfSpellChecker_SpellCheckerProperty) attached property to perform spell check. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -73,9 +74,12 @@ SfSpellChecker.SetSpellChecker(textbox, spellChecker); {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} 3. If you want to open the `SfSpellChecker` while clicking on the `Spell Check button`, call the [PerformSpellCheckUsingDialog](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Controls.SfSpellChecker.html#Syncfusion_Windows_Controls_SfSpellChecker_PerformSpellCheckUsingDialog_Syncfusion_Windows_Controls_IEditorProperties_) method inside the `SpellCheck ButtonClick` method. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -86,6 +90,8 @@ private void SpellCheck_ButtonClick(object sender, RoutedEventArgs e) { {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ![SpeckChecker created for the Text editor](gettingstarted-images/Getting_Started.png) diff --git a/wpf/SpellChecker/custom-dictionary-support.md b/wpf/SpellChecker/custom-dictionary-support.md index 264d3129b3..c76399ee8f 100644 --- a/wpf/SpellChecker/custom-dictionary-support.md +++ b/wpf/SpellChecker/custom-dictionary-support.md @@ -46,6 +46,7 @@ You can check spelling mistakes using `Hunspell` dictionary format. This format N> The following code snippets shows how to add Hunspell dictionary to the `SpellChecker`. Please refer [Adding SfSpellChecker to an application](https://help.syncfusion.com/windowsforms/spell-checker/getting-started#adding-wpf-sfspellchecker-to-an-application) to know how to configure SfSpellChecker. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -108,7 +109,10 @@ SfSpellChecker.SetSpellChecker(textbox, spellChecker); {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -119,6 +123,8 @@ private void SpellCheck_ButtonClick(object sender, RoutedEventArgs e) { {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} N> You can add multiple `HunspellDictionary` with various culture files into the `SfSpellChecker.Dictionaries` collection. Based on the `SfSpellChecker.Culture` respective `HunspellDictionary` is used for spell check. @@ -145,6 +151,7 @@ You can check spelling mistakes using `Ispell` dictionary format. This format co 4. Setting the required culture to the `SfSpellChecker.Culture` property. +{% capture codesnippet3 %} {% tabs %} {% highlight xaml %} @@ -207,7 +214,10 @@ SfSpellChecker.SetSpellChecker(textbox, spellChecker); {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} +{% capture codesnippet4 %} {% tabs %} {% highlight C# %} @@ -218,6 +228,8 @@ private void SpellCheck_ButtonClick(object sender, RoutedEventArgs e) { {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} N> You can add multiple `IspellDictionary` with various culture files into the `SfSpellChecker.Dictionaries` collection. Based on the `SfSpellChecker.Culture` respective `IspellDictionary` is used for spell check. @@ -244,6 +256,7 @@ You can check spelling mistakes using `OpenOffice` dictionary format. This forma 4. Setting the required culture to the `SfSpellChecker.Culture` property. +{% capture codesnippet5 %} {% tabs %} {% highlight xaml %} @@ -306,7 +319,10 @@ SfSpellChecker.SetSpellChecker(textbox, spellChecker); {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet5 | OrderList_Indent_Level_1 }} +{% capture codesnippet6 %} {% tabs %} {% highlight C# %} @@ -317,6 +333,8 @@ private void SpellCheck_ButtonClick(object sender, RoutedEventArgs e) { {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet6 | OrderList_Indent_Level_1 }} N> You can add multiple `OpenOfficeDictionary` with various culture files into the `SfSpellChecker.Dictionaries` collection. Based on the `SfSpellChecker.Culture` respective `OpenOfficeDictionary` is used for spell check. @@ -340,6 +358,7 @@ You can add multiple `CustomDictionary` for each culture using `SfSpellChecker.D 4. Setting the required culture to the `SfSpellChecker.Culture` property. +{% capture codesnippet7 %} {% tabs %} {% highlight xaml %} @@ -417,7 +436,10 @@ SfSpellChecker.SetSpellChecker(textbox, spellChecker); {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet7 | OrderList_Indent_Level_1 }} +{% capture codesnippet8 %} {% tabs %} {% highlight C# %} @@ -428,6 +450,8 @@ private void SpellCheck_ButtonClick(object sender, RoutedEventArgs e) { {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet8 | OrderList_Indent_Level_1 }} N> As custom dictionary hold extra words that is not available in standard dictionary, it is always used in conjunction with standard dictionary. diff --git a/wpf/Split-Button/Getting-Started.md b/wpf/Split-Button/Getting-Started.md index 3ed7849138..246be73924 100644 --- a/wpf/Split-Button/Getting-Started.md +++ b/wpf/Split-Button/Getting-Started.md @@ -57,6 +57,7 @@ In order to add the control manually in XAML, follow the below steps. 3. Declare SplitButtonAdv control in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -74,6 +75,8 @@ In order to add the control manually in XAML, follow the below steps. {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ### Adding control manually in C# @@ -87,6 +90,7 @@ In order to add control manually in C#, do the below steps. 3. Create SplitButtonAdv control instance and add it to the window. +{% capture codesnippet2 %} {% tabs %} {% highlight xaml %} @@ -101,6 +105,8 @@ In order to add control manually in C#, do the below steps. +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} {% endhighlight %} {% highlight c# %} diff --git a/wpf/Step-ProgressBar/Getting-Started.md b/wpf/Step-ProgressBar/Getting-Started.md index 470610c368..704c511f84 100644 --- a/wpf/Step-ProgressBar/Getting-Started.md +++ b/wpf/Step-ProgressBar/Getting-Started.md @@ -115,6 +115,7 @@ To add control manually using the code behind, follow the given steps: ![WPF SfStepProgressBar control added through code](Getting-Started_images/wpf-StepProgressBar-control-added-manually.png) +{% capture codesnippet1 %} {% tabs %} {% highlight C# %} using Syncfusion.UI.Xaml.ProgressBar; @@ -152,6 +153,9 @@ namespace SfProgressBar } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} + Download demo from [GitHub](https://github.com/SyncfusionExamples/WPF-StepProgressBar-Demos/tree/master/Samples/GettingStarted). diff --git a/wpf/Surface-Chart/Getting-Started.md b/wpf/Surface-Chart/Getting-Started.md index e3efa66354..d49b45ebfb 100644 --- a/wpf/Surface-Chart/Getting-Started.md +++ b/wpf/Surface-Chart/Getting-Started.md @@ -35,11 +35,14 @@ This section demonstrates how to create a surface chart using the `SfSurfaceChar 2. Choose Windows > Extensions > Syncfusion.SfChart.WPF. 3. Add the following namespace in your XAML page. +{% capture codesnippet1 %} {% highlight xaml %} xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF" {% endhighlight %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} N> Adding the extension Syncfusion.SfChart.WPF, adds all the Syncfusion WPF controls. You can also add the SfChart reference alone from the following location. C:\Program Files (x86)\Syncfusion\Essential Studio\Assemblies (4.0/4.5.1/4.6) @@ -325,11 +328,14 @@ This section demonstrates how to create a surface chart using SfSurfaceChart con 2. Choose Windows > Extensions >Syncfusion.SfChart.WPF. 3. Add the following namespace in code behind +{% capture codesnippet2 %} {% highlight c# %} using Syncfusion.UI.Xaml.Charts; {% endhighlight %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} The following section demonstrates a simple surface chart with the data discussed in the above table. diff --git a/wpf/Syntax-Editor/Getting-Started.md b/wpf/Syntax-Editor/Getting-Started.md index 25eb99022c..11fd4110e2 100644 --- a/wpf/Syntax-Editor/Getting-Started.md +++ b/wpf/Syntax-Editor/Getting-Started.md @@ -51,20 +51,21 @@ The [EditControl](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Edit.Edi To add the [EditControl](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Edit.EditControl.html) manually in XAML, follow these steps: -1) Create a new WPF project in Visual Studio. +1. Create a new WPF project in Visual Studio. -2) Add the following required assembly references to the project: +2. Add the following required assembly references to the project: -* Syncfusion.Edit.WPF + * Syncfusion.Edit.WPF -* Syncfusion.GridCommon.WPF + * Syncfusion.GridCommon.WPF -* Syncfusion.Shared.WPF + * Syncfusion.Shared.WPF -* Syncfusion.Tools.WPF + * Syncfusion.Tools.WPF -3) Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf**, and declare the EditControl in XAML page. +3. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf**, and declare the EditControl in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -94,25 +95,28 @@ VerticalAlignment="Top" Width="300"/> {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Adding WPF EditControl via C# To add the [EditControl](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Edit.EditControl.html) manually in C#, follow these steps: -1) Create a new WPF application via Visual Studio. +1. Create a new WPF application via Visual Studio. -2) Add the following required assembly references to the project: +2. Add the following required assembly references to the project: -* Syncfusion.Edit.WPF + * Syncfusion.Edit.WPF -* Syncfusion.GridCommon.WPF + * Syncfusion.GridCommon.WPF -* Syncfusion.Shared.WPF + * Syncfusion.Shared.WPF -* Syncfusion.Tools.WPF + * Syncfusion.Tools.WPF -3) Include the required namespace. +3. Include the required namespace. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -122,9 +126,12 @@ using Syncfusion.Windows.Edit; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} -4) Create an instance of [EditControl](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Edit.EditControl.html), and add it to the window. +4. Create an instance of [EditControl](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Edit.EditControl.html), and add it to the window. +{% capture codesnippet3 %} {% tabs %} {% highlight C# %} @@ -140,6 +147,8 @@ public MainWindow() {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} ![Adding EditControl to Project](Getting-Started_images/Getting-Started_img3.jpeg) diff --git a/wpf/Syntax-Editor/Printing.md b/wpf/Syntax-Editor/Printing.md index cd7a6eaf2d..6f6d5ad01b 100644 --- a/wpf/Syntax-Editor/Printing.md +++ b/wpf/Syntax-Editor/Printing.md @@ -175,6 +175,7 @@ Steps to add page header while printing, 1. Create DataTemplate in Application.Resources. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -190,9 +191,12 @@ Steps to add page header while printing, {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} -2.Set the above defined DataTemplate to `PrintSettings.PageHeaderTemplate` and assign value for `PrintSettings.PageHeaderHeight` property also. +2. Set the above defined DataTemplate to `PrintSettings.PageHeaderTemplate` and assign value for `PrintSettings.PageHeaderHeight` property also. +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} @@ -220,8 +224,10 @@ editcontrol.ShowPrintPreview {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} -3.Now run the application and you can see page header in all the pages. In the same way, you can set `PrintSettings.PageFooterTemplate` also. +3. Now run the application and you can see page header in all the pages. In the same way, you can set `PrintSettings.PageFooterTemplate` also. ![Print window](Printing_images/header.png) diff --git a/wpf/Syntax-Editor/Text-Navigation.md b/wpf/Syntax-Editor/Text-Navigation.md index 7b87f83aca..e353139f7e 100644 --- a/wpf/Syntax-Editor/Text-Navigation.md +++ b/wpf/Syntax-Editor/Text-Navigation.md @@ -20,6 +20,7 @@ The following functions enables text navigation in the Syntax Editor in terms of 2. [MoveToNextIndex](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Edit.EditControl.html#Syncfusion_Windows_Edit_EditControl_MoveToNextIndex) to move cursor position in forward position in . +{% capture codesnippet1 %} {% tabs %} {% highlight C# %} @@ -37,6 +38,8 @@ Me.editControl.MoveToPreviousIndex() {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ### Word based navigation @@ -47,6 +50,7 @@ The following functions enables text navigation in the Syntax Editor in terms of 2. [MoveToPreviousWord](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Edit.EditControl.html#Syncfusion_Windows_Edit_EditControl_MoveToPreviousWord) moves cursor to start position of previous word. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -64,6 +68,8 @@ Me.editControl.MoveToPreviousWord() {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ### Line based navigation @@ -77,6 +83,7 @@ The following functions enables text navigation in the Syntax Editor in terms of 4. [MoveToLineEnd](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Edit.EditControl.html#Syncfusion_Windows_Edit_EditControl_MoveToLineEnd) to move cursor to end postion of current line. +{% capture codesnippet3 %} {% tabs %} {% highlight C# %} @@ -94,6 +101,8 @@ Me.editControl.MoveToNextLine() {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} ## Keyboard Navigation diff --git a/wpf/Tab-Navigation/Animation.md b/wpf/Tab-Navigation/Animation.md index dc491b1248..efd4ad3547 100644 --- a/wpf/Tab-Navigation/Animation.md +++ b/wpf/Tab-Navigation/Animation.md @@ -13,6 +13,7 @@ Transition Effect property is used to set the animation effect for the tab navig * Slide – The item/page navigates with slide effect. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -21,9 +22,12 @@ Transition Effect property is used to set the animation effect for the tab navig {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} * Fade – During navigation, the previous item fades out and the new item appears with variation in opacity. +{% capture codesnippet2 %} {% tabs %} {% highlight xaml %} @@ -32,9 +36,12 @@ Transition Effect property is used to set the animation effect for the tab navig {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} * Zoom – The new item appears with a zooming effect. +{% capture codesnippet3 %} {% tabs %} {% highlight xaml %} @@ -43,9 +50,12 @@ Transition Effect property is used to set the animation effect for the tab navig {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} * Blur – The new item appears with blur effect. +{% capture codesnippet4 %} {% tabs %} {% highlight xaml %} @@ -54,9 +64,12 @@ Transition Effect property is used to set the animation effect for the tab navig {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} * Push – The new item descends from the top +{% capture codesnippet5 %} {% tabs %} {% highlight xaml %} @@ -65,9 +78,12 @@ Transition Effect property is used to set the animation effect for the tab navig {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet5 | OrderList_Indent_Level_1 }} * PushIn – The new item ascends from the bottom +{% capture codesnippet6 %} {% tabs %} {% highlight xaml %} @@ -76,9 +92,12 @@ Transition Effect property is used to set the animation effect for the tab navig {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet6 | OrderList_Indent_Level_1 }} * Wipe – The old item gets washed out and the new item appears. +{% capture codesnippet7 %} {% tabs %} {% highlight xaml %} @@ -87,3 +106,5 @@ Transition Effect property is used to set the animation effect for the tab navig {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet7 | OrderList_Indent_Level_1 }} diff --git a/wpf/Tab-Navigation/Data-binding.md b/wpf/Tab-Navigation/Data-binding.md index 20767d8061..9fc9daa017 100644 --- a/wpf/Tab-Navigation/Data-binding.md +++ b/wpf/Tab-Navigation/Data-binding.md @@ -63,7 +63,7 @@ To bind XML data to a TabNavigation control, convert the XML data to a collectio * **Create a xml file** - +{% capture codesnippet1 %} {% tabs %} {% highlight XML %} @@ -91,9 +91,12 @@ To bind XML data to a TabNavigation control, convert the XML data to a collectio {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} * **Model.cs** +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} namespace TabNavigationXMLBinding @@ -143,9 +146,12 @@ namespace TabNavigationXMLBinding } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} * **ViewModel.cs** +{% capture codesnippet3 %} {% tabs %} {% highlight C# %} namespace TabNavigationXMLBinding @@ -200,9 +206,12 @@ namespace TabNavigationXMLBinding } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} * **MainWindow.Xaml.cs** +{% capture codesnippet4 %} {% tabs %} {% highlight C# %} namespace TabNavigationXMLBinding @@ -243,9 +252,12 @@ namespace TabNavigationXMLBinding } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} * **MainWindow.Xaml** +{% capture codesnippet5 %} {% tabs %} {% highlight XAML %} @@ -256,3 +268,5 @@ namespace TabNavigationXMLBinding {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet5 | OrderList_Indent_Level_1 }} diff --git a/wpf/Tab-Navigation/Getting-Started.md b/wpf/Tab-Navigation/Getting-Started.md index b15441794f..f194a9a5a4 100644 --- a/wpf/Tab-Navigation/Getting-Started.md +++ b/wpf/Tab-Navigation/Getting-Started.md @@ -42,6 +42,7 @@ In order to add control manually in XAML, do the below steps, 2. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** in XAML page. 3. Declare TabNavigation control in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ### Adding control manually in C\# @@ -67,6 +70,7 @@ In order to add control manually in C#, do the below steps, 2. Import TabNavigationControl namespace **using Syncfusion.Windows.Tools.Controls;**. 3. Create TabNavigationControl instance and add it to the window. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} using Syncfusion.Windows.Tools.Controls; @@ -88,6 +92,8 @@ namespace TabNavigationSample } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ### Adding Items using TabNavigationItem diff --git a/wpf/Tab-Splitter/Getting-Started.md b/wpf/Tab-Splitter/Getting-Started.md index c2a726aff8..9fc63b9b45 100644 --- a/wpf/Tab-Splitter/Getting-Started.md +++ b/wpf/Tab-Splitter/Getting-Started.md @@ -21,15 +21,16 @@ Refer to the [control dependencies](https://help.syncfusion.com/wpf/control-depe N> Download demo application from [GitHub](https://github.com/SyncfusionExamples/wpf-tabsplitter-example) -1) Create a new WPF application via Visual Studio. +1. Create a new WPF application via Visual Studio. -2) Add the following assembly reference to this project. +2. Add the following assembly reference to this project. -* Syncfusion.Shared.WPF -* Syncfusion.Tools.WPF + * Syncfusion.Shared.WPF + * Syncfusion.Tools.WPF -3) Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf**, and declare the [TabSplitter](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.TabSplitter.html) control in XAML page. +3. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf**, and declare the [TabSplitter](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.TabSplitter.html) control in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -51,18 +52,21 @@ N> Download demo application from [GitHub](https://github.com/SyncfusionExamples {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Adding the TabSplitter control via C# -1) Create a new WPF application via Visual Studio. +1. Create a new WPF application via Visual Studio. -2) Add the following required assembly references to the project. +2. Add the following required assembly references to the project. -* Syncfusion.Shared.WPF -* Syncfusion.Tools.WPF + * Syncfusion.Shared.WPF + * Syncfusion.Tools.WPF -3) Include the required namespace. +3. Include the required namespace. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -72,9 +76,12 @@ using Syncfusion.Windows.Tools.Controls; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} -4) Create an instance of [TabSplitter](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.TabSplitter.html) control and add it to the window. +4. Create an instance of [TabSplitter](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.TabSplitter.html) control and add it to the window. +{% capture codesnippet3 %} {% tabs %} {% highlight C# %} @@ -90,13 +97,16 @@ grid.Children.Add(tabSplitter); {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} ![WPF TabSplitter control](Getting-Started_images/TabSplitter_control.png) ## Adding splitter item -1) You can add the splitter item into the TabSplitter control by using [Header](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.TabSplitterItem.html#Syncfusion_Windows_Tools_Controls_TabSplitterItem_Header) property. The TabSplitter items contains a collection of panel items. The panel items are [TopPanelItems](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.TabSplitterItem.html#Syncfusion_Windows_Tools_Controls_TabSplitterItem_TopPanelItems) and [BottomPanelItems](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.TabSplitterItem.html#Syncfusion_Windows_Tools_Controls_TabSplitterItem_BottomPanelItems). You can also split the pages in TabSplitter item by using the [SplitterPage](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.SplitterPage.html). +1. You can add the splitter item into the TabSplitter control by using [Header](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.TabSplitterItem.html#Syncfusion_Windows_Tools_Controls_TabSplitterItem_Header) property. The TabSplitter items contains a collection of panel items. The panel items are [TopPanelItems](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.TabSplitterItem.html#Syncfusion_Windows_Tools_Controls_TabSplitterItem_TopPanelItems) and [BottomPanelItems](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.TabSplitterItem.html#Syncfusion_Windows_Tools_Controls_TabSplitterItem_BottomPanelItems). You can also split the pages in TabSplitter item by using the [SplitterPage](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.SplitterPage.html). +{% capture codesnippet4 %} {% tabs %} {% highlight XAML %} @@ -135,9 +145,12 @@ tabSplitter.Items.Add(tabSplitterItem1); {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} -2) Add any one of the control to the splitter page of TabSplitter and add the content into the splitter page. +2. Add any one of the control to the splitter page of TabSplitter and add the content into the splitter page. +{% capture codesnippet5 %} {% tabs %} {% highlight XAML %} @@ -175,6 +188,8 @@ splitterPage1.Content = label1; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet5 | OrderList_Indent_Level_1 }} ![Shows the splitter pages in WPF TabSplitter](Getting-Started_images/TabSplitter_code.png) diff --git a/wpf/TabControl/Getting-Started.md b/wpf/TabControl/Getting-Started.md index 71f0502b10..55a47c551a 100644 --- a/wpf/TabControl/Getting-Started.md +++ b/wpf/TabControl/Getting-Started.md @@ -36,15 +36,16 @@ You can add the `TabControl` control to an application by dragging it from the t To add the `TabControl` manually in XAML, follow these steps: -1) Create a new WPF project in Visual Studio. +1. Create a new WPF project in Visual Studio. -2) Add the following required assembly references to the project: +2. Add the following required assembly references to the project: * Syncfusion.Tools.WPF * Syncfusion.Shared.WPF -3) Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf**, and declare the `TabControl` in XAML page. +3. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf**, and declare the `TabControl` in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -66,6 +67,8 @@ To add the `TabControl` manually in XAML, follow these steps: {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Adding WPF TabControl via C# @@ -80,6 +83,7 @@ To add the [TabControl](https://www.syncfusion.com/wpf-controls/tabcontrol) cont 4. Declare the `TabControl` control using C#. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -103,6 +107,8 @@ public partial class MainWindow : Window { {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ![Adding WPF TabControl to the window](Getting-Started_images/wpf-tabcontrol-addingtabcontrol.png) diff --git a/wpf/Tabbed-MDI-Form/Getting-Started.md b/wpf/Tabbed-MDI-Form/Getting-Started.md index 16f2bf0d9d..343c97835c 100644 --- a/wpf/Tabbed-MDI-Form/Getting-Started.md +++ b/wpf/Tabbed-MDI-Form/Getting-Started.md @@ -44,6 +44,7 @@ To add the control manually in XAML, follow the given steps: 2. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page. 3. Declare the DocumentContainer control in the XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Add control manually in C\# @@ -68,6 +71,7 @@ To add the control manually in C#, follow the given steps: 2. Import the DocumentContainer namespace **using Syncfusion.Windows.Tools.Controls;**. 3. Create a DocumentContainer instance, and add it to the window. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} using Syncfusion.Windows.Tools.Controls; @@ -90,6 +94,8 @@ namespace DocumentContainerSample } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ## Add document windows diff --git a/wpf/Testing/coded-ui.md b/wpf/Testing/coded-ui.md index bec5e41377..0ee7a34e9d 100644 --- a/wpf/Testing/coded-ui.md +++ b/wpf/Testing/coded-ui.md @@ -132,8 +132,9 @@ To add the CUIT file, follow the steps: ![WPF Coded UI showing pause option](CodedUI_images/Features_img1.jpeg) -9.Then, click the `Generate Code` icon in `Coded UI Test Builder` to generate a test method. Close the `Coded UI Test Builder`. You can see the generated code for the cell value changed action. +9. Then, click the `Generate Code` icon in `Coded UI Test Builder` to generate a test method. Close the `Coded UI Test Builder`. You can see the generated code for the cell value changed action. +{% capture codesnippet1 %} {% tabs %} {% highlight c# %} public void RecordedMethod1() @@ -147,6 +148,8 @@ public void RecordedMethod1() } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} 10.An assertion can also be created to check the modified cell value. Drag the crosshair to the modified cell, the Assertion window appears. The properties for the control (Cell) will be listed in the Assertion dialog box. You can add assertion by clicking `Generate Code` in `Coded UI Test Builder`. ![WPF Coded UI showing Add Assertion](CodedUI_images/Features_img2.jpeg) @@ -155,8 +158,9 @@ public void RecordedMethod1() Application can be tested with the generated CUIT method. Follow the procedure to test the recorded steps: -1.Add a test method called CodedUITestProject1. +1. Add a test method called CodedUITestProject1. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -181,6 +185,8 @@ End Sub {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} 2.Build and run the application that has already been configured. CUIT builder can be opened with the following steps. @@ -653,8 +659,9 @@ GroupNameSortDirection Follow the steps to create a `Coded UI Test` project and test the SfDataGrid application. -1.Create a new WPF application or open an existing WPF application with SfDataGrid. Enable the `Coded UI Test` by setting AutomationPeerHelper.EnableCodedUI to true and access the AutomationPeerHelper class from Syncfusion.UI.Xaml.Grid namespace. +1. Create a new WPF application or open an existing WPF application with SfDataGrid. Enable the `Coded UI Test` by setting AutomationPeerHelper.EnableCodedUI to true and access the AutomationPeerHelper class from Syncfusion.UI.Xaml.Grid namespace. +{% capture codesnippet3 %} {% tabs %} {% highlight c# %} using Syncfusion.UI.Xaml.Grid; @@ -665,6 +672,8 @@ public MainWindow() } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} 2.Build the application and launch the .exe file from bin folder. @@ -736,8 +745,9 @@ public void Mouse_Click_on_GridHeaderCell() Follow the steps to create a **Coded UI Test** project and test the tree grid application. -1.Create a new WPF application or open an existing WPF application with tree grid. Enable Coded UI Test in tree grid by setting **AutomationPeerHelper.EnableCodedUI** to true and access the AutomationPeerHelper class from Syncfusion.UI.Xaml.Grid namespace. +1. Create a new WPF application or open an existing WPF application with tree grid. Enable Coded UI Test in tree grid by setting **AutomationPeerHelper.EnableCodedUI** to true and access the AutomationPeerHelper class from Syncfusion.UI.Xaml.Grid namespace. +{% capture codesnippet4 %} {% tabs %} {% highlight c# %} using Syncfusion.UI.Xaml.Grid; @@ -748,6 +758,8 @@ public MainWindow() } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} 2.Build the application and launch the .exe file from the bin folder. @@ -834,8 +846,9 @@ Follow the steps to prepare the grid application. 1.Syncfusion.VisualStudio.TestTools.UITest.GridExtensions.dll contains implementation to easily change an existing application to the test application, plugin is required. Add a reference to this assembly.  -2.Open App.xaml file.  +2. Open App.xaml file.  +{% capture codesnippet5 %} {% tabs %} {% highlight xaml %} {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet5 | OrderList_Indent_Level_1 }} -3.Change the application to Syncfusion:GridControlTestApplication. +3. Change the application to Syncfusion:GridControlTestApplication. +{% capture codesnippet6 %} {% tabs %} {% highlight xaml %} {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet6 | OrderList_Indent_Level_1 }} -4.For the code behind file (App.xaml.cs), make sure to inherit from **GridControlTestApplication**. +4. For the code behind file (App.xaml.cs), make sure to inherit from **GridControlTestApplication**. +{% capture codesnippet7 %} {% tabs %} {% highlight xaml %} namespace WpfApplication3  @@ -881,14 +900,16 @@ namespace WpfApplication3  }  {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet7 | OrderList_Indent_Level_1 }} 5.Build the application for testing. -6.Add the following reference in your sample. +6. Add the following reference in your sample. -* Syncfusion.VisualStudio.TestTools.UITest.GridCommunication.dll + * Syncfusion.VisualStudio.TestTools.UITest.GridCommunication.dll -* Syncfusion.VisualStudio.TestTools.UITest.GridExtension.dll + * Syncfusion.VisualStudio.TestTools.UITest.GridExtension.dll 7.To create, record and run the tests for Coded UI Test project, you can refer this section [Create, Record, and Run the tests](https://help.syncfusion.com/wpf/testing/coded-ui#create-record-and-run-the-tests). diff --git a/wpf/Tile-Control/Getting-Started.md b/wpf/Tile-Control/Getting-Started.md index e90b8f41e6..e6550caf9f 100644 --- a/wpf/Tile-Control/Getting-Started.md +++ b/wpf/Tile-Control/Getting-Started.md @@ -52,6 +52,7 @@ In order to add control manually in XAML, follow the below steps: 2. Import Syncfusion WPF schema `http://schemas.syncfusion.com/wpf` or the tile control namespace `Syncfusion.Windows.Controls.Notification` in XAML page. 3. Declare SfHubTile and SfPulsingTile controls in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -70,6 +71,8 @@ In order to add control manually in XAML, follow the below steps: {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ### Adding control manually in C# @@ -81,6 +84,7 @@ In order to add control manually in C#, follow the below steps: 2. Import the `Syncfusion.Windows.Controls.Notification` namespace. 3. Create SfHubTile and SfPulsingTile controls instance and add it to the window. +{% capture codesnippet2 %} {% tabs %} {% highlight XAML %} [View Sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-wpf- You can bind the `XML` file as `ItemsSource` for creating the `TileViewItem` in the `TileViewControl`. You can easily populates the items from the `XML` files using the `ItemTemplate` and `ContentTemplate` or `ItemContainerStyle` properties. -1.Create an `XML` file with the required details and name it as `Data.xml`. +1. Create an `XML` file with the required details and name it as `Data.xml`. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -111,9 +112,12 @@ You can bind the `XML` file as `ItemsSource` for creating the `TileViewItem` in {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} -2.Add `XmlDataProvider` for the above `Data.xml` document and bind the data to `ItemsSource` property for the `TileViewControl`. +2. Add `XmlDataProvider` for the above `Data.xml` document and bind the data to `ItemsSource` property for the `TileViewControl`. +{% capture codesnippet2 %} {% tabs %} {% highlight XAML %} @@ -141,6 +145,8 @@ You can bind the `XML` file as `ItemsSource` for creating the `TileViewItem` in {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ![TileViewControl auto creates tileview item from XML using data binding](Data-binding_images/Data-Binding_img2.png) diff --git a/wpf/Tile-View/Getting-Started.md b/wpf/Tile-View/Getting-Started.md index 565c89ce78..a344f988d5 100644 --- a/wpf/Tile-View/Getting-Started.md +++ b/wpf/Tile-View/Getting-Started.md @@ -23,26 +23,27 @@ Refer to this [documentation](https://help.syncfusion.com/wpf/visual-studio-inte ## Adding WPF TileViewControl via designer -1) The `TileViewControl` can be added to an application by dragging it from the toolbox to a designer view. The following dependent assemblies will be added automatically: +1. The `TileViewControl` can be added to an application by dragging it from the toolbox to a designer view. The following dependent assemblies will be added automatically: -* Syncfusion.Shared.WPF + * Syncfusion.Shared.WPF ![wpf TileViewControl added by designer](Getting-Started_images/Getting-Started_img2.png) -2) Set the properties for `TileViewControl` in design mode using the SmartTag feature. +2. Set the properties for `TileViewControl` in design mode using the SmartTag feature. ## Adding WPF TileViewControl via XAML To add the `TileViewControl` manually in XAML, follow these steps: -1) Create a new WPF project in Visual Studio. +1. Create a new WPF project in Visual Studio. -2) Add the following required assembly references to the project: +2. Add the following required assembly references to the project: -* Syncfusion.Shared.WPF + * Syncfusion.Shared.WPF -3) Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf**, and declare the `TileViewControl` in XAML page. +3. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf**, and declare the `TileViewControl` in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -66,19 +67,22 @@ To add the `TileViewControl` manually in XAML, follow these steps: {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Adding WPF TileViewControl via C# To add the `TileViewControl` manually in C#, follow these steps: -1) Create a new WPF application via Visual Studio. +1. Create a new WPF application via Visual Studio. -2) Add the following required assembly references to the project: +2. Add the following required assembly references to the project: -* Syncfusion.Shared.WPF + * Syncfusion.Shared.WPF -3) Include the required namespace. +3. Include the required namespace. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -86,9 +90,12 @@ using Syncfusion.Windows.Shared; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} -4) Create an instance of `TileViewControl`, and add it to the window. +4. Create an instance of `TileViewControl`, and add it to the window. +{% capture codesnippet3 %} {% tabs %} {% highlight C# %} @@ -101,6 +108,8 @@ tileViewControl.Width = 300; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/syncfusion-wpf-tileview-control-examples/blob/master/Samples/Getting-Started) diff --git a/wpf/TimePicker/Getting-Started.md b/wpf/TimePicker/Getting-Started.md index df0b0a1dcc..c2a120cd29 100644 --- a/wpf/TimePicker/Getting-Started.md +++ b/wpf/TimePicker/Getting-Started.md @@ -42,6 +42,7 @@ To add the control manually in XAML, follow the given steps: 2. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page. 3. Declare the `SfTimePicker` control in the XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -59,6 +60,8 @@ To add the control manually in XAML, follow the given steps: {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Add control manually in C\# @@ -70,6 +73,7 @@ To add the control manually in C#, follow the given steps: 2. Import the `SfTimePicker` namespace **using Syncfusion.Windows.Controls.Input;**. 3. Create an `SfTimePicker` instance, and add it to the window. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -90,6 +94,8 @@ namespace SfTimePickerSample { {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ![SfTimePicker control added by code](GettingStarted_images/wpf-time-picker.png) diff --git a/wpf/TimePicker/Overview.md b/wpf/TimePicker/Overview.md index 4d23d0f373..a097618d1a 100644 --- a/wpf/TimePicker/Overview.md +++ b/wpf/TimePicker/Overview.md @@ -21,6 +21,6 @@ The [SfTimePicker](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Control ### Key Features -Formatting – The Control displays the selected time value in a various formats. +* **Formatting** – The Control displays the selected time value in a various formats. -Time Selector – The drop-down portion used for selecting the time can be customized. +* **Time Selector** – The drop-down portion used for selecting the time can be customized. diff --git a/wpf/TimeSpan-Editor/Getting-Started.md b/wpf/TimeSpan-Editor/Getting-Started.md index bdc3c2de07..d2d540d19e 100644 --- a/wpf/TimeSpan-Editor/Getting-Started.md +++ b/wpf/TimeSpan-Editor/Getting-Started.md @@ -43,6 +43,7 @@ To add the `TimeSpanEdit` control manually in XAML, follow these steps: 4. Declare the `TimeSpanEdit` control in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -60,6 +61,8 @@ To add the `TimeSpanEdit` control manually in XAML, follow these steps: {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Adding WPF TimeSpanEdit via C\# @@ -74,6 +77,7 @@ To add the `TimeSpanEdit` control manually in C#, follow these steps: 4. Declare the `TimeSpanEdit` control using C#. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -95,6 +99,8 @@ public partial class MainWindow : Window { {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ![TimeSpanEdit control added by xaml and code](Getting-Started_images/Getting-Started_Designer.png) diff --git a/wpf/ToolBar/Getting-Started.md b/wpf/ToolBar/Getting-Started.md index 3f5f9df320..87532f6e7c 100644 --- a/wpf/ToolBar/Getting-Started.md +++ b/wpf/ToolBar/Getting-Started.md @@ -25,6 +25,7 @@ The following ways explains how to add ToolBarAdv control using XAML code: * Create a WPF project in Visual Studio and refer “Syncfusion.Shared.Wpf” assembly to the project. * Include an XML namespace for the above assemblies to the Main window. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -44,8 +45,12 @@ Title="MainWindow" Height="350" Width="525"> {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} + * Now add the WPF ToolBar (ToolBarAdv) control with a required optimal name using the namespace +{% capture codesnippet2 %} {% tabs %} {% highlight XAML %} @@ -57,6 +62,8 @@ Title="MainWindow" Height="350" Width="525"> {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ### Create the ToolBarAdv control to an application by C#: diff --git a/wpf/TreeGrid/Getting-Started.md b/wpf/TreeGrid/Getting-Started.md index 61c83a6c60..a386c8fdf6 100644 --- a/wpf/TreeGrid/Getting-Started.md +++ b/wpf/TreeGrid/Getting-Started.md @@ -119,12 +119,13 @@ WPF TreeGrid (SfTreeGrid) control can be added to the application by dragging it In order to add control manually in XAML, do the below steps, 1. Add the below required assembly references to the project as shown in the below image, -* Syncfusion.Data.WPF -* Syncfusion.SfGrid.WPF -* Syncfusion.Shared.WPF + * Syncfusion.Data.WPF + * Syncfusion.SfGrid.WPF + * Syncfusion.Shared.WPF 2. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** or SfTreeGrid control namespace **Syncfusion.UI.Xaml.TreeGrid** in XAML page. 3. Declare SfTreeGrid control in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} #### Adding control manually in C\# To add control manually in C#, do the below steps, 1. Add the below required assembly references to the project, -* Syncfusion.Data.WPF -* Syncfusion.SfGrid.WPF -* Syncfusion.Shared.WPF + * Syncfusion.Data.WPF + * Syncfusion.SfGrid.WPF + * Syncfusion.Shared.WPF 2. Import SfTreeGrid namespace **Syncfusion.UI.Xaml.TreeGrid**. 3. Create SfTreeGrid control instance and add it to the Page. +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} using Syncfusion.UI.Xaml.TreeGrid; @@ -171,6 +175,8 @@ namespace WpfApplication1 } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} #### Binding self-relational data in SfTreeGrid @@ -188,6 +194,7 @@ SfTreeGrid is a data-bound control. So, before binding to the control, you must 1. Creating data object class named `EmployeeInfo` and declare properties as shown below, +{% capture codesnippet3 %} {% tabs %} {% highlight c# %} public class EmployeeInfo @@ -237,12 +244,15 @@ public class EmployeeInfo } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} N> If you want your data object (EmployeeInfo class) to automatically reflect property changes, then the object must implement [INotifyPropertyChanged](https://docs.microsoft.com/en-us/dotnet/api/system.componentmodel.inotifypropertychanged?redirectedfrom=MSDN&view=net-5.0) interface. 2. Create a `ViewModel` class with Employees property and Employees property is initialized with several data objects in constructor. +{% capture codesnippet4 %} {% tabs %} {% highlight c# %} public class ViewModel @@ -314,6 +324,8 @@ private ObservableCollection GetEmployees() } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} #### Binding to Data @@ -383,6 +395,7 @@ WPF TreeGrid (SfTreeGrid) supports to bind nested or hierarchical collection (wh 1. Create data object class named `PersonInfo` and declare properties as shown below, +{% capture codesnippet5 %} {% tabs %} {% highlight c# %} public class PersonInfo @@ -426,9 +439,12 @@ public class PersonInfo {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet5 | OrderList_Indent_Level_1 }} 2. Create a `ViewModel` class with PersonDetails property and PersonDetails property is initialized with several data objects in constructor +{% capture codesnippet6 %} {% tabs %} {% highlight c# %} public class ViewModel @@ -469,6 +485,8 @@ public class ViewModel } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet6 | OrderList_Indent_Level_1 }} #### Binding to Data diff --git a/wpf/Wizard-Control/Getting-Started.md b/wpf/Wizard-Control/Getting-Started.md index 5a234d59b0..43b14f02ff 100644 --- a/wpf/Wizard-Control/Getting-Started.md +++ b/wpf/Wizard-Control/Getting-Started.md @@ -54,6 +54,7 @@ In order to add [WizardControl](https://help.syncfusion.com/cr/wpf/Syncfusion.Wi 3. Declare [WizardControl](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.WizardControl.html) in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -75,6 +76,8 @@ In order to add [WizardControl](https://help.syncfusion.com/cr/wpf/Syncfusion.Wi {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Adding control manually in C# In order to add [WizardControl](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.WizardControl.html) control manually in C#, do the below steps, @@ -88,6 +91,7 @@ In order to add [WizardControl](https://help.syncfusion.com/cr/wpf/Syncfusion.Wi 3. Create WizardControl instance and add it to the page. +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} @@ -112,6 +116,8 @@ namespace WizardControl {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ![GettingStarted of WizardControl](Getting-Started_images/Getting-Started_img1.jpeg) diff --git a/wpf/Wizard-Control/Interactive-Features.md b/wpf/Wizard-Control/Interactive-Features.md index bdbd363a5a..0e8788503b 100644 --- a/wpf/Wizard-Control/Interactive-Features.md +++ b/wpf/Wizard-Control/Interactive-Features.md @@ -55,8 +55,9 @@ wizardControl.Items.Add(wizardPage2); Below steps will explain on how to add the Items through [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.WizardControl.html#) property of [Wizard Control](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.WizardControl.html). -1.Create a Model class with the necessary properties. +1. Create a Model class with the necessary properties. +{% capture codesnippet1 %} {% highlight C# %} public class Model : NotificationObject @@ -93,9 +94,12 @@ public class Model : NotificationObject } {% endhighlight %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} -2.Create collection of PageItems in ViewModel class to populate pages. +2. Create collection of PageItems in ViewModel class to populate pages. +{% capture codesnippet2 %} {% highlight C# %} private ObservableCollection items; @@ -115,9 +119,12 @@ public ObservableCollection PageItems } {% endhighlight %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} -3.Populate the PageItems collection as follows. +3. Populate the PageItems collection as follows. +{% capture codesnippet3 %} {% highlight C# %} private void PopulatePageItems() @@ -136,9 +143,12 @@ private void PopulatePageItems() } {% endhighlight %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} -4.Create a ViewModel instance and use it as DataContext for the Root Window. +4. Create a ViewModel instance and use it as DataContext for the Root Window. +{% capture codesnippet4 %} {% highlight XAML %} @@ -146,9 +156,12 @@ private void PopulatePageItems() {% endhighlight %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} -5.Bind the PageItems collection to the [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.WizardControl.html#) property of the WizardControl. Content of the WizardPage can be displayed using the [ItemTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.WizardControl.html#) property. +5. Bind the PageItems collection to the [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.WizardControl.html#) property of the WizardControl. Content of the WizardPage can be displayed using the [ItemTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.WizardControl.html#) property. +{% capture codesnippet5 %} {% highlight XAML %} @@ -174,6 +187,8 @@ private void PopulatePageItems() {% endhighlight %} +{% endcapture %} +{{ codesnippet5 | OrderList_Indent_Level_1 }} ![DataBinding of WizardControl](Interactive-Features_images/data-binding_img1.png) From 1dff78504be04b578fb953c469e956e380362f88 Mon Sep 17 00:00:00 2001 From: Mahalakshmi Venkatesan Date: Wed, 19 Oct 2022 11:33:23 +0530 Subject: [PATCH 2/4] Modified the indent issues in the UG documentation --- wpf/Classic/AutoComplete/Getting-Started.md | 25 ++++++- wpf/Classic/GridData/Data-Binding.md | 8 ++- wpf/Classic/GridData/Data-Presentation.md | 5 +- wpf/Classic/Schedule/Getting-Started.md | 6 ++ .../How-To/Override-Syncfusion-Themes.md | 8 ++- .../Resource-ID-for-Syncfusion-Themes.md | 6 ++ .../Switch-between-Overridden-Styles.md | 12 +++- wpf/Classic/Skin-Storage/Overview.md | 28 ++++++-- .../TreeView/Customizing-data-templates.md | 50 ++++++++++--- wpf/Classic/TreeView/Getting-Started.md | 39 +++++++---- wpf/Classic/TreeView/LoadOnDemand.md | 5 +- wpf/Classic/TreeView/Populating-with-data.md | 21 ++++++ wpf/DataGrid/Data-Binding.md | 14 +++- wpf/DataGrid/Editing.md | 9 +++ wpf/DataGrid/Getting-Started.md | 14 +++- wpf/DataGrid/Paging.md | 5 +- wpf/DataGrid/Printing.md | 25 +++++-- wpf/DataGrid/Row-Height-Customization.md | 9 ++- .../Serialization-and-Deserialization.md | 34 +++++++-- wpf/DataGrid/Summaries.md | 12 +++- wpf/DataGrid/UI-Automation.md | 7 +- wpf/GridControl/Appearance.md | 22 ++++-- wpf/GridControl/Cell-Types.md | 10 ++- wpf/GridControl/Formula-Cells.md | 4 ++ wpf/GridControl/Getting-Started.md | 19 +++-- wpf/GridControl/Real-Time-Applications.md | 12 ++++ wpf/GridControl/Serialization.md | 3 + wpf/GridControl/Testing.md | 43 +++++++++--- wpf/Ribbon/Backstage.md | 15 +++- wpf/Ribbon/DealingWithRibbon.md | 14 ++++ wpf/Ribbon/GettingStarted.md | 25 ++++++- wpf/Ribbon/PatternsAndPractices.md | 70 +++++++++++++++---- wpf/Ribbon/RibbonMerge.md | 18 +++++ wpf/RichTextBox/Getting-Started.md | 13 ++-- wpf/RichTextBox/Hyperlink.md | 10 ++- wpf/Scheduler/Calendar-Types.md | 6 ++ wpf/Scheduler/Getting-Started.md | 3 + wpf/TreeGrid/UI-Automation.md | 6 ++ wpf/TreeView/Getting-Started.md | 6 ++ 39 files changed, 530 insertions(+), 111 deletions(-) diff --git a/wpf/Classic/AutoComplete/Getting-Started.md b/wpf/Classic/AutoComplete/Getting-Started.md index 699e7fa854..6b2e61e445 100644 --- a/wpf/Classic/AutoComplete/Getting-Started.md +++ b/wpf/Classic/AutoComplete/Getting-Started.md @@ -43,6 +43,7 @@ Following are the step-by-step instructions to add an AutoComplete control in a Adding Reference {:.caption} +{% capture codesnippet1 %} {% tabs %} {%highlight xaml%} @@ -51,8 +52,12 @@ Syncfusion.Windows.Tools.Controls;assembly=Syncfusion.Tools.Wpf" {%endhighlight%} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} -4.Add Syncfusion.Tools.WPF reference in XAML and C# code as follows. +4. Add Syncfusion.Tools.WPF reference in XAML and C# code as follows. + +{% capture codesnippet2 %} {% tabs %} {%highlight c#%} @@ -61,9 +66,12 @@ using Syncfusion.Windows.Tools.Controls; {%endhighlight%} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} -5.Click and open the C# file. Add AutoComplete to the application. +5. Click and open the C# file. Add AutoComplete to the application. +{% capture codesnippet3 %} {% tabs %} {%highlight c#%} @@ -85,7 +93,9 @@ productSource.Add("Pdf"); this.AutoComplete1.CustomSource = productSource; {%endhighlight%} -{% endtabs %} +{% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} ![Creating the AutoComplete in CodeBehind](Getting-Started_images/Getting-Started_img5.png) @@ -112,6 +122,8 @@ Following are the steps to create the AutoComplete by using VisualStudio in XAML 3. You can now customize the properties of AutoComplete in the Properties Window. +{% capture codesnippet4 %} + {% tabs %} {% highlight xaml %} @@ -120,6 +132,8 @@ Following are the steps to create the AutoComplete by using VisualStudio in XAML {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} ![Creating the AutoComplete Using XAML](Getting-Started_images/Getting-Started_img8.png) @@ -169,6 +183,8 @@ The AutoComplete control provides full Blend support. Here are the step-by-step Properties Window {:.caption} + +{% capture codesnippet5 %} {% tabs %} {% highlight xaml %} @@ -195,6 +211,9 @@ productSource.Add("Pdf"); {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet5 | OrderList_Indent_Level_1 }} + ![Createing the AutoComplete Using Blend](Getting-Started_images/Getting-Started_img14.png) AutoComplete Created Using Blend diff --git a/wpf/Classic/GridData/Data-Binding.md b/wpf/Classic/GridData/Data-Binding.md index 0fcc7dffc5..b67f841a22 100644 --- a/wpf/Classic/GridData/Data-Binding.md +++ b/wpf/Classic/GridData/Data-Binding.md @@ -591,15 +591,19 @@ To validate data errors, follow the steps below: 1. Ensure that your data source implements the IDataErrorInfo interface, in which two of the properties, Error (which we can be left empty optionally) and Indexer (where the validation code is placed) must be defined. 2. Then display the error information by setting the ShowErrorToolTips property of the GridData control to true. +{% capture codesnippet1 %} {% highlight c# %} dataGrid.ShowErrorTooltips = true; {% endhighlight %} - +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} The following code example illustrates how the GridData control throws an error message when the Freight value becomes lesser than 10. +{% capture codesnippet2 %} + {% highlight c# %} partial class Orders : IDataErrorInfo @@ -655,6 +659,8 @@ partial class Orders : IDataErrorInfo } {% endhighlight %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_2 }} The following screenshot illustrates Data Error Validation in the GridData control. diff --git a/wpf/Classic/GridData/Data-Presentation.md b/wpf/Classic/GridData/Data-Presentation.md index 7dcd658c54..6e8178625e 100644 --- a/wpf/Classic/GridData/Data-Presentation.md +++ b/wpf/Classic/GridData/Data-Presentation.md @@ -4993,6 +4993,7 @@ Choose the Export to PDF sample to launch. 1. Bind an ItemsSource to GridDataControl. Refer to the following link for more information about binding an ItemsSource to GridDataControl: [Data Binding](http://help.syncfusion.com/wpf/griddata/data-binding). +{% capture codesnippet1 %} {% highlight xaml %} {% endhighlight %} - - +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} Bind a button command to the ColumnChooserCommand command diff --git a/wpf/Classic/Schedule/Getting-Started.md b/wpf/Classic/Schedule/Getting-Started.md index f36bffa174..7ab5281855 100644 --- a/wpf/Classic/Schedule/Getting-Started.md +++ b/wpf/Classic/Schedule/Getting-Started.md @@ -28,6 +28,7 @@ To add the control manually in XAML page, follow the given steps: 2. Import WPF schema `http://schemas.syncfusion.com/wpf` in the XAML page. 3. Declare the `SfSchedule` control in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} #### Add control manually in C# To manually attach control to C #, follow the following steps: @@ -50,6 +53,7 @@ To manually attach control to C #, follow the following steps: 2. Import the `SfSchedule` namespace `using Syncfusion.UI.Xaml.Schedule`. 3. Create an `SfSchedule` instance, and add it to the window. +{% capture codesnippet2 %} {% tabs %} {% highlight c#%} using Syncfusion.UI.Xaml.Schedule; @@ -63,6 +67,8 @@ namespace GettingStarted } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} Run the code above and now you can see the empty scheduler as follows, but without appointments. To view the scheduler appointments, whether local or remote information must be passed on to the scheduler. diff --git a/wpf/Classic/Skin-Storage/How-To/Override-Syncfusion-Themes.md b/wpf/Classic/Skin-Storage/How-To/Override-Syncfusion-Themes.md index 5044a17b95..e9f3e0caef 100644 --- a/wpf/Classic/Skin-Storage/How-To/Override-Syncfusion-Themes.md +++ b/wpf/Classic/Skin-Storage/How-To/Override-Syncfusion-Themes.md @@ -21,6 +21,7 @@ The following steps explain how to override the Syncfusion Themes. 1. Add the corresponding resource dictionary in the sample. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -32,11 +33,14 @@ The following steps explain how to override the Syncfusion Themes. {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} 2. Define the new style using the BasedOn property. The following code snippet overrides the Syncfusion style for the Calendar Control. +{% capture codesnippet2 %} {% tabs %} {% highlight xaml %} @@ -52,8 +56,8 @@ The following steps explain how to override the Syncfusion Themes. {% endhighlight %} {% endtabs %} - - +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} The output is displayed as shown below. diff --git a/wpf/Classic/Skin-Storage/How-To/Resource-ID-for-Syncfusion-Themes.md b/wpf/Classic/Skin-Storage/How-To/Resource-ID-for-Syncfusion-Themes.md index a7a5752c1b..43229fda95 100644 --- a/wpf/Classic/Skin-Storage/How-To/Resource-ID-for-Syncfusion-Themes.md +++ b/wpf/Classic/Skin-Storage/How-To/Resource-ID-for-Syncfusion-Themes.md @@ -171,6 +171,7 @@ The following code snippet explains how to set the Resource ID through XAML 1. Add the VisualStyle in the sample. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -178,9 +179,12 @@ syncfusion:SkinStorage.VisualStyle="Office2013" {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} 2. Set Resource ID as shown below. +{% capture codesnippet2 %} {% tabs %} {% highlight xaml %} @@ -188,6 +192,8 @@ syncfusion:SkinStorage.VisualStyle="Office2013" {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ## Setting through C# diff --git a/wpf/Classic/Skin-Storage/How-To/Switch-between-Overridden-Styles.md b/wpf/Classic/Skin-Storage/How-To/Switch-between-Overridden-Styles.md index bf55297802..c02158e1d3 100644 --- a/wpf/Classic/Skin-Storage/How-To/Switch-between-Overridden-Styles.md +++ b/wpf/Classic/Skin-Storage/How-To/Switch-between-Overridden-Styles.md @@ -15,6 +15,7 @@ The following steps explain how to switch between the overridden styles. 1. Add the corresponding Resource Dictionaries in the sample. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -27,6 +28,8 @@ The following steps explain how to switch between the overridden styles. {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} 2. Define the new styles using the BasedOn property. @@ -34,6 +37,7 @@ The following steps explain how to switch between the overridden styles. The following code snippet explains how to override the Syncfusion style for the Calendar Control. +{% capture codesnippet2 %} {% tabs %} {% highlight xaml %} @@ -59,13 +63,14 @@ The following steps explain how to switch between the overridden styles. {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} 3. On ComboBox SelectionChanged event, particular overridden style should be set to the control depending on the current visual style. - - The following code snippet explains how to set the overridden styles to the controls. +{% capture codesnippet3 %} {% tabs %} {% highlight xaml %} @@ -87,7 +92,8 @@ Private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs {% endhighlight %} {% endtabs %} - +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} The output is displayed as shown below. diff --git a/wpf/Classic/Skin-Storage/Overview.md b/wpf/Classic/Skin-Storage/Overview.md index 5ce9a4a39d..2de39930f1 100644 --- a/wpf/Classic/Skin-Storage/Overview.md +++ b/wpf/Classic/Skin-Storage/Overview.md @@ -53,6 +53,7 @@ The following code snippet explains how to set the VisualStyle property in XAML. 1. Add the following namespace in the sample. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -60,9 +61,12 @@ xmlns:syncfusion="http://schemas.syncfusion.com/wpf" {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} 2. Set the VisualStyle property for the control as shown below. +{% capture codesnippet2 %} {% tabs %} {% highlight xaml %} @@ -71,6 +75,8 @@ xmlns:syncfusion="http://schemas.syncfusion.com/wpf" {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ## Setting VisualStyle in C# @@ -78,10 +84,9 @@ You can also set the VisualStyle property in C# using SetVisualStyle. The following code snippet explains how to set the VisualStyle property in C#. - - 1. Name the control using the Name attribute. +{% capture codesnippet3 %} {% tabs %} {% highlight xaml %} @@ -90,9 +95,12 @@ The following code snippet explains how to set the VisualStyle property in C#. {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} 2. Add the following line in code behind file. +{% capture codesnippet4 %} {% tabs %} {% highlight c# %} @@ -100,6 +108,8 @@ SkinStorage.SetVisualStyle(calendar, "Blend"); {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} The output is displayed as shown below. @@ -144,6 +154,7 @@ The following code snippet explains how to set the ActiveColorScheme property in 1. Add the following namespace in the sample. +{% capture codesnippet5 %} {% tabs %} {% highlight xaml %} @@ -151,9 +162,12 @@ xmlns:syncfusion=http://schemas.syncfusion.com/wpf {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet5 | OrderList_Indent_Level_1 }} 2. Set the ActiveColorScheme property for the control as shown below. +{% capture codesnippet6 %} {% tabs %} {% highlight xaml %} @@ -162,6 +176,8 @@ xmlns:syncfusion=http://schemas.syncfusion.com/wpf {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet6 | OrderList_Indent_Level_1 }} ## Setting ActiveColorScheme property in C# @@ -170,10 +186,9 @@ You can set the custom color for the WPF controls in C# using _SetActiveColorSch The following code snippet explains how to set the ActiveColorScheme property in C#. - - 1. Name the control using the Name attribute. +{% capture codesnippet7 %} {% tabs %} {% highlight xaml %} @@ -182,9 +197,12 @@ The following code snippet explains how to set the ActiveColorScheme property in {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet7 | OrderList_Indent_Level_1 }} 2. Add the following line in code behind file. +{% capture codesnippet8 %} {% tabs %} {% highlight c# %} @@ -192,6 +210,8 @@ SkinManager.SetActiveColorScheme(calendar, Brushes.Red); {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet8 | OrderList_Indent_Level_1 }} The output is displayed as shown below. diff --git a/wpf/Classic/TreeView/Customizing-data-templates.md b/wpf/Classic/TreeView/Customizing-data-templates.md index ac35711e9b..4b6776590a 100644 --- a/wpf/Classic/TreeView/Customizing-data-templates.md +++ b/wpf/Classic/TreeView/Customizing-data-templates.md @@ -322,8 +322,9 @@ Different templates can be used for items based on specific constraints using th The following example illustrates this: -1.Create the template selector as shown in the following code snippet: +1. Create the template selector as shown in the following code snippet: +{% capture codesnippet1 %} {% tabs %} {% highlight C# %} @@ -363,9 +364,12 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} -2.Define the Data templates in the Window’s resources as follows: +2. Define the Data templates in the Window’s resources as follows: +{% capture codesnippet2 %} {% tabs %} {% highlight XAML %} @@ -379,9 +383,12 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} -3.Create the instance for the template selector in the Window’s resources as follows: +3. Create the instance for the template selector in the Window’s resources as follows: +{% capture codesnippet3 %} {% tabs %} {% highlight XAML %} @@ -391,9 +398,12 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} -4.Use the template selector to choose the template for the TreeViewAdv as follows: +4. Use the template selector to choose the template for the TreeViewAdv as follows: +{% capture codesnippet4 %} {% tabs %} {% highlight XAML %} @@ -404,6 +414,8 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} The TreeViewAdv generates as shown in the following screenshot: @@ -414,8 +426,9 @@ The TreeViewAdv generates as shown in the following screenshot: The user can modify the template while editing the TreeViewItemAdv. The following example illustrates the process of changing the template: -1.Create the DataTemplate instance for the EditTemplate as follows: +1. Create the DataTemplate instance for the EditTemplate as follows: +{% capture codesnippet5 %} {% tabs %} {% highlight XAML %} @@ -427,9 +440,12 @@ The user can modify the template while editing the TreeViewItemAdv. The followin {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet5 | OrderList_Indent_Level_1 }} -2.Set the EditedItemTemplate for the TreeViewAdv to the above template as follows: +2. Set the EditedItemTemplate for the TreeViewAdv to the above template as follows: +{% capture codesnippet6 %} {% tabs %} {% highlight XAML %} @@ -445,6 +461,8 @@ The user can modify the template while editing the TreeViewItemAdv. The followin {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet6 | OrderList_Indent_Level_1 }} While editing the TreeViewItemAdv appears as shown in the following screen shot: @@ -457,8 +475,9 @@ The user can choose the template at runtime for editing the TreeViewAdv. The following example explains how to choose the template at runtime: -1.Create the template selector as given in the following code snippet: +1. Create the template selector as given in the following code snippet: +{% capture codesnippet7 %} {% tabs %} {% highlight C# %} @@ -500,9 +519,12 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet7 | OrderList_Indent_Level_1 }} -2.Define the Data templates in the Window’s resources as follows: +2. Define the Data templates in the Window’s resources as follows: +{% capture codesnippet8 %} {% tabs %} {% highlight XAML %} @@ -517,9 +539,12 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet8 | OrderList_Indent_Level_1 }} -3.Create the instance for the template selector in the Window’s resources as follows: +3. Create the instance for the template selector in the Window’s resources as follows: +{% capture codesnippet9 %} {% tabs %} {% highlight XAML %} @@ -529,9 +554,12 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet9 | OrderList_Indent_Level_1 }} -4.Use the template selector to choose the template for the TreeViewAdv as follows: +4. Use the template selector to choose the template for the TreeViewAdv as follows: +{% capture codesnippet10 %} {% tabs %} {% highlight XAML %} @@ -547,6 +575,8 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet10 | OrderList_Indent_Level_1 }} The TreeViewAdv generates as shown in the following screenshot: diff --git a/wpf/Classic/TreeView/Getting-Started.md b/wpf/Classic/TreeView/Getting-Started.md index b46670ae28..cb2c825182 100644 --- a/wpf/Classic/TreeView/Getting-Started.md +++ b/wpf/Classic/TreeView/Getting-Started.md @@ -26,30 +26,31 @@ The [TreeViewAdv](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Co ## Adding WPF TreeViewAdv via designer -1) The [TreeViewAdv](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.TreeViewAdv.html) can be added to an application by dragging it from the toolbox to a designer view. The following dependent assemblies will be added automatically. +1. The [TreeViewAdv](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.TreeViewAdv.html) can be added to an application by dragging it from the toolbox to a designer view. The following dependent assemblies will be added automatically. -* Syncfusion.Tools.Wpf + * Syncfusion.Tools.Wpf -* Syncfusion.Shared.Wpf + * Syncfusion.Shared.Wpf ![Drag and drop WPF TreeViewAdv from toolbox](Getting_Started_images/TreeViewAdv_GettingStarted.jpg) -2) Set the properties for TreeViewAdv in design mode using the SmartTag feature. +2. Set the properties for TreeViewAdv in design mode using the SmartTag feature. ## Adding WPF TreeViewAdv via XAML To add the [TreeViewAdv](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.TreeViewAdv.html) manually in XAML, follow these steps: -1) Create a new WPF project in Visual Studio. +1. Create a new WPF project in Visual Studio. -2) Add the following required assembly references to the project: +2. Add the following required assembly references to the project: -* Syncfusion.Tools.Wpf + * Syncfusion.Tools.Wpf -* Syncfusion.Shared.Wpf + * Syncfusion.Shared.Wpf -3) Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf**, and declare the TreeViewAdv in XAML page. +3. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf**, and declare the TreeViewAdv in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -73,21 +74,24 @@ VerticalAlignment="Center" syncfusion:DockingManager.DockToFill="True" /> {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ## Adding WPF TreeViewAdv via C# To add the [TreeViewAdv](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.TreeViewAdv.html) manually in C#, follow these steps: -1) Create a new WPF application via Visual Studio. +1. Create a new WPF application via Visual Studio. -2) Add the following required assembly references to the project: +2. Add the following required assembly references to the project: -* Syncfusion.Tools.Wpf + * Syncfusion.Tools.Wpf -* Syncfusion.Shared.Wpf + * Syncfusion.Shared.Wpf -3) Include the required namespace. +3. Include the required namespace. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -97,9 +101,12 @@ using Syncfusion.Windows.Tools.Controls; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} -4) Create an instance of [TreeViewAdv](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.TreeViewAdv.html), and add it to the window. +4. Create an instance of [TreeViewAdv](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.TreeViewAdv.html), and add it to the window. +{% capture codesnippet3 %} {% tabs %} {% highlight C# %} @@ -118,6 +125,8 @@ using Syncfusion.Windows.Tools.Controls; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} ## Adding TreeView item to TreeViewAdv control diff --git a/wpf/Classic/TreeView/LoadOnDemand.md b/wpf/Classic/TreeView/LoadOnDemand.md index ae8b0bea5d..ca4347e8c3 100644 --- a/wpf/Classic/TreeView/LoadOnDemand.md +++ b/wpf/Classic/TreeView/LoadOnDemand.md @@ -15,6 +15,7 @@ The LoadOnDemand feature enables users to load items dynamically when a particul * **LoadingHeader** is used to display the text while sub-items are being loaded. * **IsLoadOnDemand** value has to be set to true if the item is to be loaded on demand. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -89,6 +90,8 @@ End Class {% endhighlight %} -{% endtabs %} +{% endtabs %} + {% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ![Loading TreeViewitems on demand](LoadOnDemand_images/LoadOnDemand_img1.jpeg) diff --git a/wpf/Classic/TreeView/Populating-with-data.md b/wpf/Classic/TreeView/Populating-with-data.md index d3f08ed91d..15b0d3edb0 100644 --- a/wpf/Classic/TreeView/Populating-with-data.md +++ b/wpf/Classic/TreeView/Populating-with-data.md @@ -145,6 +145,7 @@ XML file can also be used as ItemsSource for the TreeViewAdv. The following exam 1. Create the XML file with the following details and name it as Data.xml: +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -177,9 +178,12 @@ XML file can also be used as ItemsSource for the TreeViewAdv. The following exam {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} 2. Add the XmlDataProvider for the above XML document as follows: +{% capture codesnippet2 %} {% tabs %} {% highlight XAML %} @@ -191,9 +195,12 @@ XML file can also be used as ItemsSource for the TreeViewAdv. The following exam {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} 3. Set the ItemsSource property for the TreeViewAdv as follows: +{% capture codesnippet3 %} {% tabs %} {% highlight XAML %} @@ -209,6 +216,8 @@ XML file can also be used as ItemsSource for the TreeViewAdv. The following exam {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} 4. TreeViewAdv will be created as follows: @@ -222,6 +231,7 @@ TreeViewAdv supports object binding. The following example illustrates data bind 1. Create a class that acts as a model for TreeViewAdv as given in the following code snippet: +{% capture codesnippet4 %} {% tabs %} {% highlight C# %} @@ -253,9 +263,12 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} 2. Create a ViewModel class and initialize the items as given in the following code snippet: +{% capture codesnippet5 %} {% tabs %} {% highlight C# %} @@ -330,9 +343,12 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet5 | OrderList_Indent_Level_1 }} 3. Create a ViewModel instance and use it as DataContext for the Root Window as given in the following code snippet: +{% capture codesnippet6 %} {% tabs %} {% highlight XAML %} @@ -344,9 +360,12 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet6 | OrderList_Indent_Level_1 }} 4. Configure the ItemsSource and ItemTemplate of the TreeViewAdv as given below: +{% capture codesnippet7 %} {% tabs %} {% highlight XAML %} @@ -362,6 +381,8 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet7 | OrderList_Indent_Level_1 }} 5. The TreeViewAdv will be created as follows: diff --git a/wpf/DataGrid/Data-Binding.md b/wpf/DataGrid/Data-Binding.md index 9a933a4e90..272933ca16 100644 --- a/wpf/DataGrid/Data-Binding.md +++ b/wpf/DataGrid/Data-Binding.md @@ -336,6 +336,7 @@ To add the WCF Data Service to your web project created in first step, 4. Once service is added and configure the read and write access to resources in **InitializeService** function of DataService. +{% capture codesnippet1 %} {% tabs %} {% highlight c# %} public class WcfDataService1 : DataService @@ -360,8 +361,10 @@ public class WcfDataService1 : DataService } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} -5.On the menu bar, select Debug->Start without Debugging to execute the service. A browser window opens and the XML schema for the service is displayed. You can also get the localhost address for the service here. +5. On the menu bar, select Debug->Start without Debugging to execute the service. A browser window opens and the XML schema for the service is displayed. You can also get the localhost address for the service here. ### Creating the WPF Client Application @@ -385,6 +388,7 @@ To load the data from WCF service to SfDataGrid, 4. Copy the localhost address and replace it in your service URI. 5. Set the WPF application as StartUp project. +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} this.dataGrid.Loaded += dataGrid_Loaded; @@ -396,6 +400,8 @@ void dataGrid_Loaded(object sender, RoutedEventArgs e) } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} Now, run the application and you can see the SfDataGrid control loaded with data from WCF service. @@ -689,6 +695,7 @@ To access the data from data source using ADO.NET, follow the below steps. 2. Create a connection through any of the [.NET Framework data provider](https://docs.microsoft.com/en-us/dotnet/framework/data/adonet/data-providers) based on the type of data source that you have owned. 3. Set the [ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ItemsSource) as Shippers table from data set. For more information refer [here](https://docs.microsoft.com/en-us/previous-versions/visualstudio/visual-studio-2008/s4yys16a(v=vs.90)). +{% capture codesnippet3 %} {% tabs %} {% highlight c# %} public partial class MainWindow : Window @@ -714,6 +721,8 @@ public partial class MainWindow : Window } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} Now, run the application and you can see the following screenshot displays the SfDataGrid loaded the data using ADO.NET. @@ -767,6 +776,7 @@ To load the data from Microsoft Access database, 5. Use `OleDbDataAdapter` to load the data in to `DataSet`. 6. Access the Employee table from the DataSet and set the Employee collection as `ItemsSource` of SfDataGrid. +{% capture codesnippet4 %} {% tabs %} {% highlight c# %} @@ -784,6 +794,8 @@ void dataGrid_Loaded(object sender, RoutedEventArgs e) } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} 7.Now, run the application and you can see following screenshot shows the SfDataGrid control populated data from Microsoft Access database.
diff --git a/wpf/DataGrid/Editing.md b/wpf/DataGrid/Editing.md index c6432b892a..f79f04e6f8 100644 --- a/wpf/DataGrid/Editing.md +++ b/wpf/DataGrid/Editing.md @@ -573,6 +573,7 @@ Please follow the below steps to highlight the edited cells. 1. Add new property `EditedColumns` in data object to maintain edited column `MappingName`. 2. Add the `MappingName` of the column to `EditedColumns`, in `CurrentCellValueChanged` event to keep track of edited columns in data object. +{% capture codesnippet1 %} {% tabs %} {% highlight c# %} @@ -590,9 +591,12 @@ private void dataGrid_CurrentCellValueChanged(object sender, CurrentCellValueCha {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} 3. Create a style of TargetType `GridCell` and change the Foreground using `CellStyleSelector` based on `EditedColumns` property in data object. +{% capture codesnippet2 %} {% tabs %} {% highlight xaml %} @@ -613,7 +617,10 @@ private void dataGrid_CurrentCellValueChanged(object sender, CurrentCellValueCha {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} +{% capture codesnippet3 %} {% tabs %} {% highlight c# %} public class CellStyleSelector : StyleSelector @@ -636,6 +643,8 @@ public class CellStyleSelector : StyleSelector } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_2 }} ![Changing Foreground of Edited Cells in WPF DataGrid](Editing_images/wpf-datagrid-edited-cells.jpeg) diff --git a/wpf/DataGrid/Getting-Started.md b/wpf/DataGrid/Getting-Started.md index e7f9df9857..2dc34f5cf4 100644 --- a/wpf/DataGrid/Getting-Started.md +++ b/wpf/DataGrid/Getting-Started.md @@ -127,6 +127,7 @@ In order to add control manually in XAML, do the below steps, 2. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** or SfDataGrid control namespace **Syncfusion.UI.Xaml.Grid** in XAML page. 3. Declare SfDataGrid control in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ### Adding control manually in C\# @@ -152,6 +155,7 @@ In order to add control manually in C#, do the below steps, 2. Import SfDataGrid namespace **Syncfusion.UI.Xaml.Grid** . 3. Create SfDataGrid control instance and add it to the Page. +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} using Syncfusion.UI.Xaml.Grid; @@ -171,6 +175,8 @@ namespace WpfApplication1 } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ### Creating Data Model for sample application @@ -178,6 +184,7 @@ SfDataGrid is a data-bound control. So before create binding to the control, you 1. Create data object class named **OrderInfo** and declare properties as shown below, +{% capture codesnippet3 %} {% tabs %} {% highlight c# %} public class OrderInfo @@ -229,12 +236,15 @@ public class OrderInfo } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} N> If you want your data object (OrderInfo class) to automatically reflect property changes, then the object must implement **INotifyPropertyChanged** interface. -2.Create a **ViewModel** class with Orders property and Orders property is initialized with several data objects in constructor. +2. Create a **ViewModel** class with Orders property and Orders property is initialized with several data objects in constructor. +{% capture codesnippet4 %} {% tabs %} {% highlight c# %} public class ViewModel @@ -268,6 +278,8 @@ public class ViewModel } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} ### Binding to Data diff --git a/wpf/DataGrid/Paging.md b/wpf/DataGrid/Paging.md index 7400b32110..db5d373076 100644 --- a/wpf/DataGrid/Paging.md +++ b/wpf/DataGrid/Paging.md @@ -21,8 +21,7 @@ Follow the below steps to bind SfDataGrid with SfDataPager. 3. Bind [SfDataPager.PagedSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Controls.DataPager.SfDataPager.html#Syncfusion_UI_Xaml_Controls_DataPager_SfDataPager_PagedSource) to [SfDataGrid.ItemsSource](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_ItemsSource) property. So whenever the page is changed, `PagedSource` will be update based on current page. - - +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -121,6 +120,8 @@ public class OrderInfo } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ![WPF DataGrid diplays Multiple Pages using SfDataPager](Paging_images/wpf-datagrid-multiple-page.png) diff --git a/wpf/DataGrid/Printing.md b/wpf/DataGrid/Printing.md index 61db7f7ea1..1a5e867909 100644 --- a/wpf/DataGrid/Printing.md +++ b/wpf/DataGrid/Printing.md @@ -166,6 +166,7 @@ Steps to add page header while printing, 1. Create DataTemplate in `Application.Resources`. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -181,9 +182,12 @@ Steps to add page header while printing, {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} -2.Set the above defined DataTemplate to [PrintSettings.PrintPageHeaderTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_PrintPageHeaderTemplate) and assign value for [PrintSettings.PrintPageHeaderHeight](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_PrintPageHeaderHeight) property also. +2. Set the above defined DataTemplate to [PrintSettings.PrintPageHeaderTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_PrintPageHeaderTemplate) and assign value for [PrintSettings.PrintPageHeaderHeight](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_PrintPageHeaderHeight) property also. +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} dataGrid.PrintSettings = new PrintSettings(); @@ -192,8 +196,10 @@ dataGrid.PrintSettings.PrintPageHeaderTemplate = Application.Current.Resources[" dataGrid.ShowPrintPreview(); {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} -3.Now run the application and you can see page header in all the pages. In the same way, you can set [PrintSettings.PrintPageFooterTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_PrintPageFooterTemplate) also. +3. Now run the application and you can see page header in all the pages. In the same way, you can set [PrintSettings.PrintPageFooterTemplate](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.PrintSettings.html#Syncfusion_UI_Xaml_Grid_PrintSettings_PrintPageFooterTemplate) also. ![Customizing Header Height in Print Preview for WPF DataGrid](Printing_images/wpf-datagrid-height-customization.png) @@ -901,8 +907,9 @@ You can create custom print preview window by adding [PrintPreviewAreaControl](h Steps to create `custom print preview` window. -1.Add [PrintPreviewAreaControl](http://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.PrintPreviewAreaControl.html) and required controls to print or customize the print settings. +1. Add [PrintPreviewAreaControl](http://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.PrintPreviewAreaControl.html) and required controls to print or customize the print settings. +{% capture codesnippet3 %} {% tabs %} {% highlight xaml %} @@ -931,9 +938,12 @@ Steps to create `custom print preview` window. {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} -2.Assign the instance of [GridPrintManager](http://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridPrintManager.html) to [PrintPreviewAreaControl.PrintManagerBase ](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.PrintPreviewAreaControl.html#Syncfusion_UI_Xaml_Grid_PrintPreviewAreaControl_PrintManagerBase) property. +2. Assign the instance of [GridPrintManager](http://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridPrintManager.html) to [PrintPreviewAreaControl.PrintManagerBase ](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.PrintPreviewAreaControl.html#Syncfusion_UI_Xaml_Grid_PrintPreviewAreaControl_PrintManagerBase) property. +{% capture codesnippet4 %} {% tabs %} {% highlight c# %} var window = new PreviewWindow @@ -944,15 +954,20 @@ window.PrintPreviewArea.PrintManagerBase = new GridPrintManager(dataGrid); window.ShowDialog(); {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} -3.You can customize print settings like scaling, Orientation at runtime by using [PrintPreviewAreaControl.PrintManagerBase](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.PrintPreviewAreaControl.html#Syncfusion_UI_Xaml_Grid_PrintPreviewAreaControl_PrintManagerBase) and it will be reflected it custom print preview window. +3. You can customize print settings like scaling, Orientation at runtime by using [PrintPreviewAreaControl.PrintManagerBase](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.PrintPreviewAreaControl.html#Syncfusion_UI_Xaml_Grid_PrintPreviewAreaControl_PrintManagerBase) and it will be reflected it custom print preview window. +{% capture codesnippet5 %} {% tabs %} {% highlight c# %} this.PrintPreviewArea.PrintManagerBase.PrintScaleOption = PrintScaleOptions.FitAllRowsonOnePage; this.PrintPreviewArea.PrintManagerBase.Print(); {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet5 | OrderList_Indent_Level_1 }} ![Custom Print Preview Window in WPF DataGrid](Printing_images/wpf-datagrid-custom-print-preview-window.png) diff --git a/wpf/DataGrid/Row-Height-Customization.md b/wpf/DataGrid/Row-Height-Customization.md index 2e6e9cf163..72e0279938 100644 --- a/wpf/DataGrid/Row-Height-Customization.md +++ b/wpf/DataGrid/Row-Height-Customization.md @@ -203,7 +203,7 @@ You can reset height of the particular or all rows in View at runtime to get the * [InvalidateRowHeight](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_InvalidateRowHeight_System_Int32_) – Resets the height of particular row. - +{% capture codesnippet1 %} {% tabs %} {% highlight c# %} using Syncfusion.UI.Xaml.Grid.Helpers; @@ -212,11 +212,12 @@ dataGrid.InvalidateRowHeight(2); dataGrid.GetVisualContainer().InvalidateMeasureInfo(); {% endhighlight %} {% endtabs %} - +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} * [RowHeightManager.Reset](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.RowHeightManager.html#Syncfusion_UI_Xaml_Grid_RowHeightManager_Reset) – Resets the height for all rows in View. - +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} using Syncfusion.UI.Xaml.Grid.Helpers; @@ -225,6 +226,8 @@ this.datagrid.GetVisualContainer().RowHeightManager.Reset(); dataGrid.GetVisualContainer().InvalidateMeasureInfo(); {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ### Update Row Height while editing diff --git a/wpf/DataGrid/Serialization-and-Deserialization.md b/wpf/DataGrid/Serialization-and-Deserialization.md index b838aaab4b..097d9e3492 100644 --- a/wpf/DataGrid/Serialization-and-Deserialization.md +++ b/wpf/DataGrid/Serialization-and-Deserialization.md @@ -380,6 +380,7 @@ To serialize the above DatePickerColumn, follow the below steps. 1. Create a class derived from [SerializableGridColumn](http://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SerializableGridColumn.html) and define the custom column properties in `SerializableCustomGridColumn` class. +{% capture codesnippet1 %} {% tabs %} {% highlight c# %} [DataContract(Name="SerializableCustomGridColumn")] @@ -392,9 +393,12 @@ public class SerializableCustomGridColumn : SerializableGridColumn } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} -2.Create a new class named as SerializationControllerExt by overriding [SerializationController](http://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SerializationController.html) class. +2. Create a new class named as SerializationControllerExt by overriding [SerializationController](http://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SerializationController.html) class. +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} dataGrid.SerializationController = new SerializationControllerExt(dataGrid); @@ -409,9 +413,13 @@ public class SerializationControllerExt : SerializationController } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} -3.You can get the custom column property settings for serialization by overriding the [GetSerializableGridColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SerializationController.html#Syncfusion_UI_Xaml_Grid_SerializationController_GetSerializableDataGrid) virtual method. +3. You can get the custom column property settings for serialization by overriding the [GetSerializableGridColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SerializationController.html#Syncfusion_UI_Xaml_Grid_SerializationController_GetSerializableDataGrid) virtual method. + +{% capture codesnippet3 %} {% tabs %} {% highlight c# %} public class SerializationControllerExt : SerializationController @@ -434,9 +442,12 @@ public class SerializationControllerExt : SerializationController } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} -4.Store the custom column property settings during serialization by overriding the [StoreGridColumnProperties](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SerializationController.html#Syncfusion_UI_Xaml_Grid_SerializationController_StoreGridColumnProperties_Syncfusion_UI_Xaml_Grid_GridColumn_Syncfusion_UI_Xaml_Grid_SerializableGridColumn_) virtual method. +4. Store the custom column property settings during serialization by overriding the [StoreGridColumnProperties](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SerializationController.html#Syncfusion_UI_Xaml_Grid_SerializationController_StoreGridColumnProperties_Syncfusion_UI_Xaml_Grid_GridColumn_Syncfusion_UI_Xaml_Grid_SerializableGridColumn_) virtual method. +{% capture codesnippet4 %} {% tabs %} {% highlight c# %} public class SerializationControllerExt : SerializationController @@ -457,9 +468,12 @@ public class SerializationControllerExt : SerializationController } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} -5.Add the custom column in to known column types by overriding the [KnownTypes](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SerializationController.html#Syncfusion_UI_Xaml_Grid_SerializationController_KnownTypes) virtual method. +5. Add the custom column in to known column types by overriding the [KnownTypes](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SerializationController.html#Syncfusion_UI_Xaml_Grid_SerializationController_KnownTypes) virtual method. +{% capture codesnippet5 %} {% tabs %} {% highlight c# %} public class SerializationControllerExt : SerializationController @@ -479,9 +493,12 @@ public class SerializationControllerExt : SerializationController } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet5 | OrderList_Indent_Level_1 }} -6.During deserialization, you can get the custom column settings from [SerializableGridColumn](http://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SerializableGridColumn.html) by overriding [GetGridColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SerializationController.html#Syncfusion_UI_Xaml_Grid_SerializationController_GetGridColumn_Syncfusion_UI_Xaml_Grid_SerializableGridColumn_) virtual method. +6. During deserialization, you can get the custom column settings from [SerializableGridColumn](http://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SerializableGridColumn.html) by overriding [GetGridColumn](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SerializationController.html#Syncfusion_UI_Xaml_Grid_SerializationController_GetGridColumn_Syncfusion_UI_Xaml_Grid_SerializableGridColumn_) virtual method. +{% capture codesnippet6 %} {% tabs %} {% highlight c# %} public class SerializationControllerExt : SerializationController @@ -501,9 +518,12 @@ public class SerializationControllerExt : SerializationController } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet6 | OrderList_Indent_Level_1 }} -7.Now restore the custom column settings from SerializableGridColumn by overriding the [RestoreColumnProperties](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SerializationController.html#Syncfusion_UI_Xaml_Grid_SerializationController_RestoreColumnProperties_Syncfusion_UI_Xaml_Grid_SerializableGridColumn_Syncfusion_UI_Xaml_Grid_GridColumn_) virtual method. +7. Now restore the custom column settings from SerializableGridColumn by overriding the [RestoreColumnProperties](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SerializationController.html#Syncfusion_UI_Xaml_Grid_SerializationController_RestoreColumnProperties_Syncfusion_UI_Xaml_Grid_SerializableGridColumn_Syncfusion_UI_Xaml_Grid_GridColumn_) virtual method. +{% capture codesnippet7 %} {% tabs %} {% highlight c# %} public class SerializationControllerExt : SerializationController @@ -525,6 +545,8 @@ public class SerializationControllerExt : SerializationController } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet7 | OrderList_Indent_Level_1 }} You can download the sample demo [here](http://www.syncfusion.com/downloads/support/directtrac/general/ze/Serialization_Deserialization-1590961253.zip). diff --git a/wpf/DataGrid/Summaries.md b/wpf/DataGrid/Summaries.md index 6e7d1d70bc..4b246a9db6 100644 --- a/wpf/DataGrid/Summaries.md +++ b/wpf/DataGrid/Summaries.md @@ -2137,8 +2137,9 @@ You can calculate the summary values based on custom logic using [GridSummaryCol 2. In the `CalculateAggregateFunc` method, you have to calculate the summary and assign it to the property. -In the below code snippet, the Standard Deviation is calculated for quantity of products. + In the below code snippet, the Standard Deviation is calculated for quantity of products. +{% capture codesnippet1 %} {% tabs %} {% highlight c# %} public class CustomAggregate:ISummaryAggregate @@ -2192,9 +2193,13 @@ public static class LinqExtensions {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} -3.Assign the custom aggregate to `GridSummaryColumn.CustomAggregate` property and set the [SummaryType](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSummaryColumn.html#Syncfusion_UI_Xaml_Grid_GridSummaryColumn_SummaryType) as [Custom](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.SummaryType.html). [GridSummaryColumn.Format](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSummaryColumn.html#Syncfusion_UI_Xaml_Grid_GridSummaryColumn_Format) property is defined based on property name in custom aggregate `StdDev`. +3. Assign the custom aggregate to `GridSummaryColumn.CustomAggregate` property and set the [SummaryType](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSummaryColumn.html#Syncfusion_UI_Xaml_Grid_GridSummaryColumn_SummaryType) as [Custom](https://help.syncfusion.com/cr/wpf/Syncfusion.Data.SummaryType.html). [GridSummaryColumn.Format](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.GridSummaryColumn.html#Syncfusion_UI_Xaml_Grid_GridSummaryColumn_Format) property is defined based on property name in custom aggregate `StdDev`. + +{% capture codesnippet2 %} {% tabs %} {% highlight xaml %} @@ -2238,6 +2243,9 @@ this.dataGrid.TableSummaryRows.Add(new GridTableSummaryRow() }); {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} + ![Custom Aggregate Summaries in WPF DataGrid](Summaries_images/wpf-datagrid-custom-summaries.png) diff --git a/wpf/DataGrid/UI-Automation.md b/wpf/DataGrid/UI-Automation.md index 20612cc7d3..bfbd7ef6de 100644 --- a/wpf/DataGrid/UI-Automation.md +++ b/wpf/DataGrid/UI-Automation.md @@ -71,7 +71,7 @@ This topic shows you how to create a CodedUITest project and test the SfDataGrid 1. Create a new WPF application or open an existing WPF application with SfDataGrid and enable Coded UI Test in SfDataGrid. To enable CUITs, you need to set [AutomationPeerHelper.EnableCodedUI](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.AutomationPeerHelper.html#Syncfusion_UI_Xaml_Grid_AutomationPeerHelper_EnableCodedUI) as `True` and access the [AutomationPeerHelper](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.AutomationPeerHelper.html) class from [Syncfusion.UI.Xaml.Grid](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.html) namespace as shown in the following code example, - +{% capture codesnippet1 %} {% tabs %} {% highlight c# %} @@ -85,6 +85,8 @@ public MainWindow() {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} 2. Build the application and launch the .exe file from the bin folder. 3. Create a Coded UI Test Project as shown in the following screenshot. @@ -136,6 +138,7 @@ public MainWindow() {:.caption} 9. Once the record is completed, click the GenerateCode icon in CodedUITestBuilder for generate a test method. Then close the CodedUITestBuilder and you can see the generated code for cell value changed action as follows. +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} @@ -152,6 +155,8 @@ public void RecordedMethod1() {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} 10. You can also create an assertion to check the modified cell value. Drag the crosshair to the modified cell, and the Assertion window appears. The properties for control (Cell) is now listed in the Assertion dialog box. You can add assertion by clicking the Generate Code button in CodedUITestBuilder. diff --git a/wpf/GridControl/Appearance.md b/wpf/GridControl/Appearance.md index 462f5ffb75..cf1115bbe6 100644 --- a/wpf/GridControl/Appearance.md +++ b/wpf/GridControl/Appearance.md @@ -193,8 +193,9 @@ Determines the angle of rotation of the text -1.Setting Text, Foreground and Font Properties +1. Setting Text, Foreground and Font Properties +{% capture codesnippet1 %} {% tabs %} {%highlight c#%} @@ -230,6 +231,8 @@ this.grid.Model[8, 5].HorizontalAlignment = HorizontalAlignment.Center; this.grid.Model[8, 5].CellValue = "Font style is Normal"; {%endhighlight%} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} #### Output @@ -237,8 +240,9 @@ The following output is generated using the code above. ![Change the font style and color in WPF GridControl](Appearance_images/Appearance_img4.jpeg) -2.Setting cell orientation +2. Setting cell orientation +{% capture codesnippet2 %} {% tabs %} {%highlight c#%} this.grid.Model[12, 1].Font.Orientation = 45; @@ -268,6 +272,8 @@ this.grid.Model[12, 5].VerticalAlignment = VerticalAlignment.Center; this.grid.Model.RowHeights[12] = 50; {%endhighlight%} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} #### Output @@ -406,8 +412,9 @@ s -1.Setting text format +1. Setting text format +{% capture codesnippet3 %} {% tabs %} {%highlight c#%} //Setting Text formats @@ -433,9 +440,12 @@ rowIndex += 3; } {%endhighlight%} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} -2.Setting DateTime format +2. Setting DateTime format +{% capture codesnippet4 %} {% tabs %} {%highlight c#%} //Setting DateTime formats @@ -460,7 +470,9 @@ foreach (string format in new string[] rowIndex += 3; } {%endhighlight%} -{% endtabs %} +{% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} #### Output diff --git a/wpf/GridControl/Cell-Types.md b/wpf/GridControl/Cell-Types.md index 38cc2f4a96..9666bd40dc 100644 --- a/wpf/GridControl/Cell-Types.md +++ b/wpf/GridControl/Cell-Types.md @@ -2293,8 +2293,9 @@ grid.Model[10, 2].CellValue = myFlowDocument; Grid provides inherent support to host chart controls. This is achieved by using Data Template cells. -1.Define the Data Template that creates a chart. The template below illustrates the creation of a chart control with a single series and defines its attributes. +1. Define the Data Template that creates a chart. The template below illustrates the creation of a chart control with a single series and defines its attributes. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -2362,9 +2363,12 @@ public class MyDataCollection : ObservableCollection } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} -2.Bind the above template to the grid cell to form a chart cell. +2. Bind the above template to the grid cell to form a chart cell. +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} var cell = grid.Model[2, 2]; @@ -2373,6 +2377,8 @@ cell.CellItemTemplateKey = "DataChart"; grid.Model.RowHeights[2] = 400d; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ![Chart cell in WPF GridControl](Cell-Types_images/Cell-Types_img29.jpeg) diff --git a/wpf/GridControl/Formula-Cells.md b/wpf/GridControl/Formula-Cells.md index e9a259d1d9..b66de70b71 100644 --- a/wpf/GridControl/Formula-Cells.md +++ b/wpf/GridControl/Formula-Cells.md @@ -100,6 +100,7 @@ Here are the steps that are required to add a function to the Function Library. 1. First, define a method that has this signature. +{% capture codesnippet1 %} {% tabs %} {% highlight c# %} // Define a method whose name is the FormulaName. @@ -110,6 +111,9 @@ public string MyLibraryFormulaName(string args) Public Function MyLibraryFormulaName(ByVal args As String) As String {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} + Here MyLibraryFormulaName must be a name that has not been already used in the Function Library and must include only letters and digits. If you want to replace an existing formula with a formula of the same name, first remove the existing formula before adding the new formula. Use the GridFormulaEngine.RemoveFunction method to remove a formula. diff --git a/wpf/GridControl/Getting-Started.md b/wpf/GridControl/Getting-Started.md index 23732d56a5..2eac957a1a 100644 --- a/wpf/GridControl/Getting-Started.md +++ b/wpf/GridControl/Getting-Started.md @@ -60,7 +60,8 @@ Instead of adding it through a designer such a Visual Studio, you can add the Gr ![WPF Grid Control Assembly References](Getting-Started_images/Getting-Started_img9.png) 3. Name the root Grid as layoutRoot in the application’s XAML page. - + +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }}        - 4. Create ScrollViewer and GridControl in code. 5. To add the grid to the view, add GridControl as content of ScrollViewer and then add the ScrollViewer as a child of layoutRoot (Grid). +{% capture codesnippet2 %} {% tabs %} {%highlight c#%} //ScrollViewer defined here @@ -90,13 +93,16 @@ ScrollViewer.Content = gridControl;      this.layoutRoot.Children.Add(ScrollViewer);            {%endhighlight%} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ## Populating the Grid control with Data The Grid control is a cell-based control, so to populate it, RowCount and ColumnCount are mandatory. Once ColumnCount and RowCount are specified, data can be populated by using one of the following methods. -1.You can populate data by looping through the cells in the Grid control. The following code explains this scenario. +1. You can populate data by looping through the cells in the Grid control. The following code explains this scenario. +{% capture codesnippet3 %} {% tabs %} {%highlight c#%} //Specifying row and column count @@ -113,10 +119,13 @@ for (int i = 0; i < 100; i++) } {%endhighlight%} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} -2.You can populate data by handling the QueryCellInfo event of gridControl. This will load the data in and on-demand basis, ensuring optimized performance. +2. You can populate data by handling the QueryCellInfo event of gridControl. This will load the data in and on-demand basis, ensuring optimized performance. +{% capture codesnippet4 %} {% tabs %} {%highlight c#%} //Specifying row and column count @@ -132,6 +141,8 @@ void gridControl_QueryCellInfo(object sender, Syncfusion.Windows.Controls.Gri }    {%endhighlight%} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} 3.Now, run the application. The grid will appear as follows. diff --git a/wpf/GridControl/Real-Time-Applications.md b/wpf/GridControl/Real-Time-Applications.md index 8433124839..0194215d1a 100644 --- a/wpf/GridControl/Real-Time-Applications.md +++ b/wpf/GridControl/Real-Time-Applications.md @@ -31,11 +31,14 @@ a. Excel-like Current Cell You can select a current cell in the Grid, similar to the current cell behavior in Microsoft Excel. This feature can be enabled, by setting GridModelOptions.ExcelLikeCurrentCell property to _true_, as follows: +{% capture codesnippet1 %} {% tabs %} {% highlight c# %} grid.Model.Options.ExcelLikeCurrentCell = true; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ![Showing Excel like Current Cell Selection in WPF GridControl](Real-Time-Applications_images/Real-Time-Applications_img1.jpeg) @@ -47,11 +50,14 @@ b. Excel-like Selection Frame The active selection can be outlined with a selection frame by setting the GridModelOptions.ExcelLikeSelectionFrame property to true, as follows: +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} grid.Model.Options.ExcelLikeSelectionFrame = true; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ![Displaying Excel like Selection Frame in WPF GridControl](Real-Time-Applications_images/Real-Time-Applications_img2.jpeg) @@ -60,11 +66,14 @@ c. Formula Cells As we discussed in the previous chapter, Grid control provides complete support to formula cells. It can be enabled for the grid by setting the format string, FormulaCell to the TableStyle.CellType property, as follows: +{% capture codesnippet3 %} {% tabs %} {% highlight c# %} grid.Model.TableStyle.CellType = "FormulaCell"; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} ![WPF GridControl with Excel like Formula Cell](Real-Time-Applications_images/Real-Time-Applications_img3.jpeg) @@ -77,6 +86,7 @@ OnPrepareRenderCell event-This event will be triggered for every cell when they The following code illustrates how to handle this event: +{% capture codesnippet4 %} {% tabs %} {% highlight c# %} protected override void OnPrepareRenderCell(GridPrepareRenderCellEventArgs e) @@ -95,6 +105,8 @@ protected override void OnPrepareRenderCell(GridPrepareRenderCellEventArgs e) } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} ![WPF GridControl with markup headers](Real-Time-Applications_images/Real-Time-Applications_img4.jpeg) diff --git a/wpf/GridControl/Serialization.md b/wpf/GridControl/Serialization.md index c7e4dd013c..3aa264a266 100644 --- a/wpf/GridControl/Serialization.md +++ b/wpf/GridControl/Serialization.md @@ -24,6 +24,7 @@ The following sample application explains the implementation of the Serializatio In the application, create three buttons. The first button to call the Serialize() method, the second button to make changes to the Grid and the third button is to call the Deserialize() method. The following code snippet explains the implementation of Serialization. +{% capture codesnippet1 %} {% tabs %} {% highlight c# %} // To Serialize the GridControl. @@ -33,6 +34,8 @@ this.grid.Model.Serialize("Data.xml"); this.grid.Model.Deserialize("Data.xml"); {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} 3.Run the application diff --git a/wpf/GridControl/Testing.md b/wpf/GridControl/Testing.md index 161ef8decc..f0b85faa82 100644 --- a/wpf/GridControl/Testing.md +++ b/wpf/GridControl/Testing.md @@ -58,8 +58,9 @@ The following set of instructions illustrates the same. ![Syncfusion Assemblies referenced in the WPF Application](Testability-Frameworks_images/Testability-Frameworks_img3.png) -2.Create a console project as shown below. +2. Create a console project as shown below. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -81,8 +82,10 @@ private void InitGrid() } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} -3.Enter the path where the output of the Window sample has to be saved, in the Output path field. +3. Enter the path where the output of the Window sample has to be saved, in the Output path field. ![Specifying the Output Path](Testability-Frameworks_images/Testability-Frameworks_img4.png) @@ -90,6 +93,7 @@ N> Mention the output path as the Console application's bin\Debug directory. The following sample code uses TestApi assemblies. +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} // Initialization Code. @@ -110,6 +114,8 @@ private static AutomationElement GetGridAut(out AutomatedApplication app) } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} N> We have added minimal set of LINQ-to-UIAutomation classes that would translate the LINQ query for searching the AutomationElement from the root hierarchy. With LINQ-To-UIAutomation library, only First method is supported now. @@ -183,6 +189,7 @@ Initial steps before creating the Coded UI Test project: N> The following code appears. +{% capture codesnippet3 %} {% tabs %} {% highlight xaml %} The following code appears. {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} -3.Change Application to Syncfusion:GridControlTestApplication as follows. +3. Change Application to Syncfusion:GridControlTestApplication as follows. +{% capture codesnippet4 %} {% tabs %} {% highlight xaml %} The following code appears. {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} -4.For the code behind file (App.xaml.cs), make sure to inherit from GridControlTestApplication. +4. For the code behind file (App.xaml.cs), make sure to inherit from GridControlTestApplication. +{% capture codesnippet5 %} {% tabs %} {% highlight c# %} namespace WpfApplication3 @@ -225,6 +238,8 @@ namespace WpfApplication3 } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet5 | OrderList_Indent_Level_1 }} 5.Build the application to make it ready for testing. @@ -244,6 +259,7 @@ N> The GridControlTestApplication works only with a single Grid instance in the The following code illustrates this. +{% capture codesnippet6 %} {% tabs %} {% highlight c# %} public void HelloWorld_Test() @@ -251,39 +267,42 @@ public void HelloWorld_Test() } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet6 | OrderList_Indent_Level_1 }} -4.Build and run the Grid application that you configured. +4. Build and run the Grid application that you configured. * Right-click on the TestMethod body and then select as below, ![Generate code for Coded UI Test](Testability-Frameworks_images/Testability-Frameworks_img8.jpeg) -5.Click on the record button to perform actions, you can add a Hello World text in a grid cell [x, y] in this scenario. +5. Click on the record button to perform actions, you can add a Hello World text in a grid cell [x, y] in this scenario. ![UI Recorder of Coded UI Test](Testability-Frameworks_images/Testability-Frameworks_img9.jpeg) ![Added Hello World text in a Cell](Testability-Frameworks_images/Testability-Frameworks_img10.jpeg) -6.Click on Generate code in the Coded UI Test Builder. +6. Click on Generate code in the Coded UI Test Builder. ![Add And Generate code in coded UI test builder](Testability-Frameworks_images/Testability-Frameworks_img11.jpeg) -7.You can assert the cell value using the cross-hair present in the Coded UI Test builder. +7. You can assert the cell value using the cross-hair present in the Coded UI Test builder. -8.Click on the cross-hair and hover to the Hello World cell. +8. Click on the cross-hair and hover to the Hello World cell. N> The assert window is displayed as below. ![Show the Assert Window](Testability-Frameworks_images/Testability-Frameworks_img12.jpeg) -9.Add asserts to the properties displayed in the assert window and generate the assert method. +9. Add asserts to the properties displayed in the assert window and generate the assert method. -10.Close the Coded UI Test builder. +10. Close the Coded UI Test builder. N> Coded UI Unit Test is created. The following code generates automatically. +{% capture codesnippet7 %} {% tabs %} {% highlight c# %} public void HelloWorld_Test() @@ -293,6 +312,8 @@ public void HelloWorld_Test() } {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet7 | OrderList_Indent_Level_1 }} ### Testing the Application with Generated Coded UI Test diff --git a/wpf/Ribbon/Backstage.md b/wpf/Ribbon/Backstage.md index 83cc2194a0..21f55a5a11 100644 --- a/wpf/Ribbon/Backstage.md +++ b/wpf/Ribbon/Backstage.md @@ -107,8 +107,9 @@ syncfusionskin:SfSkinManager.VisualStyle="Office2013White" > The [`IsBackStageVisible`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.Ribbon.html#Syncfusion_Windows_Tools_Controls_Ribbon_IsBackStageVisible) property of Ribbon enables you to show/hide the BackStage. The following code example illustrates how to show or hide BackStage. -1) Through Property +1. Through Property +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -124,9 +125,12 @@ _ribbon.IsBackStageVisible = true; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} -2) Through Methods +2. Through Methods +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -160,11 +164,14 @@ End Sub {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} -3) Through Commands +3. Through Commands Ribbon control provides the static command [OpenBackStage](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.RibbonCommands.html#Syncfusion_Windows_Tools_Controls_RibbonCommands_OpenBackStage) to show/hide the BackStage based on the parameter passed to it. +{% capture codesnippet3 %} {% tabs %} {% highlight XAML %} @@ -178,6 +185,8 @@ Ribbon control provides the static command [OpenBackStage](https://help.syncfusi {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} N> In order to bind the [`OpenBackStage`](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Tools.Controls.RibbonCommands.html#Syncfusion_Windows_Tools_Controls_RibbonCommands_OpenBackStage) command, CommandTarget and CommandParameter must be defined. diff --git a/wpf/Ribbon/DealingWithRibbon.md b/wpf/Ribbon/DealingWithRibbon.md index 3181e877f6..7d4cfec5ca 100644 --- a/wpf/Ribbon/DealingWithRibbon.md +++ b/wpf/Ribbon/DealingWithRibbon.md @@ -2173,6 +2173,7 @@ To create a ContextTabGroup in MVVM, follow below steps. 1. Create a class for ContextTabGroup, RibbonBar and RibbonItems in Model CS file. +{% capture codesnippet1 %} {% tabs %} {% highlight C# %} @@ -2345,9 +2346,12 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} 2. Create a View model class and then add ContextTabGroup , RibbonBars and RibbonItems with some properties. +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -2600,9 +2604,13 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} 3. Now bind the properties of View model in XAML. +{% capture codesnippet3 %} + {% tabs %} {% highlight XAML %} @@ -2670,10 +2678,14 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} 4. Add a converter class for binding conversions +{% capture codesnippet4 %} + {% tabs %} {% highlight C# %} @@ -2848,6 +2860,8 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} ![WPF Ribbon with ContextTabGroup in MVVM](GroupingRibbonTabsusingContextTabGroups_images/wpf-ribbon-context-tab-group-mvvm.png) diff --git a/wpf/Ribbon/GettingStarted.md b/wpf/Ribbon/GettingStarted.md index 2fc7916076..33f2d01154 100644 --- a/wpf/Ribbon/GettingStarted.md +++ b/wpf/Ribbon/GettingStarted.md @@ -21,6 +21,7 @@ There are several ways to add Syncfusion control in to Visual Studio WPF project * Include an XML namespace for the above assemblies to the Main window. +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -34,9 +35,12 @@ xmlns:syncfusion="http://schemas.syncfusion.com/wpf" x:Class="RibbonControl.Main {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} * Change the Window as `RibbonWindow`. +{% capture codesnippet2 %} {% tabs %} {% highlight XAML %} @@ -50,9 +54,12 @@ xmlns:syncfusion="http://schemas.syncfusion.com/wpf" x:Class="RibbonControl.Main {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} * Add following namespace and inherit MainWindow from `RibbonWindow` in code behind. +{% capture codesnippet3 %} {% tabs %} {% highlight C# %} @@ -70,9 +77,12 @@ Public class As partial {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} * Now, Add the Ribbon control with a required optimal name, using the included namespace in XAML. +{% capture codesnippet4 %} {% tabs %} {% highlight XAML %} @@ -89,11 +99,14 @@ xmlns:syncfusion="http://schemas.syncfusion.com/wpf" x:Class="RibbonControl.M {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} ## Set icon for RibbonWindow * Icon of the RibbonWindow can be set using the property named `Office2010Icon`. Please refer to the below code. +{% capture codesnippet5 %} {% tabs %} {% highlight XAML %} @@ -119,6 +132,8 @@ xmlns:syncfusion="http://schemas.syncfusion.com/wpf" x:Class="RibbonControl.M {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet5 | OrderList_Indent_Level_1 }} ![WPF Ribbon Control](GettingStarted_images/wpf-ribbon-control.jpg) @@ -128,11 +143,12 @@ Ribbon supports various visual styles by using the `SfSkinManager`. To apply Vis * Refer the following assemblies with the project -1. Syncfusion.SfSkinManager.Wpf -2. Syncfusion.Themes.Office2013White.Wpf + 1. Syncfusion.SfSkinManager.Wpf + 2. Syncfusion.Themes.Office2013White.Wpf * Include an XML namespace for the SfSkinManager assembly to the MainWindow. +{% capture codesnippet6 %} {% tabs %} {% highlight XAML %} @@ -150,9 +166,12 @@ xmlns:syncfusionskin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet6 | OrderList_Indent_Level_1 }} * Now apply the value as `Office2013White` to the `VisualStyle` property of the SfSkinManager for the RibbonWindow. +{% capture codesnippet7 %} {% tabs %} {% highlight XAML %} @@ -171,6 +190,8 @@ syncfusionskin:SfSkinManager.VisualStyle="Office2013White" > {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet7 | OrderList_Indent_Level_1 }} ![WPF Ribbon with Office2013White Style](GettingStarted_images/wpf-ribbon-style.jpg) diff --git a/wpf/Ribbon/PatternsAndPractices.md b/wpf/Ribbon/PatternsAndPractices.md index 250f3cab0c..33e31e0c73 100644 --- a/wpf/Ribbon/PatternsAndPractices.md +++ b/wpf/Ribbon/PatternsAndPractices.md @@ -12,12 +12,13 @@ documentation: ug For better control customization MVVM pattern can be followed. The following steps illustrate a simple MVVM pattern with Ribbon control -1.Create new WPF project +1. Create new WPF project -2.Add `Model` class for each element which need to be included in Ribbon control. In this sample class has been created for RibbonTab, RibbonBar and RibbonItem +2. Add `Model` class for each element which need to be included in Ribbon control. In this sample class has been created for RibbonTab, RibbonBar and RibbonItem ### Model +{% capture codesnippet1 %} {% tabs %} {% highlight C# %} @@ -91,11 +92,15 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} -3.Create `ViewModel` class where the collection has been declared and the items has been populated to it. + +3. Create `ViewModel` class where the collection has been declared and the items has been populated to it. ### ViewModel +{% capture codesnippet2 %} {% tabs %} {% highlight C# %} @@ -221,11 +226,14 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} -4.In XAML bind the collection to Ribbon control and use ItemContainerStyle to bind the inner level items like RibbonBar and RibbonItems +4. In XAML bind the collection to Ribbon control and use ItemContainerStyle to bind the inner level items like RibbonBar and RibbonItems #### MainWindow.xaml +{% capture codesnippet3 %} {% tabs %} {% highlight XAML %} @@ -281,11 +289,15 @@ ItemsSource="{Binding CustomRibbonTabs}" {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_1 }} + 5.Converter class is used to set `SizeForm` for the Ribbon items and to set images. #### Converter.cs +{% capture codesnippet4 %} {% tabs %} {% highlight C# %} @@ -396,6 +408,9 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} + Now the output displays the Ribbon control with the populated items @@ -407,7 +422,7 @@ Now the output displays the Ribbon control with the populated items Ribbon control provides PRISM support. The following steps explain about creating simple sample project in the PRISM. -1.Create new WPF project and add the following references to the solution project. +1. Create new WPF project and add the following references to the solution project. * Microsoft.Practices.ServiceLocation.dll * Microsoft.Practices.Unity.dll @@ -417,10 +432,11 @@ Ribbon control provides PRISM support. The following steps explain about creatin * Prism.Unity.Wpf.dll * Prism.Wpf.dll -2.Rename MainWindow to Shell in the Project +2. Rename MainWindow to Shell in the Project -3.Add new class called Bootstrapper.cs to initialize the prism application. +3. Add new class called Bootstrapper.cs to initialize the prism application. +{% capture codesnippet5 %} {% tabs %} {% highlight C# %} @@ -469,9 +485,13 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet5 | OrderList_Indent_Level_1 }} -4.Override OnStartup method in the App.xaml.cs to execute Bootstrapper when the application starts + +4. Override OnStartup method in the App.xaml.cs to execute Bootstrapper when the application starts +{% capture codesnippet6 %} {% tabs %} {% highlight C# %} @@ -502,9 +522,14 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet6 | OrderList_Indent_Level_1 }} + 5.Next step is to create regions in the shell. To do this, first add the following namespace in the shell Window +{% capture codesnippet7 %} + {% tabs %} {% highlight XAML %} @@ -514,10 +539,12 @@ xmlns:Cal="http://www.codeplex.com/CompositeWPF" {% endhighlight %} {% endtabs %} - - +{% endcapture %} +{{ codesnippet7 | OrderList_Indent_Level_1 }} + In the below code, a region called “Tabs” has been created to load RibbonTab Module views +{% capture codesnippet8 %} {% tabs %} @@ -538,8 +565,11 @@ Title="MainWindow" Height="350" Width="525"> {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet8 | OrderList_Indent_Level_2 }} + -6.Adding Module to the project +6. Adding Module to the project Right click the Solution project, point to “Add” and then click “NewProject”. The new Window called AddNewProject gets open. Select “ClassLibrary” from Visual C# then rename the project with desired name and click “Ok”. Now a new Module has been created in the Solution Project @@ -560,8 +590,9 @@ Right click the Solution project, point to “Add” and then click “NewProjec * Prism.Unity.Wpf.dll * Prism.WPF.dll -7.In the Shell project, add the reference to the “HomeTabModule” project by registering with ModuleCatalog instance in the GetModuleCatalog method +7. In the Shell project, add the reference to the “HomeTabModule” project by registering with ModuleCatalog instance in the GetModuleCatalog method +{% capture codesnippet9 %} {% tabs %} {% highlight C# %} @@ -610,9 +641,13 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet9 | OrderList_Indent_Level_1 }} -8.Adding Views to the Module +8. Adding Views to the Module + +{% capture codesnippet10 %} {% tabs %} {% highlight XAML %} @@ -699,9 +734,13 @@ TextWrapping="Wrap"> {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet10 | OrderList_Indent_Level_1 }} + -9.Add a region to the shell and after creating View for the Module, register the view as Module using the below code +9. Add a region to the shell and after creating View for the Module, register the view as Module using the below code +{% capture codesnippet11 %} {% tabs %} {% highlight C# %} @@ -737,6 +776,9 @@ End Class {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet11 | OrderList_Indent_Level_1 }} + Now run the project. RibbonTabModule get added as one of the Module in the Shell. Similarly any number of Modules can be added based on the complexity of the project. diff --git a/wpf/Ribbon/RibbonMerge.md b/wpf/Ribbon/RibbonMerge.md index 73b22f279c..fc8a609be7 100644 --- a/wpf/Ribbon/RibbonMerge.md +++ b/wpf/Ribbon/RibbonMerge.md @@ -21,6 +21,7 @@ Follow the below steps to create simple sample to understand ribbon menu merging 1. Creating main [RibbonWindow](https://help.syncfusion.com/cr/wpf/Syncfusion.Tools.Wpf~Syncfusion.Windows.Tools.Controls.RibbonWindow.html) with [Ribbon](https://help.syncfusion.com/wpf/ribbon/gettingstarted) and [DocumentContainer](https://help.syncfusion.com/wpf/tabbed-mdi-form/getting-started) +{% capture codesnippet1 %} {% tabs %} {% highlight XAML %} @@ -56,11 +57,15 @@ Follow the below steps to create simple sample to understand ribbon menu merging {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} 2. Next, lets create two `UserControl` views with Ribbon which acts as child MDI windows. Child View 1 +{% capture codesnippet2 %} + {% tabs %} {% highlight XAML %} @@ -100,9 +105,13 @@ Child View 1 {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} Child View 2 +{% capture codesnippet3 %} + {% tabs %} {% highlight XAML %} @@ -142,9 +151,12 @@ Child View 2 {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet3 | OrderList_Indent_Level_2 }} 3. Now, add the both child view's into the [DocumentContainer](https://help.syncfusion.com/cr/wpf/Syncfusion.Tools.Wpf~Syncfusion.Windows.Tools.Controls.DocumentContainer.html) and set the the [DocumentContainer.MDIParentRibbon](https://help.syncfusion.com/cr/wpf/Syncfusion.Tools.Wpf~Syncfusion.Windows.Tools.Controls.DocumentContainer~MDIParentRibbon.html) property of [DocumentContainer](https://help.syncfusion.com/cr/wpf/Syncfusion.Tools.Wpf~Syncfusion.Windows.Tools.Controls.DocumentContainer.html). +{% capture codesnippet4 %} {% tabs %} {% highlight XAML %} @@ -182,6 +194,8 @@ Child View 2 {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} Now run the application and you can see an output like this. @@ -199,6 +213,8 @@ Now run the application and you can see an output like this. In the below example the [DocumentContainer.Mode](https://help.syncfusion.com/cr/wpf/Syncfusion.Tools.Wpf~Syncfusion.Windows.Tools.Controls.DocumentContainer~Mode.html) property for [DocumentContainer](https://help.syncfusion.com/cr/wpf/Syncfusion.Tools.Wpf~Syncfusion.Windows.Tools.Controls.DocumentContainer.html) is set to [TDI](https://help.syncfusion.com/cr/wpf/Syncfusion.Tools.Wpf~Syncfusion.Windows.Tools.Controls.DocumentContainerMode.html). +{% capture codesnippet5 %} + {% tabs %} {% highlight XAML %} @@ -236,6 +252,8 @@ In the below example the [DocumentContainer.Mode](https://help.syncfusion.com/cr {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet5 | OrderList_Indent_Level_1 }} ![WPF Ribbon TDI Merging](menu-merging-images/wpf-ribbon-tdi-merging.PNG) diff --git a/wpf/RichTextBox/Getting-Started.md b/wpf/RichTextBox/Getting-Started.md index 1fd72b3502..fe44ac559e 100644 --- a/wpf/RichTextBox/Getting-Started.md +++ b/wpf/RichTextBox/Getting-Started.md @@ -167,22 +167,23 @@ The following assembly reference are additionally required to deploy SfRichTextR ### Adding the Control via Designer -1.Create new WPF application in Visual Studio +1. Create new WPF application in Visual Studio -2.Use the Syncfusion RibbonWindow instead of Window +2. Use the Syncfusion RibbonWindow instead of Window ![WPF RibbonWindow](Getting-Started_images/wpf-ribbonwindow.jpeg) -3.Drag the SfRichTextRibbon control from the Toolbox window to the Design View. An instance of the SfRichTextRibbon control is created in the Design view +3. Drag the SfRichTextRibbon control from the Toolbox window to the Design View. An instance of the SfRichTextRibbon control is created in the Design view ![Dragging RichTextBox Control from Toolbox](Getting-Started_images/wpf-richtextbox-toolbox.jpeg) -4.Drag the SfRichTextBoxAdv control from the Toolbox window to the Design View. An instance of the SfRichTextBoxAdv control is created in the Design view +4. Drag the SfRichTextBoxAdv control from the Toolbox window to the Design View. An instance of the SfRichTextBoxAdv control is created in the Design view ![Draggin RichTextRibbon Control from Toolbox](Getting-Started_images/wpf-richtextribbon-toolbox.jpeg) -5.To make an interaction between SfRichTextRibbon and SfRichTextBoxAdv, bind the SfRichTextBoxAdv as DataContext to the SfRichTextRibbon +5. To make an interaction between SfRichTextRibbon and SfRichTextBoxAdv, bind the SfRichTextBoxAdv as DataContext to the SfRichTextRibbon +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -190,6 +191,8 @@ The following assembly reference are additionally required to deploy SfRichTextR {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} ### Adding Control via code. diff --git a/wpf/RichTextBox/Hyperlink.md b/wpf/RichTextBox/Hyperlink.md index a5c61d10a9..e35b4c9590 100644 --- a/wpf/RichTextBox/Hyperlink.md +++ b/wpf/RichTextBox/Hyperlink.md @@ -157,7 +157,9 @@ SfRichTextBoxAdv.InsertHyperlinkCommand.Execute(new string[3] { "www.syncfusion. {% endtabs %} The following section illustrates how to insert hyperlink field with ScreenTip in RichTextBox Document through built-in hyperlink dialog UI command like Microsoft Word application. -1. Open insert hyperlink dialog. +1. Open insert hyperlink dialog. + +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -165,9 +167,11 @@ The following section illustrates how to insert hyperlink field with ScreenTip i {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} -2. Enter the display text, URL link and ScreenTip text. -3. Click on OK to close the dialog box. +2. Enter the display text, URL link and ScreenTip text. +3. Click on OK to close the dialog box. ![Adding Hyperlink to WPF RichTextBox](Hyperlink_images/wpf-richtextbox-insert-hyperlink.PNG) diff --git a/wpf/Scheduler/Calendar-Types.md b/wpf/Scheduler/Calendar-Types.md index 6b118a212f..76e9a57e0c 100644 --- a/wpf/Scheduler/Calendar-Types.md +++ b/wpf/Scheduler/Calendar-Types.md @@ -60,6 +60,7 @@ All the DateTime values can be given such as [DisplayDate,](https://help.syncfus * Create an appointment with a start and end time value by declaring the calendar type and relevant calendar type date. +{% capture codesnippet1 %} {% tabs %} {% highlight c# %} // Creating an instance for the schedule appointment collection. @@ -78,9 +79,12 @@ appointments.Add(new ScheduleAppointment() this.scheduler.ItemsSource = appointments; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} * Create an appointment with a start and end time by declaring the local system date; in that case, the system date will be converted to the relevant calendar type date. +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} // Creating an instance for the schedule appointment collection. @@ -99,5 +103,7 @@ appointments.Add(new ScheduleAppointment() this.scheduler.ItemsSource = appointments; {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} N> [View sample in GitHub](https://github.com/SyncfusionExamples/WPF-Scheduler-Examples/tree/main/CalendarTypes) \ No newline at end of file diff --git a/wpf/Scheduler/Getting-Started.md b/wpf/Scheduler/Getting-Started.md index c7bfbcdfac..7cec272631 100644 --- a/wpf/Scheduler/Getting-Started.md +++ b/wpf/Scheduler/Getting-Started.md @@ -42,6 +42,7 @@ To add the control manually in XAML page, follow the given steps: 2. Import WPF schema `http://schemas.syncfusion.com/wpf` in the XAML page. 3. Declare the `SfScheduler` control in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} #### Adding control manually in C# diff --git a/wpf/TreeGrid/UI-Automation.md b/wpf/TreeGrid/UI-Automation.md index 35be1594ef..ccab70c04e 100644 --- a/wpf/TreeGrid/UI-Automation.md +++ b/wpf/TreeGrid/UI-Automation.md @@ -62,6 +62,7 @@ This section explains how to create a CodedUITest project and test the tree grid 1. Create a new WPF application or open an existing WPF application with tree grid and enable the Coded UI test in tree grid. To enable CUITs, set AutomationPeerHelper.EnableCodedUI to true and access the AutomationPeerHelper class from Syncfusion.UI.Xaml.Grid namespace as demonstrated in the following code sample. +{% capture codesnippet1 %} {% tabs %} {% highlight c# %} @@ -75,6 +76,8 @@ public MainWindow() {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} 2. Build the application and launch the .exe file from the bin folder. 3. Create a Coded UI test project as shown in the following screenshot. @@ -128,6 +131,7 @@ public MainWindow() 9. After the record has been completed, click the GenerateCode icon in CodedUITestBuilder for generate a test method, and then close the CodedUITestBuilder. You can see the generated code for cell value changed action as follows. +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} @@ -151,6 +155,8 @@ public void RecordedMethod1() {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} 10. Create an assertion to check the modified cell value. Drag the crosshair to the modified cell, and the Assertion window appears. The properties for control (Cell) is now listed in the Assertion dialog box. You can add assertion by clicking the Generate Code button in CodedUITestBuilder. diff --git a/wpf/TreeView/Getting-Started.md b/wpf/TreeView/Getting-Started.md index ae74edbb22..1dbf32e6c6 100644 --- a/wpf/TreeView/Getting-Started.md +++ b/wpf/TreeView/Getting-Started.md @@ -52,6 +52,7 @@ In order to add control manually in XAML, do the below steps, 2. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** in XAML page. 3. Declare SfTreeView control in XAML page. +{% capture codesnippet1 %} {% tabs %} {% highlight xaml %} @@ -71,6 +72,8 @@ In order to add control manually in XAML, do the below steps, {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet1 | OrderList_Indent_Level_1 }} #### Adding SfTreeView by C#. @@ -83,6 +86,7 @@ In order to add control manually in C#, do the below steps, 2. Import SfTreeView namespace **using Syncfusion.UI.Xaml.TreeView** . 3. Create SfTreeView control instance and add it to the Page. +{% capture codesnippet2 %} {% tabs %} {% highlight c# %} @@ -107,6 +111,8 @@ namespace GettingStarted {% endhighlight %} {% endtabs %} +{% endcapture %} +{{ codesnippet2 | OrderList_Indent_Level_1 }} ### Populating Nodes without data source - Unbound Mode From 2ed402167295bac0c43f55055d7784f887c4ef0d Mon Sep 17 00:00:00 2001 From: Mahalakshmi Venkatesan Date: Wed, 19 Oct 2022 11:45:51 +0530 Subject: [PATCH 3/4] modified the redirection link --- wpf/Autocomplete/Getting-Started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/wpf/Autocomplete/Getting-Started.md b/wpf/Autocomplete/Getting-Started.md index f0325fb00a..fee2e7c5b5 100644 --- a/wpf/Autocomplete/Getting-Started.md +++ b/wpf/Autocomplete/Getting-Started.md @@ -13,7 +13,7 @@ documentation: ug Refer to this [Control Dependencies](https://help.syncfusion.com/wpf/control-dependencies#sftextboxext) section to get the list of assemblies or NuGet package that needs to be added as a reference to use the control in any application. -Refer to this [How to install nuget packages](https://help.syncfusion.com/wpf/nuget-packages) documentation to find more details about installing the NuGet package in a WPF application. +Refer to this [How to install nuget packages](https://help.syncfusion.com/wpf/welcome-to-syncfusion-essential-wpf) documentation to find more details about installing the NuGet package in a WPF application. ## Creating a simple application From 0dd3645168594b0ce8b187dc16f57ce638e60a88 Mon Sep 17 00:00:00 2001 From: Mahalakshmi Venkatesan Date: Fri, 21 Oct 2022 15:28:29 +0530 Subject: [PATCH 4/4] corrected the indent issues in the ug documentation --- wpf/Chromeless-Window/Getting-Started.md | 2 +- wpf/Circular-ProgressBar/Getting-Started.md | 8 ++++---- wpf/Color-Picker-Palette/Getting-Started.md | 2 +- wpf/Gantt/Auto-Update-Hierarchy.md | 2 ++ wpf/GridSplitter/Getting-Started.md | 12 ++++++------ wpf/Linear-Gauge/Labels.md | 4 ++-- wpf/Linear-Gauge/Pointers.md | 6 +++--- wpf/Linear-Gauge/Ranges.md | 4 ++-- wpf/Linear-ProgressBar/Getting-Started.md | 14 +++++++------- wpf/PropertyGrid/CategoryEditor-support.md | 4 ++-- wpf/Range-Selector/Getting-Started.md | 2 +- wpf/Ribbon/PatternsAndPractices.md | 4 ++-- wpf/SpellChecker/custom-dictionary-support.md | 8 ++++---- wpf/TabControl/Getting-Started.md | 2 +- wpf/Tabbed-MDI-Form/Getting-Started.md | 12 ++++++------ wpf/TimePicker/Getting-Started.md | 12 ++++++------ wpf/TimeSpan-Editor/Getting-Started.md | 6 +++--- 17 files changed, 53 insertions(+), 51 deletions(-) diff --git a/wpf/Chromeless-Window/Getting-Started.md b/wpf/Chromeless-Window/Getting-Started.md index f9c09562df..3789516e50 100644 --- a/wpf/Chromeless-Window/Getting-Started.md +++ b/wpf/Chromeless-Window/Getting-Started.md @@ -66,7 +66,7 @@ The following steps help you add ChromelessWindow: xmlns:syncfusion="clr-namespace:Syncfusion.Windows.Shared;assembly=Syncfusion.Shared.WPF"> -4. Add the **Syncfusion.Windows.Shared namespace**, and inherit MainWindow from ChromelessWindow in code behind. +4. Add the **Syncfusion.Windows.Shared namespace**, and inherit MainWindow from ChromelessWindow in code behind. {% capture codesnippet2 %} {% tabs %} diff --git a/wpf/Circular-ProgressBar/Getting-Started.md b/wpf/Circular-ProgressBar/Getting-Started.md index efd08e72b2..0c894e6787 100644 --- a/wpf/Circular-ProgressBar/Getting-Started.md +++ b/wpf/Circular-ProgressBar/Getting-Started.md @@ -61,10 +61,10 @@ To add control manually in XAML, follow the given steps: To add control manually through code behind, follow the given steps: -1. Add the following required assembly references to the project: - * Syncfusion.SfProgressBar.WPF -2. Import the Circular ProgressBar namespace **using Syncfusion.UI.Xaml.ProgressBar;**. -3. Create an Circular ProgressBar instance, and add it to the window. +1. Add the following required assembly references to the project: + * Syncfusion.SfProgressBar.WPF +2. Import the Circular ProgressBar namespace **using Syncfusion.UI.Xaml.ProgressBar;**. +3. Create an Circular ProgressBar instance, and add it to the window. {% capture codesnippet2 %} {% tabs %} diff --git a/wpf/Color-Picker-Palette/Getting-Started.md b/wpf/Color-Picker-Palette/Getting-Started.md index 7bcc9c5f59..411a1e72e4 100644 --- a/wpf/Color-Picker-Palette/Getting-Started.md +++ b/wpf/Color-Picker-Palette/Getting-Started.md @@ -88,7 +88,7 @@ To add the `ColorPickerPalette` control manually in C#, follow these steps: 3. Include the required namespace and create an instance of `ColorPickerPalette` and add it to the window. -4. Declare the `ColorPickerPalette` control using C#. +4. Declare the `ColorPickerPalette` control using C#. {% capture codesnippet2 %} {% tabs %} diff --git a/wpf/Gantt/Auto-Update-Hierarchy.md b/wpf/Gantt/Auto-Update-Hierarchy.md index 527592c324..57c3883189 100644 --- a/wpf/Gantt/Auto-Update-Hierarchy.md +++ b/wpf/Gantt/Auto-Update-Hierarchy.md @@ -444,6 +444,8 @@ public class Task : NotificationObject } {% endhighlight %} +{% endcapture %} +{{ codesnippet4 | OrderList_Indent_Level_1 }} 2. Create a collection of business objects to bind it as ItemsSource of the Gantt control. diff --git a/wpf/GridSplitter/Getting-Started.md b/wpf/GridSplitter/Getting-Started.md index 93982b9534..58761da0e3 100644 --- a/wpf/GridSplitter/Getting-Started.md +++ b/wpf/GridSplitter/Getting-Started.md @@ -31,11 +31,11 @@ You can find more details about installing the NuGet package in a WPF applicatio To add the control manually in XAML, follow the given steps: -1. Add the following required assembly references to the project: +1. Add the following required assembly references to the project: * Syncfusion.SfInput.WPF * Syncfusion.SfShared.WPF -2. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page. -3. Declare the `SfGridSplitter` control in the XAML page. +2. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page. +3. Declare the `SfGridSplitter` control in the XAML page. {% capture codesnippet1 %} {% tabs %} @@ -62,11 +62,11 @@ To add the control manually in XAML, follow the given steps: To add the control manually in C#, follow the given steps: -1. Add the following required assembly references to the project: +1. Add the following required assembly references to the project: * Syncfusion.SfInput.WPF * Syncfusion.SfShared.WPF -2. Import the `SfGridSplitter` namespace **using Syncfusion.Windows.Controls.Input;**. -3. Create an `SfGridSplitter` instance, and add it to the window. +2. Import the `SfGridSplitter` namespace **using Syncfusion.Windows.Controls.Input;**. +3. Create an `SfGridSplitter` instance, and add it to the window. {% capture codesnippet2 %} {% tabs %} diff --git a/wpf/Linear-Gauge/Labels.md b/wpf/Linear-Gauge/Labels.md index c17149bdfb..b1256484a4 100644 --- a/wpf/Linear-Gauge/Labels.md +++ b/wpf/Linear-Gauge/Labels.md @@ -122,9 +122,9 @@ The label font can be customized using the [`LabelSize`](https://help.syncfusion The labels in the scale can be placed above or below the linear scale by choosing the following options available in the [`LabelPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_LabelPosition) property. The default value of `LabelPosition` property is below. -1. Above +1. Above -2. Below (Default) +2. Below (Default) {% capture codesnippet1 %} {% tabs %} diff --git a/wpf/Linear-Gauge/Pointers.md b/wpf/Linear-Gauge/Pointers.md index a929f8233c..9a80a2f34a 100644 --- a/wpf/Linear-Gauge/Pointers.md +++ b/wpf/Linear-Gauge/Pointers.md @@ -309,11 +309,11 @@ You can modify the size of symbol pointer by changing the [`SymbolPointerHeight` `SymbolPointer` in the scale can be placed above, below, or in between the scale by choosing the following options available in the [`SymbolPointerPosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearPointer.html#Syncfusion_UI_Xaml_Gauges_LinearPointer_SymbolPointerPosition) property: -1. Above +1. Above -2. Below (Default) +2. Below (Default) -3. Cross +3. Cross {% capture codesnippet1 %} {% tabs %} diff --git a/wpf/Linear-Gauge/Ranges.md b/wpf/Linear-Gauge/Ranges.md index b8a6eaca28..bb3ee5df81 100644 --- a/wpf/Linear-Gauge/Ranges.md +++ b/wpf/Linear-Gauge/Ranges.md @@ -371,8 +371,8 @@ Using the [`RangeOffset`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml. The range can be placed above or below the scale by choosing one of the following options available in the [`RangePosition`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Gauges.LinearScale.html#Syncfusion_UI_Xaml_Gauges_LinearScale_RangePosition) property: -1. Above(Default) -2. Below +1. Above(Default) +2. Below {% capture codesnippet1 %} {% tabs %} diff --git a/wpf/Linear-ProgressBar/Getting-Started.md b/wpf/Linear-ProgressBar/Getting-Started.md index eff2c09cdf..0a90c4db9a 100644 --- a/wpf/Linear-ProgressBar/Getting-Started.md +++ b/wpf/Linear-ProgressBar/Getting-Started.md @@ -29,10 +29,10 @@ The SfLinearProgressBar control can be added to a WPF application by dragging it To add control manually in XAML, follow the given steps: -1. Add the following required assembly reference to the project: +1. Add the following required assembly reference to the project: * Syncfusion.SfProgressBar.WPF -2. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page. -3. Declare the SfLinearProgressBar control in the XAML page. +2. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page. +3. Declare the SfLinearProgressBar control in the XAML page. {% capture codesnippet1 %} {% tabs %} @@ -60,11 +60,11 @@ To add control manually in XAML, follow the given steps: To add control manually through code behind, follow the given steps: -1. Add the following required assembly reference to the project: - * Syncfusion.SfProgressBar.WPF -2. Import the Linear ProgressBar namespace +1. Add the following required assembly reference to the project: + * Syncfusion.SfProgressBar.WPF +2. Import the Linear ProgressBar namespace **using Syncfusion.UI.Xaml.ProgressBar;** -3. Create an Linear Progressbar instance, and add it to the window. +3. Create an Linear Progressbar instance, and add it to the window. ![WPF Linear ProgressBar control added through code](Getting-Started_images/wpf-SfLinearProgressBar-control-added-manually.png) diff --git a/wpf/PropertyGrid/CategoryEditor-support.md b/wpf/PropertyGrid/CategoryEditor-support.md index 8e5e6261b6..a3c24381f4 100644 --- a/wpf/PropertyGrid/CategoryEditor-support.md +++ b/wpf/PropertyGrid/CategoryEditor-support.md @@ -17,7 +17,7 @@ If we want to display some related properties under the specific category, we ca For example, the `Background`, `BorderBrush` and `Foreground` are brush type properties. They will categorized under 'A-Brushes' category. ColorEdit controls will assigned as the value editor for the above properties and located in the same place. Based on the property selection, respective `ColorEdit` control will be in the view to pick the color for that property. -a) `ColorEdit` control visibility converter +a. `ColorEdit` control visibility converter {% capture codesnippet1 %} {% tabs %} @@ -55,7 +55,7 @@ public class SelectedIndexToVisibility : IValueConverter { {% endcapture %} {{ codesnippet1 | OrderList_Indent_Level_1 }} - b) Creating the CategoryEditor for the properties: + b. Creating the CategoryEditor for the properties: {% capture codesnippet2 %} {% tabs %} diff --git a/wpf/Range-Selector/Getting-Started.md b/wpf/Range-Selector/Getting-Started.md index 8dfff017bc..a407f74ef8 100644 --- a/wpf/Range-Selector/Getting-Started.md +++ b/wpf/Range-Selector/Getting-Started.md @@ -32,7 +32,7 @@ The following section explains how to create SfDateTimeRangeNavigator. * If you use VS 2012, choose Assemblies > Extensions > Syncfusion.SfChart.WPF.dll. * If you use VS 2010, choose .Net > Syncfusion.SfChart.WPF.dll. -3. Add the following namespace in your XAML page: +3. Add the following namespace in your XAML page: {% capture codesnippet1 %} {% highlight xaml %} diff --git a/wpf/Ribbon/PatternsAndPractices.md b/wpf/Ribbon/PatternsAndPractices.md index 33e31e0c73..bf97fb5192 100644 --- a/wpf/Ribbon/PatternsAndPractices.md +++ b/wpf/Ribbon/PatternsAndPractices.md @@ -293,7 +293,7 @@ ItemsSource="{Binding CustomRibbonTabs}" {{ codesnippet3 | OrderList_Indent_Level_1 }} -5.Converter class is used to set `SizeForm` for the Ribbon items and to set images. +5. Converter class is used to set `SizeForm` for the Ribbon items and to set images. #### Converter.cs @@ -526,7 +526,7 @@ End Class {{ codesnippet6 | OrderList_Indent_Level_1 }} -5.Next step is to create regions in the shell. To do this, first add the following namespace in the shell Window +5. Next step is to create regions in the shell. To do this, first add the following namespace in the shell Window {% capture codesnippet7 %} diff --git a/wpf/SpellChecker/custom-dictionary-support.md b/wpf/SpellChecker/custom-dictionary-support.md index c76399ee8f..0f316ddb7e 100644 --- a/wpf/SpellChecker/custom-dictionary-support.md +++ b/wpf/SpellChecker/custom-dictionary-support.md @@ -124,7 +124,7 @@ private void SpellCheck_ButtonClick(object sender, RoutedEventArgs e) { {% endhighlight %} {% endtabs %} {% endcapture %} -{{ codesnippet2 | OrderList_Indent_Level_1 }} +{{ codesnippet2 | OrderList_Indent_Level_2 }} N> You can add multiple `HunspellDictionary` with various culture files into the `SfSpellChecker.Dictionaries` collection. Based on the `SfSpellChecker.Culture` respective `HunspellDictionary` is used for spell check. @@ -229,7 +229,7 @@ private void SpellCheck_ButtonClick(object sender, RoutedEventArgs e) { {% endhighlight %} {% endtabs %} {% endcapture %} -{{ codesnippet4 | OrderList_Indent_Level_1 }} +{{ codesnippet4 | OrderList_Indent_Level_2 }} N> You can add multiple `IspellDictionary` with various culture files into the `SfSpellChecker.Dictionaries` collection. Based on the `SfSpellChecker.Culture` respective `IspellDictionary` is used for spell check. @@ -334,7 +334,7 @@ private void SpellCheck_ButtonClick(object sender, RoutedEventArgs e) { {% endhighlight %} {% endtabs %} {% endcapture %} -{{ codesnippet6 | OrderList_Indent_Level_1 }} +{{ codesnippet6 | OrderList_Indent_Level_2 }} N> You can add multiple `OpenOfficeDictionary` with various culture files into the `SfSpellChecker.Dictionaries` collection. Based on the `SfSpellChecker.Culture` respective `OpenOfficeDictionary` is used for spell check. @@ -451,7 +451,7 @@ private void SpellCheck_ButtonClick(object sender, RoutedEventArgs e) { {% endhighlight %} {% endtabs %} {% endcapture %} -{{ codesnippet8 | OrderList_Indent_Level_1 }} +{{ codesnippet8 | OrderList_Indent_Level_2 }} N> As custom dictionary hold extra words that is not available in standard dictionary, it is always used in conjunction with standard dictionary. diff --git a/wpf/TabControl/Getting-Started.md b/wpf/TabControl/Getting-Started.md index 55a47c551a..3e52d2079f 100644 --- a/wpf/TabControl/Getting-Started.md +++ b/wpf/TabControl/Getting-Started.md @@ -81,7 +81,7 @@ To add the [TabControl](https://www.syncfusion.com/wpf-controls/tabcontrol) cont 3. Include the required namespace and create an instance of `TabControl` and add it to the window. -4. Declare the `TabControl` control using C#. +4. Declare the `TabControl` control using C#. {% capture codesnippet2 %} {% tabs %} diff --git a/wpf/Tabbed-MDI-Form/Getting-Started.md b/wpf/Tabbed-MDI-Form/Getting-Started.md index 343c97835c..8e648d5aa8 100644 --- a/wpf/Tabbed-MDI-Form/Getting-Started.md +++ b/wpf/Tabbed-MDI-Form/Getting-Started.md @@ -38,11 +38,11 @@ The DocumentContainer control can be added to an application by dragging it from To add the control manually in XAML, follow the given steps: -1. Add the following required assembly references to the project: +1. Add the following required assembly references to the project: * Syncfusion.Tools.WPF * Syncfusion.Shared.WPF -2. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page. -3. Declare the DocumentContainer control in the XAML page. +2. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page. +3. Declare the DocumentContainer control in the XAML page. {% capture codesnippet1 %} {% tabs %} @@ -65,11 +65,11 @@ To add the control manually in XAML, follow the given steps: ## Add control manually in C\# To add the control manually in C#, follow the given steps: -1. Add the following required assembly references to the project: +1. Add the following required assembly references to the project: * Syncfusion.Tools.WPF * Syncfusion.Shared.WPF -2. Import the DocumentContainer namespace **using Syncfusion.Windows.Tools.Controls;**. -3. Create a DocumentContainer instance, and add it to the window. +2. Import the DocumentContainer namespace **using Syncfusion.Windows.Tools.Controls;**. +3. Create a DocumentContainer instance, and add it to the window. {% capture codesnippet2 %} {% tabs %} diff --git a/wpf/TimePicker/Getting-Started.md b/wpf/TimePicker/Getting-Started.md index c2a120cd29..561ce2b11a 100644 --- a/wpf/TimePicker/Getting-Started.md +++ b/wpf/TimePicker/Getting-Started.md @@ -36,11 +36,11 @@ The [WPF TimePicker](https://help.syncfusion.com/cr/wpf/Syncfusion.Windows.Contr To add the control manually in XAML, follow the given steps: -1. Add the following required assembly references to the project: +1. Add the following required assembly references to the project: * Syncfusion.SfInput.WPF * Syncfusion.SfShared.WPF -2. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page. -3. Declare the `SfTimePicker` control in the XAML page. +2. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** in the XAML page. +3. Declare the `SfTimePicker` control in the XAML page. {% capture codesnippet1 %} {% tabs %} @@ -67,11 +67,11 @@ To add the control manually in XAML, follow the given steps: To add the control manually in C#, follow the given steps: -1. Add the following required assembly references to the project: +1. Add the following required assembly references to the project: * Syncfusion.SfInput.WPF * Syncfusion.SfShared.WPF -2. Import the `SfTimePicker` namespace **using Syncfusion.Windows.Controls.Input;**. -3. Create an `SfTimePicker` instance, and add it to the window. +2. Import the `SfTimePicker` namespace **using Syncfusion.Windows.Controls.Input;**. +3. Create an `SfTimePicker` instance, and add it to the window. {% capture codesnippet2 %} {% tabs %} diff --git a/wpf/TimeSpan-Editor/Getting-Started.md b/wpf/TimeSpan-Editor/Getting-Started.md index d2d540d19e..b5f90ea4e0 100644 --- a/wpf/TimeSpan-Editor/Getting-Started.md +++ b/wpf/TimeSpan-Editor/Getting-Started.md @@ -37,11 +37,11 @@ To add the `TimeSpanEdit` 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, - * Syncfusion.Shared.WPF + * Syncfusion.Shared.WPF 3. Import Syncfusion WPF schema **http://schemas.syncfusion.com/wpf** and declare the `TimeSpanEdit` control in XAML page. -4. Declare the `TimeSpanEdit` control in XAML page. +4. Declare the `TimeSpanEdit` control in XAML page. {% capture codesnippet1 %} {% tabs %} @@ -75,7 +75,7 @@ To add the `TimeSpanEdit` control manually in C#, follow these steps: 3. Include the required namespace and create an instance of `TimeSpanEdit` and add it to the window. -4. Declare the `TimeSpanEdit` control using C#. +4. Declare the `TimeSpanEdit` control using C#. {% capture codesnippet2 %} {% tabs %}