Jak zobrazit dotykovou klávesnici při práci s TextBoxy ve WPF

Aktualizováno – listopad 2016 – .NET Framework 4.6.2

Aplikace ve WPF (Windows Presentation Foundation) mají ve světě dotykových obrazovek zatím trochu těžký život. V případě WinRT aplikací se panel s dotykovou obrazovkou zobrazí automaticky, kdy je aktivováno kterékoliv textové pole v aplikaci, aby uživatel nemusel přerušovat své workflow a všechny úkony mohl provádět jen dotykem. Pro klasické desktopové aplikace je ale situace trochu komplikovanější – textová pole klávesnici automaticky nezobrazí a je tak na uživateli, aby ji otevřel sám. A to je nepraktické.

TouchKeyboard
Hej! Jak tě zobrazím ve své WPF aplikaci?

Pro tento problém existují dvě různá řešení.

Trošku hackovací řešení

První řešení vyžaduje trochu hraní se systémem. Nejdříve je nutné vypnout podporu pro použití pera jako vstupního zařízení v naší aplikaci a následně je možné vynutit, aby se textová pole chovala stejně jako ve WinRT pomocí nativních Windows API. To samozřejmě zahrnuje nutnost provést COM import příslušných nativních funkcí systému. Celý proces je velmi dobře popsán zde na blogu Briana Lagunase a doporučuji vám jej vyzkoušet. Pokud vám řešení bude vyhovovat, skvěle!

Nevýhodou tohoto řešení, kterou jsem náhodou objevil, je fakt, že vypnutí podpory pera z nějakého důvodu zablokuje možnost dotykového “scrollování” skrz ovladací prvky typu ListBox. Kterýkoliv pokus o scrollování tímto způsobem způsobí volání události ItemClick na položkách seznamu, kterých se dotkneme. Uživatel pak může scrollovat pouze malým posuvníkem seznamu, který je pro dotyk nevhodný.

Jednoduchá, ale více manuální cesta

Abychom obešli problémy, které přícházejí po vypnutí podpory pera ve WPF aplikaci (případně pokud tuto podporu vyžadujeme), můžeme jít na celý problém jednodušší cestou, ač s trochu méně automaticky. Vytvoříme vlastní implementaci TextBoxu:

Jak to funguje?

Když TextBox získá focus po dotyku uživatele, je zavolána událost GotTouchCapture. V zpracování této události můžeme manuálně spustit proces dotykové klávesnice. Ta je totiž normální spustitelnou aplikací na cestě  “C:\Program Files\Common Files\Microsoft Shared\Ink\TabTip.exe”.

Toto řešení je velmi jednoduché a nevyžaduje žádné explicitní “hackování”. Jedinou nevýhodou je, že vy jako vývojář musíte vždy pamatovat, abyste namísto klasického TextBoxu používali tuto modifikovanou verzi pokaždé, kdy je vyžadováno správné dotykové chování.

Ukončení procesu

Logickým rozšířením tohoto řešení je zabití procesu dotykové klávesnice ve chvíli, kdy ji již nepotřebujeme – tedy když vstupní pole ztratí focus. Metoda Process.Start( string ) vrací instanci třídy Process, která má instanční metodu Kill() . Tato metoda ukončí proces jež instance představuje.

Nejprve potřebujeme zajistit, abychom k instanci procesu měli přístup:

Nyní jen napojíme událost LostFocus:

 

Aktualizováno – co Windows 10?

Ve Windows 10 se tento problém stává spíše kosmetickou vadou díky novému Režimu tabletu.

Režim tabletu

tablet-modeNejnovější verze Windows přináší nový Režim tabletu, do kterého se lze přepnout pomocí tlačítka v Centru akcí nebo přes aplikaci Nastavení. Přestože tento mód někteří vidí jako nevýhodu oproti Windows 8.1, umožňuje výrazně intuitivnější integraci nových Windows Store aplikací a klasických desktopových aplikací. Každá aplikace se ve výchozí podobě spouští v režimu celé obrazovky, ale je stále možné spouštět dvě aplikace vedle sebe. Jednou z velmi pěkných výhod Režimu tabletu je fakt, že dotyková klávesnice na obrazovce se zobarzuje automaticky, když jakýkoliv textový prvek dostane focus, a to nezávisle na typu aplikace. Tímto můžete přenechat kontrolu nad zobrazením klávesnice systému samotnému a usnadnit si tak výrazně práci. Jedinou nevýhodou je to, že i přes talbetové zobrazení klávesnice na rozdíl od Windows Store aplikací překrývá obsah okna nad kterým je zobrazena a neposune jej nahoru, ani ve chvíli, kdy je připnuta ke spodní straně obrazovky. Může se tak stát, že kontextová menu a drop-down seznamy skončí pod klávesnicí a uživatel je tak nucen ji pro pokračování manuálně uzvařít.

Mimo Režim tabletu

Ale co v případě, že Režim tabletu z nějakého důvodu nechcete nebo nemůžete použít? Jedno nenápadné nastavení nás zachrání!

Otevřete aplikaci Nastavení, přejděte do sekce Zařízení a vyberte Psaní – zde skrolujte dolů a úplně na konci najdete nastavení, které je ve výchozím stavu vypnuto (bohužel nechápu z jakého důvodu) – po povolen tohoto nastavení se dotyková klávesnice zobrazí automaticky ve chvíli, kdy se prstem spustí zadávání textu a není připojena žádná klávesnice. Toto je perfektní řešení pro většinu případů a používání klasických aplikací na dotykovém zařízení to dělá intuitivním a konzistentním.touch

Aktualizováno – .NET Framework 4.6.2

V srpnu 2016 Microsoft oznámil novou aktualizaci .NET Framework 4.6.2. Kromě velmi užitečného rozšíření WPF o podporu Per-Monitor DPI tato aktualizace také adresovala problém s klávesnicí na dotykovém zařízení.

WPF aplikace cílené na novou verzi frameworku podporují automatickou invokaci a skrytí dotykové klávesnice stejně tak jako je to u nových UWP aplikací, takže výše uvedená řešení již nejsou pro nové aplikace nutná.

softkeyboard

Podmíněné kopírování nativních knihoven

Při práci s nativními knihovnami závislými na architektuře projektu (jako je například SQLite) často potřebujeme zkopírovat do výstupní složky projektu korektní DLL soubory, které chceme využívat pro vybraný typ procesorové architektury. Ale jak toho dosáhnout jednoduše bez nutnosti manuálního kopírování? Odpovědí jsou “Pre-build event commands” ve Visual Studiu.

Nejprve si vytvořte složku pro knihovnu kterou chcete kopírovat a do ní vytvořte podsložky odpovídající architekturám, které podporuje. Do každé z těchto podsložek vložte DLL a podpůrné soubory dané knihovny.

sqlite

Nyní klikněte pravým tlačítkem myši ve Visual Studiu na kořen projektu v Solution Exploreru a vyberte Properties. V otevřeném okně vlastností projektu vyberte v levém panelu záložku Build Events. Objeví se před vámi dvě prázdné textové oblasti. Do nich můžete zapisovat příkazy, které se provedou před, respektive po sestavení projektu.

Build

Klikněte nyní na tlačítko Edit Pre-build … a můžete začít vkládat své příkazy. Pro naše účely bude dostačující využít jednoduchý ale mocný systémový nástroj xcopy pro zkopírování souborů ze složky s naší knihovnou do složky výstupu projektu:

Vysvětleme si, co tento příkaz provádí. Xcopy má dva hlavní parametry – zdroj kopírování a cíl kopírování. Moje složka sqlite je umístěna ve složce libs, která je ve stromové struktuře o úroveň výše než hlavní složka projektu (kterou specifikujeme řetězcem “$(ProjectDir)”) – tedy nejprve přejdu o úroveň výše sekvencí “..\”, pak odsud do “libs\sqlite\”. Zde musím vejít do podsložky odpovídající architektuře projektu. Odpovídající řetězec “x64”, “x86”, či jiný získáme makrem “$(PlatformName)”. Nyní konečně vybereme pro kopírování všechny soubory v této složce pomocí hvězdičky (“*”). Cílová složka pro kopírování je výstupní složka projektu, označovaná makrem “$(TargetDir)”. Nakonec ještě přidávám dvě volby: “/E” (aby se při kopírování zahrnuly mezi zdroje i podsložky) a “/Y” (abychom vždy přepsali existující soubory v cílové složce).

Nyní před každým sestavením projektu bude náš příkaz proveden a soubory zkopírovány. Vše probíhá automaticky bez nutnosti další manuální práce.

Na závěr ještě podotknu, že je možné samozřejmě provádět i více příkazů – každý prostě uveďte na nový řádek, a lze v pre-build a post-build akcích provádět takřka cokoliv co dovoluje příkazová řádka – není nutné se omezit na kopírování.

Barva motivu v ikonách na taskbaru Windows 10

Poslední buildy Technical Preview Windows 10 (konkrétně z veřejných 10547 a výše) získaly velmi zajímavou novinku u ikon systémových WinRT aplikací jako jsou Store, Outlook Mail, Outlook Kalendář a Fotky. Když se na ikony těchto aplikací v taskbaru podíváte blíže, zjistíte, že některé jejich části jsou vyplněny systémovou barvou motivu.

ColorizedColorizedBlue

Zajímalo mě, jak tohoto bylo dosaženo. Průhledná barva se používá na vytvoření “průhledných” částí ikony, ale jak se specifikují části pro nahrazení barvou motivu? Předpokládal jsem, že půjde o nějakou speciální “výchozí” barvu. A ukázalo se, že to byl předpoklad správný! PhotosAppIcon

Když se podíváte na obrázkové podklady aplikace Fotky, můžete si všimnout překvapivě velkého množství různých ikon typu “AppList” nebo “Square 44×44 Logo”, jak to je označováno ve Visual Studiu. Normální ikony pro odpovídající škálování zde najdeme po boku dalších se suffixem “.targetsize-{size}”. Tyto jsou nabízeny ve Visual Studiu pouze pro čtyři různé velikosti – 256, 48, 24 a 16 pixelů. Zřejmě je však možné poskytnout systému i další velikosti pro ještě granulárnější škálování – 100, 96, 80, 64, 40, 32 or 20 pixelů.

Ale zde to začíná být zajímavé! Mezi ikonami najdeme i další suffixy:

  • contrast-black_targetsize-{size} – bílá a transparentní ikona (pro režim vysokého kontrastu pro usnadnění přístupu)
  • contrast-white_targetsize-{size} – černá a transparentní ikona (pro režim vysokého kontrastu pro usnadnění přístupu)
  • targetsize-{size}_altform-colorize – ikona aplikace obarvená barvou motivu – to je ta, kterou jsme hledali!
  • targetsize-{size}_altform-unplated_contrast-white – ikona aplikace na taskbar s průhledností (pro režim vysokého kontrastu pro usnadnění přístupu)
  • targetsize-{size}_altform-unplated – ikona aplikace na taskbar s průhledností
  • targetsize-{size}_altform-fullcolor – ikony, které se používají pro souborové asociace v průzkumníku souborů – plnobarevné

To je velký počet nedokumentováných typů ikon 🙂 ! Ta která je pro nás ale nejzajímavější je targetsize-{size}_altform-colorize. Obrázky s touto koncovkou v názvu se skládají z průhledné barvy (která je potom na taskbaru – překvapivě – průhledná), z jakýchkoliv dalších barev (obvykle však bílé) a nakonec černé barvy, která je systémem nahrazena barvou motivu systému!

Přestože oficiální zdroje a dokumentace o těchto typech aplikačních ikon zatím nemluví, již nyní mouhou vývojáři tyto speciální typy ikon využívat ve svých aplikacích. Jediné, co pro to musíte udělat, je zahrnout další obrázky s odpovídajícím pojmenováním po bok ostatních ikon aplikace v balíčku a systém se již sám správně rozhodne, který z nich použít. Toto otevírá další prostor pro kreativitu vývojářů, aby jejich aplikace vypadaly na Windows 10 ještě živěji.

Ukázkový projekt

Zde si můžete stáhnout ukázkový projekt. Jde vlastně o úplně základní Windows 10 aplikaci vytvořenou pomocí prázdné šablony s pouze jedním obrázkovým souborem ve složce Assets navíc – Square44x44Logo.targetsize-64_altform-colorize.png. V tomto jediném souboru tkví celé kouzlo! Jakmile aplikaci spustíte, uvidíte na hlavním panelu vašeho systému velmi pěknou ikonu s barvou systémového motivu. Pokud si systémovou barvu změníte, ikona se změní také 🙂 .

Square44x44Logo.targetsize-64_altform-colorize

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!