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.

Using custom fonts in C# UWP apps

Although the default Windows 10 font – Segoe UI – is certainly very beautiful, you might sometimes want to give your Universal Windows Platform app a bit of uniqueness and personality using a custom font.

You can use almost any .ttf and .otf font file and include it in your application package. .woff and .eot fonts are currently not supported in C# UWP apps (but you can use them in JavaScript UWP apps).

Getting a font

Firstly find a custom font you want to use. There are many fonts you can use for free (even in commercial projects), as well as many fonts you can purchase.

Google Fonts and Font Squirrel are both great collections of countless free fonts to choose from.

After you choose the font you like, download its .ttf or .otf file and add it into your UWP app project as a Content file.

Ensure that the font is added with the Content Build Action
Ensure that the font is added with the Content Build Action

Setting the font in XAML

Each text control in XAML has a FontFamily property, which you can use to set the font. For the preinstalled fonts it is sufficient to just use the font name itself. For custom fonts we have to be more specific:

[FontFilePath] is the relative path to the font file in the project. In case you have an ArimaMadurai-Black.ttf font in the Assets/Fonts folder of your project, you will use /Assets/Fonts/ArimaMadurai-Black.ttf as the path.

[FontName] is the name of the font. Here things are a little tricky. Some fonts require the font name to include the type suffix (font weight, italics) and some don’t. You might need to use trial end error to find out which form is requested. The XAML designer should reflect the change immediately.

Using the property window

There is an alternative to manually setting the font family in XAML – using the XAML properties window. Select a text-based control and then expand the Text settings group in the property manager. Using the font dropdown, you can select not only from the installed fonts, but also from the custom fonts you have added into your project (these should be on top of the list).

Choosing a font in the properties window

Note that the properties window always adds the font type suffix to the FontFamily value. In case the font doesn’t display correctly when you apply the setting, remove the font type manually.

Setting font family in code

Changing the font family in code is as easy as creating an instance of the Windows.UI.Xaml.Media.FontFamily class with the same value as in XAML passed to the constructor.

DirectWrite fonts

Windows 10 added XAML integration of DirectWrite downloadable fonts. With this feature you can set the font family of your text controls to a font that is not currently installed on the device and DirectWrite will download the font on-demand in the background. Before the font is downloaded, a fallback font will be displayed instead. Also, it should be able to download just the portions of the font that you need, which is beneficial for large fonts that support languages like Chinese, Japanese or Korean. The downloaded fonts are stored in a system font cache, so that they can be reused by any app.

This feature seems pretty neat, but it is unfortunately completely undocumented. The only resource regarding this functionality seems to be the XamlCloudFontIntegration sample in the Windows Universal Samples repository on Github. The sample contains three fonts that can be downloaded by DirectWrite and also a PowerShell script that lets you clear the system font cache.

You can see and try out the sample code for this post on my GitHub.

Zpětná vazba k UWP aplikacím přes Feedback Hub

Feedback Hub ve Windows 10 umožňuje uživatelům otevřeně a efektivně sdílet své nápady na vylepšení a reportovat chyby. Nyní Microsoft přidává podporu zasílání zpětné vezby i pro aplikace třetí strany.

Jak můžete uživatele rychle odkázat do Feedback Hubu přímo z vaší aplikace? Je to snadné! Stačí použít nové SDK – s trochu krkolomným názvem – Microsoft Store Engagement and Monetization SDK.

Integrace Store Engagement SDK

Microsoft Store Engagement and Monetization SDK je nové rozšíření Visual Studia, které zahrnuje pod jednou střechou obě, předtím oddělená, Microsoft Advertising SDK (Advertising SDK a Advertising Universal SDK) a také nové Microsoft Store Engagement SDK:

Pro nainstalování rozšíření do Visual Studia, klepněte na menu Tools a vyberte Extensions and Updates. V levém panelu otevřeného dialogu vyberte sekci Online a do vyhledávacího pole zadejte název SDK (nebo jeho část). Výsledky vyhledávání by vám měly nabídnout instalaci rozšíření pomocí tlačítka.

MSAM SDK

Nyní máme potřebnou prerekvizitu a můžeme přidat Store Engagement SDK přímo do našeho UWP projektu.

Přidání SDK do projektu

Otevřete své řešení a klepněte pravým tlačítkem myši na položku References pod vaším UWP projektem v Solution Exploreru. Zde vyberte Add Reference. Otevře se Reference Manager. Označte sekci Universal Windows > Extensions a v seznamu uprostřed najdete mezi nainstalovanými rozšířeními Microsoft Store Engagement SDK. Zahrňte jej do projektu zaškrtnutím políčka nalevo.

Adding the Store Engagement SDK reference

Nyní jsme připraveni získávat zpětnou vazbu! Kód pro otevření Feedback Hubu je velmi jednoduchý a přímočarý:

Tento řádek kódu spustí odpovídající URI registrovanou pro Feedback Hub s hlubokým odkazem na sekci týkající se vaší aplikace. Pozor – odkaz na Feedback Hub bude fungovat až aplikaci publikujete na Windows Store (protože až poté je ID aplikace validní).

Upozornění

Protože tato funkčnost úplně nová, nefunguje vždy dle očekávání (či dokonce vůbec – například na aktuálním Windows Mobile preview buildu). Vždy doporučuji poskytnout uživatelům ještě alternativní způsob pro zaslání zpětné vazby, například přes e-mail. Tím zajistíte, že nikdy nepřijdete o důležité informace, které vám chtějí uživatelé o vaší aplikaci poskytnout.

Getting feedback from users in UWP apps via Feedback Hub

Feedback Hub in Windows 10 allows users to openly and effectively share their ideas and report issues. Now Microsoft is adding third party apps into the Feedback Hub and developers can hence receive feedback from users directly.

How can you give the users a quick link to the Feedback Hub for your app? It’s simple! Use the new, rather mouthful, Microsoft Store Engagement and Monetization SDK.

Integrating the Store Engagement SDK

Microsoft Store Engagement and Monetization SDK is a new Visual Studio extension that encompasses both, previously separate, Microsoft Advertising SDKs (Advertising SDK and Advertising Universal SDK) and a new Store Engagement SDK.

To install the SDK in Visual Studio, navigate to Tools menu and select Extensions and Updates. In the left pane of the opened dialog select Online section and then enter the name of the SDK in the search box in the upper right corner of the window. The search should offer you the SDK with an Install button. The installation might require you to restart Visual Studio afterwards.

MSAM SDK

Now you have the prerequisite ready and you can add the Store Engagement SDK to your UWP project.

Open your solution and right click the References item under your UWP project node in Solution Explorer. The select Add Reference in the menu. The Reference Manager will open. Select Universal Windows > Extensions section and you will see the Microsoft Store Engagement SDK in the list of installed extensions. Check the checkbox on the left to include the SDK in your app.

Adding the Store Engagement SDK reference

Now we are ready to get feedback! The code to open the Feedback Hub is extremely simple and straightforward:

This line of code will launch the appropriate URI registered with Feedback Hub with deep link to the section related to your app. Please note, that this actually works only after you publish the app in the Windows Store (as only then the app ID is valid).

Word of caution

Because this functionality is very new, it does not always work as expected (or not at all – for example on the current Windows Mobile preview build) I always recommend providing a secondary way for users to send feedback – such as via e-mail. This will ensure that you will not miss out on important information you need to improve your apps and will keep all users happy.

WinRT KeyDown volán dvakrát pro klávesu Enter

Všiml jsem si zvláštního problému, ke kterému dochází při zpracování události KeyDown. Když uživatel stiskne klávesu ‘Enter’, tato událost je ve skutečnosti ve WinRT zpracována dvakrát (alespoň pro ovladací prvky TextBoxPasswordBox  u kterých jsem si tohoto chování všiml).

Podívejte se na následující příklad:

Co se stane, když uživatel uvnitř textového pole, které má zaregistrovaný tento handler události KeyDown, stiskne ‘Enter’?

Jak jste očekávali, událost je zpracována a frame naviguje na stránku  SomeOtherPage . Ale jakmile zpracování skončí, je metoda zavolána znovu s přesně stejnými argumenty! Kód metody je proveden znovu, takže frame podruhé načte shodnou stránku (a nyní tedy při pokusu o navigaci zpět je v navigačním zásobníku ještě původní instance).

Toto chování je zřejmě spojeno pouze s klávesou ‘Enter’ a nevyskytuje se u jiných kláves. Řešení problému naštěstí je snadné:

Nastavením vlastnosti KeyRoutedEventArgsHandled na true říkáme, aby se zpracování a “bublání” směrem XAML stromem nahoru ukončilo, ale to zároveň zabrání tomu, aby byla událost znovu zpracována na stejném ovládacím prvku.

Problém jsem reportoval v aplikaci Windows Feedback  v sekci Developer Platform. Pokud chcete vyřešení tohoto bugu podpořit, dejte mu hlas kliknutím sem 🙂 .

Průvodce Windows 10 pro vývojáře

Nyní je ta nejlepší chvíle naučit se vývoj aplikací pro Windows 10!

Microsoft vydal aktualizovanou verzi svého průvodce Univerzální Windows Platformou pro vývojáře (v angličtině) na Microsoft Virtual Academy. S pány Andym Wigleym a Shenem Chauhanem se v tomto tutoriálu podíváte na vše, co je nové ve vývojářském světě Windows 10 a uvidíte vývojářské nástroje pro “RTM” verzi Windows 10 (uvozovky proto, že koncept “RTM” ve světě Windows as a Service neexistuje a build 10240, kterého se videa týkají je pouze první vydání Windows 10 pro širokou veřejnost).

Průvodce pokrývá vše od základů platformy samotné, přes ovladací prvky XAML, adaptivní návrh a kód až po detaily a pokročilé techniky jako je koncept “Aplikačních služeb”.

Tak hurá do toho a naučte vyvíjet aplikace pro Windows 10!