semantic zoom control throwing exception when groups are empty - windows-8

Question

have a semantic zoom control in an application where I've got three groups (today, tomorrow and later), but the groups don't necessarily always have at least one item. The semantic zoom control works perfect when all three groups are non-empty, but not whenever any of the items are empty. I've tried clearing out my DataTemplate to ensure it's nothing to do with the bindings, and I couldn't find an event to hook on to so that I could potentially step through what was going on when the zoom-out event is triggered.
Has anyone got this working, or have any ideas/suggestions/tips/workarounds?
some code:
XAML - collectionviewsource:
<!-- Collection of grouped items displayed by this page -->
<CollectionViewSource
x:Name="groupedItemsViewSource"
Source="{Binding Groups}"
IsSourceGrouped="True"
ItemsPath="Items"
d:Source="{Binding ItemGroups, Source={d:DesignInstance Type=data:AuctionDataSource, IsDesignTimeCreatable=True}}"/>
XAML - semantic zoom control:
<SemanticZoom Visibility="Collapsed" Grid.Row="1" Name="MainSemanticZoom">
<SemanticZoom.ZoomedInView>
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Margin="116,0,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
SelectionMode="Multiple"
SelectionChanged="itemGridView_SelectionChanged_1">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="250" Height="200" RightTapped="Grid_RightTapped_1" Tag="{Binding}">
<Border Background="{StaticResource ListViewItemPlaceholderRectBrush}">
<Image Source="{Binding Image}" Stretch="UniformToFill"/>
</Border>
<StackPanel Grid.Column="1" VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundBrush}">
<!--bindings: Title , CurrentBid, CloseDate -->
<TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayTextBrush}" Height="20" Style="{StaticResource TitleTextStyle}" Margin="15,0,15,0"/>
<TextBlock Text="{Binding CurrentBid, Converter={StaticResource FormatStringConverter}, ConverterParameter='\{0:C}'}" Foreground="{StaticResource ListViewItemOverlayTextBrush}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,0"/>
<TextBlock Text="{Binding CloseDate, Converter={StaticResource FriendlyTimeConverter}}" Foreground="{StaticResource ListViewItemOverlayTextBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
<Border Visibility="{Binding IsLeading, Converter={StaticResource BooleanToVisibilityConverter}}" Name="leadingBlock" Background="CadetBlue">
<TextBlock Text="leading" Style="{StaticResource BodyTextStyle}" Margin="15,0,15,10"></TextBlock>
</Border>
<Border Visibility="{Binding IsOutbid,Converter={StaticResource BooleanToVisibilityConverter}}" Name="outbidBlock" Background="Orange">
<TextBlock Text="outbid" Style="{StaticResource BodyTextStyle}" Margin="15,0,15,10"></TextBlock>
</Border>
<Border Visibility="{Binding NoBids,Converter={StaticResource BooleanToVisibilityConverter}}" Name="noBidsBlock" Background="Gray">
<TextBlock Text="you have not placed a bid" Style="{StaticResource BodyTextStyle}" Margin="15,0,15,10"></TextBlock>
</Border>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="5,0,30,10">
<!--<Button
AutomationProperties.Name="Group Title"
Content="{Binding Title}"
Click="Header_Click"
Style="{StaticResource TextButtonStyle}"/>-->
<TextBlock Text="{Binding Title}" Style="{StaticResource SubheaderTextStyle}"></TextBlock>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<GridView
x:Name="itemZoomOutGridView"
AutomationProperties.AutomationId="ItemZoomOutGridView"
AutomationProperties.Name="Grouped Items"
SelectionMode="None">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left">
<Border Background="{StaticResource ListViewItemPlaceholderRectBrush}">
<Image Height="750" Source="{Binding Group.Image}" Stretch="UniformToFill"/>
</Border>
<StackPanel Height="140" Width="400" Background="Orange" VerticalAlignment="Center">
<TextBlock Margin="15" Text="{Binding Group.Title}" Foreground="White" Style="{StaticResource HeaderTextStyle}"></TextBlock>
<TextBlock Margin="15" Grid.Row="1" Text="{Binding Group.Items.Count}" Foreground="White" Style="{StaticResource HeaderTextStyle}"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Margin="230,0,0,0" Width="2000" Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>

Answer 1

I "solved" this by handling the ViewChangeStarted and the ViewChangeCompleted events of the SemanticView control. In the ViewChangeStarted event I added a new item, so that group won't be empty, and in the ViewChangedCompleted event I removed it. It's not a fix, just a workaround, but it does the job.

Answer 2

I don't think this is SemanticZoom issue. We reported very similar issue with GridView with grouped source. If any of the groups were empty we got exception. In fact CollectionViewSource is the likely culprit in this.
Our solution was not to use GridView with grouping. You can configure ItemsControl to look just like grouped GridView. The only downside to this is that you can't select items from different groups at the same time, but for us it was not an issue, since we didn't need selection.