C# and Everything .Net

Update: The Need for ViewModels

noreply@blogger.com (Vyas Bharghava) — Thu, 11 Mar 2010 05:09:00 +0000

Well, I left out something that was very close to my heart having been developing UI based applications for such a long time. That’s testability: How do you Unit Test your UI with standard / Open Source tools (Project White – now rechristened White - is one I experimented with couple of years ago). Though, Microsoft has made it easier than ever before to automate UI for testing with Automation APIs, if your UI is clearly separated, you could just use MSTest/XUnit frameworks to Unit test.

Using ICommand & Triggers – Approach #1

noreply@blogger.com (Vyas Bharghava) — Wed, 03 Mar 2010 08:52:00 +0000

The ChessboardViewModel defines a event handler by exposing a PieceSelectedHandler property. This property returns an object implementing the ICommand interface. The Style trigger on the BoardSquareView binds to this property by accessing the Parent property of the BoardSquareViewModel. The Parent property on the current ViewModel allows accessing the ViewModel's enclosing ViewModel, which in this case is the ChessboardViewModel.

Traversing the ViewModel tree like this adds dependencies and I believe should be used judiciously. This is where RoutedCommands and events could fit right in. More on this later. ~~Blogging from an iPhone is not easy~~! [Update: Edited from “I’m a PC” ;)]

Even though, the CanExecute() and Execute() is called – correctly – if I were to wire up the command from the style trigger as below, there’re few issues:

            <Style.Triggers>
                <Trigger Property="IsChecked" Value="true">
                    <Setter Property="Background" Value="DarkBlue" />
                    <Setter Property="Foreground" Value="LightGreen" />
                    <Setter Property="BorderBrush" Value="LightGreen" />
                    <Setter Property="BorderThickness" Value="2" />
                    <Setter Property="CommandParameter" Value="{Binding}"/>
                    <Setter Property="Command" Value="{Binding Parent.PieceSelectedHandler}"/>
                </Trigger>
            </Style.Triggers>

CanExecute() – and Execute() subsequently - get called twice for a single click
Order of CommandParameter assignment seem to matter. If CommandParameter is assigned after Command property assignment, the first call to CanExecute() is passed ‘null’
None of the auto-magic enablement/disablement of buttons (not RadioButtons?) associated with RoutedCommands are evident when you use ICommand

Shatranj Updated

noreply@blogger.com (Vyas Bharghava) — Tue, 02 Mar 2010 09:43:00 +0000

ViewModel tree has been introduced and been tied to the Views.

Next Steps:

Have the board respect turns
On selection, a piece must indicate on board the legal moves
The player should be able to move his/her piece to the desired square
Player should be able to customize the starting position of the board
Integrate with Huo Chess
Port to Silverlight 4.0
Make it a multi-player game?

The Need for ViewModels

noreply@blogger.com (Vyas Bharghava) — Tue, 02 Mar 2010 08:07:00 +0000

A Recap:

A GameView –> ChessboardView –> ItemsTemplate –> Items (BoardSquareView in DataTemplate)
GameView uses Game object (Model) as a resource or creates and assigns the Game object to GameView’s DataContext property
Game exposes Chessboard as property
Chessboard exposes ObservableCollection of BoardSquare objects

The code we’ve seen thus far there’s no real difference in functionality if we do not have ViewModels. In fact, we could use the code-behinds to infuse Views with ViewModel behaviour. Of course, at design time, there’s still a clean separation:

XAML is in a separate file
Code-behind is a separate file too

In classic implementation, you typically would have tons of code assigning values to the controls and objects here. Let’s just forget for now what pundits would say about such implementation!

Models

Unfortunately, at compile time and hence at runtime, the view requires the code-behind. Since code-behind is so intricately entwined with the view, it’s important to shun it for holding the UI state.

Why is UI state such a big deal? Now, let’s say we want to hold state of the controls. For example, we have a ‘Turn’ property in the Chessboard model indicating whose turn it is. We could use it to control which ones to enable and disable. Assume, we’ll use triggers ingeniously to control and make the view hold this state. The more complex the interactions, the more complex the view would become. Does that belong there?

Another question is do we care? Why is this important that we use this another level of indirection?

It’s elementary, my dear Watson!

It’s all about replacing the View at will. When XAML allows you to craft your individual controls on screen to such granularity, why turn your back for replacing your application’s entire UI? Assume, you want to deliver your applications in multiple flavors. One that takes full advantage of WPF and yet another that runs inside the browser.

Silverlight 3.0, for example, doesn’t support many of the features that WPF provides. Triggers are one. We’ll see what it takes to do this when we release Shatranj for Silverlight 4.0.

Lo and behold! Enter ViewModels!

Technorati Tags: Shatranj,ViewModels,Silverlight,WPF

Shatranj – WPF Dependency Property value providers & Resolving Conflicts

noreply@blogger.com (Vyas Bharghava) — Sun, 28 Feb 2010 23:19:00 +0000

We’ve couple of wrinkles in the “final” code there.

Border has a name specified. It’s not a problem in itself. Problem is the name is used by the template style trigger to set the value.
Both values are specified using Template triggers and when there’s a conflict, the last one wins. This is a big one!

Border properties values do not respect the values set at RadioButton level

Fix

1. Use TemplateBinding

<Border BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

2. Move the ‘IsSelected’ trigger to an a value provider of higher precedence. From Adam Nathan’s WPF Unleashed, the precedence is as below:

Local value
Style triggers
Template triggers
Style setters
Theme style triggers
Theme style setters
Property value inheritance
Default value

So we have 2 options:

Use code-behind and directly set values (Local value)
Use Style triggers

        protected override void OnClick()
        {
            base.OnClick();
            var context = this.DataContext as BoardSquare;
            this.Background = new SolidColorBrush(Colors.DarkBlue);
            this.Foreground = new SolidColorBrush(Colors.LightGreen);
            this.BorderBrush = new SolidColorBrush(Colors.LightGreen);
            this.BorderThickness = new Thickness(2);
            //context.Select(true, MoveOptions.AllApplicable);
        }

Style Triggers

     
    1 <RadioButton x:Class="Shatranj.BoardSquareView" 
    2             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    3             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    4             xmlns:Shatranj="clr-namespace:Shatranj">
    5 
    6   <RadioButton.Resources>
    7     <Shatranj:ForceToGroupNameConverter x:Key="ForceToGroupNameConverter" />
    8     <Style TargetType="{x:Type Shatranj:BoardSquareView}">
    9       <Setter Property="IsChecked" Value="false" />
   10       <Setter Property="Background" 
   11               Value="{Binding Converter={StaticResource LocationToColorConverter}, 
   12                             Mode=OneWay}" />
   13       <Setter Property="BorderThickness" Value="0" />
   14       <Setter Property="GroupName" 
   15               Value="{Binding Converter={StaticResource ForceToGroupNameConverter}}" />
   16       <Setter Property="Template">
   17         <Setter.Value>
   18           <ControlTemplate TargetType="{x:Type Shatranj:BoardSquareView}">
   19             <ControlTemplate.Resources>
   20               <Style TargetType="RadioButton">
   21                 <Setter Property="Background" 
   22                         Value="{Binding Converter={StaticResource LocationToColorConverter}, 
   23                                       Mode=OneWay}" />
   24               </Style>
   25               <Shatranj:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
   26             </ControlTemplate.Resources>
   27 
   28             <Grid Background="{TemplateBinding Background}">
   29               <Grid.RowDefinitions>
   30                 <RowDefinition Height="0.200*" />
   31                 <RowDefinition Height="0.800*" />
   32               </Grid.RowDefinitions>
   33               <Grid.ColumnDefinitions>
   34                 <ColumnDefinition />
   35               </Grid.ColumnDefinitions>
   36               <Border BorderBrush="{TemplateBinding BorderBrush}" 
   37                       BorderThickness="{TemplateBinding BorderThickness}" 
   38                       Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" />
   39               <Viewbox Grid.Row="0" Grid.Column="0" 
   40                       HorizontalAlignment="Right" VerticalAlignment="Stretch">
   41                 <TextBlock FontSize="12" 
   42                           FontFamily="Consolas" 
   43                           Text="{Binding Path=AlgebraicIdentity, Mode=OneWay}" />
   44               </Viewbox>
   45               <Viewbox Grid.RowSpan="2" Grid.Row="0" 
   46                       HorizontalAlignment="Center" VerticalAlignment="Center">
   47                 <TextBlock FontFamily="Chess Cases" 
   48                           Margin="3,3,3,3" 
   49                           Text="{Binding Path=CurrentPiece.AltChar, 
   50                                         Mode=OneWay}" />
   51               </Viewbox>
   52 
   53               <Ellipse 
   54                 MaxHeight="30" MaxWidth="30" 
   55                 MinHeight="10" MinWidth="10" 
   56                 Grid.Row="0" Grid.RowSpan="2" 
   57                 Visibility="{Binding IsHit, 
   58                                     Converter={StaticResource BoolToVisibilityConverter}}">
   59                 <Ellipse.Fill>
   60                   <SolidColorBrush Color="Black" Opacity="0.5" />
   61                 </Ellipse.Fill>
   62               </Ellipse>
   63 
   64             </Grid>
   65 
   66             <ControlTemplate.Triggers>
   67               <Trigger Property="IsMouseOver" Value="true">
   68                 <Setter Property="Foreground" Value="Red" />
   69                 <Setter Property="Background" Value="Black" />
   70                 <Setter Property="BorderBrush" Value="Red" />
   71                 <Setter Property="BorderThickness" Value="2" />
   72               </Trigger>
   73             </ControlTemplate.Triggers>
   74           </ControlTemplate>
   75         </Setter.Value>
   76       </Setter>
   77       <Style.Triggers>
   78         <Trigger Property="IsChecked" Value="true">
   79           <Setter Property="Background" Value="DarkBlue" />
   80           <Setter Property="Foreground" Value="LightGreen" />
   81           <Setter Property="BorderBrush" Value="LightGreen" />
   82           <Setter Property="BorderThickness" Value="2" />
   83         </Trigger>
   84       </Style.Triggers>
   85     </Style>
   86   </RadioButton.Resources>
   87 </RadioButton>

Yes, now when you hover d2, d3 or d7, the selected highlight remains (remember, we have three distinct RadioButton groups there)! Of course, we need to make sure only one group is selectable at any one point of time. Topic for further posts!

Technorati Tags: Shatranj,WPF,PropertyValueProviders,StyleTriggers

Shatranj – Convert to Control (3 of 3): TemplateBinding, Styles & Triggers

noreply@blogger.com (Vyas Bharghava) — Sun, 28 Feb 2010 09:22:00 +0000

So we’ve a background color issue! Let’s call Snoop to rescue:

Snoop shows that the background of square is – correctly – set to LightBlue by Style! Still it doesn’t show up on the UI. That’s simple, because any property not set by Template is replaced by the defaults!

Since I couldn’t figure out how to set the Background on the RadioButton from within ControlTemplate, the best thing I could do was:

<Grid

Background="{Binding Path=Background,

RelativeSource={RelativeSource Mode=FindAncestor,

AncestorType={x:Type Shatranj:BoardSquareView}}}"

It worked! Then:

One problem down! Let’s refactor the code to distinguish between two players. Their squares must belong to different groups so they can be selected independently.

Let’s refactor the code to distinguish between two players. Their squares must belong to different groups so they can be selected independently:

1 <RadioButton x:Class="Shatranj.BoardSquareView"

    2             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    3             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    4             xmlns:Shatranj="clr-namespace:Shatranj" >
    5 
    6     <RadioButton.Resources>
    7         <Shatranj:ForceToGroupNameConverter x:Key="ForceToGroupNameConverter"/>
 
Remember, each BoardSquareView has its DataContext set to a “BoardSquare” object.  BoardSquare object among other things has a CurrentPiece property (of type ChessPiece), which in turn has a property called ‘Force’:
 
ForceToGroupNameCoverter.cs has three pertinent lines:
 
   16             var square = value as BoardSquare;
   17             if(square == null || square.CurrentPiece == null) return "None";
   18             return Enum.GetName(typeof (Army), square.CurrentPiece.Force);

This divides the whole board into three groups. One with White pieces, one with Black pieces and one another with no pieces (Grouped into ‘None’).

When it’s a player’s turn (playing White/Black), the player should only be able to select one of his/her piece for making the move
This also applies to the opponent
When any of the empty squares are captured by either players, that square is owned by the piece occupying it.

Here’s the final version:

    1 <RadioButton x:Class="Shatranj.BoardSquareView"  
    2             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    3             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    4             xmlns:Shatranj="clr-namespace:Shatranj" >
    5     <RadioButton.Resources>
    6         <Shatranj:ForceToGroupNameConverter x:Key="ForceToGroupNameConverter"/>
    7         <Style TargetType="{x:Type Shatranj:BoardSquareView}">
    8             <Setter Property="IsChecked" Value="false"/>
    9             <Setter Property="Background" Value="{Binding Converter={StaticResource LocationToColorConverter}, Mode=OneWay}"/>
   10             <Setter Property="GroupName" Value="{Binding Converter={StaticResource ForceToGroupNameConverter}}"/>
   11             <Setter Property="Template">
   12                 <Setter.Value>
   13                     <ControlTemplate TargetType="{x:Type Shatranj:BoardSquareView}">
   14                         <ControlTemplate.Resources>
   15                             <Style TargetType="RadioButton">
   16                                 <Setter Property="Background" 
   17                                        Value="{Binding Converter={StaticResource LocationToColorConverter}, Mode=OneWay}"/>
   18                             </Style>
   19                             <Shatranj:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
   20                         </ControlTemplate.Resources>
   21 
   22                         <Grid Background="{TemplateBinding Background}">
   23                                 <Grid.RowDefinitions>
   24                                     <RowDefinition Height="0.200*" />
   25                                     <RowDefinition Height="0.800*" />
   26                                 </Grid.RowDefinitions>
   27                                 <Grid.ColumnDefinitions>
   28                                     <ColumnDefinition />
   29                                 </Grid.ColumnDefinitions>
   30                                 <Border x:Name="Border" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" />
   31                                 <Viewbox Grid.Row="0" Grid.Column="0" 
   32                                         HorizontalAlignment="Right" VerticalAlignment="Stretch">
   33                                     <TextBlock FontSize="12" 
   34                                               FontFamily="Consolas" 
   35                                               Text="{Binding Path=AlgebraicIdentity, Mode=OneWay}" />
   36                                 </Viewbox>
   37                                 <Viewbox Grid.RowSpan="2" Grid.Row="0" 
   38                                         HorizontalAlignment="Center" VerticalAlignment="Center">
   39                                     <TextBlock FontFamily="Chess Cases" 
   40                                               Margin="3,3,3,3" 
   41                                               Text="{Binding Path=CurrentPiece.AltChar, Mode=OneWay}" />
   42                                 </Viewbox>
   43 
   44                                 <Ellipse MaxHeight="30" MaxWidth="30" MinHeight="10" MinWidth="10" 
   45                                         Grid.Row="0" Grid.RowSpan="2" 
   46                                         Visibility="{Binding IsHit, Converter={StaticResource BoolToVisibilityConverter}}" >
   47                                     <Ellipse.Fill>
   48                                         <SolidColorBrush Color="Black" Opacity="0.5"/>
   49                                     </Ellipse.Fill>
   50                                 </Ellipse>
   51 
   52                             </Grid>
   53 
   54                         <ControlTemplate.Triggers>
   55                                 <Trigger Property="IsChecked" Value="true">
   56                                     <Setter Property="Background" Value="DarkBlue"/>
   57                                     <Setter Property="Foreground" Value="LightGreen" />
   58                                     <Setter TargetName="Border" Property="BorderBrush" Value="LightGreen"/>
   59                                     <Setter TargetName="Border" Property="BorderThickness" Value="2"/>
   60                                 </Trigger>
   61                                 <Trigger Property="IsMouseOver" Value="true">
   62                                     <Setter Property="Foreground" Value="Red" />
   63                                     <Setter Property="Background" Value="Black"/>
   64                                     <Setter TargetName="Border" Property="BorderBrush" Value="Red"/>
   65                                     <Setter TargetName="Border" Property="BorderThickness" Value="2"/>
   66                                 </Trigger>
   67                         </ControlTemplate.Triggers>
   68                     </ControlTemplate>
   69                 </Setter.Value>
   70             </Setter>
   71         </Style>
   72     </RadioButton.Resources>
   73 </RadioButton>

Yes, WPF is nothing short of revolutionary!

Shatranj – Convert to Control (2 of 3): ControlTemplate to replace default UI

noreply@blogger.com (Vyas Bharghava) — Sun, 28 Feb 2010 08:35:00 +0000

Our first task is to prevent the RadioButton’s default UI from showing up. Let’s move the ContentPresenter inside Style into a ControlTemplate:

    1 <RadioButton x:Class="Shatranj.BoardSquareView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Shatranj="clr-namespace:Shatranj" Background="{Binding Converter={StaticResource LocationToColorConverter}}">
    2 
    3     <RadioButton.Resources>
    4         <Style TargetType="{x:Type Shatranj:BoardSquareView}">
    5             <Setter Property="Template">
    6                 <Setter.Value>
    7                     <ControlTemplate>
    8                         <ContentPresenter>
    9                             <ContentPresenter.Content>
   10                                 <Grid>
   11                                     <Grid.RowDefinitions>
   12                                         <RowDefinition Height="0.200*" />
   13                                         <RowDefinition Height="0.800*" />
   14                                     </Grid.RowDefinitions>
   15                                     <Grid.ColumnDefinitions>
   16                                         <ColumnDefinition />
   17                                     </Grid.ColumnDefinitions>
   18 
   19                                     <Viewbox Grid.Row="0" Grid.Column="0" 
   20                                             HorizontalAlignment="Right" VerticalAlignment="Stretch">
   21                                         <TextBlock FontSize="12" 
   22                                                   FontFamily="Consolas" 
   23                                                   Text="{Binding Path=AlgebraicIdentity, Mode=OneWay}" />
   24                                     </Viewbox>
   25                                     <Viewbox Grid.RowSpan="2" Grid.Row="0" 
   26                                             HorizontalAlignment="Center" VerticalAlignment="Center">
   27                                         <TextBlock FontFamily="Chess Cases" 
   28                                                   Margin="3,3,3,3" 
   29                                                   Text="{Binding Path=CurrentPiece.AltChar, Mode=OneWay}" />
   30                                     </Viewbox>
   31 
   32                                     <Ellipse MaxHeight="30" MaxWidth="30" 
   33                                             MinHeight="10" 
   34                                             MinWidth="10" 
   35                                             Fill="Aqua" 
   36                                             Grid.Row="0" Grid.RowSpan="2" 
   37                                             Visibility="{Binding IsHit, 
   38                                                Converter={StaticResource BoolToVisibilityConverter}}" />
   39                                 </Grid>
   40                             </ContentPresenter.Content>
   41                         </ContentPresenter>
   42                     </ControlTemplate>
   43 
   44                 </Setter.Value>
   45             </Setter>
   46             <Style.Triggers>
   47                 <Trigger Property="IsMouseOver" Value="true">
   48                     <Setter Property="Foreground" Value="Red" />
   49                     <Setter Property="Background" Value="Black" />
   50                     <Setter Property="BorderBrush" Value="Red" />
   51                     <Setter Property="BorderThickness" Value="2" />
   52                 </Trigger>
   53             </Style.Triggers>
   54         </Style>
   55         <Shatranj:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
   56     </RadioButton.Resources>
   57 </RadioButton>

Oops… The BoolToVisibilityConverter should also be moved into <ControlTemplate.Resources> so it becomes accessible from inside the ControlTemplate.

    5             <Setter Property="Template">
    6                 <Setter.Value>
    7                     <ControlTemplate>
    8                         <ControlTemplate.Resources>
    9                             <Shatranj:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
   10                         </ControlTemplate.Resources>
   11                         <ContentPresenter>
   12                             <ContentPresenter.Content>

No color squares? Strange. Let’s move the background to Style:

    1 <RadioButton x:Class="Shatranj.BoardSquareView" 
    2             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    3             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    4             xmlns:Shatranj="clr-namespace:Shatranj">
    5 
    6     <RadioButton.Resources>
    7         <Style TargetType="{x:Type Shatranj:BoardSquareView}">
    8             <Setter Property="Background" Value="{Binding Converter={StaticResource LocationToColorConverter}}"/>

Same result! Well, I would have been surprised if it’d been otherwise. Local values always override values set by Styles! So what could be the problem?

Shatranj - Convert to Control (1 of 3): Need for ControlTemplates

noreply@blogger.com (Vyas Bharghava) — Sun, 28 Feb 2010 07:56:00 +0000

Let’s revisit our requirements:

When it’s a player’s turn (playing White/Black), the player should only be able to select one of his/her piece for making the move
This also applies to the opponent
When any of the empty squares are captured by either players, that square is owned by the piece occupying it.

Hmm… The BoardSquareView is a UserControl! It doesn’t support Mouse events directly for one. How good it would be, if it were a button! No, wait! Yes, it should be a RadioButton.

WPF lets RadioButtons grouped through the GroupName property. In the absence of Blend, I’ll have to make do with manually editing XAML to do this. Just search for UserControl and replace it with RadioButton:

    1 <RadioButton x:Class="Shatranj.BoardSquareView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    2             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Shatranj="clr-namespace:Shatranj" 
    3             Background="{Binding Converter={StaticResource LocationToColorConverter}}">
    4 
    5     <RadioButton.Resources>
    6         <Style TargetType="{x:Type Shatranj:BoardSquareView}">
    7             <Style.Triggers>
    8                 <Trigger Property="IsMouseOver" Value="true">
    9                     <Setter Property="Foreground" Value="Red" />
   10                     <Setter Property="Background" Value="Black" />
   11                     <Setter Property="BorderBrush" Value="Red" />
   12                     <Setter Property="BorderThickness" Value="2" />
   13                 </Trigger>
   14             </Style.Triggers>
   15         </Style>
   16         <Shatranj:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
   17     </RadioButton.Resources>
   18 
   19     <ContentPresenter>
   20         <ContentPresenter.Content>
   21             <Grid>
   22                 <Grid.RowDefinitions>
   23                     <RowDefinition Height="0.200*" />
   24                     <RowDefinition Height="0.800*" />
   25                 </Grid.RowDefinitions>
   26                 <Grid.ColumnDefinitions>
   27                     <ColumnDefinition />
   28                 </Grid.ColumnDefinitions>
   29 
   30                 <Viewbox Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Stretch">
   31                     <TextBlock FontSize="12" FontFamily="Consolas" Text="{Binding Path=AlgebraicIdentity, Mode=OneWay}" />
   32                 </Viewbox>
   33                 <Viewbox Grid.RowSpan="2" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center">
   34                     <TextBlock FontFamily="Chess Cases" 
   35                               Margin="3,3,3,3" 
   36                               Text="{Binding Path=CurrentPiece.AltChar, Mode=OneWay}" />
   37                 </Viewbox>
   38 
   39                 <Ellipse MaxHeight="30" MaxWidth="30" 
   40                         MinHeight="10" 
   41                         MinWidth="10" Fill="Aqua" 
   42                         Grid.Row="0" Grid.RowSpan="2" 
   43                         Visibility="{Binding IsHit, Converter={StaticResource BoolToVisibilityConverter}}" />
   44             </Grid>
   45         </ContentPresenter.Content>
   46     </ContentPresenter>
   47 </RadioButton>

Oops…. The results are not encouraging. We still got the RadioButton’s default UI interfering. This is a useful behavior when we want to layer multiple levels of controls using inheritance. At the moment, we need something more heavyweight. Enter ControlTemplates!

Shatranj – Capture Mouse hover to highlight piece thru Triggers

noreply@blogger.com (Vyas Bharghava) — Sun, 28 Feb 2010 05:57:00 +0000

You can define a Property trigger (Since IsMouseOver is a Dependency Property) (fortunately UserControl has a dependency property IsMouseOver… IsMouseOver is defined in UIElement).

    <UserControl.Resources>
        <Style TargetType="{x:Type Shatranj:BoardSquareView}">
            <Setter Property="Background" Value="{Binding Converter={StaticResource LocationToColorConverter}}" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Foreground" Value="Red" />
                    <Setter Property="Background" Value="Black" />
                    <Setter Property="BorderBrush" Value="Red"/>
                    <Setter Property="BorderThickness" Value="2"/>
                </Trigger>
            </Style.Triggers>
        </Style>
        <Shatranj:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
    </UserControl.Resources>

The next step is to capture the Click. So, we can have a different colours to indicate selection:

A search of UserControl using Object Explorer (in VS2008) quickly reveals there’s no dependency property for mouse clicks. Since there’s a ContentPresenter in the BoardSquareView usercontrol – which exposes MouseUp/Down as events, it could be captured in code-behind thus:

private void ContentPresenter_MouseUp(object sender, System.Windows.Input.MouseButtonEventArgs e)

        {
            this.Background = new SolidColorBrush(Colors.DarkBlue);
            this.Foreground = new SolidColorBrush(Colors.LightGreen);
            this.BorderBrush = new SolidColorBrush(Colors.LightGreen);
            this.BorderThickness = new Thickness(2);
            var context = this.DataContext as BoardSquare;
            //context.Select(true, MoveOptions.AllApplicable);
        }

The above code has its upshots even though it’s not done through styling / attached behaviours. Will see more in the next post.

Technorati Tags: WPF,Triggers,PropertyTriggers

A Snoop Quirk

noreply@blogger.com (Vyas Bharghava) — Sun, 28 Feb 2010 03:42:00 +0000

Make sure to set your ‘Platform Target’ to ‘x86’ when you build your WPF application. Snoop doesn’t seem to be able to detect apps built for ‘Any CPU’.

Technorati Tags: Snoop,VisualTree,WPF

Shatranj – Source on CodePlex

noreply@blogger.com (Vyas Bharghava) — Fri, 26 Feb 2010 08:30:00 +0000

The current version of Shatranj is on CodePlex. I had to clean it up for publishing and hence it does not include code other than what has been described in my previous posts. Over the next couple of weeks, I hope to have some concrete version released.

Technorati Tags: Shatranj,CodePlex

Shatranj – Setting the Color of BoardSquare(s) based on Position thru Value Converters

noreply@blogger.com (Vyas Bharghava) — Thu, 25 Feb 2010 08:11:00 +0000

Before I jump into code, a few concepts:

XAML works with strings and hence is dynamic
So, how does the XAML parser knows how to coerce strings into appropriate types?

Enter Value Converters. (Note: TypeConverters would be introduced when we need them later)

I wouldn’t pretend to be an expert on XAML parser / interpreter. I’d refer you to Rob Relyea’s excellent post if you want to learn under the hood stuff. I do recommend you read it.

Silverlight’s (3.0) lacks WPF’s depth of support for TypeConverters.

Aside: Writing a blog post does clarify how much you do not know! This is the impression I have had during the course of my sojourn learning Silverlight. I can’t remember on top of my head now!

namespace Shatranj

{
    public class LocationToColorConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var source = value as BoardSquare;
            if(source == null) return "Transparent";
            return ((source.Placement.X + source.Placement.Y) % 2 == 0) ? "Azure" : "LightBlue";
        }
 
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}
 
 
Hook the Converter up to the Usercontrol’s Background property:
 

<UserControl x:Class="Shatranj.BoardSquareView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:Shatranj="clr-namespace:Shatranj" Background="{Binding Converter={StaticResource LocationToColorConverter}}">

<snip>

Note for the ‘StaticResource’ to be accessible, the resource key should be accessible at the node where it’s declared. In other words, you need to have LocationToColorConverter declared at App.Xaml like this:

    <Application.Resources>
        <Shatranj:LocationToColorConverter x:Key="LocationToColorConverter"/>
    </Application.Resources>

The thing that needs a bit of explanation is the Binding syntax:

{Binding Converter={StaticResource LocationToColorConverter}

It’s as though you’ve written:

{Binding Path=<PropertyName>, Converter={StaticResource LocationToColorConverter}

Looks for the <PropertyName> on the DataContext. Since we’ve not specified property, the whole DataContext object is passed into the Convert() method. Since our DataContext here is the BoardSquare object, we can typecast ‘value’ and access properties/methods on it.

Things I don’t like about the above approach:

Colors are hardcoded in the converter
Ideally this should be supplied by Styles (remember, Cascading Style Sheets?)

Technorati Tags: WPF,Databinding,Silverlight,ValueConverters,Shatranj

Trees! Visual, Logical & MvvM!

noreply@blogger.com (Vyas Bharghava) — Thu, 25 Feb 2010 07:28:00 +0000

If you assume each piece of your UI to have a ViewModel & Model, you’d most likely have a structure like the one below:

Let’s review what we’ve seen thus far (put in the right order):

Started off with the Object Model
- Game, ChessBoard, BoardSquare, ChessPiece and Player are some of the important objects
Created the ChessBoardView with DataContext as ChessBoard and bound AllSquares (a collection of 64 BoardSquares) to its ItemSource
- ItemSource when set to a collection sets the DataContext for all elements within the DataTemplate to each of the element in the collection (So each BoardSquareView was bound to object BoardSquare)
- Understood how we can use ItemContainerStyle to set the Grid.Row and Grid.Column properties for the ContentPresenter (UserControl) to assign each square its appropriate place on the ChessBoard
Using Snoop ascertained UserControl inside DataTemplate is actually has a ContentPresenter inside wrapping the content
Objects can be instantiated and put in resources for the container (or the Application using App.xaml)
- <Shatranj:ChessBoardViewModel x:Key="ChessBoardViewModel"/>
Saw how ViewBox can be used to scale TextBlocks
Finally, have seen how ViewModel when done right, can mirror the View in structure (as above)

There’s one gap, though! In my earlier naive implementation I had set the colors of the squares explicitly. We didn’t set the colour in the new implementation. So how can we compute colours based on the position on the BoardSquare object?

Answer: Topic for the next post!

Technorati Tags: MVVM,ViewModel-Model,WPF

Shatranj – The Board (Or) Using ItemsControl & ItemSource to render UI dynamically

noreply@blogger.com (Vyas Bharghava) — Wed, 24 Feb 2010 08:47:00 +0000

A naive implementation of ChessBoardView:

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
 
        <Shatranj:BoardSquareView DataContext="{Binding Path=Board[a1]}" 
                                  Grid.Row="{Binding Path=Placement.X}" 
                                  Grid.Column="{Binding Path=Placement.Y}"/>
        <Shatranj:BoardSquareView Background="Bisque" 
                                  DataContext="{Binding Path=Board[b1]}" 
                                  Grid.Row="{Binding Path=Placement.X}" 
                                  Grid.Column="{Binding Path=Placement.Y}"/>
        <Shatranj:BoardSquareView Background="Tan" 
                                  DataContext="{Binding Path=Board[c1]}" 
                                  Grid.Row="{Binding Path=Placement.X}" 
                                  Grid.Column="{Binding Path=Placement.Y}"/>

<snip>

Though the above works, it also means you need to define all 64 BoardSquares one by one! Happy typing :) Here’s the revised version using ItemsControl:

    <UserControl.Resources>
        <Shatranj:ChessBoardViewModel x:Key="ChessBoardViewModel"/>
    </UserControl.Resources>    
 
    <Grid>
        <ItemsControl DataContext="{StaticResource ChessBoardViewModel}" ItemsSource="{Binding Path=Board.AllSquares, Mode=OneWay}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Shatranj:BoardSquareView />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                    </Grid>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemContainerStyle>
                <!-- The content of ItemsPanelTemplate actually is inside a ContentPresenter -->
                <!-- Even the content of DataTemplate gets wrapped by a ContentPresenter -->
                <Style TargetType="{x:Type ContentPresenter}">
                    <Setter Property="Grid.Row" Value="{Binding Path=Placement.X, Mode=TwoWay}" />
                    <Setter Property="Grid.Column" Value="{Binding Path=Placement.Y, Mode=TwoWay}" />
                </Style>
            </ItemsControl.ItemContainerStyle>
        </ItemsControl>
    </Grid>

Well, the above is where Snoop saved me! And thanks to Marcho Zhou @ MSDN. As documented above, you get a ContentPresenter in both DataTemplate & ItemsPanelTemplate. So, x:Type must be ContentPresenter.

Here’s also a trick I use to avoid Code-Behind: Where you link ViewModel to Model:

<UserControl.Resources>

<Shatranj:ChessBoardViewModel x:Key="ChessBoardViewModel"/>

</UserControl.Resources>

Aside: You need to leave out {x:Type} for Silverlight

Shatranj – The Object Model

noreply@blogger.com (Vyas Bharghava) — Wed, 24 Feb 2010 08:27:00 +0000

Let’s assume we’re going to write the application in “traditional” WinForms way. So, you have a form and the object model. Here’s what I came up with (without worrying too much about Bitboards and performance):

Snooped!

noreply@blogger.com (Vyas Bharghava) — Tue, 23 Feb 2010 09:07:00 +0000

Snoop saved me today! I’ll have to save the details for tomorrow!

WPF ViewBox: Starting at other than the default size

noreply@blogger.com (Vyas Bharghava) — Tue, 23 Feb 2010 07:58:00 +0000

I wanted my Chessboard to shrink when I resized the window:


Without ViewBox	With ViewBox

Without ViewBox
 
<TextBlock Grid.Row="0" 
           Grid.Column="0" 
           HorizontalAlignment="Right" 
           VerticalAlignment="Center" 
           FontSize="12"  
           FontFamily="Consolas" Text="{Binding Path=AlgebraicIdentity, Mode=OneWay}"/>
<TextBlock Grid.Row="0" 
           Grid.RowSpan="2" 
           HorizontalAlignment="Center" 
           VerticalAlignment="Center" 
           FontFamily="Chess Cases" FontSize="48" 
           Text="{Binding Path=CurrentPiece.AltChar, Mode=OneWay}"  />
With ViewBox
 
<Viewbox Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Stretch">
    <TextBlock 
        FontSize="12"  
        FontFamily="Consolas" Text="{Binding Path=AlgebraicIdentity, Mode=OneWay}"/>
</Viewbox>
<Viewbox Grid.RowSpan="2" Grid.Row="0">
    <TextBlock HorizontalAlignment="Center" 
               VerticalAlignment="Center" 
               FontFamily="Chess Cases" FontSize="48" Text="{Binding Path=CurrentPiece.AltChar, Mode=OneWay}"  />
</Viewbox>

Aside: Please ignore the bindings. Actually, I’m using an Open source chess font called ‘Chess Cases’. All you need to do is use ‘k’ for King. The AltChar you see above is this.

Question: If you use ViewBox, it’ll pick a starting size in accordance with its own calculation. So, you’ll see:

With ViewBox	Without ViewBox

Now, How do I make the ‘With ViewBox’ version start respecting the start size (which is 48 as you see in the without ViewBox version)?

Answer is easier than I thought it would be:

    <TextBlock FontFamily="Chess Cases" 
               Margin="3,3,3,3" Text="{Binding Path=CurrentPiece.AltChar, Mode=OneWay}"  />

Use Margin!

A Vow

noreply@blogger.com (Vyas Bharghava) — Tue, 23 Feb 2010 07:05:00 +0000

Seems like my readership tripled overnight. So, I’ve made myself a vow of one post everyday… Let’s see how disciplined I can be when I really want to be :)

Shatranj – A frontend to an Open Source Chess Engine

noreply@blogger.com (Vyas Bharghava) — Sun, 21 Feb 2010 10:26:00 +0000

The below is a screenshot of Shatranj – envisaged as a frontend to open source chess engines such as Huo Chess. I’ll be posting how I designed the application, when very new to Silverlight & XAML, and how the design evolved over a period of time, when I groked Silverlight and MvvM better. Eventually I hope to show how dramatic improvements can be when you stick to the mantra of ‘No code-behind’ (Er… no codebehind in application code as I said before).

MvvM & C# DynamicObject = DynamicMvvM

noreply@blogger.com (Vyas Bharghava) — Sun, 21 Feb 2010 10:21:00 +0000

Another major gripe for me & my team was redundancy. We found ourselves, time and time again replicating Properties on ViewModel & Model!

[EDIT: This could have been because what we did was more of a PresentationModel. What we did in essence was to isolate Models so thoroughly as to make them passive. Even INotifyPropertyChanged were raised to ViewModel and ViewModel propagated the changes back to the screen.

Blogging about the subtleties of MvvM vs. PresentationModel doesn’t seem to be on anyone’s priority. :) So, let’s just say, the amount of code you write in the above model is “just too much!”]

While, we did agree that ViewModel would primarily have items pertaining to UI and we did understand a single ViewModel can actually encapsulate/unify multiple models, what we had most of the time was a single ViewModel linked to a single Model.

The dynamic nature of XAML where strings are converted using Value/Type converters and C# 4.0’s DynamicObject seemed a great fit! Before jumping to DMvvM, I’d like to start from how I approached the design statically, with MvvM, the types of issues I ran into and then how the same can be alleviated when using DMvvM.

A tip on Groking MvvM

noreply@blogger.com (Vyas Bharghava) — Sun, 21 Feb 2010 10:02:00 +0000

Six months ago, when I started leading a Silverlight development effort, MvvM was new to me. Drawing on my OO Design experience, I fancied that I instinctively discerned what MvvM meant: As little UI code as possible. Meaning ‘zero’ code-behind. Use data binding and your model to drive all interactions.

Six months on, now after battling lack of native support in the platform, I now feel 0 code-behind is a panacea and we don’t live in an ideal world! Far from it.

So, here’s what I learnt: Code-behind’s okay as long as it lives in the framework layer of your application. There, I said it. Your application layer should only be XAML.

I’m starting a series of posts on my experiences with Silverlight & MvvM. Just hope my experience helps somebody!

Naming Guidelines

noreply@blogger.com (Vyas Bharghava) — Fri, 19 Feb 2010 11:14:00 +0000

I have often been frustrated by the inability by even Senior Developers To name their classes / methods /properties. This is more of a note to myself.

Here's the thumb rule: Copy the .Net Framework! Fire-up reflector and search the keyword. For me, naming actually can steer design. A well chosen name lends the design appropriate metaphors.

And run StyleCop! Unfortunately, it doesn't complain about names like DalServiceHelper or Utils.CreateZip(...) . More on this later.

Post from my iPhone

noreply@blogger.com (Vyas Bharghava) — Wed, 06 Jan 2010 08:17:00 +0000

Testing

Be wary of them the 3rd Party Components

noreply@blogger.com (Vyas Bharghava) — Fri, 07 Nov 2008 01:13:00 +0000

I've been burned once and seen other projects burn because of wrong choice of 3rd party components.

My project - that was shot to hell - had to depend on a 3rd party component [Let's call it WiseImport ;)] from reading data from a competing product [MarketLeader]. We were doing an import wizard and Legal warned us not to use any of the SDKs exposed by the competitor [Legal moves in mysterious ways especially when the competitor offers the same kind of tool as an add-in]. But it was somehow okay to use the third party component.

The version 1.0 of the wizard used WiseImport successfully and in his infinite wisdom our Architect mandated us to go with the same product. Now, we required master-detail information from the MarketLeader. Alas, late in the game we found that the master & detail information are available separately but there was no way to link them to each other. The creator of WiseImport was a 2-person company that was successfully bullied into [I guess nothing motivates people like a threat of multi-million dollar law suit] looking at the problem at a war footing.

Well, let's just say he was near tears when he wrung his hands and said this was a bug in the MarketLeader product and he would only be able to provide a fix when the MarketLeader fixes its SDK. [And, of course, he was sorry as hell and was willing to refund the license fees ... I'm sure minuscule in comparison with "multi-million dollars"]

Oh, yes, the rest is history [along with the project that is].

In another instance, where I was called in as outside expert to look at the performance issues, I found, to my dismay the control used does not care about its ViewState size. I thought that these guys should be held criminally responsible for such a shoddy code. I'm no lawyer [probably explains why I don't make much money], so as a compromise, I had to hold the team responsible for their gross negligence. In the end, I thought I'll frame some guidelines - or at least warn people of the careless use of 3rd party components.

Evaluate the component per your current and future needs
Make sure it is functionally fit for your requirements
Gather metrics - if you're using a ASP.Net Server Control use Fiddler2 / WDH that support #2
Don't be influenced by what is being used currently
Don't go by popularity of the component or just because you've used it in your previous project
Make sure you can get support when required [not everyone have the threat of a multi-million dollar law suit in their arsenal]
Can they roll a custom build to fix your issue?
What is your backup plan if the component have to be replaced?
Have you identified a suitable alternative?
Does your design isolate the 3rd party component so you can plug & play?

I'm sure all the above may appear overkill. Let me assure you, they're not. You'll probably thank god [and your stars] for the sense you had to do the above. Or when the project fails [more aptly when the s**t hits the fan], you'll at least have covered your bases.

Addicted to my 24" Monitor

noreply@blogger.com (Vyas Bharghava) — Fri, 15 Aug 2008 10:07:00 +0000

Guess I am getting a bit too addicted to the extra real estate. The code in my blog looks awful on smaller monitor/window. Will have to go back and reformat I guess when I have time.