Semantic Zoom shows no results

Question

After many attempts to run this functionality finally I got absolutely lost. Only the group headers are shown and only in ZoomInView. Where I'm wrong? All my data is loaded from web api services, but I think that the CollectionViewSource is observable and this will not be the source of the problem.

These are my poco classes

public class StopInformation
{
    public string Name { get; set; }

    public string Number { get; set; }
}

public class ScheduleDirection
{
    public string Direction { get; set; }

    public IEnumerable<StopInformation> Stops { get; set; }
}

ViewModel Member

public ObservableCollection<ScheduleDirection> Directions { get; set; }

In my page xaml resources

<CollectionViewSource x:Name="cvs" IsSourceGrouped="true"
                      Source="{Binding Directions}" />

And the semantic zoom code:

<SemanticZoom x:Name="semanticZoom">
    <SemanticZoom.ZoomedOutView>
            <GridView ItemsSource="{Binding Path=View.CollectionGroups, Source={StaticResource cvs}}" ScrollViewer.IsHorizontalScrollChainingEnabled="False">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Direction}"/>
                    </DataTemplate>
                </GridView.ItemTemplate>
                <GridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapGrid />
                    </ItemsPanelTemplate>
                </GridView.ItemsPanel>
            </GridView>
        </SemanticZoom.ZoomedOutView>
        <SemanticZoom.ZoomedInView>
            <GridView ItemsSource="{Binding Source={StaticResource cvs}}" IsSwipeEnabled="True" ScrollViewer.IsHorizontalScrollChainingEnabled="False">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Name}" />
                    </DataTemplate>
                </GridView.ItemTemplate>
                <GridView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate>
                                <TextBlock Text='{Binding Direction}' />
                            </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 Stops}" />
                                            </StackPanel>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </GroupStyle.ContainerStyle>
                    </GroupStyle>
                </GridView.GroupStyle>
                <Button Visibility="Collapsed"/>
            </GridView>
        </SemanticZoom.ZoomedInView>
    </SemanticZoom>

Accept any ideas.

score 0 · Answer 1 · answered Jul 25 '14 at 12:10

I just ran into this problem myself and found the solution after some searching.. It's probably way too late for the OP, but I'll post it anyway for the sake of others who might encounter the same problem.

Use the ItemsPath property on the CollectionViewSource. Read more about it on msdn.

 <CollectionViewSource 
      x:Name="cvs" 
      IsSourceGrouped="true"
      Source="{Binding Directions}" 
      ItemsPath="Stops" />                    <!-- Add this last bit -->

Semantic Zoom shows no results

1 Answers1