如何在同一页面上显示多个集合 [英] How to dispaly multiple collections on the same page

问题描述

大家好我只是使用MVVM模型学习WPF，并且遇到了尝试在同一页面上显示多个obserrablecollection的问题。 我正在使用VS2017。  以下是XAML代码：

Hi everyone I am just learning WPF using the MVVM model and have run into a problem trying to display more than one observerablecollection on the same page.  I am using VS2017.   Here is may XAML code:

<Page
    x:Name="pageRoot"
    x:Class="Invaders.View.InvadersPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="using:Invaders.View"
    xmlns:viewmodel="using:Invaders.ViewModel"
    xmlns:common="using:Invaders.Common"
    SizeChanged="pageRoot_SizeChanged"
    ManipulationMode="TranslateX"
    ManipulationCompleted="pageRoot_ManipulationCompleted"
    ManipulationDelta="pageRoot_ManipulationDelta"
    Tapped= "pageRoot_Tapped"
    mc:Ignorable="d">
    <Page.Resources>
        <viewmodel:InvadersViewModel x:Name="viewModel"/>
    </Page.Resources>
    <Grid Background="#FF232222" DataContext="{StaticResource viewModel}">
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="6*"/>
        </Grid.RowDefinitions>

        <StackPanel  HorizontalAlignment="Right" VerticalAlignment="Bottom" Orientation="Horizontal">
            <TextBlock Margin="10,10,5,5" Foreground="#FFCBBFBF">Score:</TextBlock>
            <TextBlock  Margin="5,10,10,5" Text="{Binding Score }" Foreground="#FFCBBFBF"/>
            <GridView  ItemsSource="{Binding Lives}">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <Image Source="ms-appx:///Assets/player.png" Stretch="Fill" Height="15" Width="20" />
                    </DataTemplate>
                </GridView.ItemTemplate>
            </GridView>
        </StackPanel>

        <Border Grid.Row="1" x:Name="playArea" BorderBrush="Blue" BorderThickness="2" CornerRadius="10" Background="Black" Margin="5" Loaded="playArea_Loaded">
            <ItemsControl ItemsSource="{Binding Path=Sprites}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </Border>
    </Grid>
</Page>

以上代码生成错误消息" ArgumentException：Value不在预期范围内。" 
这对我来说并不多。   

现在，如果我删除了GRIDVIEW代码块或ITEMSCONTROL代码块，则错误消失并且程序正确运行（减去已删除的集合）。   此外，如果我将Bindings更改为代码
的任何一个块到一个虚假属性，则错误消息消失并且程序正确运行（减去输入伪造属性名称的集合数据）。 换句话说，只要我没有尝试在同一
时间绑定到两个集合，代码就可以正常工作。  

The above code produces the error message "ArgumentException: Value does not fall within the expected range."  which doesn't tell me much.   

Now, if I remove either the GRIDVIEW block of code or the ITEMSCONTROL block of code, the error goes away and the program runs correctly (minus the removed collection).    Furthermore, if I change the Bindings to either of theses blocks of code to a bogus property the error message goes away and the program runs correctly (minus the collection data where the bogus property name was entered).  In other words, the code works fine as long as I am not trying to bind to two collections at the same time.  

我无法弄清楚如何将两个不同的集合绑定到同一页面上的两个不同控件。 帮助！

I cant figure out how to bind two different collections to two different controls on the same page.  HELP!

推荐答案

好的，让我们从头开始。 

Ok lets start from the beginning. 

1. 以下是ListView XAML的示例：

1.  Here is a sample of a ListView XAML:

                                    <ListView x:Name="PART_theListView" Grid.Column="2" ItemsSource="{Binding fileList}">
                                        <ListView.View>
                                            <GridView ColumnHeaderTemplate="{StaticResource GridViewHeaderStyle}">
                                                <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}"></GridViewColumn>
                                                <GridViewColumn Header="Size" DisplayMemberBinding="{Binding Length}"></GridViewColumn>
                                                <GridViewColumn Header="Last Accessed" DisplayMemberBinding="{Binding LastAccessTime}"></GridViewColumn>
                                                <GridViewColumn Header="Type" DisplayMemberBinding="{Binding Converter={StaticResource gets}}"></GridViewColumn>
                                            </GridView>
                                        </ListView.View>
                                    </ListView>

GridView是ListView中使用的组件，而不是它本身。

A GridView is a component used in a ListView, not by itself.

2。  不要使用ItemsControl，因为它实际上只是具有更好功能的控件使用的基类，例如ListBox。

2.  Don't use ItemsControl as it is really just the base class used by controls that have better capabilities such as a ListBox.

3. 使用画布作为ItemsPanel通常不是一个好主意，因为除非您有定位属性，否则所有项目都将显示在画布的左上角。

3.  Using a canvas as the ItemsPanel is generally not a good idea as unless you have positioning properties all items will show in the top left corner of the canvas.

在页面上显示多个集合你需要的是多个ItemsControls（见上文），每个都在你的viewmodel中有自己的集合属性。

To show mulitple collections on a page all you need are mulitple ItemsControls (see above) each with their own collection property in your viewmodel.

这篇关于如何在同一页面上显示多个集合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！