2個串列視圖之間的資料系結選擇/取消選擇記錄

我有 2 個串列視圖，一個預先填充了值串列和一個空串列，該串列應根據第一個視圖中選擇/取消選擇的內容進行填充。I can get the second view to populate when a value is selected but I'm not sure how to remove an item if it's been deselected in the first view. 如果我取消選擇一條記錄，它會在第二個串列中添加一個空值。我認為使用 if/else 陳述句可以解決此問題，但我認為可能有更優雅的方法來完成此操作。

查看模型

private ObservableCollection<string> _firstList;
public ObservableCollection<string> FirstList
{
    get => _firstList;
    set
    {
        if (_firstList!= value)
        {
            _firstList= value;
            RaisePropertyChanged(nameof(FirstList));
        }
    }
}

private string _selectedRecord;
public string SelectedRecord
{
    get => _selectedRecord;
    set
    {
        if (_selectedRecord!= value)
        {
            _selectedRecord= value;
            RaisePropertyChanged(nameof(SelectedRecord));
            _secondList.Add(_selectedRecord);
        }
    }
}

private ObservableCollection<string> _secondList= 
    new ObservableCollection<string>();
public ObservableCollection<string> SecondList
{
    get => _secondList;
    set
    {
        if (_secondList!= value)
        {
            _secondList= value;
            RaisePropertyChanged(nameof(SecondList));
        }
    }
}

XAML -

<ListView ItemsSource="{Binding FirstList}"
SelectedItem="{Binding SelectedRecord}">
<ListView.ItemsPanel>
    <ItemsPanelTemplate>
        <StackPanel Orientation="Vertical"></StackPanel>
    </ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal">
            <CheckBox IsChecked="{Binding IsSelected, 
                RelativeSource={RelativeSource 
                AncestorType=ListViewItem}}"/>
            <TextBlock Text="{Binding}" />
        </StackPanel>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

<ListView ItemsSource="{Binding SecondList}">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Vertical"></StackPanel>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding}" />
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

uj5u.com熱心網友回復：

將 替換string為自定義型別并處理您在視圖模型中添加和洗掉專案的邏輯：

public class ListItem : INotifyPropertyChanged
{
    public ListItem(string value) =>
        Value = value;

    public string Value { get; }

    private bool _isSelected;
    public bool IsSelected
    {
        get { return _isSelected; }
        set { _isSelected = value; RaisePropertyChanged(nameof(IsSelected)); }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void RaisePropertyChanged(string propertyName) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

查看型號：

public ViewModel()
{
    InitializeComponent();
    DataContext = this;

    FirstList.CollectionChanged  = (s, e) =>
    {
        if (e.NewItems != null)
            foreach (var newItem in e.NewItems.OfType<INotifyPropertyChanged>())
                newItem.PropertyChanged  = OnItemIsSelectedChanged;
        if (e.OldItems != null)
            foreach (var oldIrem in e.OldItems.OfType<INotifyPropertyChanged>())
                oldIrem.PropertyChanged -= OnItemIsSelectedChanged;
    };

    FirstList.Add(new ListItem("a"));
    FirstList.Add(new ListItem("b"));
    FirstList.Add(new ListItem("c"));
}

private void OnItemIsSelectedChanged(object sender, PropertyChangedEventArgs e)
{
    ListItem listItem = (ListItem)sender;
    if (listItem.IsSelected)
    {
        if (!SecondList.Contains(listItem))
            SecondList.Add(listItem);
    }
    else
        SecondList.Remove(listItem);
}

public ObservableCollection<ListItem> FirstList { get; } =
    new ObservableCollection<ListItem>();

public ObservableCollection<ListItem> SecondList { get; }
    = new ObservableCollection<ListItem>();

看法：

<ListView ItemsSource="{Binding FirstList}" SelectedItem="{Binding SelectedRecord}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <CheckBox IsChecked="{Binding IsSelected}"/>
                <TextBlock Text="{Binding Value}" />
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>



<ListView ItemsSource="{Binding SecondList}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Value}" />
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

簡而言之，這就是 MVVM。

標籤：C＃wpf列表显示数据绑定

上一篇：Flutter從API獲取加密資料

下一篇：Flutter：如何在json檔案中加入或鏈接兩個類