Click here to Skip to main content
12,760,177 members (32,991 online)
Click here to Skip to main content
Add your own
alternative version


11 bookmarked
Posted 24 Nov 2009

Silverlight Energy Savings Calculator

, 24 Nov 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
MVVM patterned calculator that demonstrates Charting Toolkit styling.


I am a huge fan of Silverlight, and have been looking for an excuse to feature it on the SetPower site. We decided to create a calculator that people who are considering SetPower can use to estimate the amount of energy it would save for them. Ideally, we wanted a set of sliders that people could use to adjust to match their environment (e.g., Computer Wattage/# of PCs/Energy Rate, and the percentage of time they wanted to allow their computers to sleep).

You can see it here.

Of course, I considered DOM scripting as a possible language for such an application, but doing things like dynamic charts is very time consuming (coupled with the fact that I spent so much of my career pushing the boundaries of JavaScript I pretty much hate coding in it).

I am also a huge fan of the MVVM pattern. In face, the SetPower Enterprise Manager is based on WPF MVVM. Initially, I found adhering to the pattern was difficult (especially with the complex UI), but, like everything else, after some experience, you figure out the patterns within the pattern, so to speak.

CalculatorView – this is the RootVisual that gets instantiated by Silverlight. It is pure XAML, with the code-behind consisting of only the following:

public partial class CalculatorView : UserControl
    public CalculatorView()
        txtWatts.TextChanged += new TextChangedEventHandler(txt_TextChanged);

        txtComputerCount.TextChanged += new 

    void txt_TextChanged(object sender, TextChangedEventArgs e)
        BindingExpression be = 
          (sender as TextBox).GetBindingExpression(TextBox.TextProperty);

The code was necessary only to change the binding behavior of the TextBoxes. In Silverlight, TextBoxes binding updates are triggered when the TextBox loses focus. In my case, I wanted it to happen as soon as the user pressed the key so that they could see the impact of their change right away. (Initially, I didn’t have it this way, but when I gave it to my wife to test, she changed the wattage and never left the TextBox, then wondered why more wattage didn’t increase her savings.) Something I struggled with when initially learning MVVM is that code-behind is OK in the View, so long as the code pertains only to the View. A cleaner implementation here would have been a derived control from Textbox.

The ViewModel, which is instantiated and set as the data context in the XAML itself, has properties that throw INotifyPropertyChanged for the Wattage/SleepPercentage/Computer Count/Computer Type, and are bound to the four sliders on the screen. In addition, some of the adornments like the icons for laptop/desktop/power desktop are toggle buttons that are bound to properties on the view model.

I also implemented rounding on some of the properties (PercentSleep and EnergyRate) to avoid long decimal strings in the UI when moving the sliders. I probably should have done the rounding as an IValueConverter, but instead, just performed the action in the properties setters.

This was a very straightforward application I was able to complete in a workday, but there were a couple of things that slowed me down.

  • Styling of the Chart – I wanted a cleaner look for the pie chart. Normally, this sort of thing is trivial in Blend, but I was left with an empty template in Blend after choosing Edit Template –>Edit a Copy. I ended up extracting the XAML from the Toolkit Source Code. After doing so, I made some tweaks to the format of the chart itself and the legend.
  • Picking the Colors – I found several examples of how to do this on various blogs, but none of them worked. The StylePalette object they referenced didn’t exist in the October 2009 library. Eventually, I found that StylePalette had been renamed to Palette and the Pallete contained a ResourceDictionaryCollection.
  • <charting:Chart x:Name="energyChart" 
              Margin="0,8,7,0" HorizontalAlignment="Right" 
              Width="276" Style="{StaticResource PieChartTemplate}" 
              BorderBrush="{x:Null}" >
        <Style x:Key="DataPointStyle" TargetType="Control"> 
        <Setter Property="Background" Value="{StaticResource  PurpleHighlight}"/>  
        <Style x:Key="DataPointStyle" TargetType="Control"> 
        <Setter Property="Background" 
           Value="{StaticResource GreenHighlight}"/></Style>
  • Currency Format – Supposedly, you should be able specify a currency format in the chart’s Palette. I couldn’t get this to work, and instead handled this with a small custom class called EnergyCost that holds the data as well as provides some labels for binding to the chart. In my case, I wanted custom text to appear in the legend that indicated how much money was being saved (or how much it costs to operate the computers) as well as the formatted currency.


  • 11-24-09: Initial submission.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer (Senior) SetPower Software
United States United States
Has been involved in software development since 1997. Pioneered a lot of AJAX web techniques back in the days of standard ASP with custom web services. Started and sold a CRM company called Scout Solutions that provided a solution to the professional services industries.

Freelance consultant specializing in WPF/Silverlight development as well as ASP.NET solutions.

Recently started SetPower Software LLC whose main product, SetPower, helps to reduce energy usage in corporate and home pcs by allowing for scheduled power plans.

You may also be interested in...


Comments and Discussions

Generaldoes not compile Pin
Member 366560412-Nov-10 11:53
memberMember 366560412-Nov-10 11:53 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170217.1 | Last Updated 24 Nov 2009
Article Copyright 2009 by BBalmer
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid