External Theming Library

[Jason Batchkoff]

Hey guys, I'm working with another theming library and I'm trying to make ATF and it not fight.

My only real thought was to break out the xamls into their own separate project and link them against the theming library and base the styles that way, but this seems a little cumbersome and would have issues with updates from you guys.

Do you have any suggestions to where I can make both play nicely?  Basically theme ATF's builtin controls (for things like commands and menus for example) on another WPF theme library?

[Des Griffiths]

Hi Jason,

It is entirely possible to override default ATF styles with your own using the ReferencedAssemblySkin code and we have also successfully created themed apps using ATF and 3rd party theme libs such as Mahapps.Metro.

I'm not currently available to supply you with anything this week as I'm out-of-office - but I should be able to give you a few extra pointers next week or potentially sort out a sample app with Ron or Julianne.

Des.

[Jason Batchkoff]

Ok, thanks for that bit of info.  I'll poke around more and see what I find.

[Des Griffiths]

Hi Jason -

These are the steps I used to get the SimpleDomEditorWpf working with the external Metro theme lib:

- Nuget or build Mahapps.Metro and add to the sample project.
- Add ATF's AppearanceService to the MEF type catalog
- Override the App::OnCompositionComplete() and add the following:
            var appearanceService = Container.GetExportedValueOrDefault<AppearanceService>();
            {
                var uri = new Uri("SimpleDomEditorWpf;Component/Metro/Metro.xaml", UriKind.RelativeOrAbsolute);
                appearanceService.RegisterSkin(new ReferencedAssemblySkin("Metro", uri));
            }

- Create and add a ResourceDictionary to SimpleDomEditorWpf/Metro called Metro.xaml containing the Metro styles you want:
    <ResourceDictionary.MergedDictionaries>
        <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" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
        <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseDark.xaml" />
        <ResourceDictionary Source="pack://application:,,,/SimpleDomEditorWpf;component/Metro/MetroAtf.xaml" />
        <ResourceDictionary Source="pack://application:,,,/SimpleDomEditorWpf;component/Metro/Brushes.xaml" />
        <ResourceDictionary Source="pack://application:,,,/SimpleDomEditorWpf;component/Metro/Docking.xaml" />
        <!--<ResourceDictionary Source="pack://application:,,,/SimpleDomEditorWpf;component/Metro/PropertyEditor.xaml" />
        <ResourceDictionary Source="pack://application:,,,/SimpleDomEditorWpf;component/Metro/Icons.xaml" />-->
    </ResourceDictionary.MergedDictionaries>

The additional styles for ATF specific controls can be added in the MetroAtf.xaml which is contained in the attachment.

- Finally, you'll need to create a MainWindow which is derived from MetroWindow. This class also needs to import the toolbar, menu bar and status bar viewmodels in the same way that ATF does. There is a basic version also contained in the attachment. Note: You'll also need to replace the MainWindow in the typecatalog to use this new MainWindow.

Note: I've noticed that the latest Metro theme lib uses a different version of System.Windows.Interactivity than ATF. I worked around this by replacing the version in ATF/ThirdParty (and the version reference in Atf.Gui.Wpf.csproj), but it's not ideal and we probably need to sort this out.

Regards,
Des

[Jason Batchkoff]

Ah, I see.  Part of my problem was ordering things in the resource dictionary correctly (the theming library I was using always wanted to be 'first', but I had to force it to be 'after' a lot of the other resource dicts, otherwise it would be overridden).

I noticed the ATF controls provided are fairly inconsistent about when to use themed assets.  PropertyGrid seems like it uses nothing but themed assets, but DockingPanel has a lot of fixed colors set in it directly (which is why the extra theme'd xaml for the docking panels is necessary).  

Is there a possibility that you guys will do a pass and clean up controls, like DockingPanel, to use just the SystemColor's assets, which would eliminate the need to copy paste and retheme the controls for simple color changes?

[Des Griffiths]

Yes, you're right about the inconsistencies. I have started looking at improving this, but not sure when it will be finished/integrated yet.