Today (19 Oct 2009) the Visual Studio team released the second beta for Visual Studio 2010 to the public.  This is a significant milestone for the team and a huge improvement over the previous beta in my opinion as a user.  As a developer, you can find out how/when you can download Visual Studio 2010 and .NET Framework 4 beta 2 from here.

After installing the tools, one thing you may notice right away is a different look of branding of Visual Studio going forward for now.  Gone is the beloved multi-colored infinity looking thing (that’s what I call it at least) and enter the updated logo.

I’d encourage you to download it when you can (MSDN Subscribers can do that today, general availability on Wednesday, 21 Oct) and start playing around with it.

What’s new for Silverlight developers in VS2010?

Well, the good news is no more work around hacks to get Visual Studio 2010 working with Silverlight development!  So what happens now when you install.  Here’s my experience from a clean machine (no existing SDKs, nor any version of Visual Studio as well).

After install of Visual Studio 2010 I have this for Silverlight development:

• Visual Web Developer
• Silverlight 3 SDK
• Silverlight 3 Tools (build 40818, the latest)

A few things missing here:

• Silverlight Toolkit (see below for the update to get)
• .NET RIA Services

See below to get the October 2009 release of the Silverlight Toolkit to get all that goodness and support for VS2010.  Remember the installer for the toolkit also gives you the option to deploy the source (which you still have to unzip) which is EXTREMELY helpful in understanding how controls work in general as well as extending the controls to fit your own needs.

For .NET RIA Services, we don’t yet have a supported build for Visual Studio 2010 Beta 2.  More information on this will be coming so make sure to subscribe to my feed here for updates and watch the forums.  I’m seeing if I can work on publishing a potential work around for RIA Services users and will post an update here if I can.  UPDATE: View information about RIA Services roadmap and VS2010 from the team here.

After installing VS2010 though, you can start developing your Silverlight applications and use the editable designer surface as well.  Expression Blend will still be your friend for Visual State Manager editing and animation recording, in my opinion.

Making the designer have some better performance

For beta 2, there is a registry entry you can add (we did say it was beta right ;-)) to make the WPF/Silverlight designer perform better. 

NOTE: Editing your registry can be dangerous if you aren’t familiar with it.  It can cause wars, harm children and hurt your machine.  You’ve been warned.

To enable this, perform these steps with all instances of Visual Studio shut down:

1. Open regedit.exe using admin permissions (on vista/win7)
2. Navigate to HKLM\Software\Microsoft\VisualStudio\10.0 key
3. Right-click and add a new Key named “ClrHost”
4. In the new key, right-click and create a new DWORD32 with the name of StartupFlags
5. Set the value of StartupFlags to 5
6. Close regedit and use Visual Studio as you normally would

I’ve also made a reg file to make this easier.  You can download this file: Dev10DesignerFix.renametoreg and rename it to .reg and double-click it to get this entry.  I chose to force you to rename to .reg so you know what you are doing :-).  This is a step that will not be necessary in the final release version.

Silverlight Toolkit October 2009 Release

Additionally today, the Silverlight Toolkit published the October 2009 release of the bits.  Primarily this was for support of Visual Studio 2010 integration, but also includes drag-drop support for key controls as well as some charting and other API improvements/fixes.  You can read the full details of the release of the toolkit here and download the latest build.

Hopefully you all have a chance to start working with Visual Studio 2010.  I am looking forward to using the new IDE and features to help me be more productive!

Yesterday, the Silverlight Live Streaming team (SLS) posted an update on their blog regarding the future of the Silverlight Streaming by Windows Live service.

SLS was a beta service to users to have a place to host and deliver their Silverlight-based applications or media to be delivered by Silverlight players.  It was launched at the time of Silverlight 2 as a free beta service to users under the Windows Live brand and offered 10GB of free storage to beta users.

In summary, the SLS service is being discontinued.  Effective immediately no new account sign-ups are going to be permitted for the service.  Existing accounts are not going to be deleted, nor is the content at this time.  A date for final termination of the service has not yet been set and the team has stated they will provide ample time to users to get their content out of the service.

Is there a replacement, if so, what is it?

A new Windows Azure based service for hosting and delivery of similar content is planned to be launched by the end of 2009 and would be a service that SLS users might consider transferring to, however is not a direct replacement of SLS.  Windows Azure is a broader initiative for the company and this is just one service that will be offered as a part of the suite of Azure cloud services.  Windows Azure is a pay service and will have costs associated with use.

How can I get my content?

The SLS team blog post has information about how you can retrieve your content from the service.  In a nutshell, we’ve enabled the WebDAV folder support for users of the service.  This gives you the ability to map a drive to your account and move files in your file explorer utility.  The key pieces of information you will need to accomplish this is your SLS Account ID and Key.  These are different then your Live ID account you use to log into the service.  To retrieve these, log into your account at the SLS site and click on Manage Account in the SLS options on the left after logging in, like this:

Make note of these two things.  The blog post has instructions on how you can use this information to map a network drive or network location to a WebDAV URL or share location to access your content.  I’m guessing the servers might be under some heavy load using this method so please be patient.  Remember that any authentication prompt is not looking for your Windows Live ID, but rather the SLS Account information noted above.

Summary and some FAQ

Yes, this is a bummer the service is going away as-is.  While the service was meant to stream any stand-alone Silverlight application, I know a lot primarily used it to host video content for blogs, etc. because of the web player it automatically generated. 

Q: Will the new Azure service enable video streaming and Smooth Streaming?
A: I think SLS had one of the most misleading names we’ve had on a product.  The video content on SLS was never really streaming in the technical sense.  It was always just a progressive download experience.  The Azure service details have not been completed for public detail just yet and will be announced when available as to what they will provide, costs and other details.

Q: What about the advertising platform?
A: Users who opted in and were approved for the advertising pilot with AdCenter will still have their AdCenter account information and content.

Q: When will you delete my content?
A: The final dates of discontinuance haven’t been determined and the team will give notice to all users (via the registered Windows Live ID account information/email and the blog) of timelines when they are available.  I would recommend to start downloading/saving your content now if you want it for later…this will save any mad rush to get content.

Hope this helps clarify anything but please also read the full announcement from the SLS team themselves.

If you’re a pro Silverlight developer, this post isn’t for you.  Just a brief update that I’ve updated some of our getting started material for beginners – those who really haven’t done anything.  These will be showing up on the Silverlight Community Site soon, but I wanted to post a link to it here first.

Getting Started with Silverlight Development is a 7-part series where I aim to do my best in trying to stuff as much as possible about Silverlight development in a simple application we develop at different steps.  It uses:

• Navigation
• Styles/templates
• Data Templates
• Data binding
• Value Converters
• Silverlight Toolkit controls
• Isolated Storage
• Network connectivity
• Web service requests to a public service
• Out-of-browser experiences

I hope that it is simple enough for beginners to follow but also provide a broad spectrum of capabilities to the beginner.  Full code in C# and Visual Basic is provided.

Hope this helps!

Over time a few people have contacted me about the missing WatermarkedTextbox from Scott Guthrie’s Digg sample for Silverlight he created a while back.  I had posted the updated code and binaries for WatermarkedTextbox here for you to use if you wish. 

NOTE: Incidentally this is the same code that is actually in the DateTimeTextBox that is included in the Silverlight Toolkit if you just want to use that :-).

After thinking about it though, I decided to take a stab at updating this getting started guide for new developers to Silverlight to incorporate some new features.  This isn’t for you folks that have already got your feet wet.  This is the Hello World –> have something complete in a few steps crowd.  Does it use Prism or MVVM?  No, not yet.  I think I wanted to keep simplicity to help people get started and then refactor from there.

Here’s the breakdown that I created (similar to Scott’s original flow):

• Part 1: Really getting started – the tools you need and getting your first Hello World
• Part 2: Defining UI Layout – understanding layout and using Blend to help
• Part 3: Accessing data – how to get data from where
• Part 4: Binding the data – once you get the data, how can you use it?
• Part 5: Integrating additional controls – using controls that aren’t a part of the core
• Part 6: Polishing the UI with styles and templates
• Part 7: Taking the application out-of-browser
• Watch a video of these steps for a walk-through: Twitter Search Monitor Video Tutorial

I hope this helps some folks and refreshes our getting started content for the newbies!  I’m also going to try to refactor this simple application a few times to help learn the Model-View-ViewModel approach to XAML development so be sure to subscribe to my feed for updates.

This is a first part in a series of getting started posts for Silverlight developers. 

In our series in getting started, we’ll eventually build out an application that searches Twitter for monitoring keywords and automatically refreshes at a specified interval.  Before we start getting too deep, let’s make sure you have the tools necessary to get started and understand the fundamentals of the developer experience for Silverlight.

The Tools

Of course, with any development all you need is a text editor and a compiler, but you’d be crazy these days not to use world-class tools.  That being said, what I will propose here are a set of tools to make your complete development experience with Silverlight simpler and faster.  Not all are required (again, you just need notepad and a compiler if you are hard core :-)).  Not all are free either.  But I highly recommend them not just because I work at Microsoft, but I truly believe they are the best tools for the job.

Visual Studio 2008

You’ll want to make sure you have Visual Studio 2008 in your first bag of tricks.  You will need Service Pack 1 for VS installed to get the Silverlight tools, so make sure you have that.  Any version of Visual Studio 2008 SP1 will work with the tools.  If you do not have a copy of Visual Studio 2008, you can use one of the free express versions, Visual Web Developer Express 2008 to do Silverlight development.  If you plan on doing database development as well, you can get SQL Server 2008 Express as well for no cost.

Silverlight Tools for Visual Studio

The Silverlight Tools for Visual Studio is an additional download that installs the SDK, developer runtime (for debugging) and a set of tools for Visual Studio (project templates, build targets, etc.).  This one package installed on top of VS will get you everything you need for your VS development environment for Silverlight.

For both of these, Visual Studio and Silverlight Tools, you can download them separately.  If you already have VS, just download and install the Silverlight Tools and you will be up and running.  If you don’t have VS, consider using the Web Platform Installer which will install Visual Studio, SQL Server Express and the Silverlight Tools for you – without you having to hunt around for the installers.  You can get the Web Platform Installer here:

If you already have Visual Studio installed, you can still install the Silverlight Tools using WebPI or you can download them directly here.

Expression Blend

Expression Blend is an interactive developer tool.  It is a visual designer for XAML, the underlying presentation technology for Silverlight and Windows Presentation Foundation (WPF) applications.  It has a great design surface and allows for easy manipulation of layout, animations, styling and templating.  I believe this to be an essential tool in XAML development.  This tool, however, is not available at zero cost.  If you have an MSDN Subscription it is included in some levels.  It can also be purchased as a part of Expression Studio.  You can download an evaluation copy of Expression Blend 3 here to get started.  We will use Blend for layout in the next step.

Silverlight Toolkit

The Silverlight Toolkit is a set of additional controls that are available outside of the core control set.  These include charting controls, date/time controls, accordions and much more.  Best of all, the source code for these controls (as well as all the core controls) are included for you to learn from and extend!

The toolkit is available for download from CodePlex and we will be using some controls from it in this series.

There are other control suites and tools you can use like .NET RIA Services which we will discuss in step 3, but I think the above are my recommended minimum tools you should have for Silverlight development.  Install them all before proceeding in this tutorial in step 2.

Understanding the development environment

Once you install Visual Studio and the Silverlight Tools you will notice a new grouping in the VS New Project dialog box:

You will see some new templates under the category Silverlight which include at least Silverlight Application, Silverlight Class Library and Silverlight Navigation Application.  Some others you may see depending on additional tools you may have installed.

For this step, choose the Silverlight Navigation Application template and give it a name for the application (I’m calling mine TwitterSearchMonitor).

The next window you will see will ask you if you would like to create a web project:

If this is a new project, I highly recommend choosing to create a web project for you.  By doing this you will have a web context to run the application for you.  This is helpful in avoiding issues around accessing web services from the local file system.  Running your application under HTTP from the start will help you avoid some of the most common mistakes in debugging web service access.  You can choose the ASP.NET Web Application Project, ASP.NET Web Site or ASP.NET MVC Project if you have that installed.  If you aren’t sure, just use the defaults.

The Project Structure

Once your app is created you will see something similar like this:

This shows your web application (which will host the Silverlight application) with pre-created test pages for the Silverlight application and the Silverlight application itself.  Let’s focus first on the Silverlight application project.

There are some key files you should be aware of here that we’ll explore in this series:

• App.xaml – this is an application-wide resource file.  If you put resources in here (we’ll explore in styling) or global events upon startup, they will happen here.  This file is also the entry point to your application and tells the Silverlight plugin what to do next.
• MainPage.xaml – this is a page that is a part of the template you chose.  It doesn’t have to be called MainPage, but that is what the project template uses by default.  This represents the starting user interface for your application.  Don’t be confused by details just yet.
• Assets/Views folders – these contain assets (files, images, styles, etc.) and other UI views for your application.

The XAML files are the files that make up the UI of your application.  They are just XML files with the XAML markup language.  We will be altering these in later steps.

When you build the solution (go ahead and do that) you’ll notice in the web application’s ClientBin folder a new file with a XAP extension will show up.  This is your compiled Silverlight application.  It’s actually an archive (aka ZIP) file with a different extension file name.  If you rename it to .ZIP and open it using an archive tool you can see the contents.

The XAP file is what is served to your browser.  This is the file that is hosted on the web server and gets delivered to the end user.  The XAP is hosted within a standard HTML page that hosts the Silverlight application using the <object> tag instantiation. 

NOTE: Silverlight is a client technology and can be hosted on any web server.  It can be any type of web server that is capable of delivering the XAP file along with the correct content MIME type from the server (application/x-silverlight-app).  As long as it does that, we don’t care what type of web server it is delivering the XAP file.

Test pages for ASP.NET and HTML are created for you with the standard template.  Since both of them are the same essentially, I usually delete one of them for simplicity.

Adding UI to the XAML pages

The template we chose is a navigation application template, meaning it has some navigation features built into it.  This is a fairly new feature to Silverlight and enables you to have a “master page” kind of view in your application.  If you look in the Views folder you will see About.xaml, ErrorWindow.xaml and Home.xaml.  For now let’s focus on Home.xaml since that is the first view that is loaded.  Open that file up by double-clicking it and you’ll see the XAML load in Visual Studio.

In this page you’ll see some XAML code that defines the view in a Grid that uses some other layout controls like a StackPanel and TextBlocks (we’ll go into StackPanel in the next step 2).  These are all part of the core control set that Silverlight provides.  A TextBlock enables you to present text to the user.  If you run the application now (hit F5 to run in debug mode – go ahead and choose to modify the web.config to enable debugging) you should see something like this:

Notice the text in the running application matches the text in the TextBlock of the XAML.  Also notice the link style buttons in the upper right.  These represent our navigation points which go to our separate views.  Let’s add some more XAML and see how to write code.

In the Home.xaml view, after the second TextBlock, add a Button using this XAML:

   1: <Button Content="Click me" x:Name="MyButton" FontSize="18" Width="150" Height="45" />

This will display a button on the view just underneath the “Home page content” text area.  Notice the x:Name attribute?  This is the unique identifier for this element and helps us reference it in code.  Think of this as the ID attribute of the control.  Now let’s make it do something when clicked.  There are two ways we can add events to the Button (or other elements) with simplicity.  In the XAML for Button itself we can add a Click attribute and you will see VS Intellisense automatically ask us if we want to generate a new event handler:

We can also wire up the event handler in code directly and keep it out of our XAML using this code in the Home.xaml.cs page:

   1: public Home()

<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum2">   2:</span> {</pre>

<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum3">   3:</span>     InitializeComponent();</pre>

<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum4">   4:</span>     MyButton.Click += <span style="color: #0000ff">new</span> RoutedEventHandler(MyButton_Click);</pre>

<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum5">   5:</span> }</pre>

Either way will work.  For simplicity for now you can use whatever you like…I will use the XAML method for now.  Now in the function MyButton_Click we can write managed code in the function to manipulate our user interface or other functions.  Let’s finish our Hello World sample by changing the HeaderText TextBlock (HeaderText is the x:Name value so we can reference it easily in code) to “Hello World” output.  To do that we’ll write this function code:

   1: void MyButton_Click(object sender, RoutedEventArgs e)

<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum2">   2:</span> {</pre>

<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum3">   3:</span>     HeaderText.Text = <span style="color: #006080">"Hello World!"</span>;</pre>

<pre style="border-bottom-style: none; text-align: left; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: 'Courier New', courier, monospace; direction: ltr; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"><span style="color: #606060" id="lnum4">   4:</span> }</pre>

After making these changes and running the application again (F5) we will see our button and when clicked it will change the text like below:

Next Steps

We’ve created our first Hello World Silverlight application.  We’ve got more to do to complete our Twitter search application.  Let’s move to step 2 to change some of our layout of our views for our application.  For more information on getting started check out the other resources here:

• Silverlight Community Site – Getting Started resources
• Getting Started video (walks through some of this above)

We won’t provide the code download here because this was just to get us started.  Future steps we’ll include a link to the finished project always.  Hope this helps…let’s move on to part 2!