Why is it that when I try to navigate to a specific group, I always get sent back to the first group?
If I find a group, and in it the instance I need, and pass it to ScrollTo, then the search works correctly. But I can’t do it with indexes. Please help me figure it out.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiAppColScroll.MainPage">
<ScrollView>
<VerticalStackLayout
Padding="30,0"
Spacing="25">
<CollectionView HeightRequest="300" x:Name="collectionView"
ItemsSource="{Binding Animals}"
IsGrouped="true">
<CollectionView.GroupHeaderTemplate>
<DataTemplate>
<Label Text="{Binding Name}"
BackgroundColor="LightGray"
FontSize="18"
FontAttributes="Bold" />
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Image Grid.RowSpan="2"
Source="{Binding ImageUrl}"
Aspect="AspectFill"
HeightRequest="60"
WidthRequest="60" />
<Label Grid.Column="1"
Text="{Binding Name}"
FontAttributes="Bold" />
<Label Grid.Row="1"
Grid.Column="1"
Text="{Binding Location}"
FontAttributes="Italic"
VerticalOptions="End" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<Button x:Name="Btn1" Text="Btn1" SemanticProperties.Hint="Counts the number of times you click"
Clicked="Btn1_Clicked"/>
<Button x:Name="Btn2" Text="Btn2" SemanticProperties.Hint="Counts the number of times you click"
Clicked="Btn2_Clicked"/>
<Button x:Name="Btn3" Text="Btn3" SemanticProperties.Hint="Counts the number of times you click"
Clicked="Btn3_Clicked"/>
<Button x:Name="Btn4" Text="Btn4" SemanticProperties.Hint="Counts the number of times you click"
Clicked="Btn4_Clicked"/>
<Button x:Name="Btn5" Text="Btn5" SemanticProperties.Hint="Counts the number of times you click"
Clicked="Btn5_Clicked"/>
</VerticalStackLayout>
</ScrollView>
</ContentPage>
using Microsoft.Maui.Controls;
using System.Collections.ObjectModel;
namespace MauiAppColScroll
{
public partial class MainPage : ContentPage
{
int count = 0;
public ObservableCollection<AnimalGroup> Animals { get; private set; } = new ObservableCollection<AnimalGroup>();
public MainPage()
{
Animals.Add(new AnimalGroup("Bears", new ObservableCollection<Animal>
{
new Animal
{
Name = "American Black Bear",
Location = "North America",
Details = "Details about the bear go here.",
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/0/08/01_Schwarzbär.jpg"
},
new Animal
{
Name = "Asian Black Bear",
Location = "Asia",
Details = "Details about the bear go here.",
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG/180px-Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG"
},
}));
Animals.Add(new AnimalGroup("Monkeys", new ObservableCollection<Animal>
{
new Animal
{
Name = "Baboon",
Location = "Africa & Asia",
Details = "Details about the monkey go here.",
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
},
new Animal
{
Name = "Capuchin Monkey",
Location = "Central & South America",
Details = "Details about the monkey go here.",
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Capuchin_Costa_Rica.jpg/200px-Capuchin_Costa_Rica.jpg"
},
new Animal
{
Name = "Blue Monkey",
Location = "Central and East Africa",
Details = "Details about the monkey go here.",
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/BlueMonkey.jpg/220px-BlueMonkey.jpg"
},
}));
Animals.Add(new AnimalGroup("Horses", new ObservableCollection<Animal>
{
new Animal
{
Name = "American Black Bear",
Location = "North America",
Details = "Details about the bear go here.",
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/0/08/01_Schwarzbär.jpg"
},
new Animal
{
Name = "Asian Black Bear",
Location = "Asia",
Details = "Details about the bear go here.",
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG/180px-Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG"
},
}));
Animals.Add(new AnimalGroup("Cats", new ObservableCollection<Animal>
{
new Animal
{
Name = "American Black Bear",
Location = "North America",
Details = "Details about the bear go here.",
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/0/08/01_Schwarzbär.jpg"
},
new Animal
{
Name = "Asian Black Bear",
Location = "Asia",
Details = "Details about the bear go here.",
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG/180px-Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG"
},
}));
Animals.Add(new AnimalGroup("Dogs", new ObservableCollection<Animal>
{
new Animal
{
Name = "American Black Bear",
Location = "North America",
Details = "Details about the bear go here.",
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/0/08/01_Schwarzbär.jpg"
},
new Animal
{
Name = "Asian Black Bear",
Location = "Asia",
Details = "Details about the bear go here.",
ImageUrl = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG/180px-Ursus_thibetanus_3_%28Wroclaw_zoo%29.JPG"
},
}));
InitializeComponent();
BindingContext = this;
}
private void Btn1_Clicked(object sender, EventArgs e)
{
collectionView.ScrollTo(1, 0);
}
private void Btn2_Clicked(object sender, EventArgs e)
{
collectionView.ScrollTo(1, 1);
}
private void Btn3_Clicked(object sender, EventArgs e)
{
collectionView.ScrollTo(1, 2);
}
private void Btn4_Clicked(object sender, EventArgs e)
{
collectionView.ScrollTo(1, 3);
}
private void Btn5_Clicked(object sender, EventArgs e)
{
collectionView.ScrollTo(1, 4);
}
}
}
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace MauiAppColScroll
{
public class AnimalGroup : ObservableCollection<Animal>
{
public string Name { get; private set; }
public AnimalGroup(string name, ObservableCollection<Animal> animals) : base(animals)
{
Name = name;
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace MauiAppColScroll
{
public class Animal
{
public string Name { get; set; }
public string Location { get; set; }
public string Details { get; set; }
public string ImageUrl { get; set; }
}
}
I expected that
when calling
private void Btn5_Clicked(object sender, EventArgs e)
{
collectionView.ScrollTo(1, 4);
}
I see the 5th group “Dogs” and it transfers me to the first one if, for example, I am in the middle of the list. Or nothing happens at all if I click on Btn5 immediately after loading.