Dan Wahlin's WebLog

DevConnections Conference Code and Slides

dwahlin — Tue, 10 Nov 2009 08:48:00 GMT

I’m in Las Vegas this week for the DevConnections conference and wanted to get the slides and code posted for the talks as I give them. This time around I’m talking about Silverlight (including a full-day workshop), the new Microsoft Ajax Library script loader and template features and RIA Services.

Passing Multiple Records to a Stored Procedure in SQL Server

dwahlin — Wed, 30 Sep 2009 18:51:12 GMT

There are so many different ways to work with data that it can make your head spin. Regardless of the technology, one thing I always try to do when working with databases is minimize the number of calls that are made. I use ORM frameworks a lot so I have to make sure that my code doesn’t end up calling the database a ton and being overly “chatty”.

My company is currently working on a large Silverlight 3 application for a customer and have a requirement to allow CSV file uploads through the application. That’s pretty straightforward to do with Silverlight but in looking through the CSV file there can be 1000s of records and there is a lot of custom functionality around each record. Initially I was going to handle the business rules and insertion for each row individually. However, once I saw how many rows were involved I backed off my initial approach since that would mean a single file upload could trigger thousands and thousands of calls to the database which certainly isn’t efficient. Instead of going that route I decided it would be better to pass all of the rows into a stored procedure and let it handle everything. That way I can make a single database connection yet handle inserting (and updating and deleting based upon the business rules) many records.

So how can you pass multiple records into a stored procedure? Back in “the day” I’d pass in delimited strings and then parse them. Although that technique probably wasn’t the most efficient, it got the job done. With SQL Server 2005 and higher we have access to a much more efficient technique due to the availability of XQuery. The current project I’m working on relies on SQL Server 2005 behind the scenes so that’s what I’ll focus on here. Note that SQL Server 2008 allows .NET DataTable objects to be passed when using table value parameters as well in a stored procedure. See http://www.codeproject.com/KB/database/sqlserver2008.aspx for an overview of the table value parameter functionality.

For the import I can serialize the list of records to XML and then pass them into a stored procedure. It appears that you can pass an XmlDocument object from .NET if the stored procedure takes an XML input parameter type. However, I never got it to work properly doing that so I pass a string containing serialized XML data and then load it into the XML data type. The stored procedure can then use XQuery to convert the XML into actual rows. Here’s some code that handles parsing a flat file, converting the data into a List<JobMaterialImport>, serializing the list into XML and then passing the serialized XML data to a stored procedure named ImportJobMaterials.

public List<ImportJobMaterialsResult> ImportJobMaterials(int jobID, Stream stream, string coNumber, string coDesc, string xmlMapFile)
{
    //Convert flat file to List<JobMaterialImport> using converter and XML mapping file
    //Mapping file passed from FlatFileHandler.ashx in web project
    FlatFileToObjectConverter<JobMaterialImport> converter = new FlatFileToObjectConverter<JobMaterialImport>(stream, xmlMapFile);
    List<JobMaterialImport> imports = converter.ConvertToList();
    imports = imports.Take(imports.Count - 2).ToList(); //last rows are bogus in flat-file

    //Generate XML and pass to sproc
    using (StringWriter sw = new StringWriter())
    {
        XmlSerializer xs = new XmlSerializer(typeof(List<JobMaterialImport>));
        xs.Serialize(sw, imports);
        try
        {
            //Pass materials into sproc
            string xml = sw.ToString().Replace("utf-16", "utf-8");
            return this.DataContext.ImportJobMaterials(xml, jobID, coNumber, coDesc).ToList();            
        }
        catch (Exception exp)
        {
            Logger.Log("Error in JobManagementRepository.ImportJobMaterials", exp);
        }
    }
    return null;
}

The XML that’s generated from the code above looks like the following. Security Note: We’ll assume that appropriate measures have been taken to clean the data and ensure it doesn’t contain any bad stuff related to injection attacks. That’s especially important if you’ll be running any dynamic SQL in your stored procedure. I’m not, but I thought I’d be a good citizen and point it out…always sanitize your data with some Clorox before using it. :-)

<ArrayOfJobMaterialImport xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
  <JobMaterialImport>
    <Area>BUILDING A</Area>
    <Phase>LIGHTING</Phase>
    <WorkCode>0</WorkCode>
    <WorkCodeTitle>Manually Assigned</WorkCodeTitle>
    <Description>4x1 1/2in. SQ BOX COMB KO</Description>
    <Quantity>2</Quantity>
    <TotalHours>10.46</TotalHours>
  </JobMaterialImport>
  <JobMaterialImport>
    <Area>BUILDING A</Area>
    <Phase>LIGHTING</Phase>
    <WorkCode>0</WorkCode>
    <WorkCodeTitle>Manually Assigned</WorkCodeTitle>
    <Description>#8x   3/4 P/H SELF-TAP SCREW</Description>
    <Quantity>4</Quantity>
    <TotalHours>0.28</TotalHours>
  </JobMaterialImport>
  <JobMaterialImport>
    <Area>BUILDING A</Area>
    <Phase>LIGHTING</Phase>
    <WorkCode>605</WorkCode>
    <WorkCodeTitle>Wiring and System Devices</WorkCodeTitle>
    <Description>1G TGL SWITCH PLATE - PLASTIC IVY</Description>
    <Quantity>2</Quantity>
    <TotalHours>0.89</TotalHours>
  </JobMaterialImport>
</ArrayOfJobMaterialImport>

Here’s what the stored procedure looks like:

CREATE PROCEDURE [ImportJobMaterials]
    @JobMaterialsXml AS VARCHAR(MAX),
    @JobID AS INT,
    @ChangeOrderNumber AS VARCHAR(10) = NULL,
    @ChangeOrderDescription AS VARCHAR(100) = NULL
AS
    BEGIN
        DECLARE @XML AS XML
        
        DECLARE @MaterialsTable TABLE
        (
            ID INT IDENTITY(1,1),
            Area VARCHAR(250),
            Phase VARCHAR(250),
            WorkCodeID INT,
            WorkCodeTitle VARCHAR(250),
            MaterialTitle VARCHAR(250),
            Quantity DECIMAL(18,2),
            TotalHours DECIMAL(18,2)
        )
        
        SELECT @XML = @JobMaterialsXml
        
        INSERT INTO @MaterialsTable (Area, Phase, WorkCodeID, WorkCodeTitle, MaterialTitle, Quantity, TotalHours)
        SELECT M.Item.query('./Area').value('.','VARCHAR(250)') Area,
               M.Item.query('./Phase').value('.','VARCHAR(250)') WorkCode,
               M.Item.query('./WorkCodeID').value('.','INT') WorkCodeID,
               M.Item.query('./WorkCodeTitle').value('.','VARCHAR(250)') WorkCodeTitle,
               M.Item.query('./MaterialTitle').value('.','VARCHAR(250)') MaterialTitle,    
               M.Item.query('./Quantity').value('.','DECIMAL(18,2)') Quantity,    
               M.Item.query('./TotalHours').value('.','DECIMAL(18,2)') TotalHours
        FROM @XML.nodes('/ArrayOfJobMaterialImport/JobMaterialImport') AS M(Item)
        
        --Process the data                    
    END

Once the XML data comes in it’s converted into an XML data type using SELECT @XML = @JobMaterialsXml syntax. The key part of the T-SQL code is the SELECT statement that grabs each value from the XML data type and looks for specific child nodes. If the child nodes were attributes instead then you would do something like M.Item.value(‘@attributeName’,’DBType’). Each JobMaterialImport node in the XML is located by the @XML.nodes(‘/ArrayOfJobMaterialImport/JobMaterialImport’) AS M(Item) code. What’s nice about this approach is that a single call can be made to the database yet 1000s of records can be processed. Not optimal for every situation, but exactly what I needed and fairly straightforward to use.

Cleaning Up the Disabled State of a Silverlight Control using Expression Blend

dwahlin — Thu, 27 Aug 2009 21:58:47 GMT

Silverlight provides the ultimate in flexibility when it comes to styling controls. If you don’t like how something looks you can tweak the template in a tool like Expression Blend quickly and easily and get something completely different. This post is geared towards those of you who may just be getting into Silverlight. My goal is to demonstrate how easy it is to change controls using a simple example that I just went through on a client application.

Being able to change a control’s template comes in handy when you don’t like the built-in style used by the framework. I’m working on a menu used in a client application and the disabled state of the HyperlinkButton control wasn’t looking too good. I thought the control looked butt ugly and was unreadable in the disabled state.…just sayin’. :-) I wasn’t looking to do anything fancy, but did want to make it obvious that the control was disabled while still making it easy for the end user to read the text. Here’s what the menu looked like when two HyperLinkButton controls were disabled using the built-in control template:

I don’t know about you, but “Edit Job” and “Job Plan” look pretty bad in my opinion. They’re definitely disabled (or possibly just plain dead), but they could both look better. As mentioned earlier, Silverlight allows any control to be changed by simply modifying the control’s template. The easiest way to do this is to use Expression Blend although you can do it in Visual Studio 2008 by hand as well. When the control to tweak is placed on the Blend design surface you can right-click on it and select Edit Template –> Edit a Copy:

From there you can give the new style a name, specify where it should be stored and then click OK:

Once the style is created you’ll be able to see it in Blend and locate an element named DisabledOverlay. In my case this was the culprit of the ugliness.

I ended up adjusting the Foreground color of the DisabledOverlay to black and set the Opacity to .4 using the properties window. However, doing that isn’t quite enough. The HyperlinkButton template places the DisabledOverlay TextBlock over the actual link content when the control is disabled. That’s why you get the semi blurry effect because two pieces of text are showing. I decided I wanted to hide the contentPresenter element when the control was disabled and just show the DisabledOverlay instead since it looked a lot cleaner. Fortunately that’s quite easy to do. Internally the control template uses the VisualStateManager to show and hide the DisabledOverlay. I went into the disabled state and changed it to hide the contentPresenter. That’s done by clicking on the States tab followed by the Disabled state:

Any changes you make to the contentPresenter are now tracked for that state so I clicked on contentPresenter and then set is Visibility property to Collapsed for the Disabled state:

Doing that modifies the disabled state. Here’s what the XAML looks like (I cleaned it up slightly). You can see that it causes the contentPresenter’s Visibility to be set to Collapsed:

<VisualState x:Name="Disabled">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="Visibility" Duration="0">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <Visibility>Visible</Visibility>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Visibility" Duration="0">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <Visibility>Collapsed</Visibility>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>
</VisualStateGroup>

From there I simply applied the style and newly created template to each HyperlinkButton control:

<HyperlinkButton Style="{StaticResource MenuHyperlinkButtonStyle}" Content="Job Plan" />

The end result is a menu that looks much better (in my opinion anyway) when the controls are disabled. Here’s a before and after image:

Before:

After:

This is a really simple example of modifying control templates but you can literally tweak any aspect of a control to get things looking just like you want them to look.

For more information about onsite, online and video training, mentoring and consulting solutions for .NET, SharePoint or Silverlight please visit http://www.thewahlingroup.com.

Requiring SSL For ASP.NET MVC Controllers

dwahlin — Tue, 25 Aug 2009 17:53:34 GMT

There are quite a few posts out there about switching to SSL when a user visits specific areas of a website but I figure the more the merrier so here’s yet another one.

My company is in the process of rolling out an ASP.NET MVC site for a client and specific actions and controllers need to have SSL running to ensure that no sensitive information gets out such as passwords and credit cards. If a user visits the site using http:// I need to switch them to https:// in certain parts of the website. Fortunately, ASP.NET MVC is quite extensible so it only took about 4-5 minutes to get a simple solution in place.

The easiest way I know of to switch to SSL for specific controllers or actions is to create an ActionFilterAttribute that handles redirecting them to an https:// address. Classes that derive from ActionFilterAttribute can be placed immediately above actions or even controllers in cases where the filter needs to apply to all actions in the controller. For my situation I needed entire controllers to be SSL-enabled so I placed the attribute above the controller class name.

Here’s an example of the simple RequiresSSL attribute class:

using System;
using System.Web;
using System.Web.Mvc;

namespace Helpers
{
    public class RequiresSSL : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            HttpRequestBase req = filterContext.HttpContext.Request;
            HttpResponseBase res = filterContext.HttpContext.Response;

            //Check if we're secure or not and if we're on the local box
            if (!req.IsSecureConnection && !req.IsLocal)
            {
                string url = req.Url.ToString().ToLower().Replace("http:", "https:");
                res.Redirect(url);
            }
            base.OnActionExecuting(filterContext);
        }
    }
}

A couple of people (thanks Jon and Phil) commented that the ToLower() call I had above could cause consequences with QueryString data. I could take ToString() out but some people may type “HTTP” instead of “http” which would mess up the replace call. For the current application I’m working on I only have integers being passed around on the QueryString so it didn’t affect me at all but it definitely could affect string data being passed. The suggestion was to use the UriBuilder class and after thinking it through more I agree. Here’s a different version of the RequiresSSL class that uses the UriBuilder class.

using System;
using System.Web;
using System.Web.Mvc;

namespace Helpers
{
    public class RequiresSSL : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            HttpRequestBase req = filterContext.HttpContext.Request;
            HttpResponseBase res = filterContext.HttpContext.Response;

            //Check if we're secure or not and if we're on the local box
            if (!req.IsSecureConnection && !req.IsLocal)
            {
                var builder = new UriBuilder(req.Url)
                {
                    Scheme = Uri.UriSchemeHttps,
                    Port = 443
                };
                res.Redirect(builder.Uri.ToString());
            }
            base.OnActionExecuting(filterContext);
        }
    }
}

The RequiresSSL attribute can then be placed above the appropriate action or controller:

[HandleError]
[RequiresSSL]
public class AccountController : Controller
{
    ...
}

If you’re running IIS7 and want to get a test SSL certificate setup for testing purposes check out my good friend Rob Bagby’s excellent post on the subject.

Creating a Silverlight DataContext Proxy to Simplify Data Binding in Nested Controls

dwahlin — Fri, 21 Aug 2009 06:37:53 GMT

Data binding is one of my favorite features and something that I use a lot while building Silverlight applications. Silverlight makes it really easy to bind data to different controls and move data from controls back into the original bound object without having to write any C# or VB code in many cases. Here’s an example of binding a ComboBox control to an object that defines a property named Branches:

<ComboBox 
    ItemsSource="{Binding Branches}" 
    DisplayMemberPath="Title"/>

This code binds the ItemsSource property to the DataContext object’s Branches property and displays the Branch object’s Title property in the ComboBox. The DataContext could be assigned directly to the ComboBox through code or could be assigned to a parent object. If it’s defined on a parent then all children have access to the object.

This works great as long as the ComboBox has access to the Branches property as shown in Figure 1 below (note that the Page shown in the figure is a Silverlight Page class or User Control not a web page). However, figure 2 demonstrates a problem that can occur as the ComboBox control’s DataContext is changed to something other than the ViewModel object that defines the Branches property. In this example a DataGrid binds to the Jobs property of the ViewModel and each row’s DataContext is a Job type. The Job type doesn’t have a Branches property (the ViewModel object does obviously) so the ComboBox no longer has access to it for data binding. Or does it?

Figure 1 – All Systems go for binding	Figure 2 – Houston, we have a problem

Using a Static Resource When Binding Nested Controls

While the ComboBox can’t bind to the Branches property using the standard {Binding Branches} syntax when it’s nested in something like a DataGrid (or ListBox or another items control) it can still get to the ViewModel object’s Branches property with a few minor changes. The first way that this little dilemma can be solved is to write code that assigns the ViewModel object’s Branches collection to each ComboBox in the LoadingRow event of the DataGrid. This works but who wants to write code when you don’t have to? The second way is to create a mini ViewModel class that each row binds to that references the Branches collection. That’s also an option, but there’s a “codeless” way to do it as well that’s quite easy. If the ViewModel object is defined in the Resources section of the Page or UserControl you can get to it using its key name directly in XAML. Here’s an example of defining a the ViewModel object declaratively in XAML:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:vm="clr-namespace:JobPlan.ViewModel;assembly=JobPlan.ViewModel"
    x:Class="JobPlan.View.UserControls.JobEdit">
    <UserControl.Resources>
        <vm:ViewModel x:Key="ViewModel" />
    </UserControl.Resources>
    
    ...
    
</UserControl>

A ComboBox control within a DataGrid row (or nested in another type of control) can get to the ViewModel object’s Branches property using the following binding syntax:

<ComboBox 
    ItemsSource="{Binding Source={StaticResource ViewModel},Path=Branches}" 
    DisplayMemberPath="Title"/>

This XAML code tells the ComboBox control to access a statically defined resource with a key of “ViewModel” and then find a property of that resource object named Branches. Pretty cool because you don’t have to write any C# or VB code at all by using this solution which is great if you’re dealing with a lot of nested ComboBox controls. For developers that don’t like defining their ViewModel objects in XAML you can always use an intermediary ViewModel lookup object when things need to be as loosely coupled as possible.

Now that you see how nested objects can get to properties defined at higher levels I can cover the main point of this post. Everything mentioned to this point works great out of the box especially if you want to avoid writing code as much as possible. However, there’s one final problem where the StaticResource binding trick won’t work. Take a look at the figure below to get an idea of the problem:

If the DataGrid and nested ComboBox controls are moved into a User Control you can’t use the StaticResource keyword to get to the ViewModel object. Why? Because the ViewModel object is defined in the Resources of the parent not in the actual User Control itself. You could of course write code to get to it and then bind the data (writing code is always an option but can quickly get out of control in larger applications with a lot of controls), but what if you want to bind everything declaratively in XAML? I don’t know of a built-in way to do that (and I’ve asked many people and have yet to hear an answer that didn’t involve mini ViewModels for each row or writing code) so I ended up creating a fairly simple solution to address the problem.

The DataContextProxy Class

When I first tried to solve this problem I figured I could define the ViewModel again up in the Resources of the nested User Control. Try this and you’ll quickly realize that it doesn’t work because it’ll cause a new ViewModel object to be created and two will now be in memory (one for the parent and one for the child User Control). I needed a way to get to the DataContext from the parent but couldn’t do it using Resources it seemed…without writing code anyway (on a side note, I’m not opposed to writing code at all but the application I’m working on encounters the problem defined here frequently and the code started to get ridiculous). I started thinking about how the ScriptManagerProxy class works in ASP.NET AJAX and played around with something I now call the “DataContextProxy”. I needed a way to get to the parent’s DataContext and came up with the following class that does just that:

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;

namespace JobPlan.Controls
{
    public class DataContextProxy : FrameworkElement
    {
        public DataContextProxy()
        {
            this.Loaded += new RoutedEventHandler(DataContextProxy_Loaded);
        }

        void DataContextProxy_Loaded(object sender, RoutedEventArgs e)
        {
            Binding binding = new Binding();
            if (!String.IsNullOrEmpty(BindingPropertyName))
            {
                binding.Path = new PropertyPath(BindingPropertyName);
            }
            binding.Source = this.DataContext;
            binding.Mode = BindingMode;
            this.SetBinding(DataContextProxy.DataSourceProperty, binding);             
        }

        public Object DataSource
        {
            get { return (Object)GetValue(DataSourceProperty); }
            set { SetValue(DataSourceProperty, value); }
        }

        public static readonly DependencyProperty DataSourceProperty =
            DependencyProperty.Register("DataSource", typeof(Object), typeof(DataContextProxy), null);


        public string BindingPropertyName { get; set; }

        public BindingMode BindingMode { get; set; }
        
    }
}

The DataContextProxy class grabs the parent DataContext that flows down to the child User Control and binds it to a dependency property named DataSourceProperty. The DataContextProxy object can be defined in the User Control’s Resource section as shown next:

<UserControl.Resources>
    <controls:DataContextProxy x:Key="DataContextProxy" />
</UserControl.Resources>

This allows the ViewModel defined in the parent to be accessed using XAML in the child User Control. For example, a ComboBox control nested in a DataGrid can easily get to the Branches property using the following binding syntax:

<ComboBox 
    DisplayMemberPath="Title"
    ItemsSource="{Binding Source={StaticResource DataContextProxy},Path=DataSource.Branches}" />

The binding syntax tells the ComboBox to bind to the statically defined DataContextProxy object’s DataSource property. This allows the control to get to the original ViewModel object originally defined in the parent’s Resources section. The syntax then says to bind to the Branches property of the ViewModel by using the Path property.

Wrapping it Up

Silverlight has a lot of nice data binding features but there will be times when you’ll run into a few road blocks as you’re developing applications. In this post you’ve seen different techniques that can be used when binding nested controls to data objects and seen how the DataContextProxy object can be used. Hopefully this will help some of you out down the road when you’re working with a lot of nested controls.

For more information about onsite, online and video training, mentoring and consulting solutions for .NET, SharePoint or Silverlight please visit http://www.thewahlingroup.com.

Building Line of Business Applications with Silverlight 3 – Pros and Cons

dwahlin — Tue, 18 Aug 2009 07:06:00 GMT

I’ve been hearing a lot of people talk about how Silverlight 3 can or can’t do various things lately throughout the blogosphere and Twitter. The sad part is that some of the people giving their two cents about what Silverlight can’t do haven’t built a “real world” application so I’m not sure how their opinion carries any weight (I know because I’ve asked a few of them). Their list of cons are typically based on what they heard on Twitter or various rumors floating around. As with any technology there are pros and cons and Silverlight is no exception. The goal of this post is to talk through some of the pros and cons I’ve personally encountered while building a “real world”, enterprise-scale timesheet and job management application for a large electrical contracting company. I’ll point out what has worked really well and what hasn’t so that people looking to move applications to Silverlight 3 can get an honest assessment on what can be done and what can’t be done.

The application my company is building has a lot of different screens (30+), integrates with the backend database using WCF, uses reporting services for reports and leverages many of the key features Silverlight 3 has to offer. The existing application used by the client was written using Access Forms and is being ported to Silverlight 3 along with a bunch of new functionality.

Let’s start by going through what I personally feel are the pros and cons that Silverlight brings to the table for Line of Business (LOB) applications.

Silverlight 3 Pros

Here are some of the pros I’ve found as I’ve worked through the application:

Excellent data binding support – my favorite feature. This changes how you look at building applications and allows you to write data-centric code instead of control-centric code as with normal Web applications. There’s a lot I could cover here but I wrote up a post awhile back that gives additional details about what I like. Read it here.
Server code and client code can written in the same language. Business and validation rules can be shared between the client and server code base which definitely makes applications more maintainable into the future.
A rich set of controls – I really like the controls available with the Silverlight SDK as well as those in the Silverlight toolkit. There are a few (mentioned below) that can test your patience when you’re building a more involved application and not a simple demo.
Support for just about any type of animation or effect you want. Don’t need that in a LOB app? I beg to differ. You can get quite creative with how data is displayed with Silverlight and not be limited to simple slide, sizing or opacity animations. I’ll show an example of what I call the “card flow” interface later in this post and show how it allows managers to get to timecards faster and easier than before.
Excellent designer support through Expression Blend 3 – Visual Studio 2008 is great for coding but doesn’t provide any design-time features for Silverlight 3. Not a big deal….you can use Expression Blend 3 which provides a great interface for designing your applications. The new SketchFlow application can even be used to prototype applications upfront and get customer feedback more quickly and easily than in the past.
Easy to integrate distributed data using WCF, ASMX, REST, ADO.NET Data Services, .NET RIA Services, etc. The application that I’m working on leverages WCF as well as some dynamic code on the client-side to make calls to the service. It works great and FaultExceptions can even be handled now with Silverlight 3.
Desktop-style application with a web deployment model – Get the responsiveness of a desktop application that can be deployed right through the browser and even run on Macs.
Support for styling of controls. Silverlight 3 now allows styles to be changed on the fly and styles to be based on other styles. If you don’t like how a control currently looks you can completely change it by using styles and control templates.
Out of browser support – This was a key reason why my client choose Silverlight 3. They have a lot of remote workers that don’t always have access to the Internet and needed to be able to enter timesheets even when disconnected and then sync them later once a given employee has connectivity.
Support for behaviors. Behaviors are very, very useful in Silverlight applications. I needed to add mouse wheel scroll capabilities to a ScrollViewer control to simplify scrolling in a screen and did it within minutes by using a behavior (thanks to Andrea Boschin who created the behavior).
Manipulate pixels using WriteableBitmap. This can be used to create some very cool effects (some which may not be applicable to LOB applications…but they’re still cool). I’m using it mainly to fill the printing hole mentioned below.
Support for storing local data through isolated storage – By using isolated storage you can cache data, store data when no network connectivity is available plus more.
Support for navigation – Silverlight 3 has a new navigation application template in Visual Studio that makes creating an application with multiple pages quite easy. Each “page” can be linked to directly through deep linking and has built-in support for history. If the client hits the back or forward button in the browser they’re taken to the appropriate Silverlight application page. The navigation framework allows code to be placed into separate pages (or user controls) and then loaded as a particular link or menu item is clicked. It’s a great feature that can really reduce the amount of code you have to write especially compared to Silverlight 2.

Silverlight 3 Cons

So everything’s all peachy right? Both the client and I are very happy with how things are going with the application but there have been some challenges along the way. At the beginning of this post I said I’d mention the cons as well and I’m going to be brutally honest here with some of the areas where Silverlight 3 is missing the mark when it comes to Line of Business applications.

No printing support. Microsoft is working hard on this for future versions of Silverlight but if you can’t wait until then it’s definitely something to be aware of. We knew about this going into the project so it was supposed to be a non issue since we could pop-up HTML overlays or open new browser windows that could be printed. But, for one particular screen the lack of printing support is proving to be a challenge since it turns out the end user always prints the screen as they’re doing payroll work and the screen is quite complex. I’ve come up with a work around using Silverlight 3’s WriteableBitmap but am currently sending bytes up to the server, converting them into a JPEG and then displaying the image in the browser. Definitely a hack solution. We’re now looking at generating dynamic Excel files on the fly at the client with a snapshot image of the Silverlight data since Excel will print the image properly and the browser doesn’t (still researching this option). If that doesn’t work we’ll just use reporting services to generate the same screen…not my preference though.
Binding data to controls such as a ComboBox that is nested in other controls is harder than it should be. I use a lot of ComboBox controls that are nested in DataGrid or ListBox rows in the application. While I have it working fine now (after beating my head against the monitor a few times), the ComboBox control itself really needs a SelectedValue and ValueMember property for some situations and a way to more easily bind its ItemsSource to collections that may be defined outside of the current DataContext. All of this can be done via code but if you want to handle the majority of it declaratively in XAML it can be challenging in some cases especially once you start breaking parts of a page into user controls. I ended up enhancing some code Rocky Lhotka blogged about and created my own ComboBox control that simplifies things a lot.
Lack of built-in support for commanding. What’s “commanding”? In a nutshell it’s the ability to call a method within an object directly from XAML as an event fires instead of going through a code-behind file. For example, when a button is clicked the click event can call directly into a ViewModel object that acts on the event. By using commanding you can make your applications more testable. Frameworks such as Prism (and many others that have popped up) support simple button commanding and provide a code framework that can be used to build other types of commands. The application I’m working on handles just about every event in the book (click, mouseenter, mouseleave, rowloaded, lostfocus, gotfocus, plus others) though and writing custom code just to handle events got old (so we simplified things and handle the event in the code-behind which notifies the ViewModel via events). If you want to handle events directly in the code-behind file this is a non-issue for you, but if you want to handle them in another class it can be more challenging than it should be.
Learning curve – There is certainly a learning curve associated with building Silverlight applications especially if you’re coming from building standard Web applications. However, I think that’s the case with any technology. I had already built several demo applications with Silverlight, co-authored a book and several articles on it and still ran into a few challenges with architecture choices along the way (we’re following the MVVM pattern). I think it boils down to experience though so I list this one simply so that people know they will spend some time learning. If you’re one of those people who doesn’t like to learn new things then Silverlight probably isn’t for you. If you enjoy learning new things then I think you’ll love Silverlight once you get the hang of it.
No built-in support for displaying Reporting Services reports within Silverlight – This isn’t a huge issue in my opinion since a report can be brought up in a separate browser window or displayed using an HTML overlay. However, if you need to display the report directly in Silverlight there isn’t any built-in way to do that in Silverlight 3. 3rd party vendors to the rescue though. Perpetuum Software now has a product that can integrate reports directly into Silverlight.
The client has to have the Silverlight plugin installed. I personally don’t view this as much of a con for internal enterprise LOB applications since it’s fairly easy for a PC manager to push out Silverlight to client PCs in many environments. If the application will be run externally then installation of the plugin on each client has to be considered though.
Sharing service types between proxy objects needs to be enhanced - When the project was initially started I wanted to use ADO.NET Data Services for some things and WCF for others. The problem is that if both types of services reference the same type (such as Customer) then both generated proxy objects will contain a copy of that type which ultimately bloats the XAP size and leads to having to reference types by namespace down in the code versus a using statement at the top. Although proxies can share code libraries from other projects (that's an option in the proxy generation wizard), my Model entities use .NET language features not available in Silverlight class libraries so type sharing won't work there. It's something to keep in mind as you decide how you'll get data into your application.

There are definitely more pros than I’ve listed and probably a few more cons although I honestly can’t think of many more that I’ve had to deal with. The bottom line is that all of the pieces are there (aside from printing) to build powerful Line of Business applications that are built using existing .NET languages. You can make the applications look however you’d like and not have to worry if they’ll look good across different browsers. Here’s a picture of a payroll screen in the early stages of development:

Here’s what the screen looks like after applying a few styles to the controls and adding support for things like inline editing of data:

Some of the more “fun” features in Silverlight 3 can also be put to good use in Line of Business applications. I needed to create a way for warehouse managers to easily manage multiple time cards for employees. I ended up going with what I call a “card flow” interface (similar to cover flow in iTunes) to display the time cards. The end user can use the mouse wheel to quickly navigate through different cards. The selected card will slide to the middle with a cool animation and the others are angled using perspective 3D. Here’s what the “card flow” interface looks like (I need to give credit to Jose Fajardo for blogging about the concept):

To Wrap It Up

So is Silverlight 3 ready for prime time, enterprise level Line of Business applications? Having worked with the framework nearly every day for the past 3 months in a “real world” scenario my short answer is a big “YES”! I don’t say this because I’ve been drinking the Kool-Aid though. Anyone who knows me understands that I use what I feel works best for a given application (unless the client wants something specific of course). I truly enjoy working with the framework and think it can do a lot of powerful things.

Every company is unique though so the answer really depends on what features your application needs. Our previous client’s application was built using ASP.NET MVC and jQuery and it did everything they wanted it to do (I really like ASP.NET MVC and jQuery by the way). However, Silverlight provides a more consistent way to develop enterprise applications that doesn’t require learning JavaScript, additional libraries like jQuery, CSS, HTML and other Web technologies. With Silverlight you can write code using your favorite .NET language on both the client and server, debug applications like any normal .NET application, bind data in flexible ways, retrieve data from remote services, animate objects as needed, round corners and work with gradients without ever creating a .gif, .jpg or .png and have a ton of controls right at your finger tips. I’m a big fan.

For more information about onsite, online and video training, mentoring and consulting solutions for .NET, SharePoint or Silverlight please visit http://www.thewahlingroup.com.

So What’s a Silverlight Value Converter Anyway?

dwahlin — Sun, 16 Aug 2009 04:16:00 GMT

Silverlight has an excellent data binding engine that allows data to be bound through XAML or programmatically with code. My number one reason for using Silverlight on client projects is the data binding support. Once you get into it and understand how it works it can save a lot of time when building applications.

When you’re binding data to controls there will be times when the data needs to be modified or tweaked some on the way into a control or as the data leaves a control and goes back to the source property (during a TwoWay binding for example). Sure, you can always write code to change a given value, but in many cases it’s much easier to write a simple value converter instead that can be re-used. In this post I’ll walk through creating a value converter and then show the code for a few of the value converters I find myself using fairly frequently.

Creating a Value Converter

Let’s look at a simple example of creating a value converter to get started. Many applications work with DateTime objects but don’t want the time displayed or want the date formatted a specific way. If you bind a DateTime property to something like a TextBlock in Silverlight you’ll get the standard output based upon the current culture:

In the case of a birthday you want to show the date but don’t need the time of course. You’d want something like the following:

Although a separate property could be created in the source object being bound that handles formatting the date, a value converter can be created and re-used over and over anytime a specific date format needs to be created. To create a value converter you’ll need to add a Silverlight class into your project and implement an interface named IValueConverter (located in the System.Windows.Data namespace). This interface defines two members including Convert and ConvertBack. Convert is used to modify data as its bound from the source object to the control. ConvertBack works the other way. As a user changes data in a control such as a TextBox the data can be "converted back" to the original data type in the source object by using ConvertBack.

Both Convert and ConvertBack accept the same parameters including the data being bound, the type of the data being bound, any parameter data passed in that can be used in the data conversion process as well as the target culture that the entire process is running under (English, Spanish, French, etc.). Here's what the method signatures look like:

object Convert(object value, Type targetType, object parameter, CultureInfo culture);
object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture);

Once IValueConverter is added to your class you can right-click it in Visual Studio and select Implement Interface from the menu to automatically fill in the Convert and ConvertBack methods. If you're using Visual Basic you can simply hit enter after the interface name to accomplish the same thing. Here’s an example of a date value converter that allows dates to be formatted:

using System;
using System.Windows;
using System.Windows.Data;
using System.Globalization;

namespace View.Converters
{
   public class DateConverter : IValueConverter
    {

        #region IValueConverter Members

        //Called when binding from an object property to a control property
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value == null || (DateTime)value == DateTime.MinValue) return null;
            DateTime dt = (DateTime)value;
            return dt.ToString((string)parameter, culture);
        }

        //Called with two-way data binding as value is pulled out of control and put back into the property
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            string val = (string)value;
            DateTime outDate;
            if (DateTime.TryParse(val, culture, DateTimeStyles.None, out outDate))
            {
                return outDate;
            }
            return DependencyProperty.UnsetValue;

        }

        #endregion
    }
}

To use a value converter you’ll need to first reference the class’s namespace (and assembly if the class is in a separate project). This can be done in the XAML file where the value converter will be used, in App.xaml or in a merged resource dictionary file. An example of defining a namespace in a resource dictionary file named Styles.xaml is shown next:

<ResourceDictionary
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:converters="clr-namespace:View.Converters"
>

   …

</ResourceDictionary>

Once the namespace is defined you need to define the converter using XAML and give it a key that can be used to reference the value converter (similar to an ID in ASP.NET):

<converters:DateConverter x:Key="DateConverter" />

Now that the converter is defined you can use it in any data binding that handles a DateTime object using the Binding object’s Converter and ConverterParameter properties. Looking at the code below you can see that the converter is referenced using the StaticResource keyword (since it’s defined as a resource within your Silverlight project) which locates the appropriate key for the converter.

<TextBox x:Name="txtBirthday" 
         Text="{Binding Birthday, Mode=TwoWay, Converter={StaticResource DateConverter},ConverterParameter=d}"
         FontFamily="Arial" 
         Width="200" 
         Height="20" 
         Margin="5"  />

This automatically routes all in and out data binding operations (since it’s a TwoWay binding) through the value converter. If data is being bound to a control such as a TextBox the parameter passed (“d” in this example) is used to format the DateTime object data. If data is updated in the control it’ll automatically be converted from a string back into a DateTime object.

Value Converter Examples

I have quite a few value converters that I use from time to time in client applications and have listed some of them below. If you have a favorite one you’re willing to share with others please add a comment to this post with your name, a description of the value converter as well as the code and I’ll update the blog (and give you credit of course) so that a nice library of value converters built-up over time. Update: Shawn Wildermuth let me know that the Silverlight Contrib project has some similar value converters as well as others so check that out as well if you get a chance.

BoolToVisibilityConverter

Handles converting boolean values into Visibility enumeration values. This is useful when controls need to be shown and hidden based upon the value of a boolean property. The Inverse parameter value can be passed when you want to hide a control when the property being bound is true or show the control when the value is false.

using System;
using System.Windows;
using System.Windows.Data;

namespace JobPlan.View.Converters
{
    public class BoolToVisibilityConverter : IValueConverter
    {
        #region IValueConverter Members

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (parameter == null)
            {
                return ((bool)value == true) ? Visibility.Visible : Visibility.Collapsed;
            }
            else if (parameter.ToString() == "Inverse")
            {
                return ((bool)value == true) ? Visibility.Collapsed : Visibility.Visible;
            }
            return false;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }

        #endregion
    }
}

DecimalFormatterConverter

Converts decimal values into different formats.

using System;
using System.Windows.Data;

namespace JobPlan.View.Converters
{
    public class DecimalFormatterConverter : IValueConverter
    {

        #region IValueConverter Members

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            string format = (parameter == null) ? "#.##" : parameter.ToString();
            return (value == null) ? String.Empty : decimal.Parse(value.ToString()).ToString(format);
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            try
            {
                if (value != null && value.ToString() != String.Empty)
                {
                    return decimal.Parse(value.ToString());
                }
            }
            catch { }
            return null;
        }

        #endregion
    }
}

ListCountVisibilityConverter

Handles showing and hiding controls such as ListBox based upon the number of items in the collection the control is bound to. For example if there is only one item in a collection you may not want to show a ListBox control due to the data being shown with other controls in the UI. You could pass a value of 1 for the ConverterParameter and the ListBox would automatically be hidden.

using System;
using System.Windows;
using System.Windows.Data;
using System.Collections;

namespace JobPlan.View.Converters
{
    public class ListCountVisibilityConverter : IValueConverter
    {

        #region IValueConverter Members

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value != null)
            {
                IList list = value as IList;
                if (list != null)
                {
                    int minCount = int.Parse(parameter.ToString());
                    return (list.Count > minCount) ? Visibility.Visible : Visibility.Collapsed;
                }
                
            }
            return Visibility.Collapsed;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }

        #endregion
    }
}

NullToVisibilityConverter

Handles showing and hiding a control based upon a value being null or not.

using System;
using System.Windows;
using System.Windows.Data;

namespace JobPlan.View.Converters
{
    public class NullToVisibilityConverter : IValueConverter
    {

        #region IValueConverter Members

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (parameter == null) //Not invert parameter passed
            {
                return (value == null) ? Visibility.Collapsed : Visibility.Visible;
            }
            else if (parameter.ToString() == "Inverse")
            {
                return (value == null) ? Visibility.Visible : Visibility.Collapsed;
            }
            return Visibility.Collapsed;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }

        #endregion
    }
}

StringTruncateConverter

Trims a string down to a specific length for display in the user interface.

using System;
using System.Windows.Data;

namespace JobPlan.View.Converters
{
    public class StringTruncateConverter : IValueConverter
    {

        #region IValueConverter Members

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            int maxLength;
            if (int.TryParse(parameter.ToString(), out maxLength))
            {
                string val = (value == null) ? null : value.ToString();
                if (val != null && val.Length > maxLength)
                {
                    return val.Substring(0, maxLength) + "..";
                }
            }
            return value;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }

        #endregion
    }
}

Making Silverlight 3 Application Code More Compatible with Blend

dwahlin — Thu, 30 Jul 2009 02:24:00 GMT

Expression Blend 3 is a great tool for creating Silverlight or WPF user interfaces using design time tools and controls. If you haven’t tried version 3 you’re really missing out since it adds a ton of new time-saving features.

While I really enjoy working in Blend, one of the things I’ve struggled with in the past is making code work better in Blend. If you’ve ever had an error like the following you know what I mean:

What’s up with the error? In short, I’m declaratively assigning my ViewModel object (my object that contains the data being bound to the Silverlight View if you’re new to the whole MVVM terminology) in the View’s resources area as shown next:

<navigation:Page.Resources>
    <viewModel:PayrollSummaryViewModel x:Key="ViewModel" />
</navigation:Page.Resources>

There’s nothing wrong with that except that when the ViewModel object’s constructor is called an error is occurring due to a null reference exception. Note: Some people like the declarative way of defining ViewModels and some people don't. A few months ago I was against that approach until I started working on my current project and realized that the pros outweighed the cons (at least for my scenario). Plus, the declarative approach is used when working with test data in Blend 3. Ultimately each application has different requirements so I'll leave it as an "exercise for the reader" to decide what works best for you.

Here’s the code in the constructor which is calling out to a WCF service to retrieve some data:

public PayrollSummaryViewModel(IServiceProxy proxy)
{
    _Proxy = (proxy != null) ? proxy : new ServiceProxy();
    GetPayrollSummary();
}

You obviously can’t call out to a WCF service when you don’t have access to an HTTP stack. Fortunately, fixing the problem and making the code more “Blendable” is easy. Silverlight has a class named DesignerProperties that can be used to check if the code is being run in a designer such as Blend or if the code is being run live. Here’s an example of using the DesignerProperties class and wrapping it in a property named IsDesignTime:

public bool IsDesignTime
{
    get
    {
        return DesignerProperties.GetIsInDesignMode(Application.Current.RootVisual);
    }
}

To avoid trying to call the WCF service in the ViewModel object’s constructor when the code is run in Blend I can wrap the code with the call to IsDesignTime as shown next and Blend is happy with everything.

public PayrollSummaryViewModel(IServiceProxy proxy)
{
    if (!this.IsDesignTime)
    {
        _Proxy = (proxy != null) ? proxy : new ServiceProxy();
        GetPayrollSummary();
    }
}

You can see that creating more “Blendable” code is pretty easy once you know this simple trick. More info on the DesignerProperties class can be found here if you’re interested. There are apparently some issues using it with the Visual Studio designer used for Silverlight 2, but since Silverlight 3 doesn’t have a Visual Studio designer that’s kind of a moot point.

Previewing Websites in Multiple Browsers with Expression Web 3’s SuperPreview

dwahlin — Fri, 24 Jul 2009 19:29:19 GMT

Expression Studio 3 has a great new feature that was announced and demonstrated back at the Mix 09 conference called SuperPreview. It allows you to compare how a page looks across multiple browsers including IE6, IE7, IE8 and FireFox (with more reportedly coming in the future). In this post I’m going to provide a quick look at SuperPreview and walk you through some screen shots to get you started using it.

After installing Expression Studio 3 I opened SuperPreview and saw the browsers shown in the image below. The first thing you’ll notice is that you can test IE6. Although I personally wish this browser would die and go away, my company still works with several clients who have large IE6 deployments across the enterprise so it’s nice to be able to test it easily. Previously I used IETester (which works quite well) to test different versions of IE.

I’m a big fan of the new Safari 4 browser for Windows and wanted to be able to test against that as well but it’s not currently supported. Based on various Microsoft blog posts I’ve seen they’re planning to release support for Safari and other browsers later so I’m hoping that’s the case. To see how a site looks in multiple browsers select a browser on each side of the SuperPreview interface by clicking the browser icon, type the URL to test into the Location textbox (at the top center of the SuperPreview window) and hit Enter:

The browsers that your testing will show at the bottom of the screen and you can even test in different resolutions by clicking the Browser Size drop-down in the bottom-right corner. Click the X icon next to a browser to remove it.

If you’d like to test multiple browsers in one window and compare them against a baseline browser you can select a browser on the left side followed by another browser from the right side. Then click the + icon at the bottom left of the screen (to the right of the second browser) and add others. Here’s what it looks like after selecting several browsers:

SuperPreview also includes a DOM viewer that can be used to compare the DOMs across multiple browsers. To use it click the DOM tab located in the bottom-right corner of the SuperPreview window. Once the DOM window is showing you can click on anything within the browser preview windows and you’ll see the associated HTML tags and CSS styles associated with the element:

You can also drag the ruler onto pages to compare how things line up vertically and horizontally:

Finally, you can overlay browsers to see how pages match up by clicking the D key. Here’s an example of overlaying Firefox 3.5 and IE 6 screens (brace your eyes since it creates a blur type of effect…gotta love IE6):

There’s more you can do with SuperPreview but the features shown here are quite important when you’re trying to make sure a site looks good across multiple browsers.

Running a WCF Service on IIS 7

dwahlin — Wed, 22 Jul 2009 06:00:00 GMT

I was trying to get a WCF service going on my Windows 7 machine tonight that I call from a Silverlight 3 application and ran into the following error when trying to view the .svc file in the browser:

HTTP Error 404.3 - Not Found

The page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map.

After scratching my head for a few minutes I figured something must not be installed since IIS 7 is very “componentized”. After looking through Programs and Features –> Turn Windows features on or off I came across a Microsoft .NET Framework 3.5.1 section. I checked the two Windows Communication Foundation checkboxes shown below (the second box enables Windows Activation Service - WAS so that IIS can host WCF services that can be called using non-HTTP bindings such as TCP):

After fixing the problem the .svc file loaded fine and I was off and running.

For more information about onsite, online and video training, mentoring and consulting solutions for .NET, SharePoint or Silverlight please visit http://www.thewahlingroup.com/.

Using Element to Element Binding for ToolTips in Silverlight 3

dwahlin — Tue, 14 Jul 2009 03:43:00 GMT

Silverlight 3 provides a new feature called “element to element” binding that allows one element to bind to another element’s property. It’s really useful when you want to tie two objects together so that when one object changes the other changes as well.

A lot of the samples I see for this new technology tend to focus on using slider controls but I just don’t have a need for sliders most of the time (although it certainly depends upon what type of application you’re building). Here’s a simple yet effective way to leverage element to element binding for tooltips. I currently have a ComboBox control with a data template and want to show a description of the selected item as the user mouses over the control. With Silverlight 2 you’d have to write code since there wouldn’t be a way for the tooltip service to bind to the selected item declaratively. Now, you can do something like this (notice the ToolTipService attribute):

<ComboBox 
    x:Name="WorkCodeComboBox"
    ItemsSource="{Binding Source={StaticResource ViewModel},Path=CurrentTimeSheetView.WorkCodes}"
    Style="{StaticResource TimeSheetComboBoxStyle}" 
    SelectionChanged="WorkCode_SelectionChanged"
    ToolTipService.ToolTip="{Binding Path=SelectedItem.Description, ElementName=WorkCodeComboBox}">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Margin="0">
                <TextBlock Text="{Binding WorkCodeID}" Width="30" Margin="5,0,0,0" />
                <Rectangle Style="{StaticResource ComboBoxVerticalLine}" />
                <TextBlock Text="{Binding Description}" Width="250" Margin="10,0,0,0" />
            </StackPanel>
        </DataTemplate>
   </ComboBox.ItemTemplate>
</ComboBox>

In this case I’m binding the tooltip to the selected item’s Description property. At first glance it looks like the ComboBox is binding to itself but in reality it’s binding to the ToolTipService’s Tooltip property. A simple little trick but nice when you need it since it saves a line or two of C# code.

For more information about onsite, online and video training, mentoring and consulting solutions for .NET, SharePoint or Silverlight please visit http://www.thewahlingroup.com/.

Simplifying the Process of Calling a WCF Service from Silverlight (or any .NET Application)

dwahlin — Mon, 13 Jul 2009 00:26:00 GMT

I’m currently working on a large Silverlight 3 project for a client that will ultimately have hundreds of calls from Silverlight to WCF service operations. Initially I did things the standard way which is to define a client-side class that’s used to call the WCF service using the generated service proxy (I’m basically following a service agent type of pattern). The service agent class handles instantiating the WCF proxy object and calling the appropriate operations. Here are a few examples….each of these methods accept the parameters passed to the WCF service as well as a callback method that’s called when the service returns data.

public void GetJobs(EventHandler<GetJobsCompletedEventArgs> callback)
{
    IJobPlanService proxy = GetProxy();
    proxy.GetJobsCompleted += callback;
    proxy.GetJobsAsync();
}

public void GetEmployees(EventHandler<GetEmployeesCompletedEventArgs> callback)
{
    IJobPlanService proxy = GetProxy();
    proxy.GetEmployeesCompleted += callback;
    proxy.GetEmployeesAsync();
}

public void GetEmployeesByJobID(int jobID, EventHandler<GetEmployeesByJobIDCompletedEventArgs> callback)
{
    IJobPlanService proxy = GetProxy();
    proxy.GetEmployeesByJobIDCompleted += callback;
    proxy.GetEmployeesByJobIDAsync(jobID);
}

public void GetTimeSheetViews(int? jobID, int? empID, string weekEnding, EventHandler<GetTimeSheetViewsCompletedEventArgs> callback)
{
    IJobPlanService proxy = GetProxy();
    proxy.GetTimeSheetViewsCompleted += callback;
    proxy.GetTimeSheetViewsAsync(jobID, empID, weekEnding);
}

After writing nearly the same code method after method (aside from changes in the event name and method name) I opted for a simplified approach that allows me to call any WCF service operation using a single method. That way I don’t have to continually write wrapper methods just to call a service operation which really seems pointless to me. Some people will like the following code since it can eliminate a ton of code from your Silverlight project (the code would work fine outside of Silverlight too by the way) while others won’t like it since reflection is involved (I personally don’t view reflection as a big deal here since it’s running on the client-side).

Here’s how it works:

The CallService method shown next accepts an async callback delegate as well as the parameter data that should be passed to the service. In other words, tell it what method to call once the service returns data as well as what data to pass up to the service operation.
When calling the CallService method you must supply the type of EventArgs that will be returned from the service call. This is done using generics.

/// <summary>
/// Used to call a WCF service operation.
/// </summary>
/// <typeparam name="T">The type of EventArgs that will be returned by the service operation.</typeparam>
/// <param name="callback">The method to call once the WCF call returns (the callback).</param>
/// <param name="parameters">Any parameters that the service operation expects.</param>
public void CallService<T>(EventHandler<T> callback, params object[] parameters) where T : EventArgs
{
    string action = typeof(T).Name.Replace("CompletedEventArgs", String.Empty);
    IJobPlanService proxy = new JobPlanServiceClient();
    Type t = typeof(JobPlanServiceClient);
    t.GetEvent(action + "Completed").AddEventHandler(proxy, callback);
    t.InvokeMember(action + "Async", BindingFlags.InvokeMethod, null, proxy, parameters);
}

An example of using the CallService method is shown next:

public void GetAreasByJobID()
{
    _Proxy.CallService<GetAreasByJobIDCompletedEventArgs>((s,e) => this.CurrentTimeSheetView.Areas = e.Result,
        this.TimeSheetJob.JobID);
}

The GetAreasByJobID method passes a type of GetAreasByJobIDCompletedEventArgs as the generic type to CallService, defines the async callback using a lambda expression (although a separate method could certainly be defined) and passes the parameter that the service operation expects (multiple parameters can be passed when needed). CallService knows which WCF service operation to call based upon the generic type that’s passed since WCF service proxy object’s always create EventArgs classes that end with “CompletedEventArgs”. The method simply removes the string “CompletedEventArgs” to get the operation name, instantiates the service proxy object and then uses reflection to wire up the appropriate event and async method to call. If you use several different service proxy objects you could certainly handle that as well with generics. I played around with ChannelFactory as well but opted for this approach mainly because it was more straightforward in my opinion and because I wanted to use the generated WCF proxy anyway.

If scalability was an issue (which is not the case here since this runs on the client-side) then I’d go with the standard approach of using the WCF proxy methods that are generated as shown in the first section of code above. For this application it’s eliminated hundreds of lines of redundant code though (which would’ve grown to 1000s since we’re only 25% of the way through the project) which means we have less to worry about plus this eliminates the time it would’ve taken to write the wrapper methods. Ultimately I view this as a significant benefit to future maintenance since there’s less wrapper code that can get out of sync.

For more information about onsite, online and video training, mentoring and consulting solutions for .NET, SharePoint or Silverlight please visit http://www.thewahlingroup.com/.

Silverlight 3 Released – Exciting Stuff Here!

dwahlin — Fri, 10 Jul 2009 17:54:00 GMT

Silverlight 3 is now officially released and available for download! It’s definitely exciting for me personally because my company has been working on a Silverlight 3 client application for the past few months and really enjoyed the new features. Here are some of the key features Silverlight 3 brings to the table:

Out of Browser Support	Users can run a Silverlight 3 application in the browser or run it directly from the desktop even when they’re not connected to the Internet. This supports several sync scenarios that can be useful when a connection isn’t always available.
Enhanced Graphics Support	New features include GPU acceleration, perspective 3D support, bitmap and pixel APIs for dynamically generating images, videos, etc. Animations can also be eased in and out and perform many other cool effects. Pixel shaders allow objects to have different effects applied to them such as shadows and blurs.
New Controls	Silverlight 3 provides many new controls that can be used to build solid line of business (LOB) applications. Controls can be bound to each other using element to element binding and validation can also be perform more easily. Several new controls are also available in the Silverlight 3 toolkit released by Microsoft.
Better Navigation	Navigating between Silverlight “pages” is now built in along with better search engine optimization (SEO) support and deep linking.
Enhanced Text Rendering	One knock against Silverlight 2 was that text didn’t render as clearly as it should in some situations. Silverlight 3 includes a major update to the text rendering engine. Text renders very crisply now.
Enhanced Styles	Silverlight 3 provides merged dictionary support allowing multiple style files to be merged into an application (similar to how a standard web application can use multiple CSS files). This allows themes and other styles to be switched much more easily. Styles can also be based on other styles (similar to inheritance in OO languages).
Faster Transfer of Data	Windows Communication Foundation (WCF) support was available in Silverlight 2 but Silverlight 3 now adds support for binary XML serialization which allows data to be transferred between a Silverlight application and a WCF service much faster than before.
Assembly Caching	Silverlight 3 allows developers to store assemblies on a central company server and Silverlight 3 applications can then download them as needed rather than downloading everything up front in a single .xap file. This can significantly speed-up application load times.
Enhanced Networking Support	A new client networking (ClientHttp) stack is available that supports more verbs than simply GET/POST. Applications that fully leverage REST APIs will benefit from this new feature.
HD Media Support	Silverlight 3 includes support for GPU acceleration (as mentioned earlier) as well as 1080p HD videos to be played over the web. New codec support for H.264, AAC audio and MPEG-4 content is also included. If you need to provide media solutions then Silverlight covers all of the major scenarios now.

Some other changes to Visual Studio and Silverlight applications in general:

The Visual Studio 2008 designer has been removed for Silverlight 3 applications. A lot of developers turned it off anyway so all of the dev efforts have gone into the designer that’ll be available in Visual Studio 2010. Expression Blend 3 can also be used of course.
The Silverlight ASP.NET server control isn’t used now. It simply emitted the object and associated params tags anyway.
Expression Blend 3 has also been released (currently a release candidate) along with a new feature called SketchFlow. SketchFlow allows application prototypes and mockups to be created more easily in order to get customer feedback…very cool if you haven’t seen it. Although I rarely used Blend for coding previously, it now includes code intellisense which is a nice feature to have and adds support for behaviors, importing Adobe Photoshop and Illustrator files and integrating sample data into applications.

To get started with Silverlight 3 visit http://silverlight.net/getstarted/.

If you’re interested in a focused look at some of the new features in Silverlight 3 check out David Yack’s new Silverlight 3 JumpStart Book.

For more information about onsite, online and video training, mentoring and consulting solutions for .NET, SharePoint or Silverlight please visit http://www.thewahlingroup.com/.

Validating Properties in Silverlight Classes

dwahlin — Tue, 07 Jul 2009 16:35:00 GMT

Silverlight classes rely on the INotifyPropertyChanged interface and associated PropertyChanged event it contains to ensure that data binding stays up-to-date in an application. It’s a great feature because you don’t have to worry about ensuring that changes to object properties are propagated back to controls….Silverlight handles refreshing control values for you automatically as long as the class that’s being data bound implements INotifyPropertyChanged and property set blocks raise the event. I use a fairly standard pattern for defining my properties and raising property changed events (there are several options for doing this…see a nice list here). Here’s an example of a property:

public Job CurrentJob
{
    get
    {
        return _CurrentJob;
    }
    set
    {
        if (value != _CurrentJob)
        {
            _CurrentJob = value;
            OnPropertyChanged("CurrentJob");
        }
    }
}

The problem is that I tend to change property names from time to time within an application and use the Visual Studio refactor feature to do it. This works great for changing the property name or field name but doesn’t change the quoted value passed to OnPropertyChanged. I’ve run into a few issues where I missed renaming the string value and decided that I needed to be more proactive with validating the value. I ended up going with the following validation code after looking at a few options:

protected void OnPropertyChanged(string propertyName)
{
    CheckPropertyExists(propertyName);

    if (this.PropertyChanged != null)
    {
        this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

[Conditional("DEBUG")]
private void CheckPropertyExists(string propertyName)
{
    Type type = this.GetType();
    if (type.GetProperty(propertyName) == null)
    {
        string errorMessage = string.Format("Invalid property found: {0} in {1}", propertyName, type.FullName);
        Debug.Assert(false, errorMessage);
    }
}

Originally I used #if..#endif statements to conditionally add or take out the CheckPropertyExists method until I came across a nice post by Josh Smith where he used the Conditional attribute in a WPF application. If you’re new to it, the compiler will leave CheckPropertyExists in the compiled code if you’re in debug mode. If you switch to release mode it’ll take it out which is good since at that point you wouldn’t want to slow down the application with the reflection statements.

With the CheckPropertyExists method in place I now have an easy way to know if I missed renaming a property value that’s passed to OnPropertyChanged which saves a few headaches. I put the code in my ViewModelBase class so I only have to write it once and have it available for just about everything I do in Silverlight. Here’s the message that I get if there’s a problem:

Update: The same day I posted this I ran into a mis-named property. The assert message popped up and I fixed it within a matter of seconds instead of searching through the code for minutes (or longer) to locate the problem.

For more information about onsite, online and video training, mentoring and consulting solutions for .NET, SharePoint or Silverlight please visit http://www.thewahlingroup.com/.

Creating a ComboBox Style AutoCompleteBox Control in Silverlight

dwahlin — Mon, 06 Jul 2009 20:40:00 GMT

Silverlight’s AutoCompleteBox control provides a nice way to filter a list of items as the user types into a TextBox. If you haven’t used it before you can see an example here. In a previous post I showed how you could customize AutoCompleteBox to make it look and feel more like an editable ComboBox so that users can click a down arrow to see the list of items and also filter the items by typing into the TextBox.

The solution I wrote about in the previous post relied upon a custom control template which works fine but you may want to encapsulate that functionality into a re-useable control so that you don’t have to worry about adding the template into each application project. Fortunately, it’s not too hard to derive from AutoCompleteBox and create a custom control. Here are the steps I went through to build a derived version of AutoCompleteBox that I call AutoCompleteComboBox.

Step 1: Create a Silverlight Class Library

Create a new Silverlight class library and add a class named AutoCompleteComboBox into it. Derive the class from AutoCompleteBox:

public partial class AutoCompleteComboBox : AutoCompleteBox

Once the class is created add a folder into the project named Themes that contains a file named Generic.xaml in it. Right-click on Generic.xaml, select Properties and ensure that the Build Action is set to Resource.

Step 2: Define the Control’s Template

Since AutoCompleteComboBox needs to look like a ComboBox I took a template available in one of the AutoCompleteBox toolkit samples that added the drop down arrow (normally seen on the ComboBox control) and tweaked it a little bit. The template code needs to go in the Generic.xaml file that was created in the previous step. Here’s what my Generic.xaml file looks like. You’ll see that there’s a ComboToggleButton style which is referenced by the AutoCompleteComboBox style.

<ResourceDictionary 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:system="clr-namespace:System;assembly=mscorlib"
  xmlns:custom="clr-namespace:MyCustomControls">
    
    <!-- AutoCompleteBox Styles -->

    <!-- Custom toggle button template -->
    <Style x:Name="ComboToggleButton" TargetType="ToggleButton">
        <Setter Property="Foreground" Value="#FF333333"/>
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Background" Value="#FF1F3B53"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid>
                        <Rectangle Fill="Transparent" />
                        <ContentPresenter
                            x:Name="contentPresenter"
                            Content="{TemplateBinding Content}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            Margin="{TemplateBinding Padding}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!-- Custom control template used for the IntelliSense sample -->
    <Style TargetType="custom:AutoCompleteComboBox">

        <!-- ComboBox should not perform text completion by default -->
        <Setter Property="IsTextCompletionEnabled" Value="False" />

        <!-- The minimum prefix length should be 0 for combo box scenarios -->
        <Setter Property="MinimumPrefixLength" Value="1" />

        <!-- Regular template values -->
        <Setter Property="Background" Value="#FF1F3B53"/>
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="BorderBrush">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFA3AEB9" Offset="0"/>
                    <GradientStop Color="#FF8399A9" Offset="0.375"/>
                    <GradientStop Color="#FF718597" Offset="0.375"/>
                    <GradientStop Color="#FF617584" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="custom:AutoCompleteComboBox">
                    <Grid Margin="{TemplateBinding Padding}">
                        <TextBox IsTabStop="True" x:Name="Text" Style="{TemplateBinding TextBoxStyle}" Margin="0,0,0,2" />
                        <ToggleButton x:Name="ToggleButton"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Center"
                                Style="{StaticResource ComboToggleButton}"
                                Margin="0" BorderBrush="Black" BorderThickness="1,0,0,0"
                                HorizontalContentAlignment="Center" 
                                Background="LightGray" 
                                Height="16" Width="16">
                            <ToggleButton.Content>
                                <Path x:Name="BtnArrow" Height="4" Width="8" Stretch="Uniform" 
                                      Data="F1 M 301.14,-189.041L 311.57,-189.041L 306.355,-182.942L 301.14,-189.041 Z " 
                                          Margin="0,0,6,0" HorizontalAlignment="Right">
                                    <Path.Fill>
                                        <SolidColorBrush x:Name="BtnArrowColor" Color="#FF333333"/>
                                    </Path.Fill>
                                    <Path.RenderTransform>
                                        <ScaleTransform x:Name="ToggleButtonScale" />
                                    </Path.RenderTransform>
                                </Path>
                            </ToggleButton.Content>
                        </ToggleButton>
                        <Popup x:Name="Popup">
                            <Border x:Name="PopupBorder" HorizontalAlignment="Stretch" Opacity="1.0" BorderThickness="0">
                                <Border.RenderTransform>
                                    <TranslateTransform X="2" Y="-2" />
                                </Border.RenderTransform>
                                <Border.Background>
                                    <SolidColorBrush Color="#11000000" />
                                </Border.Background>
                                <ListBox x:Name="Selector" ScrollViewer.HorizontalScrollBarVisibility="Auto" 
                                                 ScrollViewer.VerticalScrollBarVisibility="Auto" 
                                                 ItemTemplate="{TemplateBinding ItemTemplate}" />
                            </Border>
                        </Popup>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.2" To="ToggleButtonOver" />
                                    <VisualTransition GeneratedDuration="0:0:0.2" To="ToggleButtonOut" />
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="ToggleButtonOver">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="ToggleButtonScale" Storyboard.TargetProperty="ScaleX" To="1.3" />
                                        <DoubleAnimation Storyboard.TargetName="ToggleButtonScale" Storyboard.TargetProperty="ScaleY" To="1.3" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="ToggleButtonOut">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="ToggleButtonScale" Storyboard.TargetProperty="ScaleX" To="1" />
                                        <DoubleAnimation Storyboard.TargetName="ToggleButtonScale" Storyboard.TargetProperty="ScaleY" To="1" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="PopupStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.4" To="PopupOpened" />
                                    <VisualTransition GeneratedDuration="0:0:0.2" To="PopupClosed" />
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="PopupOpened">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="PopupBorder" Storyboard.TargetProperty="Opacity" To="1.0" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="PopupClosed">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="PopupBorder" Storyboard.TargetProperty="Opacity" To="0.0" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="ValidationStates">
                                <VisualState x:Name="Valid" />
                                <VisualState x:Name="InvalidUnfocused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="InvalidFocused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip" Storyboard.TargetProperty="IsOpen">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <system:Boolean>True</system:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Step 3: Add a TemplatePart Attribute

Go back to the AutoCompleteComboBox class created in Step 1 and add a TemplatePart attribute on it that references the ToggleButton control name (which will represent the drop down arrow) defined in the control template. Template parts are used to be able to reference the different controls defined in the template. Although TemplatePart’s Name property can be given a direct string value, I followed the convention seen in Silverlight controls and used a constant to define the name value.

[TemplatePart(Name = AutoCompleteComboBox.ElementToggleButton, Type = typeof(ToggleButton))]
public partial class AutoCompleteComboBox : AutoCompleteBox
{
    private const string ElementToggleButton = "ToggleButton";
}

Step 4: Add the ToggleButton Property

Add a ToggleButton property into the AutoCompleteComboBox class as shown next. You can call it whatever you want but I like to keep things simple and call it what it really is….a ToggleButton. The event handlers referenced in the code below are shown in Step 6.

#region Template Parts

ToggleButton _ToggleButton;

ToggleButton ToggleButton
{
    get { return _ToggleButton; }
    set
    {
        if (_ToggleButton != null)
        {
            _ToggleButton.Click -= new RoutedEventHandler(ToggleButton_Click);
            _ToggleButton.MouseEnter -= new MouseEventHandler(ToggleButton_MouseEnter);
            _ToggleButton.MouseLeave -= new MouseEventHandler(ToggleButton_MouseLeave);
        }

        _ToggleButton = value;

        if (_ToggleButton != null)
        {
            _ToggleButton.Click += new RoutedEventHandler(ToggleButton_Click);
            _ToggleButton.MouseEnter += new MouseEventHandler(ToggleButton_MouseEnter);
            _ToggleButton.MouseLeave += new MouseEventHandler(ToggleButton_MouseLeave);
        }
    }
}

#endregion

Step 5: Set the DefaultStyleKey for the AutoCompleteComboBox Control

Next you need to tell the AutoCompleteComboBox to use the Style you defined in Generic.xaml instead of the default style used by AutoCompleteBox. Do this by adding the following constructor into the class (which also adds code to call the ApplyTemplate class shown in the next step):

public AutoCompleteComboBox()
{
    this.DefaultStyleKey = typeof(AutoCompleteComboBox);
    Loaded += (sender, e) => ApplyTemplate();
}

Step 6: Override ApplyTemplate and Handle Events

We’re almost there! The next thing that needs to be done is to override the control’s OnApplyTemplate method. We need to do this so that the ToggleButton can be injected into the process so that we can handle the user clicking on it to show all of the items like a normal ComboBox would do. Here’s the remaining code that needs to be added into the class.

public override void OnApplyTemplate()
{
    base.OnApplyTemplate();
    ToggleButton = GetTemplateChild(ElementToggleButton) as ToggleButton;
}

void ToggleButton_MouseEnter(object sender, MouseEventArgs e)
{
    VisualStateManager.GoToState(this, "ToggleButtonOver", true);
}

void ToggleButton_MouseLeave(object sender, MouseEventArgs e)
{
    VisualStateManager.GoToState(this, "ToggleButtonOut", true);
}

void ToggleButton_Click(object sender, RoutedEventArgs e)
{
    if (String.IsNullOrEmpty(this.SearchText))
    {
        this.Text = String.Empty;
    }
    this.IsDropDownOpen = !this.IsDropDownOpen;
}

This code accesses the ToggleButton control defined in the Generic.xaml template using the base class’s GetTemplateChild method. Once the ToggleButton control is found it’s assigned to the ToggleButton property of our control which handles hooking up the Click, MouseEnter and MouseLeave events. The ToggleButton_Click event handler does the magic of making the AutoCompleteComboBox control look and feel like a standard ComboBox.

Step 7: Use the AutoCompleteComboBox Control

Once the custom control is finished and you successfully build it you can use the control in a Silverlight application. To do that, create a Silverlight application project and reference the control project created in Step 1 (or reference the dll that’s generated by the project). Within the XAML for your Silverlight application add a reference to the control’s namespace and assembly:

<Usercontrol x:Class="SilverlightApplication1"
    xmlns:controls="clr-namespace:YourCustomControlNamespace;assembly=YourCustomControlAssemblyName">
</UserControl>

Once the assembly and namespace are referenced you can define the control and bind items to it using it’s ItemSource property:

<controls:AutoCompleteComboBox ItemsSource="{Binding Jobs}" 
    Margin="5,0,5,10" Width="150"  HorizontalAlignment="Left"
    MinimumPopulateDelay="0" MinimumPrefixLength="0" />

If I had to pick out the key parts from these steps they’d be creating the Generic.xaml file, adding the TemplatePart attribute, setting the control’s DefaultStyleKey, overriding ApplyTemplate and calling GetTemplateChild to locate the ToggleButton control. These changes allow the AutoCompleteComboBox to look like a regular ComboBox while still allowing the user to type into it to filter the items.

Download Code

For more information about onsite, online and video training, mentoring and consulting solutions for .NET, SharePoint or Silverlight please visit http://www.thewahlingroup.com/.

Dan Wahlin's WebLog

DevConnections Conference Code and Slides

Passing Multiple Records to a Stored Procedure in SQL Server

Cleaning Up the Disabled State of a Silverlight Control using Expression Blend

Requiring SSL For ASP.NET MVC Controllers

Creating a Silverlight DataContext Proxy to Simplify Data Binding in Nested Controls

Figure 1 – All Systems go for binding

Figure 2 – Houston, we have a problem

Using a Static Resource When Binding Nested Controls

The DataContextProxy Class

Wrapping it Up

Building Line of Business Applications with Silverlight 3 – Pros and Cons

Silverlight 3 Pros

Silverlight 3 Cons

To Wrap It Up

So What’s a Silverlight Value Converter Anyway?

Creating a Value Converter

Value Converter Examples

BoolToVisibilityConverter

ListCountVisibilityConverter

NullToVisibilityConverter

StringTruncateConverter

Making Silverlight 3 Application Code More Compatible with Blend

Previewing Websites in Multiple Browsers with Expression Web 3’s SuperPreview

Running a WCF Service on IIS 7

HTTP Error 404.3 - Not Found

The page you are requesting cannot be served because of the extension configuration. If the page is a script, add a handler. If the file should be downloaded, add a MIME map.

Using Element to Element Binding for ToolTips in Silverlight 3

Simplifying the Process of Calling a WCF Service from Silverlight (or any .NET Application)

Silverlight 3 Released – Exciting Stuff Here!

Validating Properties in Silverlight Classes

Creating a ComboBox Style AutoCompleteBox Control in Silverlight

Step 1: Create a Silverlight Class Library

Step 2: Define the Control’s Template

Step 3: Add a TemplatePart Attribute

Step 4: Add the ToggleButton Property

Step 5: Set the DefaultStyleKey for the AutoCompleteComboBox Control

Step 6: Override ApplyTemplate and Handle Events

Step 7: Use the AutoCompleteComboBox Control