Use resources to set foreground colour of a textbox - c#

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>

Related

DynamicResource wont change color

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

Style template for addin in WPF

I am designing a revit addin.I'm using WPF and I want to design style templates which can then be inherited by all WPF pages.I have read that I need to put the styles in app.xaml but there is no app.xaml as this is an addin.
As of now,I'm creating style templates but one template can only be used by the elements of that particular page.
I want to create a style template which every page can inherit without app.xaml.How do I do that?
If all you need is to share styles and maybe some resources you can do it without an App.xaml. In your project, create a xaml file to contain the shared styles and call it something like "MyCommonResources.xaml". It should simply contain a resource dictionary that holds the shared styles/resources. For example:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:MyAppNS">
<SolidColorBrush x:Key="Window.Background" Color="#FF202020"/>
<SolidColorBrush x:Key="MyTitleBar.Background" Color="#FF5A5A5A"/>
<SolidColorBrush x:Key="MyTitleBar.Foreground" Color="WhiteSmoke"/>
<SolidColorBrush x:Key="MyTitleBar.Disabled.Background" Color="Black"/>
<SolidColorBrush x:Key="MyTitleBar.Disabled.Foreground" Color="Gray"/>
<Style x:Key="CommandButtonStyle" TargetType="Button">
<Setter Property="MinHeight" Value="40"/>
</Style>
<Style x:Key="MyTitleBarStyle" TargetType="Label">
<Setter Property="Background" Value="{StaticResource MyTitleBar.Background}"/>
<Setter Property="Foreground" Value="{StaticResource MyTitleBar.Foreground}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinHeight" Value="34"/>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="{StaticResource MyTitleBar.Disabled.Background}"/>
<Setter Property="Foreground" Value="{StaticResource MyTitleBar.Disabled.Foreground}"/>
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
now in your xaml for the Window/Page/UserControl add a resource section and merge this dictionary in with the local...
<Window x:Class="MyAppNS.MyWPFWindow"
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:MyAppNS"
mc:Ignorable="d">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="MyCommonResources.xaml"/>
</ResourceDictionary.MergedDictionaries>
<Style x:Key="MyLocalStyle" TargetType="Button">
<Setter Property="VerticalContentAlignment" Value="Left"/>
</Style>
</ResourceDictionary>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="This is the Title"
Style="{StaticResource MyTitleBarStyle}"/>
<Button x:Name="btnOK" Grid.Row="1" Content="OK"
Style="{StaticResource CommandButtonStyle}"
Click="btnOK_Click"/>
</Grid>
</Window>
Excuse me for any typos in the above, cut & pasted it from a Winforms app I have but quickly edited it down so it wouldn't be so large and changed some names to make better sense.
Do you have a WPF project or just a WPF view in a Forms application?
Maybe this contribution will help you ->
App.XAML where are you?

"Property elements cannot be in the middle of an element's content." error in WPF application

I am using Dragablz tab control in my WPF application. Following code in my App.xaml was running fine last night but when I loaded the project today, it is showing me this error:
Property elements cannot be in the middle of an element's content.
They must be before or after the content.
<Application x:Class="MVCP.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dragablz="clr-namespace:Dragablz;assembly=Dragablz"
StartupUri="FloatingActivator.xaml">
<Application.Resources>
<ResourceDictionary>
<Style x:Key="OpenSans">
<Setter Property="TextElement.FontFamily" Value="Open Sans, /MVCP;component/Fonts/#Open Sans" />
</Style>
<ResourceDictionary.MergedDictionaries>
<!-- primary color -->
<ResourceDictionary>
<!-- include your primary palette -->
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/MaterialDesignColor.Indigo.xaml" />
</ResourceDictionary.MergedDictionaries>
<!--
include three hues from the primary palette (and the associated forecolours).
Do not rename, keep in sequence; light to dark.
-->
<SolidColorBrush x:Key="PrimaryHueLightBrush" Color="{StaticResource Primary100}"/>
<SolidColorBrush x:Key="PrimaryHueLightForegroundBrush" Color="{StaticResource Primary100Foreground}"/>
<SolidColorBrush x:Key="PrimaryHueMidBrush" Color="{StaticResource Primary500}"/>
<SolidColorBrush x:Key="PrimaryHueMidForegroundBrush" Color="{StaticResource Primary500Foreground}"/>
<SolidColorBrush x:Key="PrimaryHueDarkBrush" Color="{StaticResource Primary700}"/>
<SolidColorBrush x:Key="PrimaryHueDarkForegroundBrush" Color="{StaticResource Primary700Foreground}"/>
</ResourceDictionary>
<!-- secondary colour -->
<ResourceDictionary>
<!-- include your secondary pallette -->
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/MaterialDesignColor.Yellow.xaml" />
</ResourceDictionary.MergedDictionaries>
<!-- include a single secondary accent color (and the associated forecolour) -->
<SolidColorBrush x:Key="SecondaryAccentBrush" Color="{StaticResource Accent200}"/>
<SolidColorBrush x:Key="SecondaryAccentForegroundBrush" Color="{StaticResource Accent200Foreground}"/>
</ResourceDictionary>
<!-- Include the Dragablz Material Design style -->
<ResourceDictionary Source="pack://application:,,,/Dragablz;component/Themes/materialdesign.xaml"/>
</ResourceDictionary.MergedDictionaries>
<!-- tell Dragablz tab control to use the Material Design theme -->
<Style TargetType="{x:Type dragablz:TabablzControl}" BasedOn="{StaticResource MaterialDesignTabablzControlStyle}" />
<Style x:Key="FileItemStyle" TargetType="{x:Type ListViewItem}">
<Setter Property="Margin" Value="5,5,5,5"/>
<Setter Property="Padding" Value="0,0,0,0"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" Height="50" >
<Border x:Name="border" BorderBrush="{x:Null}" BorderThickness="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="2.5"/>
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ContentPresenter/>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>
The reason is simple: you first add style "OpenSans", then you set MergedDictionary property, then you add two more styles. To fix, just reorder like this:
<Application x:Class="MVCP.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dragablz="clr-namespace:Dragablz;assembly=Dragablz"
StartupUri="FloatingActivator.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<!-- primary color -->
<ResourceDictionary>
<!-- include your primary palette -->
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/MaterialDesignColor.Indigo.xaml" />
</ResourceDictionary.MergedDictionaries>
<!--
include three hues from the primary palette (and the associated forecolours).
Do not rename, keep in sequence; light to dark.
-->
<SolidColorBrush x:Key="PrimaryHueLightBrush" Color="{StaticResource Primary100}"/>
<SolidColorBrush x:Key="PrimaryHueLightForegroundBrush" Color="{StaticResource Primary100Foreground}"/>
<SolidColorBrush x:Key="PrimaryHueMidBrush" Color="{StaticResource Primary500}"/>
<SolidColorBrush x:Key="PrimaryHueMidForegroundBrush" Color="{StaticResource Primary500Foreground}"/>
<SolidColorBrush x:Key="PrimaryHueDarkBrush" Color="{StaticResource Primary700}"/>
<SolidColorBrush x:Key="PrimaryHueDarkForegroundBrush" Color="{StaticResource Primary700Foreground}"/>
</ResourceDictionary>
<!-- secondary colour -->
<ResourceDictionary>
<!-- include your secondary pallette -->
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/MaterialDesignColor.Yellow.xaml" />
</ResourceDictionary.MergedDictionaries>
<!-- include a single secondary accent color (and the associated forecolour) -->
<SolidColorBrush x:Key="SecondaryAccentBrush" Color="{StaticResource Accent200}"/>
<SolidColorBrush x:Key="SecondaryAccentForegroundBrush" Color="{StaticResource Accent200Foreground}"/>
</ResourceDictionary>
<!-- Include the Dragablz Material Design style -->
<ResourceDictionary Source="pack://application:,,,/Dragablz;component/Themes/materialdesign.xaml"/>
</ResourceDictionary.MergedDictionaries>
<Style x:Key="OpenSans">
<Setter Property="TextElement.FontFamily" Value="Open Sans, /MVCP;component/Fonts/#Open Sans" />
</Style>
<!-- tell Dragablz tab control to use the Material Design theme -->
<Style TargetType="{x:Type dragablz:TabablzControl}" BasedOn="{StaticResource MaterialDesignTabablzControlStyle}" />
<Style x:Key="FileItemStyle" TargetType="{x:Type ListViewItem}">
<Setter Property="Margin" Value="5,5,5,5"/>
<Setter Property="Padding" Value="0,0,0,0"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" Height="50" >
<Border x:Name="border" BorderBrush="{x:Null}" BorderThickness="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="2.5"/>
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ContentPresenter/>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Application.Resources>

Replace default WPF theme Style for all controls

I tried to replace the default style at my WPF project for all my controls.
I created a ResourceDictionary like this:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="{x:Type Button}" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Black"/>
</Style>
</ResourceDictionary>
and in my App.Xaml I wrote this:
<Application.Resources>
<ResourceDictionary >
<ResourceDictionary.MergedDictionaries >
<ResourceDictionary Source="pack://application:,,,/MYTestTheme;component/Themes/Aero.NormalColor.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Now in my MainWindow.Xaml I created a button and the style was on it.
I want to crate a new button MyButton who inherited from button
And I want every Button defined style will be on MyButton when I place it on my MainWindow.Xaml but that does not happen.
One more important thing I don't want to use BasedOn.
I was see this code at some blogas:
<Application>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source=”{ThemeDictionary MyApplication}”/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
But it's not worked!!!
Thanks
Give your key a string name:
<Style x:Key="MyButton" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Black"/>
</Style>
And add this in the App.XAML (outside your Application.Resources block):
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource MyButton}" />

Using BasedOn property with a Style defined in a different dictionary

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>

Categories