Richard Waddell

LightSwitch Book Inventory Tracker Part 1

Sun, 10 Apr 2011 07:14:43 GMT

I’m using LightSwitch as a prototyping tool to get a jump start on a project at work that I took over from a long-exited programmer. The design I inherited has a lot of gaps that need to be filled in. I think the quickest way I can display those to my boss is to create the tables and basic maintenance screens so I can easily point out what’s there and what’s missing. LightSwitch inherently expresses database relationships in the screens it creates, so even if you aren’t going to use LightSwitch in the final application, you can quickly throw together and easily modify the table layout as you create the basic application in LightSwitch. Then you can step through the resulting screens and clearly see the table relationships with errors in design jumping right out at you.

The Requirements

The client has a need to track books as they move between various locations.

Locations contain multiple Buildings
Buildings contain multiple Rooms
Books are always assigned to one of:
- A particular Room
- OpenInventory, which has no specified location
Books can be transferred:
- From Room to Room across all Buildings at all Locations
- From any Room to OpenInventory
- To OpenInventory from any Room
An AssignedInventory table row records the quantity and is uniquely identified by
- Book
- Room
- Condition
An OpenInventory table row records quantity and is uniquely identified by
- Book
- Condition
OpenInventoryTransfers and AssignedInventoryTransfers include
- Book
- Condition
- Quantity Sent
- Received
- Quantity Received New
- Quantity Received Used
- Condition Variance
- Quantity Variance
- Source (Open Inventory or Room)
- Destination (Open Inventory or Room)

The nice thing about LightSwitch is that I can define classes, primarily in the form of table layout, that simultaneously define the underlying tables and the entities that represent them. For instance, a Location class instance will have a Buildings collection property because I defined the one-to-many relationship between Location and Building. The underlying database will contain a Buildings table where each row holds a foreign key on a Locations table row. But I only see that represented logically, as a collection property in the Location class. And because I defined that relationship, LightSwitch can automatically generate a screen to maintain Location and Building records in a master/detail screen. I don’t have to create GridViews or the ListBoxes that bind to Linq queries written by me, and I don’t have to do it over and over again.

First, create the project:

In Solution Explorer, you can right-click / Open Properties, or double-click

Under Application Type select the Web Radio Button:

Now we start adding tables:

Instead of creating all the tables and then the screens, I’m going to create one table at a time, working from the bottom up, and create the requisite screens at that point. This will probably mean deleting and re-creating some screens as the design plays out, but it’s so easy it doesn’t really matter. And I could use the screen designer to make the changes.

Let’s begin with the Book table. Create the columns as shown and make ISBN a unique index:

You might want to have a separate Authors table, but the design I was given specifies Author name in the Book table.

We want to validate ISBN:

Eventually we’ll want to allow for hyphens and validate that the ISBN is well-formed, but for now we’ll just check for a length of 10 or 13 and all numeric digits:

partial void ISBN_Validate(EntityValidationResultsBuilder results)
{
    if (this.ISBN.Length != 10 && this.ISBN.Length != 13)
        results.AddPropertyError("ISBN must be either 10 or 13 digits long");
    else
    {
        foreach (char ch in this.ISBN)
            if (ch < '0' || ch > '9')
            {
                results.AddPropertyError("ISBN must be all numeric");
                break;
            }
    }
}

Probably I could have checked for a Long Positive Integer, but In general I only like to treat numeric strings as numbers when they’re actually used as numbers. Anyway, this code will ultimately have to validate an actual ISBN.

Now we’ll generate a screen so we can do CRUD operations on Books.

The Editable Grid Screen (1) is what we want. By selecting Books (2) in the Screen Data dropdown we get the Screen Name (3) of EditableBooksGrid. Let’s stick with that, at least for now.

And that’s it. Hit Ctl-F5 and let’s see what we have.

We see the screen we just added in the menu (1) and it’s the default tab in a tabbed view (2) that we can page through (3). We have controls to do CRUD operations (4) and to save and load the Books table (5). As a bonus, if we’re running in debug mode we can change the screen design at runtime (6).

We’re about to add some definitions of Books, by creating instances of the Books entity, which will be stored in rows in the Books table, but first let’s adjust the column layout a bit. Even though ISBN is the unique key, I’d prefer to see Title in the first column. That’s pretty easy to do. Select the EditableBooksGrid screen in Solution Explorer, then just drag Title so it’s above ISBN:

By selecting the green plus sign Icon we can enter the Book into an individual form. Below I’ve done that. As soon as I enter a value in ISBN and tab away validation finds and displays my error:

So I’ll correct the length, but leave in an alpha character. Below I’ve clicked on the field so you can see how the message is displayed in that case.

I’ll enter a ‘valid’ ISBN and leave the required Title and Name fields blank then click OK. One quirk with this validation is that you can tab away from an empty required field without triggering the error, if it starts out empty. That’s because binding is only triggered when the value changes, and the validation occurs as a result of binding. Leaving an input field empty does not change the value, so these errors of omission are not caught until you click OK and trigger overall form validation.

To show you the difference, I cleared out the first record entirely by clicking on the ‘X’ icon, entered a character in the Title field, tabbed to and entered ISBN, then tabbed back to Title cleared it and tabbed away. I got this message immediately. Notice the error message wording is different, which implies that the business rule is being defined twice in the underlying code. Fortunately LightSwitch handles that, so I don’t have to remember to maintain it in two places:

Now I’ll enter duplicate ISBN numbers. When I click on the Save icon a modal generic error message box appears (not shown) followed by:

One last thing, and then we’ll move on. This form is wasteful of screen space so let’s make some adjustments, but let’s do it at run-time by clicking F5 to run in debug mode, then clicking on the Design Screen icon in the upper right corner of the screen. Select ISBN and set the Width to 90 pixels and click Save. You can try MaxWidth, but I ended up with padding on the left when I did, and specifying the number of characters doesn’t work any better than it does in HTML:

Do the equivalent for the Name fields and it looks a lot more reasonable:

I entered Mark Twain’s first and last name in the wrong order which gives me an opportunity to show you what you get if you select ‘Tom Sawyer’ and click on the Pencil icon:

I correct the name and press ok, but I still have to click on the Save icon to actually make the changes to the data. If I try to exit the screen without clicking on Save:

And now for something completely different. Not really, we’re just going to the other extreme in the sense that I said I was going to do the tables from the bottom up. But now I’m going to start at the top and define the Location table because Location is the other entity that has no dependencies on other entities / tables, which means I can create the Location screen as soon as I create the table. Then I’m going to create the Buildings table and show you something wonderful.

Actually, I think I’ll go ahead and create the Buildings table. Note the default naming convention in effect. I create a Building class (single tense) and instances of the class, or at least the elements of which must persist, are stored as rows in the Buildings table (multiple tense).

The address fields are optional for Building. It may be that we want to restrict access to the Building can only be reached through the Location’s address so it’s a business rule that the Building address can be null.

Now the magic starts to happen. I said up front that a Location may have many Buildings. We can set that up with just a few mouse-clicks:

Edit the Building class (1). Click on Relationship… (2). A dialog box comes up as shown above. The From table is Building (3) and it’s on the many side of a one-to-many relationship. In the graphic you can see the infinity sign next to the Building icon (4) and a ‘1’ (5) next to the icon representing the still-to-be-designated ‘Master’ table , which will be Locations. We could have started by editing the Location class, but then we would have to switched around the tables in the Add New Relationship dialog box.

As shown below, choose Location for the To table (1). The semantics are a little fuzzy in that the table names are actually Locations and Buildings. The right icon (2) is now labeled Location with the enclosed word Buildings representing the Buildings collection associated with the Location. In Sql Server parlance this would equate to the Building rows that hold foreign key pointers on the Location table. The ‘1’ indicates that Location is the one side of the one-to-many relationship.

After selecting Location, on the left side we have the Building icon (3) with the embedded word Location representing the one and only Location that the Building can be associated with. Again, this is the Location row that the Building row Location foreign key points to. The infinity sign indicates that Building is on the many side of the one-to-many relationship.

You can see the referential rules inferred from the relationship. (4). Until you’re used to the interface it’s possible you’ll get the relationships backwards sometimes. Looking at these rules when you set up the relationship is your best chance of catching that early. In this case, if they said a Location must have a Building, I’d know I got it backwards

Actually I think if I’d paid closer attention to labels, as in Navigation Property (5) I wouldn’t have had my relationship problems. if you’re not used to the interface and are just zipping along doing your RAD thing it’s easy to take the Navigation Property value in the From column as the From table, when of course it’s just the opposite, so just be aware and maybe you won’t make the same mistake.

In general, if you are editing the class that represents the table on the many side, in this case Building, when you click on Relationship… then the default settings in the Add New Relationship… dialog will be the ones you intend.

Now when we look at the Building class below we see more symbols to indicate the relationship between Location and Building. You can see the ‘1’ next to the Location icon and the infinity symbol next to the Location column / property in the Building table / class. This indicates there may be many Buildings, but because it’s next to the word Location it’s easy to read incorrectly at a glance. I thinks it’s just a matter of building the visual associations through repetition so it becomes second nature.

I used the terms ‘column / property’ and ‘table / class’ to emphasize that you don’t really have to worry about which is which. How great is it that you can build tables, add the relationships, and those relationships are automatically expressed in the generated classes that model that data?

So here’s the cool part, we’re going to create a screen that lets us maintain both Locations and Buildings. This is the second place you might notice that you got the relationship backwards. If you don’t see a Location Buildings checkbox then you forgot to set up the relationship or you got it backwards:

Select List and Details Screen and the Locations table in the Screen Data dropdown. Uncheck Location Details and make sure Location Buildings is checked. Select ‘Ok’ and click ctrl-F5 to run the application:

We select the Locations List Detail entry in the menu (1) which brings up the tabbed page (2). The Locations list box (3) will show all the Locations. The Buildings list box (4) will show the collection of Buildings associated with the currently selected Location.

Click on the green plus sign icon under Locations to add one:

Now here’s a test for LightSwitch. We haven’t actually added a Location record yet because we haven’t clicked Save. Will LightSwitch allow us to add a Building to the still to be created Museum of Science Fiction Location?

Here we go:

So far, so good. All that remains is to click on the Save icon, and when I do, it works.

We haven’t done any validation of the input. What do we need? In the case of Location, I have a general rule I’m making up right now is that every entity needs a unique identifier that can be displayed. Location does not exist within the context of any other entity so for Location the Name property will be unique:

We want Building Name to be unique within Location. LightSwitch is up to it:

LightSwitch adds a compound unique index that includes Name and Location.

I can use the same Name at a different Location however:

Now for the Room table:

For now it just has a Name column / property and a many-to-one relationship to Building. Now let’s set up an Editable Grid Screen because I want to make a point about what you will see in the Buildings dropdown.

Not too useful. Remember I said that every entity needs a unique, displayable property. This is why. Fortunately this can be easily done. Edit the Building class and click on :

Name it DisplayName and click on the Is Computed checkbox which will result in:

Click on Edit Method:

namespace LightSwitchApplication
{
    public partial class Building
    {
        partial void DisplayName_Compute(ref string result)
        {
            result = this.Name + " / " + this.Location.Name;
        }
    }
}

Edit the Building class. Click on Building in the Header. Under Properties set Summary Property to DisplayName:

And lo:

One last thing we need to do is make Room Name unique within Building. You can do that by setting the Include in Unique Index property on for Name and Building in the Room class as we did for Name and Location in the Building class.

Let’s add a Room

Now it’s time to create some inventory.We’ll start with OpenInventory, each instance of which represents some quantity of a particular Book that is not currently assigned to any Location:

Create an OpenInventory class as shown and click on Choice List under Condition Properties; Create the New and Used values that can be assigned to the Condition property. One of the things that differentiates instances of OpenInventory and AssignedInventory is the Condition of the Books; all the Books within a particular OpenInventory or AssignedInventory instance are in the same Condition, either New or Used.

Now we establish the relationship between OpenInventory and Book. An OpenInventory can only be linked to one Book, but a Book can be linked to many OpenInventory rows. Actually only two, New or Used, which is just a matter of setting another unique index. By virtue of the choices I defined above, the property will always be restricted to New or Used. If it’s also unique there can only be two instances.

But that unique index includes both Book and Condition, so let’s add the Book Relationship. OpenInventory is on the many side, so we click on Relationships while editing OpenInventory:

Now we can set the Include in Unique Index property on for Condition and Book.

You have to set them individually. The shot above is setting the property for Book.

Let’s go ahead and create the Editable Grid Screen for OpenInventory.

In this case we have a unique identifier but it’s not very helpful. We’ll need to add a computed property to Book.

partial void DisplayName_Compute(ref string result)
{
  result = this.Title + " (" + this.ISBN + ")";
}

Don’t forget, like I just did, that you have to set the Book class Summary Property value to DisplayName.

I haven’t quite figured out why the Listbox columns sometimes get re-sized automatically and other times not, but you can see that we now have a combination of Title and ISBN displayed for Book.

Let’s run in debug so we can change the width until we get it right. Hit F5 and click on Design Screen when it comes up:

After clicking Save:

Close enough. Afterwards I found it’s a little quirky about when it displays the drop down part full-width and when it clips it at the column width, but still close enough for now.

Let’s test whether the Condition / Book combination is a unique key on OpenInventory:

Sure enough, I cannot create two OpenInventory rows for the same Book and Condition.

I also want to change the column order in the form. It’s as simple as changing this:

to this by dragging and dropping:

I also widened the Book Listbox to 180 pixels.

The other columns are still excessively wide, but let’s move on to the AssignedInventory class, each instance of which is like OpenInventory in that it represents some quantity of a particular Book in a particular Condition but adds on the assignment to a particular Room in a particular Building in a particular Location. Accordingly we’re going to require a computed property to display for Room.

Bur first things first. Here’s the class before we add the relationship to Book. We have to create New and Used choices for Condition again. There may be a way to have AssignedInventory inherit from OpenInventory, layering on the Room property, but trying to do that and reflect the underlying tables at the same time is too much of a distraction. I would have a single BookInventory table with have a nullable Room link to represent both with a single table, but my existing design spec at work calls for separate tables.

AssignedInventory is on the many side of the Book relationship, so click on Relationship…

AssignedInventory is also on the many side of the Room relationship so click on Relationship… again:

And that’s all we need to define AssignedInventory. Let’s see what an Editable Grid Screen looks like:

Not enough information. We don’t know what Building the Room is in. Time for another Summary Property.

partial void DisplayName_Compute(ref string result)
{
    result = this.Name + " / " + this.Building;
}

After also making some adjustments to column order and width:

Notice that I concatenated this.Building to this.Name in DisplayName_Compute; what I get from this.Building is the Summary Property of Building, which includes Location in the Name, so Room is truly uniquely identified in the ListBox.

The combination of Book and Condition also need to be unique, as in OpenInventory, but only within Room. Therefore we set the Include in Unique Index for Book, Room, and Condition. Notice I’ve also dragged the column names into a more logical order:

Now for Book transfers. We’ll do OpenInventoryTransfers first.

I went ahead and defined the relationships and fields in a logical order. In this case the combination of Book and Condition is not unique, even within Room because you could have multiple transfers in process to or from a single Room for the same Book and Condition. It’s after they are received that the quantity from each will be deducted from the source inventory and added to the destination inventory uniquely identified by the same Book and Condition within the destination.

Once again it’s necessary to build New and Used choices for Condition, and now we add DestinationType with the choices of OpenInventory and Room. An OpenInventoryTransfer can be in either direction, from OpenInventory to Room or vice-versa. DestinationType identifies which.

ConditionVariance and QuantityVariance will be two computed fields that will indicate a variance in what was received from what was sent. Also we require QuantitySent to be greater than zero:

partial void ConditionVariance_Compute(ref bool result)
{
    result =
        this.Received &&
        ((this.Condition == "New" && this.QuantityReceivedUsed > 0) ||
        (this.Condition == "Used" && this.QuantityReceivedUsed > 0));
}
partial void QuantityVariance_Compute(ref bool result)
{
    result =
        this.Received &&
        (this.QuantityReceivedUsed + this.QuantityReceivedNew != this.QuantitySent);
}
partial void QuantitySent_Validate(EntityValidationResultsBuilder results)
{
    if (this.QuantitySent < 1)
        results.AddPropertyError("QuantitySent must be greater than zero");
}

Let’s go ahead and create the Editable Grid Screen. I’ll cut to the chase and show you the detail screen as the field sizes need serious pruning.

Notice that Condition Variance and Quantity Variance are displayed as labels rather than text boxes in the screen LightSwitch created by default:

That’s because we converted them to computed fields. If they were actual table columns they would be on the form as text boxes:

Now that Room is on the one side of some one-to-many relationships we should create a List and Details Screen:

We see the AssignedInventory collection for the selected Room…

… and the Open Inventory Transfers Collection

We can create new Rooms, new Assigned Inventories or Open Inventory Transfers to and from the selected Room from this screen. And you always have the luxury of form based entry when row based entry is too cumbersome:

After clicking OK:

Onward to AssignedInventoryTransfer, which is a transfer between two rooms. As you’d expect each AssignedInventoryTransfer has a Source Room and a Destination Room, putting Room on the one side of two one-to-many relationships:

How does this play out in the Room List and Details Screen? We need to re-create it to include the new collections:

Hit F5 to run in debug mode and we’ll modify the displayed collection names using Design Screen:

We can add transfers from this screen:

But first let’s add a business rule that the Source and Destination Rooms cannot be the same:

partial void AssignedInventoryTransfers_Validate(AssignedInventoryTransfer entity, EntitySetValidationResultsBuilder results)
{
    if (entity.Source == entity.Destination)
        results.AddEntityError("Source and Destination must be different Rooms");
}

Now if we try to create a transfer that violates this rule:

We can get this far:

But when we click Save:

We can quickly fix the mistake:

I think we have a complete set of screens to support basic CRUD on all our tables. I want to do some renaming and pruning. Let’s review:

We have the Editable Books Grid which allows us to create and maintain Book table rows. Book definitions stand on their own so we need a standalone form to edit them. Let’s change the screen title to Book Catalog.

We can maintain both Locations and Building through Locations List Detail which we’ll rename Locations And Buildings.

Editable Rooms Grid allows us to maintain Rooms but we can do that in Rooms List Detail, so it’s out.

OpenInventory can only be maintained in Editable Open Inventories Grid so we keep it under the name OpenInventoryScreen, OpenInventory being taken.

Both Editable Assigned Inventories Grid and Editable Open Inventory Transfers Grid can go. Assigned Inventories and Inventory transfers are always linked to a Room and so can be maintained through Rooms List Detail which I’m renaming Rooms And Books Inventory.

All the essential pieces are in place. We can create Book Definitions, Book inventory and Rooms for Book inventory assignment. We can create transfers between OpenInventory and Room and between two Rooms. We can record receipt of those transfers and variances between what was sent and what was received.

This is getting kind of long, so I’m going to post this as Part 1. One glaring necessity is validation of quantities for transfers. Are enough copies available at the source? And what about transfers that haven’t been completed when determining how many copies of a particular Book are available? Also we need security and accountability in the form of users and roles.

The next day…

Another omission just jumped out at me. The OpenInventory entity needs to have an OpenInventoryTransfer collection property and AssignedInventory entity needs to have an AssignedInventoryTransfer collection property – meaning the OpenInventoryTransfers table needs to hold a foreign key on the OpenInventory table, etc. so stay tuned for Part 2.

Ouch, I also duplicated Book and Condition in OpenInventoryTransfer. I can only think that in my head I saw the combination as the foreign key that OpenInventoryTransfer holds on OpenInventory. My only defense is LightSwitch makes it so easy you don’t do some things you normally do without thinking about.

More ...

Very Simple Example of ICommand CanExecute Method and CanExecuteChanged Event

Sat, 04 Dec 2010 05:16:15 GMT

Michael Washington said I should blog about this, so if it’s too mundane, blame him. I added some animation stuff to hopefully make it a little more interesting.

Consider a simulation where the ViewModel controls the onscreen action. On the following screen, clicking the Start Button will cause the space ship to fly around the the screen. But the Start Button should only be enabled if the ViewModel actually has access to the space ship and the Speed is valid.

Try It Out:

http://richardwaddell.adefwebserver.com/CanExecuteChangedSite/CanExecuteChangedExampleTestPage.html

Download Code:

http://richardwaddell.adefwebserver.com/CanExecuteChangedExample.zip

Acknowledgements:

John Papa for DelegateCommand

The Details

ICommand provides an interface that can easily be bound to by the View to execute code in the ViewModel. In addition to the Execute() method you might expect, it also calls for a CanExecute() method. CanExecute() returns true if Execute() can currently be ‘executed’ safely. If you bind a Button.Command property to an ICommand implementation, the Button is automatically enabled or disabled according to the value returned by CanExecute(). But CanExecute() is a method, not a property, so if conditions change so CanExecute() would return true rather than false, or vice-versa, Button must know to call CanExecute() to find the new value.

That’s where CanExecuteChanged comes in. Button, through its base class, ButtonBase, is automatically subscribed to the CanExecuteChanged event when the Button.Command property is bound to the ICommand. As you might expect, when ButtonBase catches the CanExecuteChanged Event it responds by calling the CanExecute() method and sets the Button.Enabled state accordingly. So in your code, whenever a condition or property changes that affect what CanExecute() will return, the CanExecuteChanged event should be raised.

I’ll point out here that CanStartAnimation(), which is the method that you supply when you create StartAnimationCommand , will be called by CanExecute() to determine what value to return. In this simple example, CanStartAnimation() returns true if the ViewModel has access to the spaceShip FrameworkElement. To clarify a little futher StartAnimationCommand is an ICommand property on MainPageViewModel. Specifically it is an instance of DelegateCommand,, a class generously provided by John Papa, which of course implements ICommand. The beauty of DelegateCommand is that it lets you define the methods to be called by CanExecute() and Execute().

CanExecute() doesn’t merely return the result from CanStartAnimation(). As you can see in the DelegateCommand source for CanExecute(), it determines whether the bool from CanStartAnimation() – which it just sees as a function pointer named canExecute that accepts an object and returns the bool in question, is different from the bool it got before. If so, it raises the CanExecuteChanged event.

public class DelegateCommand : ICommand
{
    Func<object, bool> canExecute;
    Action<object> executeAction;
    bool canExecuteCache;
    public DelegateCommand(Action<object> executeAction, Func<object, bool> canExecute)
    {
        this.executeAction = executeAction;
        this.canExecute = canExecute;
    }
    #region ICommand Members
    public bool CanExecute(object parameter)
    {
        bool temp = canExecute(parameter);
        if (canExecuteCache != temp)
        {
            canExecuteCache = temp;
            if (CanExecuteChanged != null)
            {
                CanExecuteChanged(this, new EventArgs());
            }
        }
        return canExecuteCache;
    }
    public event EventHandler CanExecuteChanged;
    public void Execute(object parameter)
    {
        executeAction(parameter);
    }
    #endregion
}

So for the StartAnimationCommand ICommand implementation, if anything changes that will affect what CanStartAnimation() will return, simply call CanStartAnimation(), as you can see in LoadWorldElements() below:

namespace CanExecuteChangedExample
{
    public class MainPageViewModel
    {
        private FrameworkElement _SpaceShip = null;
        #region WorldCanvas
        private Canvas _WorldCanvas;
        private Canvas WorldCanvas
        {
            set
            {
                if (this._WorldCanvas != value)
                {
                    this._WorldCanvas = value;
                    LoadWorldElements();
                }
            }
        }
        #endregion
        public MainPageViewModel()
        {
            StartAnimationCommand = new DelegateCommand(StartAnimation, CanStartAnimation);
            SetWorldCanvasCommand = new DelegateCommand(SetWorldCanvas, CanSetWorldCanvas);
        }
        public ICommand SetWorldCanvasCommand { get; set; }
        public void SetWorldCanvas(object param)
        {
            WorldCanvas = param as Canvas;
        }
        private bool CanSetWorldCanvas(object param)
        {
            return param is Canvas;
        }
            
        public ICommand StartAnimationCommand { get; set; }
        public void StartAnimation(object param)
        {
            RunAnimation();
        }
        private bool CanStartAnimation(object param)
        {
            return _SpaceShip != null;
        }
        private void LoadWorldElements()
        {
            _SpaceShip =
                (from child in _WorldCanvas.Children
                 let element = child as FrameworkElement
                 where element.Name == "spaceShip"
                 select element).FirstOrDefault();
            
            // Call DelegateCommand.CanExecute to raise the CanExecuteChangedEvent
            StartAnimationCommand.CanExecute(null);
        }
        private void RunAnimation()
        {
            // Animate the LayoutPath
            Storyboard sb = new Storyboard();
            DoubleAnimation XAnimation = new DoubleAnimation();
            DoubleAnimation YAnimation = new DoubleAnimation();
            sb.Children.Add(XAnimation);
            sb.Children.Add(YAnimation);
            sb.Duration = new Duration(TimeSpan.FromSeconds(3));
            XAnimation.Duration = sb.Duration;
            YAnimation.Duration = sb.Duration;
            XAnimation.To = _WorldCanvas.ActualWidth - _SpaceShip.ActualWidth;
            YAnimation.To = Convert.ToDouble(_SpaceShip.GetValue(Canvas.TopProperty)) + (_SpaceShip.ActualHeight * 2);
            Storyboard.SetTarget(sb, _SpaceShip);
            Storyboard.SetTargetProperty(XAnimation, new PropertyPath("(Canvas.Left)"));
            Storyboard.SetTargetProperty(YAnimation, new PropertyPath("(Canvas.Top)"));
            sb.Begin();
        }
    }
}

That covers the basics. I might point out that the parameter to CanExecute() is null in this case because CanExecute() is only interested in _SpaceShip. But in other scenarios CanExecute() might require a parameter. For instance the Button CommandParameter property can be bound:

If you specify an argument here, you’ll need to pass the same argument to CanExecute() when you’re trying to trigger the CanExecuteChanged event. Actually I’ll go ahead and show an example by adding a textbox where the user can enter the speed and bind the Text property to a Speed string property in MainPageViewModel. If the entered value is other than a positive integer, CanStartAnimation() returns false and the button is disabled.

        private bool CanStartAnimation(object param)
        {
            string sSpeed = param as String;
            if (String.IsNullOrWhiteSpace(sSpeed))
                return false;
            int nSpeed  = 0;
            if (Int32.TryParse(sSpeed, out nSpeed) == false)
                return false;
            if (nSpeed < 1)
                return false;
            return _SpaceShip != null;
        }

And of course when Speed changes we call CanExecute() which will call CanStartAnimation() which will evaluate the property we just changed, although we are passing it as an argument.

Which brings up a good point. We could use the property Speed directly as we did the variable _SpaceShip, and much as it pains me, it probably does make more sense to use the property which, no matter what you call it, is a global variable, rather than passing it as an argument. Why? Because now everyplace that calls CanStartAnimation() has to pass the same argument that Button (or any other FrameworkElement that binds to the ICommand) does.

If there were no argument, then there could be no ambiguity – which stems from the fact in some cases it’s only being called to trigger the CanExecuteChanged event and in others it’s being called by ButtonBase to actually get the return value. If you change what Button passes, you have to remember to change everyplace that was passing the old value to trigger CanExecuteChanged.

If instead you change a property (global variable) that affects what CanExecute() will return you only have to remove the CanExecuteChanged-triggering-call to CanExecute() from the property setter for the one you are no longer using and add it to the new one. And you have to have a property (global variable) for the UI to bind to, so using it as an argument is redundant. Accordingly, in a ViewModel-centric world it makes sense for the UI (the perceived world) to affect the properties in the ViewModel (the real world) and for events in the UI to trigger actions against those properties. It took me awhile to come around to that point of view, ‘cause I do love my arguments – even when I call them parameters.

But still, I do need an example:

        #region Speed
        private string _Speed = "300";
        public string Speed
        {
            get { return this._Speed; }
            set
            {
                if (this._Speed != value)
                {
                    this._Speed = value;
                    this.NotifyPropertyChanged("Speed");
                    StartAnimationCommand.CanExecute(value);
                }
            }
        }
        #endregion

Here are the changes to RunAnimation().

        private void RunAnimation(int speed)
        {
            Point currentPosition = SpaceShipPosition;
            if (_sbFlight != null)
                _sbFlight.Stop();
            SpaceShipPosition = currentPosition;
            ...
            Double distance = ComputeDistance(SpaceShipPosition, new Point(targetX, targetY));
            _sbFlight.Duration = new Duration(TimeSpan.FromSeconds(distance / speed));
            ...
            _sbFlight.Completed += (sender, eventArgs) =>
            {
                if (Continuous && CanStartAnimation(Speed))
                    StartAnimation(Speed);
            };
            _sbFlight.Begin();
        }
        private Point SpaceShipPosition
        {
            get 
            { 
                if (_SpaceShip != null)
                    return new Point(Convert.ToDouble(_SpaceShip.GetValue(Canvas.LeftProperty)), Convert.ToDouble(_SpaceShip.GetValue(Canvas.TopProperty)));
                else
                    return new Point(0, 0);
            }
            set
            {
                if (_SpaceShip != null)
                {
                    _SpaceShip.SetValue(Canvas.LeftProperty, value.X);
                    _SpaceShip.SetValue(Canvas.TopProperty, value.Y);
                }
            }
        }

Notice I changed the StoryBoard to a member variable so I could stop the running animation before starting the next one. If you don’t, things get weird after you click start several times in a row quickly.

I decided to cut to the chase before laying out the step by step. If you’re interested the rest covers the back story up to the point where I first need to raise the CanExecuteChanged event.

The Basic Project

Select MainPageViewModel to be the DataContext for LayoutRoot (or UserControl).

Add an InvokeCommandAction to LayoutRoot to be triggered by the LayoutRoot.Loaded event:

The Command is SetWorldCanvas():

The parameter is LayoutRoot itself:

Bind the Button to StartAnimationCommand:

But the button appears disabled:

That’s because ButtonBase calls CanStartAnimation() before LayoutRoot.Loaded calls SetWorldCanvas(). The WorldCanvas property setter calls LoadWorldElements(), which sets _SpaceShip, which will cause CanExecute() to enable Button. But in spite of that the sequence of the calls at startup leaves Button disabled.

        private void LoadWorldElements()
        {
            _SpaceShip =
                (from child in _WorldCanvas.Children
                 let element = child as FrameworkElement
                 where element.Name == "spaceShip"
                 select element).FirstOrDefault();
            
            // Call DelegateCommand.CanExecute to raise the CanExecuteChangedEvent
            StartAnimationCommand.CanExecute(null);
        }

Add the line StartAnimationCommand.CanExecute() to LoadWorldElements() and voila.

More ...

Add Tabbed Pages To Your Silverlight Project, Quick and Easy

Sun, 21 Nov 2010 21:52:53 GMT

Michael Washington made such a good case for tabbed pages that I decided to adapt a project I was already blogging about. I’d reached the point where I’d created a simple example and now wanted to build on it. Usually, rather than go to the trouble of creating some paging mechanism, I’d just keep on coding and the source underlying the example would be gone forever. With tabbed pages it’s easy to keep each example within its own tabbed page. I’m glad I made the decision, because his example made it easy to make the change:

If you want to really understand what’s going on, I refer you to Michael’s article. I’m just going to supply you with code that will let you easily create and select tabbed pages.

Download Code:

http://richardwaddell.adefwebserver.com/ooNaTabbed.zip

Other Acknowledgements:

John Papa for Delegate Command

TabbedPageContainer

In the main page of my project, the Canvas that will contain the tabbed pages is named TabbedPageContainer. It doesn’t really need a name, I just gave it one so you can easily keep track of it. You can see that it contains a TabControl and that the TabControl has an AddTabItem behavior attached:

The StackPanel above TabbedPageContainer contains a ComboBox that will be used to select pages to load into new TabItems. When a selection is made the AddTabItem behavior is triggered to add the appropriate UserControl. First let’s look at the Behavior:

AddTabItem Behavior

}namespace ooNaTabbed
{
    public class AddTabItem : TargetedTriggerAction
    {
        // The AddTabItem Behavior
        // - Is intended to be triggered by a change in the SelectedIndex property as bound to by designer
        // - Determines which UseControl is to be added as the content of the new TabItem, 
        // - Creates an instance of the UserControl
        // - Creates a GenericTabHeader control with the appropriate page name to be used as the TabItem Header
        // - Adds the new UserControl and GenericTabHeader to the TabItem
        // - Sets references to TabControl and TabItem in the GenericTabHeaderViewModel
        // - Adds the TabItem to the TabControl
        TabControl _tabControl;
        #region SelectedIndexProperty
        public static readonly DependencyProperty SelectedIndexProperty = DependencyProperty.Register("SelectedIndex",
            typeof(int), typeof(AddTabItem), null);
        // Designer binds SelectedIndex to combobox SelectedIndex Property - TwoWay binding
        public int SelectedIndex
        {
            get {return (int)base.GetValue(SelectedIndexProperty);}
            set {base.SetValue(SelectedIndexProperty, value);}
        }
        #endregion
        protected override void OnAttached()
        {
            base.OnAttached();
            _tabControl = AssociatedObject as TabControl;
        }
        // The behavior is triggered
        protected override void Invoke(object parameter)
        {
            AddTabToTabControl();
        }
        protected override void OnDetaching()
        {
            base.OnDetaching();
        }
        private void AddTabToTabControl()
        {
            // Bail if appropriate
            if (_tabControl == null || SelectedIndex < 0)
                return;
            // The header is just the name and a button to close the tab
            GenericTabHeader tabHeader = new GenericTabHeader();
            // We get the ViewModel behind the GenericTabHeader UserControl, bound to by the designer
            GenericTabHeaderViewModel headerVM = tabHeader.DataContext as GenericTabHeaderViewModel;
            if (headerVM != null)
            {
                // Create the TabItem that will be added to the TabControl
                TabItem tabItem = new TabItem();
                // Determine which UserControl to create and what to display in the header
                switch (SelectedIndex)
                {
                    case 0:
                        tabItem.Content = new XamlPathList();
                        headerVM.HeaderDisplay = "Design-Time PathListBox";
                        break;
                    case 1:
                        tabItem.Content = new DynamicPathList();
                        headerVM.HeaderDisplay = "Run-Time PathListBox";
                        break;
                    default:
                        headerVM.HeaderDisplay = string.Format("Unknown selection: {0}", SelectedIndex);
                        break;
                }
                // Use the header we just created
                tabItem.Header = tabHeader;
                // The GenericTabHeaderViewModel needs references to the TabControl and TabItem so it can close the tab when the user clicks on the close button
                headerVM.TabControlClient = _tabControl;
                headerVM.TabItemClient = tabItem;
                // And finally, add the new TabItem to the TabControl
                _tabControl.Items.Add(tabItem);
            }
        }
    }
}

GenericTabHeaderViewModel

GenericTabHeader is a UserControl used to supply the contents of the TabItem.Header. GenericTabHeaderViewModel provides the functionality:

namespace ooNaTabbed
{
    public class GenericTabHeaderViewModel : INotifyPropertyChanged
    {
        // GenericTabHeaderViewModel has two functions
        // - Maintain a HeaderDisplay string property for the tab header name display to bind to
        // - Support a CloseTabCommand ICommand implementation for the tab header close button to bind to
        #region Constructor(s)
        public GenericTabHeaderViewModel()
        {
            CloseTabCommand = new DelegateCommand(CloseTab, CanCloseTab);
        }
        #endregion
        #region CloseTabCommand
        public ICommand CloseTabCommand { get; set; }
        public void CloseTab(object param)
        {
            // Remove this TabItem from the Tab control
            TabControlClient.Items.Remove(TabItemClient);
        }
        private bool CanCloseTab(object param)
        {
            return TabControlClient != null && TabItemClient != null;
        }
        #endregion
        // TabControlClient and TabItemClient are set by the AddTabItem behavior
        #region TabControlClient
        private TabControl _TabControlClient;
        public TabControl TabControlClient
        {
            get { return this._TabControlClient; }
            set
            {
                if (this._TabControlClient != value)
                {
                    this._TabControlClient = value;
                    this.NotifyPropertyChanged("TabControlClient");
                }
            }
        }
        #endregion
        #region TabItemClient
        private TabItem _TabItemClient;
        public TabItem TabItemClient
        {
            get { return this._TabItemClient; }
            set
            {
                if (this._TabItemClient != value)
                {
                    this._TabItemClient = value;
                    this.NotifyPropertyChanged("TabItemClient");
                }
            }
        }
        #endregion
        #region HeaderDisplay
        private string _HeaderDisplay = "Tab Header";
        public string HeaderDisplay
        {
            get { return this._HeaderDisplay; }
            set
            {
                if (this._HeaderDisplay != value)
                {
                    this._HeaderDisplay = value;
                    this.NotifyPropertyChanged("HeaderDisplay");
                }
            }
        }
        #endregion

Bringing it All Together

Here’s the binding to the behavior:

You can’t see it clearly, but the SourceObject is set to the ComboBox, and as you can see the behavior is triggered onthe SelectionChangedEvent.

And here’s the binding of the Behavior SelectedIndex property to the SelectedIndex property of the ComboBox:

The upshot being that the change in the ComboBox SelectionChanged event triggers the behavior, which then uses the property that changes as a result of the event, SelectedIndex, to determine which UserControl to create as content for the new TabItem.

Speaking of which, here’s how the ComboBox gets loaded:

The Grungy Part

Summary

As I mentioned in the beginning, this is a quick way to add tabbed pages to your project, and what’s quicker than adding hard-coded list items and determining which is which by their offset in the list? In anything other than a demonstration application you’ll probably want this part of the code to be more robust. In that case you can bind to the ComboBox SelectedItem or SelectedValue properties. When you load the ComboBox you would set the Value property of each ComboBoxListItem to some value, such as an enum, that would specifically identify the selection no matter what order the list is in.

Fixes

I guess I should point out that the content of the pages has nothing to do with the subject of the article. They’re part of a project I was working on when I decided to switch to tabbed pages. But even so, the problem that Michael Washington found (and fixed) on the first page should not stand. The animation needs to stop when the user switches away from the page:

I also decided I wanted the first item in the ComboBox selected automatically, so I added a SelectFirstItem Behavior to be triggered by the ComboBox Loaded event (bound by the Designer in Blend – not shown):

namespace ooNaTabbed
{
    public class SelectFirstItem : TargetedTriggerAction
    {
        private ComboBox _ComboBox;
        protected override void OnAttached()
        {
            base.OnAttached();
            _ComboBox = AssociatedObject as ComboBox;
        }
        protected override void Invoke(object parameter)
        {
            if (_ComboBox != null && _ComboBox.Items.Count > 0)
                _ComboBox.SelectedIndex = 0;
        }
        protected override void OnDetaching()
        {
            base.OnDetaching();
        }
    }
}

The problem is that AddTabItem behavior is triggered on the ComboBox SelectionChanged event. which is not triggered by programmatically changing the value of CombobBox SelectedIndex. So the AddTabItem behavior must be triggered on the ComboBox SelectedIndex PropertyChanged event:

The change is subtle, but important. Instead of being triggered by the ComboBox SelectionChanged event, the AddTabItem Behavior is triggered by the change in the ComboBox SelectedIndex property. AddTabItems is now bound to SelectedIndex in two ways. It’s triggered when the property changes, and the behavior SelectedIndex property is bound to the ComboBox SelectedIndex property – which actually makes the most sense – a change in the property you’re interested in causes you to do something with that property, or more accurately the local copy of the property which is kept current through binding. Keep in mind, however, that type of binding, where a change to the UI sets the underlying property is only supported if you set Binding Direction to TwoWay as you see below:

And one last note; I found that as I add pages I prefer the default tab to open at startup be the last one in the list, so I created an OpenLastItem behavior with the following change to the Invoke method:

        protected override void Invoke(object parameter)
        {
            if (_ComboBox != null && _ComboBox.Items.Count > 0)
                _ComboBox.SelectedIndex = _ComboBox.Items.Count - 1;
        }

More ...

PollResultsBarBehavior – Binding to Multiple Values Through a Behavior and Custom Dependency Properties

Sun, 31 Oct 2010 03:36:30 GMT

This is a follow up to my previous article PollResultsBar – Binding to Multiple Values Through Inheritance and Custom Dependency Properties

In it I describe how to bind a single ProgressBar property to multiple ViewModel properties through use of an inherited class so I can bind the Maximum property to the sum of the Agree and Disagree counts. I found it’s possible to accomplish the same thing through a behavior:

DownloadCode:

http://richardwaddell.adefwebserver.com/PollResultsBarBehaviorDemo.zip

The Behavior

namespace PollResultsBarDemo
{
    public class PollResultsBarBehavior : Behavior
    {
        ProgressBar _progressBar;
        public PollResultsBarBehavior()
        {
	}
        protected override void OnAttached()
        {
	    base.OnAttached();
            _progressBar = AssociatedObject as ProgressBar;
	}
        protected override void OnDetaching()
        {
	    base.OnDetaching();
	}
        public static readonly DependencyProperty LeftValueProperty =
             DependencyProperty.Register("LeftValue",
                                             typeof(int),
                                             typeof(PollResultsBarBehavior),
                                             new PropertyMetadata(50, new PropertyChangedCallback(OnLeftValueChanged)));
        public static readonly DependencyProperty RightValueProperty =
             DependencyProperty.Register("RightValue",
                                             typeof(int),
                                             typeof(PollResultsBarBehavior),
                                             new PropertyMetadata(50, new PropertyChangedCallback(OnRightValueChanged)));
        public int LeftValue
        {
            get { return (int)base.GetValue(LeftValueProperty); }
            set { base.SetValue(LeftValueProperty, value); }
        }
        public int RightValue
        {
            get { return (int)base.GetValue(RightValueProperty); }
            set { base.SetValue(RightValueProperty, value); }
        }
        public static void OnLeftValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            SetMaximum(d as PollResultsBarBehavior);
            SetValue(d as PollResultsBarBehavior, (int)e.NewValue);
        }
        public static void SetValue(PollResultsBarBehavior bar, int value)
        {
            if (DesignerProperties.GetIsInDesignMode(Application.Current.RootVisual))
                return;
            if (bar._progressBar != null)
                bar._progressBar.Value = value;
        }
        public static void OnRightValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            SetMaximum(d as PollResultsBarBehavior);
        }
        private static void SetMaximum(PollResultsBarBehavior bar)
        {
            if (DesignerProperties.GetIsInDesignMode(Application.Current.RootVisual))
                return;
            if (bar._progressBar != null)
                bar._progressBar.Maximum = bar.LeftValue + bar.RightValue;
        }
    }

The code is not that different, we are just applying the Behavior properties to the attached ProgressBar instead of applying new properties in the inherited class to base properties of the ProgressBar class we inherited from. You could say that the behavior has a ProgressBar, whereas PollResultsBar is a ProgressBar.

Find the behavior under Assets/Behaviors and attach to the ProgressBar you used to replace PollResultsBar. Notice that nothing triggers the behavior. It simply detects changes to its properties and applies them to the ProgressBar:

Now bind the behavior LeftValue and RightValue properties by dragging from MainPageViewModel:

and selecting from the dropdown:

Do the same with DisagreeCount and the RightValue Property.

You may notice above that Blend is unhappy with these settings. At some point it may show an exception in the design area and prevent you from getting out of the ItemTemplate and back to MainPage.xaml. In this case close Blend and reopen and everything should be fine. There seemed to be fewer problems if you bind AgreeCount and Disagree count by binding the long way:

and then picking AgreeCount:

Well, maybe not. Just tried it again and Blend threw an exception

At this point you can’t get out of the ItemTemplate so you have to re-start Blend.

Fortunately, I found a way to avoid the problem. If I find myself in Design Mode when I’m about to set a ProgressBar property I bail :

        public static void SetValue(PollResultsBarBehavior bar, int value)
        {
            if (DesignerProperties.GetIsInDesignMode(Application.Current.RootVisual))
                return;
            if (bar._progressBar != null)
                bar._progressBar.Value = value;
        }
        private static void SetMaximum(PollResultsBarBehavior bar)
        {
            if (DesignerProperties.GetIsInDesignMode(Application.Current.RootVisual))
                return;
            if (bar._progressBar != null)
                bar._progressBar.Maximum = bar.LeftValue + bar.RightValue;
        }

When you run the app you should see:

Summary

It’s hard to say which it the better approach. It probably comes down to which provides the more reusable code, which probably depends on the circumstance.

I am fascinated by behaviors and the concept of a control that provides the capabilities but is exclusively directed by behaviors in its actual activities, so I’ll probably lean in the direction of using them.

More ...

PollResultsBar – Binding to Multiple Values Through Inheritance and Custom Dependency Properties

Sat, 30 Oct 2010 20:22:05 GMT

I recently had the requirement to create an interface similar to the following:

The item of interest is the colored bar that shows the ratio between agreements and disagreements. We can use a ProgressBar and set the Maximum property to the total of the Agree and Disagree counts, and set the Value property to the Agree count. Nothing very tricky except how to bind the Maximum property in the ProgressBar to two separate properties in the ViewModel.

This may not be the best solution, but it’s a good example of how you can use inheritance and custom Dependency Properties to solve the problem.

DownloadCode:

http://richardwaddell.adefwebserver.com/PollResultsBarDemo.zip

To start we’ll create a Silverlight application with hosting web site. Here’s a step-by-step if you need it; you can ignore all the stuff about isolating the code in a separate Silverlight class library for this simple example, just do the steps to create the Silverlight project and select the option to create the hosting website.

First we’ll create a PollResults class:

namespace PollResultsBarDemo
{
    public class PollResults
    {
        public PollResults(string statement, int agreeCount, int disagreeCount)
        {
            Statement = statement;
            AgreeCount = agreeCount;
            DisagreeCount = disagreeCount;
        }
        public string Statement { get; set; }
        public int AgreeCount { get; set; }
        public int DisagreeCount { get; set; }
    }
}

Then a PollResultsBarDemoModel class to provide a GetPollResults method:

namespace PollResultsBarDemo
{
    public class PollResultsBarDemoModel
    {
        public static ObservableCollection GetPollResults()
        {
            ObservableCollection colResults = new ObservableCollection();
            colResults.Add(new PollResults("I'm coo-coo for Cocoa Pops", 170, 45));
            colResults.Add(new PollResults("Dogs are better than cats", 60, 60));
            colResults.Add(new PollResults("The world will end in 2012", 15, 30));
            return colResults;
        }
    }
}

And a MainPageViewModel class to consume it. You’ll notice I called GetPollResults() from the constructor. In the real-world you may or may not want to do this, and you would probably provide a GetPollResultsCommand ICommand property that can be invoked from the View.

Speaking of the View, open MainPage.xaml in Expression Blend:

At this point I ran into a problem in that Blend initially couldn’t see MainPageViewModel even after re-building and opening and closing. Eventually I removed the constructor and re-built at which point Blend could see it. I put the constructor back in and fortunately Blend could still see it. So I was able to move ahead with:

We want to assign MainPageViewModel to the DataContext property of UserControl.

Select UserControl in Objects and Timeline
Locate the DataContext property
Click the New button next to it
A Select Object dialog will appear
Select MainPageViewModel

Once you click on ‘OK’, you can select the Data tab and see that PollResultsList is available:

(I did this a little out of order, so the ListBox I’m about to add already appears in the screen shots above.)

Add a ListBox to LayoutRoot. The easiest way is to, with LayoutRoot selected, click on the little white triangle on the icon above the Assets icon, whose default image will be a Button icon, as shown. Then click on ListBox on the dropdown and the ListBox icon will replace the Button icon on the Tools Panel. Double-click on the ListBox icon and one will be inserted into LayoutRoot.

Drag PollResultsList onto UserControl so that you see the message shown below:

I’m a big fan of instant gratification, so I always run stuff the first time I think something will show up:

Setting Width and Height to Auto and the alignment to Stretch will cause the ListBox to fill LayoutRoot:

The problem with that is at run-time you get a ListBox that fills the entire browser window. For this example I’m going to continue to fill LayoutRoot, which fills UserControl, with the ListBox, so let’s constrain UserControl to 400 x 600.

In case you don’t know, the little white squares next to Width and Height (Advanced Option icons) indicate that they are set to other than their default values. If they were still at their default values the Advanced Option icons would appear gray, as you see next to HorizontalAlignment in the line below Height.

Don’t confuse default with the initial settings you get when you add a new control in Blend. Quite often they arrive with the Advanced Options icon set to white.

We need to reformat the list box entries which means editing the ListBox ItemTemplate. Right-click on ListBox, then select Edit Additional Templates/ Edit Generated Items (ItemTemplate) / Edit Current:

As you can see, our current ItemTemplate is a vertically oriented StackPanel containing three TextBoxes.

We can sort this out pretty quick. Move the bottom TextBlock above the other two and set its Width to Auto:

Add a new StackPanel to the existing one and set its Width and Height to Auto and Orientation to Horizontal:

Starting with the second of the three TextBlocks, cut and paste the bottom two into the new StackPanel.

Now all we need is a PollResultsBar to place between the two TextBlocks in the second StackPanel:

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.ComponentModel;
namespace PollResultsBarDemo
{
    public class PollResultsBar : ProgressBar
    {
        public static readonly DependencyProperty LeftValueProperty =
             DependencyProperty.Register("LeftValue",
                                             typeof(int),
                                             typeof(PollResultsBar),
                                             new PropertyMetadata(0, new PropertyChangedCallback(OnLeftValueChanged)));
        public static readonly DependencyProperty RightValueProperty =
             DependencyProperty.Register("RightValue",
                                             typeof(int),
                                             typeof(PollResultsBar),
                                             new PropertyMetadata(0, new PropertyChangedCallback(OnRightValueChanged)));
        public int LeftValue
        {
            get { return (int)base.GetValue(LeftValueProperty); }
            set { base.SetValue(LeftValueProperty, value); }
        }
        public int RightValue
        {
            get { return (int)base.GetValue(RightValueProperty); }
            set { base.SetValue(RightValueProperty, value); }
        }
        public static void OnLeftValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            SetValue(d as PollResultsBar, (int)e.NewValue);
            SetMaximum(d as PollResultsBar);
        }
        public static void SetValue(PollResultsBar bar, int value)
        {
            bar.Value = value;
        }
        public static void OnRightValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            SetMaximum(d as PollResultsBar);
        }
        private static void SetMaximum(PollResultsBar bar)
        {
            bar.Maximum = bar.LeftValue + bar.RightValue;
        }
    }
}

The Dependency Properties allow Blend to enable binding to PollResultsBar LeftValue and RightValue.
Each Dependency property Registration specifies a method to be called when the property value changes.
These methods, OnLeftValueChanged and OnRightValueChanged cast the DependencyObject argument ‘d’ to PollResultsBar and calls SetMaximum()
SetMaximum() sets the ProgressBar Maximum property to the sum of LeftValue and RightValue.
OnLeftValueChanged calls SetValue() which sets the ProgressBar.Value property to (int)e.NewValue.

After re-building the project, I had to fiddle with the code and closing and re-opening Blend to get the PollResultsBar control is available in Assets / Project:

Add it to StackPanel and move it between the two TextBlocks. I also added a margin to the left of PollResultsBar and the left of the second TextBlock:

Drag AgreeCount onto PollResultsBar:

Select LeftValue from the dropdown:

Do the same for RightValue, run the application, and sure enough:

Since PollResultsBar is maintaining the value, I tried to hide ProgressBar.Maximum property from Blend:

        private new double Maximum
        {
            set { base.Maximum = value; }
            get { return base.Maximum; }
        }

With no success:

Summary

This seems like a pretty comprehensive way to handle binding to multiple properties in the ViewModel.

I’m pretty sure you could do the same with a behavior,which will probably be my next blog.

More ...

HisowaModPopUpBehavior with de Oliveira Menu

Wed, 27 Oct 2010 20:07:42 GMT

This tutorial will take you through the steps necessary to add a Menu to a Silverlight UserControl and attach a HisowaModPopUpBehavior and make them work together.

The advantages of Marcelo Ricardo de Oliveira’s Silverlight Menu:

1. It’s easy to implement.

2. It’s easy to understand.

3. It’s easy to customize.

4. You can specify an ICommand to be called when any selection is clicked and determine the selection within the ICommand implementation.

5. You can catch a MenuItemClicked event and get the selected menu item in the event handler.

The advantages of Haruhiro Osawa’s HisowaModPopUpBehavior:

1. You can define your own UserControl to be presented as the UI of a Popup Window, composed of View and ViewModel.

2. You can customize the frame of the Popup Window through behavior properties.

3. You can trigger the Popup Window as you would any other behavior, such as on the MenuItemClicked event.

4. You can specify an ICommand implementation to be called when the user exits the window

5. You can access the ViewModel of your Custom User Interface to determine the user’s selection and of course whether the user accepted or declined.

Other Acknowledgements / References:

Josh Smith for the RelayCommand helper class.

Code-Free Zones and Silverlight Class Libraries

I like the idea of keeping all the C# code except for the mandatory code-behind in one or more separate class libraries.

Therefore, our solution will consist of

A hosting web application project
The main Silverlight project with
A Silverlight Class Library project

If you need to see how the solution was put together, or if you’re just curious all the steps are described in a separate article.

Views and ViewModels

We’ve added a reference to MenuPopupViewModel.dll. Now we’ll create a MainPageViewModel class, build the MenuPopupViewModel project and find out if we can see the class when we open MainPage.xaml in Blend.

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace MenuPopupViewModel
{
    public class MainPageViewModel
    {
    }
}

And sure enough, there it is. To add MainPageViewModel as the DataContext for MainPage.UserControl

Select UserControl in Objects and Timeline
From Properties/Common Properties click on the New button next to DataContext.
From the Select Object dialog, select MainPageViewModel.

So far, so good. Our next challenge is to create the menu class in MenuPopupViewModel. Strictly speaking this class should go in a separate assembly since it’s not really part of the ViewModel. As you’ll see, Menu inherits from Grid, so it’s a UIElement, but if we want to maintain MenuPopUp as a code-free zone it should live in a class library, and for convenience we’re leaving it in MenuPopupViewModel.dll. Here’s how the project looks after adding a Classes folder, the two Silverlight Menu files and a helper class that’s included with the Silverlight Menu sample project. The helper class, RelayCommand, is from Josh Smith and is described on Patrick Cauldwell's Blog.

After we build MenuPopupViewModel and go back to Blend we look at Assets/Locations/MenuPopupViewModel.csproj and see that we now have a Menu control available.

So you can drag it from here to Layout Root (which has an annoying habit of refusing to work on the first try), or double-click it here to pin it to the tool panel and then double-click to add it to the currently selected control. I chose to drag it, and on the second try it worked:

Out of the box, Menu is placed in the upper-left corner of LayoutRoot and is sized at 100 x 100.

And although you can see the Menu control in Blend, when you run the app you get a blank screen, actually the whole page is a blank white page. That’s because the default settings cause MainPage to expand to fill the browser page.

For some reason Menu doesn’t appear, but I don’t want MainPage to fill its container anyway. I want it to be a fixed size, so I’m going to hard-code it to 800 x 600 and leave LayoutRoot set to stretch, and when I run it I see a blank menu along the top.

Adding The MenuItems

Now let’s add some selections to our menu in the form of MenuItems. As you might expect, the MenuItem collection will be in MainPageViewModel.

private MenuItem _MVVMMenuItem;
public MenuItem MVVMMenuItem
{
    get { return this._MVVMMenuItem; }
    set
    {
        if (this._MVVMMenuItem != value)
        {
            this._MVVMMenuItem = value;
            this.NotifyPropertyChanged("MVVMMenuItem");
        }
    }
}

On the face of it this is not a collection of MenuItems. But if we look at the actual MenuItem class…

// Author of MenuItem Class: Marcelo Ricardo de Oliveira  http://www.codeproject.com/KB/silverlight/SilverlightMenu.aspx
namespace MenuPopupViewModel
{
    [ContentProperty("MenuItems")]
    public class MenuItem : ObservableCollection
    {

…. we see that each MenuItem is a collection of MenuItems. This is slightly confusing to Blend as we’ll see later when we try to bind to the Name property of the Selected MenuItem.

So, back in MainPageViewModel we initialize MVVMMenuItem in the constructor:

public MainPageViewModel()
{
    // Menu Stuff
    this.MVVMMenuItem = new MenuItem() { Name = "Root" };
    var mnuFile = new MenuItem() { Name = "mnuFile", Text = "File" };
    var mnuTools = new MenuItem() { Name = "mnuTools", Text = "Tools" };
    var mnuHelp = new MenuItem() { Name = "mnuHelp", Text = "Help" };
    var mnuExit = new MenuItem() { Name = "mnuExit", Text = "Exit" };
    var mnuThemes = new MenuItem() { Name = "mnuThemes", Text = "Themes" };
    var mnuAbout = new MenuItem() { Name = "mnuViewHelp", Text = "About Silverlight Menu" };
    mnuFile.Add(mnuExit);
    mnuTools.Add(mnuThemes);
    mnuHelp.Add(mnuAbout);
    MVVMMenuItem.Add(mnuFile);
    MVVMMenuItem.Add(mnuTools);
    MVVMMenuItem.Add(mnuHelp);
}

Now we have to bind the collection to the menu. You might think you could drag it:

Don’t Do This!!!!

But every time I tried Blend crashed. So you have to select the Advanced Option Icon next to the MenuItem property Unfortunately, when you do so, you only get these two options.

Go with Custom Expression… and enter:

You should use Custom expression instead of editing the xaml directly because it will validate what you enter, and that’s the only place it gets validated. If you enter it directly and spell it wrong Blend will continue to show the gold border and the data type, such as ‘(Collection)’ in the screen shot above – and the binding will fail silently.

However, even though you should always use it, sometimes Custom expression rejects a valid expression, so in that case you have no choice but to edit the xaml (arrrgh):

<Grid x:Name="LayoutRoot" Background="#FF588131">
    <MenuPopupViewModel:Menu x:Name="menu" MenuItem="{Binding MVVMMenuItem}"

And that’s it, we’re good to go!!

We’re missing an image but that’s ok for now. What we want to do now is to do something when the menu clicks on a menu item. To start with, we’ll create an ICommand implementation to be called when a menu item is clicked:

public ICommand MenuCommand
{
    get { return new RelayCommand(p => DoMenuCommand(p)); }
}
public void DoMenuCommand(object param)
{
    var menuItem = (MenuItem)param;
    MessageBox.Show(string.Format("You clicked: {0}", menuItem.Name));
}

Note that MenuCommad is a property that references an ICommand implementation. It does not use a backing store, instead get calls the RelayCommand constructor passing DoMenuCommand as the Action argument and returns the resulting ICommand object. If you’re not familiar with the syntax, a peek at the RelayCommand constructor might help. Notice there’s an overload that allows you to pass in a canExecute Predicate.

//RelayCommand Implementagion by Josh Smith, as described here:
//http://www.cauldwell.net/patrick/blog/MVVMBindingToCommandsInSilverlight.aspx
//...
/// 
/// Creates a new command that can always execute.
/// 
/// execute">The execution logic.
public RelayCommand(Action<object> execute)
    : this(execute, null)
{
}
/// 
/// Creates a new command.
/// 
/// execute">The execution logic.
/// canExecute">The execution status logic.
public RelayCommand(Action<object> execute, Predicate<object> canExecute)
{
    if (execute == null)
        throw new ArgumentNullException("execute");
    _execute = execute;
    _canExecute = canExecute;
}

When the ICommand is actually invoked we see that parameter is passed to the Action originally passed into the constructor, in this case DoMenuCommand. We could have added a Predicate to validate that parameter is a MenuItem, but in this case we’re trusting the caller.

#region ICommand Members
[DebuggerStepThrough]
public bool CanExecute(object parameter)
{
    return _canExecute == null ? true : _canExecute(parameter);
}
public event EventHandler CanExecuteChanged;
public void Execute(object parameter)
{
    _execute(parameter);
}
#endregion // ICommand Members

Ok, we have our ICommand and we know what happens when it gets called. Now we need to make Menu call it when a menu item is clicked. For that we again have to resort to Custom expression. Set the menu Command property to bind to MenuCommand as seen below.

And once again Custom expression may refuse a valid expression, so here’s the raw xaml:

<Grid x:Name="LayoutRoot" Background="#FF588131">
    <MenuPopupViewModel:Menu x:Name="menu" MenuItem="{Binding MVVMMenuItem}" Command="{Binding MenuCommand}" />
Grid>

That single expression is all menu needs to invoke the command, because when we try it out we see that DoMenuCommand does get called:

Here’s how it works. Command is a Menu DependencyProperty:

CommandProperty =
DependencyProperty.Register("Command", typeof(ICommand), typeof(Menu),
new PropertyMetadata(null,
new PropertyChangedCallback(OnCommandChanged)));

You can see that a callback has been defined that will be called when the property changes. And here it is:

public void OnCommandChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
  command = (ICommand)e.NewValue;
}

And here’s the actual property.

public ICommand Command
{
   get { return (ICommand)GetValue(CommandProperty); }
   set { SetValue(CommandProperty, value); }
}

Step by step:

MainPage.xaml causes Dependency Property Menu.Command to change by binding it to MainPageViewModel.MenuCommand.
That change of Menu.Command causes OnCommandChanged() to be called, passing MainPageViewModel.MenuCommand as the event argument property NewValue.
OnCommandChanged() sets Menu.command to NewValue so it now references MainPageViewModel.MenuCommand().
When a menu selection is clicked Menu, in the event handler shown below, calls command.Execute() passing MenuItem as the argument.
When RelayCommand constructs the ICommand implementation that is returned by the MenuCommand property getter, it sets its internal Action field,_execute to point to DoMenuCommand()
The result is that when Menu.command.Execute() calls _execute, MainPageViewModel.DoMenuCommand() is called with the selected MenuItem as the argument.

        void gridLevel2_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            // ...
            if (command != null)
                command.Execute(menuItem);
        }

Unfortunately that’s not sufficient for our needs. When the user clicks on Themes, we want a Themes Selection Popup window to appear. We need a user interface and that’s not handled very conveniently through the ViewModel.

And of course that’s where HisowaModPopUpBehavior comes in.

We attach the behavior to menu and trigger it on MenuItemClicked
We define our own UserControl, ThemeSelectionView that we want to appear within the popup along with ThemeSelectionViewModel.
We define the ICommand. InstallThemeCommand that we want to be called when the user clicks the Install button.

We add it to MenuPopupViewModel classes and rebuild the MenuPopupViewModel project.

Back in Blend, under Assets/Behaviors we now find HisowaModPopUpBehavior.

Drag the behavior onto menu:

Now if we look under HisowaModPopupBehavior Properties at the EventName dropdown we find that menu supports a MenuItemClicked event, so we go with that:

And remove the Menu Command binding:

Now if we click on any menu item we see this:

We haven’t supplied any content, so all we see are the Yes and No buttons. Also, the behavior is the same for all menu items so we need to find a way to discriminate between them.

Fortunately, behaviors support conditions. Add a comparison condition and bind the LeftOperand value:

Bind to menu/SelectedMenuItem.Name:

This is where Blend gets confused. If you look at the value in Use a custom path expression you’ll see that SelectedMenuItem is indexed. But SelectedMenuItem is not a collection. I think Blend is confused because MenuItem itself inherits from ObservableCollection. At any rate, you need to remove the ‘[0].’ from the string so it says SelectedMenuItem.Name. Now enter mnuThemes for the second Value:

You should now find that the popup only appears if you click on Tools/Themes.

A Better Way That Avoids String Comparisons

However, I very much dislike hard-coded strings, and in particular comparisons of hard-coded strings, so let’s look at a better way. We start by adding a public MenuItem property named ThemesMenuItem in MainPageViewModel:

private MenuItem _ThemesMenuItem;
public MenuItem ThemesMenuItem
{
    get { return this._ThemesMenuItem; }
    set
    {
        if (this._ThemesMenuItem != value)
        {
            this._ThemesMenuItem = value;
            this.NotifyPropertyChanged("ThemesMenuItem");
        }
    }
}

Yeah, there’s a hard-coded string. But I have a snippet that allows me to type in ThemesMenuItem only once when creating the property, so I’d have to work at it to make the Property name that shows up in Blend different from the string I’m passing to NotifyPropertyChanged. Hard-coded strings are inevitable in a binding-centric world and using them in calls to NotifyPropertyChanged just doesn’t bother me as much as the workarounds.

Now we initializeour new ThemesMenuItem and add it to the menu in the MainPageViewModel constructor:

// Old
//var mnuThemes = new MenuItem() { Name = "mnuThemes", Text = "Themes" };
//mnuTools.Add(mnuThemes);
//New
ThemesMenuItem = new MenuItem() { Name = "mnuThemes", Text = "Themes" };
mnuTools.Add(ThemesMenuItem);

Instead of comparing the Name of the Selected MenuItem to a hard-coded string, we can now compare MenuItem with MenuItem:

Bind the first value to SelectedMenuItem instead of SelectedMenuItem.Name. This has the additional benefit that we don’t have to edit the string to get rid of “phantom indexing”, so you can uncheck Use a custom path expression:

Bind the second value to the ThemesMenuItem property in the MainPageViewModel instead of entering the string mnuThemes.

Don’t be surprised when mnuThemes continues to appear. Apparently Blend chooses to display the Name property. Here’s the xaml that proves we’re binding to the object:

<ei:ComparisonCondition LeftOperand="{Binding SelectedMenuItem, ElementName=menu}" RightOperand="{Binding ThemesMenuItem}"/>

You should get the same results when you click on Themes, but now we’re comparing two objects, MainPageViewModel.ThemesMenuItem with Menu.SelectedMenuItem, which is kind of a big deal in general. The developer can’t break it by changing the Name of the MenuItem. The designer can’t break it by changing the comparison string. Actually, I’m going to do just that (change the value of Name) because I want to show you that that Blend will show the new Name in the second comparison value:

In MainPageViewModel I changed the name and rebuilt the solution:

ThemesMenuItem = new MenuItem() { Name = "mnuThemesName", Text = "Themes" };

The menu continues to work properly and now we see the new name in Blend:

I don’t know the criteria in Blend for displaying a property name as an object identifier, but apparently a string property named “Name” qualifies.

Creating the PopUp user interface

The genius of HisowaModPopUpBehavior lies in:

Not only does it allow to plug in a user interface of your own design, with its own ViewModel,
You can also specify an ICommand to handle the results.

If the user clicks on Themes, I want to show them a list of available themes from which they can select. If they click the Install button I want the method InstallTheme() to be called with the selected Theme object as the argument. InstallTheme will show a MessageBox stating “Installing theme ”.

First let’s create the user interface we want to be presented by the popup. We’ll start with the view, ThemeSelectionView, in the MenuPopup Silverlight project.

I’m going to make the size of the ThemeSelectoinView UserControl 300 x 200 and LayoutRoot will expand to fill it. LayoutRoot will have a single column and two rows, one for the header and one for the list of Theme Names.

I created a new folder named Views in the MenuPopUp project, right-clicked on it and selected add new Item. From the resulting New Item dialog, choose UserControl and name it ThemeSelectionView.xaml:

You can’t select UserControl with ViewModel because all our ViewModels come from MenuPopupViewModel.dll.

The details of creating the UserControl that will be used as the Custom User Interface within the popup appear in a separate blog on Blend and Margins.

Since the next thing we need is something to show in the list, let’s return to the ViewModel, in this case ThemeSelectionViewModel which we need to create in the MenuPopupViewModel class library. Then we’ll add an ObservableCollection the designer can bind to the ListBox. But to have an ObservableCollection we need something to put in it, so let’s create a Theme class with the single property Name.

namespace MenuPopupViewModel
{
    public class Theme
    {
        public Theme(string name)
        {
            Name = name;
        }
        public string Name { get; set; }
    }
}

Now we can create a collection of Themes in ThemeSelectionViewModel:

        private ObservableCollection _ThemesList;
        public ObservableCollection ThemesList
        {
            get { return this._ThemesList; }
            set
            {
                if (this._ThemesList != value)
                {
                    this._ThemesList = value;
                    this.NotifyPropertyChanged("ThemesList");
                }
            }
        }

To keep things separate, I added a Models folder to MenuPopupViewModel project and created a MenuPopUpModel class that provides a GetThemes() method:

namespace MenuPopupViewModel
{
    public class MenuPopUpModel
    {
        #region GetThemes
        public static ObservableCollection GetThemes()
        {
            ObservableCollection colThemes = new ObservableCollection();
            colThemes.Add(new Theme("Middle Earth"));
            colThemes.Add(new Theme("World of Warcraft"));
            colThemes.Add(new Theme("Farmville"));
            colThemes.Add(new Theme("Simpsons"));
            colThemes.Add(new Theme("South Park"));
            colThemes.Add(new Theme("American Dad"));
            colThemes.Add(new Theme("Call To Duty"));
            colThemes.Add(new Theme("Warehouse 13"));
            return colThemes;
        }
        #endregion
    }
}

And call it from the ThemeSelectionViewModel constructor:

        public ThemeSelectionViewModel()
        {
            ThemesList = MenuPopUpModel.GetThemes();
        }

Now we need to bind ThemesList to the ListBox, but first we need to set ThemeSelectionView’s DataContext to ThemeSelectionViewModel:

Now we have access to ThemeSelectionViewModel.ThemesList, so drag it onto ListBox:

You should immediately see this:

Now we bind HisowaModPopUpBehavior.CustomUI to ThemeSelectionView. Notice we’re not pointing it to an object that’s already created, we’re pointing it to a class:

When you run the app and select Themes you should see this:

Ok, now we’re getting somewhere. We want to change the button captions which is simple:

… and we want to know what was selected if the Install button is clicked.

First we add a SelectedTheme property to ThemeSelectionViewModel:

        private Theme _SelectedTheme;
        public Theme SelectedTheme
        {
            get { return this._SelectedTheme; }
            set
            {
                if (this._SelectedTheme != value)
                {
                    this._SelectedTheme = value;
                    this.NotifyPropertyChanged("SelectedTheme");
                }
            }
        }

Now Bind to ListBox SelectedItem. Click on the Advanced Options icon next to SelectedItem as shown below and select Data Binding… from the dialog that appears:

Because the ListBox SelectedItem is used to set the value in the bound-to property, we set the binding to TwoWay:

So now we’ve established a property in ThemeSelectionViewModel that will always be bound to the currently selected theme. Next we add an ICommand that HisowaModPopUpBehavior will call when the user selects Install:

       public void InstallTheme(object param)
        {
            HisowaModPopUpBehaviorResult _result = param as HisowaModPopUpBehaviorResult;
            if (_result.DialogResult.HasValue && _result.DialogResult.Value)
            {
                ThemeSelectionViewModel vm = _result.DataContext as ThemeSelectionViewModel;
                if (vm.SelectedTheme != null)
                    MessageBox.Show("Installing Theme " + vm.SelectedTheme.Name);
            }
        }

Now we’re going to bind that ICommand to HisowaModPopUpBehavior property ReturnICommand. But we’re going to do it in a shortcut way I didn’t expect to work. From the DataContext Panel drag MainPageViewModel.InstallThemeCommand to HisowaModPopUpBehavior in the Objects and Timeline panel. You should see the message window “Data bind [HisowaModPopUpBehavior] to InstallThemeCommand” as shown below:

Drop the ICommand on the behavior and select ReturnICommand from the dropdown that appears:

And sure enough:

I did add one more little detail. If the ListBox items collection is not empty, I want the first item to be selected when the ListBox is loaded. I was going to add an ICommand, but decided a behavior would be better:

I’ll be adding the new behavior class, SelectFirstListBoxItem to MainPageViewModel. Visual Studio doesn’t provide Behavior as a New Item Selection, so in Blend I right-click on the Classes folder within the MenuPopupViewModel project, select ”Add New Item” and see the following dialog:

Aside from removing all the comments, all you have to do is change one line of code and add about 4.

First we want to change:

	public class SelectFirstListBoxItem : Behavior

to:

    public class SelectFirstListBoxItem : TargetedTriggerAction

TargetedTriggerAction supports the Invoke method allowing us to add:

        protected override void Invoke(object parameter)
        {
            ListBox lb = AssociatedObject as ListBox;
            if (lb != null && lb.Items.Count > 0)
                lb.SelectedIndex = 0;
        }

Ok, more than 4 lines. I could have crammed into 4, but 6 is not bad.

if you’re not familiar with behaviors, I want to point out the power that the above implies:

If the behavior knows the type of its AssociatedObject it can access all the object’s public methods and properties.

If it knows the type of the object’s ViewModel, it can access all the ViewModel public methods and properties.
You could have controls that are driven entirely by their Behaviors based on properties set or bound by the designer.
If you put interface references on the back end (in the ViewModel) so everything can be swapped out you’ve essentially given the object infinite flexibility.

Let’s say I’m a Pursuit behavior:

I am attached to a Predator object.
The designer sets or binds properties such as speed, stamina, intelligence, strategies.
I monitor Predator properties / subscribe to Predator events, to detect a condition that should trigger a pursuit.
When that happens, I call methods on the Predator to actually perform the pursuit based on my properties, whose values change as the pursuit goes on.
The methods in step 4 are backed by interface references whose implementations can be swapped out by Predator’s handler (the ViewModel), even in the midst of the pursuit, based on terrain changes, etc.
Extend this model to all Predator’s capabilities and Predator becomes an engine entirely driven by Behaviors.

Hey, I just came up with the plot for ‘Avatar’.

Attaching The SelectFirstListBoxItem Behavior

After building MenuPopupViewModel, the behavior will be available in Blend:

Drag it onto the ListBox:

The behavior SourceObject is already set to listBox because it’s attached to listBox. Select Loaded from the EventName dropdown to bind the Loaded event to the behavior Invoke method.

Before and after:

DownloadCode:

http://richardwaddell.adefwebserver.com/MenuPopup.zip

More ...

Isolating the C# Code in Silverlight Class Library Projects

Wed, 27 Oct 2010 20:00:03 GMT

If you’re reading another blog where I place all C# beyond the mandatory in a Silverlight class library rather than the Silverlight application, and it’s not obvious how the solution is put together this tutorial will take you through the steps:

(1) Creating the Silverlight Application with hosting Web Site

(2) Adding a Silverlight Class Library to the solution

(3) Referencing the class library from the application

(4) Setting Project Dependencies.

(5) Web Site project settings to consume the xap file / add a new Silverlight application to an existing web site

(6) Setting MainPage DataContext to a class in the class library

Code-Free Zones and Silverlight Class Libraries

From working recently on an OpenLightGroup team project, I’ve become taken with the idea of keeping all C# code out of the Silverlight application project except for the almost vestigial UserControl code-behinds. No more inadvertent simultaneous edits to the same ViewModel code in Blend and Visual Studio, and I think it helps further emphasize the separation between UI and data to keep the ViewModel, Model, and all other C# source code out of the Silverlight application. I’m at least going to try it out.

I’ll start by creating the main Silverlight project.

Select Silverlight Application.
You can change the Location of the Solution / Project or take the default.
Give the project a name which will also…
…be used as the solution name by default.
Leave the default Create directory for solution checkbox checked

Take the default in the New Silverlight Application dialog that follows to create a Web site to host the application:

We end up with a directory structure like this:

We have a MenuPopUp folder to hold the solution and all the project subfolders, at this point consisting of the MenuPopUp Silverlight Project and the MenuPopUp.Web Web Site.

Ok, we have our Silverlight application and hosting web site. Now we’ll add the library.

Select Silverlight Class Library
Give it a name. The primary purpose of this library will be to hold ViewModel classes
Change the location to the MenuPopUp solution folder and, very important…
…change the Solution dropdown to Add to solution.

Now we need to make the Silverlight application see the Silverlight class library. In Solution Explorer, in the MenuPopUp Project, right click on References and then select Add Reference…

An Add Reference dialog appears. Click on the Projects tab, select MenuPopupViewModel and click OK:

Setting Project Dependencies

Start by right-clicking on the solution and selecting Project Dependencies…

The application (xap file) is dependent on the class library, the web site is dependent on the xap file, and the class library is dependent on nothing, leading to the build order on the far right. The initial settings had the web site dependent on nothing, but in fact the site is dependent on the xap file so I feel setting the dependency is prudent.

How the XAP file gets to the Web Site ClientBin folder

In our case Visual Studio took care of it when we created a hosting web site along with the Silverlight project. But in case you ever need to do it manually:

Right-click MenuPopUp.Web in Solution Explorer.
Click Properties in the context menu
Click Silverlight Applications.
Visual Studio added the MenuPopUp project
The path on the Web Site is ClientBin.

A little terse, so let’s see what clicking the Add button shows us:

Pretty much speaks for itself. What’s nice about this is you don’t have to change the Silverlight project settings to configure the target for the xap file. Note you can also use this dialog to add a new Silverlight project to an existing web site.

Views and ViewModels

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace MenuPopupViewModel
{
    public class MainPageViewModel
    {
    }
}

And sure enough, there it is. To add MainPageViewModel as the DataContext for MainPage.UserControl

Select UserControl in Objects and Timeline
From Properties/Common Properties click on the New button next to DataContext.
From the Select Object dialog, select MainPageViewModel.

More ...

Blend For Beginners: Grid to Canvas to StackPanel

Sun, 24 Oct 2010 21:23:00 GMT

In my opinion, Canvas is better suited than Grid to serve as LayoutRoot (the default name of the main UI Element within UserControl). Using a Grid locks the entire UI into a matrix of rows and columns; you can set properties to allow elements to cross row and column boundaries, but why should you have to. If you use a Canvas, you can position elements wherever you want them, including Grids.

Sometimes, though, I don’t think about that when I start coding and I end up in a situation where I want to change LayoutRoot to a Canvas when the page is well along. Fortunately it’s not that tough. But first…

Using the Pinned Tools Icon and Waking it Up.

To begin with, I’m going to add a Canvas to the existing LayoutRoot. First I find it under Assets and then double-click it to add it to the pinned Controls icon on the Tools Panel. Probably I won’t need to add a Canvas again, but in principle I find it more convenient to pin the controls so I don’t have to go into Assets if I need one again. Below you can see the Assets icon with the pinned Controls icon below it. Click on the little white triangle and hold to see the list of all pinned Controls. If you select one and then double-click on the pinned control icon it will be inserted in the upper-left corner of the currently selected object in the Objects and TimeLine panel.

Sometimes the pinned controls icon will be dimmed and non-responsive. In that case click on the Assets Icon, and the pinned controls icon should become active.

Adding the Canvas

With UserControl selected, double-click on the pinned Canvas icon.

You’ll find that Canvas was added to LayoutRoot; UserControl can only have one child, so Blend assumes you intended to add it to the UI, not to be the new container for the UI.

To make Canvas the parent of LayoutRoot, you must drag it (cut and paste won’t work) to UserControl and look for a message as shown below:

Release the mouse button:

Now select LayoutRoot properties and delete the name. Then open Canvas properties and enter the name LayoutRoot.

Assuming you want LayoutRoot to fill UserControl, which you probably do, change LayoutRoot width and height to Auto:

And set alignment to stretch and you should find the dimensions are sized to fill UserControl:

Working With the New LayoutRoot

My immediate goal is to add a header to the page something like this:

So the first think I’m going to do is make room on the Canvas, which is now LayoutRoot, by shrinking the Grid that was formerly LayoutRoot.

The height of UserControl is 400 and LayoutRoot is set to Auto / Stretch, so its height is also 400. If I want to leave 80 pixels of height for the header, I reduce the height of Grid to 320 and set the Top property to 80. Again I want to point out that you can hover the mouse over the property and then drag the value up or down. Watching the control move or change size as you do so is much more gratifying than just typing in the new value. Just don’t drag the control itself; the results might be what you want cosmetically, but the underlying property changes may not be as expected.

You could set the upper Margin to 80 and achieve the same result, but in my opinion you don’t want to. Or, if you’re going to use Margins, don’t use the Left and Top properties. Below you can see the resulting xaml after I set the Top property to 80 and the upper Margin to 20. The result will be that Grid is situated 100 pixels from the top of LayoutRoot. This seems too confusing to me. There may be a scenario where you would want to use both, but I can’t think of one.

<Grid Width="461" Height="320" Margin="0,20,0,0" Canvas.Top="80">

I also have the Grid Width property hard-coded to the width of LayoutRoot because I want Grid to fill the page horizontally. I tried setting it to Auto and setting the horizontal alignment to stretch with the expectation that it would expand horizontally to fill LayoutRoot, but it did not; it sized itself to its contents. Maybe because its container is a Canvas, maybe because of how the columns are defined. Not something I want to take time to explore right now.

LayoutRoot needs a Background Brush. I may end up making Grid transparent and so the entire page is the color of LayoutRoot, but for now I’m just going to give it a separate color. Something garish to keep up my rep. I also moved the ‘Statements’ TextBlock, which belongs in the header to LayoutRoot through cut and paste.

Notice in Objects and Timeline that TextBlock appears below Grid. This doesn’t cause any problems, but if you take my advice you’ll drag it up above Grid so that the sequence in Objects and Timeline matches the design area to avoid confusion.

Now to add the header controls. We’ll position each one using the Top and Left properties. I’ll show you the first one. Make sure that LayoutRoot is selected in Objects and Timeline. Them add a Label by dragging from Assets or double-clicking a pinned control on the Tools Panel:

The results always look discouraging, but it’s really easy to make the necessary adjustments.

Notice I moved the Label to fall after the TextBlock in Objects and Timeline. Now I add a ComboBox, TextBox, and Button using the same techniques.

The hardest part will be to remember to make sure the LayoutRoot is the currently selected object before adding each element. If you forget, just cut and paste it into LayoutRoot. It’s also easy to accidentally change Margins instead of the Top and Left Properties. And you’ll want to give the search TextBox a hard-coded width. Also notice each has been moved to its logical position in Objects and Timeline. We could also give each one a name, but in general you want to avoid naming elements if it’s reasonably clear which one is which from the layout.

Hey, I Coulda Used A StackPanel!!!

This will work perfectly fine, but what if we want to move the four controls we added as a single unit? We can select all 4 and move them, but that’s kind of a pain. And I’ll bet they’re not all perfectly aligned vertically.

Fortunately, it’s easy to move them into a StackPanel.

(Addendum - I got so absorbed in the ins-and-outs of Auto dimensions and what-not that I forgot to point out the even easier way to place these controls in a StackPanel. Simply select all four in Objects and Timeline, right-click, select Group Into…, and click on StackPanel. The long-winded version just describes a few of the details you might not notice if you do it that way.)

Add the StackPanel to LayoutRoot by dragging from Assets or double-clicking a pinned StackPanel control. Set the Orientation to Horizontal and give it a Background Brush so you can see where it is. Take the Width and Height out of Auto mode or the size will be zero. Adjust the Height and Top by dragging the values in the textboxes so you get approximately what you see below:

We had to give dimensions to StackPanel in order to see it because we haven’t yet added the four controls. They appear on top of StackPanel because they overlap StackPanel in LayoutRoot and fall after it in the Objects and Timeline list. If I move StackPanel below the controls in Objects and Timeline they disappear because objects in Objects and Timeline appear on top of overlapping objects higher in the list and vice-versa:

We can add the controls to the StackPanel with a wholesale cut and paste:

Resulting in:

We lost all our Top and Left property settings because they don’t apply in a StackPanel. And I’m happy to confirm that Blend did remove the Canvas.Top and Canvas.Left properties from the xaml.

It’s easy to fix everything up. Select all four controls and set VerticalAlignment to center:

Now adjust the margins by dragging either the left of right Margin property of each control (using the property textboxes) so the controls are horizontally aligned. Personally I would use the left Margins, but it doesn’t matter as long as you’re consistent. Even better, as I just discovered, you can select all four and adjust the value of all of them simultaneously:

Now that the StackPanel has content, I want to change the Width property to Auto. Otherwise, if the width of LayoutRoot is reduced, StackPanel will exceed it. I think I’ll change the Height to Auto as well and make it transparent by removing the Background Brush:

One last thing you could do to tighten up StackPanel is to remove the left Margin from Label and set the Left property of StackPanel:

You’d think you could center StackPanel in LayoutRoot instead of setting the Left property, but the alignment settings seem to have no effect. I did a quick search and didn’t find anything official, but it seems that Canvas doesn’t honor alignment settings.

But the point is you can now move the set of controls around freely by moving the StackPanel.

Summary

Nothing much to add. Just that you could use left and upper Margins on a Canvas as equivalent to Top and Left, but the resulting xaml is different. Canvas.Top and Canvas.Left are attached properties.

More ...

More Simple Blend Layout Techniques and Quirks

Sat, 23 Oct 2010 16:58:54 GMT

I have a habit of starting to explore some aspect of Blend and wandering off topic when I’m blogging. Usually it’s some detail that’s new to me and only comes up because I am blogging and feel the need to explain each step. So, rather than clutter things up, I’m going to put them in blogs of their own. Nothing earth-shattering and probably not of much use to experienced Blend users. But if I’ve overlooked details in the past, maybe what I learn as I explore them now will be helpful to newbies.

MainPage and the Default Hosting Web Site

Quite likely, when you create a new Silverlight application you create a web site to host it at the same time, this is the dialog you see in Visual Studio:

I’ve never given much thought of the page that hosts MainPage.xaml or its equivalent, or the default dimensions and alignment settings for UserControl, which is the outermost container of the MainPage UI; if you’re talking about the size of MainPage or the hosted Silverlight control, you’re talking about the size of UserControl. Actually, as you’ll see below,the MainPage object is a UserControl.

MainPage.xaml and ….

<UserControl x:Class="BlendQuirks.MainPage"

… MainPage.xaml.cs combine to define the MainPage class.

namespace BlendQuirks
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

Incidentally, if we adhere to the Model-ViewModel or MVVM patterns, which we always should if we’re serious about Silverlight, this is the only code we should see in MainPage.xaml.cs.

In Blend design mode we make changes to UserControl and contents to define the UI; as we make changes in design Blend makes changes to MainPage.xaml. We could edit the xaml directly, but we almost always don’t want to – in design mode we can see changes to the UI as we make them, and design mode is not subject to typos – including entries into the custom Expression dialog – errors typed there will be caught that would fail silently at runtime if you typed them directly into xaml.

Before I go any further, let me point out two “special” things about UserControl – which I refer to as if that’s its name, which it’s not, but shorter to type than “UserControl object”.

It has a Background Brush property, but as far as I can tell the property is always ignored, both in Blend and at run-time. The answers I found on setting it begged the question by advising to set the Background Brush of the UIElement filling UserControl (LayoutRoot).
When you have UserControl selected in Blend Objects and Timelines the color will be the color of the Background Brush property in LayoutRoot.
If you click on the Hide icon next to LayoutRoot you’ll see that UserControl is black (actually it’s transparent).

Back to ‘sup with the default settings: If you don’t change anything and run the app you’ll see a blank white page filling the browser.

That’s because LayoutRoot gets a white Background Brush by default, and when you create a project with a hosting web site as we did above, the default settings are that everything expands to fill its container, from the HTML form on the hosting page right on down to LayoutRoot at the bottom. The hosting page is shown below:

<body>
    <form id="form1" runat="server" style="height:100%">
    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
		  <param name="source" value="ClientBin/BlendQuirks2.xap"/>
		  <param name="onError" value="onSilverlightError" />
		  <param name="background" value="white" />
		  <param name="minRuntimeVersion" value="4.0.50826.0" />
		  <param name="autoUpgrade" value="true" />
		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
		  a>
	    object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px">iframe>div>
    form>
body>

I’m going to set the background color of the hosting object from white to orange and put some margins around LayoutRoot so you can see for yourself that:

UserControl is transparent.
The hosting object expands to fill the div which expands to fill the form which expands to fill the page.
LayoutRoot expands to fill UserControl, allowing for the margins.

You can also add margins to UserControl, although you probably wouldn’t. Actually you probably wouldn’t add margins to LayoutRoot either. It makes more sense for the hosting container to determine how much of itself, if any, should show around the edges.

One more point about the dimensions. Even though we see that BlendQuirks2 / MainPage / UserControl is expanding to fill its container, in Blend we see the dimensions of UserControl are set to Auto(400) x Auto(300).

If you look at the xaml, you’ll see those dimensions apply to design mode. This can be confusing, because the properties would look exactly the same if LayoutRoot was set to 400 x 300 and UserControl was auto-sizing to accommodate.

<UserControl x:Class="BlendQuirks2.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" Background="#FF9B3939">
    <Grid x:Name="LayoutRoot" Background="White" d:IsHidden="True" Opacity="0"/>
UserControl>

If you removed these design mode dimension settings you’d find that UserControl collapses to nothing when viewed in Blend, but would still fill the screen at run-time because the alignment is still set to stretch.

When the dimensions are set to Auto, if you set the alignment to any setting other than stretch, UserControl will collapse to nothing at runtime as well, sizing itself to accommodate its content, LayoutRoot. Since LayoutRoot is empty UserControl is sized to 0 x 0.

Back to filling the screen; if you position an element in the lower-right:

You get something like this:

So that’s the default. Everything expands to fill its container.

If you want to control the run-time size of MainPage so it’s same size as in Blend you could do it in the host page:

    <div id="silverlightControlHost" style="height:300px;width:400px;">

But it’s more likely you’ll want to hard-code the dimensions of UserControl:

Notice that even though the alignment of UserControl is set to stretch it no longer expands to fill its container. Nor does it expand to accommodate its contents. I set LayoutRoot width to 450 resulting in:

You’ll also find that non of the other UserControl alignment settings have any affect, at least as far as I can tell.

One last point about dimensions and alignment. Don’t overlook that you can bind them to data in the ViewModel, or to other properties of other controls on the page; the latter probably would be more useful in manipulating the contents of UserControl than UserControl itself, but both open up all kinds of interesting possibilities.

Maintaining Margins when re-sizing in Blend

In the course of some project, I was trying to create a simple page with a heading and a ListBox. I wanted the heading text and ListBox to stay aligned within their row and column if the grid is re-sized, let’s look in and see how I’m doing:

With UserControl sized to 300 x 200 and LayoutRoot dimension set to Auto and alignment set to stretch, give LayoutRoot a background color and hover and click the mouse as shown below to create a new row. Don’t worry about the size being precise. We’re going to lay this out so you can resize after the fact and the contents will re-position or re-size as necessary. This is one of the few occasions when I’m ok with clicking on the design surface.

With LayoutRoot selected, browse Assets/Controls for the Label control and drag it onto LayoutRoot.

Resulting in:

Since this is a heading, I’m just going to center it horizontally and vertically. I’ll also set the Content to Themes and adjust the font size:

Make sure LayoutRoot is selected again and drag a ListBox control onto it from Assets. It’s right next to the Label you just dragged. It’s going to show up as a 100 x 100 white box at the upper left corner of LayoutRoot. We’re going to change the row to 1, set the dimensions to Auto, and the alignment to stretch. We’re also going to add margins all around…

…Ok, this is kind of funny. By default, meaning this is the setting Blend gave it when I dropped the ListBox on LayoutRoot, the row is already set to 1, but the margin is set to position the ListBox in the upper left corner of the entire grid:

You gotta think that some routine in Blend wants it in row 1 and another wants it to be in the upper-left corner and this is the compromise. This is why you want to pay attention to position and size settings when you first add controls in Blend instead of just yanking and banking.

Remember I said we were going to lay the UserControl out so the contents adjust to re-sizing? Turns out that only works if you can restrain yourself from re-sizing by dragging grab bars. In the screen shot below, I’m trying to position ListBox so it re-sizes itself to fill its row and column while maintaining a 10 pixel margin all around.

Turns out if I increase the width of UserControl by dragging the right side that ListBox doesn’t resize itself, and if I go back to ListBox properties I find that the margin has changed to accommodate the change in UserControl instead of ListBox resizing to fill the additional space:

However, if I re-size UserControl by entering the value or, as I prefer, hovering the mouse over the width and then dragging it so you can see the width change dynamically, then the margins remain unchanged and the ListBox resizes as I intended it to. Yet another reason to avoid using the mouse to drag or resize elements in the design area.

Summary

Blend is great, but you have to keep your head in the game when you’re working with it. I’d say the most important thing is to use the Properties panel to make adjustment to the UI, not the design surface, at least if you’re still in my league – if I could play the piano, I would, but I can’t, so I don’t. Doesn’t mean you shouldn’t learn.

More ...