当我 select 一个项目时，如何切换数据模板中的组件？

Question

我的页面中有一个 CollectionView，它显示项目。我需要切换视觉指示器（复选标记），该项目已被选中。复选标记应该是风格化的，但我没有做过，我只用 BoxView 试过。似乎没有什么合理的工作。

我曾尝试在我的模型中设置一个标志，如果项目被选中，然后重新加载集合，但这是一个非常糟糕的方法，它也会消耗大量资源。我只需要一个开关，它会在点击项目时出现并在第二次点击时消失。

<Label Text="{Binding price, Converter={StaticResource Price}}" Style="{StaticResource PriceLabel}" Grid.Row="0" Grid.ColumnSpan="2"/>
<Label Text="{Binding name}" Style="{StaticResource CommonLabel}" VerticalTextAlignment="Center" Grid.Row="1" Grid.ColumnSpan="2"/>
<!-- Somehow change this-->
 <BoxView BackgroundColor="Blue" Grid.Row="0" Grid.Column="1"/>

期望的结果应该类似于 this 但那是故事的另一部分

Answer 1

我明白了什么

您正试图在项目被选中时显示一个指示器，但同时只能选择一个项目

因此您需要在您的 CollectionView 中将 SelectionMode 设置为 Single，这样一次只能选择一个项目

然后您可以使用 OnCollectionViewSelectionChanged

在所选项目上显示指示器并在前一个项目上隐藏它

您可以在此处找到更多详细信息Xamarin-Collectionview-Selection

Answer 2

根据你的描述，如果你想让BoxView在Collectionview item中显示选中或未选中，建议你可以使用一个属性绑定BoxView IsVisible，我做了一个例子，你可以看看:

型号：

public class Model:ViewModelBase
{
    private string _DisplayName;

    public string DisplayName
    {
        get { return _DisplayName; }
        set
        {
            _DisplayName = value;
            RaisePropertyChanged("DisplayName");
        }
    }
    private bool _selected;

    public bool Selected
    {
        get { return _selected; }
        set
        {
            _selected = value;
            RaisePropertyChanged("Selected");
        }
    }

}

视图模型：

public class collectionviewmodel:ViewModelBase
{
    public ObservableCollection<Model> Items { get; set; }


    public collectionviewmodel()
    {
        Items = new ObservableCollection<Model>();
        Items.Add(new Model() { DisplayName = "AAA", Selected = false });
        Items.Add(new Model() { DisplayName = "BBB", Selected = false });
        Items.Add(new Model() { DisplayName = "CCC", Selected = false });
        Items.Add(new Model() { DisplayName = "DDD", Selected = false });
        Items.Add(new Model() { DisplayName = "EEE", Selected = false });


    }       
}

内容页：

  <CollectionView
            x:Name="list1"
            ItemsLayout="VerticalList"
            ItemsSource="{Binding Items}"
            SelectionChanged="List1_SelectionChanged"
            SelectionMode="Single">

            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout Orientation="Horizontal">

                        <Label
                            HorizontalOptions="StartAndExpand"
                            Text="{Binding DisplayName}"
                            TextColor="Fuchsia" />
                        <BoxView
                            HorizontalOptions="End"
                            IsVisible="{Binding Selected}"
                            Color="Fuchsia" />
                    </StackLayout>

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

public Page23 ()
    {
        InitializeComponent ();
        this.BindingContext = new collectionviewmodel();
    }

截图是这样的：

当我 select 一个项目时，如何切换数据模板中的组件？

How can I toggle component in datatemplate, when I select an item?

c#

xamarin

collectionview