ModernUI Tutorial: First ModernUI application (manually written), modernui tutorial

ModernUI Tutorial: First ModernUI application (manually written), modernui tutorial

This article takes us to create a Modern UI application from scratch. For details about how to create a Modern UI application using a project template and an item template, see the first ModernUI application (using a project template ).

1:Obtain the latest ModernUI release and decompress it to the disk, or install the Modern. WPF package through Nuget.

2:Open Visual Studio and create a WPF application project.

3:Add a reference to FirstFloor. ModernUI. dll (for WPF4 projects, you need to reference Microsoft. Windows. Shell. dll ).

4:Change MainWindow to inherit from ModernWindow.

Open MainWindow. xaml, add the xmlns declaration of ModernUI, and replace the Window element with mui: ModernWindow, as shown below:

5:Open App. xaml and add the following resource dictionary reference.

6:Compile and run the application. You can see the following open form:

7:Return MainWindow. xaml and remove the <Grid> </Grid> content.

Important: The ModernWindow. Content attribute is ignored. All pages are rendered by page links.

8:Let's define a main menu and add the following menu link group:

9:Compile and run the application, and you will see the following form:

10:Let's add some actual content. Add a WPF user control named Page1

11:Open Page1.xaml and add the following content:

12:Return to MainWindow. xaml and modify the first link so that it can be linked to Page1.xaml:

13:In addition, add a ContentSource attribute to ModernWindow to point to Page1.xaml.

14:Compile and run the application. You can see the following form:

View directory