Search box implementation

Question

I am developing my first app on windows phone 8. In this app I have a search box.For the search box I need to provide the background text as search city(as a hint text for the user) along with the search symbol/ search button within the box,Can I know the best way to do this as I am pretty new in this field.

Thanks in Advance.

score 0 · Answer 1 · answered Jun 25 '14 at 05:45

0

You could use the AutoCompleteBox where you could implement the search functionality too.

Have a look over here

http://www.geekchamp.com/articles/autocompletebox-for-wp7-in-depth

Hope it helps!

answered Jun 25 '14 at 05:45

Kulasangar

9,046
5
51
82

hey anonshankar,Yes I have done with all that,My doubt is when the user opens the app for the first time I want him to know that the search box is for search city,Like to provide hint at the background before he clicks on the search box.How can we do this? – dhee Jun 25 '14 at 05:54
@dhee hint in the sense, you wanted to put a popup or something or what? – Kulasangar Jun 25 '14 at 05:56
A typical search box,no popup,Like for example take up the add comment box of stack overflow itself,it has few text written (Use comments to ask etc etc) before we start typing.Just check once,I need it the same way for my search box with the text written as search city before user starts typing. – dhee Jun 25 '14 at 05:59
ah yes you could use the `hint` property. – Kulasangar Jun 25 '14 at 06:04
I tried using Hint,But throws a error saying the property Hint wasn't found,Am I missing any namespace? – dhee Jun 25 '14 at 06:08
yes you should have this reference at the top: xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" When you go through the sample provided by Nokia they've explained. – Kulasangar Jun 25 '14 at 06:10
@anonshankar....Sorry I am disturbing you too much but I have already used that namespace but still its throwing me the error – dhee Jun 25 '14 at 06:20
No that's k. How did you install the toolkit? Did you download or did you install from the Nuget Package Manager? – Kulasangar Jun 25 '14 at 06:23
Error 3 The property 'hint' does not exist on the type 'AutoCompleteBox' in the XML namespace 'clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit'. C:\Users\dheerajkumar_babulal\Documents\Visual Studio 2012\Projects\weatherappDemo\weatherappDemo\MainPage.xaml 90 38 weatherappDemo.This is the error I am getting – dhee Jun 25 '14 at 06:23
I installed it from the Nuget Package Manager. – dhee Jun 25 '14 at 06:24
Did you add the toolkit dll to your reference? You should add the dll from the place you downloaded to your reference. Reference > Add Reference > then browse to the place you have downloaded the toolkit. You should find this Microsoft.Phone.Controls.Toolkit.dll from C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Nov10\Bin\Microsoft.Phone.Controls.Toolkit.dll. the above path is just a sample. You should search where you installed. – Kulasangar Jun 25 '14 at 06:25
Yeah added but still it isn't working,Any other option? – dhee Jun 25 '14 at 06:41
With the toolkit I am able to access the autosearch box but not the hint property – dhee Jun 25 '14 at 06:46
Give a try downloading the toolkit from here and then try adding it back again. https://phone.codeplex.com/ COz this worked for me – Kulasangar Jun 25 '14 at 06:47
See this thread http://stackoverflow.com/questions/21689545/placeholder-textbox-windows-phone-8 – Kulasangar Jun 25 '14 at 07:30
Yeah it works on that but I need that text box to be an auto complete box so I can't be using PhonetextBox tookit – dhee Jun 25 '14 at 09:13

score 0 · Accepted Answer · answered Jun 25 '14 at 07:11

Try this for watermark(hint text) on TextBox and search button at the top.

xaml

<Grid x:Name="ContentPanel" Grid.Row="0" Margin="12,0,12,0" Width="440" Height="100">
        <TextBox Width="440" Name="txtSearch" Height="153" LostFocus="TextBox_LostFocus" GotFocus="TextBox_GotFocus" Text="This is whatever search..." TextWrapping="Wrap" Foreground="DarkGray" FontSize="18"></TextBox>
        <Button x:Name="btnSearch" Click="btnSearch_Click" HorizontalAlignment="Right" Height="70" Margin="0,0,10,0">
            <Button.Content>
                <Image Source="Images/yoursearchIcon.png"></Image>
            </Button.Content>
        </Button>
    </Grid>

code behind

    private void TextBox_LostFocus(object sender, RoutedEventArgs e)
    {
        if (txtSearch.Text.Trim() == "")
        {
            txtSearch.Foreground = new SolidColorBrush(Colors.DarkGray);
            txtSearch.Text = "This is whatever search...";

        }
    }

    private void TextBox_GotFocus(object sender, RoutedEventArgs e)
    {
        if (txtSearch.Text == "This is whatever search...")
        {
            txtSearch.Foreground = new SolidColorBrush(Colors.Black);
            txtSearch.Text = "";

        }
    }

Hope this helps

@Muhammad.... Yeah it worked but One small doubt,It should work for the first time like as soon as the user is on that page,but in this case it shows only when the text box has lost the focus. — dhee, Jun 25 '14 at 07:43
Like the Focus is on the Page where this search box is present,So i need it to be displayed at that time.Kindly let me know how is this possible. — dhee, Jun 25 '14 at 09:05

Search box implementation

2 Answers2