如何在Xaml中创建一个可收缩的stackpanel

我宁愿尝试创建我自己的UserControl，可以扩展或不依赖于它的VisualState。我的快速和简单的例子:

MainPage.xaml:

<Page.Resources>
    <DataTemplate x:Key="MyItemTemplate">
        <local:MyItem></local:MyItem>
    </DataTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ListView ItemsSource="{Binding Items}" ItemTemplate="{StaticResource MyItemTemplate}" 
              SelectionMode="None" IsItemClickEnabled="True">
    </ListView>
</Grid>

MainPage.xamls.cs:

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        InitializeComponent();
        DataContext = new ViewModel();
    }
}

ViewModel.cs:

public class ViewModel
{
    public ViewModel()
    {
        Items.Add(new MyItemViewModel("Item1"));
        Items.Add(new MyItemViewModel("Item2"));
        Items.Add(new MyItemViewModel("Item3"));
    }
    public ApplicationDataLocality ApplicationDataLocalityEnum { get; } =
           ApplicationDataLocality.Local;
    public FontStyle FontStyleEnum { get; } =
               FontStyle.Normal;
    public ObservableCollection<MyItemViewModel> Items { get; set; } = new ObservableCollection<MyItemViewModel>();
}

MyItem.xaml.cs:

<StackPanel Orientation="Vertical">
    <TextBlock Text="{Binding Title}" x:Name="TitleBlock"  Tapped="Title_OnTapped"/>
    <ListView ItemsSource="{Binding Items}" x:Name="ItemsBlock" ItemClick="Items_OnItemClick" IsItemClickEnabled="True"/>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Regular">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsBlock" Storyboard.TargetProperty="Visibility" >
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Expanded">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsBlock" Storyboard.TargetProperty="Visibility" >
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</StackPanel>

MyItem.xaml.cs:

public enum MyItemState
{
    Regular,
    Expanded
}
public sealed partial class MyItem : UserControl
{
    private MyItemState _state;
    public MyItemState State
    {
        get { return _state; }
        set
        {
            _state = value;
            VisualStateManager.GoToState(this, _state.ToString(), true);
        }
    }
    public MyItem()
    {
        InitializeComponent();
        State = MyItemState.Regular;
    }
    private void Title_OnTapped(object sender, TappedRoutedEventArgs e)
    {
        if (State == MyItemState.Regular)
        {
            State = MyItemState.Expanded;
        }
        else
        {
            State = MyItemState.Regular;
        }
    }
    private void Items_OnItemClick(object sender, ItemClickEventArgs e)
    {
        // action after subitem is clicked
    }
}

和MyItemViewModel:

public class MyItemViewModel
{
    public ObservableCollection<TextBlock> Items { get; set; } = new ObservableCollection<TextBlock>();
    public string Title { get; set; }
    public MyItemViewModel(string title)
    {
        Title = title;
        Items.Add(new TextBlock() { Text = "SubItem1" });
        Items.Add(new TextBlock() { Text = "SubItem2" });
        Items.Add(new TextBlock() { Text = "SubItem3" });
    }
}

每当你点击MyItem标题，它会改变它的状态-扩大或缩小它的子项(只有文本框只是为了保持简单-可能由另一个UserControl与任何视图你想)，在这种情况下，我存储在另一个ListView。待办事项:更改样式和动画，使状态更改看起来更好等等。