如何在分组的CollectionView,Xamarin表单中正确绑定CommandParameter?

rqqzpn5f  于 2023-04-18  发布在  其他
关注(0)|答案(1)|浏览(133)

我已经在Xamarin Forms中创建了一个分组集合视图。集合视图有2个按钮(1个标签带有点击手势识别),一个在集合视图Header中,另一个在主体中。

<CollectionView IsGrouped="True" ItemsSource="{Binding Items}">
                <CollectionView.GroupHeaderTemplate>
                    <DataTemplate>
                        <ContentView Padding="0,10,0,0">
                            <Grid
                                BackgroundColor="Black"
                                ColumnDefinitions="*,30"
                                HorizontalOptions="FillAndExpand">
                                <Label
                                    HorizontalOptions="Start"
                                    Text="{Binding Title}"
                                    TextColor="White" />
                                <Label
                                    BackgroundColor="BLue"
                                    FontAttributes="Bold"
                                    HorizontalOptions="End"
                                    HorizontalTextAlignment="Center"
                                    Text="&gt;"
                                    TextColor="White"
                                    WidthRequest="30">
                                    <Label.GestureRecognizers>
                                        <TapGestureRecognizer Command="{Binding BindingContext.ToggleForm, Source={Reference thisPage}}" CommandParameter="{Binding .}" />
                                    </Label.GestureRecognizers>
                                </Label>

                            </Grid>
                        </ContentView>
                    </DataTemplate>
                </CollectionView.GroupHeaderTemplate>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout BackgroundColor="Azure" IsVisible="{Binding IsVisible}">
                            <Label Text="{Binding Description}" />
                            <Button
                                Padding="0"
                                BackgroundColor="Blue"
                                Command="{Binding BindingContext.BodyButtonCommand, Source={Reference thisPage}}"
                                CommandParameter="{Binding .}"
                                HeightRequest="30"
                                HorizontalOptions="Start"
                                Text="Click"
                                TextColor="white"
                                VerticalOptions="Start" />

                        </StackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

以下是此视图模型

public class GroupedItemsTestViewModel
    {
        public ObservableCollection<GroupedItem> Items { get; set; }
        public ICommand ToggleForm { get; }
        public ICommand BodyButtonCommand { get; }
        public GroupedItemsTestViewModel()
        {
            Items = new ObservableCollection<GroupedItem>()
            {
              new GroupedItem("Title 1",new List<Details>{ new Details() {Description="Description 1" } }),
              new GroupedItem("Title 2",new List<Details>{ new Details() {Description="Description 2" } }),
              new GroupedItem("Title 3",new List<Details>{ new Details() {Description="Description 3" } })
            };
            ToggleForm = new Command(toggleFormVisibility);
            BodyButtonCommand = new Command(changeBody);
        }

        private void toggleFormVisibility(object obj)
        {
            var type = obj.GetType();
            var clickedObj = obj as GroupedItem;
            if (clickedObj != null)
            {
                var form = clickedObj.Form;
                form.IsVisible = form.IsVisible==true?false:true;
            }

        }
        private void changeBody(object obj)
        {
            var clickedObj = obj as GroupedItem;
        }
    }

单击表头标签切换表单(集合视图体)可见性时,GroupedItem作为toggleFormVisibility(object obj)函数参数中的对象传递,但单击集合视图体中Button传递的对象仅为Details对象。
下面是GroupedItem的实现:

public class GroupedItem : List<Details>
    {
        public string Title { get; }
        public Details Form { get; }
        public GroupedItem(string title, List<Details> form) : base(form) 
        {
            Title = title;
            Form = form[0];
        }
    }

点击正文的Button,如何像点击Header中的标签一样,得到GroupedItem作为传递对象?

z6psavjg

z6psavjg1#

点击正文的Button,如何像点击Header中的标签一样,得到GroupedItem作为传递对象?
您可以将Button放入GroupFooterTemplate中,如下所示:

<CollectionView IsGrouped="True" ItemsSource="{Binding Items}">
            <CollectionView.GroupHeaderTemplate >
                ....
            </CollectionView.GroupHeaderTemplate>

            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout BackgroundColor="Azure" IsVisible="{Binding IsVisible}">
                        <Label Text="{Binding Description}" />
                        <!--<Button
                                Padding="0"
                                BackgroundColor="Blue"
                                Command="{Binding BindingContext.BodyButtonCommand, Source={Reference thisPage}}"
                                CommandParameter="{Binding .}"
                                HeightRequest="30"
                                HorizontalOptions="Start"
                                Text="Click"
                                TextColor="white"
                                VerticalOptions="Start" />-->
                   </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>

            <CollectionView.GroupFooterTemplate>
                <DataTemplate>
                    <StackLayout >
                        <Button
                                Padding="0"
                                BackgroundColor="Blue"
                                Command="{Binding BindingContext.BodyButtonCommand, Source={Reference thisPage}}"
                                CommandParameter="{Binding .}"
                                HeightRequest="30"
                                HorizontalOptions="Start"
                                Text="Click"
                                TextColor="white"
                                VerticalOptions="Start" />
                   </StackLayout>
                </DataTemplate>
            </CollectionView.GroupFooterTemplate>
</CollectionView>

所以点击Button就可以得到GroupedItem作为传递对象,效果如下:

更新:

正如Ashish所说,除了上面通过GroupFooterTemplate获取GroupedItem的方法外,还有一种方法可以实现:
通过一次只显示一个from项(集合视图体)。现在我只发送单击Button时可见的GroupedItem。由于可见性由标题中的箭头处理,因此我可以获得整个分组项。

相关问题