0

Here I am putting my C# WPF code including 3 files (Each for 1 model of MVVM) + View Model code file (UI.xaml.cs). I am not able to get ListBox binded with my First Text box. Need your help. What I want is as soon as I enter Text in Textbox, it should be added in listBox.

I am beginner to WPF and MVMM. Sorry if code is not much professional. Your suggestions are always welcome.

Form.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel;


namespace MVVM.Models
{
    public class Form : INotifyPropertyChanged
    {
        public Form()
        {

        }

    #region Variables
    private String _Name;

    public String Name
    {
        get { return _Name; }
        set
        {
            _Name = value;
            OnPropertyChanged("Name");
        }
    }
    private String _colorBack;

    public String ColorBack
    {
        get { return _colorBack; }
        set
        {
            _colorBack = value;
            OnPropertyChanged("ColorBack");
        }
    }
    private String _colorFont;

    public String Color_Font
    {
        get { return _colorFont; }
        set
        {
            _colorFont = value;
            OnPropertyChanged("ColorFont");
        }
    } 
    #endregion

    #region INotifyPropertyChangedMembers
    public event PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;

        if (handler != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

        }
    } 
    #endregion
}

}

FormViewModel.cs

using MVVM.Models;
using MVVM.Views;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Collections.ObjectModel;

namespace MVVM.ViewModels
{
public class FormViewModel
{
    private Form _Form;
    private ObservableCollection<string> listItems = new ObservableCollection<string>();

    public FormViewModel()
    {
        _Form = new Form();
    }

    public Form Form
    {
        get { return _Form; }
    }

    public ObservableCollection<string> notifyChangedList()
    {
        listItems.Add("XYZ");
        return listItems;
    }


}

}

UI.xaml

<Window x:Class="MVVM.Views.UI"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:custom="clr-namespace:MVVM.ViewModels"
    Title="UI" Height="300" Width="300">
<Grid>
    <TextBox TextWrapping="Wrap" Text="{Binding Name}" Margin="20,15,160,225" />


    <TextBox TextWrapping="Wrap" Text="Back Color" Margin="20,73,195,167" />
    <TextBox TextWrapping="Wrap" Text="Font Color" Margin="20,122,195,118"/>
    <ListBox Name="listBox" ItemsSource="{Binding listItems}"  HorizontalAlignment="Left" Margin="156,42,0,143" Height="85" Width="93" />
    <Button Content="Finish" HorizontalAlignment="Left" Margin="112,163,0,0" VerticalAlignment="Top" Width="75"/>

</Grid>

UI.xaml.cs

using MVVM.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace MVVM.Views

{

public partial class UI : Window
{
    public UI()
    {
        InitializeComponent();
        DataContext = new MVVM.ViewModels.FormViewModel();

    }
}

}

Pratik Shah
  • 89
  • 3
  • 10
  • When do you want the item to be added? At each key stroke? – Emond Jul 25 '14 at 09:55
  • note: you should be using RowDefinitions & ColumnDefinitions to do layout instead of using margins, this is a simple tutorial - http://www.wpf-tutorial.com/panels/grid-rows-and-columns/ – AwkwardCoder Jul 25 '14 at 10:07
  • 1
    (A) A ViewModel should not have dependencies regarding the implementation of the View (the View has/can have dependencies on the ViewModel, though), thus your *Form* property in your ViewModel indicates bad design. Regarding your binding `Text="{Binding Name}"`: I can't see a *Name* property anywhere in your ViewModel... –  Jul 25 '14 at 10:07
  • 1
    agreed there seems to a be lot of confussion between the View, ViewModel and Model – AwkwardCoder Jul 25 '14 at 10:09
  • Okay, i think i got slightly confused about how you used the term "Form". "Form" is actually your model, which has a "Name" property. Do not call your model "Form" -- a form is a GUI element (i.e. a window or a dialog) and thus is part of the view and should NOT be used as the name of a model (or viewmodel). Call your model according to what data this model represents (i.e., PersonModel, CarModel, WhateverModel). Assuming you called your model type MyModel and you have a property `public MyModel Model {...}` in your ViewModel, then you could do the binding like `Text="{Binding Model.Name}"` –  Jul 25 '14 at 10:22

1 Answers1

0

Okay let me help you fix it.

Your text box binding is Name, but in the FormViewModel there is no property name Name.

<TextBox TextWrapping="Wrap" Text="{Binding Name}" Margin="20,15,160,225" />

So you need to add this property in the FormViewModel class.

private string _name;
public string Name
{
    get { return _name; }
    set
    {
        _name = value;
    }
}

When you finish typing in the text box (change focus), the Name's setter will be called. So you can add the listItems collection inside the setter.

    set
    {
        _name = value;
        listItems.Add(_name);
    }

If you really want to be notified when text box is pressed (on key stroke), you need to implement custom dependency property, not just a property. This post explains it how.

PS: Let me know if this is not working, carefull of typo, code in browser.

Community
  • 1
  • 1
Yuliam Chandra
  • 14,494
  • 12
  • 52
  • 67