0

I'm trying to change the containing border background color based on the focus property of a contained textbox. Can someone explain what's the problem with my code?

<Border BorderBrush="LightBlue" BorderThickness="2" Background="#33000000">
    <Border.Style>
        <Style>
            <Style.Triggers>
                <DataTrigger
                  Binding="{Binding IsFocused, ElementName=txtValue}"
                  Value="True">
                    <Setter Property="Border.Background" Value="Green" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Border.Style>
    <Grid Margin="0" VerticalAlignment="Center">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <TextBox Name="txtValue" Grid.Column="0" Text="20" />
        <TextBlock Grid.Column="1"  />
    </Grid>
</Border>
Heena
  • 8,450
  • 1
  • 22
  • 40
liorda
  • 1,552
  • 2
  • 15
  • 38

1 Answers1

4

Your DataTrigger is not change the value of the Background property because you set it inside the Border declaration. So, once setted, it will never changed. To allow changing, you have to set the value inside the Style.

 <Border BorderBrush="LightBlue" BorderThickness="2" >
    <Border.Style>            
        <Style TargetType="Border">
            <Setter Property="Background" Value="#33000000"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsFocused, ElementName=txtValue}" Value="True">
                    <Setter Property="Background" Value="Green" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Border.Style>
    <Grid Margin="0" VerticalAlignment="Center">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <TextBox Name="txtValue" Grid.Column="0" Text="20" />
        <TextBlock Grid.Column="1"  />
    </Grid>
</Border>
Heena
  • 8,450
  • 1
  • 22
  • 40