SemanticOrderView

SemanticOrderView offre la possibilità di controllare l'ordine di VisualElements per le utilità per la lettura dello schermo e migliorare l'accessibilità di un'applicazione. Ciò può essere particolarmente utile quando si creano interfacce utente in ordini diversi dall'ordine in cui gli utenti e le utilità per la lettura dello schermo li spostano.

Uso di SemanticOrderView

Nell'esempio seguente viene illustrato come SemanticOrderView modificare l'ordine in cui l'utilità per la lettura dello schermo annuncia gli elementi dall'ordine in cui vengono aggiunti all'interfaccia utente. Il codice XAML seguente mostra il rendering del TitleLabel titolo dopo l'oggetto DescriptionLabel che esegue il rendering della descrizione. Ciò significa che la descrizione verrà visualizzata visivamente prima del titolo. Anche se questo potrebbe avere senso quando qualcuno lo guarda, non ha necessariamente senso per qualcuno che è ipovedenti e non vede lo schermo (interamente).

<ContentPage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    x:Class="CommunityToolkit.Maui.Sample.Pages.Views.SemanticOrderViewPage"
    Title="Semantic Order View">
    <ContentPage.Content>
        <toolkit:SemanticOrderView x:Name="SemanticOrderView">
            <Grid RowDefinitions="2*,*">
                
                <Label x:Name="DescriptionLabel" Text="{Binding Description}" />

                <Label x:Name="TitleLabel" Text="{Binding Title}" FontSize="30" />

            </Grid>
        </toolkit:SemanticOrderView>
    </ContentPage.Content>
</ContentPage>

A questo scopo, nel file code-behind è possibile modificare l'ordine che verrà usato dall'utilità per la lettura dello schermo del dispositivo come indicato di seguito:

using System.Collections.Generic;

namespace CommunityToolkit.Maui.Sample.Pages.Views;

public partial class SemanticOrderViewPage : ContentPage
{
    public SemanticOrderViewPage()
    {
        InitializeComponent();

        this.SemanticOrderView.ViewOrder = new List<View> { TitleLabel, DescriptionLabel };
    }
}

In questo modo, si indica che l'ordine SemanticOrderView "appropriato" per questi controlli, quando si accede tramite il software per la lettura dello schermo, consiste nel concentrarsi prima di tutto e TitleLabel poi DescriptionLabel.

Esempi

È possibile trovare un esempio di questa funzionalità in azione nell'applicazione di esempio .NET MAUI Community Toolkit.

API

È possibile trovare il codice sorgente per SemanticOrderView over nel repository GitHub di .NET MAUI Community Toolkit.