Univerzálna aplikácia – používateľské rozhranie pre Windows Phone

Pokračujeme druhou vetvou vytvárania univerzálnej aplikácie – návrhom používateľského rozhrania aplikácie pre mobilnú platformu Windows Phone 8.1. Dielčí projekt pre túto platformu je v zložke PrisadyPotraviny.Windows Phone (Windows Phone 8.1). Bude využívať spoločný dátový model s Windows 8.1 aplikáciou.

Skúste pre zaujímavosť spustiť projekt v simulátore platformy Windows Phone 8.1 (alebo na reálnom zariadení) po nahradení cvičných údajov v lokálnom JSON súbore reálnymi a po úprave dátového modelu. Tieto úpravy sú popísané v stati Spoločný dátový model. Po spustení aplikácie sa vyrolujte do sekcie 2, ktorá obsahuje údaje z dátového modelu vypísané formou dlaždíc. Bez úprav to v obmedzenom rozsahu funguje vďaka zhodnému názvu atribútu Title v pôvodnom cvičnom aj novom reálnom dátovom modeli.

Spustenie aplikácie na platforme Windows Phone 8.1 po výmene dátového modelu

Poznámka, obrázky sú z emulátora a čísla v čiernych poliach vľavo sú ladiace informácie o procesoch, vláknach a podobne.

Návrhový kód XAML aplikácie je podobne ako v čiastkovom projekte pre Windows 8.1 v súbore HubPage.xaml. Na zobrazenie zoznamu prísad v potravinách využijeme len Sekciu 2, ktorá je napojená na zdroj údajov. Aby sa naplno využila plocha obrazovky, odstráňte aj návrhový kód pre výpis názvu sekcie – máme len jednu sekciu. Môžete zároveň odstrániť aj šablónu HubSectionHeaderTemplate pre výpis záhlavia sekcie.

Najskôr vymažte návrhový kód týkajúci sa ostatných sekcii a ponechajte len kód Sekcie 2. V elemente Page.Resources môžete odstrániť kódy šablón StandardTripleLineItemTemplate a StandardDoubleLineItemTemplate.

Podobne ako vo Windows 8 aplikácii, aj v tomto prípade potrebujete zmeniť spôsob zobrazenia, aby bol zoznam chemických prísad na obrazovke čo najprehľadnejší. Šablónu Standard200x180TileItemTemplate premenujeme na Moja60x30TileItemTemplate a upravíme.

Kompletný kód hlavnej stránky v súbore HubPage.xaml bude

<Page

x:Class=”PrisadyPotraviny.HubPage”

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

xmlns:local=”using:PrisadyPotraviny”

xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243;

xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;

DataContext=”{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}”

d:DataContext=”{Binding Source={d:DesignData

Source=../PrisadyPotraviny.Shared/DataModel/SampleData.json,

Type=data:SampleDataSource}}”

xmlns:data=”using:PrisadyPotraviny.Data”

mc:Ignorable=”d”>

 

<Page.Resources>

<ResourceDictionary>

<ResourceDictionary.ThemeDictionaries>

<ResourceDictionary x:Key=”Default”>

<ImageBrush x:Key=”HubBackgroundImageBrush”

ImageSource=”Assets/HubBackground.png”/>

</ResourceDictionary>

<ResourceDictionary x:Key=”HighContrast”>

<ImageBrush x:Key=”HubBackgroundImageBrush” ImageSource=”{x:Null}”/>

</ResourceDictionary>

</ResourceDictionary.ThemeDictionaries>

 

<!– Sablona–>

<DataTemplate x:Key=”Moja60x30TileItemTemplate”>

<Grid Margin=”0,0,9.5,9.5″ Background=”{Binding Farba}”

Width=”60″ Height=”30″ >

<TextBlock Text=”{Binding UniqueId}” VerticalAlignment=”Bottom”

Margin=”9.5,0,0,6.5″ Style=”{ThemeResource

BaseTextBlockStyle}”/>

</Grid>

</DataTemplate>

</ResourceDictionary>

</Page.Resources>

 

<Grid x:Name=”LayoutRoot”>

<Hub x:Name=”Hub” x:Uid=”Hub” Header=”application name”

Background=”{ThemeResource HubBackgroundImageBrush}”>

<HubSection Width=”Auto” DataContext=”{Binding Groups[0]}” >

<DataTemplate>

<GridView

Margin=”0,-20,0,0″

ItemsSource=”{Binding Items}”

AutomationProperties.AutomationId=”ItemGridView”

AutomationProperties.Name=”Items In Group”

ItemTemplate=”{StaticResource Moja60x30TileItemTemplate}”

SelectionMode=”None”

IsItemClickEnabled=”True”

ItemClick=”ItemView_ItemClick”

ContinuumNavigationTransitionInfo.ExitElementContainer=”True”>

<GridView.ItemsPanel>

<ItemsPanelTemplate>

<ItemsWrapGrid />

</ItemsPanelTemplate>

</GridView.ItemsPanel>

</GridView>

</DataTemplate>

</HubSection>

</Hub>

</Grid>

</Page>

 

Návrh používateľského rozhrania Windows Phone 8.1 aplikácie vo vývojovom prostredí Visual Studio

Teraz môžete aplikáciu znovu spustiť a pozrieť si výsledný dizajn hlavnej stránky aplikácie

Spustenie aplikácie – hlavná stránka

Zdôrazňujeme, že hlavná stránka aplikácia funguje, bez toho aby ste museli robiť akékoľvek úpravy kódu v súbore HubPage.xaml.cs.

Po odladení dizajnu a fungovania hlavnej stránky aplikácie HubPage.xaml sa zameriame na úpravy stránky ItemPage.xaml, ktorá slúži na zobrazenie detailov o vybranej položke. Upravte kód stránky aby sa vo vhodnom usporiadaní zobrazili všetky atribúty.

<Grid x:Name=”LayoutRoot”>

<Grid.ChildrenTransitions>

<TransitionCollection>

<EntranceThemeTransition/>

</TransitionCollection>

</Grid.ChildrenTransitions>

 

<Grid.RowDefinitions>

<RowDefinition Height=”Auto”/>

<RowDefinition Height=”*”/>

</Grid.RowDefinitions>

 

<!– Title Panel –>

<StackPanel Grid.Row=”0″ Margin=”19,0,0,0″>

<TextBlock x:Uid=”Header” Text=”application name”

Style=”{ThemeResource TitleTextBlockStyle}” Margin=”0,12,0,0″ />

<TextBlock Text=”{Binding UniqueId}”

Style=”{ThemeResource HeaderTextBlockStyle}” Margin=”0,-6.5,0,26.5″ />

<TextBlock Text=”{Binding Title}”

Style=”{ThemeResource BaseTextBlockStyle}” Margin=”0,10,0,0″ />

<TextBlock Text=”{Binding Skodlivost}”

Style=”{ThemeResource BaseTextBlockStyle}” Margin=”0,10,0,0″

TextWrapping=”WrapWholeWords”/>

</StackPanel>

 

<Grid Grid.Row=”1″ x:Name=”ContentRoot” Margin=”19,9.5,19,0″>

 

</Grid>

</Grid>

Spustenie aplikácie – stránka na zobrazenie detailov

Ak porovnáte spôsob zobrazenia detailov o vybranej položke vo Windows 8.1 cez okno MessageDialog a vo Windows Phone 8.1 cez samostatnú stránku ItemPage.xaml, je to v súlade s účelom. Detailných informácií o položke je v tejto aplikácii pomerne málo, takže na ich zobrazenie stačí dialógové okno. Na klasickom okne aplikácie by informácia na dva riadky pôsobila trochu osamelo. Naproti tomu na menšom displeji chytrého telefónu je zobrazenie detailných informácií primerané. Aplikáciu môžete ďalej vylepšovať, napríklad nastaviť farbu pozadia stránky pre zobrazenie detailov podľa stupňa nebezpečnosti prísady a podobne.

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: