Přizpůsobení vzhledu uživatelského rozhraní na základě idiomu platformy a zařízení

Procházení ukázky

Aplikace .NET Multi-Platform App UI (.NET MAUI) můžou mít přizpůsobené uživatelské rozhraní pro konkrétní platformy a zařízení. To vaší aplikaci umožňuje:

• Využijte prostor co nejefektivnějším. Pokud navrhnete aplikaci tak, aby vypadala dobře na mobilním zařízení, bude aplikace stále použitelná na stolním zařízení, ale pravděpodobně bude nějaký nedostatek místa. Aplikaci můžete přizpůsobit tak, aby zobrazovala více obsahu, když je obrazovka nad určitou velikostí. Například nákupní aplikace může na mobilním zařízení zobrazovat jednu položku najednou, ale může zobrazovat více položek na stolním zařízení. Kromě toho můžete umístěním dalšího obsahu na obrazovku snížit množství navigace, kterou uživatelé potřebují provést.
• Využijte možnosti zařízení. U některých zařízení je větší pravděpodobnost, že budou mít určité funkce. Například mobilní zařízení mají pravděpodobně senzor polohy a kameru, zatímco ani desktopová zařízení nemusí mít. Vaše aplikace dokáže zjistit, které funkce jsou k dispozici, a povolit ovládací prvky, které je používají.
• Optimalizujte vstup. Prvky uživatelského rozhraní můžete změnit tak, aby se optimalizovaly pro konkrétní vstupní typy. Pokud například umístíte navigační prvky do dolní části aplikace, budou pro mobilní uživatele snadnější přístup. Uživatelé plochy ale často očekávají, že v horní části aplikace uvidí navigační prvky.

Když optimalizujete uživatelské rozhraní aplikace pro konkrétní platformy a idiomy zařízení, vytváříte responzivní uživatelské rozhraní. Primární přístupy k vytvoření responzivního uživatelského rozhraní v rozhraní .NET MAUI zahrnují použití OnPlatform rozšíření značek a OnIdiom rozšíření značek.

Poznámka:

Existuje kategorie triggerů, které se označují jako triggery stavu, které lze použít k přizpůsobení vzhledu uživatelského rozhraní v konkrétních scénářích, jako je například při změně orientace zařízení. Další informace najdete v tématu Aktivační událost stavu.

Přizpůsobení vzhledu uživatelského rozhraní na základě platformy

Rozšíření značek OnPlatform umožňuje přizpůsobit vzhled uživatelského rozhraní podle platformy. Poskytuje stejné funkce jako OnPlatform<T> třídy a On poskytuje stručnější reprezentaci.

Rozšíření OnPlatform značek je podporováno OnPlatformExtension třídou, která definuje následující vlastnosti:

• Default, typu object, které jste nastavili na výchozí hodnotu, která se má použít u vlastností představujících platformy.
• Android, typu object, který jste nastavili na hodnotu, která se má použít v Androidu.
• iOS, typu object, který jste nastavili na hodnotu, která se má použít v iOSu.
• MacCatalyst, typu object, který nastavíte na hodnotu, která má být použita na Mac Catalyst.
• Tizen, typu object, které nastavíte na hodnotu, která se použije na platformě Tizen.
• WinUI, typu object, který jste nastavili na hodnotu, která se má použít pro WinUI.
• Converter, typu IValueConverter, které lze nastavit na implementaci IValueConverter .
• ConverterParameter, typu object, který lze nastavit na hodnotu, která se má předat implementaci IValueConverter .

Poznámka:

Analyzátor XAML umožňuje OnPlatformExtension , aby třída byla zkrácena jako OnPlatform.

Vlastnost Default je vlastnost OnPlatformExtensionobsahu . Proto u výrazů značek XAML vyjádřených složenými závorkami můžete část výrazu eliminovat Default= , pokud se jedná o první argument. Default Pokud vlastnost není nastavená, nastaví se jako výchozí BindableProperty.DefaultValue hodnota vlastnosti za předpokladu, že rozšíření značek cílí na BindablePropertyhodnotu .

Důležité

Analyzátor XAML očekává, že hodnoty správného typu budou poskytnuty vlastnostem využívajícím OnPlatform rozšíření značek. V případě potřeby OnPlatform převodu typů se rozšíření značek pokusí provést pomocí výchozích převaděčů poskytovaných rozhraním .NET MAUI. Existují však některé převody typů, které nelze provést ve výchozím převaděči a v těchto případech Converter by vlastnost měla být nastavena na implementaci IValueConverter .

Na stránce OnPlatform Demo se dozvíte, jak použít OnPlatform rozšíření značek:

<BoxView Color="{OnPlatform Yellow, iOS=Red, Android=Green}"
         WidthRequest="{OnPlatform 250, iOS=200, Android=300}"
         HeightRequest="{OnPlatform 250, iOS=200, Android=300}"
         HorizontalOptions="Center" />

V tomto příkladu používají všechny tři OnPlatform výrazy zkrácenou verzi OnPlatformExtension názvu třídy. OnPlatform Tři rozšíření značek nastavily xref:Microsoft.Maui.Graphics.ColorWidthRequest, a HeightRequest vlastnosti BoxView na různé hodnoty v iOSu a Androidu. Rozšíření značek také poskytují výchozí hodnoty pro tyto vlastnosti na platformách, které nejsou zadané, a zároveň eliminují Default= část výrazu.

Přizpůsobení vzhledu uživatelského rozhraní na základě idiomu zařízení

Rozšíření OnIdiom značek umožňuje přizpůsobit vzhled uživatelského rozhraní na základě iddiomu zařízení, na kterém aplikace běží. Podporuje ji OnIdiomExtension třída, která definuje následující vlastnosti:

• Default, typu object, které jste nastavili na výchozí hodnotu, která se má použít u vlastností, které představují iddiomy zařízení.
• Phone, typu object, který jste nastavili na hodnotu, která se má použít na telefonech.
• Tablet, typu object, který jste nastavili na hodnotu, která se má použít na tabletech.
• Desktop, typu object, který nastavíte na hodnotu, která se použije na desktopových platformách.
• TV, typu object, který jste nastavili na hodnotu, která se má použít na televizních platformách.
• Watch, typu object, který nastavíte na hodnotu, která se použije na platformách Watch.
• Converter, typu IValueConverter, které lze nastavit na implementaci IValueConverter .
• ConverterParameter, typu object, který lze nastavit na hodnotu, která se má předat implementaci IValueConverter .

Poznámka:

Analyzátor XAML umožňuje OnIdiomExtension , aby třída byla zkrácena jako OnIdiom.

Vlastnost Default je vlastnost OnIdiomExtensionobsahu . Proto u výrazů značek XAML vyjádřených složenými závorkami můžete část výrazu eliminovat Default= , pokud se jedná o první argument.

Důležité

Analyzátor XAML očekává, že hodnoty správného typu budou poskytnuty vlastnostem využívajícím OnIdiom rozšíření značek. V případě potřeby OnIdiom převodu typů se rozšíření značek pokusí provést pomocí výchozích převaděčů poskytovaných rozhraním .NET MAUI. Existují však některé převody typů, které nelze provést ve výchozím převaděči a v těchto případech Converter by vlastnost měla být nastavena na implementaci IValueConverter .

Následující příklad XAML ukazuje, jak použít OnIdiom rozšíření značek:

<BoxView Color="{OnIdiom Yellow, Phone=Red, Tablet=Green, Desktop=Blue}"
         WidthRequest="{OnIdiom 100, Phone=200, Tablet=300, Desktop=400}"
         HeightRequest="{OnIdiom 100, Phone=200, Tablet=300, Desktop=400}"
         HorizontalOptions="Center" />

V tomto příkladu používají všechny tři OnIdiom výrazy zkrácenou verzi OnIdiomExtension názvu třídy. Tři OnIdiom rozšíření značek nastavují Color, WidthRequesta HeightRequest vlastnosti BoxView různých hodnot na telefonu, tabletu a desktopové idiomy. Rozšíření značek také poskytují výchozí hodnoty pro tyto vlastnosti na idioms, které nejsou zadány, a současně eliminují Default= část výrazu.