XAML.cz Magazín moderních technologií založených na XAML

Novinky ve WPF 4 – Calendar a DatePicker

Napsáno pro WPF od Jarda Jirava  [26.08.2010]

Další dva vstupní prvky uživatelského rozhraní si představíme společně. Mají totiž k sobě až neskutečně blízko a vlastně jeden využívá druhý ke své funkčnosti. Podíváme se tedy na to, jakým způsobem může uživatel zadat datum ve WPF aplikaci.

Jedná se o prvky, které myslím velice chyběly již od prvních verzí a je jen dobře, že se konečně dostaly do základní výbavy WPF komponent. Ne že by se nedaly napsat vlastní a hned z počátku takové vznikly, ale přeci jen mít alespoň základ je vždy lepší.

Calendar

Začnu tedy tím prvním a tím je Calendar, který umožňuje uživateli v přehledném zobrazení vybrat datum. Tento prvek jistě budou znát všichni ti, kteří vytvářeli WinForms aplikace, ale také ti, kdo tvoří jakoukoliv jinou aplikaci, která potřebuje zadat datum od uživatele v nějakém sofistikovanějším prvku. Přeci jen, způsobů zápisu datumu je mnoho a než nutit uživatele přemýšlet, jak má zapsat daný datum do textového pole, je příhodnější mu nabídnout grafickou podobu kalendáře, se kterou se jistě již setkal.

Samozřejmě jsou situace, kdy bychom chtěli uživateli nabídnout pohled na kalendář v různých podobách, tou základní je měsíční pohled, ale máme na výběr i z pohledu čtvrtletního nebo ročního a to pomocí nastavení vlastnosti DisplayMode.

Občas se nám bude hodit, pokud uživatel vedle výběru jednoho dne, bude moci vybrat nějaký rozsah dnů (třeba až budeme vytvářet rezervační systém na školení) a nebo dokonce budeme chtít, aby bylo možné vybrat několik různých rozsahů dnů nebo jen několik různých dnů, dobrým příkladem pro to by mohl být výběr dovolené. Možnosti výběru se tak řídí pomocí nastavení vlastnosti SelectionMode.

Co bývá také potřebné je, nedovolit uživateli vybrat některé dny, co třeba jen zakázání výběru svátků, i na tento případ je v případě prvku Calendar pamatováno a můžeme tak předat do kolekce BlackoutDates seznam datumů případně rozsahů datumů, které nebude možné vybrat a to přes třídu CalendarDateRange.

Tím se dostávám k dalšímu omezení, které můžeme po prvku Calendar požadovat a to je omezení rozsahu výběru datumů. Samozřejmě by se toto dalo zajistit pomocí vlastnosti BlackoutDates, ale přeci jen bude asi snazší nastavit vlastnosti DisplayDateStart a/nebo DisplayDateEnd, které omezí výběr přímo v kalendáři.

Pro snazší orientaci v kalendáři se nám pak bude hodit ještě další vlastnost a to je zvýraznění aktuálního dne pomocí nastavení vlastnosti IsTodayHighlighted na hodnotu true.

Uživatele určitě bude hodně zajímat, zda musí na vše klikat myší nebo se budou moci pohybovat pomocí klávesnice, samozřejmě i na toto je pamatováno a tak se mohou využívat jak kurzorové klávesy pro pohyb po kalendáři, tak v kombinaci s klávesami CTRL případně SHIFT měnit zobrazení nebo výběr dnů.

DatePicker

DatePicker je vlastně takovým úspornějším bratříčkem k velkému prvku Calendar a plně využívá právě tento prvek k výběru datumů při rozbalení. Na rozdíl od svého většího bratříčka však má uživatel možnost zadat do textového pole datum přímo a nebo po kliku na tlačítko si otevřít právě kalendář a vybrat datum tak, jak potřebuje.

Asi bych se zbytečně opakoval, které všechny možnosti máme v nastavování DataPickeru, neboť jsem již většinu ukázal u kalendáře. Co je asi dobré zmínit, jelikož do DatePickeru může uživatel zapisovat přímo, že v případě, že se nepodaří správně naparsovat daný string na datum, je vyvolán event DateValidationError a následně výjimka v případě, že se nenastaví vlastnost ThrowException na hodnotu false.

Úprava vzhledu

Tak jako každý prvek ve WPF i zde máme možnost změnit vzhled obou prvků pomocí stylů. Jelikož se však jedná o prvky, které jsou složeny z více částí, je dobré vědět názvy těchto jednotlivých částí.

Pro kalendář samotný jsou dvě a nesou pojmenování

  • PART_CalendarItem – který je typu CalendarItem
  • PART_Root – který je typu Panel

DatePicker potom má části čtyři a to

  • PART_Root – která je typu Grid
  • PART_Popup – která je typu Popup
  • PART_TextBox – která je typu DatePickerTextBox
  • PART_Button – která jak už název napovídá je typu Button

V případě, že si tak chcete pohrát se vzhledem ať už jednoho nebo druhého prvku pro zadávání datumů, máte možnost.

Závěrem

Dnešní článek představil další dva prvky přidané do rodiny zobrazovacích komponent ve WPF 4.0 které slouží pro zadávání a výběr datumů. Ač bych si dokázal představit ještě další prvky, které usnadní tvorbu obrazovek pro zadávání a editaci hodnot, více nových prvků se v .NET Frameworku nenachází, i když by se mi líbil třeba takový DataForm dostupný v Silverlightu. Uvidíme, třeba při představování novinek z další verze se na něj dostane řada.

Ocenili byste nějaký další prvek uživatelského rozhraní, který se v současnosti ve WPF nenachází?

Komentáře

ukládám komentář, vyčkejte prosím..
  1. Buďte první, kdo napíše komentář.

@xamlcz

  • RT @jvanrhyn: XAML, It's a bit like olives. Takes a while to get used to. But once you're used to it. It is actually pretty good. <3 XAML
  • RT @moser_christian: WPF Inspector 0.9.7 is released. It supports .NET 3.5 and 4.0 The project is now open source and available on CodeP ...
  • Jeff Handley oznámil vydání WCF RIA Services v.1.0 SP1 RTM http://bit.ly/gOgckn ke stažení na http://bit.ly/gVAXdK
  • jedna výzva pro Brno. Byl někdo z vás na přednášce o RIA v MS Akvárku? Dejte o sobě vědět. Děkuji
  • také jste uvažovali o tom, že zkusíte na projekt použít Caliburn Micro nebo naopak Prism 4? A co tak obojí, šlo by to nebo ne? Již brzy