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

huangapple go评论57阅读模式
英文:

How to properly bind CommandParameter in grouped CollectionView , Xamarin forms?

问题

您已经在Xamarin Forms中创建了一个分组的CollectionView。这个CollectionView包含两个按钮(一个在CollectionView的Header中,另一个在主体中)。

要解决问题,您需要在按钮的Command属性中设置一个命令,并将GroupedItem作为参数传递。这样,当您点击主体中的按钮时,您将能够访问与点击标题标签时相同的GroupedItem对象。

在XAML代码中,您可以像这样设置按钮的CommandCommandParameter属性:

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

然后,在GroupedItemsTestViewModel中,您可以添加一个名为SelectedGroupedItem的属性,并在changeBody方法中将其设置为按钮的CommandParameter值。这将使您能够访问相应的GroupedItem对象。

public GroupedItem SelectedGroupedItem { get; set; }

private void changeBody(object obj)
{
    SelectedGroupedItem = obj as GroupedItem;
    // 现在,您可以在SelectedGroupedItem中访问与点击按钮相关联的GroupedItem对象。
}

这样,当您点击主体中的按钮时,SelectedGroupedItem属性将包含与该按钮相关联的GroupedItem对象,就像在点击标题标签时一样。

英文:

I have created a grouped collection view in Xamarin Forms. The collection view has 2 buttons(1 label with tap gesture recognition), one in the collection view Header and another in the body.

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

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

                        &lt;/StackLayout&gt;
                    &lt;/DataTemplate&gt;
                &lt;/CollectionView.ItemTemplate&gt;
            &lt;/CollectionView&gt;

Here is the View Model for this

public class GroupedItemsTestViewModel
    {
        public ObservableCollection&lt;GroupedItem&gt; Items { get; set; }
        public ICommand ToggleForm { get; }
        public ICommand BodyButtonCommand { get; }
        public GroupedItemsTestViewModel()
        {
            Items = new ObservableCollection&lt;GroupedItem&gt;()
            {
              new GroupedItem(&quot;Title 1&quot;,new List&lt;Details&gt;{ new Details() {Description=&quot;Description 1&quot; } }),
              new GroupedItem(&quot;Title 2&quot;,new List&lt;Details&gt;{ new Details() {Description=&quot;Description 2&quot; } }),
              new GroupedItem(&quot;Title 3&quot;,new List&lt;Details&gt;{ new Details() {Description=&quot;Description 3&quot; } })
            };
            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;
        }
    }

On clicking the label(in the header) to toggle the form(body of the collection view) visibility, the GroupedItem is passed as the object in the toggleFormVisibility(object obj) function parameter.
But On clicking the Button in the Body of the collection view the object passed is only the Details object.

Here is the GroupedItem implementation:

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

How can I get the GroupedItem as the passed object on clicking the Button in the body just like on clicking the label in the Header?

答案1

得分: 0

You can get the GroupedItem as the passed object on clicking the Button in the body just like on clicking the label in the Header by putting the Button into GroupFooterTemplate as shown in the provided XML code. This will allow you to achieve the desired effect.

Additionally, there's another way to get the GroupedItem by making only one item in the collection view body visible at a time. When you click the Button, you can send the GroupedItem that is currently visible, which is controlled by the arrow in the header. This way, you can obtain the whole grouped item.

英文:

> How can I get the GroupedItem as the passed object on clicking the Button in the body just like on clicking the label in the Header?

You can put the Button into GroupFooterTemplate like this:

&lt;CollectionView IsGrouped=&quot;True&quot; ItemsSource=&quot;{Binding Items}&quot;&gt;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;CollectionView.GroupHeaderTemplate &gt;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;....
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;/CollectionView.GroupHeaderTemplate&gt;

&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;CollectionView.ItemTemplate&gt;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;DataTemplate&gt;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;StackLayout BackgroundColor=&quot;Azure&quot; IsVisible=&quot;{Binding IsVisible}&quot;&gt;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;Label Text=&quot;{Binding Description}&quot; /&gt;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;!--&lt;Button
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;Padding=&quot;0&quot;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;BackgroundColor=&quot;Blue&quot;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;Command=&quot;{Binding BindingContext.BodyButtonCommand, Source={Reference thisPage}}&quot;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;CommandParameter=&quot;{Binding .}&quot;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;HeightRequest=&quot;30&quot;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;HorizontalOptions=&quot;Start&quot;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;Text=&quot;Click&quot;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;TextColor=&quot;white&quot;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;VerticalOptions=&quot;Start&quot; /&gt;--&gt;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;/StackLayout&gt;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;/DataTemplate&gt;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;/CollectionView.ItemTemplate&gt;

&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;CollectionView.GroupFooterTemplate&gt;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;DataTemplate&gt;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;StackLayout &gt;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;Button
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;Padding=&quot;0&quot;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;BackgroundColor=&quot;Blue&quot;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;Command=&quot;{Binding BindingContext.BodyButtonCommand, Source={Reference thisPage}}&quot;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;CommandParameter=&quot;{Binding .}&quot;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;HeightRequest=&quot;30&quot;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;HorizontalOptions=&quot;Start&quot;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;Text=&quot;Click&quot;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;TextColor=&quot;white&quot;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;VerticalOptions=&quot;Start&quot; /&gt;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;/StackLayout&gt;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;/DataTemplate&gt;
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;/CollectionView.GroupFooterTemplate&gt;
&lt;/CollectionView&gt;

So you can get the GroupedItem as the passed object on clicking the Button. And this is the effect:

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

Update:

As Ashish said, in addition to the above method to get GroupedItem through GroupFooterTemplate, there is another way to achieve it:

> By making only one from item(collection view body) to be visible at a time. Now I just send the GroupedItem that is visible when I click the Button. Since the visibility is handled by the arrow in the header and hence I can get the whole grouped item.

huangapple
  • 本文由 发表于 2023年4月13日 15:35:16
  • 转载请务必保留本文链接:https://go.coder-hub.com/76002794.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定