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í.

Lekce 9 - Relative panel a SplitView

V minulé lekci, Základní kontrolky UWP, jsme se zabývali popisem XAML kontrolek univerzálních Windows aplikací.

Dnes si v tutoriálu vysvětlíme práci s dvěma dalšími prvky. Práci s relative panelem si vysvětlíme za pomoci tagu rectangle, který pouze vytvoří obdélník. V životě jsem nepřišel na to, jaký by tag rectangle mohl mít využití v reálné aplikaci, ale myslím, že pro výukové účely je to geniální způsob pro pochopení chování kontejnerů.

Relative panel

Tento párový tag nám umožňuje udávat pozici prvků umístěných v tomto elementu relativně k panelu, nebo k ostatním prvkům v tomto panelu. Připravíme si tedy relative panel, do kterého budeme vkládat obdélníky.

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

</RelativePanel>

Nyní umístíme obdélník doprostřed relative panelu. V relative panelu je dobré uvádět atributy MinHeight a MinWidth, aby nám obdélníky téměř nezmizely, když budeme okno stahovat do malých rozměrů.

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

Abychom mohli zadávat pozici prvků relativně, musíme tyto vlastnosti volat s prexifem RelativePanel. Když udáváme relativní pozici vůči panelu, jak se znázorněno výše, musíme předat logickou hodnotu (tedy true nebo false). Pokud ale udáváme relativní pozici prvku vůči jinému prvku v relative panelu, tak udáváme jako parametr jméno daného prvku. Pojďme si vytvořit fialový obdélník, který bude zleva přilepený k hraně relative panelu a pravou stranu bude mít zarovnanou s naším modrým obdélníkem.

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

Ve značkovacím jazyce XAML můžeme také řadit prvky v relative panelu i pod sebe. Vytvoříme si obdélník, který bude pod fialovým obdélníkem, a bude zabírat všechnu šířku relative panelu. Tím nám vznikne prázdné místo napravo od fialového obdélníku. Rovnou ho zaplníme zeleným obdélníkem, kterému nastavíme vlastnost RelativePanel.RightOf na Purple. Kód bude následující:

<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" />

Dále si přidáme poslední obdélník a ten bude zespoda nalepený na relative panel a horní hranu bude mít zároveň s obdélníkem uprostřed. Jelikož na tento obdélník nebudou žádné návaznosti, nemusíme ho tedy pojmenovávat.

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

Nyní si zkuste změnit kód výše na následující:

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

Nic se nestalo, že? Je to tím, že XAML dává přednost při zarovnávání určitým elementům.

Přednosti řazení

1. S panelem

  • AlignTopWithPanel
  • AlignLeftWithPanel
  • atd...

2. Vůči jiným prvkům

  • AlignTopWith
  • AlignLeftWith
  • atd...

3. "Sourozenecná" pozice

  • LeftOf
  • Below
  • atd...

SplitView

Pod pojmem splitView si můžeme představit panel, který je v levé či pravé části aplikace a při kliknutí na tlačítko se nám panel zvětší nebo zmenší tak, že se vysune zkraje aplikace.

SplitView zapíšeme jednoduše:

<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, který bude ve vysouvacím panelu. Do SplitView.Content zapíšeme obsah, který bude před panelem.

Atributy SpliView:

  • CompactPaneLength - délka panelu, když je zatažený
  • OpenPaneLength - délka otevřeného panelu
  • DisplayMode - Může nabývat dvou hodnot. CompactInLine - odsune obsah SplitView.Content. CompactOverlay - překryje ho.

Nakonec už sem někam přihodíme tlačítko s následující funkcí:

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

 

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 569x (11.55 MB)

 

Předchozí článek
Základní kontrolky UWP
Všechny články v sekci
Windows 10 aplikace v C# .NET
Článek pro vás napsal Jan Blažek
Avatar
Uživatelské hodnocení:
6 hlasů
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