列表视图中的项模板可视状态管理器 (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>

许多感谢， Kohan

- 4imble

Answer 1

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

以下是您需要做的事情。

创建一个用户控件，用于表示您在ListView项中想要的布局。在定义ListView时，请确保在DataTemplate中包含UserControl，如下所示：

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

现在，关于VisualStates。你需要在UserControl中设置状态。这意味着需要一个编辑状态和一个查看状态。状态需要像这样本地化。想一下Button控件。按钮的状态是在每个按钮中定义的，而不是在某个共享位置中定义。

当你准备改变其中一个项目的状态时，你需要将其与代码后台连接起来。在代码后台中，你需要遍历ListView中的项目，并调用你创建的一个方法，比如MakeStateEdit()和MakeStateView()。它将是你实现这些方法的内容来设置用户控件的状态。外部代码只需信任它就可以了。

这意味着你需要在UserControl的代码后台中调用VisualStateManager.GoToState(this, "Edit", true);（或者你创建的任何状态）。相反，当调用MakeStateView()时，你可能会设置"View"状态。

要迭代ListView的Items属性，你需要使用像这样的技术（http://blog.jerrynixon.com/2012/09/how-to-access-named-control-inside-xaml.html）。你会发现，一旦开始这条路，它并不是非常复杂。你可能会失望地发现，你不能在XAML中完成所有这些操作。但它是可以完成的！

祝你好运！

- Jerry Nixon

Answer 2

我不确定视觉状态的更改是否会传播，所以也许你的解决方案应该能够在某种程度上起作用，但我建议你通过编辑 ListViewItem 模板中的可视状态（通过 ItemContainerStyle）来实现。

- Filip Skakun

---

我通过在Blend中提取ListViewItem模板并使用其中的状态来使其工作，但这似乎有点过度。我目前正在研究使用ItemTemplateSelector，希望能够动态选择模板。 - 4imble

不好意思，选择器不允许您进行动态选择。 - Jerry Nixon

你能解释一下如何让它工作吗？我正在编辑ItemContainerStyle，那里可以找到VisualStates，然后我引用我的模板的Grid，在你的例子中是“Editing”，但是我收到了一个错误，说它没有被找到：\ - Vando