“If you work with Silverlight or WPF, you have probably met the phrase “MVVM”. Almost everyone who is anyone in the WPF / Silverlight scene has their own MVVM framework, and their own way of explaining and teaching MVVM. Scary terms like IoC, Dependency Injection, Commanding Frameworks, Event Aggregators, Unit Testing, etc just roll off the tongue of the MVVM experts. This is one of the reasons why MVVM is intimidating for a lot of people. Still, you can create perfectly valid MVVM applications without even knowing what those terms mean. This post will show you my approach to MVVM, which is hopefully simple enough to get you started.”

So, head over to Silverlight Show, and let me know what you think!

To see the article and the associated screencast, go to SilverlightShow.Net.

20100220-1

“As I promised earlier on Silverlight Show, this screencast series will show how to create the showcase application shown on www.response.hu (you may want to read the interview to get some background information on the project). The screencast series shows a real life example of how designers can add value to a project, and how a developer can support this effort by creating small, reusable behaviors that allow the designer to tweak things to shape the end result to be exactly as he wanted it.”

I would very much love to hear your opinion! Please leave feedback at the article, and let me know what you think about the format, the depth and the general direction it is going.

20100207-1

20100206-1

20100205-1

20100130-1

20100129-1

20100124-1

20100123-1

20100122-1

20100121-1

2010-1

Suppose, you have a TextBox that has a lot of settings on it:

<TextBlock Margin="50,96,0,0" VerticalAlignment="Top" Text="TextBlock" TextWrapping="Wrap" FontSize="96" FontFamily="Comic Sans MS" FontWeight="Bold" HorizontalAlignment="Left" Width="248">
    <TextBlock.Projection>
        <PlaneProjection RotationY="-57"/>
    </TextBlock.Projection>
    <TextBlock.Effect>
        <DropShadowEffect BlurRadius="9"/>
    </TextBlock.Effect>
    <TextBlock.Foreground>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="Black" Offset="0"/>
            <GradientStop Color="#FFE82E2E" Offset="1"/>
        </LinearGradientBrush>
    </TextBlock.Foreground>
</TextBlock>

Now, you want to take the font settings, the drop shadow and the Black-Blue foreground gradient and reuse it on another TextBlock. Here is where extracting the style comes handy.

First, select the TextBlock, and choose Object / Style / Create Empty from the menu. There is NO right click option for this command! Then choose a name for your style resource.

Now, we are in Resource editing mode:

On the Properties tab, you can see all our settings.

But the Property Peg is empty (gray). What happens if we click on it?

Now, if we click on “Convert To Local Value”, the Peg turns white, and the Foreground gradient will be moved to the style!

You can see that the TextBlock does not contain the Foreground property anymore, but the TextBlockStyle1 style does. We can go and “Convert to Local Value” for all properties we want in the style. Even the drop shadow and the Perspective transform can be extracted this way.

Here is the end result:

Nice and clean XAML for the TextBlock, and the style is ready to be reused. Great!

In the interview, I also revealed that I will be doing a series of articles / screencasts on how the www.response.hu showcase app was built. The focus will be on using Blend with tips and tricks, and creating custom behaviors to give designers maximum control over the user experience. Essentially, we will go from this:

To this:

The first article should be up on SilverlightShow within a few weeks. I’ll keep you posted :)

As a few of you may know, although I have technical background, I am really in love with Silverlight (and WPF) for the user experience it makes possible. I think my BIG thing was that I spread the love on tons of Silverlight and related topics during 2009. I had a 4 hour talk about UX, sketching and Sketchflow at the Architecture Forum; 4 hour talk about Silverlight, another one on NUI at the same place (and I got the highest ranks for the sketching talk out of 8 presenters). I talked about Silverlight 3 beta, and later about Silverlight 3 the next working day after it was released – in the middle of the summer, still over 90 people came. I participated in the local Silverlight 3 launch event later, in front of 500 people with sessions about SL3 and Blend. I had several other talks about Blend and Sketchflow, including a 5 minute(!) Sketchflow talk in front of Linux and Mac maniacs – and they liked it! I launched the Hungarian Silverlight User Group in December, and we already have 35 members, probably because they know me from the conferences. I wrote the WPF chapter of the book “Visual Studio 2010 and .Net Framework 4 Six-in-one” (http://www.amazon.com/Visual-Studio-2010-NET-Six/dp/0470499486), and convinced the editor to turn it around, focus on UX and Silverlight, and only add a little bit of WPF at the end. But the biggest result from all this preaching about UX and the great technologies that make it possible to concentrate on UX, is that I believe the Hungarian audience is starting to get it. They are realizing that getting developers to do UI may not be the best idea. They are realizing, that UX will be the differentiating factor for their products in the middle term. And spreading this word is my passion. Towards the last months of 2009, I started to receive feedback that the transition has started to happen in the minds of Hungarian developers and managers. This is probably what I am most proud of.

Another big thing for me (but maybe not for Silverlight :) ) is that I became part of this awesome group [Silverlight MVPs], and had the chance to meet many of you online, or even in person. 33 days from now, I will be sitting on a plane to meet even more fellow MVPs at the Summit. Can’t wait!

20100108-1

20100105-1

20100104-1

20100103-1

20100102-1

20100101-1

VisualStateManager.GoToState(control, "statename", true);

Unfortunately, this introduces a magic string, namely “statename”. The problem with the magic string here is that it creates a tight contract between the XAML (where the states are usually defined) and the code behind. It is very easy to mistype the name of the state in either place. Also, if the state is renamed by the designer in Blend, you get no compiler warnings or even runtime exceptions to point out the error.

Here is a small XAML sample using the Visual States to move an ellipse to the right of a Grid:

   1:      <Grid x:Name="LayoutRoot"  Background="LightBlue">

   2:          <VisualStateManager.VisualStateGroups>

   3:              <VisualStateGroup x:Name="SG1">

   4:                  <VisualStateGroup.Transitions>

   5:                      <VisualTransition GeneratedDuration="00:00:01">

   6:                          <VisualTransition.GeneratedEasingFunction>

   7:                              <ElasticEase EasingMode="EaseOut"/>

   8:                          </VisualTransition.GeneratedEasingFunction>

   9:                      </VisualTransition>

  10:                  </VisualStateGroup.Transitions>

  11:                  <VisualState x:Name="SG1Normal"/>

  12:                  <VisualState x:Name="SG1EllipseRight" >

  13:                      <Storyboard>

  14:                          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">

  15:                              <EasingDoubleKeyFrame KeyTime="00:00:00" Value="320"/>

  16:                          </DoubleAnimationUsingKeyFrames>

  17:                      </Storyboard>

  18:                  </VisualState>

  19:              </VisualStateGroup>

  20:          </VisualStateManager.VisualStateGroups>

  21:          <Ellipse x:Name="ellipse" Fill="Red" Stroke="Black" 

  22:                   Height="116" HorizontalAlignment="Left" Margin="50,98,0,0" 

  23:                   VerticalAlignment="Top" Width="235" RenderTransformOrigin="0.5,0.5" >

  24:              <Ellipse.RenderTransform>

  25:                  <TransformGroup>

  26:                      <ScaleTransform/>

  27:                      <SkewTransform/>

  28:                      <RotateTransform/>

  29:                      <TranslateTransform/>

  30:                  </TransformGroup>

  31:              </Ellipse.RenderTransform>

  32:          </Ellipse>

  33:      </Grid>

The key to my “discovery” is realizing that the VisualState elements have an x:Name attribute, and therefore fields get generated for them in the codebehind. So, instead of

VisualStateManager.GoToState(control, "SG1EllipseRight", true);

We can write:

 VisualStateManager.GoToState(this, SG1EllipseRight.Name, true);

Now, if the state gets renamed, at least we get a compiler error, and there is no way that you can mistype the state name.

Another advantage of accessing the states by name is that now it is easy to find when a state transition animation ends (like the one above). Just use the VisualState.Storyboard.Completed event:

SG1EllipseRight.Storyboard.Completed += (sender, args) => 
      MessageBox.Show("Ellipse move finished!");

That is two big problems that I had with Visual States solved. Now if only I could get the current state somehow…

Here is a little bonus:

You can also create some extension methods on VisualState as it may fit your way of thinking better:

    public static class VisualStateHelper
    {
        public static void Activate(this VisualState state, Control control, bool useTransitions)
        {
            VisualStateManager.GoToState(control, state.Name, useTransitions);
        }

        public static void Activate(this VisualState state, Control control)
        {
            state.Activate(control, true);
        }
    }

Now, to activate the SG1EllipseRight state above, all you have to write is:

SG1EllipseRight.Activate(this)

That’s all, folks!

20091226-1

The behavior itself is very simple:

   1:      public class TextBoxUpdateBehavior : Behavior<TextBox>

   2:      {

   3:          protected override void OnAttached()

   4:          {

   5:              base.OnAttached();

   6:              AssociatedObject.TextChanged += AssociatedObjectOnTextChanged;

   7:          }

   8:   

   9:          private void AssociatedObjectOnTextChanged(object sender, TextChangedEventArgs args)

  10:          {

  11:              var bindingExpr = AssociatedObject.GetBindingBLOCKED EXPRESSION;

  19:              AssociatedObject.TextChanged -= AssociatedObjectOnTextChanged;

  20:          }

  21:      }

The key is in the TextChanged event handler. We simply get the Binding expression for the Text property of the TextBox, and call UpdateSource on it.

I tested the behavior with both UI-2-UI binding and with binding to a ViewModel. Both work flawlessly, and they even work at the same time as this screenshot shows:

As you can see, the cursor is still in the TextBox, so I have not moved the focus away after typing.

Here is the entire XAML:

   1:  <UserControl

   2:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

   5:      mc:Ignorable="d" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:local="clr-namespace:SLTextBoxUpdateBinder" x:Class="SLTextBoxUpdateBinder.MainPage"

   6:      d:DesignWidth="640" d:DesignHeight="480">

   7:      <UserControl.DataContext>

   8:          <local:TestVM />

   9:      </UserControl.DataContext>

  10:      <Grid x:Name="LayoutRoot">

  11:   

  12:          <StackPanel>

  13:              <StackPanel Orientation="Horizontal">

  14:                  <TextBlock Text="Binding using ViewModel: " Margin="10"/>

  15:                  <TextBlock Text="{Binding TestProperty}" Margin="10" />

  16:                  <Rectangle Fill="Black" Width="1" />

  17:                  <TextBlock Text="Binding using UI-2-UI binding" Margin="10" />

  18:                  <TextBlock Text="{Binding Text, ElementName=tb}" Margin="10" />

  19:              </StackPanel>

  20:              <StackPanel Orientation="Horizontal">

  21:                  <TextBlock Text="Enter text here to see it shown above. No need to tab away!" Margin="10" />

  22:                  <TextBox x:Name="tb" Text="{Binding TestProperty, Mode=TwoWay}" >

  23:                      <i:Interaction.Behaviors>

  24:                          <local:TextBoxUpdateBehavior/>

  25:                      </i:Interaction.Behaviors>

  26:                  </TextBox>

  27:              </StackPanel>

  28:          </StackPanel>

  29:      </Grid>

  30:  </UserControl>

I have attached the solution to this blog post. Marry Christmas everyone!

20091223-1

20091219-1