Tag Archives: WPF

Couple of methods missing on ObservableCollection

Posted by timvw on November 6, 2009 None comments

Here are a couple of methods that are missing on ObservableCollection<T>:

public static class ObservableCollectionExtensions
{
 public static void AddRange<t>(this ObservableCollection<t> observableCollection, IEnumerable<t> elements)
 {
  foreach (var element in elements) observableCollection.Add(element);
 }

 public static ObservableCollection<t> Create<t>(IEnumerable<t> elements)
 {
  var observableCollection = new ObservableCollection<t>();
  observableCollection.AddRange(elements);
  return observableCollection;
 }
}

Exploring graphical programming with Blend, Visual State Manager and Behaviors

Posted by timvw on October 16, 2009 2 comments

A while ago i presented the ControlStateMachine and in Silverlight this concept is implemented as the Visual State Manager.

In my sokoban implementation i have a cellview which exists out of 6 canvasses but only two of them (one for the cell type and one for the piece type) are visible at any given point in time. I have implemented this with 6 properties CanvasXVisible (with X being Player, Box, Wall, Goal, Floor and Cell) in my ViewModel but a State Machine / Manager may help clarify how the visibility of the canvasses are related. Here are the 2 visual state groups and their states that i would need for the CellView:

screenshot of visual state manager in expression blend

As you can see there is quite a lof of XAML involved to make the correct canvas visible:

 <storyboard>
  <objectAnimationUsingKeyFrames BeginTime="00:00:00"  Duration="00:00:00.0010000"
   Storyboard.TargetName="Space"  Storyboard.TargetProperty="(UIElement.Visibility)">
    <discreteObjectKeyFrame KeyTime="00:00:00">
     <discreteObjectKeyFrame.Value>
      <visibility>Visible</visibility>
     </discreteObjectKeyFrame.Value>
    </discreteObjectKeyFrame>
   </objectAnimationUsingKeyFrames>
  </storyboard>
</visualState>

For a simple modification to the Visibility property this seems like overkill but in many situations you will want to change more than this one property.

With the aid of the behaviors that come with Blend i can quickly add a couple of radio buttons, toss in some gotostate actions and end up with an interactive application:

screenshot of gotostate action properties

 <i:Interaction.Triggers>
  <i:EventTrigger EventName="Checked">
   <ic:GoToStateAction StateName="Wall1"/>
  </i:EventTrigger>
 </i:Interaction.Triggers>
</radioButton>

Feel free to try it yourself by changing the radio buttons:

Conclusion: All in all it is relatively easy to create interactive applications using Blend without writing a single line of code. Too bad that the behaviors are in an Expression assembly and don’t come with standard Silverlight. Another attention point is the maintainability of this new style of programming.

ViewModel to translate domain messages to view events

Posted by timvw on October 13, 2009 None comments

Here is an example of a ViewModel that translates domain messages to view events:

class GameViewModel : INotifyPropertyChanged, IListener<boardChanged>
{
 public event PropertyChangedEventHandler PropertyChanged = delegate { };

 public GameViewModel()
 {
  var messageBus = ServiceLocator.MessageBus;
  messageBus.Subscribe<boardChanged>(this);
 }

 void IListener<boardChanged>.Handle(BoardChanged message)
 {
  PropertyChanged("Board");
 }
}

About databinding and composite views

Posted by timvw on October 13, 2009 None comments

A couple of days ago i had a databound ItemsControl (collection of Model.Cell) which instantiated sub views (with their own viewmodel).

 <grid.Resources>
  <dataTemplate x:Key="CellTemplate">
   <views:CellView />
  </dataTemplate>
 </grid.Resources>
 <itemsControl
   ItemTemplate="{StaticResource CellTemplate}"
   ItemsSource="{Binding Cells}" />
</grid>

Because each CellViewModel needs to know which cell they manage i used the following dirty hack:

public CellView()
{
 Loaded += CellView_Loaded;
}

void CellView_Loaded(object sender, RoutedEventArgs e)
{
 DataContext = new CellViewModel(DataContext);
}

Later on that day i realised there was a much cleaner solution: Let the BoardViewModel expose a collection of ViewModels.CellViewModel instead of Model.Cell. What a relief that i don’t have to use the Loaded event hack :)

Exploring M-V-VM

Posted by timvw on October 13, 2009 None comments

A couple of years ago a collegue recommended Data Binding with Windows Forms 2.0: Programming Smart Client Data Applications with .NET and i noticed that my code started to gravitate towards an Model-View-ViewModel architecture. Due to shortcomings and painful experiences i gave up on databinding and began to use Passieve View instead.

Passive View doesn’t work (well) with smart views so i decided to give M-V-VM another because i really wanted to leverage WPF’s rich support for databinding.

The key difference between M-V-VM and Passive View is, imho, the fact that the ViewModel is unaware of the View unlike Passive View where the Presenter knows about the (simple) View.

When we test a Presenter i notice that we end up writing interaction based tests (assertions on a mocked view) and when we test a ViewModel we end up writing state-based tests instead.

Sokoban: Creating graphics with Expression Design

Posted by timvw on October 12, 2009 4 comments

Earlier this morning i decided to improve the graphics the little. I launched Expression Design, created a new image, and drew each possible cell and piece in a seperate layer. With this technique i can easily preview how a “Box” on “Goal” looks like.

For each layer i simply copied the XAML from Expression Design into my Cell.xaml file. Apparently all the layers are interpreted as a Canvas and the layer name determines their x:Name which makes it pretty easy to make the correct canvasses visible. With a simple ScaleTransform i can ensure that the canvasses are sized correctly.

Here is the updated version of Sokoban:

Silverlight wishlist

Posted by timvw on October 10, 2009 None comments

Here are the features that i would love to see in Silverlight:

  • Allow users to copy text from the UI (Or was the UX argument an excuse for playing with new toys?)
  • MSTEST (I know that Silverlight Unit Test Framework exists.)
  • Triggers (including data triggers)
  • Typed data templates
  • Uniform XAML (WPF: <Style TargetType={x:Type local:Foo}/> vs Silverlight: <Style TargetType={local:Foo}/>)
  • Uniform validation API (eg: Data Annotations has three flavors)
  • XAML with less namespaces (doesn’t really matter if you’re a designer only type)
  • Support for Desktop (‘regular’) .NET assemblies. As long as Desktop .NET assemblies are not supported, tools that automate the process of generating a ‘shadow’ .Silverlight project (eg: Prism has for each project a silverlight project that, ignoring the different assembly references, exists out of file references to the orginal project).
  • UniformGrid

Note: This list is not exhaustive and may change in the future.

About Expression Blend

Posted by timvw on October 5, 2009 None comments

At first i developed most WPF interfaces by writing XAML in the code view of Visual Studio. Those days are gone ;) These days i find it a lot easier to use Expression Blend (eg: paths, animations and timelines) but i reallly don’t like it that Blend adds design-time information to the XAML that is intended to be used in production code. A tool should not add clutter to your code!

I also dislike the fact that Blend adds values for Width and Height to each element by default. This requires me to hit that ‘auto’ square in the properties window for each element. What a waste of time :(