Observable Collections and why we need them…
One of the tenants of databinding in XAML is that a collection that we are going to “display” on screen needs to be “observable”. Non-observable collections can still be manipulated and used but until they are made observable cannot normally be viewed on-screen.
First let’s create a WPF project in Expression Blend called “MySample”
Let’s look at how to create such a collection,, in this case former U.S. presidents We will create a collection called a NameList that is to be declared an ObservableCollection .
Click OK to create the project.
Let’s open the MainWindow.xaml.cs file and add some code to our code behind.. After we are done it should look like this:
1: using System;
2: using System.Collections.Generic;
3: using System.Text;
4: using System.Windows;
5: using System.Windows.Controls;
6: using System.Windows.Data;
7: using System.Windows.Documents;
8: using System.Windows.Input;
9: using System.Windows.Media;
10: using System.Windows.Media.Imaging;
11: using System.Windows.Shapes;
12: using System.Collections;
13: using System.Collections.ObjectModel;
14: namespace MySample
15: {
16: public class NameList : ObservableCollection<PersonName>
17: {
18: public NameList() : base()
19: {
20: Add(new PersonName("Clinton", "Bill"));
21: Add(new PersonName("Carter", "Jimmy"));
22: Add(new PersonName("Kenedy", "John"));
23: Add(new PersonName("Roosevelt", "Franklin"));
24: }
25: }
26:
27: public class PersonName
28: {
29: private string firstName;
30: private string lastName;
31:
32: public PersonName(string first, string last)
33: {
34: this.firstName = first;
35: this.lastName = last;
36: }
37:
38: public string FirstName
39: {
40: get { return firstName; }
41: set { firstName = value; }
42: }
43:
44: public string LastName
45: {
46: get { return lastName; }
47: set { lastName = value; }
48: }
49: }
50:
51: /// <summary>
52: /// Interaction logic for MainWindow.xaml
53: /// </summary>
54: public partial class MainWindow : Window
55: {
56: public MainWindow()
57: {
58: this.InitializeComponent();
59: // Insert code required on object creation below this point.
60: }
61: }
62: }
Lines 12 and 13 are references that add support for collections in .net
using System.Collections;
using System.Collections.ObjectModel;
Line 16 instantiates our NameList Class as an observable collection
Lines 18-24 add the names to our class.from the PersonName class with first and last name values defined as type string.
Later code (lines 27-49) defines the PersonName Class..
Lines 54 through 61 are generated for us and don’t require any intervention..
Binding in Expression Blend
How do we make this now work inside of Blend ? There are a few ways.. In this case we will create a list box then use the data panel to bind it to our NameList object that we have just created in code..
We now need to open our MainWindow.xaml file
Next using the controls toolbox we can drag an empty ListBox control onto the design surface..
Our ListBox on the design surface should look like this below. While in properties for it we should give it a name (myListBox)
Next we will visit the Data panel and bind this to our NameList Collection. So let’s switch to the Data Panel and add a new “Object” datasource..
Next a dialog will pop-up showing us all of the code objects defined in our project.
We need to look for our Class called “MySample” that we defined earlier and select it and click OK. After we have done so a new datasource will appear in the the data panel.
If nothing shows up try building the project and try again. If still no luck retrace your steps.. Something isn’t right about your project code.
Now we can simply click and drag the Namelist collection over to the listbox on the design surface..
Notice the blue helper tool tip as we drag using the mouse over to the surface. It tells us just what it’s going to bind to as a check that we are binding everything correctly.It is very small and sometimes difficult to read. I wish Microsoft had made this full Opacity..
Now if we look on the design surface we will notice our ListBox is populated with Names..
So we have set up our databinding with default options.. I don’t like how the data is presented in the ListBox, so let’s fix this..
So we all know that the ListBox, is just a container for ListBoxItem’s right ? We next need to use the “breadcrumb” control to navigate into the “ItemTemplate” for the ListBox and edit the template visually as shown below..
So after we have selected “Edit Current” as shown in the above menu, you will notice a couple of changes..
We are now inside the ItemTemplate so we can directly edit it.. As seen from the breadcrumb menu above..
Our objects and timelines panel has changed to reflect we are inside the template for these items to edit them.
I will next shift-click on both items to select them as seen below..
Next I will group them into a new layout manager inside the StackPanel) so I can manipulate where they show up. The default is in a stack panel (which is just a bunch of stacked items (in this case vertically by default). I want to see the names on the same line in this example so I am going to use a canvas layout manager.
Notice there are many other types of layout managers I could use as well. Now my objects and timelines panel will look like this below:
So now we are inside of our canvas grouping for our databound textblocks. I can now manipulate the positioning of these within the canvas layout (which is a container) right on the design surface.
First I will make my canvas container the width of the listbox by clicking on the canvas object and resizing it..
We can see this from the layout properties in the properties tab..
Next I will select and drag and move the TextBlock controls so they appear in the same line on the canvas. I will give them plenty of space since they are databound and the actual length might be longer as seen below.
Since I like how this looks I will now navigate out of the ItemTemplate (by clicking on the design surface..
Next I will save and run the project (F5, CTRL+F5) and see our results.
And bravo our sample works!
Let’s take a quick look at what the XAML for the databinding looks like behind the scenes..
In the Window definition we define an alias for our code namespace, so we can instantiate controls inside it.
Source XAML
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:c="clr-namespace:MySample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="MySample.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
In the Window definition we define an alias for our code namespace, so we can instantiate controls inside it. xmlns:c="clr-namespace:MySample"
<Window.Resources>
<c:NameList x:Key="NameListDataSource" d:IsDataSource="True"/>
<c:NameList x:Key="NameListData"/>
<DataTemplate x:Key="PersonNameTemplate">
<StackPanel>
<Canvas Height="31.92" Width="140.92">
<TextBlock Text="{Binding FirstName}"/>
<TextBlock Text="{Binding LastName}"
Canvas.Left="78"/>
</Canvas>
</StackPanel>
</DataTemplate>
</Window.Resources>
Above, in the <Window.Resources> block (where we see the defined the DataTemplate for our ListBox) you will also see that using our namespace alias “c:” there is a named data source object with the name defined for our NameList and our NameListData is there as well.
<Grid x:Name="LayoutRoot"
DataContext="{Binding Source={StaticResource NameListDataSource}}">
<ListBox x:Name="myListBox"
Margin="28,18,0,0"
Height="121"
VerticalAlignment="Top"
ItemTemplate="{DynamicResource PersonNameTemplate}"
ItemsSource="{Binding}"
HorizontalAlignment="Left" Width="165"/>
</Grid>
</Window>
Lastly we see our actual window with the <ListBox> defined in it. notice the binding is set for the ListBox ItemsSource and it’s referencing the ItemTemplate defined earlier in our <Window.Resources> block.
That’s about all there is to this with the exception that we have to set the DataContext to be bound to the NameListDataSource
DataContext="{Binding Source={StaticResource NameListDataSource}}">
That’s about it.. Hope this helps.. I am more of a designer than a developer and some of the things I mentioned here like dialogue may not be proper Windows terminology. But it is familiar to others coming from different environments and I use it to make it easier (hopefully) to understand..