Univerzálna aplikácia – Používateľské rozhranie pre Windows 8.1

Zatiaľ čo dátový model bol spoločný pre obidve cieľové platformy na ktorých sa bude aplikácia spúšťať, používateľské rozhranie, ktoré sprostredkuje zobrazenie údajov bude pre rôzne pre W8.1 a WP8.1 V tomto príspevku budeme riešiť zobrazenie pre Windows 8.1. Zameriame sa preto na zložku PrisadyPotraviny.Windows (Windows 8.1).

Návrhový kód XAML aplikácie je v súbore HubPage.xaml. Na zobrazenie zoznamu prísad v potravinách využijeme len sekciu 3, ktorá je napojená na zdroj údajov.

Sekcia 3 v šablóne Hub App

Ako prvý krok odstráňte z XAML kódu v súbore HubPage.xaml ostatné sekcie a ponechajte len sekciu 3. Zatiaľ nebudeme riešiť formu zobrazenia, ponecháme veľké dlaždice suplované obrázkami DarkGray.png, MediumGray.png a LightGray.png zo zložky Asets v zložke projektu Shared. Aby ste sa presvedčili, že váš dátový model funguje správne, v bloku kódu <Page.Resources> zmeňte atribúty Title a Description na atribúty UniqueId aTitle v týchto dvoch riadkoch

<TextBlock Text=”{Binding UniqueId}” Style=”{StaticResource TitleTextBlockStyle}”

TextWrapping=”NoWrap”/>

<TextBlock Text=”{Binding Title}” Style=”{StaticResource BodyTextBlockStyle}”

MaxHeight=”60″ />

Prvý náhľad zatiaľ neprispôsobeného zobrazenia údajov. Na obrázku je len výrez z hlavnej obrazovky aplikácie

Našim cieľom je zobraziť údaje čo najprehľadnejšie, preto budeme musieť realizovať v bloku kódu <Page.Resources> rozsiahlejšie úpravy. Šablónu na zobrazovanie údajov Standard310x260ItemTemplate premenujeme na Sablona60x30. Potrebujeme, aby sa každá prísada zobrazila ako malý obdĺžnik s tým, že v ňom bude názov prísady. Farba obdĺžnika má signalizovať nebezpečnosť prísady. Preto parameter Background prepojíme s atribútom Farba. Popis prísady sa zobrazí ako bublinová nápoveda – ToolTip. Parameter ToolTipService.ToolTip prepojíme s atribútom Bublina v ktorom je text bublinovej nápovedy.

Kompletný XAML kód sekcie Page.Resources:

<Page.Resources>

<DataTemplate x:Key=”Sablona60x30″>

<Grid HorizontalAlignment=”Left” Width=”60″ Height=”30″

ToolTipService.ToolTip=”{Binding Bublina}”

Background=”{Binding Farba}”>

<TextBlock Text=”{Binding UniqueId}” Foreground=”Black”

Style=”{StaticResource TitleTextBlockStyle}” Margin=”5,0,0,0″/>

</Grid>

</DataTemplate>

</Page.Resources>

 

Napokon ešte kozmetické úpravy. Nakoľko využívame len jednu sekciu a jej nadpis len zaberá miesto, odstráňte zobrazenie názvu sekcie.

Kompletný XAML kód stránky HubPage.xaml (bez sekcie Page.Resources) bude:

<Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”>

<Grid.ChildrenTransitions>

<TransitionCollection>

<EntranceThemeTransition/>

</TransitionCollection>

</Grid.ChildrenTransitions>

<Hub>

<Hub.Header>

<!– Back button and page title –>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width=”80″/>

<ColumnDefinition Width=”*”/>

</Grid.ColumnDefinitions>

<Button x:Name=”backButton” Style=”{StaticResource NavigationBackButtonNormalStyle}”

Margin=”0,0,39,0″

VerticalAlignment=”Top”

Command=”{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}”

AutomationProperties.Name=”Back”

AutomationProperties.AutomationId=”BackButton”

AutomationProperties.ItemType=”Navigation Button”/>

<TextBlock x:Name=”pageTitle” x:Uid=”Header”

Text=”Prísady v potravinách”

Style=”{StaticResource HeaderTextBlockStyle}” Grid.Column=”1″

VerticalAlignment=”Top” IsHitTestVisible=”false” TextWrapping=”NoWrap” />

</Grid>

</Hub.Header>

 

<HubSection IsHeaderInteractive=”True” DataContext=”{Binding Section3Items}”

d:DataContext=”{Binding Groups[3], Source={d:DesignData

Source=../PrisadyPotraviny.Shared/DataModel/SampleData.json, Type=data:SampleDataSource}}”

Padding=”40,40,40,32″>

<DataTemplate>

<GridView

x:Name=”itemGridView”

ItemsSource=”{Binding Items}”

Margin=”-9,-14,0,0″

AutomationProperties.AutomationId=”ItemGridView”

AutomationProperties.Name=”Items In Group”

ItemTemplate=”{StaticResource Sablona60x30}”

SelectionMode=”None”

IsSwipeEnabled=”false”

IsItemClickEnabled=”True”

ItemClick=”ItemView_ItemClick”>

</GridView>

</DataTemplate>

</HubSection>

 

</Hub>

</Grid>

 

V tomto štádiu môžete aplikáciu pre Windows 8.1 priebežne otestovať

Test aplikácie

Zostávajú posledné úpravy. Všimnite si, že až teraz, keď už aplikácia celkom uspokojivo funguje sme sa dostali k úpravám aplikačného kódu v súbore HupPage.xaml.cs. Našim cieľom bude, aby aplikácia po ťuknutí na položku vypísala okne oznamu podrobnejšie údaje o predmentnej prísade.

Všimnite si metódu LoadState v ktorej sa volá metóda GetGroupAsync triedy SampleDataSource pre načítanie údajov, či už z webu, alebo z lokálneho JSON súboru.

private async void NavigationHelper_LoadState(object sender, LoadStateEventArgs e)

{

var sampleDataGroup = await SampleDataSource.GetGroupAsync(“Group-4”);

this.DefaultViewModel[“Section3Items”] = sampleDataGroup;

}

 

Nakoľko sme odstránili záhlavia sekcií, môžeme odstrániť aj kód metódy Hub_SectionHeaderClick pre obsluhu udalosti ťuknutia na záhlavie.

Aby sme mohli podrobnejšie vypísať údaje o vybranej prísade, využijeme metódu ItemView_ItemClick, ktorá obsluhuje udalosť ťuknutia na položku. Na výpis údajov využijeme objekt MessageDialog.

Do súboru pridajte referenciu na menný priestor

using Windows.UI.Popups;

V kóde metódy zostavíme textový reťazec a vypíšeme ho

async void ItemView_ItemClick(object sender, ItemClickEventArgs e)

{

string sKod = ((SampleDataItem)e.ClickedItem).UniqueId;

string sNazov = ((SampleDataItem)e.ClickedItem).Title;

string sSkodlivost = ((SampleDataItem)e.ClickedItem).Skodlivost;

String sVysledok = sNazov + ” – ” + sSkodlivost;

var dialog = new MessageDialog(sVysledok);

dialog.Title = sKod;

await dialog.ShowAsync();

}

Výpis pomocou objektu MessageDialog je asynchrónna operácia, preto je celá metóda asynchrónna.

Týmto krokom je aplikácia pre Windows 8.1 prakticky hotová a môžete ju vyskúšať.

Výpis informácií o vybranej prísade

Reklamy

Pridaj komentár

Zadajte svoje údaje, alebo kliknite na ikonu pre prihlásenie:

WordPress.com Logo

Na komentovanie používate váš WordPress.com účet. Odhlásiť sa / Zmeniť )

Twitter picture

Na komentovanie používate váš Twitter účet. Odhlásiť sa / Zmeniť )

Facebook photo

Na komentovanie používate váš Facebook účet. Odhlásiť sa / Zmeniť )

Google+ photo

Na komentovanie používate váš Google+ účet. Odhlásiť sa / Zmeniť )

Connecting to %s


%d bloggers like this: