XAML 分组 GridView/Semantic Zoom 不显示所有子项? [英] XAML grouped GridView/Semantic Zoom not displaying all children?

问题描述

我正在尝试使用 XAML C# Grouped GridView 示例让我的 SemanticZoom 在 XAML C# Windows 8 应用程序中工作.问题是，由于某种原因，它显示了正确的标题(在这种情况下是类别)，但它没有显示标题下的所有项目(当我在其中一些项目中最多有 6 个项目时，它只显示每个项目)).

I'm attempting to use the XAML C# Grouped GridView sample to make my SemanticZoom work in a XAML C# Windows 8 app. The problem is, for some reason it's displaying the correct header (the category, in this case), but it's not showing all the items under the header (it's only showing one for each, when I have up to 6 items in some of them).

这是 SemanticZoom 的 XAML 代码(请注意，为了简洁起见，我省略了 ZoomedOutView，因为它运行良好):

Here's the SemanticZoom's XAML code (note that I left out the ZoomedOutView for brevity, and since it's working perfectly):

<SemanticZoom x:Name="boardZoom" Height="626" Margin="10,132,10,0" VerticalAlignment="Top">
    <SemanticZoom.ZoomedInView>
        <GridView IsSwipeEnabled="True" x:Name="ItemsGridView" Tapped="Tapped" ItemsSource="{Binding Source={StaticResource cvs2}}" SelectionChanged="selChanged">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Margin="10,10,0,0" 
                    HorizontalAlignment="Left" VerticalAlignment="Stretch">
                        <Image Source="{Binding Thumbnail}"></Image>                                
                       <TextBlock Text="{Binding Title}" TextWrapping="Wrap" Width="500"
                            FontFamily="Global User Interface" FontSize="40" VerticalAlignment="Top" />                                
                        <TextBlock Text="{Binding pinNumber}" x:Name="PinNum" Visibility="Collapsed"></TextBlock>
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>         
            <GridView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                           <TextBlock Text='{Binding Key}' Foreground="White" Margin="5" FontSize="20" FontFamily="Segoe UI Light" />
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                    <GroupStyle.ContainerStyle>
                        <Style TargetType="GroupItem">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="GroupItem">
                                        <StackPanel Orientation="Vertical">
                                            <ContentPresenter Content="{TemplateBinding Content}" />
                                            <ItemsControl x:Name="ItemsControl" ItemsSource="{Binding GroupItems}" />
                                        </StackPanel>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </GroupStyle.ContainerStyle>
                    <GroupStyle.Panel>
                        <ItemsPanelTemplate>
                            <VariableSizedWrapGrid Orientation="Vertical" MaximumRowsOrColumns="5" />
                        </ItemsPanelTemplate>
                    </GroupStyle.Panel>
                </GroupStyle>
            </GridView.GroupStyle>
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid Orientation="Vertical" MaximumRowsOrColumns="1" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
        </GridView>
    </SemanticZoom.ZoomedInView>

以及应用启动时调用的 Refresh() C# 函数:

and the Refresh() C# function that's called when the app is started up:

System.Collections.ObjectModel.ObservableCollection<SemanticZoomed> finalSource = new System.Collections.ObjectModel.ObservableCollection<SemanticZoomed>();
public async Task<bool> Refresh()
{
    var Pins = await pinTable.ReadAsync(); //pinTable is an Azure Mobile Services table
    List<string> categoriesMixed = new List<string>();
    if (Pins.ToArray().Length < 1)
    {
        //adds a new "Welcome" pin to the table, taken out for brevity
    }
    foreach (pin nowPin in Pins)
    {
        SemanticZoomed toAdd = new SemanticZoomed();
        toAdd.Category = nowPin.category;
        toAdd.pinNumber = nowPin.Id.ToString();
        toAdd.Title = nowPin.name;
        categoriesMixed.Add(nowPin.category);
        finalSource.Add(toAdd);
    }

    List<GroupPinList<object>> groups = new List<GroupPinList<object>>();

    var query = from nowPin in finalSource
        orderby ((SemanticZoomed)nowPin).Category
                group nowPin by ((SemanticZoomed)nowPin).Category into g
                select new { GroupName = g.Key, Items = g };
    foreach (var g in query)
    {
        GroupPinList<object> info = new GroupPinList<object>();
        info.Key = g.GroupName;
        foreach (var item in g.Items)
        {
           info.Add(item);
        }
        groups.Add(info);
    }
    cvs2.Source = groups;
    (boardZoom.ZoomedOutView as ListViewBase).ItemsSource = cvs2.View.CollectionGroups;
    return true;
}

这里有几张截图，展示了组变量的样子，以及由此产生的 SemanticZoom 显示的内容:

And here are a few screenshots of what the groups variable looks like, and what the resulting SemanticZoom shows:

组变量:

组变量中的欢迎"类别(它正确显示了它的 6 个项目，以及 imgSrc 旁边的错误无法获取字段 'imgSrc' 的值，因为有关包含类的信息不可用"，该错误在下面的cvs2):

the "Welcome" category in the groups variable (it correctly shows its 6 items, and also the error "Cannot fetch the value of field 'imgSrc' because information about the containing class is unavailable" next to imgSrc, which disappears in cvs2 below):

cvs2(它显示了欢迎类别下的 6 个不同项目):

cvs2 (it shows the 6 different items under the Welcome category):

最后，它最终显示的是什么:

and finally, what it ends up displaying:

我不知道欢迎类别中的其他图钉去了哪里.XAML 代码中是否有我遗漏的内容?任何帮助将不胜感激:)

I'm at a loss as to where those other pins in the Welcome category went. Is there something in the XAML code that I'm missing? Any help would be much appreciated :)

推荐答案

我想我知道问题出在哪里 - 如果您以编程方式将项目逐组添加到 GridView，就会发生这种情况.这里发生的情况是，当您将第一个包含 n 个项目的组添加到 GridView 源时，然后保留编号 n 并且对于之后添加的每个组，它显示的项目不超过 n 个，即使有更多项目.

I think I know where's the problem - this happens if you are adding items to the GridView programatically group after group. What happens here is when you add the first group with n items to the GridView source, then number n is kept and for each group added afterwards it shows no more than n items, even though there is more items.

因此，如果您在集合中有 5 个组，其中包含 2、4、1、5、3 个项目，则将空的 ObservableCollection 分配为 GridView 的 ItemSource，然后将 foreach 这些组添加到 ObservableCollection 中，您将只看到 2每组中的 ,2,1,2,2 项.

So if you have 5 groups in collection with 2,4,1,5,3 items, you assign empty ObservableCollection as the ItemSource of the GridView and then you add in foreach these groups into the ObservableCollection, you will see only 2,2,1,2,2 items in each group.

我不知道为什么会发生这种情况，如果它是功能或错误，但是您可以通过首先加载 ObservableCollection 然后将其分配给 GridView 作为源来解决它，或者您可以使用某种转换器，这将为每组返回相同数量的项目.对于数量较少的组，您可以添加虚假的空项目并使用不同的 DataTemplate 隐藏它们.

I don't know why this is happening, if it's feature or a bug, but you can solve it either by loading the ObservableCollection first and then assigning it to the GridView as a source, or you can use some kind of converter, that will return for each group same number of items. For groups with lesser number you then add fake empty items and hide them using different DataTemplate.

我刚刚注意到您已经立即添加了集合，因此问题可能出在其他地方.也许您的问题的根源是在 ItemsPanel 中?

I've just noticed you are already adding the collection at once, so the problem is probably elsewhere. Maybe the root you your issue is this in ItemsPanel?

MaximumRowsOrColumns="1"

这篇关于XAML 分组 GridView/Semantic Zoom 不显示所有子项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！