WPF and the mindset-change

I’ve recently been getting my hands dirty with WPF as a successor to WinForms, and one thing is for sure – its like i’m starting from ground zero, all over again…

One point which i’d heard while watching a screencast, is that working with WPF changes the developer mindset from “here is a visual component i wish to use” to “here is the behaviour i would like from a visual component”. I might be wrong, but i recall this as being referred to as the “visualless state” of controls. (i’ll try to find that reference and correct it).

Either way, it’s actually quite true. In WinForms, you pick a control because of the behaviour, but also because its appearance is something that (within reasonable tolerance) suits to your situation. In WPF, that concept of “the control which looks right” is gone. You can style/design your controls to look and behave in a way you would want. This was never clearer than the proof that you can turn a regular listbox as you know it in the Win32 control set to look like anything you want:

WPF Custom ListBox

…and the XAML is really straightforward – just style your item template to look exactly how you want. Good-bye owner drawing of Win32!

<pre>
<Window x:Class=”WPFCustomListBoxLayout.Window1″ xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” Title=”Window1″ Height=”300″ Width=”300″ Loaded=”Window_Loaded”>
<Grid>
<ListBox Name=”lstItems” MaxHeight=”300″>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush=”Blue” Margin=”4,0,4,0″ BorderThickness=”1″ CornerRadius=”3″>
<StackPanel Orientation=”Vertical”>
<StackPanel Orientation=”Horizontal” Background=”AntiqueWhite”>
<TextBlock FontSize=”16″ Text=”{Binding Path=FirstName}” />
<TextBlock FontSize=”16″ Text=” ” />
<TextBlock FontSize=”16″ Text=”{Binding Path=LastName}” />
</StackPanel>
<TextBlock FontSize=”12″ Text=”{Binding Path=Age}” />
<TextBlock FontSize=”12″ Text=”{Binding Path=FavouriteMovie}” />
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation=”Horizontal” />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
</Window>
</pre>

1 comment

Leave a Reply

Your email address will not be published. Required fields are marked *