Skip to content

Commit 987f01e

Browse files
WPF UG Updated
1 parent 00327ac commit 987f01e

File tree

5 files changed

+47
-34
lines changed

5 files changed

+47
-34
lines changed
Loading
Loading
Loading
Loading

wpf/Visual-Studio-Integration/Template-Studio.md

Lines changed: 47 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -50,74 +50,87 @@ Create the Syncfusion WPF project using the Visual Studio Project Template by fo
5050

5151
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:
5252

53-
![Syncfusion WinForms project type selection wizard](Template-Studio-Images/WPF-4.png)
53+
![Syncfusion WPF project type selection wizard](Template-Studio-Images/WPF-4.png)
5454

5555
**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.
5656

57-
![Syncfusion WinForms Predefined template wizard](Template-Studio-Images/WPFTemplate-6.png)
57+
![Syncfusion WPF Predefined template wizard](Template-Studio-Images/WPFTemplate-6.png)
5858

5959
**Project type:** Choose this option to select from 4 project types, including Navigation Pane, Blank, Menu Bar, and Ribbon .
6060

61-
1. Click **Next** or navigate to the **Pages** tab to access a list of available Syncfusion WPF components you can add to the application.
61+
6. Click **Next** or navigate to the **Pages** tab to access a list of available Syncfusion WPF components you can add to the application.
6262

63-
![Syncfusion WinForms pages selection wizard](Template-Studio-Images/WPF-Page.png)
63+
![Syncfusion WPF pages selection wizard](Template-Studio-Images/WPF-6.png)
6464

65-
To unselect the added control(s), Click ‘x’ for the corresponding control in the control list from the Project Details.
65+
To unselect the added control(s), Click ‘x’ for the corresponding control in the control list from the Project Details.
6666

67-
N> The Control Features option is not accessible for Blank Pages.
67+
N> The Control Features option is not accessible for Blank, Settings, and Master Detail Pages.
6868

69-
2. Click **Next** or navigate to the **Control Features** tab to view the listed features for the selected controls. From here, choose the features needed.
69+
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.
7070

71-
![Syncfusion WinForms control features selection wizard](Template-Studio-Images/WPF-Features.png)
71+
![Syncfusion WPF control features selection wizard](Template-Studio-Images/WPF-2.gif)
7272

73-
3. Click **Next** or navigate the **App Features** tab to select the desired application features.
73+
8. Click **Next** or navigate the **App Features** tab to select the desired application features.
7474

75-
![Syncfusion WinForms app features selection wizard](Template-Studio-Images/WPF-AppFeatures.png)
75+
![Syncfusion WPF app features selection wizard](Template-Studio-Images/WPF-7.png)
7676

77-
N> The App Features option is not accessible for .NET Framework.
77+
**Project Details Section**
7878

79-
**Project Details Section**
79+
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.
8080

81-
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.
81+
![Syncfusion WPF project details selection and unselection wizard](Template-Studio-Images/WPF-8.png)
8282

83-
![Syncfusion WinForms project details selection and unselection wizard](Template-Studio-Images/ProjectDetails.png)
83+
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.
8484

85-
4. Click **Next** or navigate to the **Pages** tab to access a list of available Syncfusion WPF components you can add to the application.
85+
![Syncfusion WPF project created with readme](Template-Studio-Images/WPF-9.png)
8686

87-
![Syncfusion WPF pages selection wizard](Template-Studio-Images/WPF-6.png)
87+
![NuGetEntry](Template-Studio-Images/NuGetEntry.png)
8888

89-
To unselect the added control(s), Click ‘x’ for the corresponding control in the control list from the Project Details.
89+
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.
9090

91-
N> The Control Features option is not accessible for Blank, Settings, and Master Detail Pages.
91+
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:
9292

93-
5. Click **Next** or navigate to the **Control Features** tab to view the listed features for the selected controls. From here, choose the features needed.
93+
![ConfigureServices](Template-Studio-Images/DI-Setup.png)
9494

95-
![Syncfusion WPF control features selection wizard](Template-Studio-Images/WPF-2.gif)
9695

97-
6. Click **Next** or navigate the **App Features** tab to select the desired application features.
96+
I. Application Host:
97+
- Registers `ApplicationHostService` to manage the app's lifecycle.
9898

99-
![Syncfusion WPF app features selection wizard](Template-Studio-Images/WPF-7.png)
99+
II. Specific Services:
100+
- Registers `PageService` and `NavigationService` for handling page navigation.
100101

101-
**Project Details Section**
102+
III. Views and ViewModels:
103+
- Registers ShellWindow and ShellViewModel for the main application window.
104+
- Registers `DataGridViewModel` and `DataGridPage` for the added component DataGrid UI.
105+
- Registers MainViewModel and MainPage for the main page of the app.
102106

103-
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.
107+
IV. Configuration:
108+
- Binds the app's configuration settings to the `AppConfig` class using the settings from the configuration file.
104109

105-
![Syncfusion WPF project details selection and unselection wizard](Template-Studio-Images/WPF-8.png)
110+
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:
106111

107-
7. 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.
112+
I. Initialization:
113+
- The constructor of PageService takes a serviceProvider to access registered services.
108114

109-
![Syncfusion WPF project created with readme](Template-Studio-Images/WPF-9.png)
115+
II. Registering Pages:
116+
- Configure `<DataGridViewModel, DataGridPage>();` links the DataGridViewModel to the DataGridPage.
117+
- Configure `<MainViewModel, MainPage>();` links the MainViewModel to the MainPage.
118+
119+
![PageServices](Template-Studio-Images/PageService.png)
110120

111-
8. 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.
121+
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.
112122

113-
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.
123+
![Resources](Template-Studio-Images/Resources.png)
114124

115-
> .NET 6.0 version is available from v19.4.0.38 and it support from Visual Studio 2022.
125+
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.
116126

117-
> .NET 7.0 version is available from v20.4.0.38 and it support from Visual Studio 2022.
127+
> | .NET Version | Available From Version | Supported from Visual Studio |
128+
> |--------------|------------------------|-----------------------------|
129+
> | .NET 6.0 | v19.4.0.38 | Visual Studio 2022 |
130+
> | .NET 7.0 | v20.4.0.38 | Visual Studio 2022 |
131+
> | .NET 8.0 | v23.2.4 | Visual Studio 2022 |
118132
119-
> .NET 8.0 version is available from v23.2.4 and it support from Visual Studio 2022.
120133

121-
9. 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.
134+
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.
122135

123-
![Syncfusion license registration required information dialog in Syncfusion WPF project](Template-Studio-Images/Syncfusion-Project-Template-Gallery-9.png)
136+
![Syncfusion license registration required information dialog in Syncfusion WPF project](Template-Studio-Images/Syncfusion-Project-Template-Gallery-9.png)

0 commit comments

Comments
 (0)