项目模板中的列表视图可视化状态管理器(WinRT、Metro、XAML) [英] listview visual state manager in item template (WinRT, Metro, XAML)

问题描述

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

I am trying to get a listview to display a list of items made up of textblocks... when the listview item is clicked i would like to show instead a list made up of textboxes...

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

Below is what i have come up with, it does not work. I have two grids within the templates and was hoping to simply show and hide the grids depending on if the listview item is selected. Where have i gone wrong?

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

I ripped these visual states from the listview's template itself but i must admit im not sure how they work, or how they are meant to be triggered. Should there be some code behind to do this?

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

非常感谢，可汗

推荐答案

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

You are setting the Storyboard Animation up outside the Items that are being rendered. The targets you are specifying are not only out of the scope of the outer page, but they potentially do not exist yet. As a result, the Storyboard cannot be setup when the page is rendered.

这就是你想要做的.

创建一个用户控件，该控件将代表您在 ListView 项中所需的布局.当您定义 ListView 时，请确保将您的 UserControl 包含在您的 DataTemplate 中，如下所示:

Create a user control that will represent the layout you want in your ListView item. When you define your ListView, be sure to include your UserControl in your DataTemplate, like this:

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

现在，对于 VisualStates.您需要在 UserControl 内设置状态.这意味着编辑状态和视图状态.一个状态需要像这样被本地化.想想 Button 控件.按钮中的状态在每个 Button 中定义，而不是某个共享位置.

Now, for the VisualStates. You need to set the states up inside the UserControl. That means a state for Edit and a state for View. A state needs to be localized like this. Think of the Button control. The states in a button are defined in each Button not some shared location.

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

When you are ready to change the state of one of the items, you need to wire it to your code behind. In your code behind, you need to loop through the items in your ListView and call a method you create, something like MakeStateEdit() and MakeStateView(). It will be your implementation of those methods that sets the states of the user control. The outside code just trusts it to happen.

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

This means you need to call VisualStateManager.GoToState(this, "Edit", true); (or whatever state you create) inside your UserControl, in the code-behind. Conversely you might set the "View" state when the MakeStateView() is called.

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

To iterate a ListView Items property, you need to use a technique like this (http://blog.jerrynixon.com/2012/09/how-to-access-named-control-inside-xaml.html). You'll find that once you start down this path, it really isn't very complicated. You might be disappointed that you can't do all of this in XAML. You can't. But it can be done!

祝你好运！

这篇关于项目模板中的列表视图可视化状态管理器(WinRT、Metro、XAML)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！