如果边框内的文本框包含我的搜索文本框中的文本，则更改边框的背景

Question

当文本框包含来自另一个文本框的文本时，我想创建一些突出显示文本框的 XAML。它本质上是突出显示搜索的项目。

用户界面：

当用户在 UI 左下角的“搜索”文本框中输入任何内容时，它会从树形视图中过滤工作站，直到仅剩下的工作站包含详细信息中的搜索词。当他们然后选择一个树视图项目时，它会填充右侧的详细信息。我希望它突出显示包含搜索词的文本框，如上面的工作站名称字段所示。

这是我的一些代码：

带有硬编码高亮的文本框

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

搜索文本框：

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

当文本框包含搜索文本框中的字符串时，是否有一种简单的方法可以让边框具有渐变背景，否则为黑色？我希望它是一个仅限 XAML 的解决方案，但我也不固执。

我也认为有一点背景脉冲会很好，但我可以努力找出自己的动画，我真的只是需要帮助解决我的问题。

谢谢！

Answer 1

我认为您将需要一些转换器形式的代码

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
}

然后你可以像这样使用它：

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