I am a huge fan of WPF and more specifically Silverlight so when my wife took the opportunity to incorporate Expression Blend into a recent project I was eager for her to give the new Sketch Flow pattern a whirl. The Sketch Flow concept came across as the ability to mock up a complete application or website and transform that into a working production model. Effectively narrowing the gap between the client, designer and the developer. After working with my wife over the last couple of months it is clear that this particular idea was misrepresented.

My wife had created a prototype using the Sketch Flow concept and put together a very compelling, and partially functional, application. Unfortunately that fact that project was in fact Sketch Flow means that you just cannot simply open this application up in Visual Studio and start doing the complex software engineering work. In fact there a bunch of hoops (albeit well documented in Blends User Guide) that need to be followed in order to make this happen:

It is just clear to me that the role of the Devigner (Designer and Developer amalgam) is not a cohesive as advertised.

I have been working on a WPF side project at work and wanted to make a quick note about creating and consuming WPF user controls. My example was much more replete with details but i was more interested in making a note of the code that ties your XAML directly to the code.

So you create control in the normal VS type of way and this will give you a really basic XAML page (I have removed some of the distracting details). I have dropped a label on the screen as this will serve as the control that I will programmatically manipulate.

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="MyNameSpage.Dog"
    x:Name="UserControl"
    Width="Auto" Height="Auto" mc:Ignorable="d">

    <Canvas x:Name="ParentCanvas" PreviewMouseMove="ButtonMove" OpacityMask="#FF000000">
        <Label Grid.Column="0" Grid.Row="2" x:Name="NameLabel" HorizontalAlignment="Center" >ENGINEER</Label>
    </Canvas>
</UserControl>

and here is the associated partial class that documents our implementation code.

public partial class Dog
{

        public static readonly DependencyProperty DogsNameProperty = 
            DependencyProperty.Register("Dogs Name", typeof(string), typeof(Dog), 
             new FrameworkPropertyMetadata(DogsNamePropertyChange));


        public string DogsName
        {
            get
            {
                return (string)base.GetValue(DogsNameProperty);
            }
            set
            {
                base.SetValue(DogsNameProperty, value);
            }
        }
        

        private static void DogsNamePropertyChange(DependencyObject source, DependencyPropertyChangedEventArgs e)
        {
            (source as Dog).NameLabel.Content = (source as Dog).DogsName;
        }
}

• Basically we register the property using the DependencyProperty.Register method
• We make it publicly accessible via the DogsName property
• We monitor changes DogsNamePropertyChange

Simple!

I spent an eternity trying to figure out how to wrap text using WPF … here is the code snippet for future reference":

<Label Grid.Column="0" Grid.Row="1" x:Name="MyTitle" HorizontalAlignment="Center" FontFamily="Segoe UI" FontSize="12" MaxWidth="175">
    <TextBlock x:Name="MyText"  TextWrapping="Wrap">TITLE</TextBlock>
</Label>

I have just completed 10 day attack on Windows Presentation Foundation and after repeated false starts I have concluded I need to buy a book. In the age of Google search this may seem absurd to the average developer, however, after 8 days of trying to recreate a Windows Forms App (the other 2 days were actually useful) I am realizing I need to have a paradigm shift in my current mindset. Let us take the humble ListBox for example, the XAML would look something like this:

        <ListBox>
            <ListBoxItem>Item 1</ListBoxItem>
            <ListBoxItem>Item 2</ListBoxItem>
            <ListBoxItem>Item 3</ListBoxItem>
            <ListBoxItem>Item 4</ListBoxItem>
        </ListBox>

So I thought that was it I *know* List Boxes in WPF … WRONG! This is not even scratching the surface my friends! Our capable WPF designers have broken the ListBox into its simplest forms. For example let us trying creating a list of Rectangles

        <ListBox>
            <Rectangle Width="20" Height="20" Stroke="Yellow"  StrokeThickness="4" ></Rectangle>
            <Rectangle Width="20" Height="20" Stroke="Blue"  StrokeThickness="4" ></Rectangle>
            <Rectangle Width="20" Height="20" Stroke="Green"  StrokeThickness="4" ></Rectangle>
        </ListBox>

or ellipses…

        <ListBox>
            <Ellipse Width="20" Height="20" Stroke="Yellow"  StrokeThickness="4" ></Ellipse>
            <Ellipse Width="20" Height="20" Stroke="Blue"  StrokeThickness="4" ></Ellipse>
            <Ellipse Width="20" Height="20" Stroke="Green"  StrokeThickness="4" ></Ellipse>
        </ListBox>

…or any combination of the above. It is a type agnostic list of items you want to show. I can also orient the flow of list boxes as I see fit…

        <ListBox VerticalAlignment="Top">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel Orientation="Horizontal" IsItemsHost="True"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <Ellipse Width="20" Height="20" Stroke="Yellow"  StrokeThickness="4" ></Ellipse>
            <Ellipse Width="20" Height="20" Stroke="Blue"  StrokeThickness="4" ></Ellipse>
            <Ellipse Width="20" Height="20" Stroke="Green"  StrokeThickness="4" ></Ellipse>
        </ListBox>

Can you see why I need a book, at a casual glance I thought I really knew what was going on with a simple drag and drop, but on closer inspection it is clear that I am missing some underlying goodness through my own poor ignorance.

WPF rocks!!!