Instrukcja laboratoryjna cz.7

Programowanie aplikacji internetowych 2013/2014 Instrukcja laboratoryjna cz.7 Aplikacje na Windows Store Prowadzący: Tomasz Goluch Wersja: 1.1

I. Wprowadzenie 1 Cel: Przekazanie podstawowych informacje o laboratorium. Laboratorium odbywa się na maszynie wirtualnej (uruchomienie): Start Oracle VM VirtualBox Win_8._x86_RAI.vbox albo na maszynach fizycznych jeśli posiadają one zainstalowany przynajmniej system Windows 8 i IDE Visual Studio 2012. II. Rodzaje aplikacji Windows Store Cel: Zapoznanie z podstawowymi rodzajami aplikacji Windows Store. Podobnie jak w przypadku innych aplikacji możemy w Visual Studio dokonać wyboru spośród kilku gotowych szablonów: Blank App (XAML), Grid App (XAML), Split App (XAML), Class Library (Windows Store apps), Windows Runtime Component oraz Unit Test Library (Windows Store apps). Pierwsze trzy to proste aplikacje z mniej bądź bardziej rozbudowanym UI, logiką nawigacji (wliczając w to przyciski powrotu), przykładowe dane oraz zasoby.w przykładowych szablonach wykorzystano takie kontrolki jak: GridView, FlipView. Debugowanie aplikacji odbywa się w tradycyjny sposób (F5) może się odbywać na lokalnej albo zdalnej maszynie oraz na symulatorze. Na potrzeby laboratorium przyjrzyjmy się bliżej szablonowi Grid App (XAML). Posiada on cztery strony: App.xaml, GroupedItemsPage.xaml, ItemDetailPage.xaml, GroupDetailPage.xaml. Pierwsza reprezentuje aplikację i jej zasoby (np. nazwę aplikacji wyświetlaną w górnym pasku UI), druga stronę startową a kolejne to strony reprezentujące na różne sposoby szczegółowe informacje. Nowością jest plik manifestu aplikacji package.appxmanifest, który pozwala kontrolować wdrożenie aplikacji pod nowy interfejs Windows 8. Jest zbiorem metadanych o aplikacji, takich jak: właściwości związane z UI, np. nazwa wyświetlana (m.in. w menu start), punkt wejścia (domyślnie Nazwa_Projektu.App), domyślny język (związany z krajem), opis aplikacji, obsługiwane orientacje ekranu, logo i ekran powitalny, zasoby do których aplikacja powinna mieć dostęp (zakładka Capabilities ) oraz wiele innych, których nie będziemy szczegółowo opisywać 2.Wyłączenie aplikacji polega na ustawieniu kursora przy górnej krawędzi i w momencie kiedy zamieni się on w łapkę, ściągnięcie aplikacji do dolnej krawędzi ekranu lub przełączeniu się do Visual studio (alt+tab) i wyłączeniu debuggera. Domyślnie w aplikacji Grid App (XAML) otrzymujemy model przykładowych danych SampleData zdefiniowany w pliku SampleDataSource.cs. Dane te są zahardkodowane w klasie, co pozwala na ich wyświetlanie podczas tworzenia designu oraz w uruchomionej aplikacji, jednak w normalnych warunkach nie jest to polecany sposób na przechowywanie większej ilości danych. Plik ten zawiera cztery klasy: SampleDataCommon SampleDataItem SampleDataGroup SampleDataSource Zastosowanie modelu danych pozwala na łatwą zmianę ich źródła. Posłuży nam ona jako punkt wyjścia do zbudowania przykładowej aplikacji. 1 Instrukcja przygotowana na podstawie laboratoriów Hands-on labs for Windows 8 firmy Microsoft. 2 Więcej informacji na: http://msdn.microsoft.com/pl-pl/library/pierwsza-aplikacja-metro-w-jezyku-c-sharplub-visual-basic--zasoby-aplikacji.aspx 1

III. Tworzenie aplikacji Windows Store Cel: Utworzenie aplikacji Windows Store, zamiana wyświetlania domyślnych przykładowych z szablonu rzeczywistymi oraz dostosowanie wyglądu interfejsu użytkownika. 1. Utwórz nowy: Windows Store, Grid App (XAML) projekt. 2. Zmień, na bardziej przyjazną, nazwę wyświetlaną jako tytuł głównego okna. 3. Dodaj logo ETI do folderu Assets (Logo.png, SmallLogo.png, SplashScreen.png, StoreLogo.png, oraz WideLogo.png) do ściągnięcia ze strony przedmiotu. 4. W pliku manifestu aplikacji zmień wyświetlaną nazwę aplikacji na bardziej adekwatną oraz inne właściwości np.: domyślny język, obsługiwane obroty, logo, itp. 5. Odinstaluj z systemu starą wersję aplikacji i zainstaluj nową (powinno być widoczne nowe logo w menu start). 6. Zamień przykładowe dane wyświetlane w projekcie na dane z przepisami kuchennymi (do pobrania na stronie przedmiotu). a. dodaj model danych plik: RecipeDataSource.cs b. w plikach: GroupedItemsPage.xaml.cs, GroupDetailPage.xaml.cs i ItemDetailPage.xaml.cs zamień referencje do klas: RecipeDataSource, RecipeDataGroup oraz RecipeDataItem (dodaj wymaganą przestrzeń nazw). c. dodaj nowy folder Data do projektu, a następnie umieść w nim plik JSON z przepisami Recipes.txt. d. analogicznie, dodaj folder Images i podfoldery reprezentujące rodzaje kuchni (chinese, french, german, indian, italian, oraz mexican) oraz folder z kafelkami (tiles). A następnie skopiuj do nich zawartość (dostępne ze strony przedmiotu), e. W pliku App.xaml.cs dodaj wewnątrz uchwytu zdarzenia OnLaunched asynchroniczne ładowanie przepisów (wymagana odpowiednia przestrzeń nazw): // Load recipe data await RecipeDataSource.LoadLocalDataAsync(); Po uruchomieniu strona główna projektu powinna wyglądać mniej/więcej tak: 2

7. W celu dopasowania wyglądu pozycji kulinarnych: a. w pliku StandardStyles.xaml w elemencie DataTemplate o nazwie Standard250x250ItemTemplate usuń element TextBlock powiązany z właściwością Subtitle (nasza klasa RecipeDataItem nie zawiera takiej właściwości), b. w tym samym elemencie zwiększ szerokość elementu Grida z 240 do 320, zmniejsz wysokość pozostawionego elementu TextBlock z 60 do 48 oraz usuń właściwość dołączoną: AutomationProperties.Name="Binding Title". Po uruchomieniu strona główna projektu powinna wyglądać mniej/więcej tak: Po wybraniu grupy przepisów chińskich strona powinna wyglądać mniej/więcej tak: c. w pliku GroupDetailPage.xaml w elemencie GridView.Header usuń pierwszy element TextBlock, zwiększ wysokość kolejnego elementu (obrazka) z 400 do 480 oraz zmień szerokość górnego marginesu z 0 do 10. d. w pliku StandardStyles.xaml w elemencie w elemencie DataTemplate o nazwie Standard500x130ItemTemplate zmień szerokość Grida z 480 do 360, 3

usuń atrybut Width="110" określający szerokość ramki aby zachować proporcję obrazków reprezentujących przepisy, e. usuń dwa elementy TextBlock, których właściwości powiązane są ze źródłami Subtitle i Description, f. w elemencie TextBlock, jedynym który pozostał, zamień wiązanie atrybutu Text z Title do ShortTitle, g. poniżej dodaj element StackPanel zawierający trzy bloki tekstu: <StackPanel Orientation="Horizontal"> <TextBlock Text="Preparation time:" Style="StaticResource BodyTextStyle" /> <TextBlock Text="Binding PrepTime" Style="StaticResource BodyTextStyle" Margin="4,0,4,0" /> <TextBlock Text="minutes" Style="StaticResource BodyTextStyle" /> Po uruchomieniu strona grupy przepisów chińskich powinna wyglądać mniej/więcej tak: Natomiast, strona szczegółowa z przepisami mniej/więcej tak: h. dodaj do folderu Common plik nowej klasy publicznej ListConverter dziedziczącej po interfejscie IValueConverter, 4

i. dodaj kod klasy konwertera łączącego tablicą stringów w jeden string, nie zapomnij o wymaganych przestrzeniach nazw: public object Convert(object value, Type targettype, object parameter, string language) ObservableCollection<string> items = (ObservableCollection<string>) value; StringBuilder builder = new StringBuilder(); foreach(var item in items) builder.append(item); builder.append("\r\n"); return builder.tostring(); public object ConvertBack(object value, Type targettype, object parameter, string language) throw new NotImplementedException(); j. w pliku ItemDetailPage.xaml wewnątrz sekcji <Page.Resources> dodaj do zasobów klasę konwertera: <common:listconverter x:key="listconverter"/>, k. zamień kod elementu DataTemplate znajdującego się wewnątrz FlipView.ItemTemplate na następujący (pozwalający na wyświetlanie przepisów w trzech kolumnach): <DataTemplate> <UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates"> <ScrollViewer x:name="scrollviewer" Style="StaticResource VerticalScrollViewerStyle" Grid.Row="1">  <Grid Margin="120,0,20,20"> <Grid.ColumnDefinitions> <ColumnDefinition Width="400" /> <ColumnDefinition Width="40" /> <ColumnDefinition Width="360" /> <ColumnDefinition Width="40" /> <ColumnDefinition /> </Grid.ColumnDefinitions> <StackPanel Orientation="Vertical" Grid.Column="0"> <TextBlock FontSize="26.667" FontWeight="Light" Text="Binding Title" TextWrapping="Wrap"/> <Image x:name="image" Width="400" Margin="0,20,0,10" Stretch="Uniform" Source="Binding Image"/> <StackPanel Orientation="Horizontal"> <TextBlock FontSize="26.667" FontWeight="Light" Text="Preparation time:"/> <TextBlock FontSize="26.667" FontWeight="Light" Text="Binding PrepTime" Margin="8,0,8,0"/> <TextBlock FontSize="26.667" FontWeight="Light" Text="minutes"/> <StackPanel Orientation="Vertical" Grid.Column="2"> <TextBlock FontSize="26.667" FontWeight="Light" Text="Ingredients" Margin="0,0,0,16"/> <TextBlock FontSize="20" FontWeight="Light" LineHeight="32.5" Text="Binding Ingredients, Converter=StaticResource ListConverter" TextWrapping="Wrap" /> <StackPanel Orientation="Vertical" Grid.Column="4"> <TextBlock FontSize="26.667" FontWeight="Light" Text="Directions" Margin="0,0,0,16"/> <ScrollViewer Style="StaticResource VerticalScrollViewerStyle"> <Grid> <TextBlock FontSize="20" FontWeight="Light" Text="Binding Directions" TextWrapping="Wrap" /> </Grid> </ScrollViewer> 5

</Grid> <VisualStateManager.VisualStateGroups>  <VisualStateGroup x:name="applicationviewstates"> <VisualState x:name="fullscreenlandscape"/> <VisualState x:name="filled"/>  <VisualState x:name="fullscreenportrait"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="image" Storyboard.TargetProperty="MaxHeight"> <DiscreteObjectKeyFrame KeyTime="0" Value="400"/> </Storyboard> </VisualState>  <VisualState x:name="snapped"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="scrollViewer" Storyboard.TargetProperty="Style"> <DiscreteObjectKeyFrame KeyTime="0" Value="StaticResource VerticalScrollViewerStyle"/> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="image" Storyboard.TargetProperty="MaxHeight"> <DiscreteObjectKeyFrame KeyTime="0" Value="160"/> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </ScrollViewer> </UserControl> </DataTemplate> Teraz strona szczegółowa z przepisami powinna wyglądać mniej/więcej tak: 6

IV. Orientacja obrazu urzadzenia Cel: Adaptacja układu kontrolek do orientacji obrazu użądzenia. 1. Uruchom napisany w poprzednim rozdziale program za pomocą symulatora, powinien on wyglądać następująco: 2. Obróć ekran o 90ᴼ, teraz program powinien on wyglądać mniej/więcej tak (jest to zasługa automatycznego zachowania się kontrolki GridView): 3. W przypadku wyświetlenia grupy przepisów rozmieszczenie widoku mogło by być lepsze: 7

4. W tym celu: a. w pliku GroupDetailPage.xaml po kontrolce ListView o nazwie itemlistview dodaj kolejną kontrolkę ListView i nazwij ją portraitlistview, b. wewnątrz kontrolki dodaj następujący kod:  <ListView x:name="portraitlistview" AutomationProperties.AutomationId="ItemListView" AutomationProperties.Name="Items In Group" TabIndex="1" Grid.Row="1" Visibility="Collapsed" Padding="86,0,20,60" ItemsSource="Binding Source=StaticResource itemsviewsource" ItemTemplate="StaticResource Standard500x130ItemTemplate" SelectionMode="None" IsItemClickEnabled="True" ItemClick="ItemView_ItemClick"> <ListView.Header> <StackPanel> <Image Source="Binding Image" Margin="20,-10,18,0" MaxWidth="480" Stretch="UniformToFill" HorizontalAlignment="Left"/> <TextBlock Margin="20,20,18,30" Text="Binding Description" Style="StaticResource BodyTextStyle"/> </ListView.Header> </ListView> c. wewnątrz elementu VisualState o nazwie FullScreenPortrait zamień następującą deklarację: <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Padding"> <DiscreteObjectKeyFrame KeyTime="0" Value="100,126,90,0"/> d. następującą: <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility"> 8

<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="portraitListView" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> Po uruchomieniu strona grupy przepisów chińskich powinna wyglądać mniej/więcej tak: 5. Jak widać poprawy wymaga jeszcze strona wyświetlająca szczegóły związane z przepisem: 9

a. w pliku ItemDetailPage.xaml po kontrolce FlipView o nazwie flipview dodaj kolejną kontrolkę FlipView i nazwij ją portraitflipview, b. wewnątrz kontrolki dodaj następujący kod:  <FlipView x:name="portraitflipview" AutomationProperties.AutomationId="ItemsFlipView" AutomationProperties.Name="Item Details" Grid.Row="1" Margin="0,-3,20,0" ItemsSource="Binding Source=StaticResource itemsviewsource" Visibility="Collapsed"> <FlipView.ItemTemplate> <DataTemplate> <UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates"> <ScrollViewer x:name="scrollviewer" Style="StaticResource VerticalScrollViewerStyle" Grid.Row="1">  <StackPanel Orientation="Vertical" Margin="100,0,20,0"> <StackPanel Orientation="Vertical"> <TextBlock FontSize="26.667" FontWeight="Light" Text="Binding Title" TextWrapping="Wrap"/> <Image x:name="image" Width="400" Margin="0,20,0,40" Stretch="Uniform" Source="Binding Image" HorizontalAlignment="Left"/> <StackPanel Orientation="Vertical"> <TextBlock FontSize="26.667" FontWeight="Light" Text="Ingredients" Margin="0,0,0,16"/> <TextBlock FontSize="20" FontWeight="Light" LineHeight="32.5" Text="Binding Ingredients, Converter=StaticResource ListConverter" TextWrapping="Wrap" /> <StackPanel Orientation="Vertical"> <TextBlock FontSize="26.667" FontWeight="Light" Text="Directions" Margin="0,24,0,16"/> <ScrollViewer Style="StaticResource VerticalScrollViewerStyle"> <Grid> <TextBlock FontSize="20" FontWeight="Light" Text="Binding Directions" TextWrapping="Wrap" /> </Grid> </ScrollViewer> </ScrollViewer> </UserControl> </DataTemplate> </FlipView.ItemTemplate> </FlipView> c. wewnątrz elementu VisualState o nazwie FullScreenPortrait VisualStateManager.VisualStateGroups znajdującego się wewnątrz elementu dodaj do istniejącego elementu scenariusza (storyboard) następujący kod: <ObjectAnimationUsingKeyFrames Storyboard.TargetName="flipView" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="portraitFlipView" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> Po uruchomieniu strona szczegółów danego przepisu powinna wyglądać mniej/więcej tak: 10

V. Semantic Zoom Cel: Dodanie funkcjonalności Semantic Zoom pozwalające na łatwiejszą nawigację po grupach przepisów 1. W celu dodania funkcjonalności Semantic Zoom do strony startowej: a. wewnątrz pliku GroupedItemsPage.xaml znajdź i zamień element GridView o nazwie itemgridview elementem SemanticZoom zawierającym dwa elementy GridView reprezentujących powiększony i pomniejszony widok: <SemanticZoom Grid.Row="1"> <SemanticZoom.ZoomedInView>  <GridView x:name="itemgridview" AutomationProperties.AutomationId="ItemGridView" AutomationProperties.Name="Grouped Items" Margin="0,-3,0,0" Padding="116,0,40,46" ItemsSource="Binding Source=StaticResource groupeditemsviewsource" ItemTemplate="StaticResource Standard250x250ItemTemplate" SelectionMode="None" IsItemClickEnabled="True" ItemClick="ItemView_ItemClick"> <GridView.ItemsPanel> <ItemsPanelTemplate> <VirtualizingStackPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </GridView.ItemsPanel> <GridView.GroupStyle> <GroupStyle> <GroupStyle.HeaderTemplate> <DataTemplate> <Grid Margin="1,0,0,6"> <Button AutomationProperties.Name="Group Title" Content="Binding Title" Click="Header_Click" Style="StaticResource TextButtonStyle"/> </Grid> 11

</DataTemplate> </GroupStyle.HeaderTemplate> <GroupStyle.Panel> <ItemsPanelTemplate> <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/> </ItemsPanelTemplate> </GroupStyle.Panel> </GroupStyle> </GridView.GroupStyle> </GridView> </SemanticZoom.ZoomedInView> <SemanticZoom.ZoomedOutView> <GridView x:name="groupgridview" Margin="116,0,40,46"> <GridView.ItemTemplate> <DataTemplate> <Grid Margin="0,0,24,0"> <Image Source="Binding Group.GroupImage" Width="250" Height="500" Stretch="UniformToFill" /> <TextBlock Text="Binding Group.Title" Foreground="StaticResource ListViewItemOverlayForegroundThemeBrush" Style="StaticResource TitleTextStyle" FontSize="28" Margin="12"/> <TextBlock Text="Binding Group.RecipesCount" Foreground="StaticResource ApplicationSecondaryForegroundThemeBrush" Style="StaticResource TitleTextStyle" FontSize="96" Margin="12,64,12,12" HorizontalAlignment="Right"/> </Grid> </DataTemplate> </GridView.ItemTemplate> </GridView> </SemanticZoom.ZoomedOutView> </SemanticZoom> b. wewnątrz elementu VisualState o nazwie Snapped dodaj wewnątrz elementu scenariusza dodaj następujące deklaracje: <ObjectAnimationUsingKeyFrames Storyboard.TargetName="groupGridView" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> c. wewnątrz pliku GroupedItemsPage.xaml.cs pod koniec metody LoadState dodaj następujący kod: this.groupgridview.itemssource = this.groupeditemsviewsource.view.collectiongroups; Po uruchomieniu strona startowa w przybliżeniu 3 wyglądać mniej/więcej tak: 3 Jeśli nie dysponujemy ekranem dotykowym, efekt przybliżenia możemy uzyskać przytrzymując klawisz ctrl podczas obrotu rolką myszy. 12

VI. Współdzielenie Cel: Dodanie funkcjonalności współdzielenia przepisów z innymi aplikacjami 1. W celu dodania funkcjonalności współdzielenia przepisów: a. w pliku ItemDetailPage.xaml.cs wewnątrz metody LoadState dodaj następujący kod (pamiętaj o wymaganych przestrzeniach nazw): // Register for DataRequested events DataTransferManager.GetForCurrentView().DataRequested += OnDataRequested; b. dodaj kod metody OnDataRequested udostępniający przepis: void OnDataRequested(DataTransferManager sender, DataRequestedEventArgs args) var request = args.request; var item = (RecipeDataItem)this.flipView.SelectedItem; request.data.properties.title = item.title; request.data.properties.description = "Recipe ingredients and directions"; // Share recipe text var recipe = "\r\ningredients\r\n"; recipe += String.Join("\r\n", item.ingredients); recipe += ("\r\n\r\ndirections\r\n" + item.directions); request.data.settext(recipe); c. na końcu metody SaveState metodzie dodaj kod: // Deregister the DataRequested event handler DataTransferManager.GetForCurrentView().DataRequested -= OnDataRequested; Po uruchomieniu programu proszę wybrać konkretny przepis i sprawdzić, że za pomocą funkcji Share z menu konterkstowego aplikacji (winlogo + c Share) możemy wysłać wiadomość zawierającą przepis. 13

VII. Wyszukiwanie Cel: Dodanie funkcjonalności wyszukiwania zawartości aplikacji wraz z możliwością sugerowania wybranych słów kluczowych. 1. Dodaj nowy Search Contrakt do projektu. 2. Zmień tytuł z App Name na Search. 3. Dodaj atrybut ItemClick="OnItemClick" do elementu GridView o nazwie resultsgridview. 4. W kodzie behind: a. dodaj kod następującej metody: private void OnItemClick(object sender, ItemClickEventArgs e) // Navigate to the page showing the recipe that was clicked this.frame.navigate(typeof(itemdetailpage), ((RecipeDataItem)e.ClickedItem).UniqueId); b. oraz pole: // Collection of RecipeDataItem collections representing search results private Dictionary<string, List<RecipeDataItem>> _results = new Dictionary<string, List<RecipeDataItem>>(); c. w metodzie LoadState dodaj poniższy kod przed komentarzem: // Communicate results through the view model: // Search recipes and tabulate results var groups = RecipeDataSource.GetGroups("AllGroups"); string query = querytext.tolower(); var all = new List<RecipeDataItem>(); _results.add("all", all); foreach (var group in groups) var items = new List<RecipeDataItem>(); _results.add(group.title, items); foreach (var item in group.items) if (item.title.tolower().contains(query) item.directions.tolower().contains(query)) all.add(item); items.add(item); filterlist.add(new Filter(group.Title, items.count, false)); filterlist[0].count = all.count; d. w metodzie Filter_SelectionChanged po komentarzy // TODO: Respond to the change in active filter ( ) dodaj poniższy kod: this.defaultviewmodel["results"] = _results[selectedfilter.name]; 5. W pliku StandardStyles.xaml w elemencie DataTemplate o nazwie StandardSmallIcon300x70ItemTemplate usuń element TextBlock powiązany z właściwością Subtitle oraz zmień jego szerokość z 40 na 60 oraz wysokość z 40 na 45. 14

6. Uruchom projekt i wyszukaj przepisy zawierające słowo kluczowe: sugar, strona z wynikami powinna wyglądać mniej/więcej tak: 7. W pliku App.xaml.cs wewnątrz OnLaunched zaraz po: await RecipeDataSource.LoadLocalDataAsync(); dodaj poniższy kod: // Register handler for SuggestionsRequested events from the search pane SearchPane.GetForCurrentView().SuggestionsRequested += OnSuggestionsRequested; 8. Dodaj kod wymaganej metody dostarczającej sugestie słów kluczowych podczas wyszukiwania: void OnSuggestionsRequested(SearchPane sender, SearchPaneSuggestionsRequestedEventArgs args) string query = args.querytext.tolower(); string[] terms = "salt", "pepper", "water", "egg", "vinegar", "flour", "rice", "sugar", "oil" ; foreach (var term in terms) if (term.startswith(query)) args.request.searchsuggestioncollection.appendquerysuggestion(term); 15

9. Po ponownym uruchomieniu lista sugestii powinna się wyświetlać podczas wpisywania słowa kluczowego: 10. Na początku metody OnSearchActivated dodaj następujący kod: // Reinitialize the app if a new instance was launched for search if (args.previousexecutionstate == ApplicationExecutionState.NotRunning args.previousexecutionstate == ApplicationExecutionState.ClosedByUser args.previousexecutionstate == ApplicationExecutionState.Terminated) // Load recipe data await RecipeDataSource.LoadLocalDataAsync(); // Register handler for SuggestionsRequested events from the search pane SearchPane.GetForCurrentView().SuggestionsRequested += OnSuggestionsRequested; 11. Uruchom i zatrzymaj aplikację. Przy nieaktywnej aplikacji wyszukaj za pomocą słowa kluczowego sugar, wynik powinien być mniej/więcej taki: 12. Po uruchomieniu aplikacji powinna się ona uruchomić w trybie wyszukiwania. 16