如何扩大SelectionChanged事件一个ListView项目在Windows 10？ [英] How to expand a ListView Item on SelectionChanged event in Windows 10?

问题描述

我目前使用Windows 10工作，我使用一个ListView显示基于我的要求的项目。现在我想，当用户点击的ListView项目，扩大在同一页上ListView和他提供了一些选项，使用户体验方便。

I am currently working with Windows 10 and I am using a ListView to display items based on my requirement. Now I want to expand ListView on the same page when User clicks on ListView Item and provide him with some options to make user experience easy.

我知道如何实施使用ListView和显示项目的DataTemplate，但我不知道我是否可以使用的ListView达到我的要求。

I am aware on how to implement ListView and display items using DataTemplate but I am not sure whether I can achieve my requirement using ListView.

我要实现类似如下：

的

我要像显示联系人选项，添加照片，等上ListView项点击。我也尝试使用的PopupMenu实现相同，但它有增加高达6命令的限制，我有比这更命令。我要动态地添加这些选项。

I want to display options like Contact, Add photo, etc on ListView Item click. I also tried to achieve same using PopupMenu but it has limitations of adding up to 6 commands and I have more commands than that. I want to add these options dynamically.

推荐答案

下面是一个基本的实现你想要什么。

Here's a basic implementation of what you want.

使用这个ListView的XAML：

Using this ListView XAML:

<ListView SelectionChanged="ListView_SelectionChanged">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel>

                <Panel.Resources>
                    <Style x:Name="MainAreaStyle" TargetType="Image">
                        <Setter Property="Width" Value="300" />
                        <Setter Property="Margin" Value="0" />
                    </Style>
                    <Style x:Name="DetailAreaStyle" TargetType="Rectangle">
                        <Setter Property="Height" Value="150" />
                        <Setter Property="Height" Value="300" />
                        <Setter Property="Margin" Value="0,0,0,8" />
                        <Setter Property="Visibility" Value="Collapsed" />
                    </Style>
                </Panel.Resources>

                <Image Source="http://i.stack.imgur.com/L5sb9.png" Style="{StaticResource MainAreaStyle}" />
                <Rectangle x:Name="DetailArea" Fill="DarkBlue" Style="{StaticResource DetailAreaStyle}" />

            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
    <x:String>One</x:String>
    <x:String>Two</x:String>
    <x:String>Three</x:String>
</ListView>

使用此代码隐藏：

UIElement previous = null;
private void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (previous != null) previous.Visibility = Visibility.Collapsed;
    if (e.AddedItems.Any())
    {
        var container = (sender as ListView).ContainerFromItem(e.AddedItems.First());
        (previous = Child<Rectangle>(container, "DetailArea")).Visibility = Visibility.Visible;
    }
}

public T Child<T>(DependencyObject parent, string name) where T : FrameworkElement
{
    return Children(parent).OfType<T>().FirstOrDefault(x => x.Name == name);
}

public List<DependencyObject> Children(DependencyObject parent)
{
    var list = new List<DependencyObject>();
    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
    {
        var child = VisualTreeHelper.GetChild(parent, i) as DependencyObject;
        if (child != null)
        {
            list.Add(child);
            list.AddRange(Children(child));
        }
    }
    return list;
}

是这样的：

Looks like this:

有意义吗？还有更多的工作要做，当然。但是，这应该让你开始。

Make sense? There's more to do, of course. But this should get you started.

好运。

这篇关于如何扩大SelectionChanged事件一个ListView项目在Windows 10？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！