Dostosowywanie wyglądu interfejsu użytkownika na podstawie platformy i urządzenia idiom

Przeglądanie przykładu

Aplikacje interfejsu użytkownika aplikacji wieloplatformowych platformy .NET (.NET MAUI) mogą być dostosowane do określonych platform i urządzeń. Dzięki temu aplikacja może:

• Wykorzystaj przestrzeń w najbardziej efektywny sposób. Jeśli projektujesz aplikację, aby wyglądała dobrze na urządzeniu przenośnym, aplikacja będzie nadal można używać na urządzeniu stacjonarnym, ale najprawdopodobniej zostanie zmarnowana część miejsca. Możesz dostosować aplikację, aby wyświetlić więcej zawartości, gdy ekran jest powyżej określonego rozmiaru. Na przykład aplikacja na zakupy może wyświetlać jeden element na urządzeniu przenośnym, ale może wyświetlać wiele elementów na urządzeniu stacjonarnym. Ponadto dzięki umieszczeniu większej ilości zawartości na ekranie można zmniejszyć ilość nawigacji, którą użytkownicy muszą wykonać.
• Korzystaj z możliwości urządzenia. Niektóre urządzenia mogą mieć pewne możliwości. Na przykład urządzenia przenośne mogą mieć czujnik lokalizacji i aparat fotograficzny, a urządzenia stacjonarne mogą nie mieć takiego czujnika. Aplikacja może wykryć, które funkcje są dostępne, i włączyć kontrolki, które ich używają.
• Optymalizacja pod kątem danych wejściowych. Elementy interfejsu użytkownika można zmienić w celu optymalizacji pod kątem określonych typów danych wejściowych. Jeśli na przykład umieścisz elementy nawigacji w dolnej części aplikacji, ułatwią one użytkownikom mobilnym dostęp. Jednak użytkownicy pulpitu często oczekują, że elementy nawigacji znajdują się w górnej części aplikacji.

Podczas optymalizowania interfejsu użytkownika aplikacji pod kątem określonych platform i idiomów urządzeń tworzysz dynamiczny interfejs użytkownika. Podstawowe podejścia do tworzenia dynamicznego interfejsu użytkownika w programie .NET MAUI obejmują użycie OnPlatform rozszerzenia znaczników i OnIdiom rozszerzenia znaczników.

Uwaga

Istnieje kategoria wyzwalaczy, znana jako wyzwalacze stanu, która może służyć do dostosowywania wyglądu interfejsu użytkownika w określonych scenariuszach, takich jak zmiana orientacji urządzenia. Aby uzyskać więcej informacji, zobacz Wyzwalacz stanu.

Dostosowywanie wyglądu interfejsu użytkownika na podstawie platformy

Rozszerzenie znaczników OnPlatform umożliwia dostosowanie wyglądu interfejsu użytkownika dla każdej platformy. Zapewnia tę samą funkcjonalność co OnPlatform<T> klasy i On , ale z bardziej zwięzłą reprezentacją.

Rozszerzenie OnPlatform znaczników jest obsługiwane przez klasę OnPlatformExtension , która definiuje następujące właściwości:

• Default, typu object, który został ustawiony na wartość domyślną, która ma być stosowana do właściwości reprezentujących platformy.
• Android, typu object, który został ustawiony na wartość, która ma być stosowana w systemie Android.
• iOS, typu object, który został ustawiony na wartość, która ma być stosowana w systemie iOS.
• MacCatalyst, typu object, który został ustawiony na wartość, która ma być stosowana na Mac Catalyst.
• Tizen, typu object, który został ustawiony na wartość, która ma być stosowana na platformie Tizen.
• WinUI, typu object, który został ustawiony na wartość, która ma być stosowana w systemie WinUI.
• Converter, typu IValueConverter, który można ustawić na implementację IValueConverter .
• ConverterParameter, typu object, który można ustawić na wartość, która ma zostać przekazana do implementacji IValueConverter .

Uwaga

Analizator XAML umożliwia OnPlatformExtension skrót klasy jako OnPlatform.

Właściwość Default jest właściwością zawartości .OnPlatformExtension W związku z tym w przypadku wyrażeń znaczników XAML wyrażonych przy użyciu nawiasów klamrowych można wyeliminować Default= część wyrażenia, jeśli jest to pierwszy argument. Default Jeśli właściwość nie jest ustawiona, wartość domyślna BindableProperty.DefaultValue to wartość właściwości, pod warunkiem, że rozszerzenie znaczników jest przeznaczone dla BindablePropertyelementu .

Ważne

Analizator XAML oczekuje, że wartości poprawnego typu zostaną udostępnione właściwościom korzystającym z OnPlatform rozszerzenia znaczników. Jeśli konwersja typu jest konieczna, OnPlatform rozszerzenie znaczników podejmie próbę wykonania przy użyciu domyślnych konwerterów dostarczonych przez program .NET MAUI. Istnieją jednak pewne konwersje typów, których nie można wykonać przez konwertery domyślne, a w takich przypadkach Converter właściwość powinna zostać ustawiona na implementację IValueConverter .

Na stronie Pokaz onPlatform pokazano, jak używać OnPlatform rozszerzenia znaczników:

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

W tym przykładzie wszystkie trzy OnPlatform wyrażenia używają skróconej OnPlatformExtension wersji nazwy klasy. Trzy OnPlatform rozszerzenia znaczników ustawiają xref:Microsoft.Maui.Graphics.Colorwłaściwości BoxView , WidthRequesti HeightRequest na różne wartości w systemach iOS i Android. Rozszerzenia znaczników udostępniają również wartości domyślne dla tych właściwości na platformach, które nie są określone, eliminując Default= część wyrażenia.

Dostosowywanie wyglądu interfejsu użytkownika na podstawie idiomu urządzenia

OnIdiom Rozszerzenie znaczników umożliwia dostosowywanie wyglądu interfejsu użytkownika na podstawie idiomu urządzenia, na którym działa aplikacja. Jest obsługiwana przez klasę OnIdiomExtension , która definiuje następujące właściwości:

• Default, typu object, który został ustawiony na wartość domyślną, która ma być stosowana do właściwości reprezentujących idiomów urządzeń.
• Phone, typu object, który został ustawiony na wartość, która ma być stosowana na telefonach.
• Tablet, typu object, który został ustawiony na wartość, która ma być stosowana na tabletach. Ta właściwość nie jest wyłączna dla platform Android i iOS.
• Desktop, typu object, który został ustawiony na wartość, która ma być stosowana na platformach klasycznych. Należy pamiętać, że niektóre laptopy mogą być klasyfikowane przy użyciu Tablet właściwości .
• TV, typu object, który jest ustawiony na wartość, która ma być stosowana na platformach telewizyjnych.
• Watch, typu object, który został ustawiony na wartość, która ma być stosowana na platformach watch.
• Converter, typu IValueConverter, który można ustawić na implementację IValueConverter .
• ConverterParameter, typu object, który można ustawić na wartość, która ma zostać przekazana do implementacji IValueConverter .

Uwaga

Analizator XAML umożliwia OnIdiomExtension skrót klasy jako OnIdiom.

Właściwość Default jest właściwością zawartości .OnIdiomExtension W związku z tym w przypadku wyrażeń znaczników XAML wyrażonych przy użyciu nawiasów klamrowych można wyeliminować Default= część wyrażenia, jeśli jest to pierwszy argument.

Ważne

Analizator XAML oczekuje, że wartości poprawnego typu zostaną udostępnione właściwościom korzystającym z OnIdiom rozszerzenia znaczników. Jeśli konwersja typu jest konieczna, OnIdiom rozszerzenie znaczników podejmie próbę wykonania przy użyciu domyślnych konwerterów dostarczonych przez program .NET MAUI. Istnieją jednak pewne konwersje typów, których nie można wykonać przez konwertery domyślne, a w takich przypadkach Converter właściwość powinna zostać ustawiona na implementację IValueConverter .

W poniższym przykładzie OnIdiom XAML pokazano, jak używać rozszerzenia znaczników:

<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" />

W tym przykładzie wszystkie trzy OnIdiom wyrażenia używają skróconej OnIdiomExtension wersji nazwy klasy. Trzy OnIdiom rozszerzenia znaczników ustawiają Colorwłaściwości BoxView , WidthRequesti HeightRequest na różne wartości na telefonie, tablecie idiomach klasycznych. Rozszerzenia znaczników udostępniają również wartości domyślne dla tych właściwości w idiomach, które nie są określone, eliminując Default= część wyrażenia.