如何将组合框选择更改值与列表框项绑定？

Question

我创建了 ListBox 并动态添加项目。如何添加与 ComboBoxItem 值绑定的列表项。如果组合框选择为 2，我只需要在 ListBox 中看到 2 个列表项。将 MVVM 和 InotifyPropertyChanged 实现为 ComboBox 是我认为的最佳实践。请帮忙。

     public partial class MainWindow : Window
            {
                public List<VisibleItem> dataList { get; set; }

                public MainWindow()
                {
                    InitializeComponent();
                    LoadListItems();
                }
   public class VisibleItem
    {
        public int PictureID { get; set; }
        public string Name { get; set; }
        public string SomeDetail { get; set; }
        public string Info { get; set; }
        public string Group { get; set; }
        public string GHeaderName { get; set; }
        public string bindText { get; set; }
        public object Class2 { get; internal set; }
    }

                //load list to the ListBox
                private void LoadListItems()
                {
                    dataList = new List<VisibleItem>();
                    dataList = getDataList();
                    ListBoxConverter.ItemsSource = dataList;
                    this.ListBoxConverter.DataContext = this;
                }        

                //creating sample item list
                private List<VisibleItem> getDataList()
                {
                    VisibleItem vItem;

                    for (var k = 1; k < 10; k++)
                    {
                        vItem = new VisibleItem();
                        vItem.Group = "Group " + k;
                        vItem.Name = "Item Name  " + k;
                        vItem.PictureID = k;
                        vItem.SomeDetail = "Detail  " + k;
                        vItem.Info = "Info  " + k;
                        vItem.GHeaderName = "GHeaderName " + k;  
                        vItem.Info = "Info  " + k;
                       // vItem.Class
                        dataList.Add(vItem);
                    }
                    return dataList;
                }

            }

---

  //xaml   

 <Window.Resources>
            <local1:ComboBox x:Key="ImageConverter"/>
            <DataTemplate x:Key="DataTemplateItemConverter">
                <GroupBox x:Name="Group" Header="{Binding GHeaderName}" Height="45" Width="720" Canvas.Top="52" Background="#FFD8D8D8" BorderBrush="Black">
                    <Canvas Height="48" Margin="0,0,-2,-9">
                        <!--<Image Source="{Binding PictureID,Converter={StaticResource ImageConverter}}" Name="ImageName" Height="36" Width="36" Canvas.Left="8" Canvas.Top="8"></Image>-->
                        <TextBlock x:Name="Names" Text="{Binding Name}" Canvas.Left="124" Width="109" Height="22"/>

                        <TextBlock x:Name="Some" Text="{Binding SomeDetail}" Canvas.Left="272" Width="120" Height="22"/>
                        <TextBox x:Name="Information" Text="{Binding Info}" Width="102" />
                        <TextBox x:Name="bindText" Text="{Binding Info, Mode=OneWay}" Width="126" Canvas.Left="414"/>
                    </Canvas>
                </GroupBox>
            </DataTemplate>
        </Window.Resources>
        <Canvas>        

            <ComboBox x:Name="ComboBox1" Canvas.Left="166" Canvas.Top="5" Width="68" SelectionChanged="ComboBox_SelectionChanged">
                <ComboBoxItem IsSelected="True" Content="1"/>
                <ComboBoxItem Content="2"/>
                <ComboBoxItem Content="3"/>
                <ComboBoxItem Content="4"/>
                <ComboBoxItem Content="5"/>
                <ComboBoxItem Content="6"/>
            </ComboBox>

            <ListBox x:Name="ListBoxConverter" ItemTemplate="{DynamicResource DataTemplateItemConverter}" ItemsSource="{Binding dataList}" IsSynchronizedWithCurrentItem="True" HorizontalContentAlignment="Left" Background="{x:Null}" BorderBrush="{x:Null}" Height="295" Canvas.Left="-8" Canvas.Top="31" Width="541">

            </ListBox>


        </Canvas>

    </Window>

Answer 1

这是工作示例。

public class VisibleItemViewModel : INotifyPropertyChanged {

    ///here you can write the logic to filter and populate Listbox based on 
    //selection changed of combobox

    public VisibleItemViewModel() {
        populateCombo();
        getDataList();
    }
    private VisibleItem selectedItem;
    public VisibleItem SelectedItem {
        get { return selectedItem; }
        set {

            selectedItem = value;
            OnPropertyChanged("SelectedItem");
        }
    }
    private int selectedComboIndex;

    public int SelectedComboIndex {
        get { return selectedComboIndex; }
        set {
            selectedComboIndex = value;
            //your filter logic goes here
            selectedItemChanged(selectedComboIndex);
            OnPropertyChanged("SelectedComboIndex");
        }
    }
    public ObservableCollection<int> ComboBoxList { get; set; }
    private void populateCombo() {
        ComboBoxList = new ObservableCollection<int>();
        for (int i = 1; i <= 6; i++) {
            ComboBoxList.Add(i);
        }
    }
    private ObservableCollection<VisibleItem> visibleItems;

    public ObservableCollection<VisibleItem> VisibleItems {
        get ;
        set;
    }
    private void selectedItemChanged(int item) {
        ///your filter logic goes here
      VisibleItems =new ObservableCollection<VisibleItem>(visibleItems.Take(item));
        OnPropertyChanged("VisibleItems");
    }
    private ObservableCollection<VisibleItem> getDataList() {
        VisibleItem vItem;
        visibleItems = new ObservableCollection<VisibleItem>();
        for (var k = 1; k < 10; k++) {
            vItem = new VisibleItem();
            vItem.Group = "Group " + k;
            vItem.Name = "Item Name  " + k;
            vItem.PictureID = k;
            vItem.SomeDetail = "Detail  " + k;
            vItem.Info = "Info  " + k;
            vItem.GHeaderName = "GHeaderName " + k;
            vItem.Info = "Info  " + k;
            // vItem.Class
            visibleItems.Add(vItem);
        }
        return visibleItems;
    }



    public event PropertyChangedEventHandler PropertyChanged;
    public void OnPropertyChanged(string propertyName) {
        if (PropertyChanged != null) {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

您可以将集合绑定到 xaml 中的组合框。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <ComboBox Grid.Row="0" ItemsSource="{Binding ComboBoxList}" SelectedItem="{Binding SelectedComboIndex,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
    <ListBox Grid.Row="1" 
             ItemsSource="{Binding VisibleItems}" 
             DisplayMemberPath="Name"
             SelectedItem="{Binding SelectedItem,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
</Grid>

我已经发布了一个工作示例