WPF TextBox Style When Disabled - wpf

I'm trying to create a simple TextBox style. I want to create a trigger to change the colors when the textbox is disabled:
<Style TargetType="{x:Type TextBox}">
<Setter Property="Background" Value="White"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="FontSize" Value="{StaticResource NormalFontSize}"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontStyle" Value="Normal"/>
<Setter Property="FontFamily" Value="{StaticResource FontFamilyName}"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="TextAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="{StaticResource listItemHighlightBackground}"/>
<Setter Property="Foreground" Value="{StaticResource disabledArrowBackground}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
When I use the trigger, the textbox disappears
What's wrong here?
Thanks

A ControlTemplate replaces the template for that control type. It looks like you're misunderstanding its usage. Before the triggers, try adding some visual objects to display, such as a border, and that will appear. Better yet, don't use a ControlTemplate at all...you only need to set a property trigger on the style, e.g:
<Style.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property = "Foreground" Value="Green"/>
</Trigger>
</Style.Triggers>

Related

How Remove Border around a DatagridTextCell that appears on VerticalAlignment = Center?

I want to display datevalues in a DataGrid, whereas the text is vertically aligned in the center of the row, and not at the top. If I change the VerticalAlignment property in the DataGridCell Style, the text is aligned correctly, but a frame appears. Setting BorderThickness to 0 does not fix this.
How can I get rid of the frame/border and also display the text in the middle of the row?
DataGrid Style
<Style x:Key="StandardTabelle" TargetType="{x:Type DataGrid}">
<Setter Property="Margin" Value="5"/>
<Setter Property="Background" Value="White"/>
<Setter Property="AlternatingRowBackground" Value="#ebecec"/>
<Setter Property="FontSize" Value="12" />
<Setter Property="RowHeight" Value="24"/>
<Setter Property="ColumnHeaderStyle" Value="{StaticResource StandardSpaltenKopf}" />
<Setter Property="CanUserAddRows" Value="False"/>
<Setter Property="CanUserDeleteRows" Value="False"/>
<Setter Property="CanUserReorderColumns" Value="False"/>
<Setter Property="CanUserResizeRows" Value="False"/>
<Setter Property="CanUserResizeColumns" Value="False"/>
<Setter Property="IsReadOnly" Value="True" />
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="RowStyle" Value="{StaticResource AusgewählteZeile}"/>
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
Style for selected Row
<Style x:Key="AusgewählteZeile" TargetType="{x:Type DataGridRow}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{StaticResource Rot}"/>
</Trigger>
</Style.Triggers>
</Style>
Style for Datecell with top alignment
<Style x:Key="DatumZelle" TargetType="DataGridCell">
<Setter Property="HorizontalContentAlignment" Value="Right"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="BorderThickness" Value="0"/>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Transparent" />
</Trigger>
</Style.Triggers>
</Style>
You could create a custom ControlTemplate:
<Style x:Key="DatumZelle" TargetType="DataGridCell">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Right" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Transparent" />
</Trigger>
</Style.Triggers>
</Style>

WPF datagrid center vertical and horizontal alignment

I have breaking my brain over this for a couple of hours now. I'm only trying to center my datagrid content vertical and horizontally. Every time something seems to work it gives other problems. My code currently is like the following:
<DataGrid.CellStyle>
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FrameworkElement.HorizontalAlignment" Value="Center"/>
<Setter Property="FrameworkElement.VerticalAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid>
<ContentPresenter HorizontalAlignment="Center" />
<ContentPresenter VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FFA1A1A1"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#FFA1A1A1"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="BorderThickness" Value="0"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.CellStyle>
<DataGrid.RowStyle>
<Style TargetType="{x:Type DataGridRow}">
<Setter Property="Height" Value="35"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="Background" Value="#FFDDDDDD"/>
<Setter Property="Foreground" Value="#FF3E3E42"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FFA1A1A1"/>
<Setter Property="Foreground" Value="#FFD1D1D1"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#FFA1A1A1"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="BorderThickness" Value="0"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.RowStyle>
With this code the text is aligned vertical and horizontally, but... There are two problems coming with this code.
1.) I can only select a row by clicking on the text. This needs to be the whole row.
2.) If I edit a column text then the vertical alignment will go from center to top. Also the textbox is only wrapped around the text.
I have tried almost every combination but it's not working. Thanks in advance!
EDIT: I got point 2 working now. If somebody knows somethings about point 1, please let me know

WPF TextBox Border when selected?

I want to make a WPF TextBox have a DarkBlue border and thickness equal to 1. I want to make the WPF have this border ( DarkBlue, thickness set to 1 ) even when the TextBox is selected.
I tried doing this task by the following code. However, it doesn't work at all. Any ideas or hints ? Any help would be greatly appreciated.
<Style x:Key="ReadOnlyLargeTextBox" TargetType="{x:Type TextBox}" >
<Setter Property="Height" Value="80"/>
<Setter Property="MaxHeight" Value="80"/>
<Setter Property="VerticalScrollBarVisibility" Value="Visible"/>
<Style.Triggers>
<Trigger Property="TextBox.IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="DarkBlue"/>
<Setter Property="BorderThickness" Value="1"/>
</Trigger>
<Trigger Property="TextBox.IsMouseOver" Value="False">
<Setter Property="BorderBrush" Value="DarkBlue"/>
<Setter Property="BorderThickness" Value="1"/>
</Trigger>
</Style.Triggers>
</Style>
P.S Note that the text box does not have an IsSelected property.
just see is this you want...
<Style x:Key="TextBoxStyle1" BasedOn="{x:Null}" TargetType="{x:Type TextBox}">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="bg" BorderBrush="#FF825E5E" BorderThickness="1">
<ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="bg" Value="DarkBlue"/>
<Setter Property="BorderThickness" TargetName="bg" Value="2"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderBrush" TargetName="bg" Value="DarkBlue"/>
<Setter Property="BorderThickness" TargetName="bg" Value="2"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I think your problem is due to having the Trigger Property value containing TextBox. You just need the name of the property.
<Style x:Key="ReadOnlyLargeTextBox" TargetType="{x:Type TextBox}">
<Setter Property="Height" Value="80"/>
<Setter Property="MaxHeight" Value="80"/>
<Setter Property="VerticalScrollBarVisibility" Value="Visible"/>
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderBrush" Value="Blue"/>
<Setter Property="BorderThickness" Value="1"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="Blue"/>
<Setter Property="BorderThickness" Value="1"/>
</Trigger>
</Style.Triggers>
</Style>
Check FocusVisualStyle property of the FrameworkElement object (ancestor of TextBox). It's purpose is to define style applied when an element is selected.
You have the same logic for when "IsMouseOver" True as well False. Change one and you should see something.

Updating the foreground of a label on window active property-WPF

I have a label which shows the name of the window. I want to update the colour of the label on the IsActive property of the window using styles and triggers so that all the labels inheriting this style should exhibit the same property. Please can anyone suggest me how?
I tried like this:
<Style TargetType="{x:Type Label}" x:Key="HeaderLabel">
<Style.Triggers>
<DataTrigger Binding="{Binding (Window.IsActive)}" Value="True">
<Setter Property="FontSize" Value="15"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
</DataTrigger>
<DataTrigger Binding="{Binding (Window.IsActive)}" Value="False">
<Setter Property="FontSize" Value="15"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
</DataTrigger>
</Style.Triggers>
</Style>
Try this binding in DataTrigger:
Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=IsActive}"
By label which shows the name of the window you mean the one on the window titlebar? Or something else?
If it's the latter, then you could set default style of the label and use only one trigger for inactive state. Also make sure you have a Window in label's datacontext. It should go like this (didn't check it):
<Style TargetType="{x:Type Label}" x:Key="HeaderLabel">
<Setter Property="FontSize" Value="15"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Style.Triggers>
<DataTrigger Binding="{Binding (Window.IsActive)}" Value="False">
<Setter Property="FontSize" Value="15"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
</DataTrigger>
</Style.Triggers>
</Style>
If you want to change titlebar, I think the easiest way would be to override Window style completely (for all windows themes).

How do I get a white WPF ComboBox DropDown arrow color?

I am trying to work out a style for a ComboBox that has a navy background with white text, so I want the drop down arrow to be white also (the xaml I have so far is below).
<Style x:Key="ComboBoxStyle" TargetType="ComboBox">
<Setter Property="Background" Value="{StaticResource headerBrush}"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderBrush" Value="{StaticResource headerBorderBrush}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="MinWidth" Value="100"/>
<Setter Property="Height" Value="21"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Padding" Value="5"/>
<Setter Property="Margin" Value="3"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
<Style x:Key="ComboBoxItemStyle" TargetType="ComboBoxItem">
<Setter Property="Background" Value="AliceBlue"/>
<Setter Property="Foreground" Value="Navy"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
</Style>
ADDED code to set the ControlTemplate?
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Path x:Name="Arrow" Fill="White"/>
</ControlTemplate>
</Setter.Value>
</Setter>
You need to edit the ControlTemplate of ComboBox and you can see a the Arrow as a Path. So change the Fill property of the Path to your desired arrow color. See sample ControlTemplate here
http://msdn.microsoft.com/en-us/library/ms752094.aspx

Resources