Kontrola režimu náhledu v Xamarin.Forms

Visual Studio pro Windows a Mac nyní obsahuje Xamarin XAML Previewer, který nám umožňuje zobrazit náhled vašich Xamarin.Forms XAML souborů bez nutnosti spuštění aplikace. Bohužel v některých případech může obsahovat konstruktor vašich stránek kód, se kterým si Previewer nedokáže poradit (například service resolution, apod.) a spadne. Můžeme snadno ověřit zda aplikace běží v režimu náhledu (design mode)?

XAML Previewer
XAML Previewer

Pokračovat ve čtení “Kontrola režimu náhledu v Xamarin.Forms”

C#: Návrhový vzor Builder s dědičností

Návrhový vzor Builder je velmi užitečný v případě, že potřebujeme zapouzdřit a zjednodušit konstrukci složitějšího objektu. Spolu s návrhovým vzorem fluent interface nám umožní vytvořit praktické API, které může být součástí knihovny a je okamžitě pochopitelné pro ostatní vývojáře. Co když však přidáme dědičnost? Pokračovat ve čtení “C#: Návrhový vzor Builder s dědičností”

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

Aligning UWP CommandBar content after Anniversary Update

The Universal Windows Platform CommandBar control has a new feature called dynamic overflow since the Anniversary Update. This automatically adjusts the number of presented app bar buttons so that they fit and puts the additional commands in the secondary (overflow) menu. This addition has however inadvertently caused some headaches for developers who use Content property of the  CommandBar  to display additional content – it turns out, that alignment of the content now doesn’t work properly.

The problem

Let’s demonstrate the issue with a simple example.

We would expect, that the content of the CommandBar is aligned to the center of its available area, which indeed was the case before the Anniversary Update.

Since Anniversary 14393 SDK, the HorizontalContentAlignment  property is by default not respected.

The CommandBar does not respect the HorizontalContentAlignment property by default

Cause of the problem

The default control templates are stored in a XAML resource dictionary file on the following path: C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.14393.0\Generic\generic.xaml . If you search for the CommandBar  template inside this file, you will find out that it contains a new VisualStateGroup :

As you can see, when dynamic overflow is enabled, sizing of the columns in the main layout Grid of the control changes.

In the default visual state ( DynamicOverflowDisabled ) is the ContentControlColumnDefinition.Width  set to *  (star) and the PrimaryItemsControlColumnDefinition.Width  set to Auto . This means that the app bar buttons on the right take up a certain width and the remaining space is dedicated to the content.

With dynamic overflow enabled, sizing of the columns is flipped. The control lets the primary items column take up as much space as it can (so that the available space can be used for the buttons and the number of displayable buttons can be calculated at runtime) and the content column now gets only the width it actually needs. Whichever alignment you set to the content doesn’t matter. The content will always seem left aligned, because its column is sized just to fit.

Since the Anniversary Update, dynamic overflow of the command bar is enabled by default.

Solution

You can disable dynamic overflow using the IsDynamicOverflowEnabledproperty. Although you have to make sure that the app bar buttons display well on all display sizes, you can also align the content as you please.

Disabling the dynamic overflow feature fixes the content alignment problem

If you want to preserve the dynamic overflow feature, you may just want to put some margin around your content to make sure it looks aligned. Of course, to support multiple different display sizes, you should adjust the margins using Adaptive Triggers.

Použití vlastních fontů v C# UWP aplikacích

Přestože výchozí Windows 10 font Segoe UI je rozhodně velmi pěkný, čas od času můžete chtít vaší aplikaci vdechnout punc originality pomocí jiného fontu.

V UWP aplikacích můžete použít téměř kterýkoliv .ttf .otf font. .woff a .eot fonty nyní nejsou v C# UWP aplikacích podporovány (ale lze je použít v JavaScriptových UWP aplikacích).

Získání fontu

Nejprve si samozřejmě musíte nějaký font vybrat. Na internetu je k dispozici mnoho fontů, které lze použít zdarma (i v komerčních projektech), a také mnoho fontů, které si můžete zakoupit.

Google Fonts a Font Squirrel jsou skvělé zdroje nepřeberného množství fontů zcela zdarma.

Poté co si vyberete font, který se vám líbí, stáhněte si jeho .ttf nebo .otf soubor a přidejte jej do vašeho UWP projektu jako Content (Build Action v property manageru).

Ujistěte se, že je font přidán s Content Build Action
Ujistěte se, že je font přidán s Content Build Action

Nastavení fontu v XAMLu

Každý textový ovladací prvek v XAMLu má vlastnost FontFamily, pomocí které lze font nastavit. V případě předinstalovaných fontů stačí zadat jejich název. V případě vlastních fontů musíme být více specifičtí:

[CestaKFontu] je relativní cesta k souboru s fontem v projektu. V případě, že máte ve složce Assets/Fonts font ArimaMadurai-Black.ttf, použijte /Assets/Fonts/ArimaMadurai-Black.ttf jako cestu.

[JmenoFontu] je jméno fontu. Zde je však malý háček. Některé fonty vyžadují, aby jméno fontu zahrnovalo i jeho konkrétní typ (tloušťka či italika fontu), v jiných případech stačí jméno samotné. Použitím metody pokus omyl můžete zjistit, která forma je požadována. XAML designer by měl změnu okamžitě reflektovat.

Použití okna Properties

Výběr fontu v okně properties

Namísto manuálního nastavení fontu v XAMLu můžete použít okno Properites ve Visual Studiu. Vyberte si v kódu nebo v designeru nějaký ovladací prvek a následně rozbalte sekci Text v Property manageru. Pomocí rozbalovacího seznamu Font si můžete vybrate nejen z fontů, které jsou na vašem zařízení nainstalovány, ale i z vlastních fontů, které jste přidali do projektu (tyto by se měly zobrazovat na začátku seznamu).
Upozornění: okno Properties vždy přidá na konec jména fontu i jeho typ. Pokud se font nezobrazuje správně, zkuste typ fontu z konce hodnoty vlastnosti FontFamily odebrat ručně.

Nastavení fontu v kódu

Změna fontu v kódu vyžduje pouze vytvoření instance třídy Windows.UI.Xaml.Media.FontFamily a předání stejné řetězcové hodnoty, kteoru jsme používali v XAMLu, jejímu konstruktoru.

DirectWrite downloadable fonty

Windows 10 přidal novou funkci XAML integration of DirectWrite downloadable fonts. Díky ní můžete nastavit font některého XAML ovladacího prvku na dosud nenainstalovaný font a DirectWrite jej automaticky stáhne na pozadí. Než se font stáhne, text bude zobrazen pomocí výchozího fontu. Navíc by měla funkce inteligentně stahovat pouze ty části fontu, které skutečně potřebujete, což je velká výhoda u velkých znakových sad, jako je Japonština, Čínština nebo Korejština. Stažené fonty jsou uloženy v systémové cache, aby mohly být znovu použity a to i jinou aplikací.

Tato novinka vypadá velmi užitečně, ale bohužel zatím není vůbec dokumentováná. Jediný zdroj pro ni je nyní ukázkový projekt XamlCloudFontIntegration v repozitáři Windows Universal Samples na Githubu. Tento projekt obsahuje tři fonty, které DirectWrite dokáže stáhnout a také PowerShell skript, který porčistí systémovou cache pro fonty.

Ukázkový kód pro tento článek si můžete prohlédnout a stáhnout na mém GitHubu.