MahApps and Property Grid

Question

First of all, great thanks to MahApps. What a cool project!

I have an existing application written in WPF that I have applied the MahApps library to. I used this tutorial:

http://mahapps.com/guides/quick-start.html

However the effect on the Property Grid (Xceed) is minimal.

The combo boxes in my other windows look like this:

The property grid combo boxes still look like this (ugly!):

However clicking on a combo box shows the right MahApps style for the items. It is only the Combo Box itself (closed) that is not flat.

My knowledge on WPF is basic. Where would I start to try and fix this? Do I need to manually override the combo box template in the Property Grid?

Answer 1

in MainWindow.xaml use Controls:MetroWindow

<Controls:MetroWindow x:Name="MainApp" x:Class="AppWin.MainWindow"
                      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                      xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
                      MinHeight="700"
                      MinWidth="1024"
                      >

---

in MainWindow.xaml.cs inheritance MetroWindow

namespace AppWin
{
    public partial class MainWindow : MetroWindow
    {
  ...

---

add App.xaml following settings

    <Application x:Class="AppWin.App"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:local="clr-namespace:AppWin"
                 StartupUri="MainWindow.xaml">
        <Application.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->
                    <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                    <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
                    <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />

/*--change template color for example green.xaml--*/
                    <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/red.xaml" />

/*--change template style for example BaseDark.xaml--*/
                    <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />

                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
        </Application.Resources>
    </Application>

Answer 2

Perhaps your other combobox looks ugly because the MahApps resources is not found?

Place the mahapp resources you are using in a resource dictionary in the App.xaml file so it will be accessible for all windows. (and not place them in a resource dictionary in only one window, ie. mainwindow.xaml)

App.xaml:

<Application... >
<Application.Resources>
    <ResourceDictionary>
         <!-- My other resources -->
         <!-- ... -->

        <!-- MahApps resources -->
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseDark.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

Answer 3

The property grid overrides the styles of MahApps. You have to create a own PropertyEditor for your properties. The PropertyEditor overrides the styles of the property grid.

I know thats a lot of work, but its the only way to get the MahApps look.