locked
how to design search textbox with button ? RRS feed

  • Question

  • Hi,

    how do I design the textbox like windows charm (textbox with search button).

    Wednesday, September 11, 2013 3:14 PM

Answers

  • Hello!

    You need to get some watermark textblock (there are many in web, here are the one - http://social.msdn.microsoft.com/Forums/wpapps/en-US/451edc95-3b6e-4f0c-992f-86e4b92ab203/how-to-create-watermark-text-box-for-windows-phone-8)

    You can use it like this:

    <Border BorderThickness="1" BorderBrush="Blue">

    <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.8*"/> <ColumnDefinition Width="0.2*"/> </Grid.ColumnDefinitions> <common:WatermarkTextBox x:Name="searchTextBox" WatermarkText="Search" WatermarkTextColor="Gray" Margin="20,4,0,4" Background="#FFEFEFEF"> </common:WatermarkTextBox> <Button Grid.Column="1" Height="50" Padding="0" Margin="6,4,12,4" x:Name="searchButton" VerticalAlignment="Top"

    Click="OnSearchButtonClick"> <Image VerticalAlignment="Center" HorizontalAlignment="Center" Source="/Assets/searchButton.png"/> </Button> </Grid>

    </Border>





    • Edited by Oleg Kurzov Wednesday, September 11, 2013 9:16 PM
    • Marked as answer by Anne Jing Tuesday, September 17, 2013 7:37 AM
    Wednesday, September 11, 2013 8:56 PM

All replies

  • Hello!

    You need to get some watermark textblock (there are many in web, here are the one - http://social.msdn.microsoft.com/Forums/wpapps/en-US/451edc95-3b6e-4f0c-992f-86e4b92ab203/how-to-create-watermark-text-box-for-windows-phone-8)

    You can use it like this:

    <Border BorderThickness="1" BorderBrush="Blue">

    <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.8*"/> <ColumnDefinition Width="0.2*"/> </Grid.ColumnDefinitions> <common:WatermarkTextBox x:Name="searchTextBox" WatermarkText="Search" WatermarkTextColor="Gray" Margin="20,4,0,4" Background="#FFEFEFEF"> </common:WatermarkTextBox> <Button Grid.Column="1" Height="50" Padding="0" Margin="6,4,12,4" x:Name="searchButton" VerticalAlignment="Top"

    Click="OnSearchButtonClick"> <Image VerticalAlignment="Center" HorizontalAlignment="Center" Source="/Assets/searchButton.png"/> </Button> </Grid>

    </Border>





    • Edited by Oleg Kurzov Wednesday, September 11, 2013 9:16 PM
    • Marked as answer by Anne Jing Tuesday, September 17, 2013 7:37 AM
    Wednesday, September 11, 2013 8:56 PM
  • I have same problem.Do you have implement this ? I also want to implement this TextBox :https://translate.google.ca/#en/zh-CN/test (speech button or more button on the textBox ).

    Thanks.

    Wednesday, April 16, 2014 3:36 PM