项目模板（WinRT、Metro、XAML）中的列表视图视觉状态管理器

Question

我正在尝试获取一个列表视图来显示由文本块组成的项目列表... 当单击列表视图项时，我想显示一个由文本框组成的列表...

下面是我想出的，它不起作用。 我在模板中有两个网格，并希望根据是否选择了列表视图项来简单地显示和隐藏网格。我哪里出错了？

我从列表视图的模板本身中提取了这些视觉状态，但我必须承认我不确定它们是如何工作的，或者它们是如何被触发的。是否应该有一些代码来执行此操作？

    <ListView Grid.Row="2" ItemsSource="{Binding Lines}" HorizontalAlignment="Stretch">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid Name="Readonly">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="3*"/>
                        </Grid.ColumnDefinitions>

                        <TextBlock Text="{Binding One}" Grid.Column="0"/>
                        <TextBlock Text="{Binding Two}" Grid.Column="1"/>
                    </Grid>
                    <Grid Name="Editing" Visibility="Collapsed">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="3*"/>                            
                        </Grid.ColumnDefinitions>

                        <TextBox Text="{Binding One}" Grid.Column="0"/>
                        <TextBox Text="{Binding Two}" Grid.Column="1"/>
                    </Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Editing" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Readonly" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

非常感谢， 可汗

Answer 1

您正在将情节提要动画设置在正在渲染的项目之外。您指定的目标不仅超出了外部页面的范围，而且它们可能还不存在。因此，在呈现页面时无法设置 Storyboard。

这就是你想要做的。

创建一个用户控件，该控件将在您的ListView 项中表示您想要的布局。当你定义你的ListView 时，一定要在你的DataTemplate 中包含你的UserControl，像这样：

<ListView>
        <ListView.ItemTemplate>
            <DataTemplate>
                <local:MyUserControl />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView.ItemsPanel>
</ListView>

现在，为VisualStates。您需要在UserControl 中设置状态。这意味着 Edit 的状态和 View 的状态。一个状态需要像这样本地化。想想Button 控件。按钮中的状态是在每个 Button 中定义的，而不是在某个共享位置。

当您准备好更改其中一项的状态时，您需要将其连接到您的代码后面。在后面的代码中，您需要遍历ListView 中的项目并调用您创建的方法，例如MakeStateEdit() 和MakeStateView()。设置用户控件状态的将是您对这些方法的实现。外部代码只是相信它会发生。

这意味着您需要在代码隐藏中的UserControl 中调用VisualStateManager.GoToState(this, "Edit", true);（或您创建的任何状态）。相反，您可以在调用MakeStateView() 时设置“查看”状态。

要迭代 ListView Items 属性，您需要使用这样的技术 (http://blog.jerrynixon.com/2012/09/how-to-access-named-control-inside-xaml.html)。你会发现一旦你开始走这条路，它真的不是很复杂。您可能会对无法在 XAML 中完成所有这些操作感到失望。你不能。但可以做到！

祝你好运！

Answer 2

我不知道视觉状态更改是否会传播，所以也许您的解决方案应该可以工作，但我会改为在 ListViewItem 模板中编辑视觉状态（通过 ItemContainerStyle）。