在xaml中设计像win 10这样的搜索框。

Question

我想做搜索框，像win10一样（在windows设置中）。我做了改变搜索图标和删除图标时，我集中和不集中，但我不知道如何删除的话，当我点击删除图标？我不想成为它在后面的代码。我要怎么做才能实现呢？

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