Espansione di Xamarin Community Toolkit

  • Articolo

Scaricare l'esempio. Scaricare l'esempio

Il controllo Xamarin.CommunityToolkit Expander fornisce un contenitore espandibile per ospitare qualsiasi contenuto. Il controllo ha un'intestazione e un contenuto e il contenuto viene visualizzato o nascosto toccando l'intestazione Expander . Quando viene visualizzata solo l'intestazione, l'oggetto ExpanderExpander viene compresso. Quando il Expander contenuto è visibile, viene Expanderespanso.

Nota

Il Expander controllo è noto per mostrare un comportamento indesiderato quando usato in un ListView oggetto o CollectionView. In questo momento è consigliabile non usare un Expander oggetto in uno di questi controlli.

Gli screenshot seguenti mostrano un Expander oggetto negli stati compressi ed espansi, con caselle rosse che indicano l'intestazione e il contenuto:

Screenshot di un espansore in stati compressi e espansi, in iOS e Android.

Nota

Il Expander controllo viene completamente implementato nel codice multipiattaforma. Pertanto, è disponibile in tutte le piattaforme supportate da Xamarin.Forms.

Il Expander controllo definisce le proprietà seguenti:

  • AnimationEasing, di tipo Easing, che rappresenta la funzione di interpolazione da applicare al Expander contenuto quando si espande/comprime se ExpandAnimationEasing/CollapseAnimationEasing/CollapseAnimationEasing non è impostato.
  • AnimationLength, di tipo uint, che definisce la durata dell'animazione quando l'oggetto Expander viene espanso/compresso. Il valore predefinito di questa proprietà è 250ms.
  • CollapseAnimationEasing, di tipo Easing, che rappresenta la funzione di interpolazione da applicare al Expander contenuto quando viene compresso.
  • CollapseAnimationLength, di tipo uint, che definisce la durata dell'animazione quando l'oggetto Expander viene compresso. Se questa proprietà non è impostata, verrà applicato il valore AnimationLength.
  • Command, di tipo ICommand, che viene eseguito quando l'intestazione Expander viene toccato.
  • CommandParameter, di tipo object, ovvero il parametro passato a Command.
  • Content, di tipo View, che definisce il contenuto da visualizzare quando si Expander espande.
  • ContentTemplate, di tipo , che è il modello DataTemplateusato per gonfiare dinamicamente il contenuto di Expander.
  • ExpandAnimationEasing, di tipo Easing, che rappresenta la funzione di interpolazione da applicare al contenuto durante l'espansione Expander .
  • ExpandAnimationLength, di tipo uint, che definisce la durata dell'animazione quando si Expander espande. Se questa proprietà non è impostata, verrà applicato il valore AnimationLength.
  • ForceUpdateSizeCommand, di tipo ICommand, che definisce il comando eseguito quando la dimensione dell'oggetto Expander viene aggiornata. Questa proprietà usa la modalità di OneWayToSource associazione.
  • Header, di tipo View, che definisce il contenuto dell'intestazione.
  • IsExpanded, di tipo bool, che determina se l'oggetto Expander è espanso . Questa proprietà usa la TwoWay modalità di associazione e ha un valore predefinito di false.
  • State, di tipo ExpandState, che rappresenta lo stato dell'oggetto Expander. Questa proprietà usa la modalità di OneWayToSource associazione.
  • TouchCaptureView, di tipo View, che archivia la visualizzazione responsabile dell'attivazione dell'animazione di espansione/confronto, toccando.

Queste proprietà sono supportate da BindableProperty oggetti, che significa che possono essere destinazioni di data binding e stile.

Nota

La Content proprietà è la proprietà contenuto della Expander classe e pertanto non deve essere impostata in modo esplicito da XAML.

L'enumerazione ExpandState definisce i membri seguenti:

  • Expanding indica che l'oggetto Expander è in espansione.
  • Expanded indica che l'oggetto Expander viene espanso.
  • Collapsing indica che il Expander confronto è in corso.
  • Collapsed indica che l'oggetto Expander è compresso.

Il Expander controllo definisce anche un Tapped evento generato quando l'intestazione Expander viene toccato. Include inoltre Expander un ForceUpdateSize metodo che può essere chiamato per ridimensionare a livello di codice l'oggetto Expander in fase di esecuzione.

Importante

Il expander fa parte di Xamarin.Forms ed è stato spostato in Xamarin.CommunityToolkit. Nell'ambito di tale spostamento, l'enumerazione ExpanderState è stata rinominata in ExpandState

Creare un espansore

Nell'esempio seguente viene illustrato come creare un'istanza Expander di in XAML:

<Expander>
    <Expander.Header>
        <Label Text="Baboon"
               FontAttributes="Bold"
               FontSize="Medium" />
    </Expander.Header>
    <Grid Padding="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Image Source="http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
               Aspect="AspectFill"
               HeightRequest="120"
               WidthRequest="120" />
        <Label Grid.Column="1"
               Text="Baboons are African and Arabian Old World monkeys belonging to the genus Papio, part of the subfamily Cercopithecinae."
               FontAttributes="Italic" />
    </Grid>
</Expander>

In questo esempio, l'oggetto Expander viene compresso per impostazione predefinita e visualizza un oggetto Label come intestazione. Toccando l'intestazione viene visualizzata l'espansione Expander per visualizzarne il contenuto, ovvero un Grid oggetto contenente controlli figlio. Quando l'oggetto viene espanso, toccando l'intestazione Expander si comprime .Expander

Importante

Quando si imposta la Expander.Content proprietà, in modo implicito o esplicito, il Expander contenuto viene creato quando la pagina contenente viene spostata su, anche se l'oggetto Expander viene compresso. Tuttavia, la Expander.ContentTemplate proprietà può essere impostata sul contenuto che viene gonfiato solo quando l'espansione Expander viene espansa per la prima volta. Per altre informazioni, vedere Creare contenuto espandibile su richiesta.

In alternativa, è possibile creare un oggetto Expander nel codice:

Expander expander = new Expander
{
    Header = new Label
    {
        Text = "Baboon",
        FontAttributes = FontAttributes.Bold,
        FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label))
    }
};

Grid grid = new Grid
{
    Padding = new Thickness(10),
    ColumnDefinitions =
    {
        new ColumnDefinition { Width = GridLength.Auto },
        new ColumnDefinition { Width = GridLength.Auto }
    }
};

grid.Children.Add(new Image
{
    Source = "http://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg",
    Aspect = Aspect.AspectFill,
    HeightRequest = 120,
    WidthRequest = 120
});

grid.Children.Add(new Label
{
    Text = "Baboons are African and Arabian Old World monkeys belonging to the genus Papio, part of the subfamily Cercopithecinae.",
    FontAttributes = FontAttributes.Italic
}, 1, 0);

expander.Content = grid;

Creare contenuto espandibile su richiesta

Expander il contenuto può essere creato su richiesta, in risposta all'espansione Expander . Questa operazione può essere eseguita impostando la Expander.ContentTemplate proprietà su un DataTemplate che contiene il contenuto:

<Expander>
    <Expander.Header>
        <Label Text="{Binding Name}"
               FontAttributes="Bold"
               FontSize="Medium" />
    </Expander.Header>
    <Expander.ContentTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Image Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="120"
                       WidthRequest="120" />
                <Label Grid.Column="1"
                       Text="{Binding Details}"
                       FontAttributes="Italic" />
            </Grid>
        </DataTemplate>
    </Expander.ContentTemplate>
</Expander>

In questo esempio il Expander contenuto viene gonfiato solo quando l'espansione Expander viene espansa per la prima volta.

Il vantaggio di questo approccio è che quando una pagina contiene più Expander oggetti, il contenuto di un Expander oggetto viene creato solo quando viene espanso per la prima volta dall'utente.

Aggiungere un indicatore di espansione

Un Image oggetto può essere aggiunto a un'intestazione Expander per fornire un'indicazione visiva dello stato di espansione. Un DataTrigger oggetto può essere associato a Image, che modifica la Source proprietà in base al valore della Expander.IsExpanded proprietà:

<Expander>
    <Expander.Header>
        <Grid>
            <Label Text="{Binding Name}"
                   FontAttributes="Bold"
                   FontSize="Medium" />
            <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>
    <Expander.ContentTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Image Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="120"
                       WidthRequest="120" />
                <Label Grid.Column="1"
                       Text="{Binding Details}"
                       FontAttributes="Italic" />
            </Grid>
        </DataTemplate>
    </Expander.ContentTemplate>
</Expander>

In questo esempio viene Image visualizzata l'icona expand per impostazione predefinita:

Screenshot di un'icona Expander in stato compresso, in iOS e Android.

La IsExpanded proprietà diventa true quando l'intestazione Expander viene toccata, che comporta la visualizzazione dell'icona collapse :

Screenshot di un'icona Espandi in stato di espansione in iOS e Android.

Per altre informazioni sui trigger, vedere Trigger Xamarin.Forms.

Incorporare un espansore in un espansore

Il contenuto di un oggetto Expander può essere impostato su un altro Expander controllo per abilitare più livelli di espansione. Il codice XAML seguente mostra un Expander il cui contenuto è un altro Expander oggetto:

<Expander>
    <Expander.Header>
        <Label Text="{Binding Name}"
               FontAttributes="Bold"
               FontSize="Medium" />
    </Expander.Header>
    <Expander Padding="10">
        <Expander.Header>
            <Label Text="{Binding Location}"
                   FontSize="Medium" />
        </Expander.Header>
            <Expander.ContentTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding ImageUrl}"
                               Aspect="AspectFill"
                               HeightRequest="120"
                               WidthRequest="120" />
                        <Label Grid.Column="1"
                               Text="{Binding Details}"
                               FontAttributes="Italic" />
                    </Grid>
                </DataTemplate>
            </Expander.ContentTemplate>
    </Expander>
</Expander>

In questo esempio, toccando l'intestazione radice Expander viene mostrata l'intestazione per il figlio Expander:

Screenshot di un espansore incorporato, in iOS e Android (compresso).

Toccando l'intestazione figlio Expander il contenuto viene gonfiato e visualizzato:

Screenshot di un espansore incorporato, in iOS e Android (espanso).

Definire l'animazione di espansione e compressione

L'animazione che si verifica quando un'espansione Expander o comprime può essere definita impostando le ExpandAnimationEasing proprietà e CollapseAnimationEasing su una delle funzioni di interpolazione incluse in Xamarin.Forms o funzioni di interpolazione personalizzate. Per impostazione predefinita, le animazioni di espansione e compressione si verificano oltre 250ms. Tuttavia, queste durate possono essere modificate impostando le ExpandAnimationLength proprietà e CollapseAnimationLength sui uint valori.

Il codice XAML seguente mostra un esempio di definizione dell'animazione che si verifica quando l'oggetto Expander viene espanso o compresso dall'utente:

<Expander ExpandAnimationEasing="{CubicIn}"
          ExpandAnimationLength="500"
          CollapseAnimationEasing="{CubicOut}"
          CollapseAnimationLength="500">
    <Expander.Header>
        <Label Text="{Binding Name}"
               FontAttributes="Bold"
               FontSize="Medium" />
    </Expander.Header>
    <Expander.ContentTemplate>
        <DataTemplate>
            <Grid Padding="10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Image Source="{Binding ImageUrl}"
                       Aspect="AspectFill"
                       HeightRequest="120"
                       WidthRequest="120" />
                <Label Grid.Column="1"
                       Text="{Binding Details}"
                       FontAttributes="Italic" />
            </Grid>
        </DataTemplate>
    </Expander.ContentTemplate>
</Expander>

In questo esempio, la CubicIn funzione di interpolazione accelera lentamente l'animazione di espansione oltre 500ms e la CubicOut funzione di interpolazione rallenta rapidamente l'animazione di compressione oltre 500ms.

Per altre informazioni sulle funzioni di interpolazione, vedere Funzioni di interpolazione di Xamarin.Forms.

Ridimensionare un espansore in fase di esecuzione

Un Expander oggetto può essere ridimensionato a livello di codice in fase di esecuzione con il ForceUpdateSize metodo .

Dato un Expander oggetto denominato expander, il cui contenuto include un LabelTapGestureRecognizer oggetto collegato, nell'esempio di codice seguente viene illustrata la chiamata al ForceUpdateSize metodo:

void OnLabelTapped(object sender, EventArgs e)
{
    Label label = sender as Label;
    Expander expander = label.Parent.Parent.Parent as Expander;

    if (label.FontSize == Device.GetNamedSize(NamedSize.Default, label))
    {
        label.FontSize = Device.GetNamedSize(NamedSize.Large, label);
    }
    else
    {
        label.FontSize = Device.GetNamedSize(NamedSize.Default, label);
    }
    expander.ForceUpdateSize();
}

In questo esempio, l'oggetto FontSize di una Label modifica quando viene Label toccato. A causa della modifica delle dimensioni del tipo di carattere, è necessario aggiornare le dimensioni dell'oggetto Expander chiamando il ForceUpdateSize relativo metodo.

Disabilitare un espansore

Un'applicazione può immettere uno stato in cui l'espansione di un oggetto Expander non è un'operazione valida. In questi casi, l'oggetto Expander può essere disabilitato impostandone la IsEnabled proprietà su false. Ciò impedisce agli utenti di espandere o comprimere l'oggetto Expander.