如何将ObservableCollection绑定到ListBox?

时间:2016-03-02 11:59:37

标签: c# wpf listbox

我有课

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

我希望从集合到ListBox的绑定数据有三列:ID,Name,Duration

初​​始化

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>

我做错了什么?

1 个答案:

答案 0 :(得分:1)

如果不设置DataContext,则无法从viewmodel发送数据进行查看。 DataContext就像ViewModelView之间的渠道或桥梁。

此代码设置DataContext

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

让我们看看工作示例:

您的ViewModel:

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>

There are many ways to set DataContext