Click here to Skip to main content
13,046,184 members (127,764 online)
Click here to Skip to main content
Add your own
alternative version


8 bookmarked
Posted 22 Apr 2015

AverageMeter in WPF

, 22 Apr 2015
Rate this:
Please Sign up or sign in to vote.
In this tip, I will explain how to create a simple user control (AverageMeter) using WPF.


There are a lot of charts and pies to show and analyse series of information graphically. In some cases, we need to have an average value of the currently retrieved values from any resources and we don't need to hold all of the values. For better understanding, assume that we have a sensor that gives us the vibration amount of a bridge. With these values, we have the maximum, minimum and average vibration amounts on this bridge. By using this set of values, we partially can ensure that this bridge can work under pressure. For being able to analyse the performance, we need a range of the last fetched values. Sometimes, having a visual result of information can be more effective in our application dashboard; so we can create a control that shows our information in a graphic mode.


I was developing an application that was using cameras and an ANPR (Automatic Number Plate Recognition) library to reading licence plates. This library was returning two important values to me. The first one was Confidence and the second one was AverageHeight that by using these values, I was able to calibrate and reposition camera (if needed). But in some cases, the minimum and maximum values difference was too much. Because of that, I decided to create a control to demonstrate the current value and the range of the currently fetched values.

Using the Code

For implementing the UI of the control, I added the AverageMeter.xaml resource dictionary and defined this dictionary in Generic.xaml file as merged dictionary like this:



        <ResourceDictionary Source="/AverageMeterTester;component/Themes/AverageMeter.xaml"/>

In AverageMeter.xaml file, I defined a Border as my control template with a Canvas inside it. This canvas is for creating control's schema. Body of the AverageMeter.xaml file is like this:

<ResourceDictionary xmlns=""


    <Style TargetType="{x:Type local:AverageMeter}">
        <Setter Property="Template">
                <ControlTemplate TargetType="{x:Type local:AverageMeter}">
                    <Border Background="{TemplateBinding Background}"

                            BorderBrush="{TemplateBinding BorderBrush}"

                            BorderThickness="{TemplateBinding BorderThickness}"

                            CornerRadius="{TemplateBinding CornerRadius}"

                            Width="{TemplateBinding Width}"

                            Height="{TemplateBinding Height}">
                        <Canvas x:Name="DrawingArea"/>

The main part of the control is implemented in AverageMeter.cs file. In this file, we have properties, methods and one event. This class contains a private member that I named _queue. I use this variable to keep previous values and highlight important ranges in desired positions. I defined a DependencyProperty with name HistoryQueueSizeProperty that is for controlling the maximum length of the _queue. When a new value is set to Value property, if the length of the _queue is more than HistoryQueueSizeProperty, I remove the oldest value from the top of the list, then I add new value to the bottom of the list; else I add the new value to the bottom of the list without any other work. Every time, after changing the _queue, I search for minimum and maximum values in the list. There is a property with name GlobalMinimumAndMaximumProperty. When this property set to "True", minimum and maximum values calculate from all the previously set values. But if GlobalMinimumAndMaximumProperty is set to "False", minimum and maximum values calculate from currently exist items in _queue. For finding the latest value's position in control, I use these minimum and maximum values like below:

double GetLeft(double value)
     return (value - _valueMinimum)*(ActualWidth/(_valueMaximum - _valueMinimum));

The main method of this class is Draw(). In this method, I add and locate child controls on _drawingArea canvas. For drawing the max height areas, I create a Rectangle control for each item in _queue and change its size according to current scale and position. Start of this Rectangle calculates from the previous item in _queue and end of it calculates from its dependent value.

I hope this small user control helps you to create perfect user controls.


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) Keyhan Iranian
Iran (Islamic Republic of) Iran (Islamic Republic of)
I'm addict of developing softwares and designing solutions for projects.
My favorite work in programming is designing Components and user controls.

You may also be interested in...

Comments and Discussions

QuestionAfarin bar shoma Pin
Member 1164053824-Apr-15 18:16
memberMember 1164053824-Apr-15 18:16 
Suggestionqualification Pin
Member 1102623124-Apr-15 1:18
memberMember 1102623124-Apr-15 1:18 
GeneralRe: qualification Pin
S.A.Esmaeily24-Apr-15 17:53
professionalS.A.Esmaeily24-Apr-15 17: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
Web01 | 2.8.170713.1 | Last Updated 22 Apr 2015
Article Copyright 2015 by S.A.Esmaeily
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid