Shannon Braun's Weblog

Last week Jeff Brand (Microsoft DPE), Rocky Lhotka and I sat down to discuss the good and bad of the Mix 08 conference.  You can get the podcast from Jeff Brand's blog.

You can find the Silverlight Beta 1 control demos here.  Including some controls we don't see in WPF like the DataGrid, Calendar and Hyperlink button.

Expression Blend is great for doing some things that are more complex in Visual Studio when authoring xaml... some of those things include Transformations and  Animations.  The Expression site has a entire area dedicated to helping people get up to speed on the Expression suite tools.

Nerd + Art was one of the presentations at Mix 08 that was presented by Identify Mine.  It was to help the artiest release their inner nerd.  It was a group of 10 snippets that could be used in Visual Studio to help artists add certain capabilities to their working models / prototypes of WPF applications.  Those same snippets are also pretty helpful for someone getting up and going on WPF.

Here is the presentation that I did today at the Microsoft office in Minneapolis today.  It was a segment on real world WPF.  It discusses how WPF isn't just about the cool North Face demo or the New York Times Reader, but there is advantages for using it in every day enterprise applications.  The presentation and source can be found below.  The demo's include sample WPF implementations for Authorization, Application Activity Monitoring and Highlighted Search similar to what you experience when you search in Outlook.  None of the examples are currently at production quality, but with a little polish they could get there.

Authorization UI

Demonstrates how to use attached properties on different UI elements to change whether they are hidden or disabled based on the users authorization for a specific UI Element.  The authorization UI is mocked up, but should give you an idea of how you can extend any UI Element with property metadata to help in the UI authorization scenario.

Application Activity Monitoring

Demonstrates how you can implement monitoring of the mouse and keyboard to determine if you should disable the UI of the application... in this implementation it will blur after 5 seconds of no activity.  This implementation still needs some work... you can still edit data after the screen has blurred and there is no login dialog which would pop up after the blur has taken place so you can resume work.

Highlighted Search

Similar to how Microsoft Outlook highlights the search term as you type, this implementation demonstrates a simplified version using a listbox.  There is a bunch of sample data... you can test it out with up to 10,000 records.  If you want to generate more seed data, you can use the seed data api that I put together.

This isn't a summary of all the announcements, just a couple of one that I thought were notable.  If you want to see the actual keynote or any of the sessions they have all been recorded and are up on the Mix08 site. Some of the things that I found interesting included:

IE 8 Beta 1 is Available 

They have added some interesting features and extensibility mechanism to work with content on the web and are working to abide by the W3C standards for browsers.  Here is a recap of what will be in IE8

• CSS Compliance
• Start of implementing HTML 5
• Web Slices
• Activities

You can find more about the last two features here.

Silverlight 2.0 Beta 1 Released 

They also announced that Silverlight 2.0 Beta 1 was released.  Which has added the awaited support for a number of basic controls.  In the previous release the target was around rich media and a basic subset of xaml.

Blend 2.0 Beta 1 is available

Expression Blend Beta 2 was released.

Coolest Application Built on Silverlight 2.0

One of the most impressive demos of the keynote was the launch of Hard Rock Cafe's memorabilia collection based on Silverlight and SeaDragon.

Before I began working with WPF I couldn't believe that Microsoft hadn't supplied a basic data grid.  Once I began working with WPF in depth I thought... why are people complaining so much about not having a data grid, WPF gives you the power to build your own relatively easily.
Here is some of the insight and considerations for making a selection between a Third Party Data Grid and the WPF GridView.  I looked at both the Xceed DataGrid for WPF and Infragistic’s xamGrid from a feature prospective and this is what I have determined.

Disadvantages of using third party grid:
•    Having to deploy another dependency for the application.
•    If other applications reuse the development artifacts (we are using a composite application approach where modules could be consumed by other applications) they will also have to take on the dependency.
•    UI Designers that want to model UI will have to take it as a dependency.
•    Third party control API may not be consistent with the WPF framework in the way it implements styling, templating or other WPF concepts.

Advantages of using third party grid:

No development required to support common grid scenarios that are not supported with the current WPF grid.

The typical grid scenarios for Data Grids would include:
•    Sorting and Sorting Indicators
•    Multi-field sorting
•    Grid line support
•    Grouping
•    Alternate row highlighting
•    Auto Fit for column for expanding columns to fill available space
•    Grouping with multilevel support
•    Rich in place editing (events to support Row / Column / Cell activity or validation)
•    Auto select of cell editor by data type
•    Unbound columns to enable displaying of calculated data
•    Nesting support
•    Row Height based on largest item

If you consider the above features I think it makes it a lot easier to determine when a third party data grid should be considered.

GridView – The following are fairly easy to implement in the current WPF GridView and examples are found on the Internet.
•    Sorting and Sorting Indicators
•    Multi-field sorting (I know I saw this somewhere, but can't find the link)
•    Grid lines support (Example1, Example2)
•    Grouping (Example1, Example2)
•    Alternate row highlighting (Example1, Example2)
•    Auto Fit for column for expanding columns to fill available space

Third Party Data Grid - As soon as you cross into needing support for one or more of the following, a third party data grid makes more sense because of the increased complexity to implement these types of features in WPF with an average development team.
•    Grouping with multilevel support
•    Rich in place editing (events to support Row / Column / Cell activity or validation)
•    Auto select of cell editor by data type
•    Unbound columns to enable displaying of calculated data
•    Nesting support
•    Row Height based on largest item

Jeff Brand (Microsoft Developer Evangelist) and I sat down the other day and recorded a pod cast (download) that discusses building business applications using WPF.  If you want some insight into building business applications with WPF, check it out. We talked about decisions around why to use a WPF for a business application, challenges of getting up to speed on WPF, Workflow with designers and a little bit about building enterprise composite applications.

I registered for MIX 08, so I just thought I would show off my new bling.  This will be the first year I have attended MIX... I decided it would be a good opportunity to see how others are using WPF.  I have always been a huge UI advocate and had an interest in creating refined user interfaces.  The power of WPF has really made this substantially less complex then the hoops that you had to jump through before.

However, with this additional power it really helps to have a UI Designer involved to make the UI's look more professional... this also introduces other issues... from a workflow and collaboration perspective during the software development lifecycle.

If a UI Designer isn't involved developers can always use the default styles that are provided with the WPF controls, but then you just get an old fashioned Windows application look and feel.  Many developers struggled with usability and behavior not to mention color coordination, style and layout.  With this additional freedom how can we use it in a responsible fashion.  Most projects don't include UI Designers to help guide us.

There is a number of presentations that I am interested in hearing what they have to say about designers and their role in the development lifecycle.

How Design Impacts the Bottom Line
Audience(s): Business, Creative

Is design really worth the investment? Or should it be the first item to cut when time and money are tight? Hear from businesses about their experiences around the payoff for implementing design.

Applications = Designers + Developers
Audience(s): Creative, Technical

Behind the scenes, great applications feature not only clever code, but they also expose a great user experience and design. We illustrate the workflow possible using the Microsoft Expression tools and Microsoft Visual Studio to create great applications.

I put together an example of how to derive from a base class for a WPF user control when the base class is found in the local assembly or a reference one.  If you want more detail on how to do the derivation you can read my previous post.

I had some trouble getting this to work, so I thought others may benefit from it.  Here is the scenario... we have a bunch of control templates and styles we want to define for our application... with the possibility at some point we may want to modify aspects of what the application looks like.  The modification would be handled by replacing the dll that held the style of the application.  I had read in the documentation that it was possible do embed a ResourceDictionary in another assembly and then reference the assembly using merged dictionaries and an URI.

The syntax to identify the merged dictionary was simple enough... and I added it to my app.xaml.

   1: <Application x:Class="WPFThemeSeperation.App"

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

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

   4:     StartupUri="Window1.xaml"

   5:     >

   6:     <Application.Resources>

   7:         

   8:         <ResourceDictionary>

   9:             <ResourceDictionary.MergedDictionaries>

  10:                 <ResourceDictionary Source="pack://application:,,,/OtherTheme;component/skin.xaml"></ResourceDictionary>

  11:                      </ResourceDictionary.MergedDictionaries>

  12:               </ResourceDictionary> 

  13:     </Application.Resources>

  14: </Application>

The above configuration indicates that I want to use an assembly called OtherTheme... which is the name of the a dll with out the .dll extension... and in that assembly called OtherTheme I have skin.xaml in the root of the project.

I then created a class library project which was added to my solution.  Clicked on my newly added project and selected Add -> New Item... at that point I selected a ResourceDictionary (WPF) from the dialog and named it skin.xaml... which caused it to add some references to the project. I modified the skin.xaml file to create a new style for my buttons (shown below):

   1: <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

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

   3:     >

   4:     <Style TargetType="{x:Type Button}">

   5:         <Setter Property="Foreground" Value="white"/>

   6:         <Setter Property="Margin" Value="1"/>

   7:         <Setter Property="Template">

   8:             <Setter.Value>

   9:                 <ControlTemplate TargetType="{x:Type Button}">

  10:                     <Grid>

  11:                         <Rectangle x:Name="GelBackground" Opacity="1" RadiusX="9" RadiusY="9"

  12:                            Fill="Red" StrokeThickness="0.35">

  13:                             <Rectangle.Stroke>

  14:                                 <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

  15:                                     <GradientStop Color="White" Offset="0"></GradientStop>

  16:                                     <GradientStop Color="#666666" Offset="1">

  17:                                     </GradientStop>

  18:  

  19:                                 </LinearGradientBrush>

  20:                             </Rectangle.Stroke>

  21:                         </Rectangle>

  22:                         <Rectangle x:Name="GelShine" Margin="2,2,2,0" VerticalAlignment="Top"

  23:                            RadiusX="6" RadiusY="6" Opacity="1" Stroke="Transparent" Height="15px">

  24:                             <Rectangle.Fill>

  25:                                 <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

  26:                                     <GradientStop Color="#ccffffff" Offset="0"/>

  27:                                     <GradientStop Color="Transparent" Offset="1"/>

  28:                                 </LinearGradientBrush>

  29:                             </Rectangle.Fill>

  30:                         </Rectangle>

  31:                         <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>

  32:                     </Grid>

  33:                     <ControlTemplate.Triggers>

  34:                         <Trigger Property="IsMouseOver" Value="True">

  35:                             <Setter Property="Fill" TargetName="GelBackground">

  36:                                 <Setter.Value>

  37:                                     <RadialGradientBrush>

  38:                                         <GradientStop Color="Lime" Offset="0"/>

  39:                                         <GradientStop Color="DarkGreen" Offset="1"/>

  40:  

  41:                                     </RadialGradientBrush>

  42:                                 </Setter.Value>

  43:                             </Setter>

  44:                         </Trigger>

  45:                         <Trigger Property="IsPressed" Value="true">

  46:                             <Setter Property="Fill" TargetName="GelBackground">

  47:                                 <Setter.Value>

  48:                                     <RadialGradientBrush>

  49:                                         <GradientStop Color="#ffcc00" Offset="0"/>

  50:                                         <GradientStop Color="#cc9900" Offset="1"/>

  51:                                     </RadialGradientBrush>

  52:                                 </Setter.Value>

  53:                             </Setter>

  54:                         </Trigger>

  55:                     </ControlTemplate.Triggers>

  56:                 </ControlTemplate>

  57:             </Setter.Value>

  58:         </Setter>

  59:         <Style.Triggers>

  60:             <Trigger Property="IsMouseOver" Value="True">

  61:                 <Setter Property="Foreground" Value="Black"/>

  62:             </Trigger>

  63:             <Trigger Property="IsPressed" Value="True">

  64:                 <Setter Property="Foreground" Value="Black"/>

  65:             </Trigger>

  66:         </Style.Triggers>

  67:     </Style>

  68: </ResourceDictionary>

When I ran the application... I got the following error:

System.Windows.Markup.XamlParseException was unhandled
Message="'pack://application:,,,/OtherTheme;component/skin.xaml' value cannot be assigned to property 'Source' of object 'System.Windows.ResourceDictionary'. Cannot locate resource 'skin.xaml'. Error at object 'System.Windows.ResourceDictionary' in markup file 'WPFThemeSeperation;component/app.xaml' Line 10 Position 25."

Hmmm... I knew it was in there... but it wasn't finding it.  I thought it might be a path issue so I popped open Reflector and looked in the binary to see if it was compiled to a resource... nothing was there.

One thing I noticed in the documentation was a reference to marking the resource with a Build Action "Resource"... the problem was that the Resource option wasn't available when looking in the Build Action... it defaulted to page when it was added.  I assumed that when the ResourceDictionary file was added through the New Item menu it had handled the modification of the project that would expose "Resource"  as an option... after all it brought in a couple of references automatically.  That assumption was not correct... and this was the missing piece to the puzzle.

Modifying the Project File

You need to make the following modifications to the class library project that hosts your styling. Add line 2 as shown below which will import the .Net 3.0 build targets:

   1: <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />

   2: <Import Project="$(MSBuildBinPath)\Microsoft.WinFX.targets" />

Also modify the build action for your skin.xaml file to "Resource"... as shown below:

   1: <ItemGroup>

   2:   <Resource Include="skin.xaml" />

   3: </ItemGroup>

Now when you build you should get a resource compiled into the

Note: If you change the name of the resource file at a later time, make sure you Clean the Solution and then Rebuild the Solution... both options are found on the context menu of the Solution in the Solution Explorer, otherwise you will get an error indicating that your xaml file can not be found.

Another Note... this isn't the most flexiable approach. We took a very simple stance.... we would not allow our users to change the look of the application and we didn't want to have to recompile the entire application if we decided to change the style of the application.  This allows us to compile a seperate "skin" dll and drop it in the application directory at anytime to change the way the application looks. 

Looking for a sample that implements all of the latest Microsoft technologies in one package.... Including:

Windows Workflow

Windows Presentation Foundation

Windows Communication Foundation

Vista Sidebar Gadgets

Windows PowerShell

Linq

ASP.NET 2.0 AJAX Extensions

Mobile Device Development

You can find all of this in the DinnerNow.NET reference application.

I missed the MVP Summit last week to attend WPF training.  I have to admit I was initially pretty disappointed that I was going to spend last week in WPF training, and miss out seeing some old friends at the MVP Summit.  But since I just started with a new client and needed to get up to speed on WPF I decided to forgo the MVP Summit.

It turned out the training was done by Robbie Ingebretsen, who was a Program Manager on the WPF team, responsiable for many of the controls that were built for WPF.  It ended up being a great week of training and I learned alot.  If your interested in WPF training, take a look at Identity Mine where Robbie works.

There is some pretty cool applications being built in WPF.  I really like Denounce... Notescraps is also pretty cool.  You can find a list of applications written in WPF on Channel9.

Looking for some really good WPF examples.  The two that I like the most are Kevin's Bag O Tricks and UnFold (Diagraming Tool).

Spending alot of time in WPF lately... today I ran into something interesting.  There is no Application.ThreadException in the WPF Application object.

It looks like the only other option to catch exceptions at the edge of the application is to use AppDomain.UnhandledException.