WPF ListBox bind ItemsSource with MVVM-light

Question

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: What else do I need to get the docs object into the Listbox ?

Solution 1

In my opinion you are binding your controls to wrong datacontect, check output window for erros. You might want to set datacontext of main window to your MainViewModel (in codebehind or similar). Also why do you create another instance for docs? It is useless.

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"});
}

Solution 2

Vidas is correct in that the DataContext of your Window is wrong, it needs to be your MainViewModel class.

Get rid of this:

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

And add this to the Window tag:

<Window DataContext="{StaticResource MainViewModel}">

And that should do it.

Solution 3

<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>

In the code behind

   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);
}