Irek w sieci

Dodajemy inne kontrolki

 

W poprzedniej części 4 usprawniliśmy powiązanie danych i skorzystaliśmy z zapisu w IsolatedStorage. Zacznijmy dodawać inne kontrolki w celu szerszego poznania Silverlight.

 

AutoCompleteBox

Czy pamiętacie, że przy każdym wyszukiwaniu zapisujemy historie szukanych fraz? Pomóżmy użytkownikom naszej aplikacji, poprzez pokazywanie historii wyszukiwań, podczas wprowadzania szukanych wyrazów. W tym celu użyjemy kontrolki z Silverlight Toolkit, AutoCompleteBox.

 

W tym celu dodajemy referencje do System.Windows.Controls. Następnie dodajemy xmlns w pliku Search.xaml:

xmlns:input="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input"

Kolejnym krokiem jest podmiana kontrolki o nazwie SearchTerm z TextBox na input:AutoCompleteBox

<input:AutoCompleteBox x:Name="SearchTerm" FontSize="14.667" Margin="0,0,10,0" Width="275" IsTextCompletionEnabled="True" />

 

Teraz musimy dostarczyć dane do kontrolki AutoBoxComplete, W klasie stworzonej w pliku Helper.cs dodamy funkcje przekazującą zachowane frazy do kontrolki AutoCompleteBox:

internal static string[] GetSearchTermHistory()
        {
            List<string> searchHistory = new List<string>();

            foreach (var item in IsolatedStorageSettings.ApplicationSettings.Keys)
            {
                searchHistory.Add(item.ToString());
            }
            return searchHistory.ToArray();
        }

 

Nie zapomnijmy dodać w tym pliku referencji do bibliotek obsługujących kolekcje List:

using System.Collections.Generic;
using System;

Teraz w pliku Search.xaml.cs dodamy wywołanie przed chwilą stworzonej funkcji:

void Search_Loaded(object sender, RoutedEventArgs e)
        {
            SearchResults.ItemsSource = pcv; //połacz z kontrolką DataGrid
            _timer.Start(); // włącz stoper
            SzukajTweetaEx(); // wykonaj pierwsze przeszukanie
            SearchTerm.ItemsSource = Helper.GetSearchTermHistory(); // zapisz historie wyszukiwan
        }

 

Wynikiem tych zmian będą wskazówki przy wpisywaniu fraz wyszukiwania:

 

Dodajemy historię wyszukiwań

Posiadając historię wpisanych fraz wyszukiwania, jesteśmy gotowi wysłać tę informacje do strony historia. Edytujemy plik History.xaml, który tworzymy w katalogu Views, używając szablonu SilverlightPage.

 

Wszystko co chcemy pokazać tym widoku jest prosta lista wszystkich dotychczas wyszukiwanych fraz. Osiągniemy to bardzo łatwo używając kontrolki ListBox w pliku History.xaml:

    <Grid x:Name="LayoutRoot">
        <StackPanel>
            <TextBlock x:Name="HeaderText" Style="{StaticResource HeaderTextStyle}" Text="Historia Wyszukiwań"/>
            <ListBox x:Name="SearchTermHistory" />
        </StackPanel>
    </Grid>

 

Dodatkowo użyjemy poprzednio stworzonej funkcji w Helper.cs i powiążemy dane historyczne z kontrolką ListBox w pliku History.xaml.cs:

 

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    SearchTermHistory.ItemsSource = Helper.GetSearchTermHistory();
}

Nie zapomnijmy o dodaniu klasy Helper:

 

Jak widać możemy wielokrotnie używać jednej funkcji, w tym przypadku do populacji historii wyszukiwania:

 

 

Zwiększamy funkcjonalność nawigacji

Skoro mamy kilka widoków/stron w naszej aplikacji, widzimy, że nawigacja pomiędzy nimi pracuje bardzo sprawnie. Możemy używać przycisków z nazwą strony, dodatkowo przyciski przeglądarki poprzednia/następna wspomagają nawigację między stronami/widokami aplikacji.

Zwiększymy funkcjonalność naszej historii wyszukiwań. Chcemy wskazać jedną z fraz w historii i spowodować aby aplikacja rozpoczęła wyszukiwanie tej frazy. Dodamy w pliku History.xaml zdarzenie obsługujące wybranie jednego z elementów w ListBox (SelectionChanged):

            <ListBox x:Name="SearchTermHistory" SelectionChanged="SearchTermHistory_SelectionChanged" />

 

Funkcja obsługująca to zdarzenie wygląda tak (plik History.xaml.cs):

private void SearchTermHistory_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            this.NavigationService.Navigate(new Uri(string.Format("/Search/{0}", 
            SearchTermHistory.SelectedItem.ToString()), UriKind.Relative));
        }

Jeżeli brakuje jakiś bibliotek pamiętajmy o ich dodaniu:

Czy spostrzegliście używany format URI? Będzie on wyglądał tak: /Search/{term}. Musimy poinstruować nasz mechanizm nawigacyjny jak poprawnie to zinterpretować. Wracamy do pliku MainPage.xaml i w zawartości UriMapper dodajemy informacje o nowych możliwościach nawigacyjnych (kolejność mapowania jest ważna):

<uriMapper:UriMapper>
  <uriMapper:UriMapping Uri="" MappedUri="/Views/Search.xaml"/>
  <uriMapper:UriMapping Uri="/Search/{term}" MappedUri="/Views/Search.xaml?term={term}" />
  <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/>
</uriMapper:UriMapper>

Teraz nasza strona/widok Szukaj musi zrozumieć takie wywołania. Dodamy tą funkcjonalność w funkcji OnNavigatedTo w pliku Search.xaml.cs:

protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            if (this.NavigationContext.QueryString.ContainsKey("term"))
            {
                SearchTerm.Text = this.NavigationContext.QueryString["term"].ToString();
                SzukajTweetaEx();
            }
        }

 

Teraz gdy przejdziemy do Historii i wybierzemy jedną z fraz, aplikacja automatycznie zacznie jej wyszukiwanie.

 

Podsumowanie

Integracja innych standardowych i dodatkowych kontrolek pozwala usprawnić interfejs użytkownika oraz uprzyjemnić użytkowanie aplikacji. Istnieje mnóstwo dodatkowych kontrolek, tworzonych przez wiele firm. zobacz listę firm i kontrolek w języku angielskim (większość oczywiście płatnych). Oczywiście nie zapomnijmy o Silverlight Toolkit Microsoftu.

Nasza aplikacja pracuje już bardzo sprawnie, moglibyśmy uślicznić interfejs użytkownika. W części 6 poznamy użycie szablonów pozwalające zmienić UI bez naruszania funkcjonalności.

Znaczniki: ria, Silverlight, silverlight toolkit