Change the background color of a container when a textbox has focus
I have a simple custom control with TextBox
. I want to change the color of a custom control when it TextBox
receives focus. This is what I have:
<UserControl x:Class="OutLookContactList.ContactSearchControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="root" MinHeight="30" Loaded="UserControl_Loaded">
<UserControl.Resources>
<Style x:Key="searchTextBoxStyle" TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="IsFocused" Value="true">
<Setter TargetName="root" Property="Background" Value="{StaticResource OnMouseOverColor}" />
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
But I am getting errot property "TargetName cannot be set in Setter style". How can I set the back color of the user control when a textbox receives focus? Thanks a bunch
source to share
Will it work to wrap your content UserControl
inside an object Border
? If so, you can simply style Border
like this:
<UserControl x:Class="Sample2.ContactSearchControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="75" Width="300">
<Border>
<Border.Style>
<Style TargetType="Border">
<Setter Property="Background" Value="White" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsFocused, ElementName=txtSearch}" Value="true">
<Setter Property="Background" Value="Black" />
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<StackPanel>
<TextBox x:Name="txtSearch" Text="Search" />
<TextBox Text="Other" />
</StackPanel>
</Border>
</UserControl>
Update: (Answering Sheraz's questions)
I'm not sure why it ElementName
doesn't work for accessing children in UserControl
. This may have to do with how the visual tree is created.
As for Trigger
vs DataTrigger
: Trigger for dependency properties and DataTrigger for data properties (data or other controls). Since you're trying to create a style Border
, it makes more sense to put it there DataTrigger
and watch it TextBox
rather than change TextBox
the look Border
.
As I understand it, the property TargetName
Setter
is only applicable within DataTemplate
or ControlTemplate
. ( Info from WPF Doctor in this forum post )
source to share
If you changed the background of the textbox, you need to remove the property TargetName
:
<Style x:Key="searchTextBoxStyle" TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="IsFocused" Value="true">
<Setter Property="Background" Value="{StaticResource OnMouseOverColor}" />
</Trigger>
</Style.Triggers>
</Style>
and change the TextBox you want this style to be:
<TextBox Style="{StaticResource searchTextBoxStyle}" .... />
However, since you want to change the value of the parent user control, this won't give you what you want.
You can of course do this in code by adding an event handler GotFocus
and putting the code to change the background color there.
source to share
Here's some XAML that works in Kaxaml :
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Style>
<Style TargetType="Page">
<Setter Property="Background" Value="#CCCCD0" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=txtSearch, Path=IsFocused}"
Value="true">
<Setter Property="Background" Value="Black" />
</DataTrigger>
</Style.Triggers>
</Style>
</Page.Style>
<TextBox x:Name="txtSearch" Width="100"
HorizontalAlignment="Center" VerticalAlignment="Center" />
</Page>
You would change the object Page
to UserControl
. I find it much easier to test these things in rapid prototyping like Kaxaml before coding UserControl
in VS.
Note that you must set the default color (in this case #CCCCD0
) through the property setter and not through the attribute itself Page
. This is because the attribute will override the value set by the trigger (because it is a style trigger), so even when the trigger is fired, it will always be undermined by the local attribute specification, which means it will not change. I'm only pointing this out because it's a fairly common question.
source to share