Windows Phone TextBox with a button

Question

I'm creating an application for windows phone 8 and I need a search box.

On theory, I want this :

Where the user writes what he wants to search.

Though I want to have a button at the end (represented by the X) that when the user click it, it deletes all text. Also this button should only appear when there is text or it is different from the default text.

The actual problem if what I have (the picture) is that when I focus the textbox, the button disapears.

How can I do it? Seen several websites, but cant make what I want.

EDIT : XAML

<TextBox VerticalAlignment="Stretch"  HorizontalAlignment="Stretch" Grid.Row="0" Text="find" />
<Button Content="X" Width="40" Height="40" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="10" Grid.Row="0" />

Answer 1

By default the text box will turn white when you tap on it. It is the same color as your "X" button. Change the color of the button to something else.

Add Foreground="Black" to your XAML for your button or pick a color from the color picker.

Answer 2

You have to work with Textbox GotFocus event and LostFocus event. It looks like Google search box. It will surely help you. First of all download image for the button from here

XAML:

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,531">
            <TextBox Name="txtSearch" 
                     Text="Search"
                     GotFocus="txtSearch_GotFocus"
                     LostFocus="txtSearch_LostFocus"
                     VerticalAlignment="Top"
                     Foreground="Gray"/>

              <Button 
                    Click="Button_Click"
                    Width="50" 
                    Height="60" 
                    BorderBrush="Transparent"
                     HorizontalAlignment="Right" 
                     VerticalAlignment="Stretch"
                    Margin="10" Grid.Row="0">
                <Button.Background>
                    <ImageBrush Stretch="Uniform"  ImageSource="/box_drawings_light_diagonal_cross_u2573_icon_256x256.png" />
                </Button.Background>
            </Button>
           </Grid>

XAML.CS:

private void txtSearch_GotFocus(object sender, RoutedEventArgs e)
    {
        if (txtSearch.Text == "Search")
        {
            txtSearch.Text = "";
            SolidColorBrush Brush1 = new SolidColorBrush();
            Brush1.Color = Colors.Black;
            txtSearch.Foreground = Brush1;
        }
    }

    private void txtSearch_LostFocus(object sender, RoutedEventArgs e)
    {
        if (txtSearch.Text == String.Empty)
        {
            txtSearch.Text = "Search";
            SolidColorBrush Brush2 = new SolidColorBrush();
            Brush2.Color = Colors.Gray;
            txtSearch.Foreground = Brush2;
        }

    }
    private void Button_Click(object sender, RoutedEventArgs e)
    {
        txtSearch.Text = "Search";
    }