Getting Started

In this guide, we will walk you through the process of integrating the iNKORE.UI.WPF.Modern library into your application, allowing you to bring a modern and visually appealing user interface to your WPF project. With its support for Fluent Design elements and flexible customization options, iNKORE.UI.WPF.Modern can transform your application into a visually stunning experience.

Step 1: Adjust configuration

 ​ 

Before installing package, we recommend you do some adjust to the project settings. Right click the project in your solution view, and click Properties.

For .NET Framework Projects

 ​ 

If your csproj style is legacy, yous should see this interface:

If your project have already upgraded to SDK style, you shuold be able to see this instead:

No matter what style your csproj file are, please make sure the target framework is .NET framework 4.6.2 or any higher versions.

If you are using an old framework version, the library might be unable to be loaded properly.

For .NET Core (also 6.0 later) project

 ​ 

To begin with, please make sure the framework is .NET 6.0 or higher.

Then let's focus on the Target OS Version option. We recommend you set this 10.0.18362.0 or higher to enable the theme syncing feature.

Step 2: Install package

 ​ 

Right click your project again, and click the Manage NuGet packages menu.

Then click Browse, and type inkore in the search box. All our public libraries will appear here. Then elect iNKORE.UI.WPF.Modern and click Install, select iNKORE.UI.WPF and click install again.

Then you're expected to see this package has been added to your dependencies list:

Step 3: Add theme resources

 ​ 

Open your App.xaml file in the root directory, and add the namespace declaration:

xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"

Then, in Application.Resources, create a new ResourceDictionary and add property ResourceDictionary.MergedDictionaries.

In the MergedDictionaries, add a new ui:ThemeResources and ui:XamlControlsResources instance.

Finally your App.xaml file should look like this:

<Application x:Class="StarterKit.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:StarterKit" 
             xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ui:ThemeResources/>
                <ui:XamlControlsResources/>
            </ResourceDictionary.MergedDictionaries>
            
            <!--Your other resources here (if exists)-->
            
        </ResourceDictionary>
    </Application.Resources>
</Application>

At this moment, modern themes have been sucessfully added to the project. All your controls should have a modern style now.

Step 4: Apply style to MainWindow

 ​ 

Let's apply modern styles to the main window, then. Go to MainWindow.xaml, and add the namespace declaration first:

xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"

Then let the window use modern style by apply this attached property:

ui:WindowHelper.UseModernWindowStyle="True"

Now if you run the app, you can see the window has a modern-style frame. Also you can add backdrop to your window using ui:WindowHelper.SystemBackdropType property:

ui:WindowHelper.SystemBackdropType="Mica"

Now your MainWindow.xaml should look like this:

<Window x:Class="StarterKit.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:local="clr-namespace:StarterKit" 
        xmlns:ikw="http://schemas.inkore.net/lib/ui/wpf"
        xmlns:ui="http://schemas.inkore.net/lib/ui/wpf/modern"
        ui:WindowHelper.UseModernWindowStyle="True"
        ui:WindowHelper.SystemBackdropType="Mica"
        ui:TitleBar.Height="36"
        mc:Ignorable="d"
        Title="Welcome!" Height="450" Width="800">
    
    <!--I added something here, you can add whatever you want-->
    <ikw:SimpleStackPanel VerticalAlignment="Center" Spacing="5">
        <TextBlock Text="Fluent Design is beautiful." FontSize="24" FontWeight="Bold" TextAlignment="Center"/>
        <TextBlock Text="But hey, we deserve it :-)" FontSize="20" TextAlignment="Center"/>

        <Button Content="Hello world!" HorizontalAlignment="Center" Margin="0,20,0,0"/>
    </ikw:SimpleStackPanel>
</Window>

Now hit the run button, you can see a modern window with a modern button.

Conclusion

 ​ 

Great job! You have sucessfully applied Fluent Design to your project. Now it's time exploring more!