Postup pri adaptácii aplikácie na Windows 8.1 (2. časť)

Vyskakovací rámček pre nastavenie viacerých parametrov

Prečo riešim tento vizuálny prvok ako druhú najdôležitejšiu záležitosť po flexibilnom rozdelení obrazovky? Pravidlá pre schválenie aplikácie pre Windows 8 vyžadujú, aby vývojár deklaroval, či aplikácia od používateľa zbiera od používateľa nejaké údaje, a ak áno, ako s nimi nakladá. Vyžaduje sa aj (zrejme len pre niektoré trhy) aby vývojár deklaroval zásady spracovávania údajov aj na webe a aby v aplikácii bol na túto stránku odkaz. Deklarácia o tom, či a ako aplikácia zbiera od používateľa údaje je potrebné deklarovať na paneli Nastavenie

Nastavenie viacerých parametrov sa vo Windows 8 aplikáciách riešilo spravidla prostredníctvom panela z knižnice Calisto SDK. Jednak to bolo dodatkové riešenie pomocou knižnice “tretej strany” a problém nastal s prvkom WebView, ktorý prekrýval tento panel.

Windows 8.1 poskytuje pre tento účel nový ovládací prvok SettingsFlyout. Volá sa teda rovnako, ako predtým používaný prvok z knižnice Callisto. Tento prvok, podobne ako prvok Page môže byť v XAML deklarovaný ako koreňový element dokumentu s atribútom x : Class nastaveným na podtriedu triedy SettingsFlyout. Môžete nastaviť Šírku vyskakovacieho rámčeku, jeho výška bude vždy cez celú obrazovku. Rámik SettingsFlyout pre nastavenie sa aktivuje tlačidlom Nastavenie z panelu kľúčových tlačidiel. Zatvára sa tlačidlom Späť. Programovo ho zobrazíte metódou Show alebo ShowIndependent a zavrieť ho môžete volaním metódy Hide . Ak je ovládací prvok SettingsFlyout zobrazený na základe volanie metódy Show, potom sa kliknutím na tlačidlo Späť rámik zavrie a znovu sa otvorí tabla pre nastavenie. Pri zobrazení metódou ShowIndependent sa kliknutím na tlačidlo Späť rámček zavrie a používateľ sa vráti do aplikácie.

Súčasne môže byť aktívny iba jeden ovládací prvok SettingsFlyout . Volaním metódy Show pre SettingsFlyout sa zatvoria všetky ostatné ovládacie prvky SettingsFlyout , ktoré sú práve zobrazené .

Rámik SettingsFlyout má dve časti – záhlavie a obsah. V záhlaví je navigačné tlačidlo Späť, nadpis a ak ju nadefinujete, tak aj ikona. V predvolenom nastavení je ako ikona nastavená malá ikona vašej aplikácie. Nastavením parametra IconSource môžete zadať inú ikonu . Farebný dizajn hlavičky môžete doladiť pomocou parametrov HeaderBackgroundHeaderForeground.

Pridanie rámika Nastavenie

  1. V kontextovom menu aplikovanom na projekt vyberte Add > New Item. .
  2. V dialógu Add New Item vyberte položku Setting Flyout.
  3. Zadajte názov súboru

Pridanie Setting Flyout

Zobrazí sa ukážková preddefinovaná šablóna prvku pre nastavenie aplikácie do ktorej môžete pridávať ovládacie prvky na nastavenie parametrov aplikácie

Preddefinovaná šablóna prvku pre nastavenie aplikácie

Text “Lorem ipsum” nahraďte svojim textom, napríklad povinným vyhlásením o ochrane osobných údajov, ak aplikácia nejaké zbiera, alebo deklarovaním toho, že aplikácia od používateľa žiadne údaje nezbiera. Napríklad (všimnite si implicitne pridaných komentárov, ktoré vám pomôžu zorientovať sa)

<SettingsFlyout

x:Class=”BlogBranislavaRaca.SettingsFlyout1″

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

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

xmlns:local=”using:BlogBranislavaRaca”

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

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

mc:Ignorable=”d”

IconSource=”Assets/SmallLogo.png”

Title=”Nastavenie”

d:DesignWidth=”346″>

 


<!– This StackPanel acts as a root panel for vertical layout of the content sections –>

<StackPanel VerticalAlignment=”Stretch” HorizontalAlignment=”Stretch” >


<!– The StackPanel(s) below define individual content sections –>

<!– Content Section 1–>

<StackPanel Style=”{StaticResource SettingsFlyoutSectionStyle}”>

<!– Section 1 header –>

<TextBlock Style=”{StaticResource TitleTextBlockStyle}” Text=”Prehlásenie” />


<!– Section 1 body –>

<TextBlock Style=”{StaticResource BodyTextBlockStyle}” Margin=”0,0,0,25″ TextWrapping=”Wrap”>

<TextBlock.Text>

Táto aplikácia nezbiera od používateľa žiadne údaje.

</TextBlock.Text>

</TextBlock>

<HyperlinkButton Content=”Ochrana osobných údajov” Foreground=”DarkBlue”

NavigateUri=”http://donorsforum.vnet.sk/OchranaOsobnychUdajovBR.htm”&gt;

</HyperlinkButton>

</StackPanel>


<!– Define more Content Sections below as necessary –>

</StackPanel>

</SettingsFlyout>;

Vizuálne sa prvok zobrazí takto

Upravená šablóna prvku pre nastavenie aplikácie

Ak ste si preštudovali zoznam novieniek vo Windows 8.1 pre vývojárov, pri pohľade na link vložený do textu si určite spomeniete, že Windows 8.1 umožňuje pridať do textu element Hyperlink. Pracuje sa s ním rovnako ako s ostatným textom a spoločne s ním sa môže na konci riadku zalomiť. Ak je text označený ako hypertextové prepojenie, zobrazuje farebne zvýraznený a po kliknutí sa prejde na lokalitu určenú identifikátorom URI (Uniform Resource Identifier) vo vlastnosti NavigateUri. Použijeme RichTextBlock

<StackPanel VerticalAlignment=”Stretch” HorizontalAlignment=”Stretch” >

<!– The StackPanel(s) below define individual content sections –>

<!– Content Section 1–>

<StackPanel Style=”{StaticResource SettingsFlyoutSectionStyle}”>

<!– Section 1 header –>

<TextBlock Style=”{StaticResource TitleTextBlockStyle}” Text=”Prehlásenie” />

<!– Section 1 body –>

<RichTextBlock>

<Paragraph></Paragraph>

<Paragraph>Táto aplikácia nezbiera od používateľa žiadne údaje..

<Hyperlink NavigateUri=

http://donorsforum.vnet.sk/OchranaOsobnychUdajovBR.htm”&gt;

Ochrana osobných údajov</Hyperlink>

</Paragraph>

</RichTextBlock>

</StackPanel>

<!– Define more Content Sections below as necessary –>

</StackPanel>

 

Aby sa prvok SettingsFlyout zobrazil, musíte ho v App.xaml.cs pridružiť k objektu SettingsPane aplikácie v udalosti SettingsPane.CommandsRequested a pridaním objektu triedy SettingsCommand do kolekcie ApplicationCommands .

V metóde OnLaunched pridajte riadok

SettingsPane.GetForCurrentView().CommandsRequested += OnCommandsRequested;

 

Telo metódy v ktorej vytvoríte inštanciu ovládacieho prvku SettingsFlyout a zobrazíte ho bude:

void OnCommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)

{

Windows.UI.ApplicationSettings.SettingsCommand updateSetting =

new Windows.UI.ApplicationSettings.SettingsCommand(“Ochrana osobných údajov”, “Ochrana osobných údajov”, (handler) =>

{

SettingsFlyout1 setFlyout = new SettingsFlyout1();

setFlyout.Show();

});

args.Request.ApplicationCommands.Add(updateSetting);

}

Teraz môžete vyskúšať fungovanie nastavenia

Nastavenie

Na rozdiel od prvku z knižnice Callisto integrovaný prvok SettingsFlyout vo Windows 8.1 funguje dobre aj pri prekrývaní prvku WebView

Ak kliknete na hyperlink v texte, zobrazí sa príslušná stránka v prehliadači, pričom aplikácia si s prehliadačom rozdelia obrazovky pol na pol

Zobrazenie stránky na ktorú odkazoval odkaz v texte

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: