8. diel - Základné kontrolky UWP

Dnes si popíšeme kontrolky v XAML, ich použitia a najdôležitejšie vlastnosti a udalosti. Na začiatok si vytvorme nový projekt a pomenujte si ho treba CommonControls. Grid si rozdelíme do siedmich riadkov a dvoch stĺpcov. U riadkov nastavme vlastnosť Height na Auto au stĺpcov takisto Width na Auto.

TimePicker

Vďaka tomuto elementu môžeme nechať vybrať dátum, ako už z názvu vyplýva. Pre náš najdôležitejšou vlastnosťou bude pravdepodobne ClockIdentifier - tu nastavujeme, či chceme dvanástich alebo dvadsiatich štyroch hodinový formát času. Zmenu vybraného času zistíme pomocou udalosti TimeChanged.

Nasledujúci kód vygeneruje TimePicker a pri zmene času ho vypíše do TexBlocku vedľa.

<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 pripíšeme metódu, ktorá sa vykoná pri zmene dáta.

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

CalendarDatePicker

Podobná kontrolka ako TimePicker, akurát že tu vyberáme dátum. Napíšeme si podobný príklad, ako je u TimePickeru. Je s tým rozdielom, že tu sa atribút k odkazu na funkciu menuje 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>

Metóda, na ktorú odkazujeme, jednoducho vezme zvolený dátum vlastností Date a vypíše ho do TextBlocku.

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

CalendarView

Jedná sa o otvorený rozbalený DatePicker, ktorý nám umožňuje vybrať viac ako jeden dátum. Tým docielime nastavením vlastnosti SelectionMode na Multiple. Udalosť SelectedDatesChanged sa zavolá vždy, keď používateľ vyberie alebo odstráni nejaké dátum. K nášmu kódu pridáme nižšie 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 nasledujúci:

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

Keďže je sender typu CalendarView, môžeme na ňom okamžite zavolať vlastnosť SelectedDates, ktorá nám vráti všetky dáta, ktoré užívateľ vybral. Ďalej použijeme Linq a vyberieme z každého dátumu deň a mesiac. Tieto dve položky spojíme pomocou lomky a následne všetky tieto položky spojíme dohromady pomocou string.Join. To všetko nastavíme ako text TextBlocku s názvom CalendarViewResult. Ak ste o Linq nikdy nepočuli, môžete si o ňom prečítať v kurze o C # kolekciách. Prípadne to zatiaľ berte ako čiernu skrinku, u ktorej viete, že funguje, ale už nie ako.

FlyoutButton

Tu sa jedná o obyčajný button, z ktorého však pri kliknutí vyletí nejaký obsah. V našom prípade na nás vyletí len obyčajný text s možnosťou skrytia. Kód je nasledujúci.

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

Tu nemôžeme button uzavrieť pomocou lomky, pretože do jeho obsahu potrebujeme dostať párové tagy Button.Flyout a Flyout. Práve obsah elementu Flyout na nás vybafne, keď na button klikneme. Aby sa nám okno zavrelo pri kliknem na button vnútri, musíme k nemu dopísať nejakú funkciu, v ktorej bude iba Flyout.Hide();.

Button Menu

Z buttonu nám ale môže vyletieť dokonca celé menu. Syntax je nasledovná:

<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é ako u Flyout Buttone, len tu obmeníte obsah tagu ButtonFlyout. Menu vytvárame tagom MenuFlyout. Atribút Placement nám zaistí, že sa bude menu zobrazovať pod Buttonom. Tag MenuFlyoutItem nám pridá do menu ďalšie Item. MenuFlyoutSeparator reprezentuje grafickú čiaru, ktorá oddeľuje napríklad nejaké sekcie menu. MenuFlyoutSubItem položka v menu, z ktorej vyliezajú ďalšie položky.

ProgressRing

Určite všetci poznáte také to koliesko, ktoré nám vyskočí, keď sa spúšťa Windows. To je práve náš progressRing. Má nasledujúcu syntax, ktorú si vzápätí hneď vysvetlí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>

Tu je dôležitá vlastnosť IsActive. Tá nám udáva, či je progressRing aktívny alebo nie. Tlačidlom zapísaným pod progressRingem budeme tento element vypínať a zapínať. Do MainPage.xaml.cs pridáme kód nižšie.

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

Po kliknutí na tlačidlo sa zneguje vlastnosť IsActive u ProgressRingu a následne pomocou skráteného zápisu if else (ternárního výrazu) zmeníme text na tlačidle.

V budúcej lekcii, Relative panel a SplitView , si vysvetlíme prácu s RelativePanel a SplitView.