Geeks With Blogs


What I do:

Identity Mine

MVVM Light


What I am:

Microsoft Most Valuable Professional, Client Application Development

Microsoft Certified Technology Specialist, Windows Presentation Foundation

WPF disciples


View my profile on LinkedIn

Creative Commons License
Diary of a Code Trotter by Laurent Bugnion is licensed under a Creative Commons Attribution 3.0 Unported License

All source code on this blog is licensed under the MIT license.

Copyright (c) 2006 - 2011 GalaSoft Laurent Bugnion

Post Categories

Laurent Bugnion (GalaSoft) Diary of a Code Trotter
We had a great time yesterday! First of all, the weather was wonderful. Way to deny Seattle's reputation (well, today is quite cloudy, though). We had a wonderful view on the sunshine on Mount Rainier, quite a sight! The hotel is great too.
We started pretty much from scratch, which was good for those of my colleagues who have no prior experience with WPF. Actually, it was very good for me too, a good way to consolidate the knowledge I acquired on my own last year.
We then had lunch at IdentityMine's office, together with our designer colleagues, who are having a separate session. We had a nice, relaxed lunch, and saw a few impressive demos. Impressive especially because of the short development times! (I hope that noone from our marketing department reads that...)
In the afternoon, we did quite a few labs, and some of them were a bit tough to understand. Especially a lot of work with Templates (quote from the course: "Wow, making a ControlTemplate is quite a lot of work" "Yes, but don't worry, usually it's the designers who do that" :-)
On my part, and additionally to the whole recap part, I learned two new things which I hadn't got before:
  • When you want to set the DataContext for a UI element (for example a Window), the easiest way is to just give a name (well, x:Name) to that Window. Then you can use the following syntax for the two ways binding:
<Window x:Class="WindowsApplication3.Window1" xmlns="" xmlns:x="" Title="WindowsApplication3" Height="300" Width="300" x:Name="myWindow"> <StackPanel> <TextBox Name="tf" Text="{Binding ElementName=myWindow, Path=MyProperty}" /> <Label Name="lbl" Content="{Binding ElementName=myWindow, Path=MyProperty}" /> <Button Content="Hello world" /> </StackPanel> </Window>
public static readonly DependencyProperty MyPropertyProperty = DependencyProperty.Register( "MyProperty", typeof( string ), typeof( Window1 ), new UIPropertyMetadata( "" ) );
That makes things quite a lot easier than using an ObjectDataProvider like I had done before.
  • A great discovery: For some reason, I was sure that ItemControls (the basis class for ListBox, Treeview...) was abstract and I couldn't instantiate it. Well, I was totally wrong! Not only you can use it, but using the ItemsPanelTemplate property, you can even use a Canvas (or any other Panel) to render the databound elements. Here's an example:
<Page x:Class="GalaSoftLb.Wpf.ScrumPanels.Page1" xmlns="" xmlns:x="" Title="Page1" > <Page.Resources> <!-- Define data. This may also be stored in an external XML file. Note that each element also stores its coordinates. --> <XmlDataProvider x:Key="MyData" XPath="/Entries"> <x:XData> <!-- xmlns *must* be set to an empty string, or else there is a binding error, and nothing is displayed. --> <Entries xmlns=""> <Entry Name="Entry1" Text="Hello world" Top="10" Left="20" /> <Entry Name="Entry2" Text="Hello again" Top="60" Left="100" /> <Entry Name="Entry3" Text="I am in Tacoma!" Top="200" Left="200" /> </Entries> </x:XData> </XmlDataProvider> <!-- This tells the framework how the data should be rendered. Using Binding, you set the "Content" property to the "Text" attribute of the current data item. (the @ syntax designates an attribute on the current node). Note that at this point, the data source is not set, this is design time. The actual binding occurs later. --> <DataTemplate x:Key="MyTemplate"> <Label Content="{Binding XPath=@Text}" Background="Red" FontWeight="Bold" /> </DataTemplate> </Page.Resources> <!-- Create an ItemsControl as the container. This is where the actual databinding takes place. --> <ItemsControl Background="Yellow" ItemsSource="{Binding Source={StaticResource MyData}, XPath=Entry}" ItemTemplate="{StaticResource MyTemplate}"> <!-- Tell the ItemsControl how it should render itself, use a Canvas --> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Canvas /> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <!-- Since we want to use the Top and Left attributes in the data, and since the elements are not placed directly on the Canvas, but on a container on the Canvas, we need to tell the Container that we want the Canvas.Top and Canvas.Left property to be set on the parent Canvas. That's a bit tricky. --> <ItemsControl.ItemContainerStyle> <Style> <Setter Property="Canvas.Top" Value="{Binding XPath=@Top}" /> <Setter Property="Canvas.Left" Value="{Binding XPath=@Left}" /> </Style> </ItemsControl.ItemContainerStyle> </ItemsControl> </Page>
Using an ItemsControl to render databound elements on a Canvas
So now I'll have to rework a few of my projects to integrate that new knowledge ;-)
Posted on Tuesday, March 27, 2007 7:50 PM Technical stuff , .NET , WPF | Back to top

Comments on this post: WPF course with IdentityMine: first day

Comments are closed.
Comments have been closed on this topic.
Copyright © Laurent Bugnion | Powered by: