Windows應用商店：如何使ListView具有可擴展/可擴展的ListItem？

Question

我在C＃Windows Store應用程序中有一個包含項目的Listview（是您所說的這些嗎？聽說它們不再被稱為Metro Apps）。

與Android中的ExpandableListView類似，我希望能夠點擊列表項 （而不是按鈕）以使該列表項展開， 點擊展開的列表項使其折疊，如果您點擊其他列表項，則當前展開的列表項將崩潰，另一個將擴大。

在我的特殊情況下，我有一個用於列表項的展開和未展開視圖的DataTemplate 。 我已經看到Android的ExpandableListView可以使用附加信息來擴展列表項 （WPF的Expander可以執行類似的操作），而不是用較大的項替換它 ，但是Windows Store Apps中是否有通用的解決方案？ 如果不是，最接近的等效項是什么？

就像下圖一樣，我想知道是否有一個可以以這種方式擴展列表項的組件，否則，我有哪些選擇：

Answer 1

我最終得到了一個可行的解決方案，但看起來並不花哨。 當您單擊項目時，它將切換DataTemplate ，但是沒有動畫：它將立即切換。

這是重要的代碼部分：

XAML

<Page.Resources>
    <DataTemplate x:Key="dtSmall">
        <!--Component template for the un-expanded listitems-->
    </DataTemplate>
    <DataTemplate x:Key="dtEnlarged">
        <!--Component template for the expanded listitems-->
    </DataTemplate>
</Page.Resources>
<Grid>
    <ListView x:Name="lvEnlargeable"
        IsItemClickEnabled="True"
        ItemTemplate="{StaticResource dtSmall}"
        ItemsSource="{Binding ...}"
        SelectionChanged="LVEnlargeable_SelectionChanged"
        ItemClick="LVEnlargeable_ItemClick"/>
</Grid>

XAML文件

public sealed partial class MainPage : Page
{
    private DataTemplate dtSmall;
    private DataTemplate dtEnlarged;

    public MainPage()
    {
        this.InitializeComponent();
        dtSmall = (DataTemplate)Resources["dtSmall"];
        dtEnlarged = (DataTemplate)Resources["dtEnlarged"];
    }

    // A selected item is treated as an expanded/enlarged item
    private void LVEnlargeable_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        /* First we set all the items that has been deselected
        to be collapsed, aka. using the dtSmall DataTemplate.
        We expect 0 or 1 item to have been deselected
        but handle all cases easily with a foreach loop.
        */
        foreach (var item in e.RemovedItems)
        {
            // Set the DataTemplate of the deselected ListViewItems
            ((ListViewItem)(sender as ListView).ContainerFromItem(item)).ContentTemplate = dtSmall;
        }

        /* Then we set all the items that has been selected
        to be expanded.
        We should probably throw an Exception if more than 1 was found,
        because it's unwanted behavior, but we'll ignore that for now.
        */
        foreach (var item in e.AddedItems)
        {
            ((ListViewItem)(sender as ListView).ContainerFromItem(e.AddedItems[0])).ContentTemplate = dtEnlarged;
        }
    }

    /* We need click events because SelectionChanged-events
    cannot detect clicks on an already selected item */
    private void LVEnlargeable_ItemClick(object sender, ItemClickEventArgs e)
    {
        ListView lv = (sender as ListView);

        /* Having set the IsItemClickEnabled property on the ListView to True
        we have to handle selection events manually.
        If nothing is selected when this click occurs, then select this item*/
        if (lv.SelectedItem == null)
        {
            lv.SelectedItem = e.ClickedItem;
        }
        else
        {
            // Clicking on an expanded/selected/enlarged item will deselect it
            if (lv.SelectedItem.Equals(e.ClickedItem))
            {
                lv.SelectedItem = null;
            }
            else
            {   /* If it's not a selected item, then select it
                    (and let SelectionChanged unselect the already selected item) */
                lv.SelectedItem = e.ClickedItem;
            }
        }
    }
}

我還沒有測試過此隔離代碼是否足以解決此問題，但我希望如此，並且此代碼至少包含關鍵點。 已經很晚了，我只想為有好奇心的人們發布一些東西。 如果這對您不起作用，請對此問題發表評論，我將確保添加缺少的部分。

我也弄混了ListViewItemStyleContainer的ListViewItemPresenter，以獲得更好的選擇效果等。但我認為最好使其簡短。 如果您也覺得這很有趣，請隨時對此發表評論，我將嘗試包括它。