如果該邊框內的文本框包含來自我的搜索文本框的文本，則更改邊框的背景

Question

我想創建一些XAML以突出顯示文本框，當文本框包含另一個文本框中的文本時。它本質上突出顯示搜索到的項目。

UI：

當用戶鍵入任何東西到在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>