Azure, C# and Everything .Net

Arduino–Day 5: 7 Segment Numeral Display

noreply@blogger.com (Vyas Bharghava) — Tue, 18 Mar 2014 04:30:00 +0000

A quick & dirty library for displaying numbers on a 7 Segment Display. I’m storing the segment patterns in an array at the same position – ordinal - as that of the number. Thus, a pattern for ‘0’ (Pin 10 & Pin 4 off – Dot & Central bar) would be found at numbers[0].

Countdown on a 7 Seg Display
 //Pin patterns for 0-9
int numbers[][8] =  {
    { 1, 1, 1, 0, 1, 1, 1, 0 },
    { 0, 0, 1, 0, 1, 0, 0, 0 },
    { 1, 1, 0, 0, 1, 1, 0, 1 },
    { 0, 1, 1, 0, 1, 1, 0, 1 },
    { 0, 0, 1, 0, 1, 0, 1, 1 },
    { 0, 1, 1, 0, 0, 1, 1, 1 },
    { 1, 1, 1, 0, 0, 1, 1, 1 },
    { 0, 0, 1, 0, 1, 1, 0, 0 },
    { 1, 1, 1, 0, 1, 1, 1, 1 },
    { 0, 1, 1, 0, 1, 1, 1, 1 },
};
 
// Pin 1, 2, 4, 5, 6, 7, 9, 10 anti clockwise starting from lower left corner
int pins[] = {3, 4, 6, 7, 8, 9, 11, 12};
 
 
 
void setup()
{
 
  /* add setup code here */
 
}
 
void loop()
{
 
  /* add main program code here */
 
    for (int number = 9; number <= 0; number++)
    {
        displayNumber(number);
        //Wait 1 second
        delay(1000);
    }
 
    //Display four random number
    for (int i = 1; i < 5; i++)
    {
        int next = random(0, 9);
        displayNumber(next);
        clear();
        delay(1000);
    }
 
    delay(1000);
}
 
 
void displayNumber(int number)
{
    for (int i = 0; i < 8; i++)
    {
        //determine pin for the segment 0-7
        int pin = pins[i];
        bool pinOffOn = numbers[number][i];
 
        pinMode(pin, OUTPUT);
        //Turn on the segment
        digitalWrite(pin, (pinOffOn) ? HIGH : LOW);
    }
}
 
 
void clear()
{
    for (int i = 0; i < 8; i++)
    {
        int pin = pins[i];
        pinMode(pin, OUTPUT);
        digitalWrite(pin, LOW);
    }
}
 

The above approach is cost prohibitive (number of pins needed to drive a 4 digit number is staggering).

Not knowing Arduino’s capabilities, I’m hypothesizing (speculating) thus:

Either:
- Arduino should be able to drive multiple outputs through a single pin
- One pin per digit... Possibly 2 pins for n-number of digits
Or:
- We can send multiple values through a single Arduino digital pin punctuated by a specific delay (say, 10 millisecond increments).
- A timer would measure the difference, and route power to appropriate segment
- Pros: One pin for each digit
Or:
- Identify the digit by a specific delay upfront (100 millisecond increments)
- Route to the right digit
- All subsequent power would be sent to the same digit (till it's reset by a specific delay)
- We can send multiple values through a single Arduino digital pin punctuated by a specific delay (say, 10 millisecond increments).
- A timer would measure the difference, and route power to appropriate segment
  - Pros: One pin for the whole display

Arduino–Day 5: 7 Segment Displays – A side quest

noreply@blogger.com (Vyas Bharghava) — Tue, 18 Mar 2014 02:25:00 +0000

My shopping list had a Microtivity 7 segment LED display, which I couldn’t wait to figure out how to light up. Unfortunately, I was (and still am) no good at reading the schematics.

My policy is to figure out stuff by myself (so I wouldn’t be running to Google for every little thing). My first objective was to light it up. So, It’s trial & error all the way.

I didn’t want Arduino to drive & display arbitrary numbers just yet. (I knew that was easy :-). Harder to figure out how to take less pins to drive single / multiple digits).

To cut the long story short:

I figured out 3, 8 there were actually Ground! It was a matter of connecting the ground to 3 & 8 (Ok, I figured out 1 ground either 3 / 8 was enough to complete the circuit). Pin 1 starts left lower corner (as in the diagram above) and goes anti-clockwise to 10.

All 10 Pins

1	2	4	5


6	7	9	10

I connected the GRD to Pin 3.

Luckily, the first display I tried worked. In the second one, the middle bar won’t light up. And one of the bars (Pin 10), only weakly glows. The rest of them (I had bought the pack of 4) works though. Returned via Amazon Locker!

Arduino - Day 4: Shopping Spree

noreply@blogger.com (Vyas Bharghava) — Mon, 17 Mar 2014 05:01:00 +0000

The moment I unpacked, I realized my table’s gonna be a mess (as if it already weren’t) for quite some time to come. And I’ll keep searching for resistors and such. It all started with a need for an organizer and quickly grew into things I knew I would need & soon.

The thing I miss most is additional Breadboards for a quick sojourn into side projects (such as the 7 segment LCD display I meant to blog today. Aside: I had to post about the LCD display, so I had to rip out and reassemble ).

Here’s the full list:

I already own a Dewalt 18V Drill/Driver Kit. Guess what! I had to drill to make the holes bigger on the Microtivity Prototyping boards.

DEWALT DW1163 13 Piece Black Oxide Split Point Twist Drill Bit Assortment

Arduino–Day 3: Adding an LCD (without Potentiometer) to display the message

noreply@blogger.com (Vyas Bharghava) — Mon, 17 Mar 2014 04:09:00 +0000

Before I take on the project of taking the user input, of course, I had to learn few things first. I started off with tackling adding an LCD.

I have a bad habit of not following tutorials on the web typically because I usually have my own twist to the problem that makes it complicated. However, I found one that helped immensely.

Here’s how the pins were mapped:

LCD Pin	Connected to
1 (VSS)	Ground (GRD) (Note the bridge. The actual connection’s behind the LCD panel)
2 (VDD)	+5v Arduino Pin
3 (Contrast)	Resistor to GRD (Note Arduino GRD is connected by a small green wire. It’s also connected to the other side of the breadboard by the GRD bridge)
4 (RS)	Arduino Pin 2
5 (RW)	Arduino Pin 3
6 (Enable)	Arduino Pin 4
7, 8, 9, 10	No Connection
11 (D4)	Arduino Pin 6 (5 was skipped as I my leads in the wire didn’t have enough space)
12 (D5)	Arduino Pin 7
13 (D6)	Arduino Pin 8
14 (D7)	Arduino Pin 9
15 Backlight Power (+)	Arduino Pin 10
16 Backlight GRD	Ground (GRD)

11 is my control pin for the Morse Messenger.

Code Snippet
 #include <LiquidCrystal.h>
 
// A dot is a '1',  A dash '0' -1 is a filler / compensator for the absence of jagged arrays
int letterMorse[][4] = {
  {1, 0, -1, -1},
  {0, 1, 1, 1},
  {0, 1, 0, 1},
  {0, 1, 1, -1},
  {1, -1, -1, -1},
  {1, 1, 0, 1},
  {0, 0, 1, -1},
  {1, 1, 1, 1},
  {1, 1, -1, -1},
  {1, 0, 0, 0},
  {0, 1, 0, -1},
  {1, 0, 1, 1},
  {0, 0, -1, -1},
  {0, 1, -1, -1},
  {0, 0, 0, -1},
  {1, 0, 0, 1},
  {0, 0, 1, 0},
  {1, 0, 1, -1},
  {1, 1, 1, -1},
  {0, -1, -1, -1},
  {1, 1, 0, -1},
  {1, 1, 1, 0},
  {1, 0, 0, -1},
  {0, 1, 1, 0},
  {0, 1, 0, 0},
  {0, 0, 1, 1}
};
 
 
int numberMorse[][5] = {
  { 0, 0, 0, 0, 0 },
  { 1, 0, 0, 0, 0 },
  { 1, 1, 0, 0, 0 },
  { 1, 1, 1, 0, 0 },
  { 1, 1, 1, 1, 0 },
  { 1, 1, 1, 1, 1 },
  { 0, 1, 1, 1, 1 },
  { 0, 0, 1, 1, 1 },
  { 0, 0, 0, 1, 1 },
  { 0, 0, 0, 0, 1 }
};
 
//// A dot is a '1',  A dash '0'
//int symbolMorse[][6] = {
//    {0, -1, 0, -1, 0, -1},
//    {0, }
//}
 
int controlPin = 11;
const int standardPauseInMilliseconds = 500;
LiquidCrystal lcd(2, 3, 4, 6, 7, 8, 9);
int backlight = 10;
 
void setup() {
    pinMode(backlight, OUTPUT);
    digitalWrite(backlight, HIGH);
 
  lcd.begin(16, 2);
  lcd.clear();
  lcd.setCursor(0, 0);
  lcd.display();
  // put your setup code here, to run once:
  doMorse("I LOVE ARDUINO");
}
 
void loop() {
}
 
void doMorse(String message)
{
  // put your main code here, to run repeatedly:
  for (int i = 0; i < message.length(); i++)
  {
    char letter = message.charAt(i);
 
    lcd.print(letter);
 
    Serial.println(letter);
 
    if (letter == ' ')
    {
      //Words are separated by a space equal to 7 dots
      delay(standardPauseInMilliseconds * 7);
      continue;
    }
 
    int *component = lookupComponents(letter);
 
    for (int j = 0; j < 4; j++)
    {
 
      int number = component[j];
      if (number < 0) continue;
 
      bool isDot = (number);
 
      Serial.print(isDot ? "Dot- " : "Dash- ");
 
      //For the duration of a dash (0) is 3 times the duration of a dot (1)
      blink(isDot ? standardPauseInMilliseconds : standardPauseInMilliseconds * 3);
      beep(isDot ? standardPauseInMilliseconds : standardPauseInMilliseconds * 3);
 
      //Each dot / dash is followed by a short silence, equal to the dot duration
      delay(standardPauseInMilliseconds);
    }
 
    Serial.println(' ');
 
    //The space between letters is three units
    delay(standardPauseInMilliseconds * 3);
 
  }
}
 
void blink(int delayInMilliseconds)
{
  pinMode(controlPin, OUTPUT);
  //Turn on the light
  digitalWrite(controlPin, HIGH);
  //For the duration of a dash (0) is 3 times the duration of a dot (1)
  delay(delayInMilliseconds);
  digitalWrite(controlPin, LOW);
 
}
 
void beep(int delayInMilliseconds)
{
  pinMode(controlPin, OUTPUT);
  analogWrite(controlPin, 20);
  delay(delayInMilliseconds);
  analogWrite(controlPin, 0);
}
 
 
int * lookupComponents(char letter)
{
    int value = ((int)letter) - 65;
    bool isNumber = value < 0;
 
    Serial.println(value);
    //lcd.print(value);
 
    return isNumber ? numberMorse[value] : letterMorse[value];
 
}
 

The issues I had faced were actually numerous. Didn’t get the backlight to light up for a long time. I found pins 12 & 13 wouldn’t work as control pins. Why? They simply ignored analogWrite(). The piezo wouldn’t beep.

The biggest issue I faced was to ensure my programming is matching with the wiring. This was especially complicated by the pin 12 & 13 refusing to work as control pins.

I still don’t understand many things (such as if the resistors were meant to use up energy so component upstream would receive less electricity why would it need to be connected to GRD & not power? I found the 7 segment display brighten up considerably when I attached the ground directly than through the resistor).

Arduino–Day 2: Where the heck’s my Potentiometer?

noreply@blogger.com (Vyas Bharghava) — Mon, 10 Mar 2014 04:24:00 +0000

The Arduino box has a picture of a Potentiometer on the box. It’s a wire diagram. No color. It has a tapered off top. The part description inside has this in color. Suffice to say I banged my head on the wall trying to figure out which component it was till I gave up and tried setting up my LCD without a potentiometer. Should be simple, yes?

Nope… The whole day I couldn’t get the blasted thing to work from the Arduino tutorial. I figured, Potentiometer is but a switch. One ground, one power & a control wire. How difficult could it be?

Well, that’s the topic for my next post.

Let’s now answer the million dollar question. Who do we turn to when we have a question answered? Yeah, I googled this one. Didn’t work out so well.

I googled this one too.

No help this one either. Did ask google outright though. Links that came back didn’t seem to be too helpful. Patience is a virtue. We do not scroll now. Do we?

Finally, I realized the white knob like appendages might go on top of the blue three legged thingies in the box. Viola! I had a turnable analog knob! So, that’s what Potentiometer does. It’s just like the variable speed regulator of a frigging ceiling fan! We still use those in India.

In retrospection, Google did help. The first link actually has a datasheet that has a picture. The google image search returned a picture of an Arduino Potentiometer on the 7th row.

The Arduino Starter Kit Componets & Datasheets

Here’s one “assembled” by me.

For the likes of me (dummies? ), the manual should have warned “partial assembly required” for the potentiometer in the component listing. (no winks… I’m dead serious). And did I tell you the part in the box actually does NOT have a tapered off top?

Arduino–Day 2: Interpret Morse

noreply@blogger.com (Vyas Bharghava) — Mon, 10 Mar 2014 03:39:00 +0000

Once the excitement of getting the first project to work as expected wore off, I wanted to address some of the shortcomings of the project in the next one.

One for example, was the fact that I had to hardcode a single input text that would flash once or forever. The requirements for the next one are:

Accept Morse Input from user
Display the letters / words as the user types in an LCD
At a touch of a button, replay the message
Loop function would have its own button

Arduino–Day 2: Preserving your Breadboard

noreply@blogger.com (Vyas Bharghava) — Sat, 08 Mar 2014 21:33:00 +0000

I have but one breadboard. How do I preserve & recreate the work (without having to figure out stuff I forget, again) or even share my circuit with someone else?

Found Fritzing

Arduino–Day 1: My First Project

noreply@blogger.com (Vyas Bharghava) — Sat, 08 Mar 2014 18:24:00 +0000

Before getting my hands dirty, I read the first chapter of the Arduino Projects Book to give me an overview of what am I getting myself into. I was hooked! After quickly absorbing the types of components, I read about Series & Parallel circuits.

My first project was lighting up an LED by hooking up a resister, an LED to the 5v power supply. I admit I also tried the variation with a switch – depress the switch to get the LED going - from the Arduino book.

At this point, I fired up the IDE and ran the ‘Blink’ sample. I immediately understood the idea of Arduino’s digital pins. The pins represent 0/1 (On/off) state by sending / stopping electric current through them. Cool!

I realized I understood enough to start my first project! Yes, it’s going to be something I come up with on my own! It was going to be a Morse Messenger!

I will have my circuit blink out a message in Morse Code! Of course, what am I good at? Writing programs

Didn’t realize my C++ was so rusty. How the heck do you write Jagged arrays? I’m sorry, Mr. Kanetkar, I have forgotten all my pointer lessons.

Though I was using Visual Micro, I hadn’t yet figured out how to debug with break points. Subject of another blog post I guess. For now, I was able to make do with “Serial.print*” statements.

Morse.ino
 // A dot is a '1',  A dash '0'
int letterMorse[][4] = {
  {1, 0, -1, -1},
  {0, 1, 1, 1},
  {0, 1, 0, 1},
  {0, 1, 1, -1},
  {1, -1, -1, -1},
  {1, 1, 0, 1},
  {0, 0, 1, -1},
  {1, 1, 1, 1},
  {1, 1, -1, -1},
  {1, 0, 0, 0},
  {0, 1, 0, -1},
  {1, 0, 1, 1},
  {0, 0, -1, -1},
  {0, 1, -1, -1},
  {0, 0, 0, -1},
  {1, 0, 0, 1},
  {0, 0, 1, 0},
  {1, 0, 1, -1},
  {1, 1, 1, -1},
  {0, -1, -1, -1},
  {1, 1, 0, -1},
  {1, 1, 1, 0},
  {1, 0, 0, -1},
  {0, 1, 1, 0},
  {0, 1, 0, 0},
  {0, 0, 1, 1}
};
 
 
int numberMorse[][5] = {
  { 0, 0, 0, 0, 0 },
  { 1, 0, 0, 0, 0 },
  { 1, 1, 0, 0, 0 },
  { 1, 1, 1, 0, 0 },
  { 1, 1, 1, 1, 0 },
  { 1, 1, 1, 1, 1 },
  { 0, 1, 1, 1, 1 },
  { 0, 0, 1, 1, 1 },
  { 0, 0, 0, 1, 1 },
  { 0, 0, 0, 0, 1 }
};
 
int led = 10;
const int standardPauseInMilliseconds = 500;
 
void setup() {
  // put your setup code here, to run once:
  doMorse("I LOVE ARDUINO");
}
 
void loop() {
}
 
void doMorse(String message)
{
  // put your main code here, to run repeatedly:
  for (int i = 0; i < message.length(); i++)
  {
    char letter = message.charAt(i);
 
    Serial.println(letter);
 
    if (letter == ' ')
    {
      //Words are separated by a space equal to 7 dots
      delay(standardPauseInMilliseconds * 7);
      continue;
    }
 
 
    int value = ((int)letter) - 65;
    bool isNumber = value < 0;
 
    Serial.println(value);
 
    int *component = isNumber ? numberMorse[value] : letterMorse[value];
 
    for (int j = 0; j < 4; j++)
    {
 
      int number = component[j];
      if (number < 0) continue;
 
      bool isDot = (number);
 
      Serial.print(isDot ? "Dot- " : "Dash- ");
 
      //For the duration of a dash (0) is 3 times the duration of a dot (1)
      blink(isDot ? standardPauseInMilliseconds : standardPauseInMilliseconds * 3);
      beep(isDot ? standardPauseInMilliseconds : standardPauseInMilliseconds * 3);
 
      //Each dot / dash is followed by a short silence, equal to the dot duration
      delay(standardPauseInMilliseconds);
    }
 
    Serial.println(' ');
 
    //The space between letters is three units
    delay(standardPauseInMilliseconds * 3);
 
  }
}
 
void blink(int delayInMilliseconds)
{
  pinMode(led, OUTPUT);
  //Turn on the light
  digitalWrite(led, HIGH);
  //For the duration of a dash (0) is 3 times the duration of a dot (1)
  delay(delayInMilliseconds);
  digitalWrite(led, LOW);
 
}
 
void beep(int delayInMilliseconds)
{
  pinMode(led, OUTPUT);
  analogWrite(led, 20);
  delay(delayInMilliseconds);
  analogWrite(led, 0);
}
 

The first version of the circuit did not have the Piezo. However, I realized I was not able to read the message (despite the fact I was trying to decipher Morse Code for the first time in my life ), and I needed an audible cue to distinguish dashes from dots. Lo & behold: The parallel circuit with both LED & Piezo.

It’s interesting to note that Arduino allows the use of the same pin (10) for controlling both Piezo (analog) & LED (digital).

Arduino – Day 1: Unboxing & Setup

noreply@blogger.com (Vyas Bharghava) — Sat, 08 Mar 2014 17:33:00 +0000

The first thing after I unboxed was to read the first few pages of the attached book. Familiarize myself with the components, attached Arduino Uno & the Breadboard to the wood sheet.

I run Windows Server 2012 R2 & do all my development using virtual machines on Hyper V. So, the first order of business was to just install the driver as I did not want to install any development tools on the server.

After connecting the USB cable to my primary machine, I downloaded the Arduino 1.5.6-r2 zip file. Selected the “Unknown Device” from “This PC –> Properties –> Device Manager” dialog and installed the driver using the arduino.inf found under the “drivers” folder of the zip.

Shared Arduino to my Win 8.1 Enterprise guest using RemoteFx USB redirection *:

Installed Arduino IDE (1.5.6-r2) & Visual Micro plug-in for Visual Studio 2013 & I was all set!

* Unfortunately, RemoteFx redirection isn’t available for Non-Windows clients. I had setup my Ubuntu VM too with the IDE. Had to abandon that as I couldn’t share the device with the VM.

Arduino – My new love

noreply@blogger.com (Vyas Bharghava) — Sat, 08 Mar 2014 16:43:00 +0000

I always wanted to learn how to make PCBs. I gave in last week and ordered the Official Arduino Starter Kit.

I would like to share what I was able to learn in a series of blog posts. I’m hopeful I wouldn’t take the whole of this year for the next post .

KB2656351 does not apply, or is blocked by another condition on your computer.

noreply@blogger.com (Vyas Bharghava) — Wed, 29 Feb 2012 00:08:00 +0000

If you have .Net Framework 4.5, uninstall it along with VS.Net 2011 Developer Preview. This prevents this update from being delivered (possibly fools Microsoft Update to think no .Net Framework 4.0 installed).

After I did the above, KB2656351 started showing up on Windows Update as an “important update”.

Design Driven Development

noreply@blogger.com (Vyas Bharghava) — Fri, 30 Sep 2011 01:10:00 +0000

I’ve tried to capture what I feel are the important traits to put “Design” First, to have a design driven development.

Technorati Tags: DDE,design-first

Deploying an ASP.Net application on Windows Azure

noreply@blogger.com (Vyas Bharghava) — Tue, 26 Apr 2011 20:08:00 +0000

Setup & Pre-requisites
1. Signup for Windows Azure Pass using code ‘DPWE01’ (Don’t blame me if this doesn’t work)
2. Use Management portal to add your public IP to the firewall
3. Install VS.Net 2010 Ultimate/Prof/Express, Azure SDK 1.4
Migrate Database to SQL Azure
1. Upload the database to SQL Azure using SQL Azure Migration Wizard
2. Change your connection strings in web.config to point to SQL Azure.
Would it work on Azure?
1. Add Azure Project to the your Solution (that you’re migrating)
2. Compile & Run locally by choosing the azure project (*.ccproj) as the startup
Configure Azure

Use management portal and create hosted service (select ‘No Deployment’ option)
Create a Storage Account

Publish to Azure

Rebuild your Solution in VS.Net 2010 and click ‘Publish’
Create a new certificate
Click on View and Save the certificate to a file (*.cer file)
- One of the best practices is to create a ‘Solution Folder’ in your Solution and place these files there. This ensures your certificates are source controlled. Note there’s no way to download a certificate back (as of this writing) from Azure Management Portal
Upload the certificate to Management Certificate section in the management portal
From management portal get your subscription ID (available in the properties of the root node called Subscription)
It should authenticate and the Storage account dropdown should list the accounts you’ve created before. Select the account shown.
Click on remote configure link
Create another certificate for remote access
Click on View and save the certificate with Private key (the password you provide here will be needed when you upload the certificate to Azure portal) (*.pfx)
Upload the certificate under Certificate Folder under your Hosted Service
Click ‘OK’

Technorati Tags: azure,azure-deployment,asp.net,azure-portal

My 1st Windows Phone Application

noreply@blogger.com (Vyas Bharghava) — Wed, 24 Nov 2010 23:51:00 +0000

Well, this why you shouldn’t be buying a book relying on title alone.

I figured if you navigate to a URL from Windows Phone browser, I should be able to see the SL app right away. Silly me!

It brought me to the Silverlight download page! Isn’t SL supposed to be the ‘Default’ for Windows phone app development?

Should I be “installing” my app as opposed to running directly from the browser? More on this once I figure this out.

DynamicMvvM – An Overview

noreply@blogger.com (Vyas Bharghava) — Fri, 02 Jul 2010 01:10:00 +0000

Goals

How do you adapt a pre-existing Object Model (that doesn’t support notifications)?
How do I extend my ViewModel with a commanding infrastructure?
How do I make my standard .Net resource available as part of ViewModel Metamodel?
How do I make my model support a State Machine?
- This is could be really useful when to trigger actions based on object state
- Essentially, we’re moving all action(s)/behaviors into commands making the models passive
How do I extend the existing Model with new properties?
How do I create a brand new model from scratch (fully dynamic)?
How do I make related information part of Model MetaModel?
- For example, EmployeeKind can be an enum of ‘Skilled, Unskilled, Others’.
How do I emulate standard static C# property on a Dynamic model?
How do I add support for Radio / Linked Properties
How do I translate an existing object into a dynamic Model?
How do I translate the same back?

Initial Design

Technorati Tags: dynamic-mvvm,mvvm,dynamic,silverlight-4.0

Assigning AutomationIds Dynamically in Silverlight

noreply@blogger.com (Vyas Bharghava) — Thu, 01 Jul 2010 20:16:00 +0000

I came across an interesting problem recently: How do you assign AutomationIds automatically for Items in an ItemsControl?

<UserControl

    x:Class="ThinkFarAhead.AutoAutomationId.MainPage"

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

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

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:local="clr-namespace:ThinkFarAhead.AutoAutomationId"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400">

  <Grid x:Name="LayoutRoot" Background="White">

    <StackPanel>

      <ItemsControl x:Name="ItemsControl">

        <ItemsControl.ItemTemplate>

          <DataTemplate>

            <TextBlock

                local:AutomationHelper.Parent=

                    "{Binding ElementName=ItemsControl}"

                local:AutomationHelper.CurrentItem=

                    "{Binding Path=DataContext,

                    RelativeSource={RelativeSource TemplatedParent}}"

                local:AutomationHelper.IndexedId="Message{0}"

                    AutomationProperties.AutomationId=

                        "{Binding (local:AutomationHelper.IndexedId),

                        RelativeSource={RelativeSource Self}}"

                Text="{Binding (AutomationProperties.AutomationId),

                    RelativeSource={RelativeSource Self}}" />

          </DataTemplate>

        </ItemsControl.ItemTemplate>

      </ItemsControl>

    </StackPanel>

  </Grid>

</UserControl>

namespace ThinkFarAhead.AutoAutomationId

    using System.Windows;

    using System.Windows.Controls;

    public static class AutomationHelper

        #region Constants and Fields

        public static DependencyProperty CurrentItemProperty =

            DependencyProperty.RegisterAttached(

                "CurrentItem",

                typeof(object),

                typeof(AutomationHelper),

                new PropertyMetadata(null)

);

        public static DependencyProperty IndexedIdProperty =

            DependencyProperty.RegisterAttached(

                "IndexedId",

                typeof(string),

                typeof(AutomationHelper),

                new PropertyMetadata(null)

);

        public static DependencyProperty ParentProperty =

            DependencyProperty.RegisterAttached(

                "Parent",

                typeof(ItemsControl),

                typeof(AutomationHelper),

                new PropertyMetadata(null)

);

        #endregion

        #region Public Methods

        public static object GetCurrentItem(DependencyObject element)

            return element.GetValue(CurrentItemProperty);

        public static string GetIndexedId(DependencyObject element)

            return element.GetValue(IndexedIdProperty) as string;

        public static ItemsControl GetParent(DependencyObject element)

            return element.GetValue(ParentProperty) as ItemsControl;

        public static void SetCurrentItem

            DependencyObject element, object value

            element.SetValue(CurrentItemProperty, value);

        public static void SetIndexedId

            DependencyObject element, string value

            value = string.Format(value,

                GetParent(element)

                .Items

                .IndexOf(GetCurrentItem(element)));

            element.SetValue(IndexedIdProperty, value);

        public static void SetParent

            DependencyObject element, ItemsControl value

            element.SetValue(ParentProperty, value);

        #endregion

namespace ThinkFarAhead.AutoAutomationId

    using System.Collections.Generic;

    using System.Windows.Controls;

    public partial class MainPage : UserControl

        #region Constructors and Destructors

        public MainPage()

            this.InitializeComponent();

            var list = new List<string>();

            list.Add("Zero");

            list.Add("One");

            list.Add("Two");

            list.Add("Three");

            list.Add("Four");

            list.Add("Five");

            list.Add("Six");

            list.Add("Seven");

            list.Add("Eight");

            list.Add("Nine");

            list.Add("Ten");

            this.ItemsControl.ItemsSource = list;

        #endregion

Hope it helps somebody!

Technorati Tags: silverlight-4.0,automationid,attached-properties,silverlight-5.0

Silverlight 4.0, Dynamic Types & Extension Methods

noreply@blogger.com (Vyas Bharghava) — Tue, 18 May 2010 06:25:00 +0000

I’ve been very busy lately earning my living. Not able to get time to blog! But hey, I wanted to hack together something - the DynamicMvvM framework which I had hinted about earlier - over this weekend. This got me working with the beauty that is DynamicObject (and ExpandoObject) in C# 4.0.

The first error I had hit was probably the one every one working with DynamicObject for the first time encounters:

Error 2 Predefined type 'Microsoft.CSharp.RuntimeBinder.Binder' is not defined or imported TestApp
Error 3 One or more types required to compile a dynamic expression cannot be found. Are you missing references to Microsoft.CSharp.dll and System.Core.dll?

True enough when I did add Microsoft.CSharp.dll and System.Core.dll, the errors went away.

Using a keyword in C# requires me to add some assemblies? Oops… Adding these two assemblies to Visual Studio project templates for Silverlight, by default, would be high on my wish list! Thankfully, these are added by default to WPF projects (the only one I checked) and hopefully other project types.

Another interesting thing about DynamicObject is that when it’s assigned to a dynamic, it’s not able to find ExtensionMethods. This is reasonable considering all the calls to the methods and properties are resolved at runtime and the ExtensionMethods are not part of the object’s interface per se.

Just one one more piece of info you need to file away for future use.

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!