Question

I would like to create some XAML that highlights a textbox, when the textbox contains text from another textbox. It’s essentially highlighting searched items.

UI:

When a user types anything into the Search textbox on the bottom left of the UI, it filters the workstations from the treeview until the only ones left contain the search term in there details. When they then select a treeview item, it populates the details on the right. I’d like if it highlighted the textbox that contains the search term as shown on the workstation name field above.

Here is some of my code:

The textbox with a hardcoded highlight

<StackPanel Grid.Column="1" Grid.Row="0">
    <Border Name="HighlightBorder" Grid.Column="1" Grid.Row="0" CornerRadius="4">
         <Border.Background>
              <RadialGradientBrush RadiusX="1" RadiusY="0.7">
                   <GradientStop Color="Black" Offset="1"/>
                   <GradientStop Color="#FFFFEA00"/>
              </RadialGradientBrush>
         </Border.Background>

         <TextBox Margin="5" Height="32" FontSize="16" Foreground="White" Text="{Binding WorkstationName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
    </Border>
</StackPanel>

The Search Textbox:

<Grid>
     <Grid.ColumnDefinitions>
           <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
     </Grid.ColumnDefinitions>
     <TextBlock Text="Search:" Foreground="White" FontSize="16"/>
     <TextBox Grid.Column="1" Text="{Binding SearchCriteria, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</Grid>

Is there an easy way to only have the border have that gradient background when the textbox contains the string in the search textbox and otherwise, be black? I’d love to have it be a XAML only solution, but I’m not stubborn about it either.

I also think it would be neat to have the background pulse a little, but I can fight to figure out my own animations, I really just need help with my question.

Thanks!

Answer 1

I think you will need a little bit of code in the form of a converter

public class ContainsSearchTextConverter : IMultiValueConverter
{
    #region IMultiValueConverter Members

    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (values.Any(v => v == DependencyProperty.UnsetValue))
            return null;

        var text = values[0].ToString();

        var search = values[1].ToString();

        if (string.IsNullOrWhiteSpace(search))
            return null;

        if (text.Contains(search))
            return "true";

        return null;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }

    #endregion
}

You then use it like:

    <StackPanel>
        <Border Name="HighlightBorder" Grid.Column="1" Grid.Row="0" CornerRadius="4">
            <Border.Style>
                <Style TargetType="Border">
                    <Style.Triggers>
                        <DataTrigger Value="true">
                            <DataTrigger.Binding>
                                <MultiBinding Converter="{StaticResource containsSearchTextConverter}">
                                    <Binding ElementName="workStationNameTextBox" Path="Text" />
                                    <Binding Path="SearchCriteria" />
                                </MultiBinding>
                            </DataTrigger.Binding>
                            <Setter Property="Background" >
                                <Setter.Value>
                                        <RadialGradientBrush RadiusX="1" RadiusY="0.7">
                                            <GradientStop Color="Black" Offset="1"/>
                                            <GradientStop Color="#FFFFEA00"/>
                                        </RadialGradientBrush>
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>

            <TextBox Name="workStationNameTextBox" Background="Black" Margin="5" Height="32" FontSize="16" Foreground="White" Text="{Binding WorkstationName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
        </Border>
    </StackPanel>