Hi, I'm having an issue with SpanCount in LayoutManager.
I modified the Catalog-->Catalog Tile template for my app.
The main differences are
- instead
of containing an image, the tile contains a grid with 2 rows:
- 1
row for a "heart" icon (IsVisible is bound to a bool value)
- 1
row for some text
- The
tiles should be closer together (basically touching), so I changed these
values:
- sfListView
ItemSpacing = 0
- controls:CustomShadowFrame
Margin = 0
- I
want 3 tiles on a row (on phone, portrait orientation) instead of 2
The thing is, even
when I set SpanCount to 3, it keeps staying at 2 per row! During Hot Reload, if
I manually change SpanCount to 4, it displays 4 tiles per row. Then if I change
it back to 3, then it properly shows 3. But, if I move to a different page then
come back, it's back at 2 per row, though SpanCount is still at 3.
Below is my code.
Any ideas on what to do?
<!--
ListView for Category -->
<listView:SfListView
x:Name="TileListView"
Grid.Row="1"
Padding="8"
AutoFitMode="Height"
HorizontalOptions="Center"
ItemSpacing="0"
ItemsSource="{Binding
Tiles}"
Style="{StaticResource
TransparentSelectionListView}">
<!--
Layout to customize no. of columns in SfListView -->
<listView:SfListView.LayoutManager>
<listView:GridLayout
SpanCount="3" />
</listView:SfListView.LayoutManager>
<listView:SfListView.ItemTemplate>
<DataTemplate
x:DataType="mobileModels:Tile">
<controls:CustomShadowFrame
Margin="0"
Padding="4,0,4,0"
BackgroundColor="{Binding
Path=Style.TileColor}"
BorderColor="{Binding
Path=Style.BorderColor}"
CornerRadius="4"
HasShadow="True"
Radius="4"
HeightRequest="189"
WidthRequest="165"
>
<syncEffectsView:SfEffectsView
RippleColor="{DynamicResource Gray-300}"
TouchDownEffects="Ripple"
TouchUpCommand="{Binding
Path=BindingContext.TileSelectedCommand, Source={x:Reference categoryPage}}"
TouchUpCommandParameter="{Binding}">
<Grid
x:Name="TileContentsGrid"
HorizontalOptions="CenterAndExpand"
VerticalOptions="StartAndExpand"
RowSpacing="8">
<Grid.RowDefinitions>
<RowDefinition
x:Name="TileHeartRow"
Height="22"
/>
<RowDefinition
x:Name="TileNameRow"
Height="Auto"
/>
</Grid.RowDefinitions>
<!--
Category Name -->
<Label
x:Name="TileHeart"
FontFamily="UIFontIcons"
FontSize="22"
Text=""
TextColor="{Binding
Path=Style.FontColor}"
IsVisible="{Binding
IsStarred}"
HorizontalTextAlignment="End"
VerticalOptions="Start"
VerticalTextAlignment="Start"
Margin="0,2,2,0"
/>
<Label
x:Name="TileLabel"
Grid.Row="1"
Margin="0,8,0,8"
Style="{StaticResource
TileLabelStyle}"
TextColor="{Binding
Path=Style.FontColor}"
Text="{Binding
Name}"
/>
</Grid>
</syncEffectsView:SfEffectsView>
</controls:CustomShadowFrame>
</DataTemplate>
</listView:SfListView.ItemTemplate>
</listView:SfListView>
