Charteris Community Server

Welcome to the Charteris plc Community
Welcome to Charteris Community Server Sign in | Join | Help
in Search

Patrick Long's Blog

All things regarding Microsoft's UI Technologies (no cats)
  • Hello World with Silverlight Streaming

    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

    1. Getting started with Silverlight Streaming
    2. Encoding media files for Silverlight Streaming
    3. QuickStart: Package a Video File using Expression

     

    Go on press play just one more time :-)

  • WPF Training Course - Part6 - Data and ItemsControl

     

    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

    1. Data
      1. Binding class
        1. Converter property
        2. ElementName property
        3. Mode property
        4. Path property
        5. RelativeSource property
        6. XPath property
      2. LAB12 - Databinding elements to each other
      3. DataContext
      4. DataProviders
      5. LAB13 - Binding to an ObjectDataProvider
      6. DataTemplates
      7. DataTemplateSelector
    2. ItemsControl
      1. Introduction
      2. ItemsSource property
      3. ItemTemplate property
      4. ItemsPanel property
      5. ItemContainerStyle
      6. 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.

  • Microsoft Surface - Alternative View

    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

  • WPF Training Course - Part5 - Layout

    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

    1. Margins and Padding
    2. Alignment
    3. Layout logic overview
    4. Height and Width
    5. Transforms
      1. RotateTransform
      2. ScaleTransform
      3. SkewTransform
      4. TranslateTransform
    6. RenderTransform vs LayoutTransform
    7. LAB10 - Adding Interactions with Triggers
    8. Dependency Properties Explained
    9. Attached Properties Explained
    10. Layout Panels
      1. StackPanel
      2. Grid
      3. UniformGrid
      4. DockPanel
      5. Canvas
      6. WrapPanel
    11. Stretching - Bible
    12. Z-Order
    13. 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.

  • WPF Elements and stretching to the Layout panel

    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.

    Posted Jul 21 2007, 08:52 PM by Anonymous with 2 comment(s)
    Filed under:
  • Microsoft Health CUI released today

    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.

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

    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

    1. ResourceDictionaries
      1. Reusing XAML
      2. Why use a ResourceDictionary?
      3. Resource discovery
      4. File-based resource dictionaries
      5. LAB8 - Resources - Referencing System colours, Dynamic and Static
    2. Styles
      1. Referencing Styles
      2. TargetType
      3. BasedOn
      4. LAB9 - Debugging Styling Issues
    3. Triggers
      1. EventTrigger
      2. 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.

  • KeyCodes, CharCodes and ASP.NET AJAX

    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
  • WPF Training Course - Part3 - Controls

     

    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

    1. Controls
    2. ContentControl
    3. LAB6 - ContentControls - Creating a UI only a mother could love
    4. Controls (remixed)
      1. Retemplating
      2. 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>

  • Beware the ASP.NET Ajax assemblies from the future

    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

    1. System.Web.HttpCachePolicy.UtcSetLastModified
    2. System.Web.Handlers.ScriptResourceHandler.PrepareResponseCache
    3. System.Web.Handlers.ScriptResourceHandler.ProcessRequest
    4. 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.

  • WPF Training Course - Part2

    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

    1. 2D Graphics
      1. Colour and RGB
    2. Brushes
      1. SolidColorBrush
      2. VisualBrush
      3. LAB3 - Demonstrate Visual created solely for a VisualBrush (See document LAB3 VisualBrush1 - Visual for VisualBrush.doc)
      4. LAB4 – Reflection Effects (See document LAB4 VisualBrush2 - Reflection.doc)
      5. GradientBrush
      6. LAB5 - Touching up our reflection (See document LAB5 GradientBrush - Touching up our reflection.doc)
    3. 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>

  • WPF Training Course - (Free)

    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

    1. Fundamentals
      1. Overview
      2. Components of WPF
      3. Key classes
      4. Retained Mode
    2. XAML
      1. XAML Overview
      2. Basic XAML
      3. Simple Property Setting
      4. Complex Property Setting
      5. Property setting - long hand
    3. 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

    1. Fundamentals, XAML and Tools
    2. 2D Graphics, Brushes and Shapes
    3. Controls, Content and Retemplating
    4. ResourceDictionaries, Styles and Triggers
    5. Layout
    6. Data and the ItemsControl

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

    </Edit>

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

    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 = "";
        }
    
    }
    
  • Microsoft Surface: Behind-the-Scenes Video

    http://www.popularmechanics.com/technology/industry/4217348.html

    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.

  • Creating validatable CompositeControls

    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.

    Posted Jun 01 2007, 10:34 PM by Anonymous with 2 comment(s)
    Filed under:
More Posts Next page »
Powered by Community Server (Commercial Edition), by Telligent Systems