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.
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.
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.