Как я могу переключить компонент в datatemplate, когда я выбираю элемент?

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"/>

Достигнутый результат должен выглядеть как это , но это еще одна часть истории

Answer 1

Согласно вашему описанию, если вы хотите, чтобы BoxView отображал выбранный или невыбранный для элемента Collectionview, я предлагаю вам использовать одно свойство для привязки 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");
        }
    }

}

ViewModel:

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


    }       
}

ContentPage:

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

Скриншот выглядит так:

Answer 2

Что я понял

вы пытаетесь отобразить индикатор на элементе, когда он выбран, и одновременно может быть выбран только один элемент

Так что вам нужно установитьSelectionMode to Single в вашем CollectionView, так что только один элемент может быть выбран за один раз

, тогда вы можете отобразить индикатор на выбранном элементе и скрыть его на предыдущем, используя OnCollectionViewSelectionChanged

. подробнее здесь Xamarin-Collectionview-Selection