Binding object to window textboxes in WPF - wpf

I have a class named Data with some public members: Name, Age, Address.
I have also window with text boxes Name, Age, Address.
The Data object can change any time.
How can I bind the Data object to the text boxes and follow after object changes?
I know there is INotifyPropertyChanged and "dependency-properties" but I do not know how to use them.
Edit
public class MyData : INotifyPropertyChanged
{
private string _name;
public string Name
{
get
{
return _name;
}
set
{
if (_name != value)
{
_name = value;
OnPropertyChnged("Name");
}
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string name)
{
ProppertyChangedEventHandler handler = PropertyChanged;
if (handler != null) handler(this, new PropertyChangedEventArgs(name));
}
}
XAML code:
xmlns:myApp="clr-namespace:MyApp"
<Window.Resources><myApp:MyData x:key = data/></WindowResources>
<TextBox><TextBox.Text><Binding Source="{StaticResource data}" Path="Name" UpdateSourceTrigger="PropertyChanged"/></TextBox.Text></TextBox>
class OtherClass
{
private MyData data;
//the window that have the binding textbox
private MyWindow window;
public OtherClass()
{
data = new MyData();
data.Name = "new name"
window = new MyWindow();
window.show();
}
}

This link from MSDN explains it well.
MSDN link is dead, adding link to a similar article.
When your class property is changed, your property should raise a OnPropertyChanged event with the name of the property so that the View knows to refresh it's binding.
public String Name
{
get { return _name; }
set
{
if (_name != value)
{
_name = value;
this.OnPropertyChanged("Name");
}
}
}
And your textbox should have a binding such as:
<TextBox Text="{Binding Name}"/>
I have a ViewModelBase class which is where I have implemented my OnPropertyChandedEvent for all derived models to call:
/// <summary>
/// An event for when a property has changed.
/// </summary>
public event PropertyChangedEventHandler PropertyChanged;
/// <summary>
/// Virtual method to call the Property Changed method
/// </summary>
/// <param name="propertyName">The name of the property which has changed.</param>
protected virtual void OnPropertyChanged(String propertyName)
{
if (this.PropertyChanged != null)
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}

Let's the Data class implements INotifyPropertyChanged . Raise the event when someone change the property value on the instances of Data. Then set the proper DataContext to your UI, and bind the single ui element as for example:
<TextBox Text="{Binding Age}"/>

Related

PropertyChanged remains null even if the property has been changed

I am struggling with this for a while and I cannot figure it out. I have a button and a textBox. The textBox is linked to a property named: MessageDisplay. I want to be able to access this property and update the textBox in several places. Sadly, the PropertyChanged is null. The weird thing is that if I copy/paste the MessageDisplayModel class into the *MessageViewModel * class, it works ...
here is my code :
XAMLfile :
<Grid>
<Button Command="{Binding DisplayTextCommand}" Name="DisplayTextCommand" Margin="53,72,544.6,286" Width="Auto">Push</Button>
<TextBox Name="MessageDisplay" Text="{Binding MessageDisplay, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" />
</Grid>
MessageDisplayModel file
public class MessageDisplayModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private string _message;
public string MessageDisplay
{
get { return _message; }
set
{
this._message = value;
this.OnPropertyChanged("MessageDisplay");
}
}
public void UpdateTextBox(string output)
{
MessageDisplay = output;
}
protected virtual void OnPropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = this.PropertyChanged;
if (handler != null)
{
var e = new PropertyChangedEventArgs(propertyName);
handler(this, e);
}
}
}//class
MessageViewModel file:
public class MessageViewModel
{
private ICommand _testCommand;
public MessageDisplayModel MessageDisplaySmt = new MessageDisplayModel();
public ICommand DisplayTextCommand
{
get
{
return new DelegateCommand(DisplayMessage);
}
set
{
if (_testCommand == value) return;
_testCommand = value;
}
}
public void DisplayMessage()
{
MessageDisplaySmt.UpdateTextBox("Successfuly downloaded");
}
}//class
MainWindow file
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
MessageDisplay.DataContext = new MessageDisplayModel();
DisplayTextCommand.DataContext = new MessageViewModel();
}
}//class
I update the MessageDisplay property by using the method UpdateTextBox(string). I call this method on the click of the button. When debugging the property gets updated but when time comes to notify the UI that the property has changed, PropertyChangedEventHandler PropertyChanged has its value null ... But if I write something in the textBox, the PropertyChangedEventHandler PropertyChanged gets changed and isn't null anymore. All I want is to be able to change the textBox's property whenever I want and from anywhere I want to.
Thank you
You are using two different instances of MessageDisplayModel. You must use a shared instance.
Also the DisplayTextCommand is implemented "wrong". The set method is redundant as the property's get always returns a new instance of the ICommand.
MessageViewModel.cs
public class MessageViewModel
{
pulic MessageViewModel()
{
}
pulic MessageViewModel(MessageDisplayViewModel messageDisplayViewModel)
{
this.MessageDisplaySmt = messageDisplayViewModel;
}
public void DisplayMessage()
{
this.MessageDisplaySmt.UpdateTextBox("Successfuly downloaded");
}
public MessageDisplayViewModel MessageDisplaySmt { get; set; }
public ICommand DisplayTextCommand { get => new DelegateCommand(DisplayMessage); }
}
MainWindow.xaml.cs
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
// Alternatively use XAML to set the DataContext (see MainWindow.xaml). Would require a parameterless constructor.
this.DataContext = new MessageViewModel(new MessageDisplayViewModel());
}
}
MainWindow.xaml
<Window>
<!--
Alternative DataContext declaration using XAML instead of C#.
Requires a parameterless constructor for both view model objects.
-->
<Window.DataContext>
<MessageViewModel>
<MessageViewModel.MessageDisplaySmt>
<MessageDisplayViewModel />
</MessageViewModel.MessageDisplaySmt>
</MessageViewModel>
</Window.DataContext>
<StackPanel>
<Button Command="{Binding DisplayTextCommand}"
Content="Push" />
<TextBox Text="{Binding MessageDisplaySmt.MessageDisplay}" />
</StackPanel>
</Window>

How to update observable collection on property change and also store it on every change?

I have dynamic listbox contains textbox to display list items and so I can edit listbox item. My application setting file contains string collection which I want to bind for that listbox. I also want to update that setting files on every change of listbox item, I created class which implements INotifyProprtyChanged. I have converted string collection from settings file into observable collection of custom type which has string property. I bind textbox to property of that custom class and update source property on property change. I want to update observable collection as well. and that updates my app setting file as well. Please help me on this. Any help would be really appreciated. My code:
public class WindowViewModel : INotifyPropertyChanged
{
private ObservableCollection<UrlModel> customcollection;
public ObservableCollection<UrlModel> CustomCollection
{
get { return customcollection; }
set
{
customcollection = value;
NotifyPropertyChanged("CustomCollection");
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void NotifyPropertyChanged(string property)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
public WindowViewModel()
{
List<string> customlist = Properties.Settings.Default.CustomList.Cast<string>().ToList();
List<UrlModel> urllist = new List<UrlModel>();
urllist = customlist.Select(item => new UrlModel() { urlString = item }).ToList();
CustomCollection = new ObservableCollection<UrlModel>(urllist);
}
}
public class UrlModel : INotifyPropertyChanged
{
private string url;
public string urlString
{
get { return url; }
set
{
url = value;
NotifyPropertyChanged("urlString");
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void NotifyPropertyChanged(string property)
{
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
ViewModel = new WindowViewModel();
ListTwo.ItemsSource = ViewModel.CustomCollection;
}
private WindowViewModel viewModel;
public WindowViewModel ViewModel
{
get { return viewModel; }
set{
viewModel = value;
DataContext = value;
}
}
}
}
Add property changed event handler for each url when inserting into ObservableCollection
public WindowViewModel()
{
List<string> customlist = Properties.Settings.Default.CustomList.Cast<string>().ToList();
List<UrlModel> urllist = new List<UrlModel>();
urllist = customlist.Select(item => new UrlModel() { urlString = item }).ToList();
CustomCollection = new ObservableCollection<UrlModel>(urllist);
foreach(var model in CustomCollection)
{
model.PropertyChaged += SettingsUpdater; //Settings update fucntion
}
}
A naive implementation of SettingsUpdater would just update the whole list of urls in settings whenever one of them changes.
I believe you are using data template to make your listbox editable. If that is the case, while binding the text, include Text="{Binding urlString,UpdateSourceTrigger=PropertyChanged}" in the Xaml code.
<ListBox.ItemTemplate>
<DataTemplate>
<TextBox Name="EditableText" Text="{Binding urlString,UpdateSourceTrigger=PropertyChanged}"/>
</DataTemplate>
</ListBox.ItemTemplate>

How do I set a TextBlock to a property value?

I used this tutorial to build a custom control. Now, I'd like to add a simple message (a textblock) to the user control to give the user some guidance. I think I can add a public property, like FileName in the tutorial, but how do I wire up the textblock's Text property to the property in the code behind? And then make sure the textblock message updates if the property changes.
I like the idea of being able to set the message in code, via a property, because I will likely have multiple controls of this custom control type on a page. I'm just a bit stumped on wiring it up.
Thanks!
This would be your code behind, which implements INotifyPropertyChanged:
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window, INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private string _fileName;
/// <summary>
/// Get/Set the FileName property. Raises property changed event.
/// </summary>
public string FileName
{
get { return _fileName; }
set
{
if (_fileName != value)
{
_fileName = value;
RaisePropertyChanged("FileName");
}
}
}
public MainWindow()
{
DataContext = this;
FileName = "Testing.txt";
}
private void RaisePropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
This would be your XAML that binds to the property:
<TextBlock Text="{Binding FileName}" />
EDIT:
Added DataContext = this; i don't normally bind to the code behind (I use MVVM).

Adding\Removing from ListView but not reflecting in UI

I have two List<ColumnClass>. one for left side listview and another for right side list view. these listviews are in a pop up box. I am modifying the List of both the Listviews and again assigning that to the Listview's ItemsSource. But this doesn't reflect in the UI immediatly. When I close the popup and open again it reflects the changes. What am I missing?
You should replace the List<T> with ObservableCollection<T>, ObservableCollections will update your ListView whenever an Item is removed, If you are just modifing properties your ColumnClass make sure your ColumnClass implements INotifyPropertyChanged this will allow the UI to update when a property changes.
Example:
Code:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
MyColumns.Add(new ColumnClass { Name = "Column1" });
MyColumns.Add(new ColumnClass { Name = "Column2" });
MyColumns.Add(new ColumnClass { Name = "Column3" });
}
private ObservableCollection<ColumnClass> _myColumns = new ObservableCollection<ColumnClass>();
public ObservableCollection<ColumnClass> MyColumns
{
get { return _myColumns; }
set { _myColumns = value; }
}
}
xaml:
<Window x:Class="WpfApplication8.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WpfApplication8" Height="368" Width="486" Name="UI" >
<Grid>
<ListView ItemsSource="{Binding ElementName=UI, Path=MyColumns}" DisplayMemberPath="Name" />
</Grid>
</Window>
Model:
public class ColumnClass : INotifyPropertyChanged
{
private string _name;
public string Name
{
get { return _name; }
set { _name = value; NotifyPropertyChanged("Name"); }
}
public event PropertyChangedEventHandler PropertyChanged;
/// <summary>
/// Notifies the property changed.
/// </summary>
/// <param name="property">The info.</param>
public void NotifyPropertyChanged(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
}
You should change List<T> to ObservableCollection<T> or BindingList<T>.
Reason, List doesnot implement INotifyPropertyChanged.

Update text in StatusBar in wpf using C#

I have a TextBox in StatusBar in wpf which I want to update.
I have a list of files in ListBox. On each file I would be doing some operation by calling say method ProcessFile(). So whenever the file processing is completed I want to show that file's name in the StatusBar text.
I have tried something like this:
private void button_Click(object sender, RoutedEventArgs e)
{
statusBar.Visibility = Visibility.Visible;
DispatcherFrame frame = new DispatcherFrame();
Dispatcher.CurrentDispatcher.BeginInvoke(DispatcherPriority.Background, new DispatcherOperationCallback(TimeConsumingMethod), frame);
Dispatcher.PushFrame(frame);
statusBar.Visibility = Visibility.Collapsed;
}
public object TimeConsumingMethod(Object arg)
{
((DispatcherFrame)arg).Continue = false;
foreach (string fileName in destinationFilesList.Items)
{
txtStatus.Text = fileName.ToString();
//Assume that each process takes some time to complete
System.Threading.Thread.Sleep(1000);
}
return null;
}
But I can only see the last file's name in the StatusBar. What's wrong with the code? How can I correct it?
There's more ways to do this.
Set content directly from code
You need give name to the TextBox so that you can access it's content:
XAML
<TextBox x:Name="myTextBox" />
C#
...
ProcessFile(someFileName);
myTextBox.Text = someFileName;
Use data binding
You need to create some object and set it as DataContext to the TextBox or some WPF element that contain that text box (status bar, window, ...).
XAML:
<TextBox Text="{Binding Path=ProcessedFileName}" />
C#
public MyClass : INotifyPropertyChanged
{
public string ProcessedFileName {get; set;}
public void ProcessFile(string someFileName)
{
// Processing file code here
// When done processing, set file name to property
ProcessedFileName = someFileName;
OnPropertyChanged("ProcessedFileName");
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
For more information on data binding see Data Binding Overview
When you are using a ViewModel, i would define a Property "ProcessedFile" in your ViewModel and bind the Textbox of your StatusBar to the Property.
Every time you processed a file i would set the Property "ProcessedFile" to the name of the file.
HereĀ“s some code for the ViewModel.
public class ViewModel : INotifyPropertyChanged {
private string _processedFile;
public string ProcessedFile {
get {
return _processedFile;
}
set {
if (_processedFile != value) {
_processedFile = value;
if (PropertyChanged != null) {
PropertyChanged(this, new PropertyChangedEventArgs("ProcessedFile"));
}
}
}
}
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
#endregion
public void ProcessFile() {
// Process the file
ProcessedFile = //Set the Property to the processed file
}
}
Heres the XAML to bind the TextBox to the Property. (I assume that the ViewModel is set as DataContext for the TextBox)
<TextBox Text="{Binding ProcessedFile, Mode=OneWay}"/>

Resources