Here’s a link to the installer, if you don’t already have it on your system: http://www.microsoft.com/web/downloads/platform.aspx

Jump right to the toolkit install here: http://www.microsoft.com/web/gallery/install.aspx?appid=SilverlightToolkit
Or, a Twitter-friendly link: http://bit.ly/3eaT68

Simple installation experience

It’s quick and easy now to use the Silverlight Toolkit – no need to jump over to the CodePlex site.

Once starting the Web Platform Installer, you’ll find the Silverlight Toolkit under the ‘Web Platform’ tab, in the ‘Tools’ section:

The installation should only take a few seconds. Afterwards, you’ll find the controls inside Expression Blend 3, Visual Studio 2008 SP1 with the Silverlight Tools installed, and Visual Studio 2010 Beta 2.

About the Silverlight Toolkit

In case you’ve never used the Silverlight Toolkit, it’s never too late to start. The following controls have been part of the Silverlight Toolkit development process. You can find out more about the quality bands here.

Mature/SDK/Runtime AutoCompleteBox Calendar ChildWindow DataGrid DataPager DatePicker GridSplitter HeaderedItemsControl TabControl TreeView	Stable DockPanel Expander HeaderedContentControl Label NumericUpDown Viewbox WrapPanel
Preview Accordion Charting DataForm DomainUpDown ImplicitStyleManager LayoutTransformer Rating TimePicker TimeUpDown 11 designer visual themes	Experimental GlobalCalendar TransitioningContentControl TreeMap Drag and Drop support for items controls

More resources:

• You can also find the source code online here.
• Check out the Silverlight.net discussion forums for the controls
• There is an issue tracker page on CodePlex for reporting and voting on issues
• Read the changes between the July 2009 and October 2009 releases

You can also find out more about the Web Platform here and here. Hope this helps!

If you deliver your source ultimately to a Visual Studio 2008-targeted source project, or have issue adopting a beta product until its release, this is a pain.

I wrote a tool last month for round-trip converting Silverlight-specific solutions and .csproj files between the versions, and want to share it as-is, with no warranty, hoping someone finds it useful.

Here are two potential solutions for dealing with the conversion issue, actually the second builds from the first.

Use Source Control

If your project is not churning that often in added and removed files, source control is the easiest solution to this problem!

• Open your solution in Visual Studio 2010
• Allow the conversion wizard to complete
• When checking in, carefully revert the .csproj and .sln files (assuming no changes to their contents)

Easy enough. But not crisp enough!

Use my hacky program

Now assuming you are already using source control, then you can consider using my script/tool for performing the round-trip conversion. You still want to have everything in source control – you just never know.

Before we start

• This program will work on the current directory and all subdirectories
• It will modify read-only files
• It will consider all .csproj and .sln files, potentially destroying non-Silverlight project files – so use caution if the current directory or sub-directory contains other project types
• This is C#-only, though a similar exercise for .vbproj files would not be that bad
• This will delete .suo and .user files that may contain version-specific binary data, so you may lose your local settings (such as the current startup project you have set locally)
• This ‘works on my machine’ and I am not responsible for data loss in any way
• This code is not efficient nor elegant. Get over it! I did!

Download the binary and source

ThereAndBackAgain.zip [21.8K, Zip]

I have included the source, Ms-PL licensed, because though awful, maybe someone can do something much better with it!

Convert all C# projects and solutions to Visual Studio 2010

Move into the root directory of your solution in a command prompt window, and provide the path to the ThereAndBackAgain.exe file. It will recurse the current directory.

pushd c:\myEnlistment\myProject\Silverlight\

c:\tools\ThereAndBackAgain.exe 2010 <enter>

You’ll see a quick list of what is changed. You can run this on a directory tree that is already converted, and it should not be affected.

Convert back to Visual Studio 2008

Pretty similar:

pushd c:\myEnlistment\myProject\Silverlight\

c:\tools\ThereAndBackAgain.exe 2008 <enter>

Final note

This works for me. Uh and so no promises beyond that. I literally just diff’d a new VS 08 and VS 2010 Silverlight project and wrote something to move between the two. Nothing fancy.

If you go this route, remember to convert back your projects and solutions using the tool before checking in! You don’t want to break the build, or a teammates’ development experience.

Hope this helps. Again, I wrote this script specifically to meet my needs, but it is FAR from production-ready. You are on your own, feel free to take and run with this.

This advanced feature in Silverlight 3 allows libraries that your app depends on to be delivered outside the primary .Xap for your app, allowing the browser to cache the extensions for future use. This will speed up the startup experience for your frequent users if you update the app but don’t have changes to those libraries – it can save you bandwidth costs when hosting on a CDN, too!

We haven’t able to get the files included in the setup experience yet, so I wanted to share with the community the .extmap.xml files to use the feature before we release it in a future Silverlight Toolkit release.

Yes, the next release will have this feature built-in, so this is a stop-gap. Great details on how the feature works here.

What a library cache file looks like

The XML file is quite basic: it lists the assembly name, assembly version, public key token, and then the path information. Here’s the System.Windows.Controls.Toolkit.extmap.xml file:

<?xml version="1.0"?>
<manifest xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xmlns:xsd="http://www.w3.org/2001/XMLSchema">
  <assembly>
    <name>System.Windows.Controls.Toolkit</name>
    <version>2.0.5.0</version>
    <publickeytoken>31bf3856ad364e35</publickeytoken>
    <relpath>System.Windows.Controls.Toolkit.dll</relpath>
    <extension downloadUri="System.Windows.Controls.Toolkit.zip" />
  </assembly>
</manifest>

Downloading and install the files

Download a ZIP (4 KB) of the extmaps for the toolkit here. These files work with both the July 2009 and October 2009 releases of the toolkit, though I’d recommend using the latest available official release!

After downloading, extract the files. For the best experience, copy the files side-by-side with the Silverlight Toolkit binaries. We added a link to the Binaries folder in the October release of the toolkit to make it quick to get there, too:

On my 64-bit machine, the folder is ‘C:\Program Files (x86)\Microsoft SDKs\Silverlight\v3.0\Toolkit\Oct09\Bin’

You’ll be asked to elevate when you copy in the extracted .extmap.xml files, as the program location is system-wide. Allow the operation by clicking ‘Continue’:

Now you’re ready to go – the Silverlight build tasks will detect the presence of these small XML files and use that information to zip up the dependent libraries for your app.

How this can help

Now, I have this amazing Silverlight 3 app that uses the charting components from the Silverlight Toolkit:

When I build the app, I see that the original .Xap file is 345 KB. This is a debug build of the app, btw.

It includes the toolkit’s charting components, the primary toolkit assembly, plus the control library from the Silverlight SDK.

It is all of great value, but does add up in bytes – and the bytes for those libraries don’t change very often, making them a great target for this caching.

Turning on the feature for your Silverlight Application project

You need to opt-in to the application library caching feature.

Right-click on your Silverlight application project in Visual Studio (applies the same in Visual Studio 2008 and Visual Studio 2010 Beta 2) and select ‘Properties’

Navigate to the Silverlight tab and check the ‘Reduce XAP size by using application library caching’ box:

Save the changes and then build your project. Now, we see that there are 3 new .Zip files, and the original .Xap. The .Xap is only 41 KB, plus the first time someone uses your application from the server, their browser will also go ahead and download the 3 .Zip files equaling the rest of the original app’s size.

NOTE: The reason this is opt-in is that it’s more involved for publishing, since you need to remember that not only do you need the .Xap file for your app, you also need to store the .Zip file(s) of the libraries alongside as well.

This will be a feature in a future release of the Silverlight Toolkit

We shipped the October 2009 release of the Silverlight Toolkit on Monday, focusing primarily on delivering the necessary design features for enabling a great Visual Studio 2010 Beta 2 story.

We’ve also been working diligently on longer-lead items for the next release of the Silverlight Toolkit, such as integrating the generation of these .extmap.xml files into our build process. Next, we’ll add them to the setup and with the next release, you won’t need this blog post to take advantage of the feature.

If you’d like to learn more about the feature, Tim Heuer really covered this well earlier this year in this post.

Hope this helps. Special thanks to user ‘TimmyG’ on CodePlex who initially reminded us of this!

Here’s what you need to get going:

Download the Silverlight Toolkit installer for Silverlight 3 (source code included in the installer, or online here)
Silverlight.net discussion forums for the controls
Issue tracker page on CodePlex
Changes between the July 2009 and October 2009 releases

Our installations are side-by-side friendly, so even if you have a previous release, you’ll want to install this one for sure.

Here are a few highlights from this release:

Awesome Visual Studio 2010 design experience

The fully interactive design surface in Visual Studio 2010 really completes the Silverlight development experience. The Silverlight Toolkit contains a rich set of metadata that makes the controls even easier to use.

Drag & Drop

A set of drag and drop targets for ListBox, DataGrid, charts, etc., allows you to add drag & drop support to these controls in a single line of XAML (by enclosing them in a <toolkit:ListBoxDragDropDecorator /> element). Rich LOB-style apps are even easier to build now! Find out more here.

Charting improvements

Continued advancement of the charting APIs, optimized for extensibility and performance. Details.

About the Silverlight Toolkit

In case you’ve never used the Silverlight Toolkit, here’s what you’ll find inside:

Hope you enjoy the new features!

My temporary obsession with 2D barcodes came about after I installed the awesome Starbucks Card Mobile app for my iPhone and drove by the Madison Park Starbucks on my way to Redmond, trying out their sweet mobile payment experience. The app worked great – I can only imagine how nice it will be once I can leave my physical Starbucks card at home!

Note: Image is provided by Starbucks, and not a real bar-code that’ll get you free coffee

I’ve heard stories for years about how many countries worldwide are super-high tech, using QR two-dimensional barcodes everywhere, but this was my first experience as a regular consumer, other than seeing them on UPS shipping labels, expensive-looking gadgets in stores, and photos of interesting places:

 
Photo by avlxyz’, CC-attribution

There are so many versions of the QR code standard now that I settled on Version 2, which doesn’t hold as much data as some of the more complex versions – but the library iteself supports them all if you embed a few additional resource files into the assembly.

So what I set and did to get the bare minimum working:

• Used Joe Stegman’s EditableImage and PngEncoder to create a raster image on the client
• Found an open-source .NET library that performs at least QR encoding – I found and settled on QRcode on The Code Project site, licensed via the permissive CPOL – this work of user ‘twit88’ is the bulk of the awesomeness we’re talking about here
• Adapted the library to work with the reduced BCL set (replace ArrayList with generic collections, etc.). I also had to replace some System.Drawing functionality with other equivalents, plus write a quick ToArgb extension method
• Create a simple control, QRBarcode, that has text and barcode color properties

Here’s the resulting control in use (click to experience the app):

It was a quick project, so now, I just need some Silverlight mobile – argh! There isn’t much application to a standard Silverlight app today, unless you want to use SaveFileDialog to store the image to the user’s homepage, or let them take a digital picture of the code. But hey, it was fun!

If you download the project, you’ll see that I purposely excluded a lot of the various QA code spec versions from the final assembly, to cut down its size, plus I commented out some of the encode capability – but overall it went together really quickly and is a solid library, for sure.

Download the zipped up solution with everything you need to experiment (Silverlight 3, C#, 1.1 MB)

Related note: Jeff Atwood posted a neat comparison of data over the years, back in July.

Just add the following class to your project. The extension class is internal, and defined in the same namespace as Color, so it’ll always be accessible:

// (c) Copyright Microsoft Corporation.
// This source is subject to the Microsoft Public License (Ms-PL).
// Please see http://go.microsoft.com/fwlink/?LinkID=131993 for details.
// All other rights reserved.

namespace System.Windows.Media
{
    internal static class ColorExtensions
    {
        public static int ToArgb(this Color color)
        {
            int argb = color.A << 24;
            argb += color.R << 16;
            argb += color.G << 8;
            argb += color.B;

            return argb;
        }
    }
}

Hope this helps!

(And yes, I tried to add this information to the MSDN documentation on ToArgb() using the Community Content feature, but apparently it didn’t like the input. Figuring the search engines will catalog this well enough.)

NBC has really made a great call here to use Silverlight, paired with Smooth Streaming technology. The rich Silverlight app is very nice, Vertigo did a great job building it to tie everything together.

Accordion control for the win!

One thing that I was really happy to notice in the player app was one of the Preview controls from the Silverlight Toolkit, so I just wanted to take a minute to point that out…

Here’s a screen shot of the player. On the far right corner, the “Stats” tab contains team stats and other information. The user interface control that lets you decide between the sets of data in this example is the Silverlight Toolkit’s Accordion control.

It’s a nice vote of confidence, seeing this control in use – as a Preview control (quality band definitions here), it is intended to meet basic usage scenarios, has been released to get feedback, and can be considered an ‘Alpha’ quality control. Maybe we’ll need to prop that up a level with the next release, it looks to be working great!

If you’ve used the control before, you’ll probably recognize that there are two AccordionItems: one with the header ‘Offensive Leaders’, another with the header ‘Team Stats’. The developers at Vertigo have done a great job of re-templating the control to make it look really nice, plus setup data binding all these fields inside the content of the accordion items.

The Accordion control was developed by Ruurd Boeke, a member of the Silverlight team. He’s created a great set of guides on the control, I invite you to check them out:

• Part 1 – accordion
• Part 2 – accordion item
• Part 3 – expandable content control
• Part 4 – retemplating, real world example
• Part 5 – accordion button

To get the control, download and install the latest Silverlight Toolkit release. The Accordion control is available for both Silverlight 2 and Silverlight 3 development.

Next game is 9/20 at 8:00 PM ET

Tune in for the next football game, where the New York Giants will play the Dallas Cowboys. Watch it here.

Learn more about the Vertigo player

To learn more about the awesome set of features in this online football experience, check out Bob Cowherd’s blog post that goes through the special features. The devs at Vertigo are top-notch and have done an amazing job pulling this all together.

While working with teams throughout Microsoft, and trolling Silverlight forums on Silverlight.net and StackOverflow, I’ve come across a few situations where I’ve wanted to share some guidelines for custom control development. Over the next few posts, I’d like to occasionally share my thoughts on this topic, and whatever tips seem pertinent at the time of posting.

I do admit that there’s a lot of flexibility in control development, so I’ll be basing a lot of my tips on both official and unofficial practices on the Silverlight Toolkit team. And I understand if you don’t agree with everything I have to say. But I do hope this information will be useful!

Contain your classes

Controls and classes should always be in their own unique file, instead of having multiple controls or classes in a single file. This includes enums and structs, etc.

So the Dock enum belongs in a file called Dock.cs.

Typically classes are broken up into folders of shared features or sub-namespaces.

Keep your regions under control

Regions that serve no real purpose have no need in your code. Grouping all “Public Methods" into a region and having another region with “Private Methods” isn’t helpful to most people.

However, grouping related concepts, interface implementations, and complex algorithms into regions can be a great way to make that 2,000 line file feel a little more navigable.

We always place DependencyProperty declarations and change handlers inside clear regions.

Be consistent about where fields belong

Fields should always be private, only accessible to the control implementation. Whether you place them at the top of the file, the absolute bottom, or alongside related methods and properties (such as in a #region for a DependencyProperty), is a choice that should be consistent within a codebase.

We often try and place backing fields near their respective properties.

Break comments at 80 characters

By maintaining a visual break for comments, they become easier to digest while looking through code, regardless of monitor resolution.

To help with this, you can use a nice registry hack to place a visual guide in the Visual Studio editor (pictured in the above screen capture). Here’s the registry key to set (you can change the color and/or character placement as well):

[HKEY_CURRENT_USER\Software\Microsoft\VisualStudio\9.0\Text Editor]
"Guides"="RGB(220,220,220) 80"

Consider writing great XML comments

By writing “great” XML comments, as they would be written in programmer documentation by a writer, you’ll save the time for anyone documenting the controls, improve the IntelliSense experience, and over time find that your code is very clear and crisp.

You can even consider using SandCastle for generating MSDN-style documentation from your code in this case.

If you find yourself writing too much in the comments, your method or feature may be too complex – consider simplifying.

The style we use on the Silverlight Toolkit consists of this:

• Comments end with a period
• Properties start with “Gets or sets”, or “Gets or sets a value indicating whether”
• Properties that are only a getter only have the “Gets” portion of “Gets or sets”, etc.
• Constructors use wording such as “Initializes a new instance of Type.”

Here’s a set of example comments borrowed from the Silverlight team…

Class comments:

/// <summary>
/// Represents a control that displays hierarchical data in a tree structure
/// that has items that can expand and collapse.
/// </summary>
public partial class TreeView : ItemsControl, IUpdateVisualState
{
}

A private field:

        /// <summary>
        /// A value indicating whether a read-only dependency property change
        /// handler should allow the value to be set.  This is used to ensure
        /// that read-only properties cannot be changed via SetValue, etc.
        /// </summary>
        private bool _allowWrite;

A public property:

        /// <summary>
        /// Gets the selected item in a
        /// <see cref="T:System.Windows.Controls.TreeView" />.
        /// </summary>
        /// <value>
        /// The currently selected item or null if no item is selected. The
        /// default value is null.
        /// </value>
        public object SelectedItem
        { get; set; }

An event handler method:

        /// <summary>
        /// SelectedItemProperty property changed handler.
        /// </summary>
        /// <param name="d">TreeView that changed its SelectedItem.</param>
        /// <param name="e">Event arguments.</param>
        private static void OnSelectedItemPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        { /* ... */ }

Public event comments:

        /// <summary>
        /// Occurs when the value of the
        /// <see cref="P:System.Windows.Controls.TreeView.SelectedItem" />
        /// property changes.
        /// </summary>
        public event RoutedPropertyChangedEventHandler<object> SelectedItemChanged;

Constructor:

        /// <summary>
        /// Initializes a new instance of the
        /// <see cref="T:System.Windows.Controls.TreeView" /> class.
        /// </summary>
        public TreeView()
        {
            DefaultStyleKey = typeof(TreeView);
            ItemsControlHelper = new ItemsControlHelper(this);
            Interaction = new InteractionHelper(this);
        }

On template application:

        /// <summary>
        /// Builds the visual tree for the
        /// <see cref="T:System.Windows.Controls.TreeView" /> control when a new
        /// control template is applied.
        /// </summary>
        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
        }

Bool property with getter and setters:

        /// <summary>
        /// Gets or sets a value indicating whether the drop-down portion of
        /// the control is open.
        /// </summary>
        /// <value>
        /// True if the drop-down is open; otherwise, false. The default is
        /// false.
        /// </value>
        public bool IsDropDownOpen
        {
            get { return (bool)GetValue(IsDropDownOpenProperty); }
            set { SetValue(IsDropDownOpenProperty, value); }
        }

Your event handlers should be thread-safe

Firing events should be done by first storing the handler in a local variable, similar to this:

public event PropertyChangedEventHandler PropertyChanged;

private void OnPropertyChanged(string propertyName)
{
    PropertyChangedEventHandler handler = PropertyChanged;
    if (handler != null)
    {
        handler(this, new PropertyChangedEventArgs(propertyName));
    }
}

Fire control events on the user interface thread

Silverlight only have a single UI thread. However, if you’re interacting with the network or worker threads, the users of your control should not have to worry about being on the UI thread.

Expect that all your events will likely end up changing UIElements that will be checking the thread.

Here’s a simple, efficient way to make sure that your events fire on the UI thread:

/// <summary>
/// Occurs when the DownloadProgress property has changed.
/// </summary>
public event RoutedEventHandler DownloadProgressChanged;

private void OnDownloadProgressChanged(object sender, RoutedEventArgs args)
{
    if (!Dispatcher.CheckAccess())
    {
        Dispatcher.BeginInvoke(() => OnDownloadProgressChanged(sender, args));
        return;
    }

    var handler = DownloadProgressChanged;
    if (handler != null)
    {
        handler(this, args);
    }
}

Miscellaneous C# things

• Don’t qualify members using “this” or “base” unless required to disambiguate
• Prefix private fields with an underscore
• Feel free to use automatic properties, but do not use private automatic properties.
• Use lowercase ‘string’ when calling methods on it such as ‘string.IsNullOrEmpty’, instead of ‘String.IsNullOrEmpty’.
• Similar, refer to and use “object” instead of “Object” for locks and other references to generic objects

Organize your Using statements

Instead of placing fully qualified type names with namespaces (System.Windows.Controls.Button is not great – just add a using statement for System.Windows.Controls and refer to this as Button), use the built-in Using statement refactoring support in Visual Studio:

You want your using statements to be the proper subset of namespaces, and in alphabetical order.

Mind the .NET Framework Design Guidelines

When you’re building custom controls, you’re designing a rich API that will enable interesting scenarios for your target developers.

The .NET Framework Design Guidelines book by Krzysztof Cwalina and Brad Abrams is a really important reference that should be regarded to help assist in the design of your framework.

Depending on the target audience of your work, this may be more or less important: an internal development project may not have the same goals as a custom control that you’d like to sell to other developers.

If you see a specific pattern in existing Silverlight or WPF controls, there’s precedent to use a similar implementation in your own controls for the convenience of developers used to the platform.

Off hand, you should consider some of these tips from the book:

Remain CLS Compliant

So that you don’t shut out VB.NET and other language users from the control API, make sure to remain CLS compliant.

This typically translates into situations where you want to expose a generic collection interface instead of an array, for instance. Don’t use the same name, differing only in case.

Good, compliant code:

public IList<interestingitem> InterestingItems { get; }

Code that shouldn’t be exposed in a custom control with public visibility:

public InterestingItem[] InterestingItems { get; }

Naming guidelines

All .NET components typically use PascalCasing for properties, members, and events (PMEs). You’ll find camelCasing in use for parameter names only.

You’ll want to be careful about the use of abbreviations and acronyms, and how compound words should appear in your programming interfaces.

What’s next?

Let me know in the comments what you think, and especially if you have any particular control development topic I should cover in a future post. Hope you like this!

Here’s the VB.NET implementation of the control:

Imports System.Windows.Controls.Primitives

Public Class HighlightingTextBlock
    Inherits Control

    ' Contants
    ' --------
    Private Const TextBlockName As String = "Text"

    ' Private fields
    ' --------------
    Private Inlines As List(Of Inline)
    Private TextBlock As TextBlock

    ' Dependency properties
    ' ---------------------

    '
    ' HighlightBrush
    '
    Public Shared ReadOnly HighlightBrushProperty As DependencyProperty = DependencyProperty.Register("HighlightBrush", GetType(Brush), GetType(HighlightingTextBlock), New PropertyMetadata(Nothing, New PropertyChangedCallback(AddressOf HighlightingTextBlock.OnHighlightBrushPropertyChanged)))

    Public Property HighlightBrush() As Brush
        Get
            Return TryCast(MyBase.GetValue(HighlightingTextBlock.HighlightBrushProperty), Brush)
        End Get
        Set(ByVal value As Brush)
            MyBase.SetValue(HighlightingTextBlock.HighlightBrushProperty, value)
        End Set
    End Property

    Private Shared Sub OnHighlightBrushPropertyChanged(ByVal d As DependencyObject, ByVal e As DependencyPropertyChangedEventArgs)
        TryCast(d, HighlightingTextBlock).ApplyHighlighting()
    End Sub

    '
    ' HighlightFontWeight
    '
    Public Shared ReadOnly HighlightFontWeightProperty As DependencyProperty = DependencyProperty.Register("HighlightFontWeight", GetType(FontWeight), GetType(HighlightingTextBlock), New PropertyMetadata(FontWeights.Normal, New PropertyChangedCallback(AddressOf HighlightingTextBlock.OnHighlightFontWeightPropertyChanged)))

    Public Property HighlightFontWeight() As FontWeight
        Get
            Return DirectCast(MyBase.GetValue(HighlightingTextBlock.HighlightFontWeightProperty), FontWeight)
        End Get
        Set(ByVal value As FontWeight)
            MyBase.SetValue(HighlightingTextBlock.HighlightFontWeightProperty, value)
        End Set
    End Property

    Private Shared Sub OnHighlightFontWeightPropertyChanged(ByVal d As DependencyObject, ByVal e As DependencyPropertyChangedEventArgs)
        Dim source As HighlightingTextBlock = TryCast(d, HighlightingTextBlock)
        Dim value As FontWeight = DirectCast(e.NewValue, FontWeight)
    End Sub

    '
    ' HighlightText
    '
    Public Shared ReadOnly HighlightTextProperty As DependencyProperty = DependencyProperty.Register("HighlightText", GetType(String), GetType(HighlightingTextBlock), New PropertyMetadata(New PropertyChangedCallback(AddressOf HighlightingTextBlock.OnHighlightTextPropertyChanged)))

    Public Property HighlightText() As String
        Get
            Return TryCast(MyBase.GetValue(HighlightingTextBlock.HighlightTextProperty), String)
        End Get
        Set(ByVal value As String)
            MyBase.SetValue(HighlightingTextBlock.HighlightTextProperty, value)
        End Set
    End Property

    Private Shared Sub OnHighlightTextPropertyChanged(ByVal d As DependencyObject, ByVal e As DependencyPropertyChangedEventArgs)
        TryCast(d, HighlightingTextBlock).ApplyHighlighting()
    End Sub

    '
    ' Text
    '
    Public Shared ReadOnly TextProperty As DependencyProperty = DependencyProperty.Register("Text", GetType(String), GetType(HighlightingTextBlock), New PropertyMetadata(New PropertyChangedCallback(AddressOf HighlightingTextBlock.OnTextPropertyChanged)))

    Public Property [Text]() As String
        Get
            Return TryCast(MyBase.GetValue(HighlightingTextBlock.TextProperty), String)
        End Get
        Set(ByVal value As String)
            MyBase.SetValue(HighlightingTextBlock.TextProperty, value)
        End Set
    End Property

    Private Shared Sub OnTextPropertyChanged(ByVal d As DependencyObject, ByVal e As DependencyPropertyChangedEventArgs)
        Dim source As HighlightingTextBlock = TryCast(d, HighlightingTextBlock)
        If (Not source.TextBlock Is Nothing) Then
            Do While (source.TextBlock.Inlines.Count > 0)
                source.TextBlock.Inlines.RemoveAt(0)
            Loop
            Dim value As String = TryCast(e.NewValue, String)
            source.Inlines = New List(Of Inline)
            If (Not [value] Is Nothing) Then
                Dim i As Integer
                For i = 0 To [value].Length - 1
                    Dim [run] As New Run
                    [run].Text = value.Chars(i).ToString
                    Dim inline As Inline = run
                    source.TextBlock.Inlines.Add(inline)
                    source.Inlines.Add(inline)
                Next i
                source.ApplyHighlighting()
            End If
        End If
    End Sub

    ' Initializes a new instance of the HighlightingTextBlock control
    Public Sub New()
        Me.DefaultStyleKey = GetType(HighlightingTextBlock)
    End Sub

    ' Enforce the template
    Private Sub OnLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
        Me.OnApplyTemplate()
    End Sub

    ' Grab the template parts
    Public Overrides Sub OnApplyTemplate()
        MyBase.OnApplyTemplate()
        Me.TextBlock = TryCast(MyBase.GetTemplateChild(TextBlockName), TextBlock)
        Dim text As String = Me.Text
        Me.Text = Nothing
        Me.Text = [text]
    End Sub

    ' Update highlighting using a simple walking algorithm
    Private Sub ApplyHighlighting()
        If (Not Me.Inlines Is Nothing) Then
            Dim text As String = IIf(Me.Text <> Nothing, Me.Text, String.Empty)
            Dim highlight As String = IIf(Me.HighlightText <> Nothing, Me.HighlightText, String.Empty)
            Dim compare As StringComparison = StringComparison.OrdinalIgnoreCase
            Dim cur As Integer = 0
            Do While (cur < [text].Length)
                Dim i As Integer = IIf((highlight.Length = 0), -1, [text].IndexOf(highlight, cur, [compare]))
                i = IIf((i < 0), [text].Length, i)
                Do While ((cur < i) AndAlso (cur < [text].Length))
                    Me.Inlines.Item(cur).Foreground = MyBase.Foreground
                    Me.Inlines.Item(cur).FontWeight = MyBase.FontWeight
                    cur += 1
                Loop
                Dim start As Integer = cur
                Do While ((cur < (start + highlight.Length)) AndAlso (cur < [text].Length))
                    Me.Inlines.Item(cur).Foreground = Me.HighlightBrush
                    Me.Inlines.Item(cur).FontWeight = Me.HighlightFontWeight
                    cur += 1
                Loop
            Loop
        End If
    End Sub

End Class

Related posts

• Creating a highlighting text block for Silverlight 3, revisited
• Building a highlighting AutoCompleteBox
• Silverlight 3 element name binding improvements

This short post re-creates the HighlightingTextBlock control, using the Templated Silverlight Control item template that ships in the Silverlight Tools. When I last blogged about the highlighting text block control, I had to describe in detail how to go about creating a library, creating the default control styles file (Generic.xaml), setting properties, and putting it all together.

Now it is a lot easier! Using the advanced copy-and-paste coding technique, you can create and build this control in about 2 minutes.

Create a new Silverlight Class Library Project

• Open Visual Studio 2008 SP1
• File | New Project, Visual C# | Silverlight | Silverlight Class Library project type

Remove Class1.cs

The default class file, Class1.cs, can be removed. Right-click on it in the Solution Explorer and select the ‘Delete’ menu item.

Use the ‘Silverlight Templated Control’ template

The new template is great since it creates a simple class for the control, sets up the default style key, and then creates/modifies the Generic.xaml theme file for the library, setting all the right properties along the way.

• Click on the Project menu (or right-click on the project in the Solution Explorer)
• Select ‘Add New Item’
• Use the ‘Silverlight Templated Control’ template
• Change the name from TemplatedControl1.cs to HighlightingTextBlock.cs
• Click ‘Add’

Insert the control code

Borrowed from my previous post on the topic, just paste this class’ code into the namespace, replacing what is already there:

/// <summary>
    /// A specialized highlighting text block control.
    /// </summary>
    public partial class HighlightingTextBlock : Control
    {
        /// <summary>
        /// The name of the TextBlock part.
        /// </summary>
        private string TextBlockName = "Text";

        /// <summary>
        /// Gets or sets the text block reference.
        /// </summary>
        private TextBlock TextBlock { get; set; }

        /// <summary>
        /// Gets or sets the inlines list.
        /// </summary>
        private List<Inline> Inlines { get; set; }

        #region public string Text
        /// <summary>
        /// Gets or sets the contents of the TextBox.
        /// </summary>
        public string Text
        {
            get { return GetValue(TextProperty) as string; }
            set { SetValue(TextProperty, value); }
        }

        /// <summary>
        /// Identifies the Text dependency property.
        /// </summary>
        public static readonly DependencyProperty TextProperty =
            DependencyProperty.Register(
                "Text",
                typeof(string),
                typeof(HighlightingTextBlock),
                new PropertyMetadata(OnTextPropertyChanged));

        /// <summary>
        /// TextProperty property changed handler.
        /// </summary>
        /// <param name="d">AutoCompleteBox that changed its Text.</param>
        /// <param name="e">Event arguments.</param>
        private static void OnTextPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            HighlightingTextBlock source = d as HighlightingTextBlock;

            if (source.TextBlock != null)
            {
                while (source.TextBlock.Inlines.Count > 0)
                {
                    source.TextBlock.Inlines.RemoveAt(0);
                }
                string value = e.NewValue as string;
                source.Inlines = new List<Inline>();
                if (value != null)
                {
                    for (int i = 0; i < value.Length; i++)
                    {
                        Inline run = new Run { Text = value[i].ToString() };
                        source.TextBlock.Inlines.Add(run);
                        source.Inlines.Add(run);
                    }

                    source.ApplyHighlighting();
                }
            }
        }

        #endregion public string Text

        #region public string HighlightText
        /// <summary>
        /// Gets or sets the highlighted text.
        /// </summary>
        public string HighlightText
        {
            get { return GetValue(HighlightTextProperty) as string; }
            set { SetValue(HighlightTextProperty, value); }
        }

        /// <summary>
        /// Identifies the HighlightText dependency property.
        /// </summary>
        public static readonly DependencyProperty HighlightTextProperty =
            DependencyProperty.Register(
                "HighlightText",
                typeof(string),
                typeof(HighlightingTextBlock),
                new PropertyMetadata(OnHighlightTextPropertyChanged));

        /// <summary>
        /// HighlightText property changed handler.
        /// </summary>
        /// <param name="d">AutoCompleteBox that changed its HighlightText.</param>
        /// <param name="e">Event arguments.</param>
        private static void OnHighlightTextPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            HighlightingTextBlock source = d as HighlightingTextBlock;
            source.ApplyHighlighting();
        }

        #endregion public string HighlightText

        #region public Brush HighlightBrush
        /// <summary>
        /// Gets or sets the highlight brush.
        /// </summary>
        public Brush HighlightBrush
        {
            get { return GetValue(HighlightBrushProperty) as Brush; }
            set { SetValue(HighlightBrushProperty, value); }
        }

        /// <summary>
        /// Identifies the HighlightBrush dependency property.
        /// </summary>
        public static readonly DependencyProperty HighlightBrushProperty =
            DependencyProperty.Register(
                "HighlightBrush",
                typeof(Brush),
                typeof(HighlightingTextBlock),
                new PropertyMetadata(null, OnHighlightBrushPropertyChanged));

        /// <summary>
        /// HighlightBrushProperty property changed handler.
        /// </summary>
        /// <param name="d">HighlightingTextBlock that changed its HighlightBrush.</param>
        /// <param name="e">Event arguments.</param>
        private static void OnHighlightBrushPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            HighlightingTextBlock source = d as HighlightingTextBlock;
            source.ApplyHighlighting();
        }
        #endregion public Brush HighlightBrush

        #region public FontWeight HighlightFontWeight
        /// <summary>
        /// Gets or sets the font weight used on highlighted text.
        /// </summary>
        public FontWeight HighlightFontWeight
        {
            get { return (FontWeight)GetValue(HighlightFontWeightProperty); }
            set { SetValue(HighlightFontWeightProperty, value); }
        }

        /// <summary>
        /// Identifies the HighlightFontWeight dependency property.
        /// </summary>
        public static readonly DependencyProperty HighlightFontWeightProperty =
            DependencyProperty.Register(
                "HighlightFontWeight",
                typeof(FontWeight),
                typeof(HighlightingTextBlock),
                new PropertyMetadata(FontWeights.Normal, OnHighlightFontWeightPropertyChanged));

        /// <summary>
        /// HighlightFontWeightProperty property changed handler.
        /// </summary>
        /// <param name="d">HighlightingTextBlock that changed its HighlightFontWeight.</param>
        /// <param name="e">Event arguments.</param>
        private static void OnHighlightFontWeightPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            HighlightingTextBlock source = d as HighlightingTextBlock;
            FontWeight value = (FontWeight)e.NewValue;
        }
        #endregion public FontWeight HighlightFontWeight

        /// <summary>
        /// Initializes a new HighlightingTextBlock class.
        /// </summary>
        public HighlightingTextBlock()
        {
            DefaultStyleKey = typeof(HighlightingTextBlock);
            Loaded += OnLoaded;
        }

        /// <summary>
        /// Loaded method handler.
        /// </summary>
        /// <param name="sender">The loaded event.</param>
        /// <param name="e">The event data.</param>
        private void OnLoaded(object sender, RoutedEventArgs e)
        {
            OnApplyTemplate();
        }

        /// <summary>
        /// Override the apply template handler.
        /// </summary>
        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            // Grab the template part
            TextBlock = GetTemplateChild(TextBlockName) as TextBlock;

            // Re-apply the text value
            string text = Text;
            Text = null;
            Text = text;
        }

        /// <summary>
        /// Apply the visual highlighting.
        /// </summary>
        private void ApplyHighlighting()
        {
            if (Inlines == null)
            {
                return;
            }

            string text = Text ?? string.Empty;
            string highlight = HighlightText ?? string.Empty;
            StringComparison compare = StringComparison.OrdinalIgnoreCase;

            int cur = 0;
            while (cur < text.Length)
            {
                int i = highlight.Length == 0 ? -1 : text.IndexOf(highlight, cur, compare);
                i = i < 0 ? text.Length : i;

                // Clear
                while (cur < i && cur < text.Length)
                {
                    Inlines[cur].Foreground = Foreground;
                    Inlines[cur].FontWeight = FontWeight;
                    cur++;
                }

                // Highlight
                int start = cur;
                while (cur < start + highlight.Length && cur < text.Length)
                {
                    Inlines[cur].Foreground = HighlightBrush;
                    Inlines[cur].FontWeight = HighlightFontWeight;
                    cur++;
                }
            }
        }
    }

Then, refactor the Using statements to make the code a little crisper:

• Right-click on one of the ‘using’ statements at the top of the file
• Select ‘Organize Usings’, then ‘Remove and Sort’

Define the default control style

Now, Generic.xaml is already created in the Themes folder – so go ahead and open it, then use this for the control template. Our default style is simple: sets the default highlight brush color, plus a single template part – a text block named ‘Text’.

<Style TargetType="local:HighlightingTextBlock">
        <Setter Property="HighlightBrush" Value="Blue" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:HighlightingTextBlock">
                    <TextBlock x:Name="Text" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Build the project, and you’re good to go and use that control now. Hope this helps!