how can I start items on a new row in a listbox which is orientated horizontally? this is my code so far, but it shows al the items in 1 row, thanx in advance
<phone:PanoramaItem Header="Geklassifiseerd" Orientation="Horizontal" Foreground="Black">
<ListBox x:Name="geklassifisseerd_list">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Name}" TextWrapping="Wrap"
Margin="10,0"
Foreground="Black"
FontSize="20"
/>
<TextBlock Text="{Binding Date}"
TextWrapping="Wrap"
Foreground="Black"
Margin="10,-2,10,0"
FontSize="20"
/>
<TextBlock Text="{Binding Image_uri}"
TextWrapping="Wrap"
Margin="10,-2,10,0"
Foreground="Black"
/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListBox>
got the answer, I used a wrappanel in the itemspanetemplate, which led to assemblies clashing, which I solved by reinstalling the Microsoft.phhone.controls assembly via nugget
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Controls:WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
Related
I'm trying to make a Listview with 2 columns, exactly like this picture:
http://i62.tinypic.com/10mrd5x.png
(Items most be vertical and exactly like the picture)
I know about WrapGrid and I can use this
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal"
MaximumRowsOrColumns="2"
HorizontalAlignment="Center"
VerticalChildrenAlignment="Stretch"
HorizontalChildrenAlignment="Stretch" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
but this is too bad for what I want! this makes unlimited Columns when items is more than of screen height(when add 100 items to listview)
but I want just only 2 columns with unlimite rows.
My questions is:
Is this possible?
if Yes how can I do it?
sorry for my poor english
I did the same thing in WP 7.8 using the ListBox. /this is the part of my old project. Sorry for large number of useless tags and parameters :)
<ListBox
Height="573"
HorizontalAlignment="Left"
Name="MyWallslistBox"
VerticalAlignment="Top"
DataContext="{Binding}"
ItemsSource="{Binding}"
Tap="wallslistBox_Tap"
Width="480"
Margin="0,-10,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel
Orientation="Horizontal"
Margin="10,10,0,0">
<Image
Source="{Binding Image}"
Height="225"
Width="225"
HorizontalAlignment="Left"
/>
<StackPanel
Orientation="Vertical"
HorizontalAlignment="Stretch"
Margin="-227,-3,-10,0">
<StackPanel
Background="#56000000"
HorizontalAlignment="Left"
VerticalAlignment="Top"
MaxHeight="225"
Margin="2,3,0,0"
Width="225"
Height="225">
<TextBlock
TextWrapping="Wrap"
MaxWidth="235"
HorizontalAlignment="Left"
Text="{Binding Title}"
Foreground="White"
FontSize="24"
Margin="10,4,0,0"
/>
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Width="480" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
So I'm having a issue with GroupHeaderPlacement and Vertical scrolling.
What Im trying to achieve is this:
But for some reason my groups are getting arranged in a horisontal scrolling direction. Anyone know if I'm missing something obvious here or if you simple can't have a vertical scrolling Listview if you have GroupHeaderPlacement Left.
The Code is:<ListView x:Name="ItemsGridView"
Margin="118,-5,0,0"
ItemsSource="{Binding Source={StaticResource AllCurrentGroup}}"
SelectionMode="Single"
Grid.Row="2"
Grid.Column="0"
ShowsScrollingPlaceholders="False"
SelectionChanged="SelectedPresentationItem_SelectionChanged"
IsSwipeEnabled="True">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid GroupHeaderPlacement="Left" Orientation="Vertical" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Grid.Column="1" Height="80" Margin="40,0,0,0" >
<TextBlock Text="{Binding Tid }" Style="{StaticResource BodyTextBlockStyle}" Grid.Column="1" >
<TextBlock.Foreground>
<SolidColorBrush Color="{StaticResource Orange}"/>
</TextBlock.Foreground>
</TextBlock>
<TextBlock Text="{Binding Titel }" Style="{StaticResource SubheaderTextBlockStyle}" Grid.Column="1" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel Grid.Column="0" Grid.RowSpan="{Binding Rows}" Width="160" Height="200">
<StackPanel.Background>
<SolidColorBrush Color="{StaticResource BlueDark}"/>
</StackPanel.Background>
<TextBlock Text="{Binding Vecka, Converter={StaticResource ToWeekString }}" Style="{StaticResource BodyTextBlockStyle}" Foreground="#FFFFFFFF" HorizontalAlignment="Left" VerticalAlignment="Top" FontFamily="Global User Interface" Margin="20,13,0,0"/>
<TextBlock Text="{Binding Datum, Converter={StaticResource ToDayNumber }}" Style="{StaticResource HeaderTextBlockStyle}" Foreground="#FFFFFFFF" HorizontalAlignment="Left" Margin="20,26,0,0"/>
<TextBlock Text="{Binding Datum, Converter={StaticResource ToMonth }}" Style="{StaticResource SubheaderTextBlockStyle}" Foreground="#FFFFFFFF" HorizontalAlignment="Left" VerticalAlignment="Top" FontFamily="Global User Interface" Margin="20,-3,0,0"/>
<TextBlock Text="{Binding Datum, Converter={StaticResource ToDayString }}" Style="{StaticResource BodyTextBlockStyle}" Foreground="#FFFFFFFF" HorizontalAlignment="Left" VerticalAlignment="Top" FontFamily="Global User Interface" Margin="20,13,0,0"/>
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical"></WrapGrid>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
http://code.msdn.microsoft.com/windowsapps/GroupedGridView-77c59e8e/sourcecode?fileId=44751&pathId=298223712
Please refer the above sample link which helps you to achieve your req.
As you can see in below code which I got from Microsoft Sample
<SemanticZoom.ZoomedOutView>
<tiles:VariableTileControl x:Name="SemanticItemGridView"
AutomationProperties.AutomationId="itemGridView"
AutomationProperties.Name="Grouped Items"
Padding="80,87,10,0"
ItemsSource="{Binding Source={StaticResource SemanticgroupedItemsViewSource}}"
ItemTemplateSelector="{StaticResource SemanticMyTemplates}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick"
Margin="0,0,0,-13"
HorizontalAlignment="Left"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemContainerStyle="{StaticResource SemanticGridViewItemStyle}">
<tiles:VariableTileControl.ItemsPanel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Margin="0,0,10,0"/>
</ItemsPanelTemplate>
</tiles:VariableTileControl.ItemsPanel>
<tiles:VariableTileControl.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel Margin="1,0,0,6" Orientation="Horizontal" MinWidth="280">
<Button AutomationProperties.Name="Group Title"
Content="{Binding Title}"
Click="Header_Click"
Style="{StaticResource TextButtonStyle}" Foreground="White" FontSize="28" Background="#FFD71921" FontWeight="Light"/>
<TextBlock x:Name="tbk" Text="TM" VerticalAlignment="Top" Visibility="{Binding Tm}"/>
<TextBlock TextWrapping="Wrap" VerticalAlignment="Center" FontFamily="Segoe UI" FontSize="28" FontWeight="Light" Text="("/>
<TextBlock x:Name="txtNo" TextWrapping="Wrap" Text="{Binding No}" VerticalAlignment="Center" FontFamily="Segoe UI" FontSize="28" FontWeight="Light"/>
<TextBlock TextWrapping="Wrap" VerticalAlignment="Center" FontFamily="Segoe UI" FontSize="28" FontWeight="Light" Text=")"/>
<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="10,0,0,10" Style="{StaticResource GroupHeaderTextStyle}" Foreground="#FF9F9F9F"/>
<TextBlock x:Name="txtVideo" HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Sub}" VerticalAlignment="Bottom" Foreground="#FFC4261D" Margin="0,21,0,0" FontFamily="Segoe UI" FontSize="16" Visibility="{Binding SubTl}"/>
<TextBlock x:Name="txtPicture" HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Sub2}" VerticalAlignment="Bottom" Foreground="#FFC4261D" Margin="0,21,0,0" FontFamily="Segoe UI" FontSize="16" Visibility="{Binding SubT2}"/>
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid ItemHeight="5" ItemWidth="5" Orientation="Vertical" Margin="0,0,10,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</tiles:VariableTileControl.GroupStyle>
</tiles:VariableTileControl>
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<GridView x:Name="itemGridView"
AutomationProperties.AutomationId="itemGridView"
AutomationProperties.Name="Grouped Items"
Padding="116,110,40,10"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
ItemTemplateSelector="{StaticResource LivTemplates}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" Margin="0,0,80,0"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle ContainerStyle="{StaticResource HubPageMoreGroupItemStyle}">
<GroupStyle.HeaderTemplate>
<DataTemplate>
<StackPanel Margin="1,0,0,6" Orientation="Horizontal">
<Button AutomationProperties.Name="Group Title"
Content="{Binding name}"
Click="Header_Click"
Style="{StaticResource TextButtonStyle}"
Foreground="White" FontSize="32"
Background="#FFD71921" FontWeight="Light"/>
<TextBlock x:Name="tbk" Text="TM" VerticalAlignment="Top" Visibility="{Binding Tm}"/>
<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="10,0,0,10" Style="{StaticResource GroupHeaderTextStyle}" Foreground="#FF9F9F9F"/>
<TextBlock x:Name="txtVideo" HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Sub}" VerticalAlignment="Bottom" Foreground="#FFC4261D" Margin="0,21,0,0" FontFamily="Segoe UI" FontSize="16" Visibility="{Binding SubTl}"/>
<TextBlock x:Name="txtPicture" HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Sub2}" VerticalAlignment="Bottom" Foreground="#FFC4261D" Margin="0,21,0,0" FontFamily="Segoe UI" FontSize="16" Visibility="{Binding SubT2}"/>
</StackPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid ItemHeight="5" ItemWidth="5" Orientation="Vertical" Margin="0,0,133,0"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</SemanticZoom.ZoomedInView>
In above code I am interested only in one in line which is shown below
AutomationProperties.AutomationId="itemGridView"
AutomationProperties.Name="Grouped Items"
I want to know what is the role of above mentioned lines in xaml.
From the Microsoft Overview of UI Automation
... It enables assistive technology products, such as screen readers, to provide information about the UI to end users and to manipulate the UI by means other than standard input...
http://msdn.microsoft.com/en-us/library/windows/desktop/ee684009.aspx
EDIT:
For example, in Visual Studio, if you create a new Windows Store Grid App, check out the GroupedItemsPage.xaml. You'll see a few places where AutomationProperties.Name has been set.
Now open the Windows 8 Charms Bar and search for "Narrator," and run the Narrator app that comes up in the results. You'll hear a man start reading things on the screen.
If you go back to Visual Studio and run the new Grid App you created, the Narrator will read various things in the Grid App, some of which will be the AutomationProperties.Names defined in xaml.
Try changing the AutomationProperties.Name to get a feel for how it works.
I did some research on this aswell, I wanted to use it to set a visibility inside a Style-ControlTemplate.
However, this page explains how you can use the AutomationProperties:
http://msdn.microsoft.com/en-us/library/ff400332%28v=vs.95%29.aspx
For example, consider this xaml::
<Button AutomationProperties.Name="Back"
Content="{Binding Title}"
Style="{StaticResource TextButtonStyle}" />
Look at the style it uses: {StaticResource TextButtonStyle}, this corresponds to a Style in one of your ResourceDictionaries.
<Style x:Key="TextButtonStyle" TargetType="ButtonBase">
Inside this style the AutomationProperties can be used:
<TextBlock x:Name="TextLabel" Text="{TemplateBinding AutomationProperties.Name}" />
So Basicly you can use the AutomationProperties to fill a template with specific properties.
I want to align the contents or items of ExpanderView in horizontal layout instead of vertical layout. The ExpanderHeader is set dynamically and also its contents are added dynamically.
The xaml part and CustomeItemTemplate in app.xaml is as below
<toolkit:ExpanderView
Width="470"
Header="{Binding TaskName, Mode=TwoWay}"
x:Name="taskNameExpander"
Margin="5,10,5,10"
Foreground="#FF677389" FontSize="24" VerticalAlignment="Top"
HorizontalAlignment="Left"
ItemsSource="{Binding dateTime}"
ItemTemplate="{StaticResource CustomItemTemplate}"
HorizontalContentAlignment="Left">
</toolkit:ExpanderView>
<DataTemplate x:Key="CustomItemTemplate">
<StackPanel Orientation="Horizontal" Height="60" >
<TextBlock FontSize="16" Text="{Binding Date, Mode=OneWay}"
TextWrapping="Wrap" Foreground="#FF677389" Margin="0,6,0,0" Height="30" Width="100"/>
<TextBox BorderBrush="Goldenrod" BorderThickness="1" FontSize="16" Text="{Binding Time, Mode=TwoWay}" TextWrapping="Wrap" Foreground="#FF677389" Margin="0" Height="60" Width="150"/>
</StackPanel>
</DataTemplate>
Still i get the contents aligned vertically. Can someone point me what am i doing wrong here?
here is the sample code you have asked for
<Border BorderBrush="White" BorderThickness="1" Margin="5">
<ScrollViewer Width="Auto" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled">
<toolkit:ExpanderView
Width="1600"
Header="{Binding TaskName, Mode=TwoWay}"
x:Name="taskNameExpander" Margin="5,10,5,10" Foreground="#FF677389" FontSize="24" VerticalAlignment="Top" HorizontalAlignment="Left"
ItemsSource="{Binding dateTime}"
ItemTemplate="{StaticResource CustomItemTemplate}"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
HorizontalContentAlignment="Left">
<toolkit:ExpanderView.ItemsPanel>
<ItemsPanelTemplate >
<StackPanel Orientation="Horizontal" Width="Auto" ScrollViewer.HorizontalScrollBarVisibility="Visible"/>
</ItemsPanelTemplate>
</toolkit:ExpanderView.ItemsPanel>
</toolkit:ExpanderView>
</ScrollViewer>
</Border>
and my app.xaml has CustomItemTemplate definition as below
<DataTemplate x:Key="CustomItemTemplate">
<StackPanel Orientation="Vertical" Height="100" >
<TextBlock FontSize="16" Text="{Binding Date, Mode=OneWay}" TextWrapping="Wrap" Foreground="#FF677389" Margin="0,6,0,0" Height="30" Width="100"/>
<TextBox BorderBrush="Goldenrod" BorderThickness="1" FontSize="16" Text="{Binding Time, Mode=TwoWay}" TextWrapping="Wrap" Foreground="#FF677389" Margin="0" Height="60" Width="150">
<TextBox.InputScope>
<InputScope >
<InputScopeName NameValue="Number"></InputScopeName>
</InputScope>
</TextBox.InputScope>
</TextBox>
</StackPanel>
</DataTemplate>
I want to horizontally scroll only ExpanderView items. Rightnow it is scrolling but the whole ExpanderView is scrolling including its header. The header must be intact and only the items must scroll. How can i acheive it?
You should set the ItemsPanel for the ExpanderView control.
<toolkit:ExpanderView
Width="470" Height="100"
x:Name="taskNameExpander"
Margin="5,10,5,10"
FontSize="24" Background="White"
HorizontalAlignment="Left"
ItemsSource="1 2 3 4"
ItemTemplate="{StaticResource CustomItemTemplate}"
HorizontalContentAlignment="Left">
<toolkit:ExpanderView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</toolkit:ExpanderView.ItemsPanel>
</toolkit:ExpanderView>
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>
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.
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.