EbaySearchView Page

When the viewmodel is created within the view, it receives a Func that allows it to resolve the EbayClient (see Listing 27.7).

The view contains a TextBox to allow the user to enter a search query.

The view subscribes to the KeyUp event of the TextBox, which allows the app to detect when the user taps the Enter key on the Software Input Panel (SIP) and to execute the viewmodel object’s SearchCommand.

LISTING 27.7. EbaySearchView Class

Click here to view code image

public partial class EbaySearchView : PhoneApplicationPage
{
    public EbaySearchView()
    {
        InitializeComponent();
        DataContext = new EbaySearchViewModel(
            () => new EbayClient(), new NetworkConnectionMonitor());
    }

    EbaySearchViewModel ViewModel
    {
        get
        {
            return (EbaySearchViewModel)DataContext;
        }
    }

    void TextBox_KeyUp(object sender, KeyEventArgs e)
    {
        if (e.Key == Key.Enter)
        {
            e.Handled = true;
            TextBox textBox = (TextBox)sender;
            this.Focus();
            ViewModel.SearchCommand.Execute(textBox.Text);
        }
    }
}

The view contains a ListBox for displaying search results (see Listing 27.8). The ListBox contains a custom attached property ScrollViewerMonitor.AtEndCommand, which automatically causes the ListBox to be populated with more records when the user scrolls to the end of the list. The ScrollViewerMonitor class is discussed in detail in the next section.

LISTING 27.8. EbaySearchView.xaml (excerpt)

Click here to view code image

<Grid x:Name="ContentPanel" Grid.Row="1">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <TextBox Text="{Binding SearchText}"
            KeyUp="TextBox_KeyUp" />
    <ListBox Grid.Row="1"
        ItemsSource="{Binding Items}"
        u:ScrollViewerMonitor.AtEndCommand="{Binding FetchMoreDataCommand}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid Margin="14,5,4,10">

                    <!-- Content omitted. -->
                    <Image Source="{Binding GalleryUrl}"
                        MaxWidth="100" MaxHeight="100"
                        Margin="0, 0, 10, 0"
                        Grid.RowSpan="4" />

                    <TextBlock Text="{Binding Title}"
                            Grid.Column="1" Grid.ColumnSpan="3"
                            Style="{StaticResource PhoneTextSmallStyle}" />

                    <TextBlock Text="current price:"
                            Grid.Row="1" Grid.Column="1"
                            HorizontalAlignment="Right" />
                    <TextBlock Text="{Binding CurrentPrice,
                            Converter={StaticResource StringFormatConverter},
                            ConverterParameter={0:C}}"
                            Grid.Row="1" Grid.Column="2"
                            Margin="10,0,0,0" />

                    <TextBlock Text="time left:"
                            Grid.Row="2" Grid.Column="1"
                            HorizontalAlignment="Right" />
                    <TextBlock Text="{Binding TimeLeftCustom}"
                            Grid.Row="2" Grid.Column="2"
                            Margin="10,0,0,0" />
                    <HyperlinkButton NavigateUri="{Binding ViewItemUrl}"
                                    Content="view"
                                    TargetName="_blank"
                                    Margin="0, 0, 10, 0"
                                    Grid.Row="2" Grid.Column="3"
                                    HorizontalAlignment="Left" />
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    <Grid Grid.Row="2"
        Visibility="{Binding Busy,
        Converter={StaticResource BooleanToVisibilityConverter}}">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <TextBlock Text="Loading..."
                Style="{StaticResource LoadingStyle}"/>
        <ProgressBar IsIndeterminate="True"
                    VerticalAlignment="Bottom"
                    Grid.Row="1" />
    </Grid>
</Grid>

In the grid row beneath the ListBox there is another Grid containing a TextBlock and a ProgressBar. This grid becomes visible when the viewmodel’s Busy property is true.

When text is entered into the search query TextBox, and the SIP’s Enter button is tapped, the viewmodel’s SearchCommand is executed (see Figure 27.5).

FIGURE 27.5 The eBay search page.

The eBay logo is displayed using a TextBlock located in the title panel, with a Run for each letter of the eBay logo, as shown in the following excerpt:

Click here to view code image

<StackPanel Grid.Row="0" Style="{StaticResource PageTitlePanelStyle}">
    <TextBlock Text="Windows Phone Unleashed"
            Style="{StaticResource PhoneTextAppTitleStyle}" />
    <TextBlock Style="{StaticResource PhoneTextPageTitleStyle}"
            FontFamily="{StaticResource LogoFontFamily}">
    <Run Foreground="#ff0000">e</Run><Run Foreground="#000099">b</Run>
    <Run Foreground="#ffcc00">a</Run><Run Foreground="#99cc00">y</Run>
    <Run FontFamily="{StaticResource PhoneFontFamilyNormal}">search</Run>
    </TextBlock>
</StackPanel>

For more information on the TextBlock and Run classes, see Chapter 6, “Mastering Text Elements and Fonts.”

The next section demonstrates how the viewmodel’s FetchMoreDataCommand is executed when the user scrolls to the end of the list.