Why isn't this data binding working?

Question

So I'm brand new to WPF data binding, and it is.. complicated. At this point, I'm trying to just create a list of premade test items and have it displayed in a listbox with a data template when I press a button. After hours of puzzling through tutorials and MSDN this is the best I could come up with.

The data item I want to make a list from:

class ListingItem
{
    private string title;
    private string user;
    private string category;

    //Dummy constructor for test purposes
    public ListingItem()
    {
        title = "TestTitle";
        user = "TestUser";
        category = "TestCatagory";
    }
}

The quick and dirty list creator:

class ListMaker
{
    public static List<ListingItem> getListing()
    {
        List<ListingItem> listing = new List<ListingItem>();
        for(int i = 0; i <100; i++)
        {
            listing.Add(new ListingItem());
        }
        return listing;
    }
}

The XAML of the list itself:

<ListBox x:Name="Listing">
<ListBox.ItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Vertical">
            <StackPanel Orientation="Horizontal">
                <TextBlock Foreground="Gray" Margin="25,0,0,0" Text="{Binding user}"/>
                <TextBlock Foreground="Gray" Margin="25,0,0,0" Text="{Binding category}"/>
            </StackPanel>
            <TextBlock Foreground="Black" Width="270" TextWrapping="Wrap" Text="{Binding title}"/>
        </StackPanel>
    </DataTemplate>
</ListBox.ItemTemplate>

And finally, the button click event which is SUPPOSED to make the magic happen:

private void TabClickEvent(object sender, RoutedEventArgs e)
    {
        Listing.DataContext = RedditScanner.getListing();
    }

Problem is, obviously, the magic is not happening. No errors or anything so easy, I just press that button and dont see any change to the list box. Any help with this?

score 2 · Answer 1 · edited May 23 '17 at 12:05

2

You cannot bind to private fields. Not even to public fields I think.

Use properties:

class ListingItem
{
    //private string title;
    //private string user;
    //private string category;

    public string Title { get; set; }
    public string User { get; set; }
    public string Category { get; set; }

    //Dummy constructor for test purposes
    public ListingItem()
    {
        Title = "TestTitle";
        User = "TestUser";
        Category = "TestCatagory";
    }
}

And for full databinding you would have to implement INotifyPropertyChanged on ListingItem.

the magic is not happening. No errors or anything so easy,

Keep an eye on the Output Window during execution. Binding errors are reported.

edited May 23 '17 at 12:05

Community

1
1

answered Aug 23 '13 at 22:42

H H

263,252
30
330
514

Do I still need to implement INotifyPropertyChanged if this data is not going to auto update in the background? For other reasons, I need to drive updates to content through intentional refreshes. – StolenKitten Aug 26 '13 at 17:52
No, INPC is not always required. – H H Aug 26 '13 at 19:15
This still isn't working, and there are no errors I can see in the output window. – StolenKitten Aug 26 '13 at 21:52

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

Made some minor changes to your code as explained below.


class ListingItem
    {
        public  string title { get; set; }
        public string user { get; set; }
        public string category { get; set; }
    
        //Dummy constructor for test purposes
        public ListingItem()
        {
            title = "TestTitle";
            user = "TestUser";
            category = "TestCatagory";
        }
    }

The list item class, I changed the title, user and category to properties (get;set;). I also needed to make them public so they could be accessed through the binding.


    class ListMaker
    {
        public static List getListing()
        {
            List listing = new List();
            for (int i = 0; i < 100; i++)
            {
                listing.Add(new ListingItem());
            }
            return listing;
        }
    }

No changes to your ListMaker class


    public class CommandHandler : ICommand
    {
        private Action _action;
        private bool _canExecute;
        public CommandHandler(Action action, bool canExecute=true)
        {
            _action = action;
            _canExecute = canExecute;
        }

        public bool CanExecute(object parameter)
        {
            return _canExecute;
        }

        public event EventHandler CanExecuteChanged;

        public void Execute(object parameter)
        {
            _action();
        }
    }

I introduced a new class to be able to bind the button. This kind of class if relatively common


<Window x:Class="SimpleDatabinding.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:viewmodel="clr-namespace:SimpleDatabinding"
        Title="MainWindow" Height="350" Width="525">
    
    <Window.DataContext>
        <viewmodel:MainWindowViewModel/>
    </Window.DataContext>

    <Grid>
        <DockPanel>
            <Button Command="{Binding FillListCommand}" DockPanel.Dock="Top">Fill List</Button>

            <ListBox ItemsSource="{Binding Listing}" DockPanel.Dock="Top">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Vertical">
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Foreground="Gray" Margin="25,0,0,0" Text="{Binding user}"/>
                                <TextBlock Foreground="Gray" Margin="25,0,0,0" Text="{Binding category}"/>
                            </StackPanel>
                            <TextBlock Foreground="Black" Width="270" TextWrapping="Wrap" Text="{Binding title}"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </DockPanel>
    </Grid>
</Window>

Note the addition of xmlns:viewmodel="clr-namespace:SimpleDatabinding". SimpleDatabinding was the name of the project. It's used to locate the view model in the datacontext below.
The Window.DataContext binds the WPF page to the view model. I called my class MainWindowViewModel (see below). This will automatically create an instance of the view model and bind it to the window.
I introduced a button to click. It's bound to a command FillListCommand. I'll define that in the view model below.
I updated the ItemsSource on the ListBox to be bound to the Listing property.
Other than that, I think it's the same.



class MainWindowViewModel : INotifyPropertyChanged 
{
    public event PropertyChangedEventHandler PropertyChanged;

    public List Listing { get; set; }
    public CommandHandler FillListCommand { get; set; }

    public MainWindowViewModel()
    {
        FillListCommand = new CommandHandler(DoFillList);
    }

    public void DoFillList()
    {
        Listing = ListMaker.getListing();
        ProperyHasChanged("Listing");
    }

    private void ProperyHasChanged(string propertyName)
    {
        if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
   
}

Finally in the viewmodel class, I implemented the INotifyPropertyChanged interface. This is the mechanism to notify the UI that a value on your view model has changed. In most implementations, this is wrapped in some sort of ViewModel base class but I left it in so you could see it.
As above, I converted the Listing variable to a public property (get;set;) so it could be accessed through the binding.
I created a CommandHandler property called FillListCommand. This uses the class above. The button is bound to this variable. The constructor of the view model initializes and points it to the function to be called when the button is clicked.
Finally, in the DoFillList function, I initialize Listing as you had it but I also use the notification to let the UI know it's changed.

Sorry about all the writing. Hope this is somewhat helpful. I don't think it's too different from what you had.

Which parts of this can I cut out if I don't want automatic updates to the UI when data changes? The nature of the app I'm working on is that the UI should be refreshed through manual user action only. — StolenKitten, Aug 26 '13 at 20:16

score 0 · Answer 3 · answered Aug 23 '13 at 23:37

0

Don't forget to decorate your data members and service methods with the appropriate tags.

These short videos are great for learning WCF: http://channel9.msdn.com/Shows/Endpoint?sort=rating#tab_sortBy_rating

answered Aug 23 '13 at 23:37

AnotherDeveloper

1,242
1
15
36

score 0 · Accepted Answer · answered Aug 26 '13 at 23:01

0

There were only 2 problems with my code, which I found:

The properties were set as private in ListingItem, which Henk Holterman caught (+1ed)
I wasn't setting ItemSource on the list anywhere.

I didn't need to do any of the other stuff Peter Trenery mentioned at all.

answered Aug 26 '13 at 23:01

StolenKitten

611
3
6
12

Fair enough. I made the assumption you were heading down the MVVM path so you'd like to see a more complete example. Good luck with your code. – Peter Trenery Aug 27 '13 at 16:20

Why isn't this data binding working?

4 Answers4