locked
Delete (X) button in a SearchBox

    Question

  • Hi

    Is there a way to have the delete button Inside the standard SearchBox Control ?

     

    Many thanks!

    Monday, April 27, 2015 10:32 PM

Answers

  • Hi Charles v2air,

    For adding a "X" button in the SearchBox, we can modify the SearchBox Style. It will be more easy if we do this in the blend, first please right-click the SearchBox then choose "Edit Template"-->"Edit a Copy" after that we will see the whole style which applied on the SearchBox. Then I will recommand that we can first add the "X" image in the SearchBoxBorder, after that we can handle the Tapped event of the "X" image to do the delete operation for the SearchBox:

    <Border x:Name="SearchBoxBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent">
       <Grid Background="#FFF9F7F7">
      <Grid.ColumnDefinitions>
      <ColumnDefinition/>
      <ColumnDefinition Width="Auto"/>
      </Grid.ColumnDefinitions>
      <TextBox x:Name="SearchTextBox" BorderThickness="0" Background="Transparent" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" InputScope="Search" MinHeight="{ThemeResource SearchBoxTextBoxThemeMinHeight}" MaxLength="2048" Padding="{TemplateBinding Padding}" PlaceholderText="{TemplateBinding PlaceholderText}" Style="{StaticResource SearchTextBoxStyle}" TextWrapping="NoWrap" VerticalAlignment="Stretch" Margin="0,0,23,0"/>
      <Button x:Name="SearchButton" AutomationProperties.AccessibilityView="Raw" Background="Transparent" Grid.Column="1" FontWeight="{ThemeResource SearchBoxButtonThemeFontWeight}" Style="{StaticResource SearchButtonStyle}"/>
    <Image HorizontalAlignment="Left" Tapped="Image_Tapped" Height="46" Margin="124,0,0,0" VerticalAlignment="Top" Width="39" Source="xbutton.png" RenderTransformOrigin="0.458,1.01" Stretch="UniformToFill" Grid.ColumnSpan="2"/>
    </Grid></Border>

    Best Regards,
    Amy Peng


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.



    Tuesday, April 28, 2015 3:27 AM
    Moderator

All replies

  • Hi Charles v2air,

    For adding a "X" button in the SearchBox, we can modify the SearchBox Style. It will be more easy if we do this in the blend, first please right-click the SearchBox then choose "Edit Template"-->"Edit a Copy" after that we will see the whole style which applied on the SearchBox. Then I will recommand that we can first add the "X" image in the SearchBoxBorder, after that we can handle the Tapped event of the "X" image to do the delete operation for the SearchBox:

    <Border x:Name="SearchBoxBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent">
       <Grid Background="#FFF9F7F7">
      <Grid.ColumnDefinitions>
      <ColumnDefinition/>
      <ColumnDefinition Width="Auto"/>
      </Grid.ColumnDefinitions>
      <TextBox x:Name="SearchTextBox" BorderThickness="0" Background="Transparent" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" InputScope="Search" MinHeight="{ThemeResource SearchBoxTextBoxThemeMinHeight}" MaxLength="2048" Padding="{TemplateBinding Padding}" PlaceholderText="{TemplateBinding PlaceholderText}" Style="{StaticResource SearchTextBoxStyle}" TextWrapping="NoWrap" VerticalAlignment="Stretch" Margin="0,0,23,0"/>
      <Button x:Name="SearchButton" AutomationProperties.AccessibilityView="Raw" Background="Transparent" Grid.Column="1" FontWeight="{ThemeResource SearchBoxButtonThemeFontWeight}" Style="{StaticResource SearchButtonStyle}"/>
    <Image HorizontalAlignment="Left" Tapped="Image_Tapped" Height="46" Margin="124,0,0,0" VerticalAlignment="Top" Width="39" Source="xbutton.png" RenderTransformOrigin="0.458,1.01" Stretch="UniformToFill" Grid.ColumnSpan="2"/>
    </Grid></Border>

    Best Regards,
    Amy Peng


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.



    Tuesday, April 28, 2015 3:27 AM
    Moderator
  • Hi Am,

    Many thanks, I will modify te Template, I thought it was built in  the original Template actually.

    Best Regards

    Charles

    Wednesday, April 29, 2015 6:37 AM