如何在ListViewItem UWP中折疊子控件

Question

通用Windows平台，C＃

如何從后面的代碼折疊/展開MainListView listitem的子listview？ 我沒有發現任何有效的方法。 我想在SelectionChanged事件上執行此操作。

XAML

        <ListView x:Name="DestListView" SelectionMode="Single" Margin="0,60,0,0" SelectionChanged="listview_SelectionChanged" >
        <ListView.ItemContainerStyle >
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Setter Property="BorderThickness" Value="0,.5,0,0" />
                <Setter Property="BorderBrush" Value="Gainsboro" />
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.ItemTemplate >
            <DataTemplate>
                <StackPanel>
                    <Grid>
                        <Grid HorizontalAlignment="Stretch">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="40"/>
                                <ColumnDefinition Width="100"/>
                                <ColumnDefinition Width="50"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="50"/>
                            </Grid.ColumnDefinitions>

                            <CheckBox Grid.Column="0" MinWidth="20" />
                            <TextBlock Grid.Column="1" Text="{Binding destination}" FontSize="20" />
                            <TextBlock Grid.Column="2" Text="{Binding total_quantity}" FontSize="20" Margin="10,0,0,0"/>
                            <TextBlock Grid.Column="3" Text="{Binding package_type}" FontSize="20" HorizontalAlignment="Center" Margin="10,0,0,0"/>
                            <TextBlock Grid.Column="4" Text="{Binding total_weight}" FontSize="20" Margin="10,0,0,0"/>
                        </Grid>
                    </Grid>

                    **<!--Collpase/Expand-->**

                    <ListView x:Name="DetailListView" ItemsSource="{Binding destination_data}" SelectionMode="Multiple" Margin="20,0,0,0" Visibility="Collapsed" >
                        <ListView.ItemTemplate >
                            <DataTemplate >
                                <StackPanel Orientation="Vertical">
                                    <TextBlock Text="{Binding visual_number}" FontSize="14" Foreground="White" HorizontalAlignment="Stretch" />
                                  </StackPanel>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>

                </StackPanel>

            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

代碼隱藏

     private void listview_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        //GET THE ITEM
        var selectItem = DestListView.Items[DestListView.SelectedIndex];

        //GET THE CHILD SOMEHOW
        //ListView childListView = (ListView)...not sure what to do here

        //if (childListView != null)
        //{
        //    if (childListView.Visibility == Visibility.Collapsed)
        //    {
        //        //childListView.Visibility = Visibility.Collapsed;
        //    }
        //    else
        //    {
        //        //childListView.Visibility = new Visibility;
        //    }
        //}

    }

Answer 1

這是我要怎么做。

我將創建兩個DataTemplates，一個在選擇（展開）時顯示，另一個在不展開時顯示。

下面是我的ViewModel 。

public class MyViewModel
{
    public MyViewModel()
    {
        myItems = new ObservableCollection<MyItems>();
        for(int i=1;i<=10;i++)
        {
            MyItems item = new MyItems();
            item.Name = "Main Item " + i.ToString();
            ObservableCollection<MySubItems> subItems = new ObservableCollection<MySubItems>();
            for (int j=1;j<=5;j++)
            {
                subItems.Add(new MySubItems() { Title = "Sub Item " + j.ToString() });
            }
            item.Data = subItems;
            myItems.Add(item);
        }
    }

    public ObservableCollection<MyItems> myItems { get; set; }
}

public class MyItems
{
    public string Name { get; set; }
    public ObservableCollection<MySubItems> Data { get; set; }
}

public class MySubItems
{
    public string Title { get; set; }
}

以下是我要求的 MainPage.xaml

<Page
    x:Class="App2.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App2"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.DataContext>
        <local:MyViewModel/>
    </Page.DataContext>

    <Page.Resources>
        <DataTemplate x:Key="NoSelectDataTemplate">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <TextBlock Text="{Binding Name}" />
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="SelectDataTemplate">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <TextBlock Text="{Binding Name}" />
                <ListView ItemsSource="{Binding Data}" Grid.Row="1">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Title}" />
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </Grid>
        </DataTemplate>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <ListView HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding myItems}" SelectionChanged="ListView_SelectionChanged" ItemTemplate="{StaticResource NoSelectDataTemplate}">
            <ListView.ItemContainerStyle >
                <Style TargetType="ListViewItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                    <Setter Property="BorderThickness" Value="0,.5,0,0" />
                    <Setter Property="BorderBrush" Value="Gainsboro" />
                </Style>
            </ListView.ItemContainerStyle>
        </ListView>
    </Grid>
</Page>

下面是我的SelectionChanged事件的外觀。

private int PreviousIndex;
private void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    ListView lv = sender as ListView;

    if (PreviousIndex >=0)
    {
        ListViewItem prevItem = (lv.ContainerFromIndex(PreviousIndex)) as ListViewItem;
        prevItem.ContentTemplate = Resources["NoSelectDataTemplate"] as DataTemplate;
    }

    ListViewItem item = (lv.ContainerFromIndex(lv.SelectedIndex)) as ListViewItem;
    item.ContentTemplate = Resources["SelectDataTemplate"] as DataTemplate;

    PreviousIndex = lv.SelectedIndex;
}

這是輸出