使用VisualStateManager隐藏或显示ListViewItem的堆栈面板

Question

我对C＃UWP中的VisualStateManager并不十分熟悉，我需要您的帮助来隐藏或显示我的ListViewItem中的堆栈面板。

<ListView.ItemTemplate>
<DataTemplate>
    <Grid Width="500">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal">
            <Image Height="45" Width="45" Margin="0,8,0,8" Source="../../Assets/ViewBox.png" Stretch="UniformToFill"/>
            <StackPanel Orientation="Vertical" VerticalAlignment="Top" Margin="8,8,0,0">
                <TextBlock Text="Test" Style="{StaticResource BaseTextBlockStyle}" />
                <TextBlock Text="test1" Margin="0,4,8,0" Style="{StaticResource BodyTextBlockStyle}" />
            </StackPanel>
        </StackPanel>

        <StackPanel x:Name="EDITOR_PANEL" Grid.Row="1" Orientation="Horizontal" Visibility="Collapsed">
            <Button Content="Edit" />
            <Button Content="Delete" />
        </StackPanel>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <Storyboard>
                        <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Selected">
                    <VisualState.Setters>
                        <Setter Target="EDITOR_PANEL.Visibility" Value="Visible"></Setter>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</DataTemplate>
</ListView.ItemTemplate>

我想做的是这样的事情：

当我选择列表视图的一个项目时，它会显示带有两个按钮的EDITOR_PANEL，如果我选择另一个项目，则前一个选定的项目会折叠，当前的项目会显示EDITOR_PANEL和等等。

你有什么想法吗？

Answer 1

一种解决方案是创建一个 UserControl ，其中包含您要在ListViewItem中公开的所有控件。

然后，从后面的代码中，您可以更新VisualState事件ListView上的SelectionChanged。

以下是一份工作样本：

UserControl视图：

<UserControl
    x:Class="App4.EditablePanel"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App4"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Grid Width="500">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal">
            <Image Height="45" Width="45" Margin="0,8,0,8" Source="../../Assets/ViewBox.png" Stretch="UniformToFill"/>
            <StackPanel Orientation="Vertical" VerticalAlignment="Top" Margin="8,8,0,0">
                <TextBlock Text="{Binding Title}" Style="{StaticResource BaseTextBlockStyle}" />
                <TextBlock Text="{Binding Headline}" Margin="0,4,8,0" Style="{StaticResource BodyTextBlockStyle}" />
            </StackPanel>
        </StackPanel>

        <StackPanel x:Name="EDITOR_PANEL" Grid.Row="1" Orientation="Horizontal" Visibility="Collapsed">
            <Button Content="Edit" />
            <Button Content="Delete" />
        </StackPanel>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                </VisualState>
                <VisualState x:Name="Selected">
                    <VisualState.Setters>
                        <Setter Target="EDITOR_PANEL.Visibility" Value="Visible"></Setter>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</UserControl>

UserControl代码隐藏：

public sealed partial class EditablePanel : UserControl
{
    public EditablePanel()
    {
        this.InitializeComponent();
    }

    public void SetInEditMode()
    {
        VisualStateManager.GoToState(this, "Selected", true);
    }

    public void SetInViewMode()
    {
        VisualStateManager.GoToState(this, "Normal", true);
    }
}

MainPage视图：

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

    <ListView ItemsSource="{Binding Items}" SelectionChanged="ListView_SelectionChanged">
        <ListView.ItemTemplate>
            <DataTemplate>
                <local:EditablePanel></local:EditablePanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Page>

背后的MainPage代码：

public sealed partial class MainPage : Page
{
    private List<Item> items;

    public MainPage()
    {
        items = new List<Item>()
        {
            new Item() { Title = "3D Build", Headline="MS Corp" },
            new Item() { Title = "7Zip", Headline="Igor Pavlov" },
            new Item() { Title = "Photoshop", Headline = "Adobe"}
        };


        this.InitializeComponent();
    }

    public List<Item> Items { get { return items; } }

    private void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        var lv = sender as ListView;
        if (e.RemovedItems.Count > 0)
        {
            foreach (var item in e.RemovedItems)
            {
                var container = lv.ContainerFromItem(item) as ListViewItem;
                var panel = container.ContentTemplateRoot as EditablePanel;
                panel.SetInViewMode();
            }
        }
        if (e.AddedItems.Count > 0)
        {
            foreach (var item in e.AddedItems)
            {
                var container = lv.ContainerFromItem(item) as ListViewItem;
                var panel = container.ContentTemplateRoot as EditablePanel;
                panel.SetInEditMode();
            }
        }
    }
}

public class Item
{
    public string Title { get; set; }
    public string Headline { get; set; }
}