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

Answer 1

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.

Answer 2

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

Answer 3

All are running Windows 8.1 but the app is still Windows 8.

---

Thanks, Vinod Shinde

Answer 4

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