Expander in Xamarin.Forms

Question

Wie kann ich eine Liste von Elementen in Xamarin anzeigen, die ich wie den in WPF verwendeten Expander erweitern und reduzieren kann? Es muss jeden Inhalt zulassen, den ich einfügen möchte. Es sollte auch einen Header haben.

Answer 1

Ich habe dies erreicht, indem ich eine ContentView verwendet und meine eigene Kontrolle erstellt habe. Ich habe eine Schaltfläche mit einer Beschriftung neben dem Header und einem Raster, das das einzelne untergeordnete Element enthält. Dieses Element kann ein Stapellayout sein, das mehrere Elemente auflistet oder was immer ich möchte. Ich kann dann mehrere Expander in einem Scrollview platzieren und in der Lage sein, die Elemente darin zu erweitern und zu scrollen.

Dies ist der Code für meine Kontrolle:

public class Expander : ContentView 
{ 
    public event EventHandler Clicked; 

    protected Grid ContentGrid; 
    protected Button btnControl; 
    public Grid ContentContainer = new Grid(); 
    public Label HeaderContainer; 

    private Boolean _IsExpanded; 
    public Boolean IsExpanded 
    { 
     get { return _IsExpanded; } 
     set 
     { 
      _IsExpanded = value; 
      if (_IsExpanded) 
      { 
       ContentContainer.IsVisible = true; 
       btnControl.Text = "-"; 
      } 
      else 
      { 
       ContentContainer.IsVisible = false; 
       btnControl.Text = "+"; 
      } 
     } 
    } 

    public Expander() 
    { 
     ContentGrid = new Grid 
     { 
      VerticalOptions = LayoutOptions.FillAndExpand, 
      HorizontalOptions = LayoutOptions.FillAndExpand 
     }; 

     ContentGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(42) }); 
     ContentGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }); 
     ContentGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) }); 
     ContentGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) }); 

     btnControl = new Button 
     { 
      VerticalOptions = LayoutOptions.Center, 
      HorizontalOptions = LayoutOptions.Center, 
     }; 
     btnControl.HeightRequest = 42; 
     btnControl.WidthRequest = 42; 
     IsExpanded = false; 
     btnControl.Clicked += Btn_Clicked; 
     ContentGrid.Children.Add(btnControl); 

     ContentContainer.VerticalOptions = LayoutOptions.FillAndExpand; 
     ContentContainer.HorizontalOptions = LayoutOptions.FillAndExpand; 
     Grid.SetRow(ContentContainer, 1); 
     Grid.SetColumnSpan(ContentContainer, 2); 
     ContentGrid.Children.Add(ContentContainer); 

     HeaderContainer = new Label 
     { 
      TextColor = Color.White, 
      VerticalOptions = LayoutOptions.Center, 
      HorizontalOptions = LayoutOptions.FillAndExpand, 
     }; 
     Grid.SetColumn(HeaderContainer, 1); 
     ContentGrid.Children.Add(HeaderContainer); 

     base.Content = ContentGrid; 

     this.BackgroundColor = Color.Transparent; 
    } 

    private async void Btn_Clicked(object sender, EventArgs e) 
    { 
     IsExpanded = !IsExpanded; 
    } 

    public static BindableProperty HeaderProperty = BindableProperty.Create(
     propertyName: "Header", 
     returnType: typeof(String), 
     declaringType: typeof(Expander), 
     defaultValue: null, 
     defaultBindingMode: BindingMode.TwoWay, 
     propertyChanged: HeaderValueChanged); 

    private static void HeaderValueChanged(BindableObject bindable, object oldValue, object newValue) 
    { 
     ((Expander)bindable).HeaderContainer.Text = (String)newValue; 
    } 

    public event EventHandler HeaderChanged; 
    private void RaiseHeaderChanged() 
    { 
     if (HeaderChanged != null) 
      HeaderChanged(this, EventArgs.Empty); 
    } 

    public String Header 
    { 
     get { return (String)GetValue(HeaderProperty); } 
     set 
     { 
      SetValue(HeaderProperty, value); 
      OnPropertyChanged(); 
      RaiseHeaderChanged(); 
     } 
    } 

    public View content 
    { 
     get { return ContentContainer.Children[0]; } 
     set 
     { 
      ContentContainer.Children.Clear(); 
      ContentContainer.Children.Add((View)value); 
      OnPropertyChanged(); 
     } 
    } 

} 

Das XAML ist:

<ScrollView> 
    <StackLayout> 
    <controls:Expander Header="{Binding Description}"> 
     <controls:Expander.content> 
     <StackLayout Padding="4"> 
      <Label Text="Test" /> 
      <Label Text="Test" /> 
     </StackLayout> 
     </controls:Expander.content> 
    </controls:Expander> 
    <controls:Expander Header="{Binding Description}"> 
     <controls:Expander.content> 
     <StackLayout Padding="4"> 
      <Label Text="Test" /> 
     </StackLayout> 
     </controls:Expander.content> 
    </controls:Expander> 
    </StackLayout> 
</ScrollView> 

Und das ist das Ergebnis: