GridView displays first element different than all others - XAML, Win8.1, WinRT

问题

I'm using GridView in my Universal Apps project for display list of items. Each item is a User Control. First element always is rendered different than all others elements at the list! How to fix it?

<GridView Grid.Row="1" 
              x:Name="CategoriesGridView"
              Margin="120,20,0,20"
              SelectionMode="None"
              IsItemClickEnabled="False"
              ScrollViewer.HorizontalScrollBarVisibility="Hidden"
              ItemsSource="{Binding CategoriesCollection}" 
              ItemContainerStyle="{StaticResource GridViewItemStyle}">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid Visibility="{Binding CategoryType, Converter={StaticResource CategoryTypeToVisibility}, ConverterParameter={StaticResource CategoryType.Buy}}">
                        <categoryButton:CategoryBuyControl Margin="0,2"
                                                           Height="112"
                                                           VerticalAlignment="Top"
                                                           Category="{Binding }"
                                                           view:EventHandlers.Attach="BuyClickEvent => OnBuyClick($sender, $eventArgs);"/>
                    </Grid>
                    <Grid Visibility="{Binding CategoryType, Converter={StaticResource CategoryTypeToVisibility}, ConverterParameter={StaticResource CategoryType.Play}}">
                        <categoryButton:CategoryPlayButtonControl Height="160"
                                                                  x:Name="CategoryPlayButton"
                                                                  Category="{Binding }"
                                                                  Margin="0,2"
                                                                  ContentMargin="6"
                                                                  view:EventHandlers.Attach="PlayClickEvent => OnPlayClick($sender, $eventArgs);
                                                                  CategoryInfoClickEvent => OnCategoryInfoClick($sender, $eventArgs);"/>
                    </Grid>
                    <Grid Visibility="{Binding CategoryType, Converter={StaticResource CategoryTypeToVisibility}, ConverterParameter={StaticResource CategoryType.SoonAvailable}}">
                        <categoryButton:SoonAvailableCategoryControl Height="112"
                                                                     Category="{Binding}"
                                                                     Margin="0,2" />
                    </Grid>
                </Grid>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>

user control:

<Grid x:Name="PlayGrid">
    <Grid.Background>
        <ImageBrush ImageSource="{Binding ButtonBackground, ElementName=control}"/>
    </Grid.Background>
    <Grid Margin="6">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width=".75*" />
            <ColumnDefinition Width=".25*" />
        </Grid.ColumnDefinitions>
        <ContentControl Grid.Column="0" 
                        Content="{Binding Category, ElementName=control}">
            <ContentControl.ContentTemplate>
                <DataTemplate>
                    <btn:ImageButtonControl Type="CategoryPlay"
                                            Click="OnInfoClick">
                        <Grid Margin="{Binding ContentMargin, ElementName=control}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height=".396*" />
                                <RowDefinition Height=".107*" />
                                <RowDefinition Height=".497*" />
                            </Grid.RowDefinitions>
                            <Viewbox Margin="20,12,20,0" 
                                     HorizontalAlignment="Left"
                                     VerticalAlignment="Center">
                                <customTextBlock:TextBlockWithShadowControl Foreground="White"
                                                                            ShadowColor="Black"
                                                                            ContentText="{Binding Name}" />
                            </Viewbox>

                            <equalizerControl:EqualizerControl Grid.Row="1"
                                                               Level="{Binding LevelStats.CurrentLevel}" IsActive="True"
                                                               Margin="18,0,80,0"
                                                               HorizontalAlignment="Left"
                                                               VerticalAlignment="Top" />


                            <rewardsControl:RewardsControl Grid.Row="2"
                                                           Margin="12,4,12,8"
                                                           Level="{Binding LevelStats.CurrentLevel}"
                                                           VerticalAlignment="Top"/>

                        </Grid>
                    </btn:ImageButtonControl>

                </DataTemplate>
            </ContentControl.ContentTemplate>
        </ContentControl>
        <Viewbox Grid.Column="0"
                 Width="70"
                 Visibility="{Binding Category.IsUpdated, ElementName=control, Converter={StaticResource BoolToVisibilityConverter}}"
                 VerticalAlignment="Top"
                 HorizontalAlignment="Right"
                 Margin="0,-3,-2,0">
            <Grid Width="150"
                  Height="112">
                <Image Source="{Binding RibbonImage, ElementName=control}" />
                <customTextBlock:TextBlockWithShadowControl x:Uid="RibbonTextControl"
                                                            ShadowColor="Black"
                                                            Foreground="White"
                                                            FontSize="26"
                                                            FontWeight="Bold"
                                                            RenderTransformOrigin="0.5,0.5"
                                                            Margin="15,32,0,0"
                                                            HorizontalContentAlignment="Center">
                    <customTextBlock:TextBlockWithShadowControl.RenderTransform>
                        <CompositeTransform Rotation="37" />
                    </customTextBlock:TextBlockWithShadowControl.RenderTransform>
                </customTextBlock:TextBlockWithShadowControl>
            </Grid>
        </Viewbox>
        <Grid Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition Height=".64*" />
                <RowDefinition Height=".36*" />
            </Grid.RowDefinitions>
            <btn:ImageButtonControl Margin="4,0,0,0" 
                                    Type="Play"
                                    Click="OnPlayClick"/>
            <Grid Grid.Row="1"
                  Margin="6,3,2,4">
                <Grid.Background>
                    <ImageBrush ImageSource="{Binding TopScoreBackgroundImage,ElementName=control}" />
                </Grid.Background>
                <Viewbox Margin="0,8">
                    <customTextBlock:TextBlockWithShadowControl ContentText="{Binding Category.CategoryStatus.TotalScore, ElementName=control, Converter={StaticResource StringFormatConverter}, ConverterParameter='\{\0\} pts'}"
                                                                Foreground="White"
                                                                ShadowColor="Black"
                                                                HorizontalAlignment="Center"
                                                                VerticalAlignment="Center" />
                </Viewbox>
            </Grid>
        </Grid>
    </Grid>
</Grid>

item container style:

<Style x:Key="GridViewItemStyle" TargetType="GridViewItem">
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="TabNavigation" Value="Local"/>
    <Setter Property="IsHoldingEnabled" Value="True"/>
    <Setter Property="Margin" Value="0,0,2,2"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GridViewItem">
                <GridViewItemPresenter CheckHintBrush="{ThemeResource ListViewItemCheckHintThemeBrush}" 
                                       CheckBrush="{ThemeResource ListViewItemCheckThemeBrush}" 
                                       ContentMargin="4" 
                                       ContentTransitions="{TemplateBinding ContentTransitions}" 
                                       CheckSelectingBrush="{ThemeResource ListViewItemCheckSelectingThemeBrush}" 
                                       DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" 
                                       DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" 
                                       DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" 
                                       DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" 
                                       FocusBorderBrush="{ThemeResource ListViewItemFocusBorderThemeBrush}" 
                                       HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                       Padding="{TemplateBinding Padding}" 
                                       PointerOverBackgroundMargin="1" 
                                       PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" 
                                       PointerOverBackground="Transparent" 
                                       ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" 
                                       SelectedPointerOverBorderBrush="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}" 
                                       SelectionCheckMarkVisualEnabled="True" 
                                       SelectedForeground="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" 
                                       SelectedPointerOverBackground="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" 
                                       SelectedBorderThickness="{ThemeResource GridViewItemCompactSelectedBorderThemeThickness}" 
                                       SelectedBackground="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" 
                                       VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                       VerticalAlignment="Top"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Solution: added ItemsPanel to GridView with defined item width

<GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapGrid ItemWidth="500" />
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>

来源：https://stackoverflow.com/questions/28592428/gridview-displays-first-element-different-than-all-others-xaml-win8-1-winrt