Corrado's BLogs

Model-View-ViewModel: Slides and Demos

Corrado Cavalli — Fri, 21 Nov 2008 11:52:44 GMT

I’ve had talk at recent Technical After Hours 2008 named WPF in Action dedicated Model-View-ViewModel pattern in WPF, so, as promised, here you can find associated slides and demos.
Slides are in Italian so they probably won’t help you much but demos are all in English (comments included) so you may find it more interesting.
Demos follow a specific order to describe the evolution from a classical winform style application to a final solution totally based on M-V-VM.

Trivial application that use Databinding to visualize a list of bikes.
Evolution of previous app that uses a control template that firstly introduces some of classical approach limitations.
First approach to M-V-VM pattern, incomplete under some aspects.
Migration of remaining part that uses WPF commanding model.
Test project for point 4.
Full application that includes navigation and necessary tricks to use M-V-VM in real world applications.

Have fun!

Slides – Demo

Technorati Tags: Model-View-ViewModel

Find databinding mistakes using PresentationTracesources.TraceLevel in Fx 3.5

Corrado Cavalli — Thu, 03 Apr 2008 09:58:03 GMT

Debugging WPF databinding problems can be sometimes a painful experience: consider this simple XAML fragment and its codebehind that doesn’t work due to mistakenly typed CustomerName inside binding expression.

<Window x:Class="WPF_Databind.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml             
    Title="Window1" Height="300" Width="00">
    <Grid>
        <TextBox 
            Text="{Binding Path=CustomerName}"
            Height="23" Margin="87,65,71,0" Name="textBox1" VerticalAlignment="Top" />
    </Grid>
</Window>

 
namespace WPF_Databind
{
    public partial class Window1 : Window
    {
        public Window1 ()
        {
            InitializeComponent();
            this.DataContext = new Customer() { Name = "Foo", Id = 42 };
        }
    }

    public class Customer
    {
        public string Name { get; set; }
        public int Id { get; set; }    
    }
}

Running this sample results in an empty Textbox: how do we get hints about what’s wrong with it? , the only place where we can look for a possible reason is Visual Studio output window (see below) and among various output messages search for some useful information like:

System.Windows.Data Error: 35 : BindingExpression path error: 'CustomerName' property not found on 'object' ''Customer' (HashCode=22613453)'. BindingExpression:Path=CustomerName; DataItem='Customer' (HashCode=22613453); target element is 'TextBox' (Name='textBox1'); target property is 'Text' (type 'String')

In some cases this wouldn’t help you much and you’d like to have more details about what’s wrong with your databinding, well starting from .NET Framework 3.5 you can thanks to PresentationTraceSources class.
Let’s modify our previous sample importing System.Diagnostics namespace (that’s where PresentationTraceSources lives even if hosted inside WindowsBase assembly) and applying it to our failing binding.

<Window x:Class="WPF_Databind.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:diag="clr-namespace:System.Diagnostics;assembly=WindowsBase"                
    Title="Window1" Height="300" Width="300">
    <Grid>
        <TextBox 
            Text="{Binding Path=CustomerName,diag:PresentationTraceSources.TraceLevel=High}"
            Height="23" Margin="87,65,71,0" Name="textBox1" VerticalAlignment="Top" />
    </Grid>
</Window>

Running sample again we can see a more verbose description of what really happens behind our binding:

System.Windows.Data Warning: 47 : Created BindingExpression (hash=14421545) for Binding (hash=33163964)
System.Windows.Data Warning: 49 : Path: 'CustomerName'
System.Windows.Data Warning: 51 : BindingExpression (hash=14421545): Default mode resolved to TwoWay
System.Windows.Data Warning: 52 : BindingExpression (hash=14421545): Default update trigger resolved to LostFocus
System.Windows.Data Warning: 53 : BindingExpression (hash=14421545): Attach to System.Windows.Controls.TextBox.Text (hash=35567111)System.Windows.Data Warning: 58 : BindingExpression (hash=14421545): Resolving source
System.Windows.Data Warning: 61 : BindingExpression (hash=14421545): Found data context element: TextBox (hash=35567111) (OK)
System.Windows.Data Warning: 62 : BindingExpression (hash=14421545): DataContext is null
System.Windows.Data Warning: 56 : BindingExpression (hash=14421545): Resolve source deferred
'WPF_Databind.vshost.exe' (Managed): Loaded 'C:\Windows\assembly\GAC_MSIL\PresentationFramework.Aero\3.0.0.0__31bf3856ad364e35\PresentationFramework.Aero.dll'
System.Windows.Data Warning: 58 : BindingExpression (hash=14421545): Resolving source
System.Windows.Data Warning: 61 : BindingExpression (hash=14421545): Found data context element: TextBox (hash=35567111) (OK)
System.Windows.Data Warning: 69 : BindingExpression (hash=14421545): Activate with root item Customer (hash=1669504)
System.Windows.Data Warning: 98 : BindingExpression (hash=14421545): At level 0 - for Customer.CustomerName found accessor <null>
System.Windows.Data Error: 35 : BindingExpression path error: 'CustomerName' property not found on 'object' ''Customer' (HashCode=1669504)'. BindingExpression:Path=CustomerName; DataItem='Customer' (HashCode=1669504); target element is 'TextBox' (Name='textBox1'); target property is 'Text' (type 'String')
System.Windows.Data Warning: 71 : BindingExpression (hash=14421545): TransferValue - got raw value {DependencyProperty.UnsetValue}
System.Windows.Data Warning: 77 : BindingExpression (hash=14421545): TransferValue - using fallback/default value ''
System.Windows.Data Warning: 78 : BindingExpression (hash=14421545): TransferValue - using final value ''

Available values for TraceLevel property are None,Low, Medium and High which result in different tracing details, and of course, don’t forget to remove it before releasing the application.

Note for Expression Blend users
It looks like that both Expression Blend 2.0 and 2.5 don’t recognize TraceLevel property so you won’t be able to see the artboard in presence of this attibute, but this will certainly be fixed in future releases.

Wanna fix this? :-)

Corrado Cavalli — Mon, 28 Aug 2006 16:15:00 GMT

Here I've found an interesting GUI for Sandcastle built by an MVP named Conrad (sounds familiar uh?) did a quick test and looks very promising, unfortunately it has some compiler issues and final chm is not generated.
Author lacks time for investigating problem further so he was kind enough to publish source code (C#)

Is anyone willing to catch the challenge?

Windows Vista Desktop Window Manager

Corrado Cavalli — Mon, 06 Mar 2006 20:15:00 GMT

An interesting post from Greg Schechter about Windows Vista's Desktop Window Manager and how it will change the way application deal with WM_PAINT.

XamlMigrate

Corrado Cavalli — Sun, 26 Feb 2006 18:33:00 GMT

Rob Reylea has posted a XamlMigrate tool that helps migration of Xaml files to Feb CTP, really nice job!

WinFX Feb CTP Available

Corrado Cavalli — Wed, 22 Feb 2006 22:07:00 GMT

WinFX Feb CTP has just been released.
No EID (Sparkle) available yet for this CTP but it will be soon :-)

Karsten has an interesting list of breaking changes.

Upcoming XAML changes

Corrado Cavalli — Sat, 18 Feb 2006 15:02:00 GMT

Rob Reylea announces some changes that we're gonna find on next WPF CTP.
Apart renaming renaming of xml urins it looks like that we won't need PI instructions anymore for CLR mapping, really hope Cider will handle this better as it does now...
Happy to read that an upgrade tool will be available...

EID: Applying style using triggers

Corrado Cavalli — Wed, 15 Feb 2006 23:50:00 GMT

“In XAML you can define a style and have it applied based on an Event,Property or DataBinding property change.
To give you an idea, here's a XAML fragment that sets some properties of a button when mouse is over it.

<Style TargetType="{x:Type Button}">
<Style.Triggers>
    <Trigger Property="IsMouseOver" Value="True">
    <Setter Property="FontSize" Value="20" />
    <Setter Property="Foreground" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>

To have the same result using EID (a.k.a “Sparkle”) you have to follow some steps.
Let's try, as demo, to have the background of a button changing when IsMouseOver property is true.

Start by drawing a button on scene's document root.
Right click and select to Edit a copy of the style (BTW: You can see the structure of original style on EID timeline)
Click on Timeline's Create new state button, you should now have a new [No Triggers] tab
On Timeline Properties Palette, press Add button and type IsMouseOver on left textbox and true on right one.
Now change the backcolor of the button, when finished press Return to scope root button.
Test the scene

You'll see backcolor change on MouseOver.
Editing is far than complete, I'm still not able to edit some properties (e.g. Opacity) and looks like that Event/DataBiding triggers are still work in progress, but you should have an idea of how thing should work.”

Using BitmapEffects

Corrado Cavalli — Fri, 10 Feb 2006 18:52:00 GMT

“You can easily apply effects like Blur or DropShadows to a UI element using BitmapEffects property.

This xaml sample:

<Image HorizontalAlignment="Left" VerticalAlignment="Top" Source="cor.jpg">
<Image.BitmapEffect>
<BitmapEffectGroup>
   <BitmapEffectGroup.Children>
    <BitmapEffectCollection>
      <BlurBitmapEffect Radius="2"/>
      <DropShadowBitmapEffect/>
    </BitmapEffectCollection>
   </BitmapEffectGroup.Children>
</BitmapEffectGroup>
</Image.BitmapEffect>
</Image>
<TextBox Text="Hello WPF">
<TextBox.BitmapEffect>
<BitmapEffectGroup>
    <BitmapEffectGroup.Children>
     <BitmapEffectCollection>
      <OuterGlowBitmapEffect GlowColor="Green" GlowSize="5" Noise="3" />
      <DropShadowBitmapEffect/>
     </BitmapEffectCollection>
    </BitmapEffectGroup.Children>
</BitmapEffectGroup>
</TextBox.BitmapEffect>
</TextBox>
Produces this effect:

As you can see various effects can be applied to the same element, just keep in mind that effects are processed in sequence so the order of appearance inside counts.”
Unfortunately Sparkle does not support direct editing of this property yet.

Databinding using "Sparkle"

Corrado Cavalli — Fri, 10 Feb 2006 14:59:00 GMT

How to create a user interface that displays data from an external DataSource using Expression Interactive Designer (“Sparkle“)

Create a new Visual C# Library project named PersonsDataSource
Remove Class1 and add both Person and Persons class (described in my previous blog)
Compile project, you should now have a PersonsDataSource dll.
Open Sparkle and create a new Project (File ->New Project) name it as you like.
Now let's add a reference to our PersonsDataSource.dll using Project->Add Item to browse to the previously created assembly.
You'll now see the dll listed under Project references.
Open the Data Palette (View->Data) and select Add new CLR DataSource, browse to PersonsDataSource and select Persons item, you should now see Persons listed inside Data palette.
Select Persons item from Data palette and drag it to Document root surface
You'll be asked to select how the Persons datasource will be displayed, select ListBox and click Ok.
The Create Data Template appears: This dialog allows you to 'shape' the DataTemplate associated to Person object, you can select what items and what controls to map to various Person fields (in this case dialog defaults to TextBlocks) leave defaults and click Ok.
You'll should see the listbox filled with Persons items.
We now want to add 2 texboxes that will be populated with Listbox selected item.
Select Library palette and drag two textboxes on DocumentRoot surface.
Select first texbox and, on Properties palette, click on Text field and select DataBind...
You'll now see the Create Data Binding dialog, we need to bind to Listbox selected item so click on Element Property and select ListBox.
Select SelectedItem among ListBox properties.
Listbox contains instances of Person classes so, select Use custom path expression and type “SelectedItem.Name” (without quotes) on related textbox, then click Ok.
Do the same with other textbox using “SelectedItem.Age” as custom path expression.
Press F5 and you'll see that selecting a listbox item selection will be reflected on both textboxes and that changes on textbox contents will be moved to underlying DataSource.