c# - 使用 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>

我想做的是这样的:

当我选择我的 ListView 中的一个项目时，它会显示带有两个按钮的 EDITOR_PANEL，如果我选择另一个，它会折叠前一个选择的项目，而当前的显示 EDITOR_PANEL 等等。

你有什么想法吗？

Answer 1

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

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

这是一个工作示例:

UserControl View :

<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 View :

<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; }
}