First of all I created two themes inside resources directory
Then I added light theme and changed some dynamic resources to SecondaryColor which is black
<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Eden"
x:Class="Eden.App">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary Source="Resources/Themes/LightTheme.xaml"/>
<Style TargetType="Label">
<Setter Property="TextColor" Value="{DynamicResource SecondaryColor}" />
<Setter Property="FontFamily" Value="OpenSansRegular" />
</Style>
<Style TargetType="Button">
<Setter Property="TextColor" Value="{DynamicResource SecondaryColor}" />
<Setter Property="FontFamily" Value="OpenSansRegular" />
<Setter Property="BackgroundColor" Value="{DynamicResource SecondaryColor}" />
<Setter Property="Padding" Value="14,10" />
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
Light Theme
<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Eden.Resources.Themes.LightTheme">
<Color x:Key="PageBackgroundColor">White</Color>
<Color x:Key="NavigationBarColor">WhiteSmoke</Color>
<Color x:Key="PrimaryColor">WhiteSmoke</Color>
<Color x:Key="SecondaryColor">Black</Color>
<Color x:Key="PrimaryTextColor">Black</Color>
<Color x:Key="SecondaryTextColor">White</Color>
<Color x:Key="TertiaryTextColor">Gray</Color>
<Color x:Key="TransparentColor">Transparent</Color>
</ResourceDictionary>
But when I open app button background is white.
What I am doing wrong?
I made a test app and it works here.
This is different ,there are xaml.cs files
Added a DarkTheme.xaml ( ContentPage )
And change it to ResourceDictionary
This is how it looks in your example code
LightTheme.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiApp1.LightTheme">
<Color x:Key="PageBackgroundColor">White</Color>
<Color x:Key="NavigationBarColor">WhiteSmoke</Color>
<Color x:Key="PrimaryColor">WhiteSmoke</Color>
<Color x:Key="SecondaryColor">Black</Color>
<Color x:Key="PrimaryTextColor">Black</Color>
<Color x:Key="SecondaryTextColor">White</Color>
<Color x:Key="TertiaryTextColor">Gray</Color>
<Color x:Key="TransparentColor">Transparent</Color>
App.xaml.cs
<Application.Resources>
<ResourceDictionary>
<!--If you want to use LightTheme and DarkTheme add both-->
<ResourceDictionary Source="Resources/Themes/LightTheme.xaml"/>
<ResourceDictionary Source="Resources/Themes/DarkTheme.xaml"/>
<Style TargetType="Label">
<Setter Property="TextColor" Value="{DynamicResource SecondaryColor}" />
<Setter Property="FontFamily" Value="OpenSansRegular" />
</Style>
<Style TargetType="Button">
<Setter Property="TextColor" Value="{DynamicResource SecondaryColor}" />
<Setter Property="FontFamily" Value="OpenSansRegular" />
<Setter Property="BackgroundColor" Value="{DynamicResource SecondaryColor}" />
<Setter Property="Padding" Value="14,10" />
</Style>
</ResourceDictionary>
</Application.Resources>
Your example code is here https://github.com/borisoprit/MauiApp1
Related
I'm currently facing a really odd situation.
I have a WPF application with the following lines inside App.xaml:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary>
<local:AppBootstrapper x:Key="bootstrapper" />
</ResourceDictionary>
<ResourceDictionary Source="./Styles/MyTheme.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Then I have some dictionaries in MyTheme.xaml:
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="./UserControlStyles.xaml"/>
<ResourceDictionary Source="./WizardStyle.xaml"/>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Blue.xaml" />
<ResourceDictionary Source="./DataGridStyles.xaml"/>
<ResourceDictionary Source="./TreeViewStyles.xaml"/>
<ResourceDictionary Source="./ToggleButtonStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
Finally there is a DataGrid that I want to apply to all DataGrids of my application by default (in DataGridStyles.xaml):
<ResourceDictionary>
<Style TargetType="{x:Type DataGrid}" BasedOn="{StaticResource MaterialDesignDataGrid}">
<Setter Property="AutoGenerateColumns" Value="False" />
<Setter Property="CanUserAddRows" Value="False" />
<Setter Property="CanUserDeleteRows" Value="False" />
<Setter Property="SelectionMode" Value="Single" />
</Style>
</ResourceDictionary>
The DataGrid style is not applying for some reason, but it works if I put it directly inside MyTheme.xaml:
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="./UserControlStyles.xaml"/>
<ResourceDictionary Source="./WizardStyle.xaml"/>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Blue.xaml" />
<ResourceDictionary Source="./DataGridStyles.xaml"/>
<ResourceDictionary Source="./TreeViewStyles.xaml"/>
<ResourceDictionary Source="./ToggleButtonStyles.xaml"/>
<ResourceDictionary>
<Style TargetType="{x:Type DataGrid}" BasedOn="{StaticResource MaterialDesignDataGrid}">
<Setter Property="AutoGenerateColumns" Value="False" />
<Setter Property="CanUserAddRows" Value="False" />
<Setter Property="CanUserDeleteRows" Value="False" />
<Setter Property="SelectionMode" Value="Single" />
</Style>
</ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
Note that MaterialDesignDataGrid is defined inside MaterialDesignTheme.Defaults.xaml.
Is it an expected behavior? Am I doing something wrong?
Thank you very much for your time.
Try different settings for the build action of your DataGridStyles.xaml. I think it should work if you set it to Page.
I have a resource file that contains the colours that I want to use in my project. I've successfully used these resources to set the style of my WPF windows and controls. What I;m struggling to achieve is to use these same resources to programatically change the foreground colour of a textbox. I'm using C# and WPF.
This is my resource file and it's stored in a /Resources/Colours.xaml file.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!--Application Colour pallette-->
<SolidColorBrush x:Key="DefaultColour" Color="#FF193B60"></SolidColorBrush>
<SolidColorBrush x:Key="BaseColour" Color="#FF2E5076"></SolidColorBrush>
<SolidColorBrush x:Key="HighlightColour" Color="#FF506F93"></SolidColorBrush>
<SolidColorBrush x:Key="ForegroundColour" Color="#FFB7D7F9 "></SolidColorBrush>
<SolidColorBrush x:Key="AlternateColour" Color="#FFB7D7F9"></SolidColorBrush>
<SolidColorBrush x:Key="HeaderColour" Color="#FF02162B"></SolidColorBrush>
<Color x:Key="Media.DefaultColour">#FF193B60</Color>
<Color x:Key="Media.BaseColour">#FF2E5076</Color>
<Color x:Key="Media.HighlightColour">#FF506F93</Color>
<Color x:Key="Media.ForegroundColour">#FFB7D7F9</Color>
<Color x:Key="Media.AlternateColour">#FFB7D7F9</Color>
<Color x:Key="Media.HeaderColour">#FF02162B</Color>
I've merged the resourcedictionary in the App.xaml file
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://Application:,,,/Resources/Colours.xaml" />
</Application.Resources>
Can anyone offer guidance for me please?
Thanks in advance.
After comments
Use Style.Trigger for your Textbox:
<TextBox ...>
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Foreground" Value="{...focusedcolor...}" />
<Style.Triggers>
<Trigger Property="IsFocused" Value="False">
<Setter Property="Foreground" Value="{...unfocused...}" />
</Trigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
I have the following LAFs ("Look And Feel" ,From Java's Swing) in two different projects :
Type 1 :
Type 2 :
I would like to know how I can switch between these and other LAFs.
Thanks in advance.
The easiest, most maintainable method that I'm aware of for quickly swapping in different visual styles is to use Styles in an external ResourceDictionary. For the example below you would create a new solution folder called 'Skins', then add a new class called 'MainSkin.xaml'.
MainWindow.xaml
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Skins/MainSkin.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<TextBlock Style="{StaticResource TextBlockV1}" Text="This is some text." />
</Grid>
Skins\MainSkin.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="TextBlockV1" TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="Comic Sans MS" />
<Setter Property="FontSize" Value="14" />
</Style>
<Style x:Key="TextBlockV2" TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="FontFamily" Value="Courier New" />
<Setter Property="FontSize" Value="30" />
</Style>
<Style x:Key="TextBlockV3" TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="FontFamily" Value="Times New Roman" />
<Setter Property="FontSize" Value="8" />
</Style>
</ResourceDictionary>
Change look and feel in WPF application?
This directs you to WPF Toolkit which shows you how to set themes in the xml for a page.
I'm starting to use styles in WPF. I'm using MahApps styles as a base, which so far has been really good. I've been able to make specific modifications using the BasedOn property.
One of the simpler changes is to add a default margin so when adding controls they don't touch. It's worked really well so far until I tried to use the MetroCheckBox. With this specific control it throws an xaml parse exception: "Cannot find resource named 'MetroCheckBox'. Resource names are case sensitive."
I had a look in the source code, trying to track down this issue and coppied the name directly from the GitHub:
https://github.com/MahApps/MahApps.Metro/blob/master/MahApps.Metro/Styles/Controls.CheckBox.xaml
It's definately and all my other controls work fine:
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource MetroButton}">
<Setter Property="Margin" Value="2"/>
</Style>
<Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource MetroComboBox}">
<Setter Property="Margin" Value="2"/>
</Style>
<Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource MetroCheckBox}">
<Setter Property="Margin" Value="2"/>
</Style>
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource MetroTextBox}">
<Setter Property="Margin" Value="2"/>
</Style>
Any ideas on how to fix this?
Note, I'm including the reference to the styles like so:
<Application
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:extra="http://schemas.extra.com/ui"
xmlns:system="clr-namespace:System;assembly=mscorlib"
xmlns:visualizationToolkit="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:Primitives="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
xmlns:Custom="http://metro.mahapps.com/winfx/xaml/controls"
x:Class="MyApp.App"
StartupUri="/MyApp;component/GUI/Window/Window3.xaml"
>
<Application.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/BaseDark.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource MetroButton}">
<Setter Property="Margin" Value="2"/>
</Style>
<Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource MetroComboBox}">
<Setter Property="Margin" Value="2"/>
</Style>
<!--<Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource MetroCheckBox}">
<Setter Property="Margin" Value="2"/>
</Style>-->
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource MetroTextBox}">
<Setter Property="Margin" Value="2"/>
</Style>
<!--Chart Style-->
<Style TargetType="{x:Type chartingToolkit:Chart}
...
</Style>
<!--Top Tab Item-->
<Style x:Key="TopTabItemStyle" TargetType="{x:Type TabItem}" BasedOn="{StaticResource {x:Type TabItem}}">
...
</Style>
<!--Tab Item-->
<Style TargetType="{x:Type TabItem}" BasedOn="{StaticResource MetroTabItem}">
...
</Style>
<!-- Group Box-->
<Style TargetType="{x:Type GroupBox}" BasedOn="{StaticResource MetroGroupBox}">
<!--<Setter Property="Margin" Value="5"/>
<Setter Property="Padding" Value="5"/>
<Setter Property="Foreground" Value="{DynamicResource BlackBrush}"/>
<Setter Property="Background" Value="{DynamicResource AccentColorBrush}"/>
<Setter Property="BorderBrush" Value="{DynamicResource AccentColorBrush}"/>
<Setter Property="Custom:ControlsHelper.HeaderFontSize" Value="{DynamicResource ContentFontSize}"/>
<Setter Property="Custom:GroupBoxHelper.HeaderForeground" Value="{x:Null}"/>-->
<Setter Property="Custom:ControlsHelper.HeaderFontWeight" Value="SemiBold"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupBox}">
<Grid x:Name="GroupBoxRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,0,2" Background="Transparent" Grid.Row="0">
<ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" ContentStringFormat="{TemplateBinding HeaderStringFormat}" ContentSource="Header" TextElement.FontWeight="{TemplateBinding Custom:ControlsHelper.HeaderFontWeight}" TextElement.FontStretch="{TemplateBinding Custom:ControlsHelper.HeaderFontStretch}" TextElement.FontSize="{TemplateBinding Custom:ControlsHelper.HeaderFontSize}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True"/>
</Border>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" Background="Transparent" Grid.Row="1">
<ContentPresenter Cursor="{TemplateBinding Cursor}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Application.Resources>
You are missing the required ResourceDictionary to bring in the styles for the MahApps. You can do by including the ResourceDictionary definition in the XAML of either the XAML file where you are composing your view or you can add it to the APP.XAML file - the later will give you better performance in the short term.
For example: here is the MahApps controls xaml included with other MahApps resource dictionaries, the controls xaml is the one you need in this case:
<Application x:Class="MyApp"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Application.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.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
I ran it today and it works fine:
<Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource MetroComboBox}">
<Setter Property="Margin" Value="2"/>
</Style>
As far as I can tell I've changed nothing to do with the project or references.
However, in the last few days Visual Studio had corrupted somehow with the designer throwing exceptions left right and center, solution explorer failing to display anything (was fixed after clearing Component Model Cache) and NuGet failing to work for me to check the MahApps version.
So I set off the installer on a repair install, and now the style works fine.
I have no idea if these are connected... but they may be, so I'll leave this up as an answer in case anyone else comes across this same issue.
This can be caused if you upgrade from a version of MahApps prior to 2.0 to a more recent version.
For more details, see:
mahapps.com: Migration to v2.0 - MahApps.Metro
https://mahapps.com/docs/guides/migration-to-v2.0
The application I'm working on has 2 ResourceDictionary, DefaultStyles.xaml and CustomStyles.xaml.
Is it possible that a style in the CustomStyles dictionary uses a base style defined in the other dictionary?
DefaultStyles.xaml:
<Style x:Key="TextBlockDefaultStyle" TargetType="TextBlock">
<Setter Property="Margin" Value="4" />
</Style>
CustomStyles.xaml:
<Style x:Key="SectionTitleStyle" TargetType="TextBlock" BasedOn="{StaticResource TextBlockDefaultStyle}">
<Setter Property="FontSize" Value="16" />
</Style>
App.xaml:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Assets/Styles/DefaultStyles.xaml"/>
<ResourceDictionary Source="Assets/Styles/CustomStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
When the code runs, the following exception is thrown:
Cannot find a Resource with the Name/Key TextBlockDefaultStyle.
It works well if both styles are in the same file.
You need to reference the dictionary with the other style directly.
CustomStyles.xaml:
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="DefaultStyles.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style x:Key="SectionTitleStyle" TargetType="TextBlock" BasedOn="{StaticResource TextBlockDefaultStyle}">
<Setter Property="FontSize" Value="16" />
</Style>