First CollectionView
<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> | |
</ContentPage.Resources> | |
<ContentPage.Content> | |
<StackLayout Margin="20"> | |
<ActivityIndicator Color="Blue" | |
IsVisible="{Binding IsLoading}" | |
IsRunning="{Binding IsLoading}" | |
IsEnabled="{Binding IsLoading}"/> | |
<CollectionView ItemsSource="{Binding PokemonList}" x:Name="collectionView"> | |
<CollectionView.ItemTemplate> | |
<DataTemplate> | |
<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> | |
</CollectionView.ItemTemplate> | |
</CollectionView> | |
</StackLayout> | |
</ContentPage.Content> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment