UPDATED: See last paragraph about offline installation.

Sorry for the short post, this is more of a public service announcement.  When the Silverlight 2 runtime shipped, we shipped the Visual Studio tools along with it.  The tools download was labeled “RC1” and caused some confusion.  There were some reasons for this, but regardless it still targeted the Silverlight 2 release runtime.

Today we released the RTW (Releast To Web for those who are wondering what that means) of the tools.  There is no need to re-download the runtime or anything.  All you need to do is download the RTW bits, and run the installer, then be happy.

So go now and get the official RTW of Silverlight Tools.  Uninstall the previous version in your Control Panel (Add/Remove Programs) before installing this build.

There have been a few comments about installing the Silverlight Tools in either and “offline” mode (not connected to the Internet) or in environments with proxy servers, etc.  Let me try to explain some steps.  The first step in the tools installer is always to download the latest developer runtime for Silverlight.  This requires an Internet connection.  In environments where you might be behind a proxy we’ve seem this step fail as well.  To perform an installation of the tools in either of these situation, you can follow the steps I outlined in a previous post on Silverlight offline installation.  Even though the post is labeled RC0, the steps still apply.  This will help you install the tools.  Even if you already have the developer runtime installed, the tools installer will still attempt to download to ensure the latest is always downloaded.  I hope this helps!

Today at Microsoft PDC, Scott Guthrie demonstrated some of the new controls that have been provided as a part of the Silverlight Toolkit. 

The Silverlight Toolkit was what was previously named the Silverlight Control Pack in the press release when the runtime was released. 

This toolkit provides a set of controls and themes for Silverlight 2.  In this initial release, they are:

• AutoCompleteBox
• Chart
• DockPanel
• Label
• Expander
• TreeView
• UpDown
• ViewBox
• WrapPanel
• ImplicitStyleManager
• Themes (6): ExpressionDark/Light, RanierOrange/Purple, ShinyBlue/Red

These controls are released as an initial version, with tests and available with Ms-Pl licensing on Codeplex.  Of particular interest to me is the Charting components.  Typically available at cost with other platforms, the Silverlight team is providing a base set of Charting controls with source for you to implement, customize and ship with your products.  What is great about this type of control is an implementation with data binding as well, especially with an ObservableCollection.  With this combination you can have a powerful real-time experience updating information without having to re-paint the entire chart or do any postbacks for the app as well.

Let’s take a quick simple sample of what I’m talking about.  To use any of the controls in the toolkit, simply add a reference to the assembly in your project and then use the xmlns declaration at the root of your implementation.  I’m going to use “toolkit” as mine like this:

   1: xmlns:chart="clr-namespace:Microsoft.Windows.Controls.DataVisualization.Charting;assembly=Microsoft.Windows.Controls.DataVisualization"

Then we can use the chart in our XAML along with some other code.  Here I have a Slider and a TextBlock as well showing the value of the Slider as you change it.  I’ve also added the chart series and provided some data binding syntax for the series data:

   1: <UserControl

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:     x:Class="SLToolkitDemo.Page"

   5:     xmlns:chart="clr-namespace:Microsoft.Windows.Controls.DataVisualization.Charting;assembly=Microsoft.Windows.Controls.DataVisualization"

   6:     Width="800" Height="600">

   7:     <Grid x:Name="LayoutRoot" Background="White">

   8:         

   9:         <StackPanel Orientation="Vertical" Margin="15">

  10:             <TextBlock Text="Change Line Value"/>

  11:             <Slider x:Name="LineValueSlider" Value="12" Maximum="150" Minimum="0" />

  12:             <TextBlock x:Name="SliderValue" />

  13:             <chart:Chart Height="200" LegendTitle="Item" Title="My Simple Data-bound Chart" 

  14:                          x:Name="MyBarChart">

  15:                 <chart:Chart.Series>

  16:                     <chart:ColumnSeries x:Name="MySalesChartData" Title="Sales of Charts" 

  17:                                         ItemsSource="{Binding}"

  18:                          IndependentValueBinding="{Binding ChartType}"

  19:                          DependentValueBinding="{Binding ChartSaleCount}"/>

  20:                 </chart:Chart.Series>

  21:             </chart:Chart>

  22:             <chart:Chart Height="200" Title="My Simple Pie Chart" x:Name="MyPieChart">

  23:                 <chart:Chart.Series>

  24:                     <chart:PieSeries ItemsSource="{Binding}" 

  25:                                      IndependentValueBinding="{Binding ChartType}"

  26:                                      DependentValueBinding="{Binding ChartSaleCount}" />

  27:                 </chart:Chart.Series>

  28:             </chart:Chart>

  29:         </StackPanel>

  30:         

  31:     </Grid>

  32: </UserControl>

Now in my code I’ve hacked together some simulation of the ObservableCollection changing the value of the Line data to the value of the slider.  Because I implemented my class of Sale with INotifyPropertyChanged the default databinding of OneWay enables my target to be updated once any of my source (salesData) changes.  Here’s the full code:

   1: using System;

   2: using System.Windows;

   3: using System.Windows.Controls;

   4: using System.Windows.Documents;

   5: using System.Windows.Ink;

   6: using System.Windows.Input;

   7: using System.Windows.Media;

   8: using System.Windows.Media.Animation;

   9: using System.Windows.Shapes;

  10: using System.Collections.ObjectModel;

  11: using Microsoft.Windows.Controls.DataVisualization.Charting;

  12:  

  13: namespace SLToolkitDemo

  14: {

  15:     public partial class Page : UserControl

  16:     {

  17:         ObservableCollection<Sale> salesData;

  18:  

  19:         public Page()

  20:         {

  21:             // Required to initialize variables

  22:             InitializeComponent();

  23:             salesData = SalesData.GetData();

  24:             Loaded += new RoutedEventHandler(Page_Loaded);

  25:         }

  26:  

  27:         void Page_Loaded(object sender, RoutedEventArgs e)

  28:         {

  29:             ColumnSeries column = MyBarChart.Series[0] as ColumnSeries;

  30:             PieSeries pie = MyPieChart.Series[0] as PieSeries;

  31:             column.ItemsSource = salesData;

  32:             pie.ItemsSource = salesData;

  33:             LineValueSlider.ValueChanged += new RoutedPropertyChangedEventHandler<double>(LineValueSlider_ValueChanged);

  34:         }

  35:  

  36:         void LineValueSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

  37:         {

  38:             salesData[2].ChartSaleCount = Convert.ToInt32(e.NewValue);

  39:             SliderValue.Text = e.NewValue.ToString();

  40:         }

  41:     }

  42: }

And here is the SalesData.cs class:

   1: using System;

   2: using System.Net;

   3: using System.Windows;

   4: using System.Windows.Controls;

   5: using System.Windows.Documents;

   6: using System.Windows.Ink;

   7: using System.Windows.Input;

   8: using System.Windows.Media;

   9: using System.Windows.Media.Animation;

  10: using System.Windows.Shapes;

  11: using System.Collections.ObjectModel;

  12: using System.Collections.Generic;

  13: using System.ComponentModel;

  14:  

  15: namespace SLToolkitDemo

  16: {

  17:     public class SalesData

  18:     {

  19:         public static ObservableCollection<Sale> GetData()

  20:         {

  21:             ObservableCollection<Sale> sales = new ObservableCollection<Sale>();

  22:             

  23:             sales.Add(new Sale() { ChartSaleCount = 100, ChartType = "Bar" });

  24:             sales.Add(new Sale() { ChartSaleCount = 73, ChartType = "Pie" });

  25:             sales.Add(new Sale() { ChartSaleCount = 12, ChartType = "Line" });

  26:             sales.Add(new Sale() { ChartSaleCount = 24, ChartType = "Spline" });

  27:  

  28:             return sales;

  29:         }

  30:     }

  31:  

  32:     public class Sale : INotifyPropertyChanged

  33:     {

  34:         private int _count;

  35:         public string ChartType { get; set; }

  36:         public int ChartSaleCount

  37:         {

  38:             get { return _count; }

  39:             set

  40:             {

  41:                 _count = value;

  42:                 NotifyPropertyChanged("ChartSaleCount");

  43:             }

  44:         }

  45:  

  46:         #region INotifyPropertyChanged Members

  47:  

  48:         public event PropertyChangedEventHandler PropertyChanged;

  49:  

  50:         public void NotifyPropertyChanged(string propertyName)

  51:         {

  52:             if (PropertyChanged != null)

  53:             {

  54:                 PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

  55:             }

  56:         }

  57:         #endregion

  58:     }

  59: }

The result of which is when I move the slider to perhaps simulate real-time data, I see the data binding change in the chart represented here:

As you can see I have two charts using the same ObservableCollection<T>, so changing the data, changes both of the charts without any extra effort. 

Charting along with some of the other controls brings this really, really nice addition to Silverlight 2.  I hope you find them valuable.  We’ll be using them in projects and digging deeper (especially in charting) on the Silverlight Community Site, so I hope you visit there.  You can download the actual sample project for this file as well right here: SLToolkitDemo.zip

If you liked this post, please consider subscribing to the feed for more like it.  Justin Angel is also a program manager for the toolkit that you should check out some depth posts from him on the controls as well.  You can visit the samples site here showing you a gallery of the controls in implementation.

Amazon just released into public beta their EC2 features of enabling Windows instances.  I’m a fan of Amazon’s services and the route they’ve been taking.  I use S3 a lot, even only if as a file storage for now.  I’ve written a plugin for Live Writer so that S3 is basically my repository for everything non-text on this site and others.  Of course, if S3 goes down (like it did hard a while back) I’m screwed.  Maybe something like Reserve Chute will help me in the future.

I’ve not messed with the EC2 side of their offering only because I didn’t have a need, quite frankly.  I’ve played around with the awesomeness that is Jumpbox and how easy you can get a Jumpbox appliance running and with EC2.  But that’s been just messing around.  After all, I’m a Windows guy in my comfort zone, so that’s where I prefer to stay.

Today I fired up my EC2 information, had Elasticfox installed and started to check out the Windows on Amazon stuff.  I see a lot of people will use Elasticfox as it is easy to use.  One thing I think Amazon needs to do, is provide more intuitive image naming for their manifests.  Here’s a screenshot of how “geeky” they are:

You could decipher them of course, but they should just use their “friendly” names as well for ease of finding them.  One thing I did notice is that when I tried to run a 64-bit instance (which I assume will be named x86_64 – which is odd that it is named x86 and 64) I get a weird error message that I can’t see the rest of:

Oh well, I moved on with the x86 configuration with SQL Server Express (2005 version). 

NOTE: Right now they only have Windows Server 2003 r2 and SQL Server 2005 versions, no 2008 versions of either.

I struggled a bit with getting the right sequence going, so here’s what I did in hopes of helping others.  Twitter came in handy so thanks for those who pointed me in the right direction.  I did all of these FIRST before starting an instance.

First, having an instance running is fine, but generally you actually want to configure stuff with it!  Windows users/developers know and love Remote Desktop Connection…which is available on Windows Server.  Obviously you’d initially want to use that to configure your box in EC2.  Step 1, however, is to ensure that your security group enables the port traffic on TCP/3389.  Elasticfox makes this easy, by going to the Security Groups tab and either modifying the default group or setting a specific one for your instance:

Once that is done, I created a KeyPair (again, using Elastifox).  You simply create the KeyPair using the KeyPair tab and giving it a name.  It will prompt you to save the .pem certificate file somewhere on your machine.  Ensure you keep that handy – you will need it.

Once that is done I located the instance I wanted to fire up and chose to create a new instance.  One important step is to ensure you select the KeyPair correctly before the instance starts spinning up:

After that, I waited until Elasticfox told me that my instance was running.  Even though it indicated “running” I couldn’t connect to it right away.  My test showed that about 5-7 minutes after it turned into “running” mode that I could attempt to connect.

The first time you either attempt to connect or attempt to get the Administrator password, you’ll be prompted for that .pem file for certificate information…just browse to it and choose it.

When I attempted to connect using Elasticfox it gave me some weird errors and failed everytime…even though it gave me the Admin password and everything.  So I figured something was amiss and chose instead to fire up Remote Desktop Connection first and then paste the Public DNS address into there rather than have Elasticfox try to do some weird connection mojo for me.  Alas, it worked!  I was prompted by RDC about a certificate not matching (the certificate had the instance ID and not the public DNS name), but after accepting that, I was in.  I entered the Administrator password, and quickly changed it to something I could remember (they auto generate a rather cryptic one for you).

Wouldn’t you know it, it’s a Windows box :-).  I could configure IIS, added a hello world page and was able to browse to it over the public Internet.  Fantastic.  Your instance name gives you an indication of the IP address, so if you wanted to CNAME something you could do that.  As an example if your public DNS address is ec2-75-123-456-78.compute-1.amazonaws.com then your IP address is 75.123.456.78.  There is also the Elastic IP service which I don’t claim to know anything about, but you can associate with instances as well.

That was it, I was up and running.  To recap:

1. Get Elasticfox – a Firefox plugin.
2. Configure your Amazon Web Services credentials in the plugin
3. Go to the security group tab and enable the TCP/3389 port traffic either in the default security group or your own custom security group that you’ll associate with your instance.
4. Generate a KeyPair for your machine
5. Use the Elasticfox filter and type in ‘windows’ to see the different options
6. Choose your option and create a new instance, choosing the KeyPair and Security Group of your preference
7. Wait about 5-7 minutes AFTER it says it is running
8. Using Elasticfox, get the administrator password (right-click on the instance for that option)
9. Using Elasticfox, get the Public DNS Address (right-click on the instance for that option)
10. Launch Remote Desktop Connection and paste the Public DNS address
11. Review the certificate warning and accept if all looks good
12. Login with the administrator password, then change it so you remember what it is
13. Configure away!

I think this makes EC2 more intriguing to me because I can spin up a fully-fledge dedicated(virtual) box right away (and if needed, scale it to more instances).  The thing that I found curious was the pricing model.  If you create what they call a “small” instance, with using SQL Express and no authentication rights (i.e., the ability to create Windows users), then you’re looking at about $90/month before any bandwidth and disk usage fees apply – that is only compute time.  Also, if you add SQL Server Standard to that, the price jumps significantly (in my calculation to about $600/month). 

NOTE: My EC2 instance registered itself as a Dual-core AMD, 2.7 ghz, 2GB RAM.

When I look at a place like ServerBeach, where I can get a dedicated machine for around $130-150/month (with 2 TB bandwidth and 160GB storage) and add SQL Standard for $275 (and I’m not sure if that is monthly or one-time)…which seems lower than my fees with EC2 before bandwidth.  Now granted, if I needed to spin up more instances I couldn’t (or not without significant cost and inflexibility) but for the “one server” guy scenario, the pricing has me a bit perplexed.  For the person who wants to move from shared hosting to dedicated/virtual this might be an option if no database or SQL Express (or other open source databases) work for you.

Regardless it is interesting.  It is usefuly for these cloud computing services to show up so you can spin up servers almost instantly, play around with scenarios, like perhaps some Silverlight cross-domain or SSL scenarios, and shut them down when needed.  As a developer, very handy.  I’m also looking forward to seeing if any rumors are true about next week at PDC.

In the early days of Silverlight 2, one of the included controls was the WatermarkedTextBox.  In Beta 2 the control was removed from the runtime for among other things, WPF compatibility.  The control source code was made available for people to look at as it was referenced in a few projects, namely ScottGu’s Digg sample application.  There was hinting about future plans but nothing concrete. 

Now that Silverlight 2 is released, the control is not there :-).  I’ve gotten enough requests about it that I wanted to provide some action for you.  First, let me say that there are no concrete plans for WatermarkedTextBox at this time that I have to share.  I’m not saying there isn’t plans, but just that none at a point to make any worthwhile announcements.  Perhaps something like this would show up in the Silverlight Toolkit, but at this time no plans have been defined.

Again, as I’ve received enough requests, I’ve modified the source code for WatermarkedTextBox for Silverlight 2 release and am making it available for you to consume.  The code has been updated for use in Silverlight 2 and also updated to reflect the default styling of the released controls (namely to match TextBox).

If you aren’t familiar with the concept, it’s basically a TextBox with a value you can set for some helper text if the value is not set.  Typically you use this when you want to provide “prompt” text for some input, as an example here:

As you can see the TextBox provides a '”faded” default text that isn’t the TextBox.Text property of the control, but rather the Watermark property of this control.  Once data is entered in the control, the watermark goes away.  As long as data is input the watermark isn’t displayed…if the value is empty, the watermark displays.  Simple enough.

The XAML for the above looks like this:

   1: <UserControl x:Class="WatermarkTester.Page"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:     xmlns:local="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls.WatermarkedTextBox"

   5:     Height="300" Width="600" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">

   6:     <Grid x:Name="LayoutRoot" Background="White">

   7:         <StackPanel Orientation="Vertical">

   8:             <Grid Margin="15">

   9:                 <Grid.RowDefinitions>

  10:                     <RowDefinition Height="Auto" />

  11:                     <RowDefinition Height="Auto" />

  12:                     <RowDefinition Height="Auto" />

  13:                     <RowDefinition Height="Auto" />

  14:                 </Grid.RowDefinitions>

  15:                 <Grid.ColumnDefinitions>

  16:                     <ColumnDefinition Width="Auto" />

  17:                     <ColumnDefinition Width="Auto" />

  18:                 </Grid.ColumnDefinitions>

  19:                 <TextBlock Text="First Name:" Margin="5" Grid.Column="0" Grid.Row="0" />

  20:                 <local:WatermarkedTextBox Grid.Column="1" Grid.Row="0" Watermark="Enter your first name here..."/>

  21:                 <TextBlock Text="Last Name:" Margin="5" Grid.Column="0" Grid.Row="1" />

  22:                 <local:WatermarkedTextBox Grid.Column="1" Grid.Row="1" Watermark="Enter your last name here..." />

  23:                 <TextBlock Text="Phone Number:" Margin="5" Grid.Column="0" Grid.Row="2" />

  24:                 <local:WatermarkedTextBox Grid.Column="1" Grid.Row="2" Watermark="(xxx) xxx-xxxx" />

  25:             </Grid>

  26:         </StackPanel>

  27:     </Grid>

  28: </UserControl>

Note the xmlns:local declaration in the user control which references the binary.

The control is also Blend compatible if you want to change the style/control template so if you wanted to change the Watermark color or something like that you could easily do that with Blend:

So if you’ve been looking for this control, here you go.  You can download the bits here:

• Source: WatermarkedTextBox-Source.zip
• Binary only: WatermarkedTextBox-Binary.zip

The source is available as Ms-Pl.  Hope this helps!

Last week I had the pleasure of talking with the crew from the Herding Code podcast.  Among the questions was one about the open source community and Silverlight.  There was mention about MVCContrib and how that community sprouted almost instantly with the ASP.NET MVC initial releases.  I let the Herding Code crew know that I believe there already is a vibrant open source community around Silverlight and pointed to things like DevExpress’ AgDataGrid control which is free and provides source.  I also mentioned a project that did start right away around Silverlight 2 initial releases: SilverlightContrib.  The project, started by Page Brooks, had a good start and keeps on rolling now as they just released a set of free open source Silverlight controls!

The team of Page Brooks, Rob Houweling, Koen Zwikstra, and Shawn Wildermuth have just released “Alpha 2” of the project which includes:

• Color Picker
• Gauge Control
• Star Selector
• Enhanced Metafile (EMF)
• Cool Menu
• Libraries: Zip, Byte utilities, String utilities, Simple text parser, Animation Tweening, Wheel Mouse listener

While the project code is hosted at Codeplex, the team also has a blog at SilverlightContrib.org which has a Live Demo page that will show you demonstrations about the controls:

Color Picker:

Cool Menu (OSX style):

Gauge samples:

The code is available with the Ms-Pl license which is very permissive, so go and grab these controls…and better yet…contribute back to the project!!!  There are more than just controls there as I mentioned there are libraries as well – check out the Live Demo for examples.  I haven’t checked to see their compatibility with the Blend designer, but that is something you can tweak with yourself as needed.

Congratulations to Page and the team for a great community resource and a great release.  I look forward to more great things!