Ian T. Lackey (ITLackey)

Role Based Silverlight Behaviors

webmaster@openlightgroup.net — Thu, 27 May 2010 06:13:47 GMT

Well working on a few WCF RIA Services projects a need for the UI to update based on what roles the current user belongs to came up with each project. To make this easier for all of us working on these projects I created some behaviors that accepts a list of roles and updates the UI accordingly. I decided to include this in an open source library that is available at the associated OpenLight Group Common CodePlex project site. In this article we will discuss the base class used for all of the role based behaviors and look at the RoleBasedEnabledBehavior as an example of how to implement the base class.

The first class we will look at is the abstract BaseRoleBasedBehavior class. This class is takes a generic parameter that is constrained to DependencyObject to keep it consistent with Behavior base class.

public abstract class BaseRoleBasedBehavior
        : Behavior where T : DependencyObject

BaseRoleBaseBehavior includes a property to hold the list of role names:

 
[Category("Security Settings")]
[Description("Associated control will only be visible if the current user is a member of one or more of these roles.")]
public List<string> AllowedRoles { get; set; }

The constructor handles initializing the list of roles and wiring handlers to the LoggedIn and LoggedOut events of the current webcontext:

 
public BaseRoleBasedBehavior()
{
	this.AllowedRoles = new List<string>();
	if (DesignTimeHelper.IsRuntime)
	{
		WebContextBase.Current.Authentication.LoggedIn += 
			new System.EventHandler(UpdateAssociatedObject);
		WebContextBase.Current.Authentication.LoggedOut += 
			new System.EventHandler(UpdateAssociatedObject);
	}
}

There are a few items to note in this method.

The call to DesignTimeHelper.IsRuntime – this is a static class also included in the common library that is used to allow for a good design time experience. As in this example, wiring handlers to the current WebContext at design time would throw an exception.
The use of WebContextBase – the prevents the need to include the RIA services web project that will generate the concrete WebContext class.
Marking the UpdateAssociatedObject method as abstract allows each inheriting behavior to handle the authentication events as needed.

protected abstract void UpdateAssociatedObject(object sender, AuthenticationEventArgs e);

Another example of using the DesignTime helper is when checking the current user’s membership to a role. In this case, the helper prevents the designer from calling a method on the User object that would be null at design time. This method is included to simplify checks for all of the behaviors that will inherit from this base class.

protected bool IsInRole(string roleName)
{
	if (DesignTimeHelper.IsRuntime)
	{
		return WebContextBase.Current.Authentication.User.IsInRole(roleName);
	}
	else
	{
		return true;
	}
}

As with all behaviors, the OnAttached and OnDetaching methods are implemented:

protected override void OnAttached()
{
	base.OnAttached();
	this.UpdateAssociatedObject(this, null);
}
protected override void OnDetaching()
{
	base.OnDetaching();
}

Notice that the UpdateAssociatedObject is called from the OnAttached method to ensure that the UI is updated when the behavior is applied as well as when the user logs in or out. With that our base class is completed. Now to implement a role based behavior we simply need to inherit from this class and implement the UpdateAssociatedObject method.

Here is an example of a behavior that disables a control if the current user is not in one of the allowed roles:

public class RoleBasedEnabledBehavior
	 : BaseRoleBasedBehavior 
{
	protected override void UpdateAssociatedObject(object sender, AuthenticationEventArgs e)
	{
		this.AssociatedObject.IsEnabled =
			(this.AllowedRoles.Where(r => IsInRole(r)).Count() > 0);
	}
}

By using the Control type for the generic parameter we gain access to the enabled property of the AssociatedObject property. All that is left to do is check to see if the user is a member of any of the roles specified in the AllowedRoles property of the base class. By using LINQ and the IsInRole method of the base class, this becomes a single line of code to implement the functionality of this behavior.

It is now simple to disable a control based on the current user’s role membership, like so:

<Button Content="Button">
	<i:Interaction.Behaviors>
		<behaviors:RoleBasedEnabledBehavior>
			<behaviors:RoleBasedEnabledBehavior.AllowedRoles>
				<System:String>stringSystem:String>
			behaviors:RoleBasedEnabledBehavior.AllowedRoles>
		behaviors:RoleBasedEnabledBehavior>
	i:Interaction.Behaviors>
Button>

Note: Make sure that the interactivity, system and behaviors namespaces are imported:

 
xmlns:behaviors="clr-namespace:OpenLightGroup.Common.Behaviors;assembly=OpenLightGroup.Common"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:System="clr-namespace:System;assembly=mscorlib"

Again both the base class and the implementing behavior are available in the OpenLight Common Library here: http://olgcommon.codeplex.com/

Hope this sparks some innovation… or at the very least helps shave off some time spent coding for someone ;)

RIA Services - IIS6 Virtual Directory Deployment

webmaster@openlightgroup.net — Thu, 08 Apr 2010 21:59:57 GMT

A while back I made a post about using Windows Authentication with RIA Services and this post builds upon the topics discussed there. To further complicate the situation I needed to deploy a RIA services app to a Virtual Directory inside of a sub-folder in the IIS web root. To illustrate consider this URL pattern: https://intranet.companyname.com/division/applicationname

In this setup division is simply a file system folder inside of the root folder used by the IIS6 web site. Application name is an IIS6 Virtual Directory created under the division folder. For example: https://intranet.mycompany.com/accounting/costcalculator

When deploying to the virtual directory the Silverlight application spits out several 404 errors when looking for the auto-generated domain service .svc files. After missing with the serviceModel configuration section for a while and getting nowhere, I decided to take a different approach based on some information found in this article about the WCF aspects of RIA services. In the article it states that if you create a physical .svc file with the right name no virtual file with be created. It also talks about how URL rewriting is used to allow the virtual .svc file to appear to be in any folder in the site. This is were things break down in the configuration exampled above (or any virtual directory in IIS6 for that matter).

The work around I finally came to was create a physical file and drop it in the ClientBin folder with the .xap files. Because URL rewriting is not working, the .svc files and .xap files need to be in the same folder. In order to create the files you need to keep a few things in mind. The file needs to be named in this pattern: DomainServiceFullname.svc (be sure to replace all of the “.” with “-“ between namespaces and class name). Inside of the file needs to contain something similar to this:

<%@ ServiceHost 
 Service="ApplicationName.AnyAdditionalNamespaces.DomainService" 
 Factory="System.Web.Ria.Services.DomainServiceHostFactory"
%>

Now that you have the files name correctly, placed in the same folder and the xap and containing the correct service host information, you should now be able to deploy the application to the virtual directory.

If you continue to have problems please make sure you have read the article(s) mentioned above and use fiddler to help zero in on the issue. As always, please post your feedback or issues that you have and I will be happy to help anyway I can.

DotNetNuke 5 Book Has Been Published!

webmaster@openlightgroup.net — Wed, 07 Apr 2010 16:15:45 GMT

After months of work by Michael and myself, I am happy to announce that Building Websites with DotNetNuke 5 has been published! They have also published a snippet from chapter 6 – Understanding the DotNetNuke Core Architecture: https://www.packtpub.com/article/understanding-dotnetnuke-core-architecture-1 (Somehow Michael convinced them to give him all the credit for the chapter I wrote, but I won’t hold it against him. :P)

The book covers DNN from installation, management, development and deployment. Michael provides some excellent information on how to use Silverlight with DotNetNuke that makes this book worth reading just for that! Anyway, this is not meant to be an advertisement, just an excited post that the book is officially completed and now available! Writing the book was a neat experience and the fact that both of the authors are OpenLight Group founders made it that much better.

If you are interested the book is available from Packt’s site here: https://www.packtpub.com/building-websites-with-dotnetnuke-5/book

Silverlight SEO at the St. Louis .Net Users Group

webmaster@openlightgroup.net — Wed, 31 Mar 2010 16:43:02 GMT

I just wanted to post a thank you to all that attended the talk Monday night and ask for any feedback that you might have. That was my first time speaking at the user group and am sure there is a lot of room for improvement. So please feel free to add comments to this article with suggestions on how I can improve or email them to me directly (ian at openlightgroup dot net).

Also, I was hoping to provide a quick summary of links to some of the resource I mentioned.

Project Resources:

CodePlex Project for Silverlight SEO: http://silverlightseo.codeplex.com/

Use the discussions and issues on CodePlex for questions / bugs etc.

Example site: http://silverlightseo.openlightgroup.net

Helpful SEO Tools

SEO Toolkit: http://www.iis.net/expand/SEOToolkit

This requires IIS7

Lynx Browser (Text based browser): http://home.pacific.net.sg/~kennethkwok/lynx/
Google Tools: http://www.google.com/webmasters/
Bing Tools: http://www.bing.com/webmaster

Analytics Tools

Google Analytics: http://www.google.com/analytics/
Silverlight Analytics Framework: http://msaf.codeplex.com/

Articles & Webcasts

Analytics Framework Video: http://live.visitmix.com/MIX10/Sessions/CL24
SEO for Silverlight Video: http://live.visitmix.com/MIX10/Sessions/CL50
Original Article by Brad Abrams on SEO and Silverlight: Business Apps Example for Silverlight 3 RTM and .NET RIA Services July Update: Part 4: SEO, Export to Excel and Out of Browser

If I missed something or you find things that should be added to the list please leave a comment or email me at the email above.

Again, I really appreciate everyone coming out Monday night! It was great to have the opportunity to present this information and to speak with a few of you afterwards.

Silverlight, SEO & ASP.Net – Part 4 (Preview)

webmaster@openlightgroup.net — Fri, 26 Mar 2010 18:33:09 GMT

So this is not a full post (hence the Preview suffix to the title), but wanted to put something out there to let everyone know that I will be posting an update to the Silverlight SEO stuff sometime next week. Monday I am speaking at the St. Louis .Net user group meeting on this topic. After the talk I will be posting my notes and code used for the demo. The code provided will approach this topic from the standpoint of building a new site as opposed to the previous posts, which focused more on upgrading a current site. Currently you can view the demo online here: http://silverlightseo.openlightgroup.net . This site is all data driven content that is shared between Silverlight and ASP.Net. In the near future the site will be filled with all of the details of how it is built and how to incorporate the same strategies in your sites to improve search engine indexing for sites using Silverlight. Keep an eye out over the next few days as the content will start filling out between now and Monday.

As always thanks for reading!

Dynamic ListBox Item Templates

webmaster@openlightgroup.net — Mon, 08 Mar 2010 21:38:11 GMT

This is a very short and sweet post about dynamically switching the ItemTemplate property of a Silverlight ListBox at runtime. First we will start with a little background of what led to this article.

I am currently working on an application that contains a list of pediatric patients and their parents. I was recently given a requirement to display a parent name to one group of medical professional and the patient name to another group. However, either group should be able to toggle this display to allow searching on either the parent or patient.

Knowing that in Silverlight, simple is usually the correct answer, I figured this should in fact be simple. Thankfully, I was correct and after only a few minutes I had the following solution working.

  If Me.SearchByParent.IsChecked Then
            Me.PatientListBox.SetValue(ListBox.ItemTemplateProperty, _
                                       Me.Resources("PatientParentListBoxTemplate"))
 Else
            Me.PatientListBox.SetValue(ListBox.ItemTemplateProperty, _
                                       Me.Resources("PatientListBoxTemplate"))
 End If

I have created two different DataTemplates to display the appropriate information for either the parent or the patient. These are added to the UserControl.Resources and then used when dynamically setting the ItemTemplateProperty DependencyProperty of the ListBox instance. The reason the DependencyProperty is used is to avoid an InvalidCastException that is thrown if setting the ItemTemplate instance property directly.

I did not come up with much on this in the brief searching I did online, so I thought I would get it out there for others.

Thanks!

RIA Services, Windows Authentication & GetUser Error

webmaster@openlightgroup.net — Thu, 17 Dec 2009 06:38:42 GMT

Like many other developers I have been excited to see that WCF RIA Services has gone beta and now comes with a Go-Live license. After this release my team at Wash U began developing a few applications using the new RIA Services bits. We have been very impressed with the productivity increase as well as several other features that RIA provides over the previous straight up WCF services have offered in the past.

All was going well, until it came time to publish the first application to the staging (user testing) server. Upon deployment the application started displaying the “Initializing Application” progress control for close to a minute.

After which the application would throw an error: “Load operation failed for query ‘GetUser’. Unable to connect to SQL Server Database.“

This was a very strange error since we had configured the application to use Windows authentication and where not connecting to the application’s database on the initial screen. While the application was running on our local development machines everything worked fine, the application fired up and displayed the currently logged in username in the upper right of the application. So we looked at the configuration again to see if there was anything that we missed. By default RIA is configured to use Forms authentication. (As a side note, I found this post by Brad Abrams concerning the decision on which authentication method was more common: Forms Auth\Windows Auth – what is more common? ) Given this, the default configuration looks like this (Please note this is trimmed to display only the configuration elements used by the Authentication Service):

<roleManager enabled="true"/>
<authentication mode="Forms">
  <forms name=".RiaWinAuthExample_ASPXAUTH" />
authentication>
<profile>
  <properties>
    <add name="FriendlyName"/>
  properties>
profile>

To get RIA to use Windows authentication on the local developer workstations we simply had to change the authentication element to the following:

<authentication mode="Windows" />

After verifying that the configuration published to the server did in fact contain this change we went on a hunt to find out why this would not work outside of localhost. One of the first articles we found was Tim Heuer’s post Deploying your Silverlight and WCF RIA Services application. This post shed a lot of light on possible details that may have been overlooked. After double checking the items mentioned in Tim’s article we continued to have the issue. (BTW: You may also need to add the System.ComponentModel.DataAnnotations.dll assembly to the list of items to set to “Copy Local” in addition to the items listed in the bin or not to bin section of the article.)

After digging some more and not finding much help on , I decided to do some ground up debugging. This lead to several hours of starting new RIA projects, changing something, deploying it to a server and zeroing in on the problem. Eventually I came up with the following list of issues that were causing the error.

The System.ComponentModel.DataAnnotations.dll was not included in the bin folder on the server.

This was fixed by setting the Copy Local property of the reference to true.

We had neglected to enable impersonation in the configuration for the site. This was simply a silly mistake as we do this for all of our internal web applications.

Love it or hate it, we are pretty much required to use impersonation due to auditing requirements we have because of HIPAA regulations. I realize that there are other ways; however, this is the most straightforward way for us to be in compliance today. Going forward we are looking into possibly implementing other solutions.

There are some additional configuration changes that are required when deploying to a non-developer workstation.

Specify the defaultProvider for the roleManager as: AspNetWindowsTokenRoleProvider
Set the enabled attribute on the profile element to false!

If you are using profiles the instead of setting this to false, the provider needs to be configured to use the proper database. If you need more information about profile providers, this article should get you started: ASP.NET Profile Providers

I realize that some of this may be the result of trying to rush the application out for demo; however, with the exception of Tim’s article there was not much on the web about deployment. Information about deploying using windows authentication is even more scarce. My hope is that this article will document all of the information in one place to save others the trouble of piecing this together for the many source I had to use.

Summary \ Solution

Check out Tim’s article to cover the RIA deployment bases.
Make sure IIS is properly configured to use Windows authentication. This is the same configuration for any other ASP.Net application that uses Windows authentication, nothing special here.
Ensure that System.ComponentModel.DataAnnotations.dll and all other referenced RIA assemblies are deployed to the bin folder on the server or RIA is installed on the server.
If you need impersonation, make sure it is specified in the configuration! (man, this one make me feel sloppy in my case)
Set the corresponding configuration elements as follows:

Again, this is trimmed to only show the sections the authentication service is concerned with, and the impersonation configuration is included. You may or may not need the identity element for your application. Like IIS impersonation settings are the same as any ASP.Net site, so follow the same rules regarding it.

<identity impersonate="true"/>
<authentication mode="Windows" />
 
<roleManager enabled="true" 
             defaultProvider="AspNetWindowsTokenRoleProvider"/>
<profile enabled="false" />

To summarize, the issues we encountered were related to:

ASP.Net’s default configuration attempting to use a local SQL Express database for membership, roles and providers. This was solved by using the proper configuration. For us, that meant disabling profiles altogether and changing the default role provider.
RIA assemblies are not deployed with the site by default and needed to be configured to be copied to the bin folder of the site or the RIA bits needed to be installed on the server.
Impersonation needed to be set to allow access to server side resources. (database connections, file system resources etc.)

I cannot stress enough that this may not apply to your application and needs to be considered based on your environment before enabling it. There are security philosophies that say this is an “evil” configuration.

I sure hope this saves other RIA developers some time and hair loss. Due to the voodoo that is RIA services, this was not necessarily an easy issue to figure out. I had to use Fiddler, Reflector and read several articles before it finally became clear. Once all of the pieces were exposed to the light it all made since, but brining it out of the “black magic” proved to be more challenging that it “should” have been. I guess that is the trade off for having such an easy development “story.”

Either way, I must say I am really digging the power of RIA and I have to recommend it to anyone want to build stunning LOB applications. So if you haven’t already, dig in and be amazed.

Happy Coding… err… Designing … umm … RIA Using.

As always, feedback is encouraged and appreciated!

Helpful Developer Resources

webmaster@openlightgroup.net — Thu, 10 Dec 2009 06:29:32 GMT

In college my instructor taught us that it is not always knowing the answer but knowing where to find it. In the mindset, this post is simply a list of other blogs, twitter accounts \ lists and books that I have found helpful in the recent past. Hopefully these will point you to information that you need to build great software, enjoy your work (or at least experience less stress), and keep up on the latest news regarding development.

Admittedly I have been almost 100% focused on Silverlight development, so most of these resources will reflect this. However, there are a few in the list are are more general. Also, for some of the more experienced developers, I realized that a few of these links are may have you wondering why they are including. Like the MSDN site, doesn’t everyone know about that? Well, maybe, but necessarily. So I included them for the new developers or people looking to get started.

(…these resources are in no particular order…)

Favorite Blogs (other than the OpenLight Members of course :) )

ScottGu’s Blog: Scott is a Corporate VP in the Microsoft Developer Division, and is considered the grandfather of .Net.

Blog: http://weblogs.asp.net/scottgu/
Twitter: @scottgu

Tim Heuer’s Blog: Tim is a program manager on the Microsoft Silverlight team.

Blog: http://timheuer.com/blog/
Twitter: @timheuer

John Papa’s Blog: John is a Senior Technical Evangelist for Microsoft and former Silverlight MVP.

Blog: http://johnpapa.net/
Twitter: @John_Papa

Brad Abrams’ Blog:

Blog: http://blogs.msdn.com/BradA/
Twitter: @brada

Nikhilk Kothari’s Blog: Nikhil is a software architect in the .NET Developer Platform group within the Developer Division at Microsoft.

Blog: http://www.nikhilk.net
Twitter: @nikhilk

Twitter

Silverlight MVPs: http://twitter.com/John_Papa/silverlightmvp
Microsoft Silverlight Developers: http://twitter.com/John_Papa/msftsilverlight
Michael Washington: @adefwebserver
Me: @itlackey
Devin Rader: @devinrader
Colin Blair: @SLColinBlair
Kevin Grossnicklaus: @kvgros
Bill Evjen: @billevjen

Misc. Developer Sites:

MSDN: Should be every .Net developers homepage (or at least one of them…). Be sure and checkout the “Learn” section for some great videos.

URL: http://msdn.microsoft.com/en-us/default.aspx

Silverlight.Net: Everything Silverlight. Videos, Hands-On labs, tutorials and forums.

http://www.silverlight.net

Silverlight Cream: Actually an aggregate of many Silverlight focused blogs. Be sure to checkout the “Skim” page to see the most popular posts.

URL: http://www.silverlightcream.com

DotNetNuke’s Blogs: A link to the articles posted by the developer’s involved in the DotNetNuke project.

URL: http://www.dotnetnuke.com/tabid/825/default.aspx

Channel 9: “Channel 9 is all about the conversation.” Great videos by some of the heavy hitters

URL: http://channel9.msdn.com/

Chopsticks: Growing list of great videos, mainly from conferences.

URL: http://www.microsoft.com/belux/msdn/nl/chopsticks/default.aspx

This is just a small list of resource you can find online to stay informed and learn the latest tricks from some great developers. Please feel free to suggest additions to this list in the comments section. I will be updating this post from time to time with new information and your suggestions are appreciated and may be included.

Enjoy!

DotNetNuke, jQuery and Microsoft CDN

webmaster@openlightgroup.net — Thu, 03 Dec 2009 06:59:12 GMT

As you may have heard, Microsoft has created their on CDN for delivering JavaScript libraries. Beginning in ASP.Net 4 the ability to use scripts hosted on the CDN will be built into the ScriptManager control. ScottGu demonstrated how this will work in one of his blog entries. In addition to hosting their own AJAX library, Microsoft is also providing the jQuery library for download.

I am assuming that many of us have not jumped on this bandwagon as of yet This, I’m sure, is partly due to the fact that the MS AJAX libraries that are available are all beta editions slated for release with ASP.Net 4. However, the jQuery script that is currently provide is the current production release of the library and can be used today. When the next version of ASP.Net is released the number of users with cached copies of jQuery from Microsoft’s CDN will steadily rise. This will increase the benefit of using the scripts hosted there.

So in an effort to ready DotNetNuke to gain from this coming event, you can configure DNN to start pulling its jQuery script from the Microsoft CDN. Thanks to some relatively new features in DotNetNuke, this is a very simple process.

Log into the portal using a SuperUser account.
Navigate to the Host Settings page located on the Host menu.
Scroll down to the jQuery Settings section located under Advanced Settings.
Check the Use Hosted jQuery Version checkbox.
Enter the following URL into the Hosted jQuery URL textbox.

http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js

Click Update.

That is all there is to it. Now your DotNetNuke site will use the jQuery script on the Microsoft CDN. In the interest of full disclosure, I should state that not everyone will see a benefit from this change and each site should be evaluated independently. There is an ongoing debate on whether Microsoft developers should use Google’s CDN, Microsoft’s CDN or other hosting options when referencing the jQuery library. Be sure you do your homework to determine which is the best solution for your site(s).

Happy coding… err… configuring. ;)

P.S. I made a forum post here seeing what the interest of the Silverlight community is in having the Silverlight.js file hosted on the CDN. Please take a moment and post your thoughts. If enough of us support the idea, maybe Microsoft will consider adding it. http://forums.silverlight.net/forums/t/147867.aspx

Silverlight Metronome

webmaster@openlightgroup.net — Sun, 29 Nov 2009 17:01:05 GMT

I have recently been practicing playing the bass again and during one of the practicing session my friend had suggested some features for a digital metronome. We had used a few JavaScript based ones; however none of them had a few helpful features. These features included: Adjustable tempo, support for different beats per measures, a visual counter displaying the current count of the measure, the ability to allow for multiple measures, the ability to have two different volumes for the tick sound that plays for each beat, the ability to mute the tick for specified beats of a measure and allow the metronome to be run from the computer without being connected to the internet.So since we could not find a single metronome that supported these features, I decided to build one using Silverlight, figuring that it would be a pretty simple exercise. It turns out I was right, well for the most part.

Obviously the most important feature of a metronome is to keep time, this turned out to be so easy it was almost ridiculous. All that needed to be done was to create an empty storyboard with a duration of one second.

    <UserControl.Resources>
        <Storyboard x:Name="Tick"
                    Duration="00:01:00" />
    UserControl.Resources>

The an event handler was wired up to restart the story board each time it was completed, like this:

this.Tick.Completed += new EventHandler(Tick_Completed);
//Inside the event handler:
this.Tick.Begin();

Now to allow for tempos other than 60 beats per minute, I created a slider control and wired the value to the SpeedRatio of the storyboard. Unfortunately, element to element binding would not work in this case because the storyboard is a resource. So I had to wire up an event handler to the slider’s ValueChanged event that would update the SpeedRatio of the storyboard. I also needed to ensure that the value was a whole number. A custom behavior I found here: http://blogs.veracitysolutions.com/tag/behaviors/ was all it took to snap the slider to whole number.

<Slider x:Name="BeatsPerMinute"
        Minimum="20"
        Maximum="200"
        Value="60"
        Margin="0"
        Orientation="Vertical"
        SmallChange="1"
        HorizontalAlignment="Center"
        Height="180">
    <i:Interaction.Behaviors>
        <OpenLightGroup_AgMetronome:SnappingSliderBehavior />
    i:Interaction.Behaviors>
Slider>

With that I had the foundation laid for a metronome with an adjustable tempo. I then wired up a toggle button to control starting and stopping the metronome to allow for a different look while the metronome is running. So now we need to be able to set the number of beats per measure so we know what to count to. For this, I simply used a combobox to allow you to select from 3/4, 4/4 and 5/4 times and wired up an event handler to set a field that holds the count for each measure. Then I added some code to the tick completed event handler to track the current beat and reset it to one once the maximum count is reached based on the beats per measure that is currently selected. I also set the content of the toggle button to show what the current count is.

this._count++;
if (this._count > this._maxCount)
    this._count = 1;
this.PlayButton.Content = this._count.ToString();

At this point, if you click the play button the metronome will count the number of beats selected pre measure and display them in the button. You can also adjust the tempo to count faster or slower. Next, I added the ability to have multiple measure displayed so the metronome would count to the max count of the measure and below show which count it was on in all of the measures. To do this I added a wrap panel with a number of beats added to it based on the beats per measure and the number of measures selected. To allow for the feature of stressing certain beats I decided to create a beat user control that would have three states: Normal, Medium and High. These states are shown by changing the color of the text that shows the number of the beat. The state of the beat is selected by click on the beat to cycle through the options. All beats start in the normal state, but change to medium upon the first click and high on the second click. Clicking the beat a third time cycles it back to the normal state.

this.StressLevel++;
if (this.StressLevel > 3)
    this.StressLevel = 1;
if (this.StressLevel == 1)
    this.MeasureNumberText.Foreground = this.NormalStressCountBrush;
else if (this.StressLevel == 2)
    this.MeasureNumberText.Foreground = this.MediumStressCountBrush;
else if (this.StressLevel == 3)
    this.MeasureNumberText.Foreground = this.HighStressCountBrush;

When the metronome loads, it defaults to four beats per measure and only one measure which then adds four beats set to the normal state to the beats wrap panel. By clicking the up arrow on the number of measures control the proper number of beats will be added to the wrap panel. Clicking the down arrow will remove the appropriate number of beats from the wrap panel. To prevent issues with the count, the metronome is paused and then restarted once the correct number of beats are added.

void NumberOfMeasures_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    if (this.PlayButton.IsChecked.HasValue && this.PlayButton.IsChecked.Value)
    {
        this.Tick.Stop();
    }
    double difference;
    if (e.NewValue > e.OldValue)
    {
        difference = (e.NewValue - e.OldValue) * this._maxCount;
        for (int i = 0; i < difference; i++)
        {
            this.AddBeat();
        }
    }
    else
    {
        difference = (e.OldValue - e.NewValue) * this._maxCount;
        for (int i = 0; i < difference; i++)
        {
            if (this.Beats.Children.Count > 0)
            {
                UIElement child = this.Beats.Children.Last();
                this.Beats.Children.Remove(child);
            }
            else
            {
                break;
            }
        }
    }
    if (this.PlayButton.IsChecked.HasValue && this.PlayButton.IsChecked.Value)
    {
        this.Tick.Begin();
    }
}

To show which beat the metronome is currently on within the measures I increase the border thickness and scale the beat to 1.1. This means I also need to reset the style of the previous beat each time the count is increased. I also set the color of the text of the play button equal to the color of the font of the current beat. This is done to show the current stress level inside of both the beat in the measures and the current count within the beats per measure. All of this is done inside of the tick completed event handler.

this.ResetPreviousBeat();
this.StyleCurrentBeat();
Beat currentBeat = (Beat)this.Beats.Children[this._currentBeat];
this.PlayButton.Foreground = currentBeat.MeasureNumberText.Foreground;

Up until this point everything has been pretty standard coding and went fairly smoothly. Well with the exception of some silly math/logic issues with looping and adding/removing the proper number of beats when changing the number of measures. This leaves us with two features left to implement, playing the tick sound at the correct volume based on the current beats stress level and the ability to run the application “out of browser.”

I will started by creating the sound file that will be used to play the “tick” sound for selected beats. To do this I used the “Generate Click Track” feature of the Audacity sound editor program.

After exporting the track as an mp3, I imported the mp3 into Expression Encoder to clip it to a single tick and encode it as a wma file. Once I had encoded a suitable sound file, I added a resource file to the project and added the sound file as a resource. This allows the sound file to be played when the application cannot access the hosting site. With the sound file in place, I added a media element control to the metronome control to allow the sound to be played programmatically. However, since the sound file is now compiled into the application the source has to be set during the loaded event instead of in the xaml.

_soundStream = new MemoryStream(SourdResource.TickSound);
this.TickPlayer.SetSource(_soundStream);

We are finally ready to use the stress level of the current beat to determine if the sound should be played and if so at what volume level. This too is done inside of the tick completed event handler. To make the code in the tick completed event handler easier to read I made the PlayTick method to handle setting the volume and playing the sound. Notice that the position of the media element must be set to zero each time it is played.

private void PlayTick(double volume)
{
    this.TickPlayer.Volume = volume;
    this.TickPlayer.Position = TimeSpan.FromSeconds(0.0);
    this.TickPlayer.Play();
}

The finished tick completed event handler now looks like this:

void Tick_Completed(object sender, EventArgs e)
{
    this._count++;
    if (this._count > this._maxCount)
        this._count = 1;
    this.PlayButton.Content = this._count.ToString();
    this.ResetPreviousBeat();
    this.StyleCurrentBeat();
    Beat currentBeat = (Beat)this.Beats.Children[this._currentBeat];
    this.PlayButton.Foreground = currentBeat.MeasureNumberText.Foreground;
    switch (currentBeat.StressLevel)
    {
        case 2:
            this.PlayTick(0.75);
            break;
        case 3:
            this.PlayTick(1.0);
            break;
        default:
            break;
    }
    this._currentBeat++;
    if (this._currentBeat > this.Beats.Children.Count - 1)
        this._currentBeat = 0;
    this.Tick.Begin();
}

The final feature to implement is by far the easiest one. To enable the application to be run from a disconnected computer all that need to be done is to open the properties of the Silverlight application and check the “Enable running application out of the browser” checkbox.

You can view the finished product at the following link: AgMetronome

The source code for the Silverlight project can be downloaded here: AgMetronome Source

I hope the tutorial or the application itself proves to be useful for you. As always I appreciate any feedback, questions or comments regarding this post.