locked
GridView Items getting cropped RRS feed

  • 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

    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 PM
    Moderator
  • 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

    Saturday, January 4, 2014 6:29 PM