In XAML based apps i.e. Silverlight, WPF, Windows store and windows phone apps there are many ways to bind objects or collections with control properties.
In order to bind it with textbox (suppose), one way is to set the DataContext property of the container i.e. Grid, StackPanel etc. and bind it using {Binding Path=PropertyName} where property name could be any property of the object binded with the DataContext property of the container. There are many ways of binding shown in my other article https://ovaismehboob.wordpress.com/2011/06/20/wpf-data-binding-options/
Although there are many other ways of binding, but for example if you want to update the control property when the object value modifies real problem comes in. In order to achieve this we can implement MVVM pattern. MVVM works with Model, View and ViewModel. Where a Model represents a domain model, View contains controls whereas the ViewModel is the model of a view and contains the properties, events, etc. particularly to the View. In order to handle this scenario, we can create a ViewModel in this below example and then bind it to the view in the later stage. To notifying UI thread we have to implement INotifyPropertyChanged interface.
public
class
TestViewModel: INotifyPropertyChanged
{
public RegistrationViewModel()
{
attributes = new
ObservableCollection<String>();
}
public
event
PropertyChangedEventHandler PropertyChanged;
string _name;
public
string Name
{
set { this._name = value;
NotifyChangeEvent(“Name”);
}
get { return _name; }
}
ObservableCollection<String> _attributes;
public
ObservableCollection<String> Attributes
{
set
{
This._attributes = value;
NotifyChangeEvent(“Attributes”);
}
get { return _attributes; }
}
void NotifyChangeEvent(string propName)
{
if (PropertyChanged != null)
PropertyChanged(this, new
PropertyChangedEventArgs(propName));
}
}
In the above code you can see I have two properties Name and Attributes. While setting Name value I am calling NotifyChangeEvent that checks the event and call invoke if it’s not null.
You may notice that the Attributes collection is ObservableCollection and not List, etc. if we set it to List, etc. it does not notifies any modification happens to the collection. http://msdn.microsoft.com/en-us/library/ms668604(v=vs.110).aspx
Now let suppose you have a form containing two textboxes and a list.
XAML as follows
<Grid Name=”grdreg” Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”>
<TextBox
Name=”txtBox” HorizontalAlignment=”Left” Height=”124″ Margin=”161,128,0,0″ TextWrapping=”Wrap”
VerticalAlignment=”Top” Width=”297″/>
<TextBox Name=”txtBox2″ HorizontalAlignment=”Left” Height=”142″ Margin=”161,276,0,0″ TextWrapping=”Wrap” Text=”{Binding Path=Name}” VerticalAlignment=”Top” Width=”423″/>
<Button Content=”Update” HorizontalAlignment=”Left” Height=”130″ Margin=”475,125,0,0″ VerticalAlignment=”Top” Width=”112″ Click=”Button_Click”/>
<ListBox ItemsSource=”{Binding Path=Attributes}”
HorizontalAlignment=”Left” Height=”290″ Margin=”616,128,0,0″ VerticalAlignment=”Top” Width=”159″/>
</Grid>
The first textbox in white is a TextBox control (txtBox) and the second in gray is also a TextBox control (txtBox2), whereas the right one in vertical is ListBox. In the XAML, you can bind any object property like {Binding Path=PropertyName} and in this snippet the txtBox is binded with Name property like {Binding Path=Name}.
For list control you can set ItemsSource property and use the same {Binding Path=PropertyName} to bind with specific collection property. Now how does the runtime know which object property has to be mapped. This can be done by specifying the DataContext property of the container where all controls reside and this I have set it in the code-behind (You can also set in XAML)
Code behind
public
sealed
partial
class
BlankPage1 : Page
{
RegistrationViewModel viewModel;
public BlankPage1()
{
this.InitializeComponent();
viewModel= new
RegistrationViewModel();
grdreg.DataContext = viewModel;
}
private
void Button_Click(object sender, RoutedEventArgs e)
{
viewModel.Name = txtBox.Text;
viewModel.Attributes.Add(txtBox.Text);
}
}
}
On page constructor I am initializing the viewModel and setting it to the DataContext property of grid container “grdreg”.
That’s all…
you can start modifying values of the view model, UI will be updated accordingly.
Tip: In case you have apps for different platforms namely Silverlight, windows phone and windows store apps etc. you can use Portable Class Library and place all your view models there. http://msdn.microsoft.com/en-us/library/gg597391(v=vs.110).aspx
Ovais TechBlogs 