9. diel - Relative panel a SplitView

V minulej lekcii, Základné kontrolky UWP , sme sa zaoberali popisom XAML kontroliek univerzálnych Windows aplikácií. Dnes si v tutoriálu vysvetlíme práci s dvoma ďalšími prvkami. Prácu s relative panelom si vysvetlíme za pomoci tagu rectangle, ktorý iba vytvorí obdĺžnik. V živote som neprišiel na to, aký by tag rectangle mohol mať využitie v reálnej aplikácii, ale myslím, že pre výukové účely je to geniálny spôsob pre pochopenie správania kontajnerov.

Relative panel

Tento párový tag nám umožňuje udávať pozíciu prvkov umiestnených v tomto elementu relatívne k panelu, alebo k ostatným prvkom v tomto paneli. Pripravíme si teda relative panel, do ktorého budeme vkladať obdĺžniky.

<RelativePanel VerticalAlignment="Stretch"
    HorizontalAlignment="Stretch">

</RelativePanel>

Teraz umiestnime obdĺžnik doprostred relative panelu. V relative paneli je dobré uvádzať atribúty MinHeight a MinWidth, aby nám obdĺžniky takmer nezmizli, keď budeme okno sťahovať do malých rozmerov.

<Rectangle x:Name="Blue" Fill="Blue"
    MinWidth="50" MinHeight="50"
    RelativePanel.AlignHorizontalCenterWithPanel="True"
    RelativePanel.AlignVerticalCenterWithPanel="True" />

Aby sme mohli zadávať pozíciu prvkov relatívne, musíme tieto vlastnosti volať s prexifem RelativePanel. Keď udávame relatívnu pozíciu voči panelu, ako sa znázornené vyššie, musíme odovzdať logickú hodnotu (teda true alebo false). Pokiaľ ale udávame relatívnu pozíciu prvku voči inému prvku v relative paneli, tak udávame ako parameter meno daného prvku. Poďme si vytvoriť fialový obdĺžnik, ktorý bude zľava prilepený k hrane relative panelu a pravú stranu bude mať zarovnanú s našim modrým obdĺžnikom.

<Rectangle x:Name="Purple" Fill="Purple"
    MinHeight="50" MinWidth="50"
    RelativePanel.AlignRightWith="Blue"
    RelativePanel.AlignLeftWithPanel="True"/>

Vo značkovacom jazyku XAML môžeme tiež radiť prvky v relative paneli i pod seba. Vytvoríme si obdĺžnik, ktorý bude pod fialovým obdĺžnikom, a bude zaberať všetku šírku relative panelu. Tým nám vznikne prázdne miesto napravo od fialového obdĺžnika. Rovno ho zaplníme zeleným obdĺžnikom, ktorému nastavíme vlastnosť RelativePanel.RightOf na Purple. Kód bude nasledujúci:

<Rectangle x:Name="Yellow" Fill="Yellow"
    MinHeight="50" MinWidth="50"
    RelativePanel.Below="Purple"
    RelativePanel.AlignLeftWithPanel="True"
    RelativePanel.AlignRightWithPanel="True" />

<Rectangle x:Name="Green" Fill="Green"
    MinHeight="50" MinWidth="50"
    RelativePanel.RightOf="Purple"
    RelativePanel.AlignRightWithPanel="True" />

Ďalej si pridáme posledný obdĺžnik a ten bude zospodu nalepený na relative panel a hornú hranu bude mať zároveň s obdĺžnikom uprostred. Keďže na tento obdĺžnik nebudú žiadne nadväznosti, nemusíme ho teda pomenovávať.

<Rectangle MinWidth="50" MinHeight="50"
    Fill="Black"
    RelativePanel.AlignBottomWithPanel="True"
    RelativePanel.AlignTopWith="Blue" />

Teraz si skúste zmeniť kód vyššie na nasledujúce:

<Rectangle MinWidth="50" MinHeight="50"
    Fill="Black"
    RelativePanel.AlignBottomWithPanel="True"
    RelativePanel.AlignBottomWith="Blue"
    RelativePanel.AlignTopWith="Blue" />

Nič sa nestalo, že? Je to tým, že XAML dáva prednosť pri zarovnávanie určitým elementom.

Prednosti radenie

1. S panelom

• AlignTopWithPanel
• AlignLeftWithPanel
• atd ...

2. Voči iným prvkom

• AlignTopWith
• AlignLeftWith
• atd ...

3. "Sourozenecná" pozície

• LeftOf
• Below
• atd ...

SplitView

Pod pojmom splitView si môžeme predstaviť panel, ktorý je v ľavej či pravej časti aplikácie a pri kliknutí na tlačidlo sa nám panel zväčší alebo zmenší tak, že sa vysunie skraja aplikácie.

SplitView zapíšeme jednoducho:

<SplitView x:Name="SplitView" DisplayMode="CompactInline"
    CompactPaneLength="15" OpenPaneLength="60" >
    <SplitView.Pane>
        <StackPanel>
            <Button Content="Home" />
            <Button Content="Sign In" />
            <Button Content="Sign Up" />
        </StackPanel>
    </SplitView.Pane>
    <SplitView.Content>
        <StackPanel>
            <TextBlock Text="Text" />
            <TextBlock Text="Text" />
            <TextBlock Text="Text" />
        </StackPanel>
    </SplitView.Content>
</SplitView>

Do SplitView.Pane zapíšeme obsah, ktorý bude vo vysúvacím paneli. Do SplitView.Content zapíšeme obsah, ktorý bude pred panelom.

Atribúty SpliView:

• CompactPaneLength - dĺžka panelu, keď je zatiahnutý
• OpenPaneLength - dĺžka otvoreného panela
• DisplayMode - Môže nadobúdať dvoch hodnôt. CompactInLine - odsunie obsah SplitView.Content. CompactOverlay - prekryje ho.

Nakoniec už sem niekam prihodíme tlačidlo s nasledujúcou funkciou:

private void Button_Click(object sender, RoutedEventArgs e)
{
    SplitView.IsPaneOpen = !SplitView.IsPaneOpen;
}