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
.