文本框处于焦点时更改容器的背景颜色

时间:2009-09-17 20:06:47

标签: wpf textbox focus

我有一个TextBox的简单用户控件。我希望在TextBox获得焦点时更改用户控件的颜色。这就是我所拥有的:

<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>

但是我得到了errot“TargetName属性不能在样式Setter上设置”。如何在文本框获得焦点时设置用户控件的背景颜色? 非常感谢

3 个答案:

答案 0 :(得分:9)

UserControl的内容包装在Border对象中是否有效?如果是这样,您可以简单地设置Border的样式:

<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>

更新:(回答Sheraz的问题)

我不确定为什么ElementName无法用于访问UserControl内的儿童。它可能与构建可视化树的方式有关。

至于Trigger vs DataTriggerTrigger用于依赖属性,DataTrigger用于数据绑定属性(数据其他控件)。由于您尝试设置Border的样式,因此将DataTrigger置于其中并让其观看TextBox比让TextBox更改外观更为明确Border

据我了解,TargetName的{​​{1}}属性仅适用于SetterDataTemplate。 (Info from Dr. WPF in this forum post

答案 1 :(得分:2)

如果您要更改文本框的背景,则需要删除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>

并将希望此样式的TextBox更改为:

<TextBox Style="{StaticResource searchTextBoxStyle}" .... />

但是,由于您想要更改父用户控件的值,因此无法满足您的需要。

您当然可以在后面的代码中添加GotFocus事件处理程序并将代码更改为背景颜色。

答案 2 :(得分:2)

以下是一些适用于Kaxaml的XAML:

<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>

您可以使用Page更改UserControl对象。我发现在编写VS中的UserControl之前,在快速原型制作工具(例如Kaxaml)中测试这些类型的事情要容易得多。

请注意,您必须通过属性设置器而不是#CCCCD0本身的属性设置默认颜色(在本例中为Page)。这是因为属性会覆盖触发器设置的值(因为它是一个样式触发器),所以即使触发器会触发,它也总是被本地属性规范所打动,这意味着它不会改变。我只是指出这一点,因为这是一个相当普遍的问题。