Xamarin.Formsのエキスパンダー

Question

XamarinでWPFで使用されているエキスパンダーのように展開して折りたたむことができるアイテムのリストを表示するにはどうすればよいですか？それは私がそれに入れたい任意のコンテンツを許可する必要があります。それにはヘッダーも必要です。

Answer 1

これは、ContentViewを使用して独自のコントロールを作成することで実現しました。私はヘッダーのためのそれの横にラベルと単一の子要素を保持するグリッドを持つボタンを持っています。その要素は、いくつかの項目や必要なものをリストするスタックレイアウトにすることができます。次に、スクロールビューに複数のエクスパンダを配置して、その中のアイテムを展開してスクロールすることができます。

これは私の制御のためのコードです：

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(); 
     } 
    } 

} 

これはXAMLです：

<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> 

そして、これが結果です：