Modern UI for WPF Open-Source Project (2): My first modern UI app

1. Get the latest version of modern UI for WPF

2. Open Vs and create a new WPF ApplicationProgramName: muitest

3. Add firstfloor. modernui. dll

4. Define modernwindow to inherit from mainwindow

Open mainwindows. XAML, add the xmlns namespace of modernui and use Mui to replace the window tag, as shown below:

<Mui: modernwindow X: class = "  Muitest. mainwindow  "  Xmlns = "  Http://schemas.microsoft.com/winfx/2006/xaml/presentation  "  Xmlns: x = " Http://schemas.microsoft.com/winfx/2006/xaml  "  Xmlns: Mui = "  Http://firstfloorsoftware.com/ModernUI  "  Title = "  Mainwindow  " Height = "  350  " Width = "  525 " > </Mui: modernwindow

Open mainwindow. XAML. CS, add a reference to modernui, and use modernwindow as the base class.

 
UsingFirstfloor. modernui. Windows. controls;Public Partial ClassMainwindow: modernwindow {..}
 

5. Open app. XAML and add the following resource dictionary reference.

<Application. Resources> <resourcedictionary. mergeddictionaries> <resourcedictionary source ="/Firstfloor. modernui; component/assets/modernui. XAML"/> <Resourcedictionary source ="/Firstfloor. modernui; component/assets/modernui. Light. XAML"/> </Resourcedictionary. mergeddictionaries> </resourcedictionary> </application. Resources>
 

Select modernui. Light. XAML as the bright style or modernui. Dark. XAML as the dark style. Do not add both.

6. Compile and run the program. You can see the following results:

7. Return to mainwindow. XAML and remove the content of <grid> </GRID>.

Note: The modernwindow. content attribute is ignored. All content is displayed by the specified page connection, as shown below:

8. Let's define the main menu. Add the following menu link group:

<Mui: modernwindow. menulinkgroups> <Mui: linkgroup displayname ="Group 1"> <Mui: linkgroup. Links> <Mui: link displayname ="Link 1"/> <Mui: link displayname ="Link 2"/> <Mui: link displayname ="Link 3"/> </Mui: linkgroup. Links> </Mui: linkgroup> </Mui: modernwindow. menulinkgroups>
 

9. Compile the remote code. You can see the following results:

10. Let's add some actual content and add a WPF user control named page1

11. Open page1.xaml and add the following content

<Grid style ="{Staticresource contentroot}"> <Textblock text ="Hello modern ui!"/> </GRID>
 

The contentroot style is used to ensure that the content can be normally displayed at the specified position on the screen.

12. Return to mainwindow. XAML and modify the first link so that it can point to page1.xaml

 
<Mui: link displayname ="Link 1"Source ="/Page1.xaml"/>
 

13. Add another contentsource feature to the modernwindow element.

<Mui: modernwindow... contentsource="/Page1.xaml"/>
 

Contentsource defines that the page is loaded at the beginning. In the preceding example,/page1.xaml is loaded at startup.

14. Compile and run the program. You can see the following results:

That's it. Now you can add another group and link to the menu link group in your application and point to different pages. For more definitions, see the next article.

Http://mui.codeplex.com/wikipage from? Title = My % 20 first % 20 modern % 20ui % 20app & referringtitle = documentation