Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Load Content In Same Xaml Page With Different CollectionView

firafira Member ✭✭
edited July 11 in Xamarin.Forms

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>






Answers

  • firafira Member ✭✭

    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>
    
  • firafira Member ✭✭
    • 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>
    • *
  • JarvanJarvan Member, Xamarin Team Xamurai

    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);
        }
    }
    
  • firafira Member ✭✭

    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);
    }
    }

  • JarvanJarvan Member, Xamarin Team Xamurai
    edited July 24

    @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.

Sign In or Register to comment.