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> 

这是结果：