Two horizontal lists example

05_TwoHorizontalLists.xaml

    <ContentPage.Resources>
        <Style x:Key="BasicLabel" TargetType="Label">
            <Setter Property="FontSize" Value="Micro"/>
            <Setter Property="TextColor" Value="Black"/>
            <Setter Property="VerticalOptions" Value="Center"/>
        </Style>

        <Style x:Key="StatLabel" BasedOn="{StaticResource BasicLabel}" TargetType="Label">
            <Setter Property="HorizontalOptions" Value="Start"/>
        </Style>

        <Style x:Key="StatValueLabel" BasedOn="{StaticResource BasicLabel}" TargetType="Label">
            <Setter Property="HorizontalOptions" Value="End"/>
            <Setter Property="Margin" Value="0,0,2,0"/>
        </Style>

        <Style x:Key="StatValueBox" TargetType="BoxView">
            <Setter Property="Margin" Value="1"/>
            <Setter Property="HeightRequest" Value="10"/>
            <Setter Property="VerticalOptions" Value="Center"/>
            <Setter Property="HorizontalOptions" Value="Start"/>
        </Style>

        <DataTemplate x:Key="pokemonTemplate">
            <Grid VerticalOptions="Center" Padding="10,10,0,10">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="130"/>
                </Grid.RowDefinitions>
                <Frame HasShadow="True" Padding="5">
                    <Grid BackgroundColor="#F9FFBC">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="60"/>
                            <ColumnDefinition Width="100"/>
                            <ColumnDefinition Width="20"/>
                        </Grid.ColumnDefinitions>

                        <Image Grid.Row="0"
                               Grid.Column="0"
                               Grid.RowSpan="4"
                               Source="{Binding ImageURL}"
                               WidthRequest="60"
                               HeightRequest="60"
                               HorizontalOptions="Center"
                               Aspect="AspectFit" />

                        <Label Grid.Row="4" 
                               Grid.Column="0"
                               Text="{Binding name.english}"
                               FontAttributes="Bold"
                               HorizontalOptions="Center"
                               FontSize="Micro"
                               TextColor="Blue"/>

                        <Label Grid.Row="5"
                               Grid.Column="0"
                               Text="{Binding Types}"
                               FontAttributes="Italic"
                               HorizontalOptions="Center"
                               TextColor="#606060"
                               FontSize="Micro"
                               VerticalOptions="Start"/>

                        <Label Grid.Row="0"
                               Grid.Column="1"
                               Text="HP"
                               Style="{StaticResource StatLabel}"/>

                        <BoxView Grid.Row="0"
                                 Grid.Column="2"
                                 Color="#A5FF82"
                                 WidthRequest="{Binding HP}"
                                 Style="{StaticResource StatValueBox}"/>

                        <Label Grid.Row="0"
                               Grid.Column="3"
                               Text="{Binding _base.HP}"
                               Style="{StaticResource StatValueLabel}"/>

                        <Label Grid.Row="1"
                               Grid.Column="1"
                               Text="Attack"
                               Style="{StaticResource StatLabel}"/>

                        <BoxView Grid.Row="1"
                                 Grid.Column="2"
                                 Color="#A32F2F"
                                 WidthRequest="{Binding Attack}"
                                 Style="{StaticResource StatValueBox}"/>

                        <Label Grid.Row="1"
                               Grid.Column="3"
                               Text="{Binding _base.Attack}"
                               Style="{StaticResource StatValueLabel}"/>

                        <Label Grid.Row="2"
                               Grid.Column="1"
                               Text="Defense"
                               Style="{StaticResource StatLabel}"/>

                        <BoxView Grid.Row="2"
                                 Grid.Column="2"
                                 Color="#47B7C1"
                                 WidthRequest="{Binding Defense}"
                                 Style="{StaticResource StatValueBox}"/>

                        <Label Grid.Row="2"
                               Grid.Column="3"
                               Text="{Binding _base.Defense}"
                               Style="{StaticResource StatValueLabel}"/>

                        <Label Grid.Row="3"
                               Grid.Column="1"
                               Text="Sp. Attack"
                               Style="{StaticResource StatLabel}"/>

                        <BoxView Grid.Row="3"
                                 Grid.Column="2"
                                 Color="#EACA15"
                                 WidthRequest="{Binding SpAttack}"
                                 Style="{StaticResource StatValueBox}"/>

                        <Label Grid.Row="3"
                               Grid.Column="3"
                               Text="{Binding _base.SpAttack}"
                               Style="{StaticResource StatValueLabel}"/>

                        <Label Grid.Row="4"
                               Grid.Column="1"
                               Text="Sp. Defense"
                               Style="{StaticResource StatLabel}"/>

                        <BoxView Grid.Row="4"
                                 Grid.Column="2"
                                 Color="#FF6811"
                                 WidthRequest="{Binding SpDefense}"
                                 Style="{StaticResource StatValueBox}"/>

                        <Label Grid.Row="4"
                               Grid.Column="3"
                               Text="{Binding _base.SpDefense}"
                               Style="{StaticResource StatValueLabel}"/>

                        <Label Grid.Row="5"
                               Grid.Column="1"
                               Text="Speed"
                               Style="{StaticResource StatLabel}"/>

                        <BoxView Grid.Row="5"
                                 Grid.Column="2"
                                 Color="#D693B4"
                                 WidthRequest="{Binding Speed}"
                                 Style="{StaticResource StatValueBox}"/>

                        <Label Grid.Row="5"
                               Grid.Column="3"
                               Text="{Binding _base.Speed}"
                               Style="{StaticResource StatValueLabel}"/>

                    </Grid>
                </Frame>
            </Grid>
        </DataTemplate>

        <Style TargetType="CollectionView">
            <Setter Property="HeightRequest" Value="150"/>
            <Setter Property="SelectionMode" Value="Single"/>
            <Setter Property="Margin" Value="0,10,0,20"/>
            <Setter Property="BackgroundColor" Value="LightGray"/>
            <Setter Property="ItemTemplate" Value="{StaticResource pokemonTemplate}"/>
            <Setter Property="ItemsLayout" Value="{x:Static ListItemsLayout.HorizontalList}"/>
        </Style>
    </ContentPage.Resources>

    <ContentPage.Content>
        <StackLayout Margin="20">
            <Label Text="Ice Pokémon" 
                   TextColor="#5DBCD2" />

            <ActivityIndicator Color="Blue"
                               IsVisible="{Binding IsLoading}"
                               IsRunning="{Binding IsLoading}"
                               IsEnabled="{Binding IsLoading}"/>

            <CollectionView ItemsSource="{Binding IcePokemonList}" 
                            x:Name="collectionViewIce"/>

            <Label Text="Dark Pokémon" 
                   TextColor="Black" />

            <CollectionView ItemsSource="{Binding DarkPokemonList}"
                            x:Name="collectionViewDark"/>
        </StackLayout>
    </ContentPage.Content>