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 8 - Základní kontrolky UWP

V minulé lekci, Programujeme pro Windows 8 - Vlastní styly v XAML, jsme si ukázali tvorbu vlastních stylů.

Dnes si popíšeme kontrolky v XAML, jejich použití a nejdůležitější vlastnosti a události. Na začátek si vytvořme nový projekt a pojmenujme si ho třeba CommonControls. Grid si rozdělíme do sedmi řádků a dvou sloupců. U řádků nastavme vlastnost Height na Auto a u sloupců rovněž Width na Auto.

TimePicker

Díky tomuto elementu můžeme nechat vybrat datum, jak už z názvu vyplývá. Pro náš nejdůležitější vlastností bude pravděpodobně ClockIdentifier - zde nastavujeme, zda chceme dvanácti nebo čtyřiadvaceti hodinový formát času. Změnu vybraného času zjistíme pomocí události TimeChanged.

Následující kód vygeneruje TimePicker a při změně času ho vypíše do TexBlocku vedle.

<TextBlock Text="TimePicker" VerticalAlignment="Center" />
<StackPanel Orientation="Horizontal" Grid.Column="1">
    <TimePicker
        ClockIdentifier="24HourClock"
        Margin="20,0,0,20"
        x:Name="TimePicker"
        TimeChanged="TimePicker_TimeChanged" />
    <TextBlock Grid.Column="1" x:Name="TimePickerResult" />
</StackPanel>

Do MainPage.xaml.cs připíšeme metodu, která se provede při změně data.

private void TimePicker_TimeChanged(object sender, TimePickerValueChangedEventArgs e)
{
    TimePickerResult.Text = TimePicker.Time.ToString();
}

CalendarDatePicker

Podobná kontrolka jako TimePicker, akorát že zde vybíráme datum. Napíšeme si podobný příklad, jako je u TimePickeru. Je s tím rozdílem, že zde se atribut k odkazu na funkci jmenuje DateChanger.

<TextBlock Grid.Row="1"
    Text="CalendarPicker"
    VerticalAlignment="Center" />
<StackPanel Orientation="Horizontal"
    Grid.Column="1"
    Grid.Row="1">
    <CalendarDatePicker
        Grid.Row="1"
        Margin="20,10,0,20"
        x:Name="CalendarPicker"
        DateChanged="CalendarPicker_DateChanged" />
    <TextBlock Margin="20,5,0,0" x:Name="CalendarPickerResult" />
</StackPanel>

Metoda, na kterou odkazujeme, jednoduše vezme zvolené datum vlastností Date a vypíše jej do TextBlocku.

private void CalendarPicker_DateChanged(CalendarDatePicker sender, CalendarDatePickerDateChangedEventArgs args)
{
    CalendarPickerResult.Text = CalendarPicker.Date.ToString();
}

CalendarView

Jedná se o otevřený rozbalený DatePicker, který nám umožňuje vybrat více než jedno datum. Tím docílíme nastavením vlastnosti SelectionMode na Multiple. Událost SelectedDatesChanged se zavolá vždy, když uživatel vybere nebo odstraní nějaké datum. K našemu kódu přidáme níže uvedený kód.

<TextBlock Grid.Row="2" Text="CalendarView" VerticalAlignment="Center" />
<StackPanel Orientation="Horizontal"
    Grid.Column="1"
    Grid.Row="2"
    Margin="20,0,0,20" >
<CalendarView x:Name="CalendarView"
    SelectionMode="Multiple"
    SelectedDatesChanged="CalendarView_SelectedDatesChanged" />
<TextBlock Margin="20,10" x:Name="CalendarViewResult" />
</StackPanel>

Náš kód v pozadí bude následující:

private void CalendarView_SelectedDatesChanged(CalendarView sender, CalendarViewSelectedDatesChangedEventArgs args)
{
    var selectedDates = sender.SelectedDates.Select(p => p.Date.Day.ToString() + "/" + p.Date.Month.ToString());
    CalendarViewResult.Text = string.Join(", ", selectedDates);
}

Jelikož je sender typu CalendarView, můžeme na něm okamžitě zavolat vlastnost SelectedDates, která nám vrátí všechna data, která uživatel vybral. Dále použijeme Linq a vybereme z každého datumu den a měsíc. Tyto dvě položky spojíme pomocí lomítka a následně všechny tyto položky spojíme dohromady pomocí string.Join. To vše nastavíme jako text TextBlocku s názvem CalendarViewResult. Pokud jste o Linq nikdy neslyšeli, můžete si o něm přečíst v kurzu o C# kolekcích. Případně to prozatím berte jako černou skříňku, u které víte, že funguje, ale už ne jak.

FlyoutButton

Zde se jedná o obyčejný button, z kterého ovšem při kliknutí vyletí nějaký obsah. V našem případě na nás vyletí pouze prostý text s možností skrytí. Kód je následující.

<TextBlock Grid.Row="3" Text="FlyoutButton" VerticalAlignment="Center" />
<Button x:Name="FlyoutButton"
    Margin="20,20,0,20"
    Grid.Row="3"
    Grid.Column="1"
    Content="FlyoutButton">
    <Button.Flyout>
        <Flyout x:Name="Flyout">
            <StackPanel Margin="10,10,10,10">
                <TextBlock Text="I just flew out to say I love you!" />
                <Button x:Name="InFlyoutButton"
                    Margin="0,10,0,0"
                    Content="OK. Bye ..."
                    Click="FlyoutButton_Click" />
            </StackPanel>
        </Flyout>
    </Button.Flyout>
</Button>

Zde nemůžeme button uzavřít pomocí lomítka, protože do jeho obsahu potřebujeme dostat párové tagy Button.Flyout a Flyout. Právě obsah elementu Flyout na nás vybafne, když na button klikneme. Aby se nám okno zavřelo při kliknu na button uvnitř, musíme k němu dopsat nějakou funkci, ve které bude pouze Flyout.Hide();.

Button Menu

Z buttonu nám ale může vyletět dokonce celé menu. Syntaxe je následující:

<TextBlock VerticalAlignment="Center"
Text="FlyoutMenu"
Grid.Row="4" />
<Button Grid.Column="1"
    Grid.Row="4"
    Content="FlyoutMenu"
    Margin="20,10,10,20">
    <Button.Flyout>
        <MenuFlyout Placement="Bottom">
            <MenuFlyoutItem Text="One" />
            <MenuFlyoutItem Text="Two" />
            <MenuFlyoutSeparator />
            <MenuFlyoutSubItem Text="Three">
                <MenuFlyoutItem Text="3.1" />
            </MenuFlyoutSubItem>
            <MenuFlyoutSeparator />
            <ToggleMenuFlyoutItem Text="Four" />
        </MenuFlyout>
    </Button.Flyout>
</Button>

Je to podobné jak u Flyout Buttonu, jen zde obměníme obsah tagu ButtonFlyout. Menu vytváříme tagem MenuFlyout. Atribut Placement nám zajistí, že se bude menu zobrazovat pod Buttonem. Tag MenuFlyoutItem nám přidá do menu další Item. MenuFlyoutSeparator reprezentuje grafickou čáru, která odděluje třeba nějaké sekce menu. MenuFlyoutSubItem položka v menu, z které vylézají další položky.

ProgressRing

Určitě všichni znáte takové to kolečko, které nám vyskočí, když se spouští Windows. To je právě náš progressRing. Má následující syntaxi, kterou si záhy hned vysvětlíme.

<TextBlock Grid.Row="6" Text="Progress Ring" VerticalAlignment="Center" />
<StackPanel Grid.Row="6"
    Grid.Column="1"
    Orientation="Horizontal">
    <ProgressRing x:Name="ProgressRing"
        Margin="20,10,10,20"
        Width="50"
        Height="50"
        IsActive="True" />
        <Button x:Name="ProgressRingButton" Content="stop" Click="ProgressRingButton_Click" />
</StackPanel>

Zde je důležitá vlastnost IsActive. Ta nám udává, zda je progressRing aktivní nebo ne. Tlačítkem zapsaným pod progressRingem budeme tento element vypínat a zapínat. Do MainPage.xaml.cs přidáme kód níže.

private void ProgressRingButton_Click(object sender, RoutedEventArgs e)
{
    ProgressRing.IsActive = !ProgressRing.IsActive;
    ProgressRingButton.Content = ProgressRing.IsActive ? "stop" : "start";
}

Po kliknutí na tlačítko se zneguje vlastnost IsActive u ProgressRingu a následně pomocí zkráceného zápisu if else (ternárního výrazu) změníme text na tlačítku.

V příští lekci, Relative panel a SplitView, si vysvětlíme práci s RelativePanel a SplitView.


 

Předchozí článek
Programujeme pro Windows 8 - Vlastní styly v XAML
Všechny články v sekci
Windows 10 aplikace v C# .NET
Přeskočit článek
(nedoporučujeme)
Relative panel a SplitView
Článek pro vás napsal Jan Blažek
Avatar
Uživatelské hodnocení:
7 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