Automatically stretching a Silverlight 2 control on a webpage

A couple of fun hours were spent trying to get my Silverlight content to resize when the user resized the browser. 

I mean, what’s the point of having your Silverlight content replace HTML if it wont flow and resize when the user resizes the browser? I want my Silverlight content to take up the whole browser frame.

The Html Code

You’d think this would be the default behaviour for an asp.net tag definition like this:

<asp:Silverlight ID=”Xaml1″ runat=”server” Source=”~/ClientBin/TechnologyOneCrm.xap” Version=”2.0″ Width=”100%” Height=”100%” />

 

Sadly this is not enough.  Your silverlight sits there in a dumb un-resizeable box.

The Xaml

When you create a Silverlight 2 control in Visual Studio 2008 or blend, the UserControl typically has Height and Width properties set, something like this:

<UserControl x:Class=”Daphne.WorkplaceHome”
    xmlns=”http://schemas.microsoft.com/client/2007″
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
      Width=”900″ Height=”400″ xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″ xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″ mc:Ignorable=”d”>
    <Grid x:Name=”LayoutRoot” Background=”White” >
    </Grid>
</UserControl>

 

The Elusive Auto

Hence the reason why your content is not resizable.

One solution is to remove the Width and Height property.   Another is to set them to “Auto”, like so:

<UserControl x:Class=”Daphne.WorkplaceHome”
    xmlns=”http://schemas.microsoft.com/client/2007″
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
      Width=”Auto” Height=”Auto” xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″ xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″ mc:Ignorable=”d”>
    <Grid x:Name=”LayoutRoot” Background=”White” >
    </Grid>
</UserControl>

 

If you run the project, it will start resizing.  Unfortunately this causes the designer in Blend and VS2008 look like rubbish.  (or more rubbish than usual anyway).

The trick is to set the Width and Height properties to “Auto” after the the screen has been rendered.

 

In WPF (apparently) you can use code like this:

Partial Public Class Page
    Inherits UserControl
    Public Sub New()
        InitializeComponent()

        Me.Height = new System.Windows.LengthConverter().ConvertFromString(”Auto”)
        Me.Width =  new System.Windows.LengthConverter().ConvertFromString(”Auto”)
    End Sub

…

 

Sadly, in another twist of fate, “LengthConverter” does not exist in Silverlight.

The Silverlight Solution - Who’s your Nan?

 

 

Fortunately, browsing the type library showed me that setting the property value of Height or Width to “System.Double.Nan” has the same effect as “Auto”.

So, in the intialise of your Silverlight control, put this:

 

Partial Public Class Page
    Inherits UserControl
    Public Sub New()
        InitializeComponent()

        Me.Height = System.Double.NaN
        Me.Width = System.Double.NaN
    End Sub

 

I am not sure if Microsoft intend to support LengthConverter (or TypeDescriptor.GetConverter!) in a future Silverlight version, but I’m guessing not.

Links

• Strings to Things

 

Share this post :

Problem calling a Web Service from Silverlight 2

Apparently the “System.ServiceModel.ProtocolException” error is common in the fledgling world of Silverlight 2 and Web Services.

 

In my case I tried to reference a Web Service that my company created and was disappointed with this entertaining message:

 

System.ServiceModel.ProtocolException’ occurred in System.ServiceModel.dll but was not handled in user code Additional information: [UnexpectedHttpResponseCode]Arguments:Not Found
Debugging resource strings are unavailable. Often the key and arguments provide sufficient information to diagnose the problem. See http://go.microsoft.com/fwlink/?linkid=106663&Version=2.0.30226.2&File=System.ServiceModel.dll&Key=UnexpectedHttpResponseCode

 

What this meant in my case is that I needed a “crossdomain.xml” file placed in the root folder of the server I was accessing.

 

For a development server, this could mean something like this:

<?xml version=”1.0″?>
<!DOCTYPE cross-domain-policy SYSTEM “http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd”>
<cross-domain-policy>
  <allow-access-from domain=”*” />
</cross-domain-policy>

 

This gives all applications (Silverlight, Flash) no matter where they’re from to access any web applicaitons on your web host.

 

As an ISV I find this a bit annoying, as it means updating a file that is outside of the Web Application (in the Web Root).

 

It would be nice to be able to configure this information within the virtual directory of the application itself.

 

 

Links

• My Silverlight application cannot access my service!
• Crossdomain.xml Invites Cross-site Mayhem
• Article on CrossDomain.xml at Msdn

Combining Silverlight 2 content from multiple web applications in VS2008

 

In a project I’m doing I need to create a web application that can consume Silverlight 2 RIA content from other web applications.

As it turns out, this is pretty easy to do.  All you need to do is reference the xap in the other web application from your page and it works exactly the same as if you were using an xap from within your own web application.

A Problem with Debugging

One problem is that Visual Studio tries to run the two web applications on different ports, which makes it impossible to reference the other web app directly.  You can’t use a relative url:

<form id=”form1″ runat=”server” style=”height:100%;”>
    <asp:ScriptManager ID=”ScriptManager1″ runat=”server”></asp:ScriptManager>
    <div  style=”height:100%;”>
        <asp:Silverlight ID=”Xaml1″ runat=”server” Source=”../Crm_Web/ClientBin/TechnologyOneCrm.xap” Version=”2.0″ Width=”100%” Height=”100%” />
    </div>
</form>

Therefore you need to set the web application you wish to point to on a static port, like this:

You can then access the web application directly:

<form id=”form1″ runat=”server” style=”height:100%;”>
    <asp:ScriptManager ID=”ScriptManager1″ runat=”server”></asp:ScriptManager>
    <div  style=”height:100%;”>
        <asp:Silverlight ID=”Xaml1″ runat=”server” Source=”http://localhost:2000/Crm_Web/ClientBin/TechnologyOneCrm.xap” Version=”2.0″ Width=”100%” Height=”100%” />
    </div>
</form>

There’s probably many better solutions to this problem, but I thought I’d post my workaround.

3D in Silverlight 2.0

So what’s the difference between WPF and Silverlight again?  Oh yes, well WPF has more advanced features.

You know, 3D graphics!

Isn’t it strange that many Silverlight demos invariably incorporate 3D style effects? 

Take a look at this article for a very rich solution:

Silverlight: Building Advanced 3D Animations with Silverlight 2.0

I wonder how long it will be before Silverlight supports 3D natively?

Twittering using the Compact Framework

 

My twitter updates are done using a variety of code.  At the moment I use the Curl command line  in conjunction with SlickRun.  In the past I did this with Outlook (see the article Twittering from Outlook Using VBA).  In the past I’ve found this pretty easy to do using the Twitter Api.

 

I also like to do updates from my Pocket PC, but am not keen on SMS charges.  The solution of course is to create my own client, which I’ll be posting about shortly.

For my client program I intend to use TwitterLib library.  Sadly this does not work for the compact framework unaltered.  I am currently working on porting it to the compact framework.

 

In the interim I want to share with you a simple code sample for submitting tweets to Twitter. 

The example is simple enough to be used by people who want to do HTTP posts to similar services.

 

    Dim lsParams As String = “status=” & Uri.EscapeDataString(tweetText)

    Dim loRequest As HttpWebRequest = CType(HttpWebRequest.Create(”http://twitter.com/statuses/update.xml”), HttpWebRequest)
           With loRequest
               .Proxy = System.Net.GlobalProxySelection.GetEmptyWebProxy()

               .Timeout = 10000
               .AllowAutoRedirect = True
               .AllowWriteStreamBuffering = True

               .Method = “POST”

               .ContentType = “application/x-www-form-urlencoded”
               .ContentLength = Len(lsParams)

               Dim loCred As New System.Net.NetworkCredential(”someusername”, “somepassword”)
               .Credentials = loCred

               ‘ Write the request paramater
               Dim stOut As New StreamWriter(.GetRequestStream(), System.Text.Encoding.ASCII)
               stOut.Write(lsParams)
               stOut.Flush()
               stOut.Close()

               Dim loResp = .GetResponse
               With loResp

                   .Close()
               End With

           End With

 

The most important difference with the full .net framework is the “GetEmptyWebProxy” and “AllowWriteStreamBuffering” lines.  It won’t work without it.

Share this post :

Disturbing "Windows Live" Picture - Caption Competition

Am I the only one that finds this picture a bit strange? 

What is Microsoft trying to say?

Why are those people so manically happy? (Obviously to see Stripey means alot to them)

Are they Live developers that are thrilled to see at least one person is using the search engine?

I’d be interested in what you believe is going on here.  Please post a comment.

 

 

Share this post :

PPCFinder 1.0.0.5 released

 

About a year ago we released the freeware Pocket PC search program PPCFinder.  This program has had literally thousands of downloads subsequently with only a single release.

I’m proud to announce the first public update of the program since it’s original release.  The maintenance release 1.0.0.5.

The “backstory” of PPCFinder is a plane flight home from Sydney to Brisbane.  In the past I found the inbuilt Windows Mobile search completely inadequate.  The available freeware alternatives seemed unpleasant to use and the commercial ones seemed to be as an ajunct to filemanager functionality.    It was time to write my own….In only a few days, PPCFinder was born. 

PPCFinder is a simple program that still addresses an important need on the Windows Mobile Platform.  That is the need to find files, particularly large ones (the definition of “large” has changed since the default search application in Windows Mobile was created), in order to get extra memory.

PPCFinder gives you all the “advanced” search options available to the original Windows XP search, including the cute doggy mascot that I’m sure you find excellent.

If you need all this, give PPCFinder a go.

The full release notes for the new version are available at the forum.

If you are a fan, please leave a comment and let everyone know about it.

Share this post :

Silverlight HTTP Networking Stack

I found a neat article by one of the Silverlight team describing the way network calls work in xap applications.

What I find particularly interesting is the fact that the host browsers communications stack is used for HTTP communication.   This means that cookies and authentication from the current browser session are sent in these calls.

This means that composite applications that support both web and Silverlight content should work really well.

Links

Silverlight HTTP Networking Stack – Part 1 (Site of Origin Communication) at scorbs

Easy InkCanvas in Winforms for capturing signatures

In WPF there’s an interesting control called “InkCanvas” that can be used to capture signatures and the like in Tablet PC applications.

Recently I created a prototype for a windows forms application.  I did consider using WPF, but the overhead seemed unnecessary considering the simplicity of the requirement.

I am aware there’s a specific SDK for Tablet PC that provides winforms controls for the requirement, but I thought it might be fun to create my own.  As it turns out, it was pretty easy.

The requirement was to have a signature panel which could be used to collect a bitmap that would be attached to an entity to act as an authorisation.

Signature Panel

In the prototype I decided to create the signature panel as a standalone usercontrol called it, strangely enough “SignaturePanel”.

It uses Mousedown and MouseUp events to determine stylus pressure and mousemove for drawing.  Like the WPF control it keeps a collection of strokes internally.

Unlike the wpf control, I just decided to expose a “SignatureImage” property to allow a developer to retrieve a bitmap.  This is rendered from the strokes in realtime.

I assume it works for the Tablet PC, but I don’t know for sure.

Write your signature here

An additional feature of this control is a label which tells the user the last time the signature was last updated.  I thought the user may find this helpful.

If the user hasn’t written anything then it just reads “Write your signature here”.

The user control consists of a picturebox called “inkPanel” and a button for resetting the content:

 

Here’s the code:

 

Public Class SignaturePanel

    Private moCurrentWriting As New List(Of Point)
    Private moRememberInk As New List(Of List(Of Point))
    Private mbPenDown As Boolean = False
    Private Sub inkPanel_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles inkPanel.MouseDown
        mbPenDown = True
    End Sub

    Private Sub inkPanel_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles inkPanel.MouseMove
        If mbPenDown Then
            moCurrentWriting.Add(e.Location)
            mdLastSignatureUpdate = Now
            Me.Refresh()
        End If
    End Sub

    Private Sub inkPanel_MouseUp(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles inkPanel.MouseUp
        If moCurrentWriting.Count > 2 Then
            moRememberInk.Add(moCurrentWriting)
        End If

        moCurrentWriting = New List(Of Point)
        mbPenDown = False
    End Sub

    Private Sub inkPanel_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles inkPanel.Paint

        mRenderSignature(e.Graphics)

        Dim lsText As String = “”
        If Not Me.DesignMode Then
            If mdLastSignatureUpdate.HasValue Then
                lsText = “Signature last updated ” & Me.LastSignatureUpdate.ToLongTimeString
            End If
            e.Graphics.DrawString(lsText, Me.Font, Brushes.Black, 5, inkPanel.Height - 20)
        Else
            lsText = “… Write your signature here …”

            e.Graphics.DrawString(lsText, Me.Font, Brushes.Black, (inkPanel.Width / 2) - (e.Graphics.MeasureString(lsText, Me.Font).Width / 2), (inkPanel.Height / 2) - (e.Graphics.MeasureString(lsText, Me.Font).Height / 2))
        End If
    End Sub
    Private Sub mRenderSignature(ByVal g As Graphics)
        Using loPen As New Pen(Color.Black)
            loPen.Width = 2
            For Each loLines As List(Of Point) In moRememberInk
                g.DrawLines(loPen, loLines.ToArray)
            Next
            If moCurrentWriting.Count > 1 Then
                g.DrawLines(loPen, moCurrentWriting.ToArray)
            End If
        End Using
    End Sub
    Private Sub cmdClearInk_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles cmdClearInk.Click
        moRememberInk.Clear()
        inkPanel.Refresh()
    End Sub
    Private mdLastSignatureUpdate As Nullable(Of Date) = Nothing
    <System.ComponentModel.DesignerSerializationVisibility(System.ComponentModel.DesignerSerializationVisibility.Hidden)> _
    Public Property LastSignatureUpdate() As Date
        Get
            Return mdLastSignatureUpdate
        End Get
        Set(ByVal value As Date)
            mdLastSignatureUpdate = value
        End Set
    End Property

    <System.ComponentModel.DesignerSerializationVisibility(System.ComponentModel.DesignerSerializationVisibility.Hidden)> _
    Public ReadOnly Property SignatureImage() As Image
        Get
            Dim loBitmap As New Bitmap(Me.Width, Me.Height)
            Using loGfx As Graphics = Graphics.FromImage(loBitmap)
                mRenderSignature(loGfx)
            End Using

            Return loBitmap
        End Get
    End Property

End Class

 

If anyone’s interested in a standalone sample project, post the request to this blog and I’ll see what I can do.

Possible Uses

It may be interesting to use this code as:

• Signature recognition
• “Mud map” style sketching for business applications
• A basis for a drawing program

Of course, if you’re using WPF, use InkPanel.  But if you don’t want the overhead, maybe this will be the foundation of a lightweight solution.

 

Share this post :

Silverlight 2 has built in Unit Testing

As announced by Scott Guthrie in Mix08, and now on his blog, Silverlight 2 incorporates visual unit testing.  

One of the motivations for an MVC/MVP architecture for me is better unit testing of ui logic.  Sometimes it is very difficult to created automated visual tests for some platforms, such as Winforms. 

It appears (from the demo) that Silverlight allows pretty good testing of the actual user interface.    Probably more effective than testing ui logic with mock views.

Food for thought.  Perhaps this should affect the way we think about testing frameworks.

If you’re interested, take a look at this good (and short) video demo which gives you an overview of the whole thing:

Video walkthrough of the Silverlight 2 control unit tests - Jeff Wilcox

 

Links

Open Source automation frameworks for Winforms and other Win32 Apps

• Project White - Supports WPF and Swing - http://blog.benhall.me.uk/2008/02/project-white-automated-ui-testing.html
• NUnit Forms - http://weblogs.sqlteam.com/mladenp/archive/2008/01/03/Automated-GUI-testing—Is-it-worth-it.aspx

 

Share this post :