Mahapps, themes not applying to user controls

Question

I have a single MetroWindow which loads with default Color. I have an option for user to change the style. In the window I use a Content control to set the user control dynamically from code behind when initializing this window (This window is initialized from another application so there is no app.xaml and I use the resources in the window itself). The code of the main windows is below. In the User Control I am using some labels and a tab control. On the window I have an option for user to be able to change the theme choosing from available themes (as in your demo project). In all labels I use dynamics resources.

When the window loads for first time the default color is applied and all inner controls have the same theme as well. When I change the theme from window top, the window border, title, glow changes but the inner control stays the old theme (like the tab control headers etc.) I have tried everything but that does not seem to change.

Below is my code:

    <Controls:MetroWindow x:Class="Test.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"
            Title="MainWindow" Height="300" Width="300" ShowMaxRestoreButton="False" ShowMinButton="False" 
            BorderBrush="{DynamicResource HighlightBrush}"
            GlowBrush="{DynamicResource HighlightBrush}" WindowStartupLocation="CenterScreen" 
            ResizeMode="NoResize" WindowTransitionsEnabled="False" TitleCaps="True"
            BorderThickness="1">
    <Window.Resources>
  <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/Blue.xaml" />
      <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
      <ResourceDictionary Source="/Test;component/Resources/Icons.xaml" />
    </ResourceDictionary.MergedDictionaries>
  </ResourceDictionary>
</Window.Resources>

        <Border Margin="5" BorderBrush="Transparent" BorderThickness="0">
            <ContentControl x:Name="ChildContentControl"
                        HorizontalAlignment="Stretch" 
                        VerticalAlignment="Stretch">
            </ContentControl>
        </Border>
    </Controls:MetroWindow>

My code behind for the window:

public partial class MainWindow : MetroWindow
{

    public MainWindow()
    {
        InitializeComponent();
        this.Initialize();
    }

    public MainWindow(string title, UserControl childControl)
    {
        try
        {
            InitializeComponent();
            this.Title = title;
            this.ChildContentControl.Content = childControl;
        }
        catch (Exception de)
        {
            throw de;
        }
    }
}

My User control XAML

<UserControl x:Class="Test.UCDemo"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             xmlns:local="clr-namespace:Test"
             xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300">
  <UserControl.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/Test;component/Resources/Icons.xaml" />
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>


  </UserControl.Resources>
  <Border>
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
      </Grid.RowDefinitions>
      <DockPanel Grid.Row="0" LastChildFill="True">

        <Grid Height="60" DockPanel.Dock="Bottom">

          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="5"/>
          </Grid.ColumnDefinitions>

          <Button Grid.Column="1"  Margin="5,0,5,0" Width="50" Height="50"
              Style="{DynamicResource MetroCircleButtonStyle}" Command="{Binding OKCommand}">
            <Rectangle Width="20"
               Height="20"
               Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
              <Rectangle.OpacityMask>
                <VisualBrush Stretch="Fill"
                     Visual="{StaticResource appbar_check}" />
              </Rectangle.OpacityMask>
            </Rectangle>
          </Button>
        </Grid>
        <Grid DockPanel.Dock="Top" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent"
                  SnapsToDevicePixels="True"
                  ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden">

          <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="auto"></RowDefinition>
          </Grid.RowDefinitions>

          <Grid Grid.Row="0">
            <Grid.Resources>
              <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" />
            </Grid.Resources>
            <TabControl Margin="0,10,0,0" TabStripPlacement="Left"  ItemsSource="{Binding Catalogs}" SelectedItem="{Binding SelectedCatalog}">
              <TabControl.ItemTemplate>
                <!-- this is the header template-->
                <DataTemplate>
                  <TextBlock Text="{Binding Path=CaptionCat}" Foreground="{DynamicResource HighlightBrush}" FontSize="14" Margin="0,0,0,10" />
                </DataTemplate>
              </TabControl.ItemTemplate>
              <TabControl.ContentTemplate>
                <DataTemplate>
                  <ItemsControl ItemsSource="{Binding DataContext.SelectedCatalog.Books,RelativeSource={RelativeSource AncestorType={x:Type TabControl}}}">
                    <ItemsControl.ItemsPanel>
                      <ItemsPanelTemplate>
                        <WrapPanel ScrollViewer.VerticalScrollBarVisibility="Disabled"/>
                      </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                      <DataTemplate>
                        <Controls:Tile Height="125" Width="300" IsEnabled="{Binding IsEnabled}" Title="{Binding CaptionBook}"/>
                      </DataTemplate>
                    </ItemsControl.ItemTemplate>
                  </ItemsControl>
                </DataTemplate>
              </TabControl.ContentTemplate>
            </TabControl>
          </Grid>
        </Grid>

      </DockPanel>
    </Grid>
  </Border>


</UserControl>

My User control Code behind:

public partial class UCDemo : UserControl
{

    private VMDemo CatalogVM { set; get; }

    public UCDemo()
    {
        try
        {
            InitializeComponent();
            this.DataContext = new VMDemo();
        }
        catch (Exception de)
        {
            throw de;
        }
    }
}

And Finally here is how I call the window and embedded user control from hosted application code:

private void ShowDemoUI()
    {
        try
        {
            var child = new UILibrary.UCDemo();
            UILibrary.MainWindow window = new UILibrary.MainWindow("Book catalog", child);
            window.Height = 450;
            window.Width = 700;
            window.ShowDialog();
        }
        catch (Exception de)
        {
            throw de;
        }
    }

Answer 1

You need to move all your ResourceDictionaries in the App.xaml

After that I think you need to look at the Theme Manager .

Here is what I've done. In this example all my Content Control have the save Theme even if I change the Theme with a button click:

public ShellView()
{
    this.InitializeComponent();
    var theme = ThemeManager.DetectAppStyle(Application.Current);
    ThemeManager.ChangeAppStyle(Application.Current, ThemeManager.GetAccent("Blue"), theme.Item1);
}

private void Button_Click(object sender, RoutedEventArgs e)
{
    var theme = ThemeManager.DetectAppStyle(Application.Current);
    ThemeManager.ChangeAppStyle(Application.Current, ThemeManager.GetAccent("Cyan"), theme.Item1);
}

The code need to be in the code behing of your Window (In my case it's ShellView.cs) for you I will assume that it's MainWindow.cs

Here is an other example with a Custom Theme .

public ShellView()
{
    this.InitializeComponent();
    ThemeManager.AddAccent("YourAccent", new Uri("pack://application:,,,/YourAccent.xaml"));

    // Set your Custom Theme when the Window start
    var theme = ThemeManager.DetectAppStyle(Application.Current);
    ThemeManager.ChangeAppStyle(Application.Current, ThemeManager.GetAccent("YourAccent"), theme.Item1);
}

private void Button_Click(object sender, RoutedEventArgs e)
{
    // Change the Theme to Cyan on a simple button click
    var theme = ThemeManager.DetectAppStyle(Application.Current);
    ThemeManager.ChangeAppStyle(Application.Current, ThemeManager.GetAccent("Cyan"), theme.Item1);
}

Answer 2

I think you have 2 options to solve this.

• Create your Test.UCDemo as DataTemplate for the VMDemo type and pass the VMDemo for this template to the Content , so your ContentControl will automatically do the magic for you (it's just only a suggestion, i don't tested it)
• Put the resources in your Test.UCDemo too.