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?

You could try other property grid: https://github.com/SoftFluent/SoftFluent.Windows (disclaimer: I wrote it, it's free & open source) maybe they integrate with mahapps w/o too much effort. — Simon Mourier, Sep 07 '17 at 07:10
So things being ugly are kinda of subjective but a quick suggestions is that mahapps can be combined with Material design to create some pretty awesome out of the box user experience (including the grid): http://materialdesigninxaml.net — Travis Acton, Sep 08 '17 at 16:38

Farhad Bagherlo · Answer 1 · 2017-09-12T19:03:47.697

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>

That is the basic code to make MahApps work. I did implement that in my code. My problem is not that MahApps is not working. MahApps is not styling the Combo Boxes inside the Property Grid — ceds, Sep 13 '17 at 09:09
If you have correctly defined the MahApps.Metro , you should see this in comboBox of this Properties. https://ibb.co/mZFZ1v — Farhad Bagherlo, Sep 13 '17 at 10:17
The problem described by the OP is a legitimate glitch. Even following the recipe for creating a custom editor using `DataTemplate`, as described [HERE](https://xceed.com/wp-content/documentation/xceed-toolkit-plus-for-wpf/PropertyGrid%20class.html), still exhibits the same problem. — jsanalytics, Sep 13 '17 at 21:28
jstreet, thanks for that. If it is a glitch then there is not much I can do about it I guess — ceds, Sep 14 '17 at 11:25

score 3 · Answer 2 · answered Sep 07 '17 at 09:56

3

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>

answered Sep 07 '17 at 09:56

Fredrik

2,247
18
21

I've updated the the question. This is not my problem. You can see in the new picture the correct style when the Combo Box is open. The problem is when the Combo Box is closed. The Combo Box need to be flat – ceds Sep 07 '17 at 10:12
Oh i see.. Have you defined your own – Fredrik Sep 07 '17 at 12:09
I have tried overriding the Xceed Enum Combo Box, but with no success. I'm fairly new to WPF so not sure if I did it right – ceds Sep 07 '17 at 16:02
the point is that you should not override it so that MahApp's ControlTemplate (style) for the combobox control is applied. – Fredrik Sep 07 '17 at 16:44
perhaps you could provide a small project which highlights your issue? – Fredrik Sep 07 '17 at 16:44

score 0 · Answer 3 · answered Feb 05 '18 at 14:58

0

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.

answered Feb 05 '18 at 14:58

Suplanus

1,523
16
30

MahApps and Property Grid

3 Answers3