2015-02-07 6 views
0

Я создаю приложение для Windows Phone 8, и мне нужно окно поиска.Windows Phone TextBox с кнопкой

В теории, я хочу это:

enter image description here

Когда пользователь пишет, что он хочет найти.

Хотя я хочу иметь кнопку в конце (представленной X), когда пользователь нажимает на нее, он удаляет весь текст. Также эта кнопка должна появляться только при наличии текста или отличается от текста по умолчанию.

Фактическая проблема, если у меня есть (изображение), заключается в том, что когда я фокусирую текстовое поле, кнопка исчезает.

Как я могу это сделать? Видел несколько веб-сайтов, но не мог сделать то, что я хочу.

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" /> 
+0

Пожалуйста, ваши существующий код XAML и код. –

+0

Почему бы просто не надеть кнопку на внешнюю сторону текстового окна, масштабировать ее до квадрата того же размера по вертикали и свернуть ее. Затем добавьте обработчик событий для TextChanged, который проверяет содержимое поля, когда кто-то меняет текст. Если он не является значением по умолчанию и не пуст, установите кнопку на заметку? – redwizard000

+0

Добавлен XAML @PeterTorr. Он работает redwizard, но я хотел поместить его внутрь для целей дизайна. – Cafn

ответ

1

Вам необходимо работать с текстовым полем GotFocus event и LostFocus event. Он выглядит как окно поиска Google. Это, безусловно, поможет вам. Прежде всего скачать изображения для кнопки из 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"; 
    } 
+0

Имел проблемы с использованием изображения в кнопке, и этот ответ был лучшим. Благодаря! – Cafn

2

По умолчанию текстовое поле белеют при нажатии на него. Это тот же цвет, что и ваша кнопка «X». Измените цвет кнопки на другое.

Добавить Foreground = «Черный» на ваш XAML для вашей кнопки или выбрать цвет из набора цветов.

Смежные вопросы