Patrick Long's Blog

Hello World with Silverlight Streaming

Anonymous — Fri, 14 Sep 2007 21:06:00 GMT

New technology = new "Hello World" app, trouble with Silverlight is it makes it far too easy for me to get my ugly mug on the web.

The blog currently runs on Community Server 2007 which understandably does not makes it easy to to put any old markup in your blog posts. This is was the main reason i had never gotten around to playing with the web subset of WPF, Silverlight, that was until now.

Silverlight Streaming allows me to package up Silverlight applications, upload them to Microsoft's servers and then pull them down to my pages. However that was not the complete solution. I was still stuck because I could not get the necessary markup and JS into my Community Server blog page. Then whilst i was attending MIX07:UK I went to Alastair Logan and Danny Thorpe's "Building next generation web applications using Windows Live Services". They showed us some great stuff including Silverlight Streaming. They pointed us to the various SDKs and docs at http://dev.live.com, the key one for me was the Silverlight "Using iframe invocation". This shows me how to use an IFRAME to host the Silverlight app in my blog post.

<edit>

As Simon Guest points out in this post in still needed to get IFRAMEs allowed on the page.

</edit>

If you want to know how to get the Silverlight application packaged up and into Silverlight Streaming in the first place check these links

Go on press play just one more time :-)

Del.icio.us Digg It Share on Facebook Stumble It!

WPF Training Course - Part6 - Data and ItemsControl

Anonymous — Wed, 22 Aug 2007 23:27:00 GMT

This is part 6 of the training course originally described here with parts 2,3, 4 and 5 available here, here, here and here respectively. So far we have covered WPF fundamentals, XAML, brushes, shapes, controls, styling, resources and layout.

Part6

Data

Binding class

Converter property
ElementName property
Mode property
Path property
RelativeSource property
XPath property

LAB12 - Databinding elements to each other
DataContext
DataProviders
LAB13 - Binding to an ObjectDataProvider
DataTemplates
DataTemplateSelector

ItemsControl

Introduction
ItemsSource property
ItemTemplate property
ItemsPanel property
ItemContainerStyle
LAB14 - Using ItemControl with ItemsSource, ItemsPanelTemplate, ItemsPanel, ItemContainerStyle and DataTriggers

Download Part6.zip which includes a slide deck and the 3 labs. Code to get you started with the labs is included.

Del.icio.us Digg It Share on Facebook Stumble It!

Microsoft Surface - Alternative View

Anonymous — Wed, 25 Jul 2007 10:46:00 GMT

Seeing as I blogged the Behind The Scenes look at Microsoft Surface I thought it only fair to give equal attention to this very funny (IMHO) tongue-in-cheek look at Microsoft Surface.

Microsoft Surface Parody on YouTube

Del.icio.us Digg It Share on Facebook Stumble It!

WPF Training Course - Part5 - Layout

Anonymous — Sat, 21 Jul 2007 20:54:30 GMT

This is part 5 of the training course originally described here with parts 2,3 and 4 available here, here and here respectively. So far we have covered WPF fundamentals, XAML, brushes, shapes, controls, styling and resources.

Again if anyone wants to contact me for clarifications or to talk over part of the course just use a Comment or the Contact link at the top of the page. Good luck!

The details of part 5 are below, the labs and any associated code are in the download package. LAB 11 is fairly important to get right and to understand why it is right. You may get something that looks close but it could be light years away from the correct solution, therefore I am going to include a completed solution as well. You don't have to use it but it is worth referring to when you have finished. Before starting Part5 I strongly suggest looking at parts 1 - 4 as this part really does draw on all the previous ones. If you think you know it all already at least review the contents of each part that I put in the blog post. If you are happy that you know the pre-reqs then great let's go!

Part5

Margins and Padding
Alignment
Layout logic overview
Height and Width
Transforms

RotateTransform
ScaleTransform
SkewTransform
TranslateTransform

RenderTransform vs LayoutTransform
LAB10 - Adding Interactions with Triggers
Dependency Properties Explained
Attached Properties Explained
Layout Panels

StackPanel
Grid
UniformGrid
DockPanel
Canvas
WrapPanel

Stretching - Bible
Z-Order
LAB11 - Run dialog (LAB 11 is fairly important to get right and to understand why it is right. You may get something that looks close but it could be light years away from the correct solution, therefore I am going to include a completed solution in the download as well.)

Download Part5.zip which includes a slide deck and the 2 labs. Code to get you started with the labs is included.

Del.icio.us Digg It Share on Facebook Stumble It!

WPF Elements and stretching to the Layout panel

Anonymous — Sat, 21 Jul 2007 19:52:00 GMT

Debugging layout issues is something I had to do fairly often particularly with some of the complex layouts we were trying in the past. Trying to work out why "such and such" FrameworkElement would not stretch to the size of "whatever" layout panel I was using.

Before we get to the detail of stretching there is one simple layout, debugging technique that I think is worth sharing; It is that setting the backgrounds of all the various panels that you are using, whilst debugging, makes life much easier. Take this relatively simple layout problem

Imagine if we are trying to find work out why the buttons "2" are not aligned to the bottom of the screen even though they have VerticalAlignment set to Bottom. Well colouring the different layout panels will as you can see make it easier to see what is constraining what.

From this you can see that is more than likely the PaleGoldenRod coloured panel that is causing the panel containing the "2" buttons to layout as they are.

Stretching - Bible

I know it is a little arrogant to suggest I could write a bible on anything but this was the most often referenced pieces of WPF information I had, on a previous project. I cover it in the upcoming Part5 of my WPF Training Course, but I thought it was useful enough to pull out here.

FrameworkElements have a default of Stretch for their HorizontalAlignment and VerticalAlignment but whether or not this stretching is performed all depends on the containing layout panel and how that Panel is being used. It is this information that I refer to as the "Stretching - Bible"

Panel	X Dimension	Y Dimension
Canvas	No	No
Dock	Yes	Yes
StackPanel (Vertical	Yes	No
StackPanel (Horizontal)	No	Yes
Grid	Yes*	Yes*
WrapPanel	No	No

* Except when using "Auto" rows and columns

Yes in the above table means "Children are stretched to available size"

No in the above table means "Children are their desired size"

I find myself referring back to this table whenever I am wondering why elements are not stretching even though I have set their alignment(s) to Stretch. Hope it helps someone else too.

Del.icio.us Digg It Share on Facebook Stumble It!

Microsoft Health CUI released today

Anonymous — Thu, 12 Jul 2007 23:51:00 GMT

For the last year or so I have been working on the Microsoft Health Common User Interface (CUI) project at Microsoft and today it was released here (www.mscui.com) and on here on CodePlex (http://www.codeplex.com/mscui).

The work released today comes from two areas of the ongoing work that Microsoft is doing in this area. First up is Design Guidance, this is a collection of best practice user interface guidance for clinical applications. Apologies for simply quoting the website but people smarter than me came up with the words so I might as well quote them

Design Guidance has been produced through a rigorous user-centred design process that incorporates primary and secondary research, usability testing, consultation with software providers and integrated hazard assessments. Patient Safety Assessments (PSAs) are continually performed to ensure the Design Guidance meets safety concerns.

The guidance is targeted at both existing clinical applications and those that are being designed and architected right now. The second part of this release is the implementation of much of that guidance in the form of control libraries for both WinForms 2.0 and ASP.NET. The website contains explanation and samples for each of the Web controls with the Codeplex project hosting a download of both the Winforms and the ASP.NET Control library.

The ASP.NET controls use much of ASP.NET Ajax and the extensions to that technology provided by the AjaxControlToolkit. There are some really handy controls on the site that I am sure you will find useful even if you are not working on clinical applications, take for instance the DateInputBox control.

Del.icio.us Digg It Share on Facebook Stumble It!

WPF Training Course (Free) - Part4 - ResourceDictionaries, Styles and Triggers

Anonymous — Mon, 09 Jul 2007 22:54:10 GMT

This is part 4 of the training course originally described here with parts 2 & 3 available here and here respectively. So far we have covered WPF fundamentals, XAML, brushes, shapes, controls and control templating.

Again if anyone wants to contact me for clarifications or to talk over part of the course just use a Comment or the Contact link at the top of the page. Good luck!

The details of part 4 are below, the labs and any associated code are in the download package

Part4

ResourceDictionaries

Reusing XAML
Why use a ResourceDictionary?
Resource discovery
File-based resource dictionaries
LAB8 - Resources - Referencing System colours, Dynamic and Static

Styles

Referencing Styles
TargetType
BasedOn
LAB9 - Debugging Styling Issues

Triggers

EventTrigger
Property-based Trigger

Download Part4.zip which includes a slide deck and the 2 labs. Code to get you started with the labs is included.

Del.icio.us Digg It Share on Facebook Stumble It!

KeyCodes, CharCodes and ASP.NET AJAX

Anonymous — Wed, 04 Jul 2007 21:11:20 GMT

First up this post is as much for me as it is for the person that happens upon it via a SE, this stuff is kind of confusing and I will need reminding.

Secondly I am far from an expert, only recently something blindingly obvious about Key Codes and why they are called key codes was point out to me. Thanks Richard.

KeyCode vs CharCode

A KeyCode is a not a code for a specific character; for instance the same code is returned whether or not it’s character is UPPER or lower case. The KeyCode resulting from the number 7 being pressed on the main QWERTY part of the keyboard is not the same as the KeyCode resulting from the number 7 being pressed on the num-pad.

A CharCode on the other hand does map to a specific character and that character can be obtained from the String.fromCharCode function. Do not pass a KeyCode to this function it may work for some KeyCode but on the whole you will get “wild results for many keys”. For example pressing the Down navigational key will result in a KeyCode of 40, passing that into fromCharCode will get you the “(“ character! (I’ve been there and it hurt when I kicked myself)

On the whole a KeyCode is what is used in the keyDown and keyUp events with CharCode being the one to use in keyPress. I say “on the whole” because as usual browsers do differ. JavaScript Madness: Keyboard Events is a great article for giving more detail, particularly around the differences between the browsers.

Key and Character Codes vs. Event Types is a great little page for discovering what charCode and/or KeyCode is sent as a result of a key being pressed on the keyboard.

Interestingly whilst we cannot say a KeyCode is a code for a specific character the codes do seem linked. For instance my UK keyboard gives me the KeyCode of 81 when I press the key with the letter “Q” on it however when I switch to a French keyboard that same physical key will give me a KeyCode of 65 (and the character ‘a’). Therefore we can say the KeyCode is not hard-wired to a physical key. If I press the key with the letter “A” on it, whilst in a French keyboard, I get the KeyCode of 81 (and the character ‘q’) which is what I got when I pressed the “Q” key in the UK keyboard. This tells me that the KeyCodes are linked in some way to characters but the link is not absolute and is not true for all keys.

If you are checking this out for yourself make sure you restart your browser after changing keyboard. I was testing in IE7 and the keyboard change was not picked up until after I reloaded the browser.

ASP.NET Ajax’s DomEvent wrapper

Like most of the often used things in AJAX development, there is a cross browser wrapper for the standard JavaScript event object argument, DomEvent. The docs for DomEvent only ever talk about charCode. Do not do as I did and assume that the DomEvent is mapping KeyCodes and CharCodes to a single charCode member on DomEvent. The follow on form that assumption is that you should always use DomEvent.CharCode, wrong. There is a documentation error as of 4 July 2007, the docs are missing KeyCode it does exists and the current script v1.0.61025 populates it like so

if (e.type === 'keypress') {
    this.charCode = e.charCode || e.keyCode;
}
else if (e.keyCode && (e.keyCode === 46)) {
    this.keyCode = 127;
}
else {
    this.keyCode = e.keyCode;
}

Note the ‘e’ variable in this code is the original event arg that is being wrapped by DomEvent

Therefore we can safely say that when using DomEvent:

The KeyPress event will give us a charCode member populated from either a CharCode or a KeyCode with CharCode taking precedence.
The KeyDown and KeyUp events will always result in a keyCode member equal to a keyCode

Del.icio.us Digg It Share on Facebook Stumble It!

WPF Training Course - Part3 - Controls

Anonymous — Wed, 27 Jun 2007 22:06:00 GMT

This is part 3 of the training course originally described here with part 2 available here. From this part onwards the course tends to concentrate more on labs and classroom interaction than on plain slide content. This worked great in a classroom scenario but it may make it hard otherwise. I have edited some of the downloadable slides to make them easier to read in isolation.

Again if anyone wants to contact me for clarifications or to talk over part of the course just use a Comment or the Contact link at the top of the page. Good luck!

Part3

Controls
ContentControl
LAB6 - ContentControls - Creating a UI only a mother could love
Controls (remixed)

Retemplating
LAB7 - Retemplate a Standard Button

Download Part3.zip which includes a slide deck and the 2 labs. Code to get you started with the labs is included.

<Edit>

Replaced part3.zip adding VS2005 versions of the labs to the exisiting VS.NET Orcas versions. Changed lab docs to be Word 97-2003 rather than Word 2007

</Edit>

Del.icio.us Digg It Share on Facebook Stumble It!

Beware the ASP.NET Ajax assemblies from the future

Anonymous — Mon, 25 Jun 2007 22:48:00 GMT

We were deploying some assemblies last week that were built in the UK on Friday afternoon and were being copied immediately to a US server. Some of these assemblies contained ASP.NET Ajax components and some of the pages in the website used these and some of the AjaxControlToolkit.

Preliminary tests showed that something was up and requests for Javascript files being served out of the previously mentioned assemblies were being returned with a HTTP 500 status code(internal server error).

Looking at the response in Firebug I could see the call stack was pointing towards

System.Web.HttpCachePolicy.UtcSetLastModified
System.Web.Handlers.ScriptResourceHandler.PrepareResponseCache
System.Web.Handlers.ScriptResourceHandler.ProcessRequest
System.Web.HttpApplication.ExecuteStep

With an ArgumentOutOfRangeException being thrown. After taking a look with Reflector I hit my favourite search engine and found this excellent blog post. The gist is that the System.Web.Extensions code was getting the last modified DateTime from each assembly and using that to build the Cache entry. In the code that sets the Cache policy's LastModifiedDate it checks

if (utcDate > DateTime.UtcNow)
{
   throw new ArgumentOutOfRangeException("utcDate");
}

Our assemblies were all greater than the US server's UtcNow so we kept seeing the ArgumentOutOfRangeException. The temporary solution was for us to use a File Touch utility such as TouchPro to change the modified date to something the US server was happy with.

Del.icio.us Digg It Share on Facebook Stumble It!

WPF Training Course - Part2

Anonymous — Mon, 18 Jun 2007 23:03:00 GMT

This is part 2 of a training course I originally put together for the Charteris team and am now posting online. See here for the original Post and details on Part1

Part2

2D Graphics

Colour and RGB

Brushes

SolidColorBrush
VisualBrush
LAB3 - Demonstrate Visual created solely for a VisualBrush (See document LAB3 VisualBrush1 - Visual for VisualBrush.doc)
LAB4 – Reflection Effects (See document LAB4 VisualBrush2 - Reflection.doc)
GradientBrush
LAB5 - Touching up our reflection (See document LAB5 GradientBrush - Touching up our reflection.doc)

Shapes

Download Part2.zip which includes a slide deck and the three labs.

Part3 will be on Controls, ContentControls and Control templating

<Edit>

Replaced part2.zip adding VS2005 versions of the labs to the exisiting VS.NET Orcas versions

</Edit>

Del.icio.us Digg It Share on Facebook Stumble It!

WPF Training Course - (Free)

Anonymous — Mon, 18 Jun 2007 22:52:00 GMT

Back in April I was asked to put together a training course on Windows Presentation Foundation (WPF) for the Charteris team. The course was well received here and it was agreed that after a bit of time I could release it publically. So I am going to make most the course available here. I will post it in parts and I am happy to take questions, clarifications and comments about each part. Each one will include the relevant powerpoint slides and relevant labs, with code to start you off.

Part1

Fundamentals
1. Overview
2. Components of WPF
3. Key classes
4. Retained Mode
XAML
1. XAML Overview
2. Basic XAML
3. Simple Property Setting
4. Complex Property Setting
5. Property setting - long hand
Tools
1. Microsoft Expression Blend
2. Visual Studio Codename Orcas
3. XamlPad
4. LAB - Explore Editing Tools (See documents "LAB1 Exploring XamlPad.doc" & "LAB2 Exploring Visual Studio Codename Orcas.doc")
5. Developer to Designer

Download Part1.zip which includes a slide deck and the three labs. Part2 will be on 2D Graphics, Brushes including VisualBrush, and Shapes.

<Edit>

The following parts of this course are now available

Fundamentals, XAML and Tools
2D Graphics, Brushes and Shapes
Controls, Content and Retemplating
ResourceDictionaries, Styles and Triggers
Layout
Data and the ItemsControl

Edit 10 September 2007 - Removed the now out of date Expression Blend walkthrough

</Edit>

Del.icio.us Digg It Share on Facebook Stumble It!

DIV over a SELECT in IE - ASP.NET Ajax Style

Anonymous — Thu, 14 Jun 2007 17:08:00 GMT

First things first I am using a technique that I learnt from Bertrand Le Roy's blog. I take no credit for realising that if you place an IFRAME at the same place that you are putting your DIV you will be able it will stop the SELECT from showing. As Bertrand points out SELECT elements are Windowed elements and it is this reason that they display through Windowless elements such as a DIV.

Anyway you can check out Bertrand's post for more detail here

The one thing I have to add is my implementation of this technique using the ASP.NET Ajax framework. Mine is slightly neater in that it is all code-based and does not assume an pre-existing IFRAME

var doIFRAMEHack = false;
        
if (Sys.Browser.agent === Sys.Browser.InternetExplorer && Sys.Browser.version < 7){
    //Do IFRAME Hack to stop elements like SELECT showing through the Tooltip div
    doIFRAMEHack = true;
}   
 
// tooltip happens to be the DIV that we are displaying in this sample
var bounds = Sys.UI.DomElement.getBounds(this.get_element());
var tooltip = this._getTooltip(true);

if(tooltip)
{
    if (doIFRAMEHack){
        // Step1 Position IFRAME at same place as Tooltip will be
        var hackIFRAME = $get("divOverSelectHackIFRAME");
        
        if(!hackIFRAME){
            // The IFRAME we are using for the HACK does not exist. 
            // Create it and set the necessary properties
            hackIFRAME = document.createElement("IFRAME");
            hackIFRAME.src = "j avascript:'<html></html>';"
            hackIFRAME.scrolling = "no";
            hackIFRAME.frameBorder = 0;
            hackIFRAME.style.border = "none";
            hackIFRAME.style.display = "block";
            hackIFRAME.style.zindex = 0;
            hackIFRAME.id = "divOverSelectHackIFRAME";
            
            // Append it to the bottom of the body so that it laid out
            // after all the Windowed elements

            document.body.appendChild(hackIFRAME);
        }
        
        // Position the IFRAME in the same place that we are positioning the DIV
        // As Bertrand Le Roy said the IFRAME needs to be positioned BEFORE the DIV is
        Sys.UI.DomElement.setLocation(hackIFRAME, bounds.x, bounds.y + bounds.height);
    }
    
    tooltip.style.display = "";

    Sys.UI.DomElement.setLocation(tooltip, bounds.x, bounds.y + bounds.height);
    this._tooltipShown = true;
    
    if (doIFRAMEHack){
        // Step2 Now that ToolTip has some dimensions get them
        // and use them to tidy up the size of the IFRAME
        var tooltipBounds = Sys.UI.DomElement.getBounds(tooltip);
    
        hackIFRAME.style.height = tooltipBounds.height;
        hackIFRAME.style.width = tooltipBounds.width;    
        hackIFRAME.style.display = "";
    }

}

Del.icio.us Digg It Share on Facebook Stumble It!

Microsoft Surface: Behind-the-Scenes Video

Anonymous — Wed, 06 Jun 2007 11:50:03 GMT

I realize that Surface has been done to death in the blogosphere but it was not until yesterday that I saw this excellent behind the scenes video. It isn't one of the Surface demo videos that are hosted up on http://www.microsoft.com/surface/ so you may well not have seen it. More importantly it gives some behind the scenes information on how the Surface devices work.

Del.icio.us Digg It Share on Facebook Stumble It!

Creating validatable CompositeControls

Anonymous — Fri, 01 Jun 2007 21:34:00 GMT

I have recently had to create some custom ASP.NET Validators for some CompositeControls that we wrote a couple of month's back. Now I have written plenty of my own validators before so it was not long before I had a class inheriting from BaseValidator.

It was when I was trying to connect my new MyControlValidator to an instance of MyControl on a page that I came across an interesting problem. The control that would hold the value for validation was not my CompositeControl but the TextBox inside it.

In ASP.NET validators are connected to the control they are validating by the ControlToValidate property of the Validator. This is set to the id of the control to be validated. Among many things it is this connection that gets us an id to use for client side validation. The ASP.NET's client side validation is implemented in WebUIValidation.js, in ASP.NET 1.0 this is was physical .js file that was installed as part of ASP.NET, in version 2.0 this changed to become an EmbeddedResource in System.Web.dll. The id will be used in the validating JS to retrieve the control's value for validation and in the case of ASP.NET 2.0 set focus back to the control when it is invalid.

I was trying to lay the foundation for future validators of MyControl so I had to make it work. When I set the ControlToValidate to the id of MyControl the code in WebUIValidation struggled. On the client MyControl is rendered as SPAN element so that is no help. I needed to point the ControlToValidate to the id of the internal TextBox but as a consumer of MyControl I could not get at it. Most examples of Validators with CompositeControls have the Validator embedded in the control. That makes it easy to wire up the Validator but I wanted Validators that could be defined external to MyControl so that simple approach was not enough.

The solution was two-fold, on the server I keep the ControlToValidate pointing at the CompositeControl, that makes it easier for the Validator developer, works well with the server-side validation framework and means I do not have to expose the internals of MyControl. On the client it gets fiddly, the standard JavaScript wants a control to validate that it can get a value from and can set focus to. I decided the best approach was for MyControl to run some script on startup that changes the ControlToValidate on the client to be the id of the internal TextBox. This works well with the validation framework client side and keeps the internals of MyControl within the server and client side implementation of MyControl. This is the client side code to change the controltovalidate .

_setValidationTargetToActualControl : function(){
//<summary>For any attached Validators set the controltovalidate on to 
be the internal TextBox</summary>
    
   var timeInputBox_TextBox = this.get_element();
        
   if (timeInputBox_TextBox.Validators){
   for(var validatorIndex = 0;
                               validatorIndex < timeInputBox_TextBox.Validators.length;
                               validatorIndex++){
            
      var validator = timeInputBox_TextBox.Validators[validatorIndex];
                
      // Switch the controltovalidate to be the id of the
      // internal TextBox rather than the containing SPAN

      validator.controltovalidate = timeInputBox_TextBox.id;
   }
}

The internal TextBox of MyControl, timeInputBox_TextBox, has easy access its associated validators via the Validators property. This is populated by the standard validation javascript on load.

Del.icio.us Digg It Share on Facebook Stumble It!