ModernUI : Apply current theme to UserControl BackGround

Question

How can I apply the ModernUI background color (Dark/Light) to a UserControl? I successfully retrieved and applied the accent color, but I can't figure out how to apply the Dark/Light background color. By default, my UserControl's background is transparent.

Here is how I applied the accent color (this works):

<UserControl x:Class="GenkaiModern.Pages.DetailView"
             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:local="clr-namespace:GenkaiModern.Pages" 
              xmlns:mui="http://firstfloorsoftware.com/ModernUI"
             mc:Ignorable="d" 

             d:DesignHeight="399.533" d:DesignWidth="751.402" Width="720" Height="350" Background="{DynamicResource Accent}" >
</UserControl>

It might be simple, but I can't figure out how to use those resource properties.

now here the mainwindow wich have a the backround theme aplied to it(i don't even know how)

<mui:ModernWindow
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mui="http://firstfloorsoftware.com/ModernUI"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="GenkaiModern.MainWindow"
        Title="Genkai Client" IsTitleVisible="True"
        LogoData="F1 M 24.9015,43.0378L 25.0963,43.4298C 26.1685,49.5853 31.5377,54.2651 38,54.2651C 44.4623,54.2651 49.8315,49.5854 50.9037,43.4299L 51.0985,43.0379C 51.0985,40.7643 52.6921,39.2955 54.9656,39.2955C 56.9428,39.2955 58.1863,41.1792 58.5833,43.0379C 57.6384,52.7654 47.9756,61.75 38,61.75C 28.0244,61.75 18.3616,52.7654 17.4167,43.0378C 17.8137,41.1792 19.0572,39.2954 21.0344,39.2954C 23.3079,39.2954 24.9015,40.7643 24.9015,43.0378 Z M 26.7727,20.5833C 29.8731,20.5833 32.3864,23.0966 32.3864,26.197C 32.3864,29.2973 29.8731,31.8106 26.7727,31.8106C 23.6724,31.8106 21.1591,29.2973 21.1591,26.197C 21.1591,23.0966 23.6724,20.5833 26.7727,20.5833 Z M 49.2273,20.5833C 52.3276,20.5833 54.8409,23.0966 54.8409,26.197C 54.8409,29.2973 52.3276,31.8106 49.2273,31.8106C 46.127,31.8106 43.6136,29.2973 43.6136,26.197C 43.6136,23.0966 46.127,20.5833 49.2273,20.5833 Z"          
        ContentSource="/Pages/Home.xaml" d:DesignWidth="1070.985" d:DesignHeight="664.851">

    <mui:ModernWindow.MenuLinkGroups>
        <mui:LinkGroup DisplayName="Administration" GroupKey="Administration">
            <mui:LinkGroup.Links>
                <mui:Link DisplayName="Machine" Source="/Pages/NewComputerView.xaml" />
                <mui:Link DisplayName="Ecrans" Source="/Pages/Home.xaml"/>
                <mui:Link DisplayName="Imprimantes" Source="/Pages/Home.xaml" />
            </mui:LinkGroup.Links>
        </mui:LinkGroup>
        <mui:LinkGroup DisplayName="settings" GroupKey="settings">
            <mui:LinkGroup.Links>
                <mui:Link DisplayName="Application" Source="/Pages/SettingsPage.xaml" />
            </mui:LinkGroup.Links>
        </mui:LinkGroup>
        <mui:LinkGroup DisplayName="Login" GroupKey="Login">
            <mui:LinkGroup.Links>
                <mui:Link DisplayName="Login" Source="/Pages/AutentificationView.xaml" />
            </mui:LinkGroup.Links>
        </mui:LinkGroup>
    </mui:ModernWindow.MenuLinkGroups>

    <mui:ModernWindow.TitleLinks>
        <mui:Link DisplayName="Administration" Source="/Pages/NewComputerView.xaml" />
        <mui:Link DisplayName="Login" Source="/Pages/AutentificationView.xaml" />
        <mui:Link DisplayName="settings" Source="/Pages/SettingsPage.xaml" />
        <mui:Link DisplayName="help" Source="https://github.com/firstfloorsoftware/mui" />
    </mui:ModernWindow.TitleLinks>

</mui:ModernWindow>

From what i understand since in my usercontrole font take the font theme of modernui if my background wasn't trasparent it would have the rigth color ether dark/ligth its prety confusing.

StepUp · Answer 1 · 2016-07-07T13:53:18.177

If you want dynamically change color of your UI, it is appropriate to use DynamicResource. For example, deckare SolidColorBrush in App.xaml:

<Application.Resources>
    <SolidColorBrush x:Key="DynamicColor" />
</Application.Resources>

And in your control you should bind through the DynamicResource:

<UserControl x:Class=""
     <!--The code is omitted for the brevity-->        
     d:DesignHeight="600" d:DesignWidth="800">
    <Grid Name="mainGrid" Background="{DynamicResource DynamicColor}">    

    </Grid>
</UserControl>

Then to change Resource you should:

Application.Current.Resources["YourResource"] = YourNewValue;

Let me show an example how value can be changed:

private void Window_ContentRendered(object sender, EventArgs e)
{
    SolidColorBrush YourBrush = (Brush)(new BrushConverter().ConvertFrom("#455A65"));;

    // Set the value
    Application.Current.Resources["DynamicColor"] = YourBrush;         
}

private void Button_Click(object sender, RoutedEventArgs e)
{
    SolidColorBrush YourBrush = Brushes.Orange;

    // Set the value
    Application.Current.Resources["DynamicColor"] = YourBrush;
}

DynamicResources are used for changing. Where to change - this is the wish of the developer.

Modernui has a theme board where user can switch to ligth/dark background can't be hard coded "#455A65" its bind to some dynamic ressource — Zwan, Jul 07 '16 at 13:29
@Zwan please, see my updated answer. Feel free to ask any question. — StepUp, Jul 07 '16 at 13:48
have look at mainwindows code nothing call dynamic and it have background set . + my usercontrol have already the font size/color from the selectedtheme its just something with the background that is by default transparent on added view. — Zwan, Jul 07 '16 at 14:05

turkinator · Answer 2 · 2016-10-13T03:10:16.377

I dug through the FirstFloor Sample App, and found that there are a handful of DynamicResource keys used for Theme formatting. I was able to get my theme's window background color by using this:

<SolidColorBrush x:Key="BackgroundBrush" Color="{DynamicResource WindowBackgroundColor}" />

then use it somewhere, like...

<DataGrid Background="{StaticResource BackgroundBrush}" />

There are other DynamicResource keys, too, including

{DynamicResource WindowText} // for WindowForegroundColor
{DynamicResource WindowBorder} // for WindowBorderBrush
{DynamicResource WindowBackgroundColor} // for WindowBorderBackgroundBrush
{DynamicResource DefaultFontFamily} // 
{DynamicResource DefaultFontSize} //

I found these browsing the code from the MUI-master source. For more, open mui-master.sln and navigate to the project FirstFloor.ModernUI (class library) /Themes/ModernWindow.xaml and /Themes/ModernDialog.xaml

ModernUI : Apply current theme to UserControl BackGround

2 Answers2