The first ModernUI application (manually written) and the first modernui

The first ModernUI application (manually written) and the first modernui

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:

Open MainWindow. xaml. cs, add the using reference of ModernUI, and replace the base class of Window with ModernWindow, as shown below:

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

Select ModernUI. Light. xaml for a Light-colored topic and ModernUI. Dark. xaml for a Dark-colored topic. Do not apply the two topics at the same time.

Important: if you are using ModernUI of WPF4.0, you need to add an empty rectangle style in the workspace. This is a bug, as shown below:

This is not required in WPF4.5.

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:

The ContentRoot style ensures that the content is displayed in the correct position on the screen.

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.

ContentSource defines a page to be loaded at the beginning. In the above Code, "/Page1.xaml" will be loaded at the application startup.

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

The above is all about this article. Now you can add other groups and links to MenuLinkGroups in your application and direct them to various pages. For more information, see other chapters.