How to add Modern UI WPF style to MVVMLight application?

Question

I am trying to use MVVMLight toolkit along with Modern UI WPF to create a new WPF application using c#.

I created a new MVVMLight-based project. I installed the Modern UI WPF using Nuget.

I added the following xaml to Application.resources section in App.xaml file. Note: i added the x:Key="ModernUI" to this which did not come from the documents. But has to add it for the application to compile. Here is how my App.xaml code look like

<Application x:Class="Project.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="clr-namespace:Project.ViewModel"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:ignore="http://www.galasoft.ch/ignore"
             StartupUri="MainWindow.xaml"
             mc:Ignorable="d ignore">

    <Application.Resources>

        <!--Global View Model Locator-->
        <vm:ViewModelLocator x:Key="Locator"
                             d:IsDataSource="True" />

        <ResourceDictionary x:Key="ModernUI">
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
                <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>

    </Application.Resources>

</Application>


<ResourceDictionary x:Key="ModernUI">
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
        <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml" />
    </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

Then I change my MainWindow.xaml.cs to inheritModernWindowinstead ofWindowand added the following after theInitilizeComponent()`

Style = (Style)App.Current.Resources["BlankWindow"];

Then I slightly change my XAML code to the following

<mui:ModernWindow  x:Class="InventoryManagement.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:ignore="http://www.galasoft.ch/ignore"
        mc:Ignorable="d ignore"
        xmlns:mui="http://firstfloorsoftware.com/ModernUI"
        WindowState="Maximized"
        Title="Inventory Management"
        DataContext="{Binding Main, Source={StaticResource Locator}}">

    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Skins/MainSkin.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>

    <Grid x:Name="LayoutRoot">

        <TextBlock FontSize="36"
                   FontWeight="Bold"
                   Foreground="Purple"
                   Text="{Binding WelcomeTitle}"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"
                   TextWrapping="Wrap" />

    </Grid>
</mui:ModernWindow >

The application compiles, but I get a black screen with no content. How can I fix this issue?

Why not just use MahApps Metro. Should work independent of framework — , Feb 26 '18 at 01:19
@MickyD I would think Modern UI should also work... I just can't seems to get it to work. ModernUI look better than MahApps.Metro in my opinion. — Junior, Feb 26 '18 at 01:22
Oh I thought you were asking _“I want a _modern UI...”_. Meh. MUI is not as mature or popular as MAM — , Feb 26 '18 at 02:29

score 1 · Accepted Answer · answered Feb 26 '18 at 16:30

Your App.xaml should look like this:

<Application x:Class="Project.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="clr-namespace:Project.ViewModel"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:ignore="http://www.galasoft.ch/ignore"
             StartupUri="MainWindow.xaml"
             mc:Ignorable="d ignore">
    <Application.Resources>
        <ResourceDictionary>
            <vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True" />
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
                <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

How to add Modern UI WPF style to MVVMLight application?

1 Answers1