ASP.NET Futures Release July 2007

I just installed the ASP.NET Futures Release from July in order to get my hands on the new XAML server control.

One interesting note about the installation: the docs imply (and other commenters have noticed) that you need to manually add the MIME types for .xaml and .dll in IIS:

To run ASP.NET Web pages that contain the Media or Xaml controls when using features such as the XamlUrl property, managed code, or dynamic languages, you must set up MIME types in IIS for the following file name extensions: .xaml, .dll (for using managed code assemblies), and .py and .jsx (for using dynamic languages). For more information about how to configure ASP.NET Web sites for using Silverlight controls, see the Readme.htm file in the Silverlight_1.1_Quickstarts.Zip file. This .zip file is part of the Microsoft Silverlight 1.1 Alpha Software Development Kit (SDK) on the Silverlight Web site.

However, running Vista Ultimate with IIS7, I found that after the Futures install I already had those items mapped properly. I can’t say for sure that this install did that, but can’t think why the Silverlight 1.1 SDK would have set those MIME types for me.

Blogged with Flock

Tags: Silverlight, IIS, ASP.NET Futures Release

Silverlight Script Web Project in VS 2008

While trying to see if there was an easier way to run Silverlight pages via localhost instead of via the filesystem, I poked around with the new Silverlight Script Web project type in VS 2008. This allows me to run pages using localhost, but it’s a little weird: the attached “script” file is a .js file, not a .cs code-behind file as with the Silverlight Project template.

Check out the two different context menus for the XAML files in each project. Here’s the one in the Silverlight Project project:

And here’s the one in the Silverlight Script Web project:

When I try to manually copy over my XAML and HTML pages from the Silverlight Project to the Silverlight Script Web project, I get the following nasty error:

Which is probably fixable with some judicious configuration h4x but not at my current level of Silverlight knowledge.

Debugging Silverlight via IIS

This one has me scratching my head. I noticed tonight as I was investigating how to get QueryString parameters to my XAML code-behind file that the default Silverlight Project configuration opens your .html page via the filesystem, NOT as a website (virtual or otherwise). When I F5 into my very simple Silverlight test project, the browser opens:

C:\Users\Anthony.bear2\Documents\Visual Studio 2008\Projects\SilverlightProject1\SilverlightProject1\TestPage.html

When I had expected it to prompt me to set up a website or virtual root and go to something like:

http://localhost:1234/SilverlightProject1/TestPage.html

Stumper. I don’t see any options in the project properties to configure a web app either. Mike Taulty seems to have concluded that you need to create a new Web Site project and link to Silverlight, with some additional copying. Seems error-prone to me. However, this official-looking post from MSFT seems to confirm that this method is indeed state-of-the-art with regard to debugging Silverlight apps via IIS.

To summarize from the above post:

• Add a website to the solution.
• Right click on a folder in the website and use the “Add Silverlight link” command to link the output from the Silverlight project to the website. Click Yes to enabling Silverlight debugging from the website.
• Copy the testpage.htm, js, and silverlight.js to the website or use the asp:xaml control in an aspx page.
• You should now be able to set the website as the startup project.
• F5 Should now launch the page in the website in the browser under the debugger and using the web server for the web project.

Getting Query String Values in Silverlight

Here’s how to get the QueryString values in your XAML code-behind: use the System.Windows.Browser namespace and then use the static QueryString property of the HtmlPage object, as follows:

// add null checks as necessary
string val = HtmlPage.QueryString["foo"].ToString();

Silverlight: Convert Hex RGB to Color

Spent a few minutes looking up the answer to this one:

I have an RGB color in traditional HTML Hex notation, like #1d5d8f. How do I create a SolidColorBrush in this color?

I’m sure I must be missing something easier, but here’s the C# code to do it:

byte r = System.Convert.ToByte("1d", 16);
byte g = System.Convert.ToByte("5d", 16);
byte b = System.Convert.ToByte("8f", 16);
Color s = Color.FromRgb(r, g, b);
Brush b = new SolidColorBrush(s);

Silverlight: Centering Ellipses on a Point

Playing around with Silverlight, I decided I wanted to spike a graph that’s similar to the Blog Stats page of the WordPress.com site. I learned quickly that that the (x,y) coordinates for Ellipse(s) do not mean that the center of the Ellipse is at that coordinate; rather, the top-left of the Ellipse is at that coordinate. More specifically, draw a bounding rectangle as large as the ellipse, and put the top-left corner of the box at that coordinate, then center the Ellipse within the bounding box. This means that most times the Ellipse won’t even cover the coordinate!

Check out this first draft: I drew Line(s) to connect all the points, then drew Ellipse(s) with the Canvas.Left and Canvas.Top coordinates to be the same coordinates as the Line endpoints:

You’ll see they don’t correspond very well. So I needed to create an algorithm that takes in several parameters:

1. The desired centerpoint of the Ellipse
2. The Width and Height of the Ellipse

… and outputs the Canvas.Left and Canvas.Top of the Ellipse.

You might wonder if the StrokeThickness of the Ellipse would affect the drawing of the Ellipse. In other words, is the Stroke INSIDE OF or OUTSIDE OF the Ellipse? My tests indicate the Stroke is drawn inside the Ellipse. The following screenshot shows three circles, all with Width=Height=10. The first two have StrokeThickness=3, and the last one has StrokeThickness=5. You can see that this effectively draws a filled-in circle.

The code used to get the top-left corner of the Ellipse, starting from the actual coordinate, is as follows (C#):

private double TransformX(Ellipse e, double x)
{
    double width = e.Width;
    double transform = width / 2.0;
    return (x - transform);
}

private double TransformY(Ellipse e, double y)
{
    double height = e.Height;
    double transform = height / 2.0;
    return (y - transform);
}

Silverlight: XAML Intellisense Bug

Check out these two screenies:

The first one shows that Intellisense within the .XAML file works. The second one shows a bug of sorts – if you start typing on a new line, Intellisense doesn’t work. I think this may have been present in prior versions of Visual Studio as well.

A Silverlight Page is a Canvas

When trying to figure out how to dynamically set a TextBlock’s Text value, I discovered that a Silverlight Page class is actually a subclass of Canvas.

The declaration tells all:

public partial class Page : Canvas

… and with a little digging, helped me find a way to dynamically set the text:

public void Page_Loaded(object o, EventArgs e)
{
    // Required to initialize variables
    InitializeComponent();
    Canvas cc = o as Canvas;
    TextBlock tb = cc.Children[0] as TextBlock;
    tb.Text = "Fourscore and seven years ago...";
}

Silverlight: Referencing Canvas Elements

After Hello, World! the next logical Silverlight test is to dynamically set the value of the TextBlock from the code-behind page. The ASP.NET style declaration:

<TextBlock id=”foo” Text=”Hello, World!” />

doesn’t work, and in fact throws this exception at runtime:

So don’t do that!

Silverlight: Hello, World!

OK – I bought the books, I downloaded the required code, I’m ready to go. First Silverlight compile time! What can I say – I’m a big fan of “Hello, World!” functionality.

The first thing I notice is that there are two new Silverlight project types: Silverlight Project and Silverlight Class Library. From what I’ve gathered thus far, these are roughly analogous to the .NET 2.0-era ASP.NET Web Project (or Website) and Class Library project types. I’m not yet sure why Silverlight has it’s own Class Library type — could be a templated version of the normal class library, or perhaps this is meant to run on the client?

I start a new Silverlight Project and build it with no problems. Running it produces a blank page, which is expected. OK – let’s get to the Hello, World stuff! How do I create a static label?

Turning to the Page.xaml file, I see the following definition:

<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="Page_Loaded"
x:Class="SilverlightProject1.Page;assembly=ClientBin/SilverlightProject1.dll"
Width="640"
Height="480"
Background="White"
>
</Canvas>

Which looks like a good place to start. First thing I notice here is that the default output directory for the build artifacts has moved to /ClientBin/, instead of /bin/. I’m pretty sure this must be a client-side output directory. Next thing I see is that there’s a hook into a DLL, also presumably client-side, with the fully qualified namespace of the class referenced. I interpret this to be sort of like the code-behind file for this XAML. Third thing I see is that Silverlight pages (if that’s the right term) are size-specific; we’ll probably get into that later.

So – the label. It takes no more than a few seconds of Google searching before I find the answer: use a <TextBlock> control. Aptly named, says me! The text you want to display goes in the … drum roll please … Text property.

<Canvas .... >
<TextBlock Text="Hello, World!">
</Canvas>

And with tonight’s job wrapped up, I close this post. More to come later.