Дизайн окна поиска, как выиграть 10 в XAML

Question

Я хочу сделать окно поиска как win 10 (в настройках windows). Я изменил значок поиска и значок удаления, когда сфокусирован и не сфокусирован, но я не знаю, как удалить слова, когда нажимаю значок удаления? Я не хочу быть в коде позади. Что мне нужно сделать, чтобы совершить это sh? 1001

<Grid>
      <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*" />
              <ColumnDefinition Width="auto" />
      </Grid.ColumnDefinitions>
              <TextBox Grid.Column="0"
                    x:Name="TbxSearch"
                    Margin="8 0 0 0"
                    materialDesign:HintAssist.Hint="Build a search bar"
                    materialDesign:TextFieldAssist.DecorationVisibility="Hidden"
                    BorderThickness="0"
                    MinWidth="200"
                    Panel.ZIndex="1000"
                    VerticalAlignment="Center" CaretBrush="{x:Null}" >
                           <TextBox.Style>
                                <Style TargetType="TextBox">
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding ElementName=TbxSearch, Path=IsFocused}" Value="True">
                                            <Setter Property="Tag" Value="WindowClose"/>
                                        </DataTrigger>
                                        <DataTrigger Binding="{Binding ElementName=TbxSearch, Path=IsFocused}" Value="False">
                                            <Setter Property="Tag" Value="Magnify"/>
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </TextBox.Style>
               </TextBox>

               <Button Grid.Column="1"
                       x:Name="btnClick"
                       Style="{StaticResource ButtonSearch}"
                       Cursor="Hand"
                       HorizontalAlignment="Right">
                               <materialDesign:PackIcon Kind="{Binding Path=Tag,ElementName=TbxSearch}"
                                       x:Name="icon"
                                       Opacity=".56" 
                                       RenderTransformOrigin="0.5,0.5" Width="21" Height="18" >
                                         <materialDesign:PackIcon.RenderTransform>
                                            <TransformGroup>
                                                <ScaleTransform/>
                                                <SkewTransform/>
                                                <RotateTransform Angle="810.628"/>
                                                <TranslateTransform/>
                                            </TransformGroup>
                                        </materialDesign:PackIcon.RenderTransform>
                             </materialDesign:PackIcon>
             </Button>
</Grid>

Answer 1

Вы можете обработать событие MouseLeftButtonDown для PackIcon. Не забудьте установить для свойства Background значение Transparent, чтобы правильно захватывать щелчки, как я также предложил здесь :

<materialDesign:PackIcon Kind="{Binding Path=Tag,ElementName=TbxSearch}"
                        MouseLeftButtonDown="PackIcon_MouseLeftButtonDown"
                        Background="Transparent"
                        x:Name="icon"
                        Opacity=".56" 
                        RenderTransformOrigin="0.5,0.5" Width="21" Height="18" >
    <materialDesign:PackIcon.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform Angle="810.628"/>
            <TranslateTransform/>
        </TransformGroup>
    </materialDesign:PackIcon.RenderTransform>
</materialDesign:PackIcon>

В обработчике событий вы должны установить Text свойство TextBox пусто string:

private void PackIcon_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    TbxSearch.Text = string.Empty;
}