a) Create a Silverlight project in Blend, and test it. We assume that you are now ready to publish the application on a website.

b) Open the solution in Visual Studio 2010

c) Right click on the solution node Add -> New Website (Existing Website if you already had one)

f) Right click on the website in Visual Studio, choose Property Pages, and in the dialog that opens up, choose Silverlight Applications

g) Choose Add.

h) In the dialog that shows up, choose "Add" and the choose OK in the website property pages dialog. Optionally, you can make a few changes - for example, you can uncheck the "Add a test page that references the control" if you wanted to author your webpage from scratch.

i) Right click on the website and set the site as the startup project (Set as Startup Project)

j) Right click on the page that was automatically added for you (SomethingTestPage.html) when you added the Silverlight project into the site and set it as the start page (Set as Start Page)

k) Hit F5 and you are all set!

You can now make arbitrary changes to the SomethingTestPage.html page, including renaming it to something meaningful like Default.html.

Getting started

The best way to get started on creating a new project or item template is to use an already existing Blend project or item template. When you install Blend, project templates are installed at C:\Program Files (x86)\Microsoft Expression\Blend 4\ProjectTemplates\en and item templates are installed at C:\Program Files (x86)\Microsoft Expression\Blend 4\Templates\en.

Let us walk thru the process of taking of these, and customizing it a bit. Let's pick C:\Program Files (x86)\Microsoft Expression\Blend 4\ProjectTemplates\en\CSharp\Silverlight\Application. Let's assume that we wanted to customize this template such that a new additional UserControl document is added into the project to start with.

Key changes to be made to a project template

To modify this template, unzip the contents of the zip file (Blend will support extracting templates from zip files, just like VS, but we also support templates that are supplied in an unzipped folder) to a temporary folder, say c:\Temp.

The first thing we want to do is to change the following attributes in the csSilverlightApplication.vstemplate file (you can rename this file too if you wanted):

<Description _locID="BLEND_ProjectDescription">A project for creating rich cross-platform, web-based applications.</Description>
<Icon>ProjectIcon.png</Icon>
<TemplateID>Microsoft.Blend.SilverlightApplication</TemplateID>
<NumberOfParentCategoriesToRollUp>0</NumberOfParentCategoriesToRollUp>
<TemplateGroupID>Silverlight</TemplateGroupID>
<SortOrder>40</SortOrder>

Description and Icon are self-explanatory. For TemplateID, change the string to something unique, for example Microsoft.Blend.SilverlightApplication.NewTemplateWithUserControl. If you had C# and VB versions of your templates, you will want to make sure that they share the same TemplateID to be correctly classified in the project dialog. NumberOfParentCategoriesToRollUp dictates the number of node levels the template would be visible if you did have a hierarchy of nodes in the project dialog. SortOrder is the order in which the templates are sorted at a particular level in the hierarchy. TemplateGroupID represents the hierarchy in the dialog - if you were to change this to Silverlight;Foo, the template would end up showing under the Foo node under the Silverlight node.

The next thing to modify is to add two new entries for the additional file we want added to a new project when the template is instantiated:

<ProjectItem ReplaceParameters="true" >MainControl.xaml</ProjectItem>
<ProjectItem ReplaceParameters="true" SubType="Code">MainControl.xaml.cs</ProjectItem>

The ReplaceParameters="true" attribute will ensure that when the template is instantiated, Blend will make a pass over the contents of those files and replace any template arguments within those files (in this case, we are going to be having arguments for the default namespace that the control should belong to). If you were adding content into the template that did not have any parameters, say an Image asset, you could use ReplaceParameters="false". Also, if you wanted the item to be opened by default when a new project is created, you could use the OpenInEditor="true" attribute. The format for the TemplateContent section of the .vstemplate file is pretty much identical to the VS format, including support for creating additional assembly references, multiples projects, etc.

We need two additional steps to add the files themselves:

• Copy and paste MainPage.xaml and MainPage.xaml.cs as MainControl.xaml and MainControl.xaml.cs respectively. If you edit MainPage.xaml, you will notice something like x:Class="$safeprojectname$.MainPage" - this should be updated to x:Class="$safeprojectname$.MainControl". When the template is instantiated, $safeprojectname$ gets replaced with whatever name the user specified when creating a project. Do the same for MainControl.xaml.cs, and update the name of the class to MainControl.
• Edit the .csproj file, to include the MainControl.xaml, and MainControl.xaml.cs files.

Installation of templates

To install the custom template we just created, you could optionally zip the template. Then copy the folder (or the zip file if you chose to zip the contents) into C:\Users\<username>\Documents\Expression\Blend 4\ProjectTemplates.\ Restart Blend and the new template should show up in the dialog. For item templates, you can install them into C:\Users\<username>\Documents\Expression\Blend 4\ItemTemplates\.

Unfortunately, Blend does not support custom template folders that apply to all users on a machine. If you wanted this, you would need to install the template under the Blend program files folder, alongside the various other Blend templates. Also, the hierarchy of the folders does not matter - you can copy your template anywhere you like, but you should consider creating a new top level folder for your templates to avoid collisions with other templates.

Consider this scenario (which we ran into as we were adding new content into our SDK - the various shapes like Star, Arc, Donut, etc): say you have a type Foo that is a Control you want to show in the Blend asset library. However, when Foo is instantiated, you want to set a set of properties. In the past, you could have done this with the DefaultInitializer concept, but the problem is that there can be only one DefaultInitializer associated with a type. And you don't really want to subclass Foo to have different types just for the purpose of having them show up in the Blend asset library.

Enter ToolboxExampleAttribute. Now you can have multiple "examples" of the same type, each of which will result in the generation of different XAML. To use this attribute is very straightforward - you would hook this up just like any other attribute in the design time library. Here is a simple code snippet of how you could use this feature:

internal class ExampleOne : IToolboxExample
    {
        public ModelItem CreateExample(EditingContext context)
        {
            //Return a ModelItem instance that sets appropriate properties
        }
        public Stream GetImageStream(System.Windows.Size desiredSize)
        {
            //Return an icon image stream
        }
        public string DisplayName
        {
            get { return "Something"; }
        }
    }

And to register the example:

internal class MetaDataStore : IProvideAttributeTable
    {
        // Called by the designer to register any design-time metadata.
        public AttributeTable AttributeTable
        {
            get
            {
                AttributeTableBuilder tableBuilder = new AttributeTableBuilder();
                    typeof(Inker),
                    new ToolboxExampleAttribute(typeof(ExampleOne)));

                return tableBuilder.CreateTable();
            }
        }
    }

Also, you will be happy to know that Silverlight 4 adds a bunch of new attributes to the core platform that would have required you to author a design-time library in the past to supply for your custom controls - some examples of newly added attributes that I really like as the greatly enhance the design-time experience:
System.ComponentModel.AlternateContentPropertyAttribute in System.Windows.dll
System.ComponentModel.DefaultBindingPropertyAttribute in System.Windows.dll

a) DoubleAnimation v/s DoubleAnimationUsingKeyframes
In Blend 3, rotating a Rectangle in a Storyboard would give you the following:
<Storyboard x:Name="Storyboard1">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="15.091"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

In Blend 4, you now get the following (Note that you will find the user experience identical between Blend 3 and Blend 4 - if you were to drop an additional key frame, we will convert the animation to the type that lets you do keyframing)
<Storyboard x:Name="Storyboard1">
    <DoubleAnimation BeginTime="00:00:00" Duration="0:0:1.6" To="12.228" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
</Storyboard>

b) TransformGroup v/s CompositeTransform
In Blend 3, rotating a Rectangle would give you the following:
<Rectangle x:Name="rectangle" Fill="White" Stroke="Black">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="15"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Rectangle.RenderTransform>
</Rectangle>

In Blend 4, you now get the following:
<Rectangle x:Name="rectangle" Fill="White" Stroke="Black">
            <Rectangle.RenderTransform>
                <CompositeTransform Rotation="15"/>
            </Rectangle.RenderTransform>
</Rectangle>

Are there any other areas where you find the XAML being generated by Blend is more verbose than that would you would have liked? If so, I would love to hear about them!

Here is a small example that will help you get started on a feature that we just introduced in recently available Blend 3 build – we call this feature “design data”. This feature allows developers to enable designers to be more productive inside Blend for practical LOB applications where there is a clear separation between model and view, and where you can’t use the Blend sample data feature as your UI might depend on your custom business objects (for example, think typed data templates in WPF).

Design Data Sample

Let us take a quick tour of this example, and see how things work behind the covers:

ShoppingCart.cs defines a data structure that we are trying to visualize in ShoppingCartView.xaml. The type ShoppingCart does not have a public constructor, neither does ShoppingCartItem. Similarly, ShoppingCart has a read-only property ItemsCount. These kinds of limitations are extremely common in real-world data structures (and is being demonstrated here to show how our system handles these limitations just fine, without requiring your to make changes to your run-time code)

The sample data for ShoppingCartView.xaml is defined in ShoppingCartSampleData.xaml, which is included with a special build item type in the project file: <DesignData Include="ShoppingCartSampleData.xaml" />. This ensures that you don't pay any run-time penalties for enabling this design-time only feature.

The contents of ShoppingCartSampleData.xaml look like following:

<local:ShoppingCart

      xmlns:local="clr-namespace:DesignDataSample;assembly=DesignDataSample" ItemCount="22">

      <local:ShoppingCart.Items>

            <local:ShoppingCartItem ItemName="Book Name 1" ItemDescription="A very nice book!" ItemImage="/DesignDataSample;component/MySampleDataImages/Tree.jpg"/>

      </local:ShoppingCart.Items>

</local:ShoppingCart>

There are a few things to note about the contents of this file:

a)      While the format is XAML, we have relaxed the specification quite a bit. You are allowed to specify a value for the read only property (ShoppingCart.ItemCount, ShoppingCartItem.ItemName), as well as initialize objects that don’t have public constructors (ShoppingCart, ShoppingCartItem). Blend creates on the fly types which look like user types. You could choose to prevent reflection (in which case, what you can specify in XAML is severely restricted) by specifying <IsDesignTimeCreatable>true</IsDesignTimeCreatable> in the project file for the sample data XAML item.

b)      You can specify any platform type like Brushes, ImageSource, Uri, etc.

c)       You get full intellisense in Blend for typing this XAML.

In ShoppingCartView.xaml, we then hookup the sample data like so:

<Grid x:Name="LayoutRoot" d:DataContext="{d:DesignData Source=ShoppingCartSampleData.xaml}" Background="#FFB2B2B2">

For WPF projects, if your XAML was using typed data templates, you need to add the following attribute to those typed data templates to get picked up automatically, if you were using the reflection based sample data types and you wanted a good design experience.

<DataTemplate x:Type="{local:Foo}" d:IsDesignTimeCreatable="False">

This particular sample data feature will also be supported in VS 2010. As always, please don't hesitate to ask for further clarifications, and I really value your feedback on how we could make this feature more useful for you.

Sample data
https://blogs.msdn.com/usisvde/archive/2009/06/17/blend-3-great-feature-1-sample-data.aspx 
https://silverzine.com/tutorials/how-to-create-sample-data-in-blend-3/
https://www.85turns.com/2009/07/12/overview-of-sample-data-in-blend-3/
https://www.cynergysystems.com/blogs/page/michaelwolf?entry=silverlight_blend_3_sample_data
https://blogs.msdn.com/unnir/archive/2009/03/18/introducing-sample-data-support-in-blend-3.aspx

Master/Detail scenarios
https://blogs.msdn.com/usisvde/archive/2009/06/18/blend-3-great-feature-2-master-details-screens.aspx

Element to Element binding
https://blogs.msdn.com/usisvde/archive/2009/06/19/blend-3-great-feature-3-silverlight-element-binding.aspx

TreeView control
https://geekswithblogs.net/tkokke/archive/2009/06/29/styling-a-treeview-in-silverlight-and-blend-3.aspx
https://shawnoster.com/Blog/Silverlight-TreeView-Connecting-Lines-And-Blend-3-Support-for-HierarchicalDataTemplates

DataGrid control
https://blogs.msdn.com/unnir/archive/2009/03/19/datagrid-support-in-blend-3.aspx

AutoCompleteBox control
https://blogs.veracitysolutions.com/how-to-get-a-silverlight-3-autocompletebox-to-show-sample-data-in-blend-3/

Under the covers (Advanced topics explaining the magic behind all this!)
https://blogs.msdn.com/unnir/archive/2009/07/12/introducing-sample-data-for-developers.aspx
https://etvorun.spaces.live.com/
https://www.robfe.com/2009/08/design-time-data-in-expression-blend-3/

a)       Numeric editors for Gradient Stops

Designers like to precisely control the positioning of gradient stops. Blend 3 adds this ability.

b)      Better handling of Layout properties in common operations like copy/paste

With Blend 3, we have made a good, sincere attempt to streamline the properties that we set in common operations like copy/paste and double-click to insert. We also try to generate a clean as XAML as possible.

c)       Consolidate the style and template editing menus

I could not find the Connect bug link for this one, sorry! While the concept of Styles and Templates offers enormous potential, it also make it challenging for a tool like Blend to offer access to them, and at the same time make us approachable to users who don’t care about the separation. While we did a pretty good job of trying to abstract away the concepts of styles and templates, and while a lot more can be done, Blend 3 makes it possible to access all styles in the context menu. No need to go the Object menu to edit the ItemContainerStyle of a ListBox.

d)      AlternateContentProperty

You can read about this in a previous post of mine here.

e)       Expand/Collapse state of projects across solutions

Each time you close and reopen a solution that contains multiple projects, we now remember the expansion states of each project in the solution. We also remember the set of documents you had open inside Blend so you can restart working where you left off immediately.

f)        Preserving XAML readability when trying to copy templates in WPF

This is a WPF only improvement we made to Blend 3. In WPF, Blend allows you to edit copies of controls’ templates by reverse engineering the XAML from the BAMLized resources. While this is great to have, it is also essentially lossy operation. As an example, any static resource references like Brushes get inlined (and consequently, the XAML becomes a little less user-friendly). Blend now allows custom control vendors to specify the original XAML file that should be used at design-time for template editing in the design-time assemblies (another post is required to show how you could take advantage of this if you were in the business of writing complex WPF controls and wanted to better enable designers). We also correctly copy the templates from the original Generic.xaml in many more cases when the original source is available.

g)      Typing in the split view XAML editor steals focus

There were many cases where the design surface would steal focus from the XAML editor that would make it very annoying to type in the XAML editor. All of those should now be fixed, and along with support for intellisense in the XAML editor and a highly performant, robust-to-errors/exceptions XAML parser, typing in the XAML editor should be a really enjoyable experience for you (though we also work pretty hard to keep your XAML typing skills usage to a bare minimumJ).

h)       Arrange-by (z-index) is not preserved across sessions

The order in which elements appear in XAML does not always play well with the cognitive understanding of who like to see elements that appears higher in z-order to appear higher in the object tree. While Blend 2 had the ability to switch the visualization order in the object tree, we made it hard for users who would have to set this every time they opened a solution. Not anymore!

i)         Keyboard shortcuts fine tuning

This is a pretty hard problem to solve without free-form keyboard customizability and presets for shortcuts (a feature that is missing from Blend 3). But we made a pretty sincere effort here. For example, you can now customize the mouse zoom/scroll behavior for the design surface to your liking.

j)         And finally… Blend – so bad

We totally fixed this! Hope you enjoy using Blend 3 J.

Here are some of the highlights:

a) Categorization for various assets makes discoverability easier.
b) Searchability allows for quick location of an asset across categories like Controls, Effects and Behaviors.
b) Freely dockable anywhere in the UI. We also have left the popup mode unchanged for quick one-time access to assets.
c) Extensible - you can register your own assets that make it easy for inclusion into the projects on an on-demand basis. Adding an asset like a Control or a Behavior will add all necessary references required for the functioning of the project automatically.
d) List and Grid modes for the display of assets.

Registering your own library (or sets of libraries) in the asset tool is very simple. All you have to do is to setup a registry key that points to a folder containing the libraries. As an example, the Silverlight SDK registers itself into the Blend asset tool using the following key/value pair on a 64-bit machine:
Key: HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Expression\Blend\3.0\Toolbox\Silverlight\v3.0\Silverlight SDK Client Libraries
Value: c:\Program Files (x86)\Microsoft SDKs\Silverlight\v3.0\Libraries\Client\

For a WPF example, the following is the way the WPF ToolKit registers itself on a 32-bit machine:
Key: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Expression\Blend\3.0\Toolbox\WPF\v3.0\WPFToolkit
Value: C:\Program Files\WPF Toolkit\v3.5.40320.1

There are a few things you can customize around the display of assets:

The Icon: For supplying a custom icon, all you need to do is to add an image to the control library (preferrably its design-time library that helps keep the size of the library small) that uses the namespace qualified name of the control for its name. For example, say you had a custom control Foo. The icon would be then called FoosNamespace.Foo.png. Few things to keep in mind: Use EmbeddedResource as the build item for the Image. Blend's asset library only supports PNGs. If you wanted a 24x24 and 12x12 version of icons (since we use these two standard sizes in various places of our UI), all you have to do is to name the PNGs as follows: FoosNamespace.Foo.SmallIcon.PNG, and FoosNamespace.Foo.LargeIcon.PNG. The SmallIcon/LargeIcon part don't actually matter - you can pick a string of your choice, and we will dynamically determine and pick up the appropriate icon for display.

Description: You can use the DescriptionAttribute to change the string that is displayed as a tooltip for the asset.

Asset Library availability: If you wanted to prevent a particular asset from being visble in the Asset Library, you could use the ToolBoxBrowsable attribute as a part of the metadata specification for that asset in the design-time library.

Location in the category hierarchy: Again done via a newly introduced attribute (ToolBoxCategoryAttribute) that you can supply via a design-time library.

Here is a (random, off the top of my head) sneak peak into some of the new features we are adding to Blend 3 in the upcoming release, since the last Blend 3 Preview:

• A completely re-designed Asset Library: This is by far the biggest addition to Blend, and I am sure you will love it - after all, its dockable! More information on this later.
• The sample data system now allows you to specify custom objects (like Brushes and your business objects), that just completely opens up the Blend sample data system for developers to better enable designers. I will post a sample of this shortly. In addition to this, we also added support for TreeView and binding to recursive collections.
• Project pane search - you can easily find the files in your project, similar to what you would do for properties.
• Find in Files - this allows you to search for information across files.
• Better paste functionality - we now allow you to paste images from the clipboard.
• You no longer need to build your projects to preview changes to UserControls.
• Marquee selection of keyframes that allows you to select multiple keyframes easily in the animation window.
• A lot more functionality to make Behaviors even more easy to create and use like an easier way to pick elements, re-use the element, storyboard and state pickers, etc. This is addition to newer set of Behaviors and Actions that will be available out-of-the-box.
• State editing experience - we now allow you to view previews of transitions on the design surface as you switch between states.
• FluidLayout is a new feature that we a adding that allows you to design animated, dynamic layout experiences.
• Support for out-of-browser Silverlight applications.
• A much improved, highly performant, XAML editing experience that is robust to the typing experience (i.e. a design surface does not throw exceptions or blanks out as you type in the XAML, and one that allows you to work with an element even when an exception is thrown so you could correct your errors in the UI).
• A Blend SDK that allows for Blend created projects to be portable between designers and developers without actually requiring a Blend install.

In addition, we also spent a significant amount of time polishing up the Blend UI. Just simple things that required attention to detail and will make your overall experience with the product enjoyable - hope you will like them.

Watch out Christian's blog for the SketchFlow additions - I think SketchFlow is clearly the crown jewel of Blend 3. We also spent a significant amount of time polishing up the Blend UI, and hope you will like the improvments.

Really looking forward to June and your feedback!