Xamarin Community Toolkit Expander

  • Artikel

Beispiel herunterladen. Laden Sie das Beispiel herunter

Das Xamarin.CommunityToolkit-Steuerelement Expander bietet einen erweiterbaren Container zum Hosten beliebiger Inhalte. Das Steuerelement verfügt über eine Kopfzeile und einen Inhalt, und der Inhalt wird angezeigt oder ausgeblendet, indem sie auf die Expander Kopfzeile tippen. Wenn nur die Kopfzeile angezeigt wird, wird dies ExpanderExpanderreduziert. Wenn der Inhalt sichtbar ist, wird diesExpanderExpander erweitert.

Hinweis

Das Expander Steuerelement ist bekannt, dass unerwünschtes Verhalten angezeigt wird, wenn sie in einem oder einem ListView Oder CollectionViewverwendet werden. Zu diesem Zeitpunkt wird empfohlen, eine Expander dieser Steuerelemente nicht zu verwenden.

Die folgenden Screenshots zeigen einen Expander reduzierten und erweiterten Zustand mit roten Feldern, die die Kopfzeile und den Inhalt angibt:

Screenshot eines Expanders in reduzierten und erweiterten Zuständen auf iOS und Android.

Hinweis

Das Expander Steuerelement wird vollständig in plattformübergreifendem Code implementiert. Daher ist es auf allen Plattformen verfügbar, die von Xamarin.Forms unterstützt werden.

Das Expander Steuerelement definiert die folgenden Eigenschaften:

  • AnimationEasing, des Typs Easing, der die Beschleunigungsfunktion darstellt, die auf den Expander Inhalt angewendet werden soll, wenn es erweitert/kollapsing, wenn ExpandAnimationEasing/CollapseAnimationEasing nicht festgelegt ist.
  • AnimationLength, vom Typ uint, der die Dauer der Animation definiert, wenn die Expander Erweiterung/Abbruchzeit erfolgt. Der Standardwert dieser Eigenschaft beträgt 250ms.
  • CollapseAnimationEasing, vom Typ Easing, der die Beschleunigungsfunktion darstellt, die auf den Expander Inhalt angewendet werden soll, wenn er abstürzt.
  • CollapseAnimationLength, vom Typ uint, der die Dauer der Animation definiert, wenn die Expander Animation abstürzt. Wenn diese Eigenschaft nicht festgelegt ist, wird der Wert "AnimationLength" angewendet.
  • Command, vom Typ ICommand, der ausgeführt wird, wenn die Expander Kopfzeile gekippt wird.
  • CommandParameter vom Typ object: der Parameter, der an Command übergeben wird.
  • Content, vom Typ View, der den Inhalt definiert, der angezeigt werden soll, wenn die Expander Erweiterung erweitert wird.
  • ContentTemplate, des Typs DataTemplate, der die Vorlage verwendet, um den Inhalt des ExpanderInhalts dynamisch aufblasen zu können.
  • ExpandAnimationEasing, vom Typ Easing, der die Beschleunigungsfunktion darstellt, die während der Erweiterung auf den Expander Inhalt angewendet werden soll.
  • ExpandAnimationLength, vom Typ uint, der die Dauer der Animation definiert, wenn die Expander Erweiterung erweitert wird. Wenn diese Eigenschaft nicht festgelegt ist, wird der Wert "AnimationLength" angewendet.
  • ForceUpdateSizeCommand, vom Typ ICommand, der den Befehl definiert, der ausgeführt wird, wenn die Größe des Expander Elements aktualisiert wird. Diese Eigenschaft verwendet den OneWayToSource Bindungsmodus.
  • Header, vom Typ View, der den Kopfzeileninhalt definiert.
  • IsExpanded, vom Typ, der bestimmt, ob die Expander Erweiterung boolerweitert wird. Diese Eigenschaft verwendet den TwoWay Bindungsmodus und verfügt über einen Standardwert von false.
  • State, vom Typ ExpandState, der den Zustand des ExpanderTyps darstellt. Diese Eigenschaft verwendet den OneWayToSource Bindungsmodus.
  • TouchCaptureView, vom Typ View, der die Ansicht speichert, die für das Auslösen der Erweiterungs-/Kollapierungsanimation verantwortlich ist, indem Sie tippen.

Diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass sie Ziele von Datenbindungen sein können, und geformt.

Hinweis

Die Content-Eigenschaft ist die Inhaltseigenschaft der Expander-Klasse und muss daher nicht explizit in XAML festgelegt werden.

Die ExpandState-Enumeration definiert die folgenden Member:

  • Expanding gibt an, dass die Expander Erweiterung erweitert wird.
  • Expanded gibt an, dass die Expander Erweiterung erweitert wird.
  • Collapsing gibt an, dass die Expander Abbruchung erfolgt.
  • Collapsed gibt an, dass dies Expander reduziert ist.

Das Expander Steuerelement definiert auch ein Tapped Ereignis, das ausgelöst wird, wenn die Expander Kopfzeile gekippt wird. Enthält außerdem Expander eine ForceUpdateSize Methode, die programmgesteuert aufgerufen werden kann, um die Größe der Expander Laufzeit zu ändern.

Wichtig

Der Expander ist Teil von Xamarin.Forms und wurde in das Xamarin.CommunityToolkit verschoben. Im Rahmen dieser Verschiebung wurde die ExpanderState Aufzählung umbenannt. ExpandState

Erstellen eines Expanders

Im folgenden Beispiel wird gezeigt, wie eine Instanziierung in Expander XAML ausgeführt wird:

<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 diesem Beispiel wird die Expander Standardeinstellung reduziert und wird als Label Kopfzeile angezeigt. Wenn Sie auf die Kopfzeile tippen, wird die Erweiterung angezeigt, um den Expander Inhalt anzuzeigen, der ein Grid untergeordnetes Steuerelement enthält. Wenn dies Expander erweitert wird, reduziert das Tippen auf seine Kopfzeile die Expander.

Wichtig

Wenn Sie die Eigenschaft festlegen, entweder implizit oder explizit, wird der Expander.Content Inhalt erstellt, wenn die Seite, zu der Expander sie enthält, auch wenn dies Expander reduziert wird. Die Eigenschaft kann jedoch auf Inhalte festgelegt werden, die nur aufgeblasen werden, wenn die Expander.ContentTemplateExpander Erweiterung zum ersten Mal erweitert wird. Weitere Informationen finden Sie unter Create Expander content on demand.

Alternativ kann ein Expander Code erstellt werden:

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;

Erstellen von Erweiterungsinhalten nach Bedarf

Expander Inhalte können auf Bedarf erstellt werden, um auf die Expander Erweiterung zu reagieren. Dies kann erreicht werden, indem Sie die Eigenschaft auf einen DataTemplate Wert festlegen, der den Expander.ContentTemplate Inhalt enthält:

<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 diesem Beispiel wird der Inhalt nur aufgeblasen, wenn die ExpanderExpander Erweiterung zum ersten Mal erweitert wird.

Der Vorteil dieses Ansatzes ist, dass wenn eine Seite mehrere Expander Objekte enthält, der Inhalt Expander nur dann erstellt wird, wenn er zum ersten Mal vom Benutzer erweitert wird.

Hinzufügen eines Erweiterungsindikators

Eine Image Kann einer Expander Kopfzeile hinzugefügt werden, um einen visuellen Hinweis auf den Erweiterungszustand bereitzustellen. Eine DataTrigger kann an die ImageEigenschaft angefügt werden, die die Source Eigenschaft basierend auf dem Wert der Expander.IsExpanded Eigenschaft ändert:

<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 diesem Beispiel wird standardmäßig das Imageexpand Symbol angezeigt:

Screenshot eines Expander-Symbols im reduzierten Zustand, auf iOS und Android.

Die IsExpanded Eigenschaft wird true , wenn die Kopfzeile gekippt wird, was dazu führt, dass das Expandercollapse Symbol angezeigt wird:

Screenshot eines Erweiterungssymbols im Erweiterten Zustand, auf iOS und Android.

Weitere Informationen zu Triggern finden Sie unter Xamarin.Forms Triggers.

Einbetten eines Expanders in einen Expander

Der Inhalt eines Expander Steuerelements kann auf ein anderes Expander Steuerelement festgelegt werden, um mehrere Erweiterungsebenen zu ermöglichen. Im folgenden XAML-Code wird ein Expander anderes Expander Objekt angezeigt:

<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 diesem Beispiel wird durch Tippen auf die Stammheader Expander die Kopfzeile für das untergeordnete Element Expanderangezeigt:

Screenshot eines eingebetteten Expanders auf iOS und Android (reduziert).

Durch Tippen auf den untergeordneten Expander Header wird der Inhalt aufgeblasen und angezeigt:

Screenshot eines eingebetteten Expanders auf iOS und Android (erweitert).

Definieren der Erweiterungs- und Reduzierenanimation

Die Animation, die auftritt, wenn ein Expander Erweitern oder Reduzieren definiert werden kann, indem sie die ExpandAnimationEasing und CollapseAnimationEasing die Eigenschaften auf eine der in Xamarin.Forms oder benutzerdefinierten Beschleunigungsfunktionen enthaltenen Funktionen festlegen. Standardmäßig treten die Animationen für erweiterungs- und reduzierend über 250Ms auf. Diese Dauer kann jedoch geändert werden, indem Sie die ExpandAnimationLength Werte festlegen und CollapseAnimationLength eigenschaften uint festlegen.

Im folgenden XAML wird ein Beispiel für die Definition der Animation gezeigt, die auftritt, wenn der Expander Benutzer erweitert oder reduziert wird:

<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 diesem Beispiel beschleunigt die CubicIn Beschleunigungsfunktion langsam die Erweiterungsanimation über 500Ms, und die CubicOut Beschleunigungsfunktion verzögert schnell die Reduziertanimation über 500Ms.

Weitere Informationen zu Easing-Funktionen finden Sie unter Xamarin.Forms Easing-Funktionen.

Ändern der Größe eines Expanders zur Laufzeit

Eine Expander programmgesteuerte Größenänderung kann zur Laufzeit mit der ForceUpdateSize Methode geändert werden.

Angesichts eines Expander benannten Inhalts expander, dessen Inhalt einen LabelTapGestureRecognizer angefügten Inhalt enthält, zeigt das folgende Codebeispiel den Aufruf der ForceUpdateSize Methode:

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 diesem Beispiel wird die FontSizeLabel Änderung vorgenommen, wenn der Label Tipp erfolgt. Aufgrund der Größe der Schriftart, die sich ändert, ist es notwendig, die Größe Expander der Schriftart zu aktualisieren, indem sie die ForceUpdateSize Methode aufruft.

Deaktivieren eines Erweiterungsfelds

Eine Anwendung kann einen Zustand eingeben, in dem das Erweitern eines Expander gültigen Vorgangs nicht vorhanden ist. In solchen Fällen kann die Expander Eigenschaft durch Festlegen der IsEnabled Eigenschaft auf "false" deaktiviert werden. Dadurch wird verhindert, dass Benutzer das Erweitern oder Reduzieren der Expander.