Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Search and Scroll navigation example
<StackLayout Margin="20">
<SearchBar x:Name="searchBar"
Placeholder="Enter a Pokémon name"
SearchButtonPressed="SearchBar_SearchButtonPressed"/>
<ActivityIndicator Color="Blue"
IsVisible="{Binding IsLoading}"
IsRunning="{Binding IsLoading}"
IsEnabled="{Binding IsLoading}"/>
<CollectionView
ItemsSource="{Binding PokemonList}"
SelectionMode="Single"
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.