Load Content In Same Xaml Page With Different CollectionView

fira

Hi Everyone,

I am working on a app that has load in same xamarin forms pages. my first CollectionView consists of items in a data template what I need help with is when the user clicks a item in the data template collection view it loads them to a different CollectionView in the same page. How to do that? Here's my code :

<CollectionView.ItemsLayout>

</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>








<pancake:PancakeView.GestureRecognizers>

</pancake:PancakeView.GestureRecognizers>


</CollectionView.ItemTemplate>

fira

CollectionView in same page :

<CollectionView.ItemsLayout>

</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>

                                    <Image
                                        Grid.Row="1"
                                        Grid.ColumnSpan="3"
                                        Margin="0,10,0,20"
                                        HeightRequest="136"
                                        HorizontalOptions="Center"
                                        Source="{Binding image}"
                                        WidthRequest="136" />
                                    <Label
                                        Grid.Row="2"
                                        Grid.ColumnSpan="3"
                                        Margin="0,-10,0,0"
                                        FontFamily="FontPoppinsMedium"
                                        FontSize="18"
                                        Text="{Binding description}" />
                                    <Label
                                        Grid.Row="3"
                                        Grid.ColumnSpan="3"
                                        FontSize="14"
                                        LineBreakMode="TailTruncation"
                                        Text="{Binding complement}" />
                                    <Label
                                        Grid.Row="4"
                                        Grid.ColumnSpan="3"
                                        Margin="0,10,0,0"
                                        FontFamily="FontPoppinsMedium"
                                        FontSize="22"
                                        Text="{Binding price, StringFormat='${0}'}"
                                        VerticalOptions="Center" />
                                </Grid>
                                <pancake:PancakeView.GestureRecognizers>
                                    <TapGestureRecognizer
                                        Command="{Binding Path=BindingContext.NavigateToDetailPageCommand, Source={x:Reference listItems}}"
                                        CommandParameter="{Binding .}"
                                        NumberOfTapsRequired="1" />
                                </pancake:PancakeView.GestureRecognizers>
                            </pancake:PancakeView>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>

fira

• Here's my first collectionview in the same page:
• <CollectionView
• x:Name="listGroups"
• Grid.Row="2"
• Grid.ColumnSpan="3"
• Margin="20,10,0,0"
• HorizontalScrollBarVisibility="Never"
• ItemsSource="{Binding Groups}"
• SelectionMode="None">
• <CollectionView.ItemsLayout>
• </CollectionView.ItemsLayout>
• <CollectionView.ItemTemplate>
• <pancake:PancakeView
• Margin="0,15,15,15"
• Padding="0,0,0,25"
• BackgroundColor="{Binding backgroundColor}"
• CornerRadius="40"
• HasShadow="False"
• WidthRequest="85">
• <pancake:PancakeView
• Grid.Row="0"
• Margin="12,12,12,0"
• Padding="0"
• BackgroundColor="{StaticResource colorWhite}"
• BorderColor="{StaticResource colorGrayE0}"
• BorderThickness="1"
• CornerRadius="30"
• HeightRequest="60"
• HorizontalOptions="Center"
• IsClippedToBounds="True"
• WidthRequest="60">
• <Image
• Aspect="AspectFit"
• HeightRequest="30"
• HorizontalOptions="CenterAndExpand"
• Source="{Binding image}"
• VerticalOptions="Center"
• WidthRequest="30" />
• <Label
• Grid.Row="1"
• FontSize="16"
• HorizontalOptions="FillAndExpand"
• HorizontalTextAlignment="Center"
• Text="{Binding description}"
• VerticalOptions="EndAndExpand" />
• <pancake:PancakeView.GestureRecognizers>
• <TapGestureRecognizer
• Command="{Binding Path=BindingContext.SelectGroupCommand, Source={x:Reference listGroups}}"
• CommandParameter="{Binding .}"
• NumberOfTapsRequired="1" />
• </pancake:PancakeView.GestureRecognizers>
• </CollectionView.ItemTemplate>
• *

Yelinzh

when the user clicks a item in the data template collection view it loads them to a different CollectionView in the same page

Try to detect the SelectionChanged event of the first collectionView to get the selected item data, then add data to the collection which has been set binding to the second collectionView's ItemsSource.

Check the code:

public partial class MainPage : ContentPage
{
    ObservableCollection<ModelClass> collection_1;
    ObservableCollection<ModelClass> collection_2;
    public MainPage()
    {
        InitializeComponent();

        collection_1 = new ObservableCollection<ModelClass>();
        //add the data to collection_1
        collection_2 = new ObservableCollection<ModelClass>();

        collectionView_1.ItemsSource = collection_1;
        collectionView_2.ItemsSource = collection_2;
    }

    private void collectionView_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        var item = e.CurrentSelection.FirstOrDefault() as ModelClass;
        collectionView_2.Add(item);
    }
}

fira

The above solution also can be done. But I'd created another solution. Using,

public class MainCategoryVM : BaseVM
{
public MainCategoryVM(INavigation navigation)
{SelectCategoryChangedCommand = new Command((model) => SelectedCategoryChangedCommand(model));}
public Command SelectCategoryChangedCommand { get; }
public ObservableCollection Categories { get; set; }

private void SelectedCategoryChangedCommand(CategoryList model)
{
SelectCategory(model);
}

void SelectCategory(CategoryList model)
{
CategoriesDetail = new ObservableCollection();

        if (model.Category != "All")
        {
            var cat = CategoriesDetail.ToList().Where(s => s.Category == model.Category);
            var observable = new ObservableCollection<CategoryDetailList>(cat);
            CategoriesDetail  = observable;
        }
    }

}

public partial class MainPage : ContentPage
{
public MainPage ()
{
InitializeComponent ();
BindingContext = new MainCategoryVM(Navigation);
}
}

Yelinzh

@fira If you've solved the issue, please mark your solution as the answer. It'll help others who face the similar problem. If you are facing some issues while implementing, try to post the particular error with the corresponding codes here.