Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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;
}

 

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 569x (11.55 MB)

 

Predchádzajúci článok
Základné kontrolky UWP
Všetky články v sekcii
C # Windows Store aplikácie
Článok pre vás napísal Jan Blažek
Avatar
Užívateľské hodnotenie:
Ešte nikto nehodnotil, buď prvý!
Autor se věnuje programování webových aplikacích v PHP, konkrétně Laraveru. Neštítí se asi front-endu a občas zabrousí i do Javy. C# se učí z donucení ve škole.
Aktivity