Úprava viditelnosti pojmenovaných XAML elementů

Atribut x:Name v XAMLu vytváří pro elementy členské položky třídy, které lze použít pro přístup k ovladacím prvkům z kódu. Narozdíl od WPF však v UWP jsou tyto položky třídy definovány jako private, což znamená, že k nim je možné přistupovat pouze z třídy samotné. Pokud vezmeme v potaz, že z hlediska architektury by to byl špatný nápad, je možné toto chování změnit? Pokračovat ve čtení “Úprava viditelnosti pojmenovaných XAML elementů”

Nekonzistentní chování Resources v ItemTemplate pro Anniversary Update

Zdá se, že Windows 10 Anniversary Update obsahuje skrytou chybu ve zpracování Resources unvitř ItemTemplate pro položky seznamů. Narazil jsem na ni při práci na UWP aplikaci a popíšu problém samotný spolu s řešením, kterým můžete zajistit, že se vaše aplikace bude chovat správně na všech verzích Windows 10. Pokračovat ve čtení “Nekonzistentní chování Resources v ItemTemplate pro Anniversary Update”

Když jedna průhledná barva nestačí

Nespočetněkrát v životě vývojáře aplikací pro Univerzální platformu Windows narazíme na potřebu použití průhledné barvy a v takovou chvíli se může hodit předdefinovaná barva “Transparent”. Pokud však zapomeneme, že “Transparent” je stále jenom barva, můžeme se se zlou potázat.

Animation of "Transparent" color
Na levé straně je animace z “Transparent” na bílou, napravo animace z “Transparent” na černou

Pokračovat ve čtení “Když jedna průhledná barva nestačí”

Device family state trigger pro UWP

Univerzální platforma Windows funguje na mnoha různých typech zařízení (device family). Aby aplikace vypadala skvěle na různých zařízeních, většinou lze použít AdaptiveTrigger, který reaguje na různá rozlišení displeje. Pokud však potřebujeme cílit na konkrétní rodinu zařízení, je možné si pro tento účel vytvořit vlastní state trigger. Pokračovat ve čtení “Device family state trigger pro UWP”

Tip: Roztažení položek seznamu v UWP na šířku

Ovládací prvky ListView a ListBox v univerzální platformě Windows je možné snadno využít pro zobrazení seznamů v uživatelském rozhraní aplikace. Ve výchozí podobě zabírají jednotlivé položky seznamu pouze ten prostor, který skutečně potřebují, což se často nehodí, protože je chceme roztáhnout na celou šířku ovládacího prvku. Jak toho dosáhnout?

Ve výchozí podobě jsou prvky zarovnané vlevo. Jak je roztáhnout?

Pokračovat ve čtení “Tip: Roztažení položek seznamu v UWP na šířku”

Jak vynutit otevření CommandBaru směrem dolů

Ovládací prvek CommandBar  je důležitou komponentou pro design UWP aplikací. Jde o evoluci konceptu   AppBar , který je dostupný již od dob Windows Phone 7, ale v případě UWP má výrazně více funkcí. Stále však chybí možnost určit směr, kterým se command bar bude otevírat.

Problém

Výchozí chování CommandBaru je otevření směrem nahoru vždy, kdy není na samotném horním okraji okna. To je problém, protože toto platí i v případě, že definujeme vlastní title bar aplikace na Desktopu, kdy se   CommandBar  otevře pod tlačítka minimalizace, maximalizace a zavření okna a to rozhodně nevypadá dobře.

Výchozí šablona

Výchozí šablona prvku CommandBar  definuje kolekce VisualState  a  VisualStateTransition , které určují, jak bude prvek vypadat. Můžeme si všimnout že je vždy separátně definován stav pro otevření směrem dolů a nahoru.

Uvnitř těchto stavů můžeme vidět, že systém jen používá různé hodnoty pro některé z vlastností jako například CommandBarTemplateSettings.ContentHeight  resp. CommandBarTemplateSettings.NegativeOverflowContentHeight  pro vlastnost  Y  u transformace OverflowContentRootTransform .

Řešení

Nemůžeme snadno modifikovat vnitřní logiku ovladacího prvku, ale můžeme zajistit, že bude vypadat pro stav otevření nahoru identicky jako pro otevření dolů. Toho můžeme dosáhnout čistě překopírováním Storyboardů  ze stavů a přechodů se obsahujících ...OpenDown do jim odpovídajících  ...OpenUp  protějšků. Bohužel manuální překopírování je jediná možnost. Bylo by sice také možné jednotlivé Storyboardy  převést na samostatné resource, ale bohužel je pro VisualState  a VisualStateTransition nelze referencovat pomocí syntaxe {StaticResource}.

Pro získání kompletní kopie výchozího stylu olvadacího prvku můžeme buď použít Visual Studio XAML Designer (klepněte na prvek pravým tlačítkem myši, vyberte Edit Template a Edit a Copy…), nebo ji lze vyhledat na v souboru   C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP{version}\Generic\generic.xaml

Abych vám ušetřil klávesy  Ctrl , C  a V , připravil jsem kompletní upravený styl, který můžete přímo použít ve vaší aplikaci. Styl je ke stažení na mém GitHubu spolu s ukázkovým projektem k tomuto článku. Upozorňuji, že můj definovaný styl je pro verzi Anniversary Update. Pro budoucí verze doporučuji změny provést manuálně na aktuální šabloně.

Shrnutí

CommandBar  je skvělý ovladací prvek, který většinou funguje přesně tak, jak potřebujeme. Když však narazíme na problém, můžeme jeho šablonu poměrně snadno modifikovat.

Jak přidat nová zařízení pro náhled v XAML designeru

Visual Studio XAML Designer pro Univerzální platformu Windows nabízí výběr zařízení pro náhled pro různé kombinace rozlišení a škálování. Bohužel, výchozí seznam nemusí být dostačující, obzvláště pokud chcete optimalizovat pro nějaké konkrétní zařízení, které na něm nefiguruje. Je možné nabídku rozšířit na více zařízení?

Výchozí seznam zařízení ve Visual Studio XAML Designeru

Pokračovat ve čtení “Jak přidat nová zařízení pro náhled v XAML designeru”

Tip: Složené závorky v XAML Binding ConverterParameter

Při práci na jedné z UWP aplikací jsem chtěl vytvořit value converter založený na metodě  string.Format , abych mohl s pomocí ConverterParameter upravit nabindovanou hodnotu a výsledek použít jako klíč pro lokalizaci. Když jsem se poté pokusil projekt sestavit, čekala mě následující nepříliš čitelná chyba:

Přestože chybová hláška ani výseldný chybový soubor nebyly moc nápomocné, naštěstí byly změny v XAMLu posledními, které jsem prováděl a chybu jsem tedy přirozeně hledal tam.

Jak můžete očkávat, není možné přímo v XAML binding expression používat složené závorky.

Řešení je snadné – použít zpětné lomítko pro escaping.

V této podobě je již možné kód snadno zkompilovat a vše, včetně value converteru, je plně funkční.

Zarovnání obsahu UWP CommandBaru po Anniversary Update

Ovladací prvek CommandBar získal s Anniversary Updatem novou funkci dynamic overflow, která automaticky upravuje počet zobrazených tlačítek tak, aby se vešly na obrazovku a zbylá tlačítka nechá “přetéct” do sekundárního menu. Tato novinka bohužel přinesla neúmyslné problémy některým vývojářům, kteří používali vlastnost Content pro zobrazení dalšího obsahu na panelu – zarovnání obsahu nyní nefunguje dle očekávání.

Problém

Situaci demonstrujeme na jednoduchém příkladě:

Očekáváme, že obsah panelu bude zarovnaný uprostřed volného místa, které zbývá po umístění tlačítek. A tak tomu také před Anniversary Update bylo.

Od verze 14393 SDK ale vlastnost  HorizontalContentAlignment  ve výchozím stavu není respektována a obsah je zarovnán vlevo.

CommandBar ve výchozím stavu nerespektuje vlastnost HorizontalContentAlignment

Příčina problému

Výchozí šablony ovladacích prvků jsou definovány v souboru XAML resource dictionary na následující cestě: C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.14393.0\Generic\generic.xaml . Pokud v tomto souboru vyhledáte šablonu pro CommandBar  , zjistíte, že obsahuje novou skupinu  VisualStateGroup :

Jak je z kódu vidět, při povoleném dynamic overflow se mění nastavení velikosti sloupců v rozložení CommandBaru .

Ve výchozím visual state ( DynamicOverflowDisabled ) je   ContentControlColumnDefinition.Width  nastavena na  *  (hvězda) a PrimaryItemsControlColumnDefinition.Width  nastavena na  Auto . To znamená, že tlačítka napravo zabírají určitou šířku a zbylý prostor je dedikován obsahu Content .

Když je dynamic overflow povolen, velikosti sloupců se prohodí. Ovladací prvek nyní nechá sloupec s tlačítky roztáhnout (aby dostupné místo mohl potenciálně využít pro více tlačítek a mohl také spočítat prostor pro ně za běhu aplikace) a sloupec s obsahem dostane už pouze takový prostor, který skutečně potřebuje. To znamená, že s povoleným dynamic overflow bude obsah vždy vypadat jako zarovnaný vlevo, protože jeho sloupec mu nenabízí žádné místo navíc.

Od Anniversary Update je dynamic overflow u command baru ve výchozím stavu povolen.

Řešení

Dynamic overflow můžete vypnout pomocí vlastnosti IsDynamicOverflowEnabled. Ačkoliv se poté musíte ujistit, že se tlačítka na panelu zobrazují správně pro všechna rozlišení obrazovky, můžete díky tomu zarovnávat obsah dle potřeby.

Zakázání dynamic overflow opraví problém se zarovnáním obsahu

Pokud chcete zachovat dynamic overflow, můžete namísto jeho vypnutí okolo vašeho obsahu přidat odsazení ( Margin ) tak, aby vypadal zarovnaný. Pravděpodobně bude ale nutné použít Adaptive Triggery aby odsazení vypadalo dobře na každém zařízení.