Home > Silverlight > Creating a Custom Silverlight Task Dashboard Control (Part 2)

Creating a Custom Silverlight Task Dashboard Control (Part 2)

In part 1 we looked at adding some basic properties as well as creating the layout and structure for a custom Silverlight task dashboard control. In this post we will continue that discussion and we’ll look at how the wiring of the elements defined in the template get wired up. At this point we’ve created a custom control template with support for custom properties; however, there is no plumbing in order to make it come to life.
In order to do this, we need the help of a specific method defined in the base Control class, OnApplyTemplate(). This method gets called when the control is initialized and it allows you to find elements defined in the template. What you do at this point is specific to the control you are building and the logic you intend to have. For example, if the template contains a button that needs to execute some code when clicked, this is the spot where you get a reference to that button and wire up a click event handler or change its properties. You may not need to do anything except just get a reference to the element( so that you can access it later on and do something with it). The bottom line is, because there is no implicit wiring of an element defined in the xaml to its reference in the code behind class, you have to explicitly do it yourself and this is where you do it. Here’s the implementation for this control.

 public override void OnApplyTemplate()

      rootElement = base.GetTemplateChild("RootElement") as Grid;
      if (rootElement != null)
          // Launch storyboards
          Storyboard completedSB = (Storyboard)base.GetTemplateChild("CompletedStoryboard") as Storyboard;

          Storyboard inProgressSB = (Storyboard)base.GetTemplateChild("InProgressStoryboard") as Storyboard;

          Storyboard notStartedSB = (Storyboard)base.GetTemplateChild("NotStartedStoryboard") as Storyboard;

    // Set the tooltips for the progress bars
    completedPB = base.GetTemplateChild("ProgressBarCompleted") as ProgressBar;
    ToolTipService.SetToolTip(completedPB, CompletedProgressValue + "%");

    inProgressPB = base.GetTemplateChild("ProgressBarInProgress") as ProgressBar;
    ToolTipService.SetToolTip(inProgressPB, InProgressProgressValue + "%");

    notStartedPB = base.GetTemplateChild("ProgressBarNotStarted") as ProgressBar;
    ToolTipService.SetToolTip(notStartedPB, NotStartedProgressValue + "%");

    // Set percent TextBlock
    TextBlock TextBlockCompletedPercent = base.GetTemplateChild("TextBlockCompletedPercent") as TextBlock;
    SetPercentageText(TextBlockCompletedPercent, CompletedProgressValue);

    TextBlock TextBlockInProgressPercent = base.GetTemplateChild("TextBlockInProgressPercent") as TextBlock;
    SetPercentageText(TextBlockInProgressPercent, InProgressProgressValue);

    TextBlock TextBlockNotStartedPercent = base.GetTemplateChild("TextBlockNotStartedPercent") as TextBlock;
    SetPercentageText(TextBlockNotStartedPercent, NotStartedProgressValue);

    // Set Click handlers for labels
    TextBlock TextBlockCompleted = base.GetTemplateChild("TextBlockCompleted") as TextBlock;

    TextBlock TextBlockInProgress = base.GetTemplateChild("TextBlockInProgress") as TextBlock;

    TextBlock TextBlockNotStarted = base.GetTemplateChild("TextBlockNotStarted") as TextBlock;

As you can see, this code basically overrides the OnApplyTemplate() method and pulls out elements from the template by calling the GetTemplateChild() method. It is important to note that I had declared private variables for each of the elements I wanted to work with in code and here is where I instantiate them. At this point, I can call methods, set properties, set event handlers, etc. Inspecting the code will reveal that this is where I start the animations for the progress bars and also where I set click handlers for some textblocks. Feel free to download the source code and as always, you can contact me if you have any questions.


Download Source Code


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: