One of the cool features of WPF is the way we can define a UI based upon the data type used.<\/p>\n
For example, assuming a very simple view model<\/p>\n
\r\npublic class PersonViewModel : ReactiveObject\r\n{\r\n private string firstName;\r\n private string lastName;\r\n private int age;\r\n\r\n public string FirstName\r\n {\r\n get { return firstName; }\r\n set { this.RaiseAndSetIfChanged(ref firstName, value); }\r\n }\r\n\r\n public string LastName\r\n {\r\n get { return lastName; }\r\n set { this.RaiseAndSetIfChanged(ref lastName, value); }\r\n }\r\n\r\n public int Age\r\n {\r\n get { return age; }\r\n set { this.RaiseAndSetIfChanged(ref age, value); }\r\n }\r\n}\r\n<\/pre>\nWe might have a parent view model returning a PersonViewModel type or maybe an ItemsControl that has an ObservableCollection of PersonViewModel types. We can handle the bindings in the standard way but we can also associate a UI with a data type using DataTemplates.<\/p>\n
A simple example of this is seem with the following code<\/p>\n
\r\n<ResourceDictionary>\r\n <Model:PersonViewModel x:Key="model"\/>\r\n<\/ResourceDictionary>\r\n\r\n<Button Content="{Binding Source={StaticResource model}}"\/>\r\n<\/pre>\nWith the above the button content will display the namespace.objecttype, i.e. MyTestApp.PersonViewModel which is of little use, but if we create a DataTemplate as per the following XAML, we get something more useable<\/p>\n
\r\n<DataTemplate DataType="{x:Type ta:PersonViewModel}">\r\n <TextBlock> \r\n <TextBlock.Text>\r\n <MultiBinding StringFormat="{}{0} {1} aged {2}">\r\n <Binding Path="FirstName" \/>\r\n <Binding Path="LastName" \/>\r\n <Binding Path="Age" \/>\r\n <\/MultiBinding>\r\n <\/TextBlock.Text>\r\n <\/TextBlock>\r\n<\/DataTemplate>\r\n<\/pre>\nNow our button will display the “FirstName LastName aged Age” text, where obviously FirstName, LastName and Age are taken from our view model.<\/p>\n
Note: You can use a DataTemplate against any ContentControl, so we can see this template used on a button, a label or other control that expects\/handles a ContentControl. Whereas the likes of a TextBlock’s Text property expects a string, so this will not work there.<\/em><\/p>\nThe DataTemplate is also used in the ItemTemplate of a ListBox (for example)<\/p>\n
\r\n<ListBox ItemsSource="{Binding People}" \/>\r\n<\/pre>\nUsing the above, where People is an ObservableCollection property. The ItemTemplate of the ListBox uses the DataTemplate previously defined. Alternatively we can create the DataTemplate within the ItemTemplate as per<\/p>\n\r\n<ListBox ItemsSource="{Binding People}">\r\n <ListBox.ItemTemplate>\r\n <DataTemplate>\r\n <TextBlock>\r\n <TextBlock.Text>\r\n <MultiBinding StringFormat="{}{0} {1} aged {2}">\r\n <Binding Path="FirstName" \/>\r\n <Binding Path="LastName" \/>\r\n <Binding Path="Age" \/>\r\n <\/MultiBinding>\r\n <\/TextBlock.Text>\r\n <\/TextBlock>\r\n <\/DataTemplate>\r\n <\/ListBox.ItemTemplate>\r\n<\/ListBox>\r\n<\/pre>\nAlong with DataTemplate we can define DataTemplate Triggers, for example<\/p>\n
\r\n<DataTemplate DataType="{x:Type ta:PersonViewModel}">\r\n <TextBlock x:Name="text"> \r\n <TextBlock.Text>\r\n <MultiBinding StringFormat="{}{0} {1} aged {2}">\r\n <Binding Path="FirstName" \/>\r\n <Binding Path="LastName" \/>\r\n <Binding Path="Age" \/>\r\n <\/MultiBinding>\r\n <\/TextBlock.Text>\r\n <\/TextBlock>\r\n <DataTemplate.Triggers>\r\n <Trigger SourceName="text" Property="IsMouseOver" Value="True">\r\n <Setter TargetName="text" Property="Background" Value="GreenYellow" \/>\r\n <\/Trigger>\r\n <\/DataTemplate.Triggers>\r\n<\/DataTemplate>\r\n<\/pre>\nSo now anything use the DataTemplate will also apply the trigger code to the UI view of this data.<\/p>\n","protected":false},"excerpt":{"rendered":"
One of the cool features of WPF is the way we can define a UI based upon the data type used. For example, assuming a very simple view model public class PersonViewModel : ReactiveObject { private string firstName; private string lastName; private int age; public string FirstName { get { return firstName; } set { […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[13],"tags":[],"class_list":["post-651","post","type-post","status-publish","format-standard","hentry","category-wpf"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/651","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=651"}],"version-history":[{"count":3,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/651\/revisions"}],"predecessor-version":[{"id":654,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/651\/revisions\/654"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}