Answered by:
GridView Items getting cropped

Question
-
Hi,
I have a GridView in my xaml Windows Store app.
When I scroll horizontally one of the columns gets cropped as shown in attached figure.
This happens only when I scroll fast. Scrolling slowing works great.
Here is the xaml for GridView.
Am I missing any setting or anything or is there any technique?
<GridView x:Name="itemGridView" AutomationProperties.AutomationId="ItemGridView" AutomationProperties.Name="Grouped Items" Grid.Row="1" Margin="0" Padding="116,30,40,46" ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" ItemTemplateSelector="{StaticResource GroupedDataTemplateSelector}" SelectionMode="Multiple" IsItemClickEnabled="True"> <GridView.ItemsPanel> <ItemsPanelTemplate> <VirtualizingStackPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </GridView.ItemsPanel> <GridView.GroupStyle> <GroupStyle HidesIfEmpty="True"> <GroupStyle.HeaderTemplate> <DataTemplate> <StackPanel Orientation="Horizontal" Margin="1,0,0,6"> <Image Source="{Binding Converter={StaticResource GroupHeaderImageSourceConverter}}" Margin="9,0,9,0"/> <Button AutomationProperties.Name="Group Title" Content="{Binding Title}" Click="Header_Click" Style="{StaticResource GroupHeaderTextButtonStyle}" /> <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="3,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}" Foreground="{StaticResource ListHeaderBackground}"/> </StackPanel> </DataTemplate> </GroupStyle.HeaderTemplate> <GroupStyle.Panel> <ItemsPanelTemplate> <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,50,0"/> </ItemsPanelTemplate> </GroupStyle.Panel> </GroupStyle> </GridView.GroupStyle> </GridView>
Thanks, Vinod Shinde
- Edited by VinodShinde Thursday, December 12, 2013 12:04 AM
Thursday, December 12, 2013 12:00 AM
Answers
-
I was able to resolve this overlapping issue by disabling the Horizontal Scroll bar of GridView and putting GridView inside ScrollViewer as shown below.
<ScrollViewer Grid.Row="1" x:Name="itemGridViewScroll" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" Background="Transparent" Style="{StaticResource HorizontalScrollViewerStyle}"> <GridView x:Name="itemGridView" AutomationProperties.AutomationId="ItemGridView" AutomationProperties.Name="Grouped Items" Grid.Row="1" Margin="0,0,30,0" Padding="58,30,40,46" ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" ItemTemplateSelector="{StaticResource GroupedDataTemplateSelector}" SelectionMode="Multiple" IsItemClickEnabled="True" DoubleTapped="itemGridView_DoubleTapped" ItemClick="ItemView_ItemClick" SelectionChanged="itemGridView_SelectionChanged" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.HorizontalScrollMode="Disabled"> <GridView.ItemsPanel> <ItemsPanelTemplate> <VirtualizingStackPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </GridView.ItemsPanel> <GridView.GroupStyle> <GroupStyle HidesIfEmpty="True"> <GroupStyle.HeaderTemplate> <DataTemplate> <StackPanel Orientation="Horizontal" Margin="1,0,0,6"> <Image Source="{Binding Converter={StaticResource GroupHeaderImageSourceConverter}}" Margin="9,0,9,0"/> <Button AutomationProperties.Name="Group Title" Content="{Binding Title}" Click="Header_Click" Style="{StaticResource GroupHeaderTextButtonStyle}" /> <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="3,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}" Foreground="{StaticResource HeaderBackgroundColorBrush}"/> </StackPanel> </DataTemplate> </GroupStyle.HeaderTemplate> <GroupStyle.Panel> <ItemsPanelTemplate> <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,50,0"/> </ItemsPanelTemplate> </GroupStyle.Panel> </GroupStyle> </GridView.GroupStyle> </GridView> </ScrollViewer>
Thanks, Vinod Shinde
- Marked as answer by Matt SmallMicrosoft employee, Moderator Monday, January 6, 2014 1:14 PM
Saturday, January 4, 2014 6:29 PM
All replies
-
Can you reproduce on multiple machines or just yours? I'm wondering if this is a graphics card issue.
Matt Small - Microsoft Escalation Engineer - Forum Moderator
If my reply answers your question, please mark this post as answered.
NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.Thursday, December 12, 2013 1:43 PMModerator -
Hi Matt,
I am able to reproduce it on my Samsung Slate 7, Dell Latitude 6500 and on my wife's Lenovo Thinkpad.
Thanks, Vinod Shinde
Thursday, December 12, 2013 2:02 PM -
All are running Windows 8.1 but the app is still Windows 8.
Thanks, Vinod Shinde
Thursday, December 12, 2013 2:03 PM -
I was able to resolve this overlapping issue by disabling the Horizontal Scroll bar of GridView and putting GridView inside ScrollViewer as shown below.
<ScrollViewer Grid.Row="1" x:Name="itemGridViewScroll" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" Background="Transparent" Style="{StaticResource HorizontalScrollViewerStyle}"> <GridView x:Name="itemGridView" AutomationProperties.AutomationId="ItemGridView" AutomationProperties.Name="Grouped Items" Grid.Row="1" Margin="0,0,30,0" Padding="58,30,40,46" ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" ItemTemplateSelector="{StaticResource GroupedDataTemplateSelector}" SelectionMode="Multiple" IsItemClickEnabled="True" DoubleTapped="itemGridView_DoubleTapped" ItemClick="ItemView_ItemClick" SelectionChanged="itemGridView_SelectionChanged" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.HorizontalScrollMode="Disabled"> <GridView.ItemsPanel> <ItemsPanelTemplate> <VirtualizingStackPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </GridView.ItemsPanel> <GridView.GroupStyle> <GroupStyle HidesIfEmpty="True"> <GroupStyle.HeaderTemplate> <DataTemplate> <StackPanel Orientation="Horizontal" Margin="1,0,0,6"> <Image Source="{Binding Converter={StaticResource GroupHeaderImageSourceConverter}}" Margin="9,0,9,0"/> <Button AutomationProperties.Name="Group Title" Content="{Binding Title}" Click="Header_Click" Style="{StaticResource GroupHeaderTextButtonStyle}" /> <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="3,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}" Foreground="{StaticResource HeaderBackgroundColorBrush}"/> </StackPanel> </DataTemplate> </GroupStyle.HeaderTemplate> <GroupStyle.Panel> <ItemsPanelTemplate> <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,50,0"/> </ItemsPanelTemplate> </GroupStyle.Panel> </GroupStyle> </GridView.GroupStyle> </GridView> </ScrollViewer>
Thanks, Vinod Shinde
- Marked as answer by Matt SmallMicrosoft employee, Moderator Monday, January 6, 2014 1:14 PM
Saturday, January 4, 2014 6:29 PM