How to expand a ListView Item on SelectionChanged event in Windows 10?

问题

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.

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.

I want to achieve something like below:

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.

回答1:

Here's a basic implementation of what you want.

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>

Use this code-behind:

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.

Best of luck.

来源：https://stackoverflow.com/questions/36136764/how-to-expand-a-listview-item-on-selectionchanged-event-in-windows-10

标签

winrt-xaml

win-universal-app

windows-10