Nonostante l'enorme quantità di device in commercio, troviamo una caratteristica che li accomuna tutti: lo spazio non è mai abbastanza. Le informazioni da visualizzare sono sempre molte di più dello spazio disponibile a schermo, devono essere rappresentate con un layout user-friendly, chiaro e capibile. Occorre quindi riuscire a compartimentare le informazioni e mostrare solo le principali, per poi dare all'utente la possibilità di entrare nello specifico.

A questo scopo possiamo utilizzare il nuovo componente Expander che, essendo un elemento sperimentale, occorre abilitare il flag all'interno della classe App:

Device.SetFlags(new string[]{ "Expander_Experimental" });

Nell'expander, oltre al contenuto, abbiamo la possibilità di impostare un Header, che sarà la parte del componente sempre visibile all'interno dell'interfaccia:

<Expander>
    <Expander.Header>
        <Label Text="Componente expander"/>
    </Expander.Header>
    <Grid Padding="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Label Text="Colonna 0" />
        <Label Grid.Column="1"
               Text="Colonna 1" />
    </Grid>
</Expander>

Questo approccio fa si che il contenuto venga inserito in pagina immediatamente durante il caricamento della stessa. Viceversa, se utilizzassimo proprietà in binding, ed inserissimo il layout all'interno di un ContentTemplate, il layout verrà caricato in pagina solo al momento dell'apertura del controllo.

Per rendere l'utente a conoscenza del contenuto espandibile è possibile inserire all'interno dell'header una immagine, la cui source si baserà sulla proprietà IsExpanded del controllo:

<Expander.Header>
    <Grid>
        <Label Text="{Binding Title}" />
        <Image Source="expand.png"
                HorizontalOptions="End"
                VerticalOptions="Start">
            <Image.Triggers>
                <DataTrigger TargetType="Image"
                                Binding="{Binding Source={RelativeSource AncestorType={x:Type Expander}}, Path=IsExpanded}"
                                Value="True">
                    <Setter Property="Source"
                            Value="collapse.png" />
                </DataTrigger>
            </Image.Triggers>
        </Image>
    </Grid>
</Expander.Header>