Valori specifici della piattaforma in XAML

• 5 minuti

L'esperienza visiva dell'app sarà diversa su ogni piattaforma. Sarà spesso necessario ottimizzare l'interfaccia utente per ogni piattaforma in base agli oggetti visivi usati. .NET MAUI consente di gestire il layout dell'app in base a queste proprietà del dispositivo.

In questa unità vengono descritte le funzionalità disponibili in .NET MAUI per ottimizzare l'interfaccia utente delle app in base alla piattaforma in cui sono in esecuzione.

Uso della classe Device

La classe DeviceInfo è un'utilità che fornisce informazioni specifiche del dispositivo per il dispositivo in cui è in esecuzione l'app. La classe espone queste informazioni tramite un set di proprietà. La proprietà più importante è DeviceInfo.Platform, che restituisce una stringa che indica il tipo di dispositivo attualmente in uso: Android, iOS, WinUIo macOS.

Si consideri lo scenario seguente come un esempio dell'uso di questa funzionalità. Il comportamento predefinito in un'app .NET MAUI per iOS prevede che il contenuto aggiunto a una pagina si inserisca nella barra di stato iOS nella parte superiore dello schermo. Si intende modificare questo comportamento. La soluzione più semplice consiste nello spostare il contenuto verso la parte inferiore della pagina. La soluzione Notes creata nell'esercizio precedente risolve questo problema impostando la proprietà Padding del controllo VerticalStackLayout in modo da spostare il contenuto verso il basso di 60 punti:

<VerticalStackLayout x:Name="MyStackLayout" Padding="30,60,30,30">
    ...
</VerticalStackLayout>

Questo problema è applicabile solo su iOS. Se si sposta in modo così significativo il contenuto in Android e WinUI, si spreca spazio sullo schermo nella parte superiore della pagina.

È possibile eseguire una query sulla proprietà DeviceInfo.Platform per risolvere questo problema di visualizzazione. È possibile aggiungere il codice seguente al costruttore di pagina nell'app per espandere la spaziatura interna nella parte superiore della pagina, ma solo per iOS:

MyStackLayout.Padding = 
    DeviceInfo.Platform == DevicePlatform.iOS
        ? new Thickness(30, 60, 30, 30) // Shift down by 60 points on iOS only
        : new Thickness(30); // Set the default margin to be 30 points

Questo codice funziona, ma si trova nel file code-behind della pagina. La spaziatura interna è un valore specifico dell'interfaccia utente. È senza dubbio più appropriato e più comodo eseguire questa operazione in XAML anziché in code-behind.

Uso dell'estensione di mark-up OnPlatform

.NET MAUI XAML fornisce l'estensione di markup OnPlatform , che consente di rilevare la piattaforma di runtime dal codice XAML. Puoi applicare questa estensione di markup come parte del codice XAML che imposta un valore della proprietà. L'estensione richiede di specificare il tipo di proprietà, insieme a una serie di blocchi On Platform in cui si imposta il valore della proprietà in base alla piattaforma.

È possibile impostare la proprietà Padding in questo modo. Si noti che il tipo della proprietà Padding è Thickness:

<VerticalStackLayout>
    <VerticalStackLayout.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="30,60,30,30" />
        </OnPlatform>
    </VerticalStackLayout.Padding>
    <!--XAML for other controls goes here -->
    ...
</VerticalStackLayout>

Per piattaforme diverse da iOS, la spaziatura interna rimane impostata sul valore predefinito "0,0,0,0". Per WinUI e Android è possibile impostare la spaziatura interna su 30 punti con blocchi aggiuntiviOnPlatform:

<VerticalStackLayout>
    <VerticalStackLayout.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="30,60,30,30" />
            <On Platform="Android" Value="30" />
            <On Platform="WinUI" Value="30" />
        </OnPlatform>
    </VerticalStackLayout.Padding>
    ...
</VerticalStackLayout>

È possibile applicare questa stessa tecnica ad altre proprietà. L'esempio seguente modifica il colore di sfondo del layout dello stack in una pagina in Silver in iOS, in Verde in Android e in Giallo in Windows.

<VerticalStackLayout>
    ...
    <VerticalStackLayout.BackgroundColor>
        <OnPlatform x:TypeArguments="Color">
            <On Platform="iOS" Value="Silver" />
            <On Platform="Android" Value="Green" />
            <On Platform="WinUI" Value="Yellow" />
        </OnPlatform>
    </VerticalStackLayout.BackgroundColor>
    ...
</VerticalStackLayout>

Questa sintassi è leggermente dettagliata, ma per l'estensione OnPlatform è disponibile una sintassi ridotta. È possibile semplificare l'esempio che imposta la spaziatura interna, come indicato di seguito:

<VerticalStackLayout Padding="{OnPlatform iOS='30,60,30,30', Default='30'}">
    <!--XAML for other controls goes here -->
</VerticalStackLayout>

È possibile specificare un valore predefinito per una proprietà, insieme a qualsiasi valore specifico della piattaforma. In questo modulo il parametro di tipo viene dedotto dalla proprietà a cui è applicato l'attributo OnPlatform.

Per impostare il colore di sfondo, puoi usare questo frammento XAML al posto del secondo esempio precedente:

<VerticalStackLayout BackgroundColor="{OnPlatform WinUI=Yellow, iOS=Silver, Android=Green}">
    ...
</VerticalStackLayout>

Verifica delle conoscenze

1.

Quale estensione di mark-up è possibile utilizzare nel codice XAML per rilevare la piattaforma in cui è in esecuzione l'app?

DevicePlatform

DeviceInfo

OnPlatform

2.

Qual è lo scopo dell'attributo TypeArguments per l'estensione OnPlatform ?

Specifica il parametro di tipo per l'estensione e assicura che venga creato il tipo corretto di estensione.

Specifica il tipo di piattaforma in cui è in esecuzione l'app.

Consente di specificare la proprietà da impostare con un valore specifico della piattaforma.

Devi rispondere a tutte le domande prima di controllare il lavoro svolto.