Dec 12, 2005
In this post I will show you how to implement a dialog box using data binding. While this may seem like a straightforward task at first glance, when using data binding it can be tricky to get the “OK” button of a dialog to commit the user’s changes and the “Cancel” button to discard them. One possible approach is to allow the bindings to update the data source as the user is typing information into the dialog box, then undo the work done by the bindings if the…
read more
Nov 30, 2005
The master-detail scenario with more than 2 levels is very common, and we made sure we have good support for it in WPF. I will show in this post three ways to sync selection of three ListBoxes, each displaying a different level of a hierarchy of data. In this sample, the first ListBox displays a list of mountain ski resorts. When the user selects a ski resort, the second ListBox gets updated with several lifts from that mountain. By selecting a particular lift, the third ListBox gets updated…
read more
Nov 19, 2005
In the simplest master-detail scenario, clicking a particular item of an ItemsControl causes the details about that item to be displayed in another control. For example, an application may display a list of customer names in a ListBox, and clicking a particular customer causes TextBlocks to be updated with the address, phone number and date of birth of that customer. In this post I will use a data source with the planets of the solar system: clicking on the name of a planet in the ListBox causes its…
read more
Nov 11, 2005
I will show you two ways of syncing the selection of two data bound ListBoxes. In the first solution, I will create a custom view over the collection and bind both ListBoxes to it. Views track the current item of their underlying collection, and allow us to sort, group and filter their items. CollectionViewSource is a new class introduced in September CTP that makes it possible to create a custom view in markup. Because the custom view created tracks the current item of the collection, and currency and…
read more
Nov 01, 2005
A very simple bar graph can be created by combining Avalon’s styling and templating features with a data bound ItemsControl. An ItemsControl is simply a control that displays a list of items. Those items can be anything you want: people, numbers, controls, and so on. If you template each item of an ItemsControl to be a rectangle whose height is bound to numerical data, you have a data bound bar graph. The data source for this sample is a class with a property called ValueCollection of type ObservableCollection….
read more
Oct 22, 2005
I will show in this sample two ways to change the layout of an ItemsControl. In response to a comment on my previous post, this sample uses XmlDataProvider, which allows binding to XML data. The easiest way to change the layout of an ItemsControl is simply by setting the ItemsPanel property to the Panel that will contain the items: <ListBox ItemsSource="{Binding Source={StaticResource xmlData}}" (…) > <ListBox.ItemsPanel> <StackPanel Orientation="Horizontal" /> </ListBox.ItemsPanel> </ListBox> Alternatively, for more extensive customizations, you can create a ControlTemplate. This ControlTemplate allows you to replace the whole VisualTree, including picking…
read more
Oct 16, 2005
When they are used by themselves, these two properties are very similar. The need for both and the difference between the two becomes apparent when SelectedValuePath is also set. For example, consider our well-known GreekGods data source. I set the DataContext of the StackPanel to be that collection through code: GreekGods items; items = new GreekGods(); mainStackPanel.DataContext = items; And used an empty Binding to bind that collection to the ListBox. I know that I want to select the GreekGod with description “Messenger of the Gods” (even though I am…
read more
Oct 04, 2005
As I’ve shown in previous posts, binding an ItemsControl to an IEnumerable data source is really easy (remember that ListBox and ComboBox derive from ItemsControl). With the introduction of DisplayMemberPath in September PDC, it became even easier for the scenario where you want to display only one property of each data item as text. Before DisplayMemberPath, this scenario required the use of a DataTemplate that would specify the property we’re interested in, like in the following xaml: <Window.Resources> <DataTemplate x:Key="itemTemplate"> <TextBlock Text="{Binding Path=Name}" /> </DataTemplate> </Window.Resources> <ItemsControl ItemsSource="{StaticResource greekGods}" ItemTemplate="{StaticResource itemTemplate}" /> The…
read more
Sep 28, 2005
Binding the items of a ComboBox is pretty much the same as binding the items of a ListBox: <Window.Resources> <local:GreekGods x:Key="greekGods"/> <DataTemplate x:Key="itemTemplate"> <TextBlock Text="{Binding Path=Name}" /> </DataTemplate> </Window.Resources> <ComboBox ItemsSource="{StaticResource greekGods}" ItemTemplate="{StaticResource itemTemplate}" Width="200" Name="comboBox"/> The reason for this similarity is that both ComboBox and ListBox derive from ItemsControl, and ItemsSource and ItemTemplate are properties on ItemsControl. If you read my previous post about how to get a ListBoxItem from a data bound ListBox, you’re probably thinking that you don’t need to keep reading to know how to do the same thing…
read more
Sep 22, 2005
Data binding a list box to an enumeration of items could not be easier in WPF: <Window.Resources> <local:GreekGods x:Key="greekGods"/> <DataTemplate x:Key="itemTemplate"> <TextBlock Text="{Binding Path=Name}" /> </DataTemplate> </Window.Resources> <ListBox ItemsSource="{StaticResource greekGods}" ItemTemplate="{StaticResource itemTemplate}" Name="listBox"/> The ItemsSource property of ListBox takes an IEnumerable, which is the list of items you want to display. In this case, the GreekGods data source is of type ObservableCollection, which implements IEnumerable. The ItemTemplate property specifies the DataTemplate that will be used to control how the data is displayed. In this case, we will have a TextBlock for each item that…
read more
Sep 12, 2005
Most Bindings you see in samples have the Source and Path properties set. The Source property specifies the object you’re binding to and the Path specifies a property in that object whose value you’re interested in. I’ve seen several people get confused when encountering an empty Binding for the first time - “{Binding}”. It seems at first sight that we’re not giving the Binding enough information to do anything useful. This is not true and I will explain why. If you read my previous post you should understand…
read more
Sep 08, 2005
DataContext is one of the most fundamental concepts in Data Binding. The Binding object needs to get its data from somewhere, and there are a few ways to specify the source of the data. In this post I talk about setting the Source property directly in the Binding vs inheriting a DataContext from the nearest element when traversing up in the tree. The other two alternatives are setting the ElementName and RelativeSource properties in the Binding object, but I will leave that for a future post. For example,…
read more
