WPF ListBox将ItemsSource与MVVM灯光绑定

本文关键字:绑定 MVVM ListBox ItemsSource WPF | 更新日期: 2023-09-27 18:26:53

XAML

<Window x:Class="Html5Mapper.Mapper.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:wpt="http://schemas.xceed.com/wpf/xaml/toolkit"
    Title="HTML mapper" Height="300" Width="600" >
<Window.DataContext>
    <Binding Path="Main" Source="{StaticResource Locator}"/>
</Window.DataContext>
<ListBox Name="lbFiles" ItemsSource="{Binding Filescollection, Mode=OneWay}" Width="240" Height="220">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid Margin="0,2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="100" />
                    </Grid.ColumnDefinitions>
                    <Image Source="HTML.png" Height="40" Width="32" />
                    <TextBlock Grid.Column="1" Text="{Binding Name}" />
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

MainViewModel.cs

public ObservableCollection<Files> Filescollection { get; set; }    
public MainViewModel()
{
    this.Filescollection = new ObservableCollection<Files>();
    SelectFilesAction();
}
private void SelectFilesAction()
{
   this.Filescollection.Add(new Files { Name = "index.html", Path = "C:''Files"});
   //lbFiles.ItemsSource = docs;
}

Q:我还需要什么才能将docs对象放入Listbox?

WPF ListBox将ItemsSource与MVVM灯光绑定

在我看来,您将控件绑定到错误的数据冲突,请检查输出窗口中是否存在错误。您可能想要将主窗口的datacontext设置为MainViewModel(在codeehind或类似的代码中)。为什么还要为文档创建另一个实例?它是无用的。

public ObservableCollection<Files> Filescollection {get;set;}
public MainViewModel()
{
    this.Filescollection = new ObservableCollection<Files>();
    SelectFilesAction();
}
private void SelectFilesAction()
{
   Filescollection.Add(new Files { Name = "index.html", Path = "C:''Files"});
}

Vidas是正确的,因为Window的DataContext是错误的,它需要是MainViewModel类。

摆脱这个:

<Window.DataContext>
    <Binding Path="Main" Source="{StaticResource Locator}"/>
</Window.DataContext>

并将其添加到Window标签:

<Window DataContext="{StaticResource MainViewModel}">

这样就可以了。

<UserControl x:Class="RetailPOS.View.Usercontrols.MainWindow.Products"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             mc:Ignorable="d" 
             xmlns:ctrl="clr-namespace:RetailPOS.View.Usercontrols.MainWindow"
             d:DesignHeight="200" d:DesignWidth="490" **DataContext="{Binding Source={StaticResource Locator}, Path=CategoryVM}"**
             xmlns:my="clr-namespace:WpfLab.Controls;assembly=WpfLab.Controls">
    <UserControl.Resources>
    </UserControl.Resources>
    <Grid Width="490" Height="360">
        <ListBox Name="LstProduct" ItemsSource="{Binding LstProduct}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Horizontal" Margin="0" Height="Auto" Width="490" >
                    </WrapPanel>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Button Margin="1" Content="{Binding Name}" Height="53" Background="{Binding Color}" HorizontalAlignment="Right" Width="79" 
                            Command="{Binding DataContext.ShowProductCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}}" 
                            CommandParameter="{Binding}">
                    </Button>                 
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</UserControl>

在后面的代码中

   private ObservableCollection<ProductDTO> _lstProduct;
   public ObservableCollection<ProductDTO> LstProduct
        {
            get { return _lstProduct; }
            set
            {
                _lstProduct = value;
                RaisePropertyChanged("LstProduct");
            }
        }
   /// <summary>
    /// Get all Commonly Used Products
    /// </summary>
    /// <returns>returns list of all Commonly Used  products present in database</returns>
private void FillCommonProducts()
{
    LstProduct = new ObservableCollection<ProductDTO>(from item in ServiceFactory.ServiceClient.GetCommonProduct() 
                               select item);
}