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>