Textbox background color not applying from Style - wpf

My textbox is in WPF User control and style is being applied as:
<ResourceDictionary Source="pack://application:,,,/MyStyles1;component/Themes/MyTheme.xaml"/>
Style is as follows:
<Style x:Key="OutputTextBoxStyle" TargetType="TextBox">
<Setter Property="FontSize" Value="15" />
<Setter Property="Background" Value="Green" />
<Setter Property="Foreground" Value="Blue" />
<Setter Property="BorderBrush" Value="Red" />
<Setter Property="BorderThickness" Value="15" />
<Setter Property="Padding" Value="2" />
</Style>
It is noted that all properties(e.g. Foreground, BorderBrush, BorderThickness etc) are working as required. But TextBox Background is not applied.
Please assist.

There are two ways of setting this style to text boxes:
Explicitly using:
<TextBox Style="{StaticResource OutputTextBoxStyle}" />
This is the usual way when only a few text boxes in the project need this style applying to them.
Implicitly using implicit styles. To get implicit styles working your definition shouldn't contain an x:Key definition.
So you either add a second definition like this:
<Style TargetType="TextBox"
BasedOn="{StaticResource OutputTextBoxStyle}" />
or remove the x:Key definition from your existing style.
You'll need to do the former if you ever want to explicitly reference the style from somewhere else.
You can also override a specific part of the style by specifying it:
<TextBox Style="{StaticResource OutputTextBoxStyle}"
Background="{Aqua}" />
or
<TextBox Background="{Aqua}" />

EDIT: I've only now noticed that you discussed this with Chris through comments, he pretty much asked you what I asked below.
Works with me:
<Window.Resources>
<Style x:Key="OutputTextBoxStyle" TargetType="TextBox">
<Setter Property="FontSize" Value="15" />
<Setter Property="Background" Value="Green" />
<Setter Property="Foreground" Value="Blue" />
<Setter Property="BorderBrush" Value="Red" />
<Setter Property="BorderThickness" Value="15" />
<Setter Property="Padding" Value="2" />
</Style>
</Window.Resources>
<Grid>
<TextBox Text="123123" HorizontalAlignment="Left" VerticalAlignment="Top" Style="{DynamicResource OutputTextBoxStyle}"/>
</Grid>
How does your TextBox actually look like (XAML)?
I suspect you've set the Background Property which is overriding the value that's inside your Style.

Related

Avalon Dock: How to set LayoutAnchorablePaneControl's BorderBrush

I snooped the desired property and I can change it in real-time:
But I don't know what exactly to set in the code.
When I edit the XAML like this:
<dock:DockingManager x:Name="dockManager" ...>
...
<dock:DockingManager.AnchorablePaneControlStyle>
<Style TargetType="{x:Type dock:LayoutAnchorablePaneControl}">
<Setter Property="BorderBrush" Value="DarkRed"/>
</Style>
</dock:DockingManager.AnchorablePaneControlStyle>
...
I get the border color changed but the rest of behavior is unusable:
I am not get the big picture yet for what you wanna get, but I think you have to edit the Theme.xaml file containing all AvalonDock Styles and have a look there at the following style:
<Style x:Key="AvalonDock_AnchorablePaneControlStyle" TargetType="{x:Type avalonDockControls:LayoutAnchorablePaneControl}">
<Setter Property="TabStripPlacement" Value="Bottom" />
<Setter Property="Padding" Value="0" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Foreground" Value="{Binding Model.Root.Manager.Foreground, RelativeSource={RelativeSource Self}}" />
<Setter Property="Background" Value="{DynamicResource AvalonDock_BaseColor8}" />
<Setter Property="Template">...
Then you can see that the Background property is binded to a DynamicResource. You have to change the value of AvalonDock_BaseColor8 resource accordingly to what you want to achieve.

#FFFAFAFA is not valid value for the system.windows.controls.panel.background

Im just writing my own personal styles.
Everything is ok, no error inside styles.
I have following code
<Color x:Key="DialogButtonBorderBrushColor" A="255" R="177" G="177" B="177" />
<SolidColorBrush x:Key="BorderBrush" Color="{StaticResource DialogButtonBorderBrushColor}" />
There is a style for my dialog button.
<Style x:Key="DialogButtonStyle" TargetType="Button">
<Setter Property="MinWidth" Value="80" />
<Setter Property="MinHeight" Value="30" />
<Setter Property="BorderBrush" Value="{StaticResource BorderBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Background" Value="{StaticResource DialogButtonBackgroundColor1}"/>
</Style>
Im just using this dialogButtonStyle in xaml Button as a style.
But when I use this style I get following error:
#FFFAFAFA is not a valid value for the System.Windows.Controls.Panel.Background property on setter.
I have really no idea what to do with this.
Can you help me? Thanks.
<Setter Property="Background" Value="{StaticResource DialogButtonBackgroundColor1}"/>
Background property expects Brush value. Judging by the name of resource, DialogButtonBackgroundColor1 is a Color. You should use Brush resource similar to BorderBrush

Can I apply a WPF style to an element only in a certain layout?

I have a TextBlock style like this:
<Style TargetType="TextBlock" x:Key="FormLabel">
<Setter Property="Height" Value="20" />
<Setter Property="Margin" Value="10" />
<Setter Property="TextAlignment" Value="Right" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
I use it in Grid based forms, e.g:
<TextBlock Text="Code" Grid.Row="1" Grid.Column="0" Style="{StaticResource FormLabel}" />
Now instead of repeating the style name on every TextBlock in the grid, I would prefer to e.g. have a Grid style like:
<Style TargetType="Grid" x:Key="FormGrid">
<Setter Property="Width" Value="400" />
...
</Style>
Then I would, if possible, like to modify my TextBlock style to only apply to that element when it is a child element of a Grid with style FormGrid.
Is this possible, and if so, how can I achieve it?
This is indeed possible by using an implicit style within another style as a resource. Take this example:
...
<Window.Resources>
<Style x:Key="FormGrid" TargetType="Grid">
<Style.Resources>
<Style TargetType="TextBlock">
<Setter Property="Height" Value="20" />
<Setter Property="Margin" Value="10" />
<Setter Property="TextAlignment" Value="Right" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
</Style.Resources>
<Setter Property="Width" Value="400" />
</Style>
</Window.Resources>
<StackPanel>
<Grid Style="{StaticResource FormGrid}">
<TextBlock Text="This text block is styled with FormGrid TextBlock implicit style."/>
</Grid>
<TextBlock Text="This text block uses the default style."/>
</StackPanel>
...
This is not possible by out of the box WPF abilities. What you are looking here is CSS like style selectors. WPF Only allows style inheritance through BasedOn property. I am not sure if this could be an alternative, but you can define that specific TextBlock style as part of that grid resources and target to match any textblock inside of it.
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Height" Value="20" />
<Setter Property="Margin" Value="10" />
<Setter Property="TextAlignment" Value="Right" />
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
</Grid.Resources>

Code reusability in Styles

I have a style element which has minor edits and mostly repeated. How do i make it more generic - so setter properties are set within based on value versus repeating the code twice
<ResourceDictionary>
<Style x:Key="TextBlockStyleEnvironment" TargetType="{x:Type TextBlock}">
<Setter Property="Margin" Value="5,4,0,0" />
<Setter Property="FontSize" Value="8" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="FontWeight" Value="Bold" />
</Style>
<Style x:Key="TextBlockStyleLocation" TargetType="{x:Type TextBlock}">
<Setter Property="Margin" Value="5,4,0,0" />
<Setter Property="FontSize" Value="10" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="FontWeight" Value="Bold" />
</Style>
</ResourceDictionary>
As you see from the code all setter properties are same except Margin and FontSize. Also attached is the screenshot of it on rendering.
Please note - want to keep this self contained within a Style and not have declare at local level in XAML when this being consumed.
Possible values of Env can be Dev,QA,Prod and possible values of location can be TK, LN
Consuming in XAML snippet as follows:
<Grid DataContext="{....}">
<StackPanel>
<TextBlock Text="{Binding Environment}" Style="{StaticResource TextBlockStyleEnvironment}"/>
<TextBlock Text="{Binding Location}" Style="{StaticResource TextBlockStyleLocation}"/>
You can use style inheritance:
<ResourceDictionary>
<Style x:Key="BaseTextBlockStyle" TargetType="{x:Type TextBlock}">
<Setter Property="Margin" Value="5,4,0,0" />
<Setter Property="FontSize" Value="8" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="FontWeight" Value="Bold" />
</Style>
<Style x:Key="TextBlockStyleEnvironment" BasedOn="{StaticResource BaseTextBlockStyle}" TargetType="{x:Type TextBlock}" />
<Style x:Key="TextBlockStyleLocation" BasedOn="{StaticResource BaseTextBlockStyle}" TargetType="{x:Type TextBlock}">
<Setter Property="FontSize" Value="10" />
</Style>
</ResourceDictionary>
Additionally you can create attached properties and bind to those from within your control templates. This gives you the flexibility of not having to create hundreds of styles just because something minute needs to be different.
A good example of that is a button that has an image. When the mouse is over the image, the image needs to change. Typically you'd have to create a new control template/style for each button that implements that behavior. However, if you create two attached properties - NormalStateImageSource and MosueOverImageSource, you can bind to those in your control template. This allows you to have a single full blown style for the button, and later to declare individual styles for other buttons that only change the values of these attached properties.
There are few techniques in WPF world.
First, if styles are same type, it's possible to use BasedOn attribute:
<Style x:Key="GenericTextBlockStyle" TargetType="{x:Type TextBlock}">
<Setter Property="Margin" Value="5,4,0,0" />
<Setter Property="FontSize" Value="8" />
</Style>
<Style x:Key="TextBlockStyleEnvironment"
BasedOn="{StaticResource GenericTextBlockStyle}"
TargetType="{x:Type TextBlock}">
</Style>
However the BasedOn attribute can get really messy sometimes. It's also possible to do it this way, which will work for elements that are not the same type:
<Thickness x:Key="LeftBorderMargin" Top="10" />
<Style x:Key="TextBlockStyleEnvironment" TargetType="{x:Type TextBlock}">
<Setter Property="Margin" Value="{StaticResource LeftBorderMargin}" />
</Style>
It's common practice to refactor all the colors / margins out from the Style element, for reusability.

Why did my DataGrid styling break when upgrading from .NET 3.5 w/ WPF Toolkit to .NET 4.0?

I just converted a WPF project from .NET 3.5 to .NET 4.0.
I'm now using the .NET 4.0 DataGrid control rather than the WPF Toolkit DataGrid control. Functionally, everything is still working, but my styles are not applying as expected.
As you can see from the below screen captures, the alternating row formatting, padding, bold headings, etc. have stopped working.
Before (WPF Toolkit DataGrid)
After (.NET 4.0 DataGrid)
Here is my entire resource dictionary.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="DataGrid_ColumnHeaderStyle" TargetType="DataGridColumnHeader">
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="TextBlock.TextAlignment" Value="Center" />
<Setter Property="TextBlock.TextWrapping" Value="WrapWithOverflow" />
</Style>
<Style x:Key="DataGrid_CellStyle" TargetType="DataGridCell">
<Setter Property="Padding" Value="5,5,5,5" />
<Setter Property="TextBlock.TextAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridCell">
<Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="DataGrid">
<Setter Property="ColumnHeaderStyle" Value="{StaticResource DataGrid_ColumnHeaderStyle}" />
<Setter Property="CellStyle" Value="{StaticResource DataGrid_CellStyle}" />
<Setter Property="Background" Value="White" />
<Setter Property="AlternatingRowBackground" Value="#F0F0F0" />
<Setter Property="VerticalGridLinesBrush" Value="LightGray" />
<Setter Property="HeadersVisibility" Value="Column" />
<Setter Property="SelectionMode" Value="Single" />
<Setter Property="SelectionUnit" Value="FullRow" />
<Setter Property="GridLinesVisibility" Value="Vertical" />
<Setter Property="AutoGenerateColumns" Value="False" />
<Setter Property="CanUserAddRows" Value="False" />
<Setter Property="CanUserDeleteRows" Value="False" />
<Setter Property="CanUserReorderColumns" Value="True" />
<Setter Property="CanUserResizeColumns" Value="True" />
<Setter Property="CanUserResizeRows" Value="False" />
<Setter Property="CanUserSortColumns" Value="True" />
<Setter Property="IsReadOnly" Value="True" />
<Setter Property="BorderBrush" Value="#DDDDDD" />
<Setter Property="HorizontalGridLinesBrush" Value="#DDDDDD" />
<Setter Property="VerticalGridLinesBrush" Value="#DDDDDD" />
</Style>
<Style x:Key="DataGrid_FixedStyle" TargetType="DataGrid" BasedOn="{StaticResource {x:Type DataGrid}}">
<Setter Property="CanUserReorderColumns" Value="False" />
<Setter Property="CanUserResizeColumns" Value="False" />
<Setter Property="CanUserResizeRows" Value="False" />
<Setter Property="CanUserSortColumns" Value="False" />
</Style>
</ResourceDictionary>
Here is a usage example (note that the style is set to "DataGrid_FixedStyle"):
<DataGrid
Style="{StaticResource DataGrid_FixedStyle}"
Grid.Column="0" Foreground="Black"
SelectedIndex="{Binding SelectedParticipantIndex, Mode=TwoWay}"
ItemsSource="{Binding Participants}">
<DataGrid.Columns>
<DataGridTextColumn Foreground="Black" Header="Participant" Binding="{Binding ParticipantId}" />
....
</DataGrid.Columns>
</DataGrid>
Note
To make sure the resource dictionary was really being used, I added the following setter to the <Style TargetType="DataGrid">...</Style>:
<Setter Property="FontSize" Value="24" />
As you can see from the screen capture below, the font size is cartoonishly large, so the style itself is definitely not being ignored. The problem is that many of the settings are not being used or not working for some reason.
Any theory on what might have caused my styles to break?
I think I found the culprit. In my App.xaml, I apply the "Aero" theme using the following declaration:
<ResourceDictionary
Source="/PresentationFramework.Aero,
Version=3.0.0.0,
Culture=neutral,
PublicKeyToken=31bf3856ad364e35,
ProcessorArchitecture=MSIL;component/themes/aero.normalcolor.xaml" />
After that, I include the resource dictionary that performs additional styling on the DataGrid using the following declaration:
<ResourceDictionary
Source="/CommonLibraryWpf;component/ResourceDictionaries/DataGridResourceDictionary.xaml" />
If I remove the Aero theme, the custom styling applies correctly (although it loses its Aero look since I'm running this on Windows XP). This problem definitely didn't occur in WPF 3.5, though. I'm not sure what exactly has changed between .NET 3.5 and 4.0 that would make this fail.
Now I just have to figure out how to get the Aero theme and the custom DataGrid styling to work at the same time :)
Edit
Please see this followup question.

Resources