Monika Dyrda

Hello Caliburn – beginners guide to an amazing framework (1)

xmonix — Mon, 26 Oct 2009 19:46:00 GMT

I knew about Caliburn for some time but never really tried it until I've found a very simple solution to a problem that appeared complicated. After struggling a bit and asking some newbie-stupid questions on twitter I've decided to get to know the framework from the beginning. And of course I was trying to understand a big sample before reading any documentation so everything seemed very hard and complicated. Since I could not find any tutorial with a legendary 'hello caliburn' application I've decided to write one - for me to remember basics and maybe for someone else to get them too.

Caliburn gives a WPF developer a lot of helpers but for me the most important was to make me use presentation patterns properly, make my code neat, well organized, easy to read. I also hope to learn some about testability goods that comes with using Caliburn. This post is based on an application given as a sample with the release and shows how to build a very first Cliburn application.

CaliburnApplication

To make things easiest possible I've decided not to try manual configuration and use a CaliburnApplication class. It configured everything I needed. Now my application is:

using Caliburn.PresentationFramework.ApplicationModel;
namespace HelloCaliburn
{
   public partial class App : CaliburnApplication{}
}

<ApplicationModel:CaliburnApplication x:Class="HelloCaliburn.App"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:ApplicationModel="clr-namespace:
   Caliburn.PresentationFramework.ApplicationModel;
   assembly=Caliburn.PresentationFramework">
</ApplicationModel:CaliburnApplication>

View

<Window x:Class="HelloCaliburn.Views.MainView"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="Hello" Height="300" Width="300">
   <Label Margin="50" Content="Hello Caliburn! :-)"/>
</Window>

Presenter

namespace HelloCaliburn.Presenters
{
   public class MainPresenter : IMainPresenter {}
   public interface IMainPresenter {}
}

The only important thing to remember is naming conventions. Views should be named: My.Namespace.Views.NameView and presenters My.Namespace.Presenters.NamePresenter
It helps to have the same folders names (another benefit of Caliburn - I've learned that naming and putting things in common places is good and important)

Final application

One small method in the application class:

public partial class App : CaliburnApplication
{
    protected override object CreateRootModel()
    {
        return Container.GetInstance<IMainPresenter>();
    }
}

One attribute to register my presenter:

[PerRequest( typeof( IMainPresenter ) )]
public class MainPresenter : IMainPresenter
{
}

Hit F5 and done :-)

Happy caliburning ;-) Code here,

Monika

WPF: ListCollectionView for sorting, filtering and grouping

xmonix — Mon, 31 Aug 2009 18:00:00 GMT

I have written before that I need and like WPF lists (ListBox, ListView..) very much. Now I'd like to share a method to manipulate the view when being simply bound to a collection without touching this collection. It can be done in xaml as shown here but I don't like this approach very much because in my opinion operations like sorting, grouping belong to view model not directly view and no tests will be available if they are in view.

Example

So the sample problem is we have a view with a ListBox which ItemsSource is bound to an ObservableCollection. In my example I have a list of True Blood characters. Each creature has first name, last name, age (made up) and kind (it can be either vampire, human or mystery). A model of creature is (very simple just to have some data):

public class CreatureModel
{
       public CreatureModel( string firstName, string lastName, int age, 
                               CreatureKind kind )
       {
           this.FirstName = firstName;
           this.LastName = lastName;
           this.Age = age;
           this.Kind = kind;
       }

       public string FirstName { get; set; }
       public string LastName { get; set; }
       public int Age { get; set; }
       public CreatureKind Kind { get; set; }

       public override string ToString()
       {
           return string.Format( "{0} {1} {2} {3}", this.FirstName,
                            this.LastName, this.Age, this.Kind );
       }
   }

View is contains a ListBox and three buttons:

<ListBox ItemsSource="{Binding Path=CreaturesCollection}" />
<Button Content="Sort by age" 
   Command="{Binding Path=SortByAgeCommand}"/>
<Button Content="Filter Vampires" 
   Command="{Binding Path=FilterVampiresCommand}"/>
<Button Content="Group by kind" 
   Command="{Binding Path=GroupByKindCommand}"/>

View model for this problem is also simple – we need a collection of creatures and commands for sorting, filtering and grouping:

public ObservableCollection<CreatureModel> CreaturesCollection 
       { get; private set; }
public ICommand SortByAgeCommand 
       { get { return new DelegateCommand(this.SortByAge ); } }
public ICommand FilterVampiresCommand 
       { get { return new DelegateCommand( this.FilterVampires ); } }
public ICommand GroupByKindCommand 
       { get { return new DelegateCommand(this.GroupByKind ); } }

And now all the magic needed to implement three methods – parameters in DelegateCommand constructor is this method:

private ListCollectionView GetListCollectionView()
{
    return (ListCollectionView) CollectionViewSource
                    .GetDefaultView( this.CreaturesCollection );
}

CollectionViewSource

CollectionViewSource – when you set a binding to a collection, WPF makes it a binding to the default view for that collection. CollectionViewSource has a static method that lets getting this default view: CollectionViewSource.GetDefaultView and on the view filtering, grouping, sorting can be easily applied ListCollectionView is a default view for collections implementing IList.

Sorting – ListCollectionView.CustomSort

To apply sorting an implementation of IComperer is needed and it can be any implementation of this interface. I will use one that simply sorts creatures by age:

public class SortCreaturesByAge : IComparer
{
    public int Compare( object x, object y )
    {
        if( x as CreatureModel == null && y as CreatureModel == null )
        {
            throw new ArgumentException( "SortCreatures can 
                                    only sort CreatureModel objects." );
        }
        if( ((CreatureModel) x).Age > ((CreatureModel) y).Age )
        {
            return 1;
        }
        return -1;
    }
   }

Now I can implement a method used for SortByAgeCommand by setting CustomSort on ListCollectionView:

public ICommand SortByAgeCommand 
       { get { return new DelegateCommand(this.SortByAge ); } }
private void SortByAge()
{
    this.GetListCollectionView().CustomSort = new SortCreaturesByAge();
}

Unsorted and sorted collection:

Filtering – ListCollectionView. Filter

I would like to implement a filter which shows only vampires from the list of creatures. Filter is a Predicate<bool>. Even simpler than in sorting, we just need
a method that returns a bool deciding whether a parameter object is what we need:

private bool IsAVampire( object obj )
{
    if(obj as CreatureModel != null 
       && (obj as CreatureModel).Kind == CreatureKind.Vampire)
    {
        return true;
    }
    return false;
}

Clicking on “Filter vampires” shows only vampires :-)

Grouping

I would like to group all creatures on my list by kind. Kind is an enum:

public enum CreatureKind
{
    Human,
    Vampire,
    Mystery
}

Again ListCollectionView comes with a solution. All needed to be done is adding a property name that grouping will be based on. I this exaple – kind:

public ICommand GroupByKindCommand 
       { get { return new DelegateCommand(this.GroupByKind ); } }
private void GroupByKind()
{
    this.GetListCollectionView().GroupDescriptions.Add( 
             new PropertyGroupDescription { PropertyName = "Kind" } );       
}

Now list can be grouped:

Sum up

Grouping, filtering and sorting are supported by WPF very well and are easy to apply. I feel that my example is very basic and like always in WPF lots of customising can be done here. Next thing I plan to discover is a neat and smart way of setting data templates and styles for this kind of problems.

Code here. As always any suggestions very welcome.

Monika

Seadragon is so cool! ;-)

xmonix — Fri, 07 Aug 2009 08:52:00 GMT

I know this post may be useless for most people but I've been looking at seadragon and found it so cool I can't resist... :-)

WPF TextBox validation 2

xmonix — Tue, 28 Jul 2009 17:13:00 GMT

Many people asked me how to enable/disable button depending on a few TextBoxes. I would strongly recommend Caliburn but I know not everyone can use it. So I’ve decided to post a very simple solution to that problem.

First of all we need a ViewModel and I will use a very simple class which has IsValid method – checking if data is valid, ICommand property to be bound to a Button and an action to be executed when the button is pressed.

    class PersonViewModel
    {
        public string Name { get; set; }
        public int Age { get; set; }

        public bool IsValid()
        {
            if(string.IsNullOrEmpty(this.Name))
            {
                return false;
            }
            if(this.Age < 5 || this.Age > 120)
            {
                return false;
            }
            return true;
        }

        public ICommand OkCommand
        {
            get { return new DelegatedCommand(this.OkAction, this.IsValid); }
        }

        private void OkAction()
        {
            MessageBox.Show("ok!");
        }
    }

TextBox.Text properties can now be bound to properties of this class and button’s command can be bound to OkCommand. Automatically button will be enable when command can be executed and disabled when command cannot be executed:

<TextBox Text="{Binding Path=Name}"/>
<TextBox  Text="{Binding Path=Age}"/>
<Button Command="{Binding Path=OkCommand}" Content="ok"/>

My ICommand implementation in this example is very naive. Maybe a better one in a next post? :-)

Results disabled and enabled:

Code here

Monika

WPF ToolTip Content binding

xmonix — Fri, 10 Jul 2009 14:19:00 GMT

Did you know that content of a ToolTip is neither a part of visual nor logical tree? I didn't so I was trying to bind a ToolTip.Content using ElementName. And it didn't work:

<TextBlock Name="box" Text="Text to place inside tooltip" />
<Button Content="Can't Bind">
       <Button.ToolTip>
               <ToolTip Content="{Binding ElementName=box, 
                                                Path=Text}"/>
       </Button.ToolTip>
</Button>

Button has a tiny empty tooltip:

This code seemed perfectly fine for me so it took me a lot of time to google the answer. The only way to make that binding happen doesn't look nice but it's a simple trick: bind to a Grid DataContext. Seriously :-)

<Grid DataContext="{Binding ElementName=box, Path=Text}" >
     <Button Content="Tricky Evil Solution ;-)"/>
     <Grid.ToolTip>
      <ToolTip Content="{Binding Path=PlacementTarget.DataContext, 
                                       RelativeSource={RelativeSource Self}}"/>
       </Grid.ToolTip>
</Grid>

And now the tooltip looks ok:

My original problem was binding a ToolTip.Content to validation errors and I really needed a way to do that. Please tell me if you know a better one :-)
Code can be found here.

Monika

Update: This works too! :-)

<Button ToolTip="{Binding ElementName=box, Path=Text}"  />

WPF TextBox Validation

xmonix — Wed, 24 Jun 2009 16:05:00 GMT

Sample problem: set parameter by entering value into a TextBox, check if value is a number in given range, allow clicking a Button if validation was successful.

ValidationRule

ValidationRule is an abstract class from System.Windows.Controls that helps creating custom validation rules for user input. In this example a derived class DoubleRangeRule will check if user entered a number (double) within a given range (between Max and Min value).

public class DoubleRangeRule : ValidationRule
    {
        public double Min { get; set; }

        public double Max { get; set; }

        public override ValidationResult Validate( object value, 
                                                   CultureInfo cultureInfo )
        {
            double parameter = 0;

            try
            {
                if( ((string) value).Length > 0 )
                {
                    parameter = Double.Parse( (String) value );
                }
            }
            catch( Exception e )
            {
                return new ValidationResult( false, "Illegal characters or " 
                                             + e.Message );
            }

            if( (parameter < this.Min) || (parameter > this.Max) )
            {
                return new ValidationResult( false, 
                    "Please enter value in the range: " 
                    + this.Min + " - " + this.Max + "." );
            }
            return new ValidationResult( true, null );
        }
    }

Validation.ErrorTemplate

Having defined ValidationRule as above if user input is invalid, TextBox will have a red border. Like everything in WPF it is possible to customize it by setting a custom ControlTemplate. My template shows a warning sign and a label explaining error made by user (why input is invalid):

<ControlTemplate x:Key="TextBoxErrorTemplate">
    <StackPanel>
        <StackPanel Orientation="Horizontal">
            <Image Height="16" Margin="0,0,5,0" 
                    Source="Assets/warning_48.png"/>
            <AdornedElementPlaceholder x:Name="Holder"/>
        </StackPanel>
        <Label Foreground="Red" Content="{Binding ElementName=Holder, 
               Path=AdornedElement.(Validation.Errors)[0].ErrorContent}"/>
    </StackPanel>
</ControlTemplate>

Binding to validation result

On the result of validation can depend many things. For example I would like to bind button IsEnabled property to that deciding to enable button only in user input is valid. Simplest way, in my opinion is to check if TextBox has any validation errors and if no – make button enabled, disabled otherwise. With TextBox called Box (x:Name) binding of Button's IsEnabled property looks like that:

IsEnabled="{Binding ElementName=Box, Path=(Validation.Errors)[0], 
Converter={StaticResource buttonEnabled}}"

Final app

Finally we get a TexBbox with validation rules, tips on incorrect input and a Button bound to correctness of input.

<TextBox x:Name="Box" 
         Validation.ErrorTemplate="{StaticResource TextBoxErrorTemplate}">
    <TextBox.Text>
        <Binding Path="ValueInBox" UpdateSourceTrigger="PropertyChanged">
            <Binding.ValidationRules>
                <ValidationExpamples:DoubleRangeRule Min="0.5" Max="10"/>
            </Binding.ValidationRules>
        </Binding>
    </TextBox.Text>           
</TextBox>
<Button  Content="SaveChanges" 
         IsEnabled="{Binding ElementName=Box, Path=(Validation.Errors)[0], 
         Converter={StaticResource buttonEnabled}}"/>

If anyone had an idea how to do things like that a better way comments would be much appreciated. VS2008 project here.

Monika

DeepZoomPix and my trip to Paris

xmonix — Thu, 16 Apr 2009 14:59:00 GMT

DeepZoomPix is just amazing! Easy to use with great way of showing the world your photos. And it's Silverlight and Azure... :-)

Master-Detail patter implemented using WPF

xmonix — Fri, 13 Mar 2009 14:49:00 GMT

The master-detail pattern is a very neat way of displaying and organizing data that falls within some hierarchy. It is a quite efficient way of creating a custom user experience by allowing the user to start from various entry points and navigate to the items they are interested in. Master-detail pattern is used in almost all desktop and web applications so recently I also came across a problem that needed its implementation. If you've never done that and you like data binding as much as I do keep reading to see how it can be done in WPF :-)

Problem definition: I have a list of animal species and a list of examples for each of the species. Every example have some additional information. I would like to organize it nicely into two lists (species, examples) and a custom way of displaying the additional information. User will choose a species and see a list of examples, than he will choose an example an see the details.

Master-detail solution: (1) the list of species is a master for the examples list, the examples list is a detail for each item in the list of species (2) the examples list is a master for additional information, additional information is a detail for each item in the list of examples. So my solution will use master-detail patter twice.

Implementation details: LifeSource is an object of a data source containing all data I need to create this example. First of all I bind a collection of Spiecies to items source of a ListBox:

<ListBoxName="SpeciesListBox" 
    ItemsSource="{Binding Path=LifeSource.SpeciesCollection}"/>

Than another list box items source is bound to a selected element from the first one (species – examples):

<ListBox Name="AnimalsListBox" ItemsSource="{Binding 
    Path=SelectedItem.Animals, ElementName=SpeciesListBox}"/>

And last binding – some controls which will show the additional information about items from AnimalsListBox:

<Label Content="{Binding Path=SelectedItem.Name, 
                 Mode=OneWay, ElementName=AnimalsListBox}"/> 
<Label Content="{Binding Path=SelectedItem.LatinName, 
                 Mode=OneWay, ElementName=AnimalsListBox}"/>
<Image Source="{Binding Path=SelectedItem.Photo, 
                Mode=OneWay, ElementName=AnimalsListBox}" />

Finally the master-detail animal show (selected items have blue background):

Here you can find c#/xaml code and VS2008 project. All photos and information used in this example comes from Wikipedia.

UX Design Patterns

xmonix — Tue, 03 Feb 2009 16:54:19 GMT

Quince is a small Asian tree with pinkish flowers and pear-shaped fruit (as described here). But there is another thing called Quince. It’s a great source of knowledge about UX patterns.

I have found it very interesting and useful. Personal favorite: Hub and Spoke. Moreover in my opinion Quince itself is a very good example of well designed UI with amazing UX. So this evening I will dig in and hope to learn a lot :-)

Monika

WPF Binding ItemsSource to Enum

xmonix — Thu, 08 Jan 2009 19:39:00 GMT

I have found a very neat and simple way of binding an ItemControl to enum values. The trick is to use an ObjectDataProvider class which enables the creation of a XAML object available as a binding source.

To show an example first of all I need an enum:

public enum SampleEnum
{
     Dog,
     Cat,
     Scrat,
     Hefalump
}

To make it available for binding I will define it as a resource with an x:Key.

<Window x:Class="WpfApplication1.Window1"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:System="clr-namespace:System;assembly=mscorlib"
 xmlns:local="clr-namespace:WpfApplication1"
 Title="Bind to Enum" Height="250" Width="250">
<Window.Resources>
     <ObjectDataProvider x:Key="dataFromEnum"
       MethodName="GetValues" ObjectType="{x:Type System:Enum}">
          <ObjectDataProvider.MethodParameters>
               <x:Type TypeName="local:SampleEnum"/>
          </ObjectDataProvider.MethodParameters>
     </ObjectDataProvider>
</Window.Resources>
</Window>

This code creates the ObjectDataProvider in the window with ObjectType property set to Enum and MethodName property set to GetValues method of the Enum class. Then a specific enum (SampleEnum) is set to MethodParameter attribute.

Having this resource we can bind it as an ItemsSource to a ListView and Combobox (or any other ItemsControl) by setting items source:

ItemsSource="{Binding Source={StaticResource dataFromEnum}}"

The XAML for the window is as follows:

<Window x:Class="WpfApplication1.Window1"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:System="clr-namespace:System;assembly=mscorlib"
 xmlns:local="clr-namespace:WpfApplication1"
 Title="Bind to Enum" Height="250" Width="250">
<Window.Resources>
     <ObjectDataProvider x:Key="dataFromEnum"
       MethodName="GetValues" ObjectType="{x:Type System:Enum}">
          <ObjectDataProvider.MethodParameters>
               <x:Type TypeName="local:SampleEnum"/>
          </ObjectDataProvider.MethodParameters>
     </ObjectDataProvider>
</Window.Resources>
<Grid>
     <ListView ItemsSource="{Binding Source={StaticResource dataFromEnum}}"
      Margin="10,10,10,0" Height="80" VerticalAlignment="Top" />
     <ComboBox ItemsSource="{Binding Source={StaticResource dataFromEnum}}"
      Margin="10,0,10,80" Height="25" VerticalAlignment="Bottom" />
</Grid>
</Window>

The code behind for window is:

using System.Windows;
namespace WpfApplication1
{
     public partial class Window1 : Window
     {
          public Window1()
          {
               InitializeComponent();
          }
     }
     public enum SampleEnum
     {
          Dog,
          Cat,
          Scrat,
          Hefalump
     }
}

And the result:

Happy Binding! ;-)

Monika

WPF Control content with curly braces

xmonix — Wed, 07 Jan 2009 19:01:00 GMT

For some people it is obvious but for me it was quite a discovery when I’ve found out how to insert curly braces into a Text or Content of a control. Surely you can’t simply write:

<Button Content="{Curly braces here}"/>

because in XAML, braces identify markup extension syntax and you would get a compiler error ( The tag 'Curly' does not exist in XML namespace…).

Instead you should prefix the content with another pair of braces. Here is an example:

<StackPanel>
            <Button Content="{}{Curly braces here}" 
                    Margin="10" Width="120" />
            <TextBox Text="{}{Curly braces there}" 
             Margin="10" Width="120"/>
            <Label Content="{}{I can put them everywhere! ;-)}" 
             Margin="10" Width="180"/>
</StackPanel>

And the result looks like that:

I recommend reading WPF Recipes in C# 2008: A Problem-Solution Approach which has tons of this kind of useful recipes.

Monika

Merry Christmas!

xmonix — Wed, 24 Dec 2008 13:22:00 GMT

Merry Christmas and Happy New Year!

WPF ImageSource

xmonix — Sat, 13 Dec 2008 21:18:00 GMT

A little How-to put an image from embedded resources into your WPF application. I have found it very useful especially when working with ListView and creating value converters for it.

My solution for this examples looks like that:

1) ImageSource in XAML:

<Image Name="image1" 
Source="/ImageSourceExample;component/Assets/flower.jpg" />

Where ImageSourceExample is the assembly name.

2) ImageSource in c#

ImageSourceConverter imgConv = new ImageSourceConverter();
string path = "pack://application:,,/Assets/flower.jpg"
ImageSource imageSource = (ImageSource) imgConv.ConvertFromString(path);
image1.Source = imageSource;

To read more about pack URIs in WPF look here.

Monika

Hello World!

xmonix — Wed, 10 Dec 2008 18:22:00 GMT

As everyone can see this is my first blog post. I had some problems on startup but now I know all I need and an can start posting. I am very excited to share 'crazy WPF things I do' :-)

Thanks to Joe for giving me the opportunity to blog here and Krzysztof for encouraging me to start blogging.

Hope I won't disappoint those guys,

Monika