I am using the latest version of WPF Toolkit. I am trying to style an AutoCompleteBox and I can't seem to get the "IsFocused" trigger to work. Basically I want it to behave like my TextBox style so I made one for the AutoCompleteBox. I even tried assigning my TextBox style to the TextBoxStyle property of the AutoCompleteBox and I still never see the IsFocused trigger fire.
I did try playing around in the code behind and noticed that if I override OnGotFocus and OnLostFocus those never get called. But if I wire some event handlers to the GotFocus and LostFocus events, THEN I finally see something happen. If wiring to the events is the only way to see the IsFocused change then that seems like an ugly hack. Is there some work around for this or something I should do different?
My TexBox Style
<Style TargetType="TextBox" x:Key="TextBoxStyle">
<Setter Property="Background" Value="{StaticResource TextBoxBackground}"/>
<Setter Property="Foreground" Value="{StaticResource Foreground}"/>
<Setter Property="CaretBrush" Value="{StaticResource Foreground}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<ScrollViewer x:Name="PART_ContentHost" Margin="1"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="{StaticResource TextBoxBackgroundSelected}"/>
</Trigger>
<Trigger Property="IsFocused" Value="true">
<Setter Property="Background" Value="{StaticResource TextBoxBackgroundSelected}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My AutoCompleteBox Style
<Style TargetType="WpfToolkitInput:AutoCompleteBox" x:Key="AutoCompleteBoxStyle">
<Setter Property="Background" Value="{StaticResource TextBoxBackground}"/>
<Setter Property="Foreground" Value="{StaticResource Foreground}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="TextBoxStyle" Value="{StaticResource TextBoxStyle}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="{StaticResource TextBoxBackgroundSelected}"/>
</Trigger>
<Trigger Property="IsFocused" Value="true">
<Setter Property="Background" Value="{StaticResource TextBoxBackgroundSelected}"/>
</Trigger>
</Style.Triggers>
Any ideas?
Thank you for your time!
I was unsuccessful in finding an elegant solution to the problem. I ended up inheriting from AutoCompleteBox and performing my logic with the event handlers.
public class AutoCompleteTextBox : AutoCompleteBox
...
public AutoCompleteTextBox()
{
// Register the event handler for GotFocus.
base.GotFocus += this.AutoCompleteTextBoxGotFocus;
// Register the event handler for LostFocus.
base.LostFocus += this.AutoCompleteTextBoxLostFocus;
}
Nothing fancy here. I just made my own type. The only thing I do is wire up the got and lost focused event handlers in the constructor. I'm not sure why but the IsFocused trigger does not pick up these events. Also, if you try to override these: "OnGotFocus" or "OnLostFocus", they don't work either. So the only way I could find if the AutoCompleteBox is focused is to register directly to the event. If someone comes across this in the future and has a better way, please comment.
Related
Problem domain: In my WPF application, I change background of lot of UI controls like Button or ListItems dynamically based on data they contain. The background is changed either when the control is loaded or based on use action/data received.
Problem statement: If the background is too dark (Green/Blue) I want to set the foreground to white else black.
Constraints: I have a big application and performance is a major concern. That's why I am hesitant to use converters and am looking for some xaml/style trigger based solutions as this is just a condition based issue.
Solutions tried: To keep it simple, I am explaining what I tried for a simple wpf button:
<UserControl.Resources>
<Style x:Key="NoChromeButton" TargetType="{x:Type Button}">
<Setter Property="Background" Value="{Binding Background}"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="White"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="Chrome"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="true"
HorizontalAlignment="Stretch">
<TextBlock
Text="{Binding RelativeSource={RelativeSource TemplatedParent},Path=Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
Background="{Binding RelativeSource={RelativeSource TemplatedParent},Path=Background}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Style="{StaticResource MyTextBlockStyle}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Black"/>
</Trigger>
<Trigger Property="Background" Value="White">
<Setter Property="Foreground" Value="Aqua"/>
</Trigger>
<Trigger Property="Background" Value="Transparent">
<Setter Property="Foreground" Value="BlueViolet"/>
</Trigger>
<Trigger Property="Background" Value="Green">
<Setter Property="Foreground" Value="Blue"/>
</Trigger>
<Trigger Property="Background" Value="Yellow">
<Setter Property="Foreground" Value="Red"/>
</Trigger>
<Trigger Property="Background" Value="Red">
<Setter Property="Foreground" Value="Yellow"/>
</Trigger>
<Trigger Property="Background" Value="Black">
<Setter Property="Foreground" Value="DarkSeaGreen"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style x:key="MyTextBlockStyle" TargetType="TextBlock">
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontStyle" Value="Italic"/>
<Style.Triggers>
<Trigger Property="Background" Value="White">
<Setter Property="Foreground" Value="Aqua"/>
</Trigger>
<Trigger Property="Background" Value="Transparent">
<Setter Property="Foreground" Value="BlueViolet"/>
</Trigger>
<Trigger Property="Background" Value="Green">
<Setter Property="Foreground" Value="Blue"/>
</Trigger>
<Trigger Property="Background" Value="Yellow">
<Setter Property="Foreground" Value="Red"/>
</Trigger>
<Trigger Property="Background" Value="Red">
<Setter Property="Foreground" Value="Yellow"/>
</Trigger>
<Trigger Property="Background" Value="Black">
<Setter Property="Foreground" Value="DarkSeaGreen"/>
</Trigger>
</Style>
</UserControl.Resources>
When button is created in the XAML:
<Button Content="{Binding Name}" Style="{StaticResource NoChromeButton}"/>
Also, I would like to point out a couple of things in the above style:
If I would have used ContentPresenter instead of TextBlock inside the Grid named Chrome, background property was not set on the ContentPresenter and when I snooped (http://snoopwpf.codeplex.com/) the UI, I found that the ContentPresenter has TextBlock whose Background was always set to Default and hence no styletriggers were applied to the TextBlock. Also, this TextBlock's background valuesource is Default.
On the other hand, when I use TextBlock directly inside the Grid named Chrome, I can set its background explicitly to Grid's Background which is set to Button's Background. Snooping reveals that now TextBlock's Background ValueSource is ParentTemplate.
Button picks up MyTextBlockStyle while displaying its content.
Style triggers for Button or TextBlock were never triggered unless I did mouse over the button which changes the button's background to Black and propagates this value down to TextBlock background changing the TextBlock's foreground color to DarkSeaGreen.
Also, changing the button's background in snoop utility while application is running, triggers the Style Triggers.
Questions:
Why none of the Style triggers work for Background property whereas they work for IsMouseOver property?
What I am doing wrong?
Any solution for this?
I found the solution to my problem.
TextBlock does not derive from Control. Any text shown on UI by any control internally uses TextBlock to represent the textual content. If TextBlock style is set using the following in ResourceDictionary:
<Style TargetType="TextBlock">
<Setter Property="FontFamily" Value="Arial" />
<Setter Property="FontSize" Value="12" />
<Setter Property="FontStyle" Value="Normal" />
</Style>
Any control that represents text will have this style (since no key is assigned to this style which implies that all TextBlock will get it by default) unless the control's template override the TextBlock's default style which can be done as follows:
<Button Grid.Column="1" Style="{StaticResource NoChromeButton}">
<TextBlock Style="{x:Null}" Text="abc" FontFamily="Segoe UI Symbol"/>
</Button>
This simple setting has resolved most of the issues we have with dynamic foreground color changing.
I have come accross a very strange behavior with the DataGrid. I have following Trigger on the DataGridRow
<Style TargetType="{x:Type DataGridRow}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{StaticResource SelectionBackgroundBrush}"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
Initially when the row is selected, I get the behavior from the above trigger. However, after selection, if the DataGrid loses focus (say for example I click some other button on window) the Foreground property loses its value, but the background remains as specified in the trigger. Has anyone ever come accross this behavior, or there is some problem with my code above (or elsewhere in my applicaion for that matter). Any workarounds for the above issue ?
I've used DataGridCell instead of DataGridRow and it works for me
<Style TargetType="{x:Type DataGridCell}">
<Style.Triggers>
<Trigger Property="DataGridCell.IsSelected" Value="True">
<Setter Property="BorderBrush" Value="#CCDAFF" />
<Setter Property="Background" Value="#3399ff"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
Hope it helps someone!
It almost gets me mad in recent days. I have a textbox and the style in xaml file.
But the style without a control template cannot take effect on textbox. Whereas, a control template works, but control template seems to overwrite the textbox totally, the default behaviors loses of textbox such as editing, inputing or selecting...
Here is content of xaml with the control template:
<Style TargetType="{x:Type TextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border Name="tbBorder" Background="White" BorderThickness="0.6" BorderBrush="#B9B9B9">
<ContentPresenter/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="true">
<Setter Property="BorderBrush" Value="#4D90FE" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" Value="#4D90FE" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And here is the simple style which does not work at all,
<Style TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="IsFocused" Value="true">
<Setter Property="BorderBrush" Value="#4D90FE" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" Value="#4D90FE" />
</Trigger>
</Style.Triggers>
</Style>
Thanks!
update: the entire textbox's code snipt:
<TextBox Height="23" HorizontalAlignment="Left" Margin="114,53,0,0" Name="textBox1" VerticalAlignment="Top" Width="150" Text="{Binding Path=TraderAccount, Mode=OneWayToSource, NotifyOnValidationError=True}" BorderBrush="#FFB9B9B9" BorderThickness="1" >
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="IsFocused" Value="true">
<Setter Property="BorderBrush" Value="Red" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
The style setter is working for me but the issue I see is that the controls animations are animating away the style that's just been set.
You may want to extract the original control template and redefine that rather than completely redefining it. As far as I know The textbox control is more complex than just a border with a content presenter (I've never extracted the control template for it though!) and its likely to have a couple of borders that work to give it all it's states etc
You can use Blend to do this - in the absence of Blend there is the MSDN resource for control templates and styles:
http://msdn.microsoft.com/en-us/library/aa970773.aspx
Edit:
For starters it looks to me like you are missing the content 'PART' in your redefined template
<ScrollViewer Margin="0" x:Name="PART_ContentHost" />
Edit 2:
You are saying it doesn't work... this works for me on WPF using .NET Framework 4.0 - I changed the border colour to 'Red' instead to make sure I could see the effect and it definitely works, aside from the red fading immediately because the controls visual state is changed by the Visual State Manager (which is why you need to edit the control template and change the visual states)
<TextBox>
<TextBox.Style>
<Style TargetType="TextBox">
<Style.Triggers>
<Trigger Property="IsFocused" Value="true">
<Setter Property="BorderBrush" Value="Red" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
When you hover over the box, you get a red border which immediately fades
Does this XAML not work for you at all??
You did not post TextBox code but I assume (it happened to me too) that you simply forgot to set BorderThickness of your textbox:
<TextBox BorderThickness="4">
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="IsFocused" Value="true">
<Setter Property="BorderBrush" Value="#4D90FE" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" Value="#4D90FE" />
</Trigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
Your style does work, set a property like Background in your style without the template and you will see that it does get applied. However, like someone else mentioned, the reason you do not see any changes is because of animation in the default WPF control template for TextBox (Animation values always take precedence over local values, setters and triggers). When you redefine the control template, those animations are no longer there and so your example works. What you could do is take the default TextBox template and modify it to suit your purposes (can be found here: http://msdn.microsoft.com/en-us/library/cc645061%28VS.95%29.aspx).
I try to Bind a DataGridRow Trigger to set the background to red if my item is critical. Otherwise, I want the AlternatingRowBackground. Here is what I have so far:
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding IsCritical}" Value="True">
<Setter Property="Background" Value="Red" />
</DataTrigger>
</ControlTemplate.Triggers>
It works fine, but it disable the AlternatingRowBackground (I read somewhere that it's normal). So I want to do it manually and set the row background myself with that :
<Style.Triggers>
<Trigger Property="AlternationIndex" Value="0">
<Setter Property="Background" Value="White" />
</Trigger>
<Trigger Property="AlternationIndex" Value="1">
<Setter Property="Background" Value="WhiteSmoke" />
</Trigger>
</Style.Triggers>
But by doing that it never become red (The Critical binding trigger). I have tried MultiDataTrigger and have both condition (IsCritical -> False && Alternate) but the binding fails. I also tried to put both trigger in Style and ControlTemplate, still doesn't work.
Any idea ?
The Style triggers have a higher priority than the ControlTemplate triggers, as discussed here.
What you can do is "target" the element that uses the Background brush and set it directly. So you probably have something like the following in your ControlTemplate:
<Border Background="{TemplateBinding Background}" ... >
You can change this to:
<Border x:Name="border" Background="{TemplateBinding Background}" ... >
Then change your ControlTemplate DataTrigger to:
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding IsCritical}" Value="True">
<Setter TargetName="border" Property="Background" Value="Red" />
</DataTrigger>
</ControlTemplate.Triggers>
This moves the ControlTemplate Trigger's setter's priority up ahead from the Style triggers.
How Can I know if the DataGridCell is currently in edit mode (not IsSelected), I mean, for example a DataGridTextColumn cell is clicked it becomes a TextBox and not a TextBlock, that's what I call IsEditMode.
I wanna set a trigger-setter for this mode.
EDIT:
I tried to set a general style for DataGridCell.IsEditing but it doesn't seem to do anything.
Here is a snippet of my current code:
<Style TargetType="{x:Type tk:DataGridCell}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{x:Null}"/>
</Trigger>
<Trigger Property="IsEditing" Value="True">
<Setter Property="BorderBrush" Value="#FF62B6CC"/>
<Setter Property="Background" Value="#FFF4F4F4"/>
</Trigger>
</Style.Triggers>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderThickness" Value="0.5"/>
<Setter Property="BorderBrush" Value="{x:Null}"/>
</Style>
Thanks.
Here's how to do it:
<Trigger Property="IsEditing" Value="True">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridCell">
<TextBox Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content.Text, Mode=TwoWay, UpdateSourceTrigger=Default}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
then style the textbox as you please
If you take a look at DataGridCell.cs file, IsEditing should be good way to find out if cell is in edit mode. But you can't set this property from style, because there is local value assignment in DataGridCell class (which has higher priority from style setter).
So, the answer would be: it should work from trigger, but it will not from the style setter.
Update: Shimmy, it really works. Snoop your application, make sure DataGridCell is using your implicit style. Select DataGridCell in the tree, and check its background property. Every time you go in Edit mode it is updated. But you don't see it, by default, since TextBox doesn't inherit Background property. But that's another story. I think you can tweak CellEditingTemplate to make it working.
The proper way to turn on edit mode is to find the DataGridCell's parent DataGrid and call BeginEdit() on that. If you set it directly, you're sidestepping a lot of DataGrid goo that maintains proper state transitions.