4

我在 C# Windows Store App 中有一个包含项目的 Listview（这就是你所说的吗？我听说它们不再称为 Metro Apps）。

与 Android 中的ExpandableListView类似，我希望能够点击列表项（而不是按钮）以展开该列表项，点击展开的列表项使其折叠，如果您点击另一个列表项，当前展开的列表项将崩溃，另一个将展开。

在我的特定情况下，我对DataTemplate列表项的扩展和非扩展视图都有一个。我已经看到 Android 的 ExpandableListView 可以使用附加信息扩展列表项（WPF 中的Expander做了类似的事情），而不是用更大的 item 替换它，但是在 Windows Store Apps 中有一个通用的解决方案吗？如果不是，最接近的等价物是什么？

就像在下图中一样，我想知道是否有一个组件可以以这种方式扩展列表项，或者如果没有，我有哪些替代方案： Windows Store App中Expandable-ListItem的绘制

4

1 回答 1

5

我最终得到了一个可行但看起来不太花哨的解决方案。当您单击项目时它会切换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.CS

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 以获得更好的选择效果等，但我认为最好保持简短。如果您也觉得这很有趣，那么也可以随时发表评论，我会尝试将其包含在内。

于 2013-10-15T23:52:25.270 回答