Question

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

UI： Here is my 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>

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

1 个答案: