locked
Load Content In Same Xaml Page With Different CollectionView RRS feed

  • Question

  • User390692 posted

    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 :

    Saturday, July 11, 2020 3:37 AM

All replies

  • User390692 posted

    CollectionView in same page :

                                        <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>
    
    Saturday, July 11, 2020 3:40 AM
  • User390692 posted
    • Here's my first collectionview in the same page:
    • x:Name="listGroups"
    • Grid.Row="2"
    • Grid.ColumnSpan="3"
    • Margin="20,10,0,0"
    • HorizontalScrollBarVisibility="Never"
    • ItemsSource="{Binding Groups}"
    • SelectionMode="None">
    • Margin="0,15,15,15"
    • Padding="0,0,0,25"
    • BackgroundColor="{Binding backgroundColor}"
    • CornerRadius="40"
    • HasShadow="False"
    • WidthRequest="85">
    • 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">
    • Aspect="AspectFit"
    • HeightRequest="30"
    • HorizontalOptions="CenterAndExpand"
    • Source="{Binding image}"
    • VerticalOptions="Center"
    • WidthRequest="30" />
    • Grid.Row="1"
    • FontSize="16"
    • HorizontalOptions="FillAndExpand"
    • HorizontalTextAlignment="Center"
    • Text="{Binding description}"
    • VerticalOptions="EndAndExpand" />
    • Command="{Binding Path=BindingContext.SelectGroupCommand, Source={x:Reference listGroups}}"
    • CommandParameter="{Binding .}"
    • NumberOfTapsRequired="1" />
    • *
    Saturday, July 11, 2020 3:44 AM
  • User382871 posted

    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 collection1; ObservableCollection collection2; 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);
    }
    

    } ```

    Monday, July 13, 2020 6:13 AM
  • User390692 posted

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

    Thursday, July 16, 2020 1:52 AM
  • User382871 posted

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

    Thursday, July 16, 2020 5:16 AM