Concepts of WPF: Introduction to XAML XAML stands for Extensible Application Markup Language.

Its a simple language based on XML to create and initialize .NET objects with hierarchical relations. Altough it was originally invented for WPF it can by used to create any kind of object trees. Today XAML is used to create user interfaces in WPF, Silverlight, declare workflows in WF and for electronic paper in the XPS standard. All classes in WPF have parameterless constructors and make excessive usage of properties. That is done to make it perfectly fit for XML languages like XAML.

Advantages of XAML All you can do in XAML can also be done in code. XAML ist just another way to create and initialize objects. You can use WPF without using XAML. It's up to you if you want to declare it in XAML or write it in code. Declare your UI in XAML has some advantages: XAML code is short and clear to read Separation of designer code and logic Graphical design tools like Expression Blend require XAML as source. The separation of XAML and UI logic allows it to clearly separate the roles of designer and developer.

y y y y

XAML vs. Code As an example we build a simple StackPanel with a textblock and a button in XAML and compare it to the same code in C#.

<StackPanel> <TextBlock Margin="20">Welcome to the World of XAML</TextBlock> <Button Margin="10" HorizontalAlignment="Right">OK</Button> </StackPanel>

The same expressed in C# will look like this:

// Create the StackPanel StackPanel stackPanel = new StackPanel(); this.Content = stackPanel; // Create the TextBlock TextBlock textBlock = new TextBlock(); textBlock.Margin = new Thickness(10); textBlock.Text = "Welcome to the World of XAML"; stackPanel.Children.Add(textBlock); // Create the Button Button button = new Button(); button.Margin= new Thickness(20); button.Content = "OK"; stackPanel.Children.Add(button);

As you can see is the XAML version much shorter and clearer to read. And that's the power of XAMLs expressiveness.

Properties as Elements Properties are normally written inline as known from XML <Button Content="OK" />. But what if we want to put a more complex object as content like an image that has properties itself or maybe a whole grid panel? To do that we can use the property element syntax. This allows us to extract the property as an own chlild element.

<Button> <Button.Content> <Image Source="Images/OK.png" Width="50" Height="50" /> </Button.Content> </Button>

Implicit Type conversion

A very powerful construct of WPF are implicit type converters. They do their work silently in the background. When you declare a BorderBrush, the word "Blue" is only a string. The implicit BrushConverter makes a System.Windows.Media.Brushes.Blue out of it. The same regards to the border thickness that is beeing converted implicit into a Thickness object. WPF includes a lot of type converters for built-in classes, but you can also write type converters for your own classses.

<Border BorderBrush="Blue" BorderThickness="0,10"> </Border>

Markup Extensions Markup extensions are dynamic placeholders for attribute values in XAML. They resolve the value of a property at runtime. Markup extensions are surrouded by curly braces (Example: Background="{StaticResource NormalBackgroundBrush}"). WPF has some built-in markup extensions, but you can write your own, by deriving from MarkupExtension. These are the built-in markup extensions: Binding To bind the values of two properties together. y StaticResource One time lookup of a resource entry y DynamicResource Auto updating lookup of a resource entry y TemplateBinding To bind a property of a control template to a dependency property of the control y x:Static Resolve the value of a static property. y x:Null Return null The first identifier within a pair of curly braces is the name of the extension. All preciding identifiers are named parameters in the form of Property=Value. The following example shows a label whose Content is bound to the Text of the textbox. When you type a text into the text box, the text property changes and the binding markup extension automatically updates the content of the label.

y

<TextBox x:Name="textBox"/> <Label Content="{Binding Text, ElementName=textBox}"/>

Namespaces At the beginning of every XAML file you need to include two namespaces. The first is http://schemas.microsoft.com/winfx/2006/xaml/presentation. It is mapped to all wpf controls in System.Windows.Controls. The second is http://schemas.microsoft.com/winfx/2006/xaml it is mapped to System.Windows.Markup that defines the XAML keywords. The mapping between an XML namespace and a CLR namespace is done by the XmlnsDefinition attribute at assembly level. You can also directly include a CLR namespace in XAML by using the clr-namespace: prefix.

<Window xmlns=´http://schemas.microsoft.com/winfx/2006/xaml/presentation´ xmlns:x=´http://schemas.microsoft.com/winfx/2006/xaml´> </Window>

Logical- and Visual Tree

Introduction Elements of a WPF user interface are hierarchically related. This relation is called the LogicalTree. The template of one element consists of multiple visual elements. This tree is called the VisualTree. WPF differs between those two trees, because for some problems you only need the logical elements and for other problems you want all elements.

<Window> <Grid> <Label Content="Label" /> <Button Content="Button" /> </Grid> </Window>

Why do we need two different kind of trees? A WPF control consists of multiple, more primitive controls. A button - for example consists of a border, a rectangle and a content presenter. These controls are visual children of the button.

The logical tree is responsible for: Inherit DependencyProperty values Resolving DynamicResources references Looking up element names for bindings Forwaring RoutedEvents y y y y The Visual Tree The visual tree contains all logical elements including all visual elements of the template of each element.and not all the template parts. but you don't know how many levels up that elemens is. Particulary because the template can be replaced. Do Hit-Testing RelativeSource (FindAncestor) y y y y y y Programmatically Find an Ancestor in the Visual Tree If you are a child element of a user interface and you want to access data from a parent element.and RenderTransforms Propagate the IsEnabled property. and so you should not relate on the visual tree structure! Because of that you want a more robust tree that only contains the "real" controls . You can use almost the same code to navigate through the logical tree. But sometimes you are not interested in the borders and rectangles of a controls' template.When WPF renders the button. layout etc. And that is the eligibility for the logical tree. it's the best solution to navigate up the tree until it finds an element of the requested type.<BR The visual tree is responsible for: Rendering visual elements Propagate element opacity Propagate Layout. This helper does excactly this. This hierarchical relation can also be used to do hit-testing. The Logical Tree The logical tree describes the relations between elements of the user interface. . but it iterates through the visual tree and renders the visual children of it. the element itself has no appearance.

return target as T. } while (target != null && !(target is T)). it returns null. do { target = VisualTreeHelper.FindAncestor<Grid>(this). } } The following example shows how to use the helper. var grid = VisualTreeHelperExtensions.public static class VisualTreeHelperExtensions { public static T FindAncestor<T>(DependencyObject dependencyObject) where T : class { DependencyObject target = dependencyObject. If the helper reaches the root element of the tree.GetParent(target). It starts at this and navigates up the visual tree until it finds an element of type Grid. Dependency Properties Introduction Value resolution strategy The magic behind it How to create a DepdencyProperty Readonly DependencyProperties Attached DependencyProperties Listen to dependency property changes .

y Value inheritance When you access a dependency property the value is resolved by using a value resolution strategy. it internally resolves the value by following the precedence from high to low. the dependency property navigates up the logical tree until it finds a value. The default values are stored once within the dependency property. you will soon stumble across DependencyProperties. The key of an entry is the name of the property and the value is the value you want to set. It checks if a local value is available. They look quite similar to normal .NET property is read directly from a private member in your class. but in a dictionary of keys and values provided by the base class DependencyObject. that the value of a normal . When you set a value of a dependency property it is not stored in a field of your object. By registering a callback in the property metadata you get notified. The advantages of dependency properties are Reduced memory footprint It's a huge dissipation to store a field for each property when you think that over 90% of the properties of a UI control typically stay at its initial values. If no local value is set. Dependency properties solve these problems by only store modified properties in the instance. but the concept behind is much more complex and powerful. When you set the FontSize on the root element it applies to all textblocks below except you override the value. This is also used by the databinding.NET properties. if not if a custom . y Value resolution strategy Every time you access a dependency property. when the value of the property has been changed. y Change notification Dependency properties have a built-in change notification mechanism. whereas the value of a DependencyProperty is resolved dynamically when calling the GetValue() method that is inherited from DependencyObject.How to clear a local value Introduction When you begin to develop appliations with WPF. The main difference is.

style trigger is active.. This sequence is a bit simplified. When you access a dependency property over its . If no value is found it takes the default value defined in the property metadata. This baseclass defines a key. Each of them consists of a key . This method resolves the value by using a value resolution strategy that is explained in detail below.NET property wrapper.. it internally calls GetValue(DependencyProperty) to access the value. At last the default value is always available. value dictionary that contains local values of dependency properties.and a metadata that contain callbacks and a default value. If no value is set if goes up the logical tree and searches for an inherited value. The key of an entry is the key defined with the dependency property. but it shows the main concept. The magic behind it Each WPF control registers a set of DependencyProperties to the static DependencyProperty class. All types that want to use DependencyProperties must derive from DependencyObject. it reads it directly from the dictionary. and continues until it founds a value.that must be unique per type . . If a local value is available..

If you set the property from XAML the SetValue() method is called directly.Register() to create an instance of a dependency property. add a static field of type DepdencyProperty to your type and call DependencyProperty. The name of the DependendyProperty must always end with ..How to create a DependencyProperty To create a DependencyProperty.. because they are only called when you set the property from code.Property. Important: Do not add any logic to these properties. This wrapper does nothing else than internally getting and setting the value by using the GetValue() and SetValue() Methods inherited from DependencyObject and passing the DependencyProperty as key. you can type propdp and hit 2x tab to create a dependency property. To make it accessable as a normal . If you are using Visual Studio. This is a naming convention in WPF.NET property you need to add a property wrapper. .

} . // . The new value is passed in the EventArgs. value). OnCurrentTimePropertyChanged. new FrameworkPropertyMetadata( DateTime. value coercion and validation. new FrameworkPropertyMetadata(DateTime. Value Changed Callback The change notification callback is a static method. private static void OnCurrentTimePropertyChanged(DependencyObject source. } set { SetValue(CurrentTimeProperty. // Put some update logic here. that is called everytime when the value of the TimeProperty changes. OnCoerceCurrentTimeProperty ). the object on which the value changed is passed as the source. } } Each DependencyProperty provides callbacks for change notification.NET Property wrapper public DateTime CurrentTime { get { return (DateTime)GetValue(CurrentTimeProperty).// Dependency Property public static readonly DependencyProperty CurrentTimeProperty = DependencyProperty. DependencyPropertyChangedEventArgs e) { MyClockControl control = source as MyClockControl.Now))..Register( "CurrentTime". typeof(DateTime).. OnValidateCurrentTimeProperty ).NewValue. typeof(MyClockControl). DateTime time = (DateTime)e. These callbacks are registered on the dependency property.Now.

} Validation Callback In the validate callback you check if the set value is valid. A good example is a progress bar with a Value set below the Minimum or above the Maximum. like the IsMouseOver property. Creating a read only property is similar to creating a regular DependencyProperty. . private static object OnCoerceTimeProperty( DependencyObject sender. Instead of calling DependencyProperty. In our example demand.Now. } Readonly DependencyProperties Some dependency property of WPF controls are readonly.RegisterReadonly(). } return data. that the data is an instance of a DateTime. They are often used to report the state of a control. object data ) { if ((DateTime)data > DateTime.NET property? One important reason is that you cannot set triggers on normal . Maybe you ask yourself. why not just use a normal .Coerce Value Callback The coerce callback allows you to adjust the value if its outside the boundaries without throwing an exception.NET propeties. an ArgumentException will be thrown.Now ) { data = DateTime. Is does not make sense to provide a setter for this value. In this case we can coerce the value within the allowed boundaries.Register() you call DependencyProperty. If you return false. In the following example we limit the time to be in the past. private static bool OnValidateTimeProperty(object data) { return data is DateTime.

This property is the readonly property that can be accessed from external. .DependencyProperty. They allow you to attach a value to an object that does not know anything about this value. // Register the public property to get the value public static readonly DependencyProperty IsMouseoverProperty = IsMouseOverPropertyKey.RegisterReadOnly("IsMouseOver".NET Property wrapper public int IsMouseOver { get { return (bool)GetValue(IsMouseoverProperty). new FrameworkPropertyMetadata(false)). The key gives you access to set the value from within your class and use it like a normal dependency property. The DockPanel needs Dock. value). The Canvas needs Top and Left.DependencyProperty. // Register the private key to set the value private static readonly DependencyPropertyKey IsMouseOverPropertyKey = DependencyProperty. etc. the list is infinite.This returns you a DependencyPropertyKey. A good example for this concept are layout panels. it's not possible to have all those properties on all WPF controls. So you see. Since you can write your own layout panel. // . Each layout panel needs different data to align its child elements. typeof(bool). typeof(MyClass). } } Attached Properties Attached properties are a special kind of DependencyProperties. Second thing to do is registering a public dependency property that is assigned to DependencyPropertyKey. } private set { SetValue(IsMouseOverPropertyKey. This key should be stored in a private or protected static readonly field of your class.

Top and Canvas. value).TextProperty. But an much easier way is to get the DependencyPropertyDescriptor and hookup a callback by calling AddValueChanged() DependencyPropertyDescriptor textDescr = DependencyPropertyDescriptor.RegisterAttached("Top". } Listen to dependency property changes If you want to listen to changes of a dependency property.GetValue(TopProperty). typeof(Canvas). public static void SetTop(UIElement element. add an attribute in XAML with a prefix of the element that provides the attached property. FrameworkPropertyMetadataOptions. For example an element that is aligned by a parent layout panel. you can subclass the type that defines the property and override the property metadata and pass an PropertyChangedCallback. typeof(double).Left="20" Content="Click me!"/> </Canvas> public static readonly DependencyProperty TopProperty = DependencyProperty. typeof(TextBox)). To set the value of an attached property. new FrameworkPropertyMetadata(0d.Left property of a button aligned within a Canvas panel.The solution are attached properties. .Inherits)).SetValue(TopProperty. To set the the Canvas.Top="20" Canvas. you write it like this: <Canvas> <Button Canvas. double value) { element. They are defined by the control that needs the data from another control in a specific context. FromProperty(TextBox. } public static double GetTop(UIElement element) { return (double)element.

if (textDescr!= null) { textDescr. . tunnel or direct.Click="Button_Click".. there is the constant DependencyProperty.AddValueChanged(myTextBox. delegate { // Add your propery changed logic here.. button1. Routed Events Routed events are events which navigate up or down the visual tree acording to their RoutingStrategy.UnsetValue that describes an unset value.ClearValue( Button. }). } How to clear a local value Because null is also a valid local value.ContentProperty ). The routing strategy can be bubble. You can hook up event handlers on the element that raises the event or also on other elements above or below it by using the attached event syntax: Button.

This behavior is the same as normal . y Bubbling The event is raised on the source element and navigates up to the visual tree until it reaches the root element or until the bubbling is stopped by marking the event as handled.RegisterRoutedEvent( "Selected".. y How to Create a Custom Routed Event // Register the routed event public static readonly RoutedEvent SelectedEvent = EventManager.. The first is a tunneling event called PreviewMouseDown and the second is the bubbling called MouseDown. The bubbling event is raised after the tunneling event.NET wrapper public event RoutedEventHandler Selected { add { AddHandler(SelectedEvent. To stop routing then you have to set e. typeof(RoutedEventHandler). typeof(MyCustomControl)).SelectedEvent)). . By naming convention it is called Preview. } remove { RemoveHandler(SelectedEvent. They don't stop routing if the reach an event handler. } } // Raise the routed event "selected" RaiseEvent(new RoutedEventArgs(MyCustomControl.NET events. Tunneling The event is raised on the root element and navigates down to the visual tree until it reaches the source element or until the tunneling is stopped by marking the event as handeld.Routed events normally appear as pair. y Direct The event is raised on the source element and must be handled on the source element itself. // .Handled = true. and appears before corresponding bubbling event. RoutingStrategy. value). value).Bubble.

Use the SharedSize feature to synchronize the label widths. Create a Auto sized column for the labels and a Star sized column for the TextBoxes. but as soon as you want to use it on different screen resolutions or with different font sizes it will fail.set the Width and Height of elements to Auto whenever possible. y Use an ItemControl with a grid panel in a DataTemplate to layout dynamic key value lists. Arranging controls based on fixed pixel coordinates may work for an limited enviroment. Don't abuse the canvas panel to layout elements. WPF provides a rich set built-in layout panels that help you to avoid the common pitfalls. These are the five most popular layout panels of WPF: Grid Panel Stack Panel Dock Panel Wrap Panel Canvas Panel y y y y y Best Practices Avoid fixed positions .Layout and Controls Introduction to WPF Layout Why layout is so important Layout of controls is critical to an applications usability. Use a StackPanel to layout buttons of a dialog Use a GridPanel to layout a static data entry form. y Vertical and Horizontal Alignment Use the VerticalAlignment and HorizontalAlignmant properties to dock the controls to one or multiple sides of the panel. . The following illustrations show how the sizing behaves with the different combinations.use the Alignment properties in combination with Margin to position elements in a panel y y y y Avoid fixed sizes . Use it only for vector graphics.

The Margin is the extra space around the control.Margin and Padding The Margin and Padding properties can be used to reserve some space around of within the control. The Padding is extra space inside the control. y y y Height and Width Alltough its not a recommended way. MaxHeight. Overflow Handling . The Padding of an outer control is the Margin of an inner control. all controls provide a Height and Width property to give an element a fixed size. If you set the width or height to Auto the control sizes itself to the size of the content. MinWidth and MaxWidth properties to define a acceptable range. A better way is to use the MinHeight.

Scrolling When the content is too big to fit the available size. This behavior can be controlled by setting the ClipToBounds property to true or false. you can wrap it into a ScrollViewer. The ScrollViewer uses two scroll bars to choose the visible area. <ScrollViewer> <StackPanel> <Button Content="First Item" /> <Button Content="Second Item" /> <Button Content="Third Item" /> </StackPanel> </ScrollViewer> Grid Panel Introduction . The visibility of the scrollbars can be controlled by the vertical and horizontal ScrollbarVisibility properties.Clipping Layout panels typically clip those parts of child elements that overlap the border of the panel.

Star-sizes are like percentages. percentally divided over all starsized columns. Remember that starsizing does not work if the grid size is calculated based on its content. A cell can contain multiple controls. they can span over multiple cells and even overlap themselves. The following example shows a grid with three rows and two columns. Fixed Auto Fixed size of logical units (1/96 inch) Takes as much space as needed by the contained control Star (*) Takes as much space as available. Its functionality is similar to the HTML table but more flexible. The distance between the anchor and the grid line is specified by the margin of the control Define Rows and Columns The grid has one row and column by default.RowDefinitions> <RowDefinition Height="Auto" /> . you have to add RowDefinition items to the RowDefinitions collection and ColumnDefinition items to the ColumnDefinitions collection. except that the sum of all star columns does not have to be 100%. The size can be specified as an absolute amount of logical units. The resize behaviour of the controls is defined by the HorizontalAlignment and VerticalAlignment properties who define the anchors. <Grid> <Grid. To create additional rows and columns.The grid is a layout panel that arranges its child controls in a tabular structure of rows and columns. as a percentage value or automatically.

RowDefinitions> <Grid.Row="3" HorizontalAlignment="Right" MinWidth="80" Margin="3" Content="Send" /> </Grid> .ColumnDefinitions> </Grid> How to add controls to the grid To add controls to the grid layout panel just put the declaration between the opening and closing tags of the Grid.Row="2" Margin="3" /> <Button Grid.Row to define the location of the control.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="200" /> </Grid.ColumnDefinitions> <Label Grid.<RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="28" /> </Grid.Column="1" Grid.Column and Grid.and columndefinitions must precced any definition of child controls. <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="28" /> </Grid.Column="1" Grid.Column="0" Content="Comment:"/> <TextBox Grid.Column="0" Content="Name:"/> <Label Grid. The grid layout panel provides the two attached properties Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="200" /> </Grid.Column="1" Grid. Keep in mind that the row.Row="0" Margin="3" /> <TextBox Grid.Column="1" Grid.Column="0" Content="E-Mail:"/> <Label Grid.Row="2" Grid.Row="0" Grid.Row="1" Grid.Row="1" Margin="3" /> <TextBox Grid.

To ensure that the grid splitter changes the size of the previous and next cell you have to set the ResizeBehavior to PreviousAndNext.Column="1" ResizeBehavior="PreviousAndNext" Width="5" Background="#FFBCBCBC"/> <Label Content="Right" Grid.Resizable columns or rows WPF provides a control called the GridSplitter. . The splitter normally recognizes the resize direction according to the ratio between its height and width. Doing it this way prevents overlapping to adjacent cells. The special thing is that is grabs itself the nearest gridline to change its width or height when you drag this control around.Column="2" /> </Grid> The best way to align a grid splitter is to place it in its own auto-sized column.Column="0" /> <GridSplitter HorizontalAlignment="Right" VerticalAlignment="Stretch" Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid. This control is added like any other control to a cell of the grid. But if you like you can also manually set the ResizeDirection to Columns or Rows.ColumnDefinitions> <Label Content="Left" Grid. <Grid> <Grid.

IsSharedSizeScope="True" > <ItemsControl.ItemTemplate> <DataTemplate> <Grid> <Grid. This often helps to resolve the problem. Star sizing is treated as Auto. By setting the attached property Grid.IsSharedSizeScope to true on a parent element you define a scope within the column-widths are shared. Since TextWrapping on TextBlocks within an SharedSize column does not work you can exclude your last column from the shared size.ColumnDefinitions> <TextBlock Text="{Binding Path=Key}" TextWrapping="Wrap"/> <TextBlock Text="{Binding Path=Value}" Grid. The feature is very useful if you want to realize a multi-column listview by using a grid as layout panel within the data template. the columns will not have the same width. Because each item contains its own grid. <ItemsControl Grid.ItemTemplate> </ItemsControl> Useful Hints Columns and rows that participate in size-sharing do not respect Star sizing.Column="1" TextWrapping="Wrap"/> </Grid> </DataTemplate> </ItemsControl. set the SharedSizeGroup to the same name. In the sizesharing scenario. To synchronize the width of two columndefinitions.ColumnDefinitions> <ColumnDefinition SharedSizeGroup="FirstColumn" Width="Auto"/> <ColumnDefinition Width="*"/> </Grid. Using GridLenghts from code .<GridSplitter ResizeDirection="Columns"/> How to share the width of a column over multiple grids The shared size feature of the grid layout allows it to synchronize the width of columns over multiple grids.

ColumnDefinitions. you can use the GridLength class to define the differenz types of sizes.ColumnDefinitions. It stacks its child elements below or beside each other. grid. WPF StackPanel Introduction The StackPanel in WPF is a simple and useful layout panel. ColumnDefinition col1 = new ColumnDefinition(). dependening on its orientation.Auto.Star) new GridLength(100.Star).If you want to add columns or rows by code.Add(col1). All WPF ItemsControls like ComboBox.GridUnitType. .Add(col2). ColumnDefinition col2 = new ColumnDefinition().Auto new GridLength(1. Auto sized Star sized Fixed size GridLength.GridUnitType. grid.Width = new GridLength(1. This is very useful to create any kinds of lists.Width = GridLength. col2.GridUnitType. col1. ListBox or Menu use a StackPanel as their internal layout panel.Pixel) Grid grid = new Grid().

0. The stack panel aligns the two buttons depending on their desired size. Never mess again with too small or too large buttons. <StackPanel Margin="8" Orientation="Horizontal"> <Button MinWidth="93">OK</Button> <Button MinWidth="93" Margin="10. Third Party Controls DataGrid ItemsControl LivePreview ComboBox . If they need more space they will get it automatically.0.<StackPanel> <TextBlock Margin="10" FontSize="20">How do you like your coffee?</TextBlock> <Button Margin="10">Black</Button> <Button Margin="10">With milk</Button> <Button Margin="10">Latte machiato</Button> <Button Margin="10">Chappuchino</Button> </StackPanel> Stack Items horizontally A good example for a horizontal stack panel are the "OK" and "Cancel" buttons of a dialog window. The controls can be devided in the following categories.0">Cancel</Button> </StackPanel> Built-in Controls of WPF The WPF framework provides a rich set of built-in controls. Because the size of the text can change if the user changes the font-size or switches the language we should avoid fixed sized buttons.

Dialogs Slider Popup RadioButton ToolTips TextBox Menus Expander PasswordBox ContextMenu Calendar ListBox ListView Window DataBinding in WPF Introduction WPF provides a simple and powerful way to auto-update data between the business model and the user interface. . or bidirectional (source <-> target). This mechanism is called DataBinding. This is the preferred method in WPF to bring data to the user interface. it automatically reflects the updates to the user interface and vice versa. Databinding can be unidirectional (source -> target or target <.source). Everytime when the data of your business model changes.

NET properties this is done by raising the PropertyChanged event of the INotifyPropertyChanged interface. On normal . both sides of a binding must provide a change notification that tells the binding when to update the target value. This property is meant to be set to the data object it visualizes. To make the databinding properly work. This is very useful if you want to build a form that is bound to multiple properties of the same data object. <StackPanel DataContext="{StaticResource myCustomer}"> <TextBox Text="{Binding FirstName}"/> <TextBox Text="{Binding LastName}"/> <TextBox Text="{Binding Street}"/> <TextBox Text="{Binding City}"/> </StackPanel> . ElementName=txtInput. UpdateSourceTrigger=PropertyChanged}" /> </StackPanel> DataContext Every WPF control derived from FrameworkElement has a DataContext property. So you can set the DataContext on a superior layout container and its value is inherited to all child elements. it takes the data context by default. The DataContext property inherits its value to child elements.The source of a databinding can be a normal . If you don't explicity define a source of a binding. On DependencyProperties it is done by the PropertyChanged callback of the property metadata Databinding is typically done in XAML by using the {Binding} markup extension.NET property or a DependencyProperty. The following example shows a simple binding between the text of a TextBox and a Label that reflects the typed value: <StackPanel> <TextBox x:Name="txtInput" /> <Label Content="{Binding Text. The target property of the binding must be a DependencyProperty.

<StackPanel> <StackPanel. Since the visibility is an enum value that can be Visible. Converter={StaticResource boolToVis}}"> </StackPanel> </StackPanel> The following example shows a simple converter that converts a boolen to a visibility property.Visible : Visibility. public class BooleanToVisibilityConverter : IValueConverter { public object Convert(object value.Collapsed. A ValueConverter converts the value from a source type to a target type and back. Type targetType. ElementName=chkShowDetails.Resources> <CheckBox x:Name="chkShowDetails" Content="Show Details" /> <StackPanel x:Name="detailsPanel" Visibility="{Binding IsChecked. CultureInfo culture) { if (value is Boolean) { return ((bool)value) ? Visibility.NET framework. Collapsed or Hidden. you need a value converter. Note that such a converter is already part of the . WPF already includes some value converters but in most cases you will need to write your own by implementing the IValueConverter interface.ValueConverters If you want to bind two properties of different types together. object parameter. } . you need to use a ValueConverter.Resources> <BooleanToVisibilityConverter x:Key="boolToVis" /> </StackPanel. } return value. A typical example is to bind a boolean member to the Visibility property.

That's the point where the CollectionView comes into play. } } Tip: you can derive your value converter from MarkupExtension and return its own instance in the ProvideValue override. Group. object parameter. But when it comes to sorting. CultureInfo culture) { throw new NotImplementedException(). Sort and Filter Data in WPF What is a CollectionView? Navigation Filtering Sorting Grouping How to create a CollectionView in XAML What is a CollectionView? WPF has a powerful data binding infrastructure.public object ConvertBack(object value. It allows you to bind almost any kind of collection directly to a view. So you can use it directly without referencing it from the resources. How to Navigate. Type targetType. A collection view is a wrapper around a collection that provides the following additional features: Navigation Sorting Filtering Grouping y y y y . filtering and grouping the support of the collections is rare.

How to Create and Use a CollectionView The following example shows you how to create a collection view and bind it to a ListBox <Window xmlns="http://schemas.GetDefaultView(customers).com/winfx/2006/xaml/presentation" xmlns:x="http://schemas. } } public class CustomerViewModel { private ICollectionView _customerView.microsoft.microsoft.com/winfx/2006/xaml"> <ListBox ItemsSource={Binding Customers} /> </Window> public class CustomerView { public CustomerView() { DataContext = new CustomerViewModel(). _customerView = CollectionViewSource. } } Navigation . } } public CustomerViewModel() { IList<Customer> customers = GetCustomers(). public ICollectionView Customers { get { return _customerView.

IList<Customer> customers = GetCustomers(). _customerView. _customerView.Filter = CustomerFilter private bool CustomerFilter(object item) { Customer customer = item as Customer.GetDefaultView(customers).Name.Contains( _filterString ).GetDefaultView(customers). EventArgs e) { // React to the changed selection } You can also manually control the selection from the ViewModel by calling the MoveCurrentToFirst() or MoveCurrentToLast() methods on the CollectionView. <ListBox ItemsSource="{Binding Customers}" IsSynchronizedWithCurrentItem="True" /> If you are using a MVVM (Model-View-ViewModel) pattern. Now set the delegate of that method to the Filter property of the CollectionView and you're done. private CustomerSelectionChanged(object sender. That method should have the following signature: bool Filter(object item). ICollectionView _customerView = CollectionViewSource. If you set the property IsSynchronizedWithCurrentItem to True on the view that the collection is bound to.CurrentChanged = CustomerSelectionChanged.The collection view adds support for selection tracking. Filtering To filter a collection view you can define a callback method that determines if the item should be part of the view or not. return customer. } . because it's implicity available over the CollectionView. ICollectionView _customerView = CollectionViewSource. it automatically synchronizes the current item of the CollectionView and the View. you don't have to extra wire-up the SelectedItem of the control.

. Just add as many SortDescriptions as you like to the CollectionView ICollectionView _customerView = CollectionViewSource.Add( new SortDescription("FirstName". but also quite slow for a large amount of data. ListSortDirection.Ascending ). But there is an alternative. } set { _filterString = value.Ascending ). more performant way to do sorting by providing a custom sorter. because it internally uses reflection.SortDescriptions. The collection view makes it so easy to achieve this goal.Refresh the filter If you change the filter criteria and you want to refresh the view. } } Sorting Sorting data ascending or descending by one or multiple criterias is a common requirement for viewing data. _customerView. NotifyPropertyChanged("FilterString").SortDescriptions.Add( new SortDescription("LastName". you have to call Refresh() on the collection view public string FilterString { get { return _filterString. _customerView.GetDefaultView(customers). _customerView. Fast Sorting The sorting technique explained above is really simple.Refresh(). ListSortDirection.

Name. } } Grouping Grouping is another powerful feature of the CollectionView.Add(new PropertyGroupDescription("Country")). <ListBox ItemsSource="{Binding Customers}"> <ListBox. To make the grouping visible in the view you have to define a special GroupStyle on the view.GetDefaultView(customers).GroupStyle> <GroupStyle.CompareTo(custY.GroupDescriptions. as ListCollectionView. _customerView.HeaderTemplate> <DataTemplate> <TextBlock Text="{Binding Path=Name}"/> </DataTemplate> </GroupStyle.Name). You can define as many groups as you like by adding GroupDescriptions to the collection view. Note: Grouping disables virtualization! This can bring huge performance issues on large data sets. object y) { Customer custX = x as Customer. Customer custY = y as Customer. So be careful when using it. return custX.ListCollectionView _customerView = CollectionViewSource.GetDefaultView(customers).CustomSort = new CustomerSorter(). _customerView. public class CustomerSorter : IComparer { public int Compare(object x.HeaderTemplate> . ICollectionView _customerView = CollectionViewSource.

com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.</ListBox. y y y y .microsoft..GroupStyle> </ListBox> How to create a CollectionView in XAML It's also possible to create a CollectionView completely in XAML <Window xmlns="http://schemas.GroupDescriptions> <PropertyGroupDescription PropertyName="Country" /> </CollectionViewSource.GroupDescriptions> </CollectionViewSource> </Window. But this approach has some disadvantages: Presentation and logic are tightly coupled Replacing a control on the view often requires code changes You cannot have more than one view sharing the same logic To test the user interface logic you need to do complex UI testing.com/winfx/2006/xaml"> <Window. It is the most simple and fastest way to get a functional user interface..Resources> <ListBox ItemSource="{Binding Source={StaticResource customerView}}" /> </Window> Model-View-ViewModel Pattern This article is not yet finished.Resources> <CollectionViewSource Source="{Binding}" x:Key="customerView"> <CollectionViewSource.microsoft. Introduction In conventional user interface programming techniques (as we know it from WinForms) we usually add event handlers to controls and implement the logic of a view in the code-behind.

The idea of the MVVM pattern is the following: A model that contains the data A passive view-model that collects and prepares the data so that is can easy be consumed by the view. y And a view that is defined in XAML and should not have any logic in the codebehind. y y Model-View-ViewModel Example Model ViewModel View Data Validation in WPF . It binds to the view-model by only using data binding.Introducing the Model-View-ViewModel pattern WPF brings up a very flexible and powerful databinding framework and this favors a new pattern how to bind presentation and logic together.

If the user enters an invalid e-mail address.NET 3. public string Pattern { get { return _pattern. _regex = new Regex(_pattern. } .0 style) In this example I am implementing an generic validation rule that takes a regular expression as validation rule.IgnoreCase). If the expression matches the data is treated as valid. Implementing a ValidationRule (. } set { _pattern = value.What we want to do is a simple entry form for an e-mail address. /// <summary> /// Validates a text against a regular expression /// </summary> public class RegexValidationRule : ValidationRule { private string _pattern. the border of the textbox gets red and the tooltip is showing the reason. private Regex _regex. RegexOptions.

CultureInfo ultureInfo) { if (value == null || !_regex.[a-zA-Z][a-zA-Z\.ErrorContent} . "The value is not a valid e-mail address").Resources> <sys:String x:Key="emailRegex">^[a-zA-Z][\w\. In many samples on the web you see the following binding expression: {Binding RelativeSource={RelativeSource Self}.] *[a-zA-Z]$</sys:String> </Window.Errors)[0].} public RegexValidationRule() { } public override ValidationResult Validate(object value.-]*[a-zA-Z0-9]\.Success) { return new ValidationResult(false.ToString()). } else { return new ValidationResult(true. } } } First thing I need to do is place a regular expression pattern as string to the windows resources <Window.Match(value.Path=(Validation.Resources> Build a converter to convert ValidationErrors to a multi-line string The following converter combines a list of ValidationErrors into a string.-]*[a-zA-Z0-9]@ [a-zA-Z0-9][\w\. This makes the binding much easier. null).

Type targetType.Data Error: 16 : Cannot get µItem[]µ value (type µValidationError¶) from µ(Validation.[0]. DataItem=¶TextBox¶. } public object ConvertBack(object value. BindingExpression:Path=(0). This slows down your application and causes the following message in your debug window: System. } return string. This allows you to create and use it at the same time.. CultureInfo culture) { ReadOnlyObservableCollection<ValidationError> errors = value as ReadOnlyObservableCollection<ValidationError>.This expression works if there is one validation error.Windows. } .ErrorContent. object parameter. object parameter. typeof(string))] public class ValidationErrorsToStringConverter : MarkupExtension.Empty. CultureInfo culture) { throw new NotImplementedException(). [ValueConversion(typeof(ReadOnlyObservableCollection<ValidationError>). Type targetType. } public object Convert(object value. But if you don't have any validation errors the data binding fails. if (errors == null) { return string.Errors)¶ (type µReadOnlyObservableCollection`1 ). The converter is both.ToArray()). IValueConverter { public override object ProvideValue(IServiceProvider serviceProvider) { return new ValidationErrorsToStringConverter(). a value converter and a markup extension..Join("\n". (from e in errors select e.ErrorContent as string).

Text> </TextBox> .ValidationRules> <local:RegexValidationRule Pattern="{StaticResource emailRegex}"/> </Binding.ValidationRules> </Binding> </TextBox.} Create an ErrorTemplate for the TextBox Next thing is to create an error template for the text box. Path=AdornedElement. <ControlTemplate x:Key="TextBoxErrorTemplate" TargetType="Control"> <Grid ClipToBounds="False" > <Image HorizontalAlignment="Right" VerticalAlignment="Top" Width="16" Height="16" Margin="0. Converter={k:ValidationErrorsToStringConverter}}"/> <Border BorderBrush="Red" BorderThickness="1" Margin="-1"> <AdornedElementPlaceholder Name="adornedElement" /> </Border> </Grid> </ControlTemplate> The ValidationRule and the ErrorTemplate in Action Finally we can add the validation rule to our binding expression that binds the Text property of a textbox to a EMail property of our business object.0" Source="{StaticResource ErrorImage}" ToolTip="{Binding ElementName=adornedElement. <TextBox x:Name="txtEMail" Template={StaticResource TextBoxErrorTemplate}> <TextBox.Text> <Binding Path="EMail" UpdateSourceTrigger="PropertyChanged" > <Binding.Errors).-8.-8.(Validation.

when the databinding is established. } ValueConverters Introduction If you want to databind two properties that have incompatible types. How to implement a ValueConverter . private void ForceValidation() { txtName. This piece of code is called ValueConverter.TextProperty). that converts the value from source to target type and back. that implements the simple interface IValueConverter with the two methods object Convert(object value) and object ConvertBack(object value).UpdateSource(). In this case you cann call ForceValidation() in the Loaded event of the window.GetBindingExpression(TextBox. you need a piece of code in between. The following code shows how to get the binding expression from a property of a control. That is the time. A useful scenario could be to validate on LostFocus() even when the value is empty or to initially mark all required fields. A value converter is a class.How to manually force a Validation If you want to force a data validation you can manually call UpdateSource() on the binding expression.

xmlns:l="clr-namespace:VirtualControlDemo" . Type targetType...> <Window. public class BoolToVisibilityConverter : IValueConverter { public object Convert(object value. object parameter. Converter={StaticResource converter}}" /> . Type targetType. That's all you need to do. but you will soon need to implement your own converts.Window1" . Then you can create an instance of a value converter in the resources of the view and give it a name.. object parameter. CultureInfo culture) { // Do the conversion from bool to visibility } public object ConvertBack(object value. Then you can reference it by using {StaticResource} <Window x:Class="VirtualControlDemo. This is a common naming for value converters.WPF already provides a few value converts.Resources> <l:BoolToVisibilityConverter x:Key="converter" /> </Window.. Make it public and implement the IValueConverter interface. add a class to your project and call it [SourceType]To[TargetType]Converter. To do this. CultureInfo culture) { // Do the conversion from visibility to bool } } How to use a ValueConverter in XAML First thing you need to do is to map the namespace of your converter to a XAML namespace.Resources> <Grid> <Button Visibility="{Binding HasFunction.

This way you can create and use it in the binding like this: Text={Binding Time. A simple and cool trick is to derive value converters from MarkupExtension.</Grid> </Window> Simplify the usage of ValueConvers If you want to use a normal ValueConverter in XAML. System.g. } } StringFormat Converter The StringFormatConverter is a useful converter to control the format of an implicit string conversion of an object (e. if (!string. if you bind a DateTime to a TextBlock ). you have to add an instance of it to the resources and reference it by using a key. because and the key is typically just the name of the converter. [ValueConversion(typeof(object). IValueConverter { public object Convert(object value.Globalization. Type targetType. typeof(string))] public class StringFormatConverter : BaseConverter. Converter={x:MyConverter}}. and that is quite cool! public abstract class BaseConverter : MarkupExtension { public override object ProvideValue(IServiceProvider serviceProvider) { return this. This is cumbersome.CultureInfo culture) { string format = parameter as string. object parameter.IsNullOrEmpty(format)) { .

} public object ConvertBack(object value. . System. These components than can be attached to controls to give them an additional behavior.CultureInfo culture) { return null. Introduction Behaviors are a new concept.because of an attached drag behavior. object parameter.return string.Globalization. introduced with Expression Blend in Version 3.ToString(). } } Behaviors A simple Border can be dragged by mouse . Type targetType. format. } else { return value. value). to encapsulate pieces of functionality into a reusable component.Format(culture. The ideas behind behaviors are to give the interaction designer more flexibility to design complex user interactions without writing any code.

. input validation. he needs to discuss it with the developer and wait until the implementation is done. The list of possible behaviors is very long. In the asset library you find a new secion called "Behaviors". Imaging an application that has a list of customers and the user can add some of them to subscriber lists. By clicking on it you can configure the properties of the behavior. etc. With behaviors he just drags a drag and drop behavior on each list and we are done. Just grab one of these and drag it onto the element you want to add this behavior and thats it. The behavior appears as an child element in the visual tree.Example of a behaviors are drag&drop. How to use behaviors in Expression Blend 3 Using behaviors in Expression Blend is as simple as adding an element to the design surface. re-position of elements. This interaction can be designed by providing an "Add" button next to each subscriber list. pan and zoom. But if the interaction designer wants to add drag&drop functionality. It lists all behaviors available within your project. ..

This is an attached property called Interaction. This attached property holds the list of behaviors for that element and pass a reference to the element into the behavior. The idea is simple. They don't need any new infrastructure. <Border Background="LightBlue" > . The behavior than can register itself to events and property changes and so extend the functionality of the element. but very clever.How does it work To add behaviors to an element you need some kind of an extension point.Behaviors. they just reuse the existing one.

private Point mouseStartPosition. AssociatedObject. e) => { elementStartPosition = AssociatedObject.gt.MouseMove += (sender.Behaviors> <b:DragBehavior/> </e:Interaction. AssociatedObject.Current. and override the OnAttached() method.MainWindow.CaptureMouse().RenderTransform = transform. Just derive from Behavior<T. e) => { Vector diff = e.Behaviors> <TextBlock Text="Drag me around!" /> </Border> How to implement your own behavior The following example shows the implementation of the drag behavior we used above. private TranslateTransform transform = new TranslateTransform().MouseLeftButtonDown += (sender. public class DragBehavior : Behavior<UIElement> { private Point elementStartPosition. mouseStartPosition = e.MouseLeftButtonUp += (sender. AssociatedObject. }. parent ). AssociatedObject.GetPosition( parent ) .<e:Interaction.GetPosition(parent).mouseStartPosition. AssociatedObject.TranslatePoint( new Point().ReleaseMouseCapture(). . }. protected override void OnAttached() { Window parent = Application. e) => { AssociatedObject.

4" Margin="4">cool</Button> </StackPanel> .if (AssociatedObject.IsMouseCaptured) { transform.4" Margin="4">Styles</Button> <Button Background="Orange" FontStyle="Italic" Padding="8. transform. All your buttons should have an orange background and an italic font. Zoom Behavior Glass Behavior Shake Behavior Transparency Behavior y y y y Introduction to Styles in WPF Introduction Imagine you want to create an application with a unique design.X = diff.Y. <StackPanel Orientation="Horizontal" VerticalAlignment="Top"> <Button Background="Orange" FontStyle="Italic" Padding="8. I tried to make a list of some popular ones.Y = diff. } }.X. } } List of some popular behaviors Since its so cool and easy to create your own pice of interactivity.4" Margin="4">are</Button> <Button Background="Orange" FontStyle="Italic" Padding="8. I am sure that we will find hunderts of behaviors available soon. Doing this the conventional way means that you have to set the Background and the FontStyle property on every single button.

If you apply this style to an element it sets all properties with the specified values. <Window> <Window.4" /> <Setter Property="Margin" Value="4" /> </Style> </Window. To get it from the resources we use the {StaticResource [resourceKey]} markup extension. That's the reason why we need to specify a x:Key="myStyle" property that defines a unique resource identifier. The solution for this problem are styles. To make the style accessible to your controls you need to add it to the resources.Resources> <Style x:Key="myStyle" TargetType="Button"> <Setter Property="Background" Value="Orange" /> <Setter Property="FontStyle" Value="Italic" /> <Setter Property="Padding" Value="8. A style consists of a list of setters. Any control in WPF have a list of resources that is inherited to all controls beneath the visual tree. To apply the style to a control we set the Style property to our style.This code is neither maintainable nor short and clear.Resources> <StackPanel Orientation="Horizontal" VerticalAlignment="Top"> <Button Style="{StaticResource myStyle}">Styles</Button> <Button Style="{StaticResource myStyle}">are</Button> <Button Style="{StaticResource myStyle}">cool</Button> </StackPanel> </Window> What we have achieved now is . The concept of styles let you remove all properties values from the individual user interface elements and combine them into a style. The idea is quite similar to Cascading Styles Sheets (CSS) that we know from web development.

By setting this property to another instance of a control template. The default template is typically shipped together with the control and available for all common windows themes. that defines the states. you can completely replace the appearance (visual tree) of a control. that is identified by value of the DefaultStyleKey property that every control has. events and properties and template. . The template is defined by a dependency property called Template. <Style x:Key="baseStyle"> <Setter Property="FontSize" Value="12" /> <Setter Property="Background" Value="Orange" /> </Style> <Style x:Key="boldStyle" BasedOn="{StaticResource baseStyle}"> <Setter Property="FontWeight" Value="Bold" /> </Style> Control Templates Introduction Controls in WPF are separated into logic. This gives the control a basic appearance. The wireup between the logic and the template is done by DataBinding. This allows you to specify a base style that sets common properties and derive from it for specialized controls. Style inheritance A style in WPF can base on another style. that defines the visual appearance of the control. It is by convention wrapped into a style. Each control has a default template.y y y y A maintainable code base Removed the redundancy Change the appearance of a set of controls from a single point Possibility to swap the styles at runtime.

The following code sample shows a simple control template for a button with an ellipse shape. <Style x:Key="DialogButtonStyle" TargetType="Button"> <Setter Property="Template"> <Setter.Value> </Setter> </Style> <Button Style="{StaticResource DialogButtonStyle}" /> .Value> <ControlTemplate TargetType="{x:Type Button}"> <Grid> <Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}"/> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> </Grid> </ControlTemplate> </Setter.The control template is often included in a style that contains other property settings.

To display the content of another property you can set the ContentSource to the name of the property you like.IsLoaded you cannot use a normal Trigger.A Button without and with a custom control template ContentPresenter When you create a custom control template and you want to define a placeholder that renders the content. with {RelativeSource TemplatedParent} it will not work. It is not working in the Trigger section. The reason is. Triggers {RelativeSource TemplatedParent} not working in DataTriggers of a ControlTemplate If you want to bind to a property of a property on your control like Data. you can use the ContentPresenter. . you have to use a DataTrigger. But when you are using a DataTrigger. By default it adds the content of the Content property to the visual tree of the template. You have to use the {RelativeSource Self} instead. that TemplatedParent can only be used within the ControlTemplate. since it does not support this notation.

the DataContext is set the data object. Here you can find more information about DependencyProperty value precendence: Dependency Property Value Precedence Data Templates Introduction Data Template are a similar concept as Control Templates. you cannot override it within the controltemplate. Within a DataTemplate. So you can easily bind against the data context to display various members of your data object DataTemplates in Action: Building a simple PropertyGrid Whereas it was really hard to display complex data in a ListBox with WinForms. . ComboBox or ListView. With the data template we see the name of the property and a TextBox that even allows us to edit the value. it just calls ToString() on it.What if a Binding working or a Setter is not applied when using a control template There is something you need to know when setting a value of an element within a control template: The value does have a lower precendence as the local value! So if you are setting the local value in the constructor of the contained element. But if you use the element directly in your view. WPF takes the default template that is just a TextBlock. it will work. If you bind complex objects to the control. In my opinion this is one of the key success factory of WPF. its super easy with WPF. Without a DataTemplate you just see the result of calling ToString() on the object. So be aware of this behavior!. The following example shows a ListBox with a list of DependencyPropertyInfo instances bound to it. They give you a very flexible and powerful solution to replace the visual appearance of a data item in a control like ListBox. If you don't specify a data template.

ColumnDefinitions> <TextBlock Text="{Binding Name}" FontWeight="Bold" /> <TextBox Grid.Column="1" Text="{Binding Value }" /> </Grid> </DataTemplate> </ListBox.With DataTemplate --> <ListBox ItemsSource="{Binding}" BorderBrush="Transparent" Grid.Without DataTemplate --> <ListBox ItemsSource="{Binding}" /> <!-.ColumnDefinitions> <ColumnDefinition Width="Auto" SharedSizeGroup="Key" /> <ColumnDefinition Width="*" /> </Grid.ItemTemplate> </ListBox> How to use a DataTemplateSelector to switch the Template depending on the data .ItemTemplate> <DataTemplate> <Grid Margin="4"> <Grid.IsSharedSizeScope="True" HorizontalContentAlignment="Stretch"> <ListBox.<!-.

Window1" xmlns="http://schemas.microsoft. DependencyObject container). The following exmple shows an DataTemplateSelector that decides between tree data templates: public class PropertyDataTemplateSelector : DataTemplateSelector { public DataTemplate DefaultnDataTemplate { get. } } <Window x:Class="DataTemplates. In this method we decide on the provided item which DataTemplate to choose. } public override DataTemplate SelectTemplate(object item.IsEnum) { return EnumDataTemplate. if (dpi. } if (dpi.PropertyType. } public DataTemplate EnumDataTemplate { get. } return DefaultnDataTemplate. set. DependencyObject container) { DependencyPropertyInfo dpi = item as DependencyPropertyInfo. set.PropertyType == typeof(bool)) { return BooleanDataTemplate. set. The DataTemplateSelector has a single method to override: SelectTemplate(object item.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft. The simplest way to do this is to use a DataTemplateSelector.Our property grid looks nice so far. } public DataTemplate BooleanDataTemplate { get.com/winfx/2006/xaml" xmlns:l="clr-namespace:DataTemplates" . but it would be much more usable if we could switch the editor depending on the type of the property.

</DataTemplate> <!-. you have to bind the IsSelected property of the ListBoxItem.xmlns:sys="clr-namespace:System.IsSharedSizeScope="True" HorizontalContentAlignment="Stretch" ItemTemplateSelector="{StaticResource templateSelector}"/> </Grid> </Window> How to react to IsSelected in the DataTemplate If you want to change the appearance of a ListBoxItem when it is selected.assembly=mscorlib"> <Window... </DataTemplate> <!-.DataTemplate for Enums --> <DataTemplate x:Key="EnumDataTemplate"> .DataTemplate Selector --> <l:PropertyDataTemplateSelector x:Key="templateSelector" DefaultnDataTemplate="{StaticResource DefaultDataTemplate}" BooleanDataTemplate="{StaticResource BooleanDataTemplate}" EnumDataTemplate="{StaticResource EnumDataTemplate}"/> </Window.Resources> <Grid> <ListBox ItemsSource="{Binding}" Grid. you have to use a .Resources> <!-. </DataTemplate> <!-...DataTemplate for Booleans --> <DataTemplate x:Key="BooleanDataTemplate"> . But this is a bit tricky..Default DataTemplate --> <DataTemplate x:Key="DefaultDataTemplate"> ..

</Border> <DataTemplate. <DataTemplate x:Key="DefaultDataTemplate"> <Border x:Name="border" Height="50"> ..Path=IsSelected}" Value="True"> <Setter TargetName="border" Property="Height" Value="100"/> </DataTrigger> </DataTemplate.Triggers> <DataTrigger Binding="{Binding RelativeSource= {RelativeSource Mode=FindAncestor.relative source with FindAcestor to navigate up the visual tree until you reach the ListBoxItem.Triggers> </DataTemplate> . AncestorType= {x:Type ListBoxItem}}..

Sign up to vote on this title
UsefulNot useful