Se si parla di applicazioni da contenuti ingegneristici, oppure di LOB in cui sono presenti grandi quantità di dati, oppure di liste in genere, può far comodo nascondere i dettagli che non ci riguardano per impostare il focus solo sui contenuti che contano. Abbiamo già affrontato qualcosa di simile in uno script precedente parlando dell'effetto Fade, ma in questo caso specifico, l'operazione è nascondere il contenuto, dopo aver applicato l'effetto Fade.

Nella Universal Windows Platform non esiste un controllo nativo che permetta di espandere o collassare delle porzioni di interfaccia grafica, sarebbe tutto da costruire in modo personalizzato secondo le nostre esigenze: grazie al Windows Community Toolkit però, è disponibile l'oggetto Expander che si occupa proprio di questo. Per aggiungere questo effetto è sufficiente registrare il controllo nello XAML:

<controls:Expander Header="Header of the expander"
                Foreground="White"
                Background="Gray"
                IsExpanded="True">
    <Grid Height="250">
        <TextBlock HorizontalAlignment="Center"
                Text="Questo è il contenuto"
                VerticalAlignment="Center" />
    </Grid>

    <controls:Expander.ContentOverlay>
        <Grid MinHeight="250">
            <TextBlock Text="Collapsed content" />
        </Grid>
  </controls:Expander.ContentOverlay>
</controls:Expander>

Seguendo l'esempio, abbiamo realizzato un contenuto che è visibile solamente quando viene reso visibile dal click dell'utente, mentre l'overlay mostra il contenuto solo quando l'elemento è collassato. Tramite la proprietà ExpandDirection si può anche specificare la modalità di espansione, ma di default è impostata dall'alto verso il basso. Il risultato dell'esempio sarà simile al seguente: