Why is UserControl's style different than the rest of the App, theme?

[BirukTes]

Hello,

I have looked around as how to match UserControl's style and theme with the rest of the app, and the solution was to define in the user resources like so (this is from Mah 1.6.5, .Net4.0):

        <ResourceDictionary>
            <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/BaseLight.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedTabControl.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.CheckBox.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>

1. Why is this necessary, is it not sufficient to define merged dictionaries in the App.xaml, therefore avoid duplication?
2. I tried something like controls:UserControl but there does not seem a MahApps alternative for this control, is there an alternative to it?
   a. I would also like to understand why there is no a MahApps implementation for the UserControl?

I have looked at the demo/sample apps code but the controls seem to inherit correctly, while inside the UserControl. I would like discuss this behaviour generally, I think a lot of people might have come across it!

Similar Ref:
https://stackoverflow.com/questions/31877823/wpf-mahapps-change-style-of-window-notworking-for-elements-inside-its-usercontro

[timunie]

@BirukTes I never needed to do this in UserControl, if App.Resources is set correctly. Do yo revert the changes somewhere in a Window or is the UserControl in a different Assembly?

[BirukTes]

Thank you for the quick reply,

the UserControls are in the same assembly and they are structured like this:

I believe the previous developers could not get the buttons and others to be themed using the MahApps, therefore in this area they had created their own styles (specifically used in these UserControls). Now, when I imported all MahApps resources that were in the App.xaml, it was able to theme it to the Default MahApps but not matching the themes defined and set for the App (such as the Foreground which should have been white and not black).

Another strange thing before importing those into the UserControl was that, the MahApps button styles when applied they would use the default MetroButton with Dark mode (maybe because my system in dark) and would not use any overrides although inspection shows the correct Style resource assigned to them (button)...

Any clues would be appreciated.

[timunie]

In that case you may need to add the needed styles to RPMap.

The Flyouts can have an inversed theme if you set this. Maybe double-check this.

[BirukTes]

Hi @timunie,

Thanks again, (I have been working on your suggestions).

Like you said, it happens that the Flyout style was completely being overridden like this:

After commenting it, I did not need to merge dictionaries in the UserControls' Resources but the theme was Dark, therefore I used the Theme attribute to change it to Accent:

However, again another issue arose, where the Foreground of the controls remained Black which was from coming from the value of the SystemColors.ControlTextBrushKey, which in turn is set in the Flyout Resources which is inherited from the MainWindow upon setting the Theme to Accent. After realising this, I thought I could the replace the value of the SystemColors.ControlTextBrushKey to be IdealForegroundColor in the default theme for the App:

but it must have ended up breaking something because the Flyout Theme Resources dictionary (in debug) was empty (I think exception was thrown somewhere in MahApps), therefore resetting the flyout theme to Light mode. I selected all exception to catch it, but I think it was handled somewhere in MahApps... any ideas?

[timunie]

StaticResource will only be set once. DynamicResource can change. So for Brushes, I most often use DynamicResouece and only fallback to StaticResource rarely in situations I know it is safe to use.

See: https://learn.microsoft.com/en-us/dotnet/desktop/wpf/systems/xaml-resources-overview?view=netdesktop-7.0#static-and-dynamic-resources

[BirukTes]

@timunie, so in conclusion, I managed to control the styles of the by overriding the resources dictionary of the Flyout on its get method:

public Flyout BottomFlyout
{
    get {
        if (!_isBottomFlyoutOverriden)
        {
            _isBottomFlyoutOverriden = OverrideBottomFlyoutResources(_bottomFlyout.Resources);
        }
        return _bottomFlyout; 
    }
}

Then in OverrideBottomFlyoutResources, I am not finished yet this hence the comments (ignore it):

private bool OverrideBottomFlyoutResources(ResourceDictionary resources)
{
    //var fromColorKey = accent ? "HighlightColor" : "FlyoutColor";

    resources.BeginInit();

    var fromColor = (Color)resources["HighlightColor"];

    resources["FlyoutColor"] = fromColor;

    var newBrush = new SolidColorBrush(fromColor);
    newBrush.Freeze();
    resources["FlyoutBackgroundBrush"] = newBrush;


    resources["WindowBackgroundBrush"] = newBrush;
    resources[SystemColors.WindowBrushKey] = newBrush;

    //    fromColor = (Color)resources["IdealForegroundColor"];
    //newBrush = new SolidColorBrush(fromColor);
    //newBrush.Freeze();

    //resources["WhiteColor"] = fromColor;
    //resources["ControlBackgroundBrush"] = newBrush;
    //resources["WhiteBrush"] = newBrush;
    //resources["WhiteColorBrush"] = newBrush;
    //resources["DisabledWhiteBrush"] = newBrush;

    //resources["FlyoutForegroundBrush"] = newBrush;
    //resources["TextBrush"] = newBrush;
    //resources["LabelTextBrush"] = newBrush;
    //resources[SystemColors.ControlTextBrushKey] = newBrush;

    //// Update dark/black colours as the Dark Blue theme is closer to dark, therefore dark colors need to be changed to lighter values
    //resources["BlackBrush"] = newBrush;
    //var grayOverBrush = (SolidColorBrush)new BrushConverter().ConvertFromString("#FFAAAAAA");
    //grayOverBrush.Freeze();
    //resources["GrayHoverBrush"] = grayOverBrush;

    //if (resources.Contains("AccentBaseColor"))
    //{
    //    fromColor = (Color)resources["AccentBaseColor"];
    //}
    //else
    //{
    //    var accentColor = (Color)resources["AccentColor"];
    //    fromColor = Color.FromArgb(255, accentColor.R, accentColor.G, accentColor.B);
    //}
    //newBrush = new SolidColorBrush(fromColor);
    //newBrush.Freeze();
    //resources["HighlightColor"] = fromColor;
    //resources["HighlightBrush"] = newBrush;

    resources.EndInit();
    return true;
}

Cheers!