Contents tagged with WPF

  • Nov 6th Links: ASP.NET, ASP.NET AJAX, jQuery, ASP.NET MVC, Silverlight and WPF

    Last week was our big PDC conference, and I've been busy catching up back at work this week.  I'm hoping to publish a bunch of new posts soon (including some on the PDC announcements we made).  Until then, here is the latest in my link-listing series.  Also check out my ASP.NET Tips, Tricks and Tutorials page and Silverlight Tutorials page for links to popular articles I've done myself in the past.

  • May 20th Links: ASP.NET, ASP.NET AJAX, .NET, Visual Studio, Silverlight, WPF

    Apologies for the sparseness of my posting the last few weeks - work and life have been busy here lately.  Below is a new post in my link-listing series to help kick things up a little.  Also check out my ASP.NET Tips, Tricks and Tutorials page and Silverlight Tutorials page for links to popular articles I've done myself in the past.

  • Visual Studio 2008 and .NET Framework 3.5 Service Pack 1 Beta

    Earlier today we shipped a public beta of our upcoming .NET 3.5 SP1 and VS 2008 SP1 releases.  These servicing updates provide a roll-up of bug fixes and performance improvements for issues reported since we released the products last November.  They also contain a number of feature additions and enhancements that make building .NET applications better (see below for details on some of them).

    We plan to ship the final release of both .NET 3.5 SP1 and VS 2008 SP1 this summer as free updates.  You can download and install the beta here.

    Important: SP1 Beta Installation Notes

    The SP1 beta released today is still in beta form - so you should be careful about installing it on critical machines.  There are a few important SP1 Beta installation notes to be aware of:

    1) If you are running Windows Vista you should make sure you have Vista SP1 installed before trying to install .NET 3.5 SP1 Beta.  There are some setup issues with .NET 3.5 SP1 when running on the Vista RTM release.  These issues will be fixed for the final .NET 3.5 SP1 release - until then please make sure to have Vista SP1 installed before trying to install .NET 3.5 SP1 beta.

    2) If you have installed the VS 2008 Tools for Silverlight 2 Beta1 package on your machine, you must uninstall it - as well as uninstall the KB949325 update for VS 2008 - before installing VS 2008 SP1 Beta (otherwise you will get a setup failure).  You can find more details on the exact steps to follow here (note: you must uninstall two separate things).  It is fine to have the Silverlight 2 runtime on your machine with .NET 3.5 SP1 - the component that needs to be uninstalled is the VS 2008 Tools for Silverlight 2 package.  We will release an updated VS 2008 Tools for Silverlight package in a few weeks that works with the VS 2008 SP1 beta.

    3) There is a change in behavior in the .NET 3.5 SP1 beta that causes a problem with the shipping versions of Expression Blend.  This behavior change is being reverted for the final .NET 3.5 SP1 release, at which time all versions of Blend will have no problems running.  Until then, you need to download this recently updated version of Blend 2.5 to work around this issue.

    Important Update: If you previously installed a VS 2008 Hotfix, you must run the HotFix Cleanup Utility before installing the VS 2008 SP1 Beta.  Click here to download and run this.

    Improvements for Web Development

    .NET 3.5 SP1 and VS 2008 SP1 contain a bunch of feature improvements targeted at web application development. 

    The VS Web Dev Tools team has more details (including specific bug fix details) on some of the VS specific work here.  Below are more details on some of the work in the web-space:

    ASP.NET Data Scaffolding Support (ASP.NET Dynamic Data)

    .NET 3.5 SP1 adds support for a rich ASP.NET data "scaffolding" framework that enables you to quickly build functional data-driven web application. With the ASP.NET Dynamic Data feature you can automatically build web UI (with full CRUD - create, read, update, delete - support) against a variety of data object models (including LINQ to SQL, LINQ to Entities, REST Services, and any other ORM or object model with a dynamic data provider).

    SP1 adds this new functionality to the existing GridView, ListView, DetailsView and FormView controls in ASP.NET, and enables smart validation and flexible data templating options.  It also delivers new smart filtering server controls, as well as adds support for automatically traversing primary-key/foreign-key relationships and displaying friendly foreign key names - all of which saves you from having to write a ton of code.

    You can learn more more about this feature from Scott Hanselman's videos and tutorials here.

    ASP.NET Routing Engine (System.Web.Routing)

    .NET 3.5 SP1 includes a flexible new URL routing engine that allows you to map incoming URLs to route handlers.  It includes support for both parsing parameters from clean URLs (for example: /Products/Browse/Beverages), as well as support to dynamically calculate and generate new URLs from route registrations.

    This new routing engine is used by both ASP.NET Dynamic Data as well as the new ASP.NET MVC framework.  It will support both WebForms and MVC based requests. 

    ASP.NET AJAX Back/Forward Button History Support

    .NET 3.5 SP1 adds new APIs to ASP.NET AJAX to allow you to better control the history list of a browser (enabling you to control the behavior of the back/forward button of the browser).

    You can learn more about this feature in the article here and the screencast here.

    ASP.NET AJAX Script Combining Support

    .NET 3.5 SP1 introduces a new <CompositeScript> element on the <asp:ScriptManager> server control, which allows you to declaratively define multiple script references within it.  All the script references within the CompositeScript element are combined together on the server and served as a single script to the client, reducing the number of requests to the server and improving page load time for ASP.NET AJAX applications.

    The script combining feature supports both path based scripts and assembly resource based scripts, and dynamically serves up the combined scripts using the ScriptResources.axd handler.

    Visual Studio 2008 Performance Improvements HTML Designer and HTML Source Editor

    In February we released a HotFix roll-up that included a number of performance improvements and bug fixes for the VS 2008 Web Designer.  VS 2008 SP1 includes all of these fixes, as well as a number of additional performance improvements.

    Visual Studio 2008 JavaScript Script Formatting and Code Preferences

    Visual Studio has for several releases supported rich source code formatting options for VB and C# (spacing, line breaks, brace positions, etc).

    VS 2008 SP1 adds richer source code formatting support for JavaScript as well (both inline <script> blocks and .js files).  You can now set your Javascript coding preferences using the Tools->Options dialog:

    These preferences will be automatically used as you type new Javascript code in the source editor.  You can also select existing code, right-click, and choose the "Format Selection" option to apply your style preferences to existing JavaScript code.  You can learn more about this new feature here.

    Better Visual Studio Javascript Intellisense for Multiple Javascript/AJAX Frameworks

    VS 2008 includes Javascript Intellisense support in source view.  The intellisense support with the initial VS 2008 release works well with vanilla JavaScript as well as code written using the ASP.NET AJAX JavaScript type patterns.  JavaScript is a very flexible language, though, and many JavaScript libraries use this flexibility to full advantage to implement their features - sometimes in ways that prevented the intellisense engine from providing completion support.

    VS 2008 SP1 adds much better intellisense support for popular Javascript libraries (we specifically did work to support JQuery, Prototype, Scriptaculous, ExtJS, and other popular libraries).  You will get better default intellisense when you reference these libraries.  We are also looking at whether we can maintain additional intellisense hint files that you can download to get even better intellisense and documentation support for some of the more popular libraries.

    Below is an example of using a JQuery startup function with the VS 2008 SP1 JavaScript intellisense engine:

    Notice below how VS 2008 SP1 can now provide method argument completion even on chained JQuery selectors:

    Visual Studio Refactoring Support for WCF Services in ASP.NET Projects

    VS 2008 SP1 adds better refactoring support for WCF services included within both ASP.NET Web Site and ASP.NET Web Application Projects.

    If you use the refactoring support to rename the class name, interface contract, or namespace of a WCF service, VS 2008 SP1 will now automatically fix up the web.config and SVC file references to it.

    Visual Studio Support for Classic ASP Intellisense and Debugging

    Previous versions of Visual Studio included support for intellisense and debugging within classic ASP (.asp) pages.  The file and project templates to create classic ASP pages/projects hasn't been in VS for a few releases, though, and with the initial VS 2008 we incorrectly assumed this meant that people weren't still using the classic ASP support.  We heard feedback after we shipped that indeed they were. 

    With VS 2008 SP1 this support for classic ASP intellisense and debugging is back:

     

    Visual Web Developer Express Edition support for Class Library and Web Application Projects

    The Visual Web Developer 2008 Express edition (which is free) is being updated in SP1 to add support for both class library and ASP.NET Web Application project types.  Previous versions of Visual Web Developer Express only supported ASP.NET web-site projects.

    Among other benefits, the support of class library and web application projects will enable ASP.NET MVC and Silverlight projects to be built with the free Visual Web Developer 2008 Express.  All of the above JavaScript, Dynamic Data, Classic ASP, and AJAX improvements work with Visual Web Developer Express as well.

    Improvements for Client Development

    .NET 3.5 SP1 and VS 2008 SP1 contain major performance, deployment, and feature improvements for building client applications. 

    Tim Sneath has a great blog post that talks about some of the client improvements here.  Below are more details on them:

    Application Startup and Working Set Performance Improvements

    .NET 3.5 SP1 includes significant performance improvements to the CLR that enable much faster application startup times - in particular with "cold start" scenarios (where no .NET application is already running).  Much of these gains were achieved by changing the layout of blocks within CLR NGEN images, and by significantly optimizing disk IO access patterns.  We also made some nice optimizations to our JIT code generator that allow much better inlining of methods that utilize structs.

    We are today measuring up to 40% faster application startup improvements for large .NET client applications with SP1 installed.  These optimizations also have the nice side-effect of improving ASP.NET application request per second throughput by up to 10% in some cases.

    New .NET Framework Client Profile Setup Package

    .NET 3.5 SP1 introduces a new setup package option for developers building .NET client applications called the ".NET Framework Client Profile".  This provides a new setup installer that enables a smaller, faster, and simpler installation experience for .NET client applications on machines that do not already have the .NET Framework installed.

    The .NET Framework Client Profile setup contains just those assemblies and files in the .NET Framework that are typically used for client application scenarios.  For example: it includes Windows Forms, WPF, and WCF.  It does not include ASP.NET and those libraries and components used primarily for server scenarios.  We expect this setup package to be about 26MB in size, and it can be downloaded and installed much quicker than the full .NET Framework setup package.

    The assemblies and APIs in the .NET Framework Client setup package are 100% identical to those in the full .NET Framework setup package (they are literally the same binaries).  This means that applications can target both the client profile and full profile of .NET 3.5 SP1 (no recompilation required).  All .NET applications that work using the .NET Client Profile setup automatically work with the full .NET Framework.

    A developer can indicate that the client application they are building supports both the .NET Framework Client Profile and the full .NET Framework by pulling up the project properties page for a client application within VS 2008 SP1.  Within the project properties page they can select a new checkbox that indicates it only requires those assemblies included in the .NET Framework Client Profile:

    VS 2008 will then ensure that the project can only reference those assemblies shipped in the client profile setup package (and it will generate a compile error if you try and use a type in an assembly not included in the client redist).  The compiled client application will then run on machines that have both the full .NET Framework installed, as well as machines that only have the .NET Framework Client Profile installed.

    If you have a machine that only has the .NET Framework Client Profile installed, and you try and run a .NET application on it that did not mark itself as supporting the .NET Framework Client Profile, then the CLR will refuse to run the application - and will instead prompt the end-user to upgrade to the full .NET Framework package.  This ensures that applications always run correctly - and that developers do not need to worry about missing assembly exceptions at runtime if a user tries to run an application that requires the full .NET Framework on a machine that only has the .NET Framework Client Profile installed.

    We believe that a large class of .NET client applications will be able to use this new .NET Client Profile setup to significantly speed up their installation, and enable a much more consumer friendly experience.

    New .NET Framework Setup Bootstrapper for Client Applications

    .NET 3.5 SP1 introduces a new "bootstrapper" component that you can use with client applications to help automate making sure that the right version of the .NET Framework is installed. 

    The bootstrapper component can handle automatically downloading and installing either the .NET Framework Client Profile or the full .NET Framework Setup Package from the Internet if your machine doesn't have either of them installed.  The boostrapper can also automatically handle upgrading machines that have a previous version of the .NET Framework installed.  For example, if your machine already has .NET 3.0 installed, and your application requires .NET 3.5, the bootstrapper can optionally download just the update files needed to upgrade it to .NET 3.5 (and avoid having to download the full .NET Framework setup download).

    The setup bootstrapper component can be used with both ClickOnce based setup packages, as well as with third party installer products (like Installshield).  The boostrapper optionally enables fully customized setup branding experiences (splash screens, custom setup wizard steps, etc) and should make it much easier to build optimized client setup experiences.

    ClickOnce Client Application Deployment Improvements

    .NET 3.5 SP1 includes several improvements for ClickOnce deployment of both Windows Forms and WPF applications.  Some of these improvements include:

    • Support for the .NET Framework Client Profile (all ClickOnce features are supported with it)
    • ClickOnce applications can now be programmatically installed through a ‘Setup.exe’ while displaying a customized, branded install UX
    • ClickOnce improvements for generating MSI + ClickOnce application packages
    • ClickOnce error dialog boxes now support links to application specific support sites on the Web
    • ClickOnce now has design-time support for setting up file associations
    • ClickOnce application publishers can now decide to opt out of signing and hashing the ClickOnce manifests as they see appropriate for their scenarios.
    • Enterprises can now choose to run only Clickonce Applications Authenticode signed by ‘Known Publishers’ and block anything else from running
    • FireFox browser extension to support Clickonce installations using FireFox browsers

    Windows Forms Controls

    SP1 adds several new Windows Forms controls - including new vector shape, Printing, and DataRepeater controls:

     

    WPF Performance Improvements

    .NET 3.5 SP1 includes several significant performance optimizations and improvements to WPF.  Some of the specific graphics improvements include:

    • Smoother animations
    • Hardware accelerated rendering of Blur and DropShadow Bitmap Effects
    • Text Rendering speed improvements - especially with VisualBrish and 3D scenes
    • 2D graphics improvements - especially with z-index scenarios
    • A new WriteableBitmap class that enables real-time and tear-free bitmap updates.  This enables custom "paint"-style applications, data visualizations, charts and graphs that optionally bypass the default WPF 2D graphics APIs.
    • Layered window performance improvements

    SP1 also adds support for better data scalability in WPF.  The ListView, ListBox and TreeView controls now support "item container recycling" and "virtualization" support which allows you to easily achieve a 40% performance improvement with scrolling scenarios.  These controls also now optionally support a "deferred scrolling" feature which allows you to avoid scrolling in real time and instead wait until a user releases the scroll thumb (the default scrolling mode in Outlook). This can be useful when scrolling over very large data sets quickly. 

    WPF Data Improvements

    .NET 3.5 SP1 includes several data binding and editing improvements to WPF.  These include:

    • StringFormat support within {{ Binding }} expressions to enable easy formatting of bound values
    • New alternating rows support within controls derived from ItemsControl, which makes it easier to set alternating properties on rows (for example: alternating background colors)
    • Better handling and conversion support for null values in editable controls
    • Item-level validation that applies validation rules to an entire bound item
    • MultiSelector support to handle multi-selection and bulk editing scenarios
    • IEditableCollectionView support to interface data controls to data sources and enable editing/adding/removing items in a transactional way
    • Performance improvements when binding to IEnumerable data sources

    WPF also now exposes hooks that enable developers to write custom panels w/ virtualized scrolling.  We'll be using this support together with the above data binding improvements to build the new WPF datagrid that will be shipping later this year.

    WPF Extensible Shader Effects

    .NET 3.5 SP1 adds support in WPF for a new shader effects architecture and API that allows extremely expressive visual effects to be created and applied to any control or element within WPF.  These shader effects support blending multiple input compositions together.  What makes them particularly powerful is that WPF executes effects (including custom effects you build yourself) using the GPU - giving you fully hardware accelerated graphics performance.  Like almost everything in WPF, you can also use WPF databinding and animation on the properties of an effect (allowing them to be fully integrated into an experience).

    Applying an effect onto a Control is super easy - just set a Control's "Effect" property.  For example, to add a hardware accelerated drop-shadow effect on a button you can use the built-in <DropShadowEffect> on it via either code or XAML:

    Which will cause the button to render like so:

    Because Effects are extensible, developers can create their own custom Effect objects and apply them.  For example, a custom "DirectionalBlurEffect" could be created and added to a ListBox control to change its scroll appearance to use a blur effect if you rapidly scroll across it:

    Keep an eye on Greg Schechter's blog to learn more about how the Effects architecture works and to learn how you can both create and apply new effects within your applications (his first set of posts are here). 

    Note: In addition to introducing the new Shader Effects API, WPF in SP1 also has updated the existing Blur and DropShadow Bitmap effects already in WPF to be hardware accelerated.

    WPF Interoperability with Direct3D

    .NET 3.5 SP1 adds support to efficiently integrate Direct3D directly into WPF.  This gives you more direct access to the hardware and to take full advantage of the Direct3D API within WPF applications.  You will be able to treat Direct3D content just like an image within an application, as well as use Direct3D content as textures on WPF controls. 

    For example, below are three samples from the Direct3D SDK:

    We could either load them in as image surfaces within a WPF application, or map them as textures on WPF controls.  Below is an example of mapping them as textures onto cubes in a WPF 3D application:

    Note: the Direct3D integration isn't today's SP1 beta release.  It will appear in the final SP1 release.

    VS 2008 for WPF Improvements

    VS 2008 SP1 includes several significant improvements for WPF projects and the WPF designer.  These include:

    • Several performance improvements
    • Events tab support within the property browser
    • Ability to sort properties alphabetically in the property browser
    • Margin snaplines which makes form layout much quicker
    • Better designer support for TabControl, Expander, and Grid
    • Code initiated refactoring now updates your XAML (including both control declarations and event declarations in XAML)
    • Go to Definition and Find All References now support things declared in XAML

    The debugger has also been updated in SP1 so that runtime errors in XAML markup (for example: referencing styles, datasources and/or other objects that don't exist) will now be better identified within the debugger:

    Data Development Improvements

    .NET 3.5 SP1 and VS 2008 SP1 include a bunch of improvements for data development. Some of them include:

    SQL 2008 Support

    VS 2008 and .NET 3.5 are being updated to include support for the upcoming SQL 2008 release.  Visual Studio 2008 data designers, projects and wizards now fully supporting connecting and working against SQL 2008 databases. 

    ADO.NET Entity Framework and LINQ to Entities:

    .NET 3.5 SP1 includes the new ADO.NET Entity Framework, which allows developers to define a higher-level Entity Data Model over their relational data, and then program in terms of this model.  Concepts like inheritance, complex types and relationships (including M:M support) can be modeled using it.  VS 2008 SP1 now includes built-in designer support to help with this modeling:

    The ADO.NET Entity Framework and the VS 2008 Entity Framework Designer both support a pluggable provider model that allows them to be used with any database (including Oracle, DB2, MySql, PostgreSQL, SQLite, VistaDB, Informix, Sybase, and others).

    Developers can then use LINQ and LINQ to Entities to query, manipulate, and update these entity objects.

    ADO.NET Data Services (formerly code-named "Astoria")

    .NET 3.5 SP1 includes a flexible framework that enables the creation of REST-based data services.  Formerly code-named "Astoria", the ADO.NET Data Services framework provides support for publishing data through a standard REST URI syntax and using standard HTTP verbs to operate on the data resources.  Developers can easily expose data models created using the ADO.NET Entity Framework, and/or use a pluggable provider model to expose other data models.

    In addition to publishing data sources, the framework also adds a client API for working with remote REST services.  Included with this client API is a LINQ library that allows the remote query of REST services.

    WCF Development Improvements

    .NET 3.5 SP1 and VS 2008 SP1 include several enhancements for WCF development.  Some of these include:

    • Significant scalability improvements (5-10x) in Web-hosted application scenarios
    • Support for using ADO.NET Entity Framework entities in WCF contracts
    • API usability improvements with DataContract Serializers, and with the UriTemplate and WCF web programming models
    • Enhanced TestClient support within VS 2008 SP1
    • New Hosting Wizard in VS 2008 SP1 for WCF Service Projects
    • Improved debugging support in partial trust scenarios

    VB and C# Improvements

    The VB and C# teams have also added some nice improvements to VS 2008 SP1:

    Visual Basic

    You can now add "XML to Schema" items to Visual Basic projects.  On adding these project items a wizard will open that allows you to create a XSD schema set from a variety of XML sources.  This schema set is then added to the project and it enables VB XML intellisense. This support was previously available as a web download - you can learn more about it here.

    A XSD browser is also now included with VS 2008 SP1 and allows you to browse XSD schema sets.  With the final SP1 release, developers will be able to right-click on XML element names (either in XML properties or XML literals) in the VB code editor and select “Go To XML Schema Definition” - this will open the XSD browser and display the schema set (and select the current element) for the VB project.

    C#

    The C# code editor now identifies and displays red squiggle errors for many semantic code issues that previously required an explicit compilation to identify.  For example, if you try to declare and use an unknown type in the C# code-editor today you won't see a compile error until you do a build.  Now with SP1 you'll see live red squiggle errors immediately (no explicit compile required):

    The debugger in VS 2008 SP1 has also been improved to provide more debugging support for evaluating LINQ expressions and viewing results at debug time:

    LINQ enabled data sources now have a "Results View" node show up within the debugger watch window.  Expanding this node will evaluate a LINQ expression and allow you to examine the materialized objects it returns:

    Team Foundation Server Improvements

    TFS 2008 SP1 includes a ton of improvements.  Please read Brian Harry's Team Foundation Server 2008 SP1 Preview blog post for more details.

    Summary

    .NET 3.5 SP1 and VS 2008 SP1 provide a bunch of bug fixes, performance improvements, and additional feature enhancements that make building all types of .NET applications better.  It will be a fully compatible service pack release. 

    We plan to ship the final release of both .NET 3.5 SP1 and VS 2008 SP1 this summer as free updates.  You can download and use the beta now here.

    Hope this helps,

    Scott

  • First Look at Using Expression Blend with Silverlight 2

    Last week I did a First Look at Silverlight 2 post that talked about the upcoming Silverlight 2 Beta1 release.  In the post I linked to some end-to-end tutorials I've written that walk through some of the fundamental programming concepts behind Silverlight and WPF, and demonstrate how to use them to build a "Digg Search Client" application using Silverlight:

    In this first set of Silverlight tutorials I didn't use a visual design tool to build the UI, and instead focused on showing the underlying XAML UI markup (which I think helps to explain the core programming concepts better).  Now that we've finished covering the basics - let's explore some of the tools we can use to be even more productive.

    Expression Blend Support for Silverlight

    In addition to releasing the upcoming Beta1 of Silverlight 2, we are also going to ship Visual Studio 2008 and Expression Studio tool support for targeting it.  These tools will offer a ton of power for building RIA solutions, and are designed to enable developers and designers to easily work on projects together.

    In today's post I'm going to introduce some of the features in the upcoming Expression Blend 2.5 March preview.  After demonstrating some of the basics of how Blend works, we are going to use it to build a cross-platform, cross-browser Silverlight IM chat client:

    The above screen-shot shows what the application looks like at runtime on a Mac.  Below is a screen-shot of what it looks like at design-time within Expression Blend:

    We'll use Expression Blend to graphically construct all of the UI for the application, as well as use it to cleanly data-bind the UI to .NET classes that represent our chat session and chat messages.

    <Download Code> Click here to download a completed version of this sample. </Download Code>

    All of the controls we'll use to build the chat application are built into Beta1 of Silverlight 2.

    Disclaimer: I am not a designer (nor am I cool)

    Let me say up front that I am a developer and not a designer.  I'm also not very cool.  While I understand the techniques to create UI, I sometimes choose bad colors and fonts when putting it together (only after I did all the screen-shots for this post did a co-worker helpfully point out that there is actually a site dedicated to banning some of the fonts and colors I used. Ouch).

    For those of you with artistic skill out there - please be gentle with me and focus your attention on the features and techniques I demonstrate below, rather than on the font and color choices I use. :-)

    Getting Started: Creating a new Silverlight 2 Project

    Expression Blend and Visual Studio 2008 share the same solution/project file format, which means that you can create a new Silverlight project in VS 2008 and then open it in Expression Blend, or you can create a new Silverlight project in Expression Blend and open it in VS.  You can also have both Expression Blend and VS 2008 open and editing the same project as the same time.

    Since in my previous Silverlight tutorial series I already showed how to create a new Silverlight project using VS 2008, let's use this post to show how to create a new Silverlight application using Expression Blend.  To do this, simply choose File->New Project in Expression Blend, select the "Silverlight 2 Application" icon, and click ok:

    This will create a new (VS-compatible) solution file and Silverlight application project:

    Blend includes a full WYSIWYG designer for Silverlight 2 applications.  When opening Silverlight pages and controls you can switch the design-surface to be in design view, a XAML source view, or a split-view that shows both the design view and XAML source view at the same time (and which supports live edits of both).  Above we are using the split-view option.

    Understanding Some Basics: Adding Controls to the Surface

    Expression Blend has a slightly different tool palette then Visual Studio (it more closely resembles what you'd find in a design tool like Photoshop). 

    Blend supports vector graphic editing:

    Blend also supports adding and working with controls.  There is a special icon on the Toolbox for layout controls (Grid, Stack, Canvas, Border, ScrollViewer, etc), text controls (TextBox, TextBlock, etc), and an icon that displays the controls you've recently used:

    Clicking on the final ">>" icon on the tool palette displays all of the controls that are available to be used:

    Make sure to click the "Show All" checkbox in the top-right hand corner of the Asset Library if you don't see the control you are looking for.  You can also use the "search" textbox to filter the controls by name.

    Important: Blend supports a design experience for all controls (both the built-in ones as well as any custom control or user control that your application references).

    Once you select a control from the toolbox, you can click and drag on the design-surface and draw out the control.  You can also drag controls from the asset tool onto the artboard.  By default you get automatic rules and positioning placement markers when you add and interact with the controls on the design-surface (below is a form with the built-in button, calendar and slider control on it):

    Understanding More Basics: Working with Control Properties

    You can select any object on the design-surface and then click on the "properties" panel on the right-hand side of the screen to customize its properties:

     

    Above I'm changing the "Background" brush of the button to be a deeper blue gradient (the third tab circled in red under the "Brushes" node allows us to configure the gradient brush). 

    Useful Tip: The properties window includes a search box near the top that you can optionally use to filter the visible property names:

    Because all UI objects in Silverlight and WPF are composed using vector graphics, we can shape/stylize/transform controls however we want.  For example, we could either set the "Transform" properties on our Button control or click on the corner edges of it to rotate/skew/scale it:

    This gives us a lot of power and flexibility to quickly and easily customize the experience however we want:

    Useful Tip: You can zoom in and out of the design surface by holding down the ctrl key and then use the wheel of your mouse to control the zoom depth.  You can then move the viewable region of the design surface by holding down the space bar, which will cause a hand-cursor to display, and then you can hold down the mouse and use it to drag the currently visible region around the screen.  This later tip is useful when you are zoomed way in and want to easily move the visible content around.

    Building our Chat Application: Defining the Layout

    In Part 2: Using Layout Management of my previous Silverlight tutorial series I talked about the layout management system within Silverlight and WPF, and how we can use layout panels to easily control application layout and flow.  Expression Blend makes defining layout rules easy, and includes built-in tool support for using these layout panels.

    Remember that our goal in building our chat application is to have UI that looks like this:

    To do this we'll start by defining a three row <grid> layout on our page.  We'll do this by hovering the mouse over the left margin of the design-surface and then click where we want to establish a new row definition (below I've already setup a top row definition - the cursor location circled in red indicates where I'll click to add a second row definition):

    Clicking on the top-left corner of the design surface (circled in red below) allows us to toggle whether the design surface is in Canvas layout mode or Grid layout mode. 

    When in Grid layout mode Blend will show us whether a particular row or column has a fixed width, or whether it is proportional to the size of the control.  Above the "empty locks" indicates that the three rows are currently proportional to each other (meaning they will all increase proportionally if we resize the browser to get bigger):

    If we click the top and bottom locks we can set those rows to have a fixed height instead, and leave the middle row to fill the remaining height. 

    One last step we can take is to click on the top margin and define a right-hand column as well - which we'll set to have a fixed width (and leave the left column to dynamically resize):

    Once we do the steps above, our XAML file with have a Grid defined like so:

    Useful Tip: Above we have a fixed width and height set for our Silverlight application (notice the Width and Height attributes on the root <UserControl> element).  We can cause the application to instead have a dynamic size and automatically flow and size to fit the containing HTML element or browser window size by removing the Width and Height attributes completely (I talk about this at the end of my layout tutorial here).  If we want to set a design-time width and height on our application, we can do that by setting a d:DesignWidth="640" and d:DesignHeight="476" attribute on the root UserControl element.  This will cause the designer to default to that size dimension when using the designer on the application.

    Building our Chat Application: Adding Controls and Colors

    Now that we have the core layout of our chat application defined, let's add some controls to it and start to customize how it looks.

    We'll start by selecting the root Grid layout panel and customize its background color to be a blue gradient.  One easy approach we can use to select a particular control is to use the "Interaction" panel and then click the control we want to select within it:

    We can then use the "Brushes" property panel to customize a blue LinearGradient brush for the background of our Grid:

    Once we have this set we'll work on the bottom of our chat window, and add a "Send" button to it:

    For our chat message textbox we'll use a standard textbox.  But to add a little more pizzazz we'll first add a border control with a "RoundRadius" of 5 and a Background and BorderBrush like so:

    We'll then embed our TextBox within the Border control. 

    Important Tip: To nest the TextBox within the Border control using the design-surface, we'll want to double-click the Border control within the interaction window.  This will set it as the active insertion control in the design surface, and highlight it in yellow like below:

    We can then use the control toolbox to select a TextBox control and add it into the Border control.  We'll set the TextBox's background and border brush to pick up the nice curved look from the parent Border control:

     

    The XAML markup generated by Blend will look like below (notice how the TextBox is nested under the Border control - it wouldn't have been if the Border hadn't been the active insertion control):

    We can repeat the above process for the header row as well, and embed a TextBlock within a Border control and add a image control to the right column to create UI like so:

     

    The XAML markup generated by Blend looks like below:

    Last but by no means least, we'll add another Border control in our center row and add a ListBox control inside it.  We'll configure the Border control to stretch across both columns in our Grid, and customize its background and foreground colors.  We'll then put some test message inside the ListBox as placeholder text (we'll customize the UI and databind real values later):

    The XAML markup generated by Blend looks like below:

     

    And now when we run the application we have a basic chat IM client (with hard coded values) running in the browser.  As we resize the browser the application will automatically flow and resize to fit the window.

    We still have a bunch of UI work to-do to make our IM client look less lame, but at least we now have something up and running.

    Building our Chat Application: Adding "ChatMessage" and "ChatSession" classes

    Now that we have created our initial UI within Expression Blend, let's open up the same project in Visual Studio and add some chat classes that we can use to bind our UI against.

    We can open up the project in Visual Studio either by selecting File->Open Project inside VS 2008 and selecting the project file for our project, or within Expression Blend we can right-click on the project node and choose the "Edit in Visual Studio" menu item to launch VS 2008 with the project open:

    VS 2008's Silverlight support in Beta1 has project management support for Silverlight 2 solutions, full intellisense and event-wireup support, and support for debugging Silverlight applications running both on Windows and the Mac.  VS 2008 also has split-view editing support for Silverlight .xaml files.  For example, here it the same Page.xaml file we built above in Blend open inside VS 2008:

    The VS 2008 design-view in Beta1 isn't interactive (meaning it is still read-only).  Changes you make in source-view, though, are updated immediately in design-view - which gives you a nice XAML-pad experience (and VS 2008 supports full XAML source intellisense with Silverlight 2 Beta1).

    For this blog post we aren't going to be using the Visual Studio XAML editor.  Instead we are going to create some classes that we'll use to represent a ChatSession and associated chat messages.  We'll then use Expression Blend to bind our UI controls against these.

    We'll start by adding a new class called "ChatMessage" that defines two public properties:

    We'll then create a class called "ChatSession" that represents a chat session.

    The ChatSession class above has three public properties.  The first two properties represent the remote user name and avatar on the other end of the chat. 

    The third property is a collection of the past chat messages.  Notice that its type is not a List<ChatMessage> collection - but rather an ObservableCollection<ChatMessage> collection.  ObservableCollection might not be a familiar class to you if you are coming from an ASP.NET background - but those coming from a Windows Forms or WPF background are probably familiar with it.  Basically it is a generic collection class that raises change notification events when items are added/removed from it (or when items that implement INotifyPropertyChanged within it have their properties changed).  This comes in very handy when doing data-binding - since UI controls can use these notifications to know to automatically refresh their values without a developer having to write any code to explicitly do so.

    The ChatSession class then has two public methods - one whose job it is to connect to a chat server, and another whose job it is to send messages to the chat server.  For the sake of simplicity (and because I don't have a chat server) I've just faked out these methods.  In real-life we would probably use the network sockets implementation built-into Silverlight to connect to a remote chat server.

    The ChatSession class implements the INotifyPropertyChanged interface - which means it exposes a public "PropertyChanged" event.  We'll raise this event within our class when we change the properties on it.  This will enable listeners (for example: controls data-binding against it) to be notified when changes in the property values occur - which allows them them to rebind the values.

    Implementing Fake Data for Design-time Databinding

    From a purely functional perspective, the above code is all we need in order to implement our chat client.  To help improve the design-time experience in Blend, though, we'll also add a constructor that checks whether we are in runtime or design-time mode, and loads up our ChatSession object with "fake data" if it is being hosted in a designer:

    We'll see in a moment how this helps make it easier to visualize data-bound data in the designer.

    Building our Chat Application: Wiring up UI using DataBinding in Expression Blend

    Now that we have the ChatMessage and ChatSession objects defined, we can use them within Expression Blend to databind our UI controls. 

    I introduced how data-binding in Silverlight and WPF work in my Tutorial 5: Using Databinding and the ListBox control to display list data post from last week.  In today's post we'll be using Expression Blend to wire-up the databinding expressions instead of manually typing them.  We'll start by using the "Data" panel under the "Project" panel inside Blend:

    We'll click the "+ CLR Object" link in the "Data" panel to pull up a dialog that allows us to pick any .NET object to databind our UI controls against.  We'll use it to select the "ChatSession" object we just created:

    This will cause the ChatSession object to be added to our Data tray, and expose its properties (and sub-properties) in a tree-view:

    We can then bind any of our UI controls in the design-view to these properties by selecting them in the "Data" tray and dragging/dropping them onto the UI controls in the design-surface.  For example, we could replace the static "ScottGu" label with a {Binding RemoteUserName} databinding expression by dragging the RemoteUserName property from the Data tray on top of it:

    When we drop the "RemoteUserName" property onto the TextBlock, Blend will prompt us like above to either Bind the property to the existing TextBlock, or create a new Control to represent the property.  If we choose the default (bind to the existing control), Blend will then ask us what type of binding expression we want:

    We'll indicate we want a "OneWay" binding to the TextBlock's "Text" property.  When we click ok our control will be updated with a {Binding RemoteUserName} expression for its "Text" property. 

    We can repeat this drag/drop interaction for the Image control (with the RemoteAvatarUrl property) as well as the ListBox (with the MessageHistory collection property).  When we are done Blend will show our "dummy" data within the design-view surface like so:

    You might be wondering about the contents of the ListBox - why do the items show up as "ChatClient.ChatMessage"?  Well, right now the ListBox is binding to a collection of custom .NET objects and the "ChatClient.ChatMessage" string is the value being returned by calling "ToString()" on the ChatMessage instances.

    We can modify this to look better by adding a <DataTemplate> to the ListBox like so:

    Note: For the Blend 2.5 March preview release of Blend you have to define datatemplates in source-view.  In future preview releases you'll be able to use the designer to define them as well.  This feature is already available for WPF projects if you want to play with it: As a designer, you can interactively create the look of data with a full WYSIWYG experience. Just create a WPF project to try it out.  

    Doing this will then cause our UI to look like below at design-time:

    The benefit of having this "dummy data" show up at design-time is that it enables us to get a much better sense of what the UI experience will be like at runtime, and allow a designer (or a developer) to easily work on the UI without having to wait on the rest of the application to be built.

    Building our Chat Application: Updating our Button and ListBox UI using Styles and Control Templates

    One of the things I talked about in my Part 7: Using Control Templates to Customize a Control's Look and Feel Digg tutorial was about how Silverlight and WPF allow developers and designers to completely customize the look and feel of controls.  This provides a tremendous amount of flexibility to sculpt the UI of an application and create exactly the user experience desired.

    We could use the Control Template feature of Silverlight and WPF to customize the Send button and the ListBox structure in our chat application above to have a little more of a polished look and feel.  We could do this by creating "MessageHistory" and "SendButton" style resources that we store within the App.xaml file of our project.  Each of these style objects would then have a Control Template that overrides the look and feel of the control and changes its visual structure.

    Note: the Blend 2.5 March preview release of Blend you have to define control templates in source-view.  In future preview releases you'll be able to use the designer to define them as well.  This feature is already available for WPF projects if you want to play with it - just create a WPF project to try it out.  

    For example, the below ListBox Control Template could be used to remove the outer double border around the ListBox control and define a "flat" look with just a scroll-bar for the list container:

     

    Applying this template to our ListBox would then cause it to render with a much flatter look around the edges:

    We could get even fancier with our Button control template, and not only define a custom button shape - but also define various story-board animations to apply to the shape to provide custom UI behavior when it is in "MouseOver", "Pressed", or "Normal" states (these can all be encapsulated within the Style definition - meaning the page developer never has to-do anything to enable them):

    Once we have our "MessageHistory" and "SendButton" style objects defined, it is easy to use Expression Blend to apply them to controls on the design-surface.  

    Clicking on the "Resources" tool Window within Expression Blend lists all of the resource locations within our project:

    We can expand the "App.xaml" node to see the styles that are available for us to use within it.  To apply a particular style to a control on the page, we can simply drag/drop it onto the control.  For example, here is what our send button control looks like before we apply the "SendButton" Style:

    Dragging/dropping the SendButton style onto it will change it to our custom Control Template shape/structure:

    Because our "SendButton" style has state animations defined within it, the button will change at runtime depending on how the end user interacts with it. 

    By default the button will look like this:

    When an end user moves the mouse over it the balloon will subtlety change to a lighter color:

    When in the push down state the button will depress and its shadow will disappear:

    When released the button will pop back up.

    These subtle animations and interactivity gestures can add some really nice polish to an application.  Best of all, a designer can build and customize this functionality entirely themselves - the developer implementing the page functionality does not have to be involved nor write any code to enable it.

    In future preview releases of Expression Blend 2.5 designers will be able to not only define the shape/structure of this button - but also define all of the animation transitions for it - entirely using the design surface (no source editing or coding required).

    Implementing our our Chat functionality

    Now that our we've used Expression Blend to databind our control UI, and to tweak and polish the interactivity of the UI, let's go back to Visual Studio and write the code that implements the UI chat behavior functionality.

    Specifically, we'll add the below code to our Page constructor to initiate a ChatSession with a remote user, and then handle the scenario where the "Send" button is clicked to send a message to the remote user.

    When we add the above code and re-run the application we'll see that our UI now databinds to a ChatSession with "ScottGu" as the RemoteUserName (instead of the fake design-time data we defined earlier).  When we type text in the message TextBox and click the customized Send button our Listbox is automatically updated with the chat history:

     

    Why did the ListBox automatically update you might wonder?  It did this because the ListBox was data-bound to the ChatSession.MessageHistory property - which is of type ObservableCollection<ChatMessage>.  This means the collection automatically raises change notifications when a new ChatMessage object is added to it, which the ListBox then detects and uses to update itself with the new data. 

    No explicit code was required by us to have the ListBox reflect these changes.  The clean view/model binding architecture of our application automatically handled it for us.

    Summary

    I've only shown a few of the features supported with Expression Blend.  All of these features work for both Silverlight and WPF projects.  All of them will also ship in the upcoming Expression Blend 2.5 March preview - which will be available to download (for free) shortly. 

    I think you'll find that Visual Studio 2008 and Expression Studio bring a tremendous amount of productivity and power for building great RIA solutions.  Developers and designers can use them together when working on the same projects (and avoid accidentally stepping on each other).  You can also easily have both open together on one machine and edit a single application with them at the same time.

    I'll be blogging more about Expression Blend (and a bunch of features in it that I haven't covered yet) once it is available for download.  I'll also post the above simple chat example for download once Silverlight 2 Beta1 ships so that you can open and run the code yourself.

    <Download Code> Click here to download a completed version of this sample. </Download Code>

    Hope this helps,

    Scott

  • First Look at Silverlight 2

    Last September we shipped Silverlight 1.0 for Mac and Windows, and announced our plans to deliver Silverlight on Linux.  Silverlight 1.0 focused on enabling rich media scenarios in a browser, and supports a JavaScript/AJAX programming model.

    We are shortly going to release the first public beta of Silverlight 2, which will be a major update of Silverlight that focuses on enabling Rich Internet Application (RIA) development.  This is the first of several blog posts I'll be doing over the weeks and months ahead that talk in more depth about it.

    Cross Platform / Cross Browser .NET Development

    Silverlight 2 includes a cross-platform, cross-browser version of the .NET Framework, and enables a rich .NET development platform that runs in the browser.  Developers can write Silverlight applications using any .NET language (including VB, C#, JavaScript, IronPython and IronRuby).  We will ship Visual Studio 2008 and Expression Studio tool support that enables great developer / designer workflow and integration when building Silverlight applications.

    This upcoming Beta1 release of Silverlight 2 provides a rich set of features for RIA application development.  These include:

    • WPF UI Framework: Silverlight 2 includes a rich WPF-based UI framework that makes building rich Web applications much easier.  In includes a powerful graphics and animation engine, as well as rich support for higher-level UI capabilities like controls, layout management, data-binding, styles, and template skinning.  The WPF UI Framework in Silverlight is a compatible subset of the WPF UI Framework features in the full .NET Framework, and enables developers to re-use skills, controls, code and content to build both rich cross browser web applications, as well as rich desktop Windows applications.
    • Rich Controls: Silverlight 2 includes a rich set of built-in controls that developers and designers can use to quickly build applications.  This upcoming Beta1 release includes core form controls (TextBox, CheckBox, RadioButton, etc), built-in layout management panels (StackPanel, Grid, Panel, etc), common functionality controls (Slider, ScrollViewer, Calendar, DatePicker, etc), and data manipulation controls (DataGrid, ListBox, etc).  The built-in controls support a rich control templating model, which enables developers and designers to collaborate together to build highly polished solutions.
    • Rich Networking Support: Silverlight 2 includes rich networking support.  It includes out of the box support for calling REST, WS*/SOAP, POX, RSS, and standard HTTP services.  It supports cross domain network access (enabling Silverlight clients to directly access resources and data from resources on the web).  Beta1 also includes built-in sockets networking support.

    • Rich Base Class Library: Silverlight 2 includes a rich .NET base class library of functionality (collections, IO, generics, threading, globalization, XML, local storage, etc).  It includes rich APIs that enable HTML DOM/JavaScript integration with .NET code.  It also includes LINQ and LINQ to XML library support (enabling easy transformation and querying of data), as well as local data caching and storage support.  The .NET APIs in Silverlight are a compatible subset of the full .NET Framework.

    Silverlight 2 does not require the .NET Framework to be installed on a computer in order to run.  The Silverlight setup download includes everything necessary to enable all the above features (and more we'll be talking about shortly) on a vanilla Mac OSX or Windows machine. 

    The Beta1 release of Silverlight 2 is 4.3MB in size, and takes 4-10 seconds to install on a machine that doesn't already have it.  Once Silverlight 2 is installed you can browse the Web and automatically run rich Silverlight applications within your browser of choice (IE, FireFox, Safari, etc).

    Silverlight 2 Tutorials: Building A Simple Digg Client

    To help people come up to speed with Silverlight 2, I wrote a Silverlight application and put together a series of step by step tutorials that drill into and explain the different programming concepts behind it (controls, layout management, networking, data-binding, styles, user controls, templates, etc). I also added a tutorial post that demonstrates how to migrate the application outside of the browser and make it a desktop application using WPF and the full .NET Framework. 

    Below are the pointers to the 8 tutorials I've put together:

    The application I've built the tutorials around is a simple search front end to the popular Digg.com site, and allows users to type in search topics and browse Digg stories that match them. 

         <Download Code> Click here to download a completed version of this Digg client sample. </Download Code>

    All of the UI in the application is built using Silverlight's WPF framework.  The application uses the Silverlight networking stack and cross-domain access support to query the Digg REST API directly, and uses LINQ and LINQ to XML to query/transform the returned data into DiggStory objects that I databind the UI against:

    The application supports a master/details data interaction model that allows users to select stories from the search list and quickly drill into more details about them.  A user can jump to the Digg article directly from the details form, or close it and pick another story to drill into:

    The entire application is implemented in about 35 lines of C# code and 75 lines of XAML page/user-control markup.  It only uses controls and libraries built-into Silverlight.

        <Download Code> Click here to download a completed version of this Digg client sample. </Download Code>

    If you have used WPF before the UI concepts I discuss in the tutorial series will all be very familiar.  If you haven't used WPF before, the tutorials should provide a good overview of the fundamental programming concepts in it, and hopefully provide you with the basic knowledge necessary to start building Silverlight 2 applications with VS 2008 when Beta1 comes out.

    Hope this helps,

    Scott