如何将可观察集合绑定到列表框

本文关键字：绑定 列表 集合 观察 | 更新日期: 2023-09-27 18:36:59

I have class 

public class Clip
{
        public string ID { get; set; }
        public string Name { get; set; }
        public int? Duration { get; set; }
}

和ObservableCollection 

public ObservableCollection<Clip> _clipsFound;
public ObservableCollection<Clip> collection
{
    get { return _clipsFound; }
    set
    {
        _clipsFound = value;
        OnPropertyChanged();
    }
}

当我这样做时调用OnPropertyChanged() 

_clipsFound = collection

我想用三列将数据从集合绑定到列表框：ID、名称、持续时间

初始化

ID = id;
collection = new ObservableCollection<Clip>();
_clipsFound = collection;
_clipsFound.Clear();
ICollection<Clip> ClipF = await Service.GetClips(ID);
ICollection<Clip> Clipcol = ClipF;
collection = new ObservableCollection<Clip>(Clipcol);

我尝试这样做，但它不起作用

<ListBox Grid.Row="2"  ItemsSource="{Binding collection}" BorderBrush="Transparent" >
    <ListBox.ItemTemplate>
        <DataTemplate DataType="ui:Clip">
                <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" 
                                                           Text="{Binding Title}" 
                                                           VerticalAlignment="Center" 
                                                           HorizontalAlignment="Left"
                                                           TextTrimming="CharacterEllipsis"
                                                           Foreground="#FF4F4F4F"
                                                           FontSize="12"
                                                           Margin="55 0 0 0"/>
                <TextBlock Grid.Column="1" 
                                                           Margin="0 0 45 0"
                                                           Text="{Binding Duration}"
                                                           VerticalAlignment="Center"
                                                           HorizontalAlignment="Right"
                                                           FontSize="11"
                                                           Foreground="#FF4F4F4F"/>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

我做错了什么？

如何将可观察集合绑定到列表框

如果不设置 DataContext，则无法将数据从视图模型发送到视图。 DataContext就像ViewModel和View之间的通道或桥梁。

此代码设置DataContext：

<Window.DataContext>
   <vm:MainWindowViewModel />        
</Window.DataContext>

让我们看一下工作示例：

您的视图模型：

public class MainWindowViewModel
{
   publicMainWindowViewModel
   {
       LoadData();
   }
   private void LoadData()
   {
      _clipsFound=new ObservableCollection<Clip>();
      for(int startIndex=0; startIndex<10; startIndex++)
      {
          collection.Add(new Clip(){ID=startIndex, Name="Bob", Duration=startIndex++});
      }
   }
   public ObservableCollection<Clip> _clipsFound;
   public ObservableCollection<Clip> collection
     {
         get
         {
             return _clipsFound;
         }
         set
         {
             _clipsFound = value;      
         }
     }
}

您的 XAML：

<Window x:Class="DataGridSelectedItemsWpfApplication.MainWindow"
    ...The code omitted for the brevity...
    xmlns:vm="clr-namespace:DataGridSelectedItemsWpfApplication.ViewModel"
    Title="MainWindow" WindowStartupLocation="CenterScreen" Height="550" Width="525">
<Window.DataContext>
   <vm:MainWindowViewModel />        
</Window.DataContext>
<ListBox Grid.Row="2"  ItemsSource="{Binding collection}" BorderBrush="Transparent" >
    <ListBox.ItemTemplate>
        <DataTemplate DataType="ui:Clip">    
           <Grid>
             <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
             </Grid.ColumnDefinitions>    
             <TextBlock Text="{Binding ID}" VerticalAlignment="Center" HorizontalAlignment="Center"  FontSize="11" Margin="2" Foreground="#FF4F4F4F"/>
             <TextBlock Grid.Column="1" Margin="2" Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center"          TextTrimming="CharacterEllipsis" Foreground="#FF4F4F4F" FontSize="12"/>
             <TextBlock Grid.Column="2" Margin="2" Text="{Binding Duration}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="11" Foreground="#FF4F4F4F"/>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>    
</ListBox>
</Window>

有很多方法可以设置 DataContext。

相关文章：