diff --git a/Extension/WPF-Extension/Template-Studio-Images/DI-Setup.png b/Extension/WPF-Extension/Template-Studio-Images/DI-Setup.png new file mode 100644 index 00000000..4886fa7f Binary files /dev/null and b/Extension/WPF-Extension/Template-Studio-Images/DI-Setup.png differ diff --git a/Extension/WPF-Extension/Template-Studio-Images/NuGetEntry.png b/Extension/WPF-Extension/Template-Studio-Images/NuGetEntry.png new file mode 100644 index 00000000..3fba7589 Binary files /dev/null and b/Extension/WPF-Extension/Template-Studio-Images/NuGetEntry.png differ diff --git a/Extension/WPF-Extension/Template-Studio-Images/PageService.png b/Extension/WPF-Extension/Template-Studio-Images/PageService.png new file mode 100644 index 00000000..09b3e210 Binary files /dev/null and b/Extension/WPF-Extension/Template-Studio-Images/PageService.png differ diff --git a/Extension/WPF-Extension/Template-Studio-Images/Resources.png b/Extension/WPF-Extension/Template-Studio-Images/Resources.png new file mode 100644 index 00000000..b620ef72 Binary files /dev/null and b/Extension/WPF-Extension/Template-Studio-Images/Resources.png differ diff --git a/Extension/WPF-Extension/Template-Studio-Images/WPFTemplate-6.png b/Extension/WPF-Extension/Template-Studio-Images/WPFTemplate-6.png new file mode 100644 index 00000000..15ebe129 Binary files /dev/null and b/Extension/WPF-Extension/Template-Studio-Images/WPFTemplate-6.png differ diff --git a/Extension/WPF-Extension/Template-Studio.md b/Extension/WPF-Extension/Template-Studio.md index 65487b9c..6ed2eb62 100644 --- a/Extension/WPF-Extension/Template-Studio.md +++ b/Extension/WPF-Extension/Template-Studio.md @@ -48,11 +48,17 @@ Create the Syncfusion WPF project using the Visual Studio Project Template by fo I> Visual Basic Language support is available in WPF Template Studio starting from version 25.1.35. -5. Click **Next** or navigate to the **Project type** tab, then select the desired Syncfusion WPF application type. +5. Click **Next** or navigate to the **Type** tab, then select the desired Syncfusion WPF application type. When selecting the type of template for your application, you have two options: - ![Syncfusion WPF project type selection wizard](Template-Studio-Images/WPF-5.png) + ![Syncfusion WPF project type selection wizard](Template-Studio-Images/WPF-4.png) -6. Click **Next** or navigate to the **Pages** tab to access a list of available Syncfusion WPF components you can add to the application. + **Predefined template:** Choose this option to select from 5 predefined templates, including Calendar, Contact, Outlook, Docking Manager, Spreadsheet, Tile view, and Word. By choosing one of these templates, you can create your application without needing to follow any further steps. + + ![Syncfusion WPF Predefined template wizard](Template-Studio-Images/WPFTemplate-6.png) + + **Project type:** Choose this option to select from 4 project types, including Navigation Pane, Blank, Menu Bar, and Ribbon . + +6. Click **Next** or navigate to the **Pages** tab to access a list of available Syncfusion WPF components you can add to the application. ![Syncfusion WPF pages selection wizard](Template-Studio-Images/WPF-6.png) @@ -66,28 +72,65 @@ Create the Syncfusion WPF project using the Visual Studio Project Template by fo 8. Click **Next** or navigate the **App Features** tab to select the desired application features. - ![Syncfusion WPF app features selection wizard](Template-Studio-Images/WPF-7.png) + ![Syncfusion WPF app features selection wizard](Template-Studio-Images/WPF-7.png) + +**Project Details Section** + +In the **Project Details** section, you can modify configurations and project types. Additionally, you can remove one or more controls from the selected list and remove the chosen application feature. + +![Syncfusion WPF project details selection and unselection wizard](Template-Studio-Images/WPF-8.png) + +9. Click **Create** to generate the Syncfusion WPF application. Once you've created the project, the relevant Syncfusion NuGet packages will be automatically added to your project for the chosen components. For example, if you add an **DataGrid** control, the corresponding Syncfusion NuGet packages required for that control will be installed. + + ![Syncfusion WPF project created with readme](Template-Studio-Images/WPF-9.png) - **Project Details Section** + ![NuGetEntry](Template-Studio-Images/NuGetEntry.png) - In the **Project Details** section, you can modify configurations and project types. Additionally, you can remove one or more controls from the selected list and remove the chosen application feature. + To find out which NuGet packages are needed for other WPF controls, please refer to this [documentation link](https://help.syncfusion.com/wpf/control-dependencies) for detailed information on the required NuGet packages for each control. - ![Syncfusion WPF project details selection and unselection wizard](Template-Studio-Images/WPF-8.png) +10. When you create a WPF project, the following Dependency Injection (DI) setup is added to the `App.xaml.cs` file. This setup registers services, view models, and views with the DI container, ensuring proper functionality for the selected components and service management within your application. Below, the `ConfigureServices` method in `App.xaml.cs` sets up Dependency Injection (DI) in a WPF project to manage the application's services, view models, and views. Here's a simple breakdown: -9. Click **Create** to initiate the process. This action generates the Syncfusion WPF application. The resulting Syncfusion WPF app has the necessary Syncfusion NuGet packages, styles, and rendering code specific to the chosen Syncfusion component. + ![ConfigureServices](Template-Studio-Images/DI-Setup.png) - ![Syncfusion WPF project created with readme](Template-Studio-Images/WPF-9.png) -10. The Syncfusion WPF application is configured with the latest versions of Syncfusion WPF NuGet packages, complete with the appropriate namespaces and component render code for seamless integration of Syncfusion components. + I. Application Host: + - Registers `ApplicationHostService` to manage the app's lifecycle. + + II. Specific Services: + - Registers `PageService` and `NavigationService` for handling page navigation. + + III. Views and ViewModels: + - Registers ShellWindow and ShellViewModel for the main application window. + - Registers `DataGridViewModel` and `DataGridPage` for the added component DataGrid UI. + - Registers MainViewModel and MainPage for the main page of the app. + + IV. Configuration: + - Binds the app's configuration settings to the `AppConfig` class using the settings from the configuration file. + +11. In a WPF MVVM application, the `PageService.cs` class helps manage navigation and page creation. For instance, it facilitates registering and navigating to pages associated with specific view models. Here's a simple explanation: + + I. Initialization: + - The constructor of PageService takes a serviceProvider to access registered services. + + II. Registering Pages: + - Configure `();` links the DataGridViewModel to the DataGridPage. + - Configure `();` links the MainViewModel to the MainPage. + + ![PageServices](Template-Studio-Images/PageService.png) + +12. Some components require additional resource files, such as images and other necessary files, to function correctly. For example, if you add the `PDFViewer` and `Carousel` component to your WPF project, the respective images and PDF files will be added to the Images and Assets folder in your project. - N> The .Net 6.0,.Net7.0, and .Net 8.0 option will be listed in Select a framework version when only the .Net 6.0, .Net 7.0, and .Net 8.0 SDK setup has been installed. + ![Resources](Template-Studio-Images/Resources.png) - > .NET 6.0 version is available from v19.4.0.38 and it support from Visual Studio 2022. + N> The .Net 6.0, .Net 7.0, and .Net 8.0 option will be listed in Select a framework version when only the .Net 6.0, .Net 7.0, and .Net 8.0 SDK setup has been installed. - > .NET 7.0 version is available from v20.4.0.38 and it support from Visual Studio 2022. + > | .NET Version | Available From Version | Supported from Visual Studio | + > |--------------|------------------------|-----------------------------| + > | .NET 6.0 | v19.4.0.38 | Visual Studio 2022 | + > | .NET 7.0 | v20.4.0.38 | Visual Studio 2022 | + > | .NET 8.0 | v23.2.4 | Visual Studio 2022 | - > .NET 8.0 version is available from v23.2.4 and it support from Visual Studio 2022. -11. Then, Syncfusion licensing registration required message box will be shown if you installed the trial setup or NuGet packages since Syncfusion introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/ licensing/overview#how-to-generate-syncfusion-license-key), which is shown in the licensing message box to generate and register the Syncfusion license key to your project. Refer to this [blog](https://www.syncfusion.com/blogs/post/whats-new-in-2018-volume-2.aspx) post for understanding the licensing changes introduced in Essential Studio. +13. Then, Syncfusion licensing registration required message box will be shown if you installed the trial setup or NuGet packages since Syncfusion introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/overview#how-to-generate-syncfusion-license-key), which is shown in the licensing message box to generate and register the Syncfusion license key to your project. Refer to this [blog](https://www.syncfusion.com/blogs/post/whats-new-in-2018-volume-2.aspx) post for understanding the licensing changes introduced in Essential Studio. - ![Syncfusion license registration required information dialog in Syncfusion WPF project](Template-Studio-Images/Syncfusion-Project-Template-Gallery-9.png) \ No newline at end of file + ![Syncfusion license registration required information dialog in Syncfusion WPF project](Template-Studio-Images/Syncfusion-Project-Template-Gallery-9.png) \ No newline at end of file diff --git a/Extension/WindowsForms-Extension/Template-Studio-Images/DI-Setup.png b/Extension/WindowsForms-Extension/Template-Studio-Images/DI-Setup.png new file mode 100644 index 00000000..b6f75c8f Binary files /dev/null and b/Extension/WindowsForms-Extension/Template-Studio-Images/DI-Setup.png differ diff --git a/Extension/WindowsForms-Extension/Template-Studio-Images/NuGetEntry.png b/Extension/WindowsForms-Extension/Template-Studio-Images/NuGetEntry.png new file mode 100644 index 00000000..62e87a61 Binary files /dev/null and b/Extension/WindowsForms-Extension/Template-Studio-Images/NuGetEntry.png differ diff --git a/Extension/WindowsForms-Extension/Template-Studio-Images/PageService.png b/Extension/WindowsForms-Extension/Template-Studio-Images/PageService.png new file mode 100644 index 00000000..83329f6d Binary files /dev/null and b/Extension/WindowsForms-Extension/Template-Studio-Images/PageService.png differ diff --git a/Extension/WindowsForms-Extension/Template-Studio-Images/Resources.png b/Extension/WindowsForms-Extension/Template-Studio-Images/Resources.png new file mode 100644 index 00000000..1b7b25f3 Binary files /dev/null and b/Extension/WindowsForms-Extension/Template-Studio-Images/Resources.png differ diff --git a/Extension/WindowsForms-Extension/Template-Studio-Images/WF-10.png b/Extension/WindowsForms-Extension/Template-Studio-Images/WF-10.png new file mode 100644 index 00000000..148e894e Binary files /dev/null and b/Extension/WindowsForms-Extension/Template-Studio-Images/WF-10.png differ diff --git a/Extension/WindowsForms-Extension/Template-Studio.md b/Extension/WindowsForms-Extension/Template-Studio.md index 4492bb37..4d0a5fa8 100644 --- a/Extension/WindowsForms-Extension/Template-Studio.md +++ b/Extension/WindowsForms-Extension/Template-Studio.md @@ -48,23 +48,29 @@ Create the Syncfusion WinForms project using the Visual Studio Project Template I> Visual Basic Language support is available in WinForms Template Studio starting from version 25.1.35. -5. Navigate to the **Project type** tab and choose the Syncfusion WinForms application type you want—there are four types: Blank, MenuBar, Ribbon and Tabbed Form. Click **Next** to proceed. +5. Navigate to the **Type** tab and choose the Syncfusion WinForms application type you want. When selecting the type of template for your application, you have two options: ![Syncfusion WinForms project type selection wizard](Template-Studio-Images/WF-4.png) -6. Click **Next** or navigate to the **Pages** tab to access a list of available Syncfusion WinForms components you can add to the application. + **Predefined template:** Choose this option to select from 5 predefined templates, including Calendar, Contact, Outlook, Docking Manager, and Spreadsheet. By choosing one of these templates, you can create your application without needing to follow any further steps. + + ![Syncfusion WinForms Predefined template wizard](Template-Studio-Images/WF-10.png) + + **Project type:** Choose this option to select from 4 project types, including Blank, Menu Bar, Ribbon, and Tabbed Form. + +6. Click **Next** or navigate to the **Pages** tab to access a list of available Syncfusion WinForms components you can add to the application. ![Syncfusion WinForms pages selection wizard](Template-Studio-Images/WF-6.png) To unselect the added control(s), Click ‘x’ for the corresponding control in the control list from the Project Details. - N> The Control Features option is not accessible for Blank Pages. + N> The Control Features option is not accessible for Blank Pages. -7. Click **Next** or navigate to the **Control Features** tab to view the listed features for the selected controls. From here, choose the features needed. +7. Click **Next** or navigate to the **Control Features** tab to view the listed features for the selected controls. From here, choose the features needed. ![Syncfusion WinForms control features selection wizard](Template-Studio-Images/WF-15.png) -8. Click **Next** or navigate the **App Features** tab to select the desired application features. +8. Click **Next** or navigate the **App Features** tab to select the desired application features. ![Syncfusion WinForms app features selection wizard](Template-Studio-Images/WF-7.png) @@ -74,22 +80,59 @@ Create the Syncfusion WinForms project using the Visual Studio Project Template In the **Project Details** section, modify configurations and project types. Additionally, you can remove one or more controls from the selected list and remove the chosen application feature. - ![Syncfusion WinForms project details selection and unselection wizard](Template-Studio-Images/WF-8.png) + ![Syncfusion WinForms project details selection and unselection wizard](Template-Studio-Images/WF-8.png) -9. Click **Create** to initiate the process. This action generates the Syncfusion WinForms application. The resulting Syncfusion WinForms app has the necessary Syncfusion NuGet packages, styles, and rendering code specific to the chosen Syncfusion component. +9. Click **Create** to generate the Syncfusion WinForms application. Once you've created the project, the relevant Syncfusion NuGet packages will be automatically added to your project for the chosen components. For example, if you add an **DataGrid** control, the corresponding Syncfusion NuGet packages required for that control will be installed. ![Syncfusion WinForms project created with readme](Template-Studio-Images/WF-9.png) -10. 10. The Syncfusion WinForms app is set up with the latest Syncfusion WinForms NuGet packages, including the right namespaces and rendering code. This ensures smooth integration of Syncfusion components. + ![NuGetEntry](Template-Studio-Images/NuGetEntry.png) + + To find out which NuGet packages are needed for other WinForms controls, please refer to this [documentation link](https://help.syncfusion.com/windowsforms/control-dependencies) for detailed information on the required packages for each control. + +10. When you create a WinForms project, the following Dependency Injection (DI) setup is added to the **Program.cs** file. This setup registers services, view models, and views with the DI container, ensuring proper functionality and service management within your application. Below **ConfigureServices** method in program.cs file establishes the DI setup in a WinForms project. It manages the application's services, view models, and views. Here's a detailed breakdown: + + ![DI-Setup](Template-Studio-Images/DI-Setup.png) + + I. Application Host: + - Registers **ApplicationHostService** to manage the app's lifecycle. + + II. Specific Services: + - Registers **PageService** and **NavigationService** for handling page navigation. + + III. Views and ViewModels: + - **ShellWindow:** Registers the main application window. + - **DataGridPage:** Registers the added component DataGrid on UI. + - **MainPage:** Registers the main page of the application. + + IV. Configuration: + - Binds the app's configuration settings to the **AppConfig** class using the settings from the configuration file. + +11. In a WinForms MVVM application, the **PageService.cs** class is responsible for managing navigation and page creation. It registers view models with their corresponding pages, allowing for seamless navigation within the application. +Here's a simple explanation: + + ![PageService](Template-Studio-Images/PageService.png) + + I. Initialization: + - The constructor of PageService takes an IServiceProvider to access the registered services. This allows the service to resolve and instantiate the required view models and views. + + II. Registering Pages: + - **Configure():** Registers DataGridPage with the service provider. + - **Configure():** Registers MainPage with the service provider. - N> The .Net 6.0, .Net 7.0, and .Net 8.0 option will be listed in Select a framework version when only the .Net 6.0, .Net 7.0, and .Net 8.0 SDK setup has been installed. +12. Some components require additional resource files, such as pdf and other necessary files, to function correctly. For example, if you add the **PDFViewer** and **Diagram** components to your WinForms project, the respective PDF and ico files will be added to the Resources folder in your project. - > .NET 6.0 version is available from v19.4.0.38 and it support from Visual Studio 2022. + ![Resources](Template-Studio-Images/Resources.png) + - > .NET 7.0 version is available from v20.4.0.38 and it support from Visual Studio 2022. + N> The .NET 6.0, .NET 7.0, and .NET 8.0 option will be listed in Select a framework version when only the .NET 6.0, .NET 7.0, and .NET 8.0 SDK setup has been installed. - > .NET 8.0 version is available from v23.2.4 and it support from Visual Studio 2022. + > | .NET Version | Available From Version | Supported from Visual Studio | + > |--------------|------------------------|-----------------------------| + > | .NET 6.0 | v19.4.0.38 | Visual Studio 2022 | + > | .NET 7.0 | v20.4.0.38 | Visual Studio 2022 | + > | .NET 8.0 | v23.2.4 | Visual Studio 2022 | -11. 11. If you install the trial setup or NuGet packages from nuget.org, you must register the Syncfusion license key to your application since Syncfusion introduced the licensing system from the 2018 Volume 2 (v16.2.0.41) Essential Studio release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/overview#how-to-generate-syncfusion-license-key)to generate and register the Syncfusion license key to your application. Refer to this [blog](https://www.syncfusion.com/blogs/post/whats-new-in-2018-volume-2.aspx) post for understanding the licensing changes introduced in Essential Studio. +13. If you install the trial setup or NuGet packages from nuget.org, you must register the Syncfusion license key to your application since Syncfusion introduced the licensing system from the 2018 Volume 2 (v16.2.0.41) Essential Studio release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/overview#how-to-generate-syncfusion-license-key) to generate and register the Syncfusion license key to your application. Refer to this [blog](https://www.syncfusion.com/blogs/post/whats-new-in-2018-volume-2.aspx) post for understanding the licensing changes introduced in Essential Studio. ![Syncfusion license registration required information dialog in Syncfusion WinForms project](Template-Studio-Images/Syncfusion-Project-Template-Gallery-8.png) \ No newline at end of file