Click here to Skip to main content
13,293,950 members (55,868 online)
Click here to Skip to main content
Add your own
alternative version


18 bookmarked
Posted 1 Nov 2007

How to Build a Custom Formatted Label with WPF

, 1 Nov 2007
Rate this:
Please Sign up or sign in to vote.
This article explains how to provide a custom gauge formatter for WPF TextBlocks, Label or any other controls


Creating a custom control in Windows Forms by using OwnerDraw in GDI+ is very hard. WPF reveals a new way to build rich client applications with only some lines of code. Here is an example showing the creation of a custom control that provides Label and Gauge functionality.


First of all, let's understand what we want to archive? We want our gradientbrush to change its end point, according to a relative value passed to the item. In the GDI+ world, we have to perform a dozen calculations and draw rectangles with custom effect to provide such a view. Within WPF, all we need is one brush and one converter. Let's see.

Using the Code

In order to visualize the data, we have to write a custom DataTemplate:

<DataTemplate x:Key="template"> 
      <TextBlock Text="{Binding}" > 
          <LinearGradientBrush EndPoint="{Binding Converter={StaticResource converter},
                 ConverterParameter=1000}" StartPoint="0,0.5"> 
            <GradientStop Color="#FF7CA0CF" Offset="0"/> 
            <GradientStop Color="#FF7CA0CF" Offset="0.8"/> 
            <GradientStop Color="#FFFFFFFF" Offset="1"/> 

Now, we have to create a converter to translate source value into screen points, which will be used within the brush to show the relative value.

class DataConverter:IValueConverter 
public object Convert(object value, Type targetType, 
    object parameter, System.Globalization.CultureInfo culture) 
int val = (int)value; 
int max = int.Parse(parameter.ToString()); 
return new Point(val == 0 ? 0 : ((double)val / (double)max), 0.5); 

The last action is that we take each control and "tell" the WPF layout engine to stretch it according to its ancestor's size.

<TextBlock Text="{Binding}" 

Margin="5,5,5,5" TextAlignment="Right" Padding="0,0,20,0" 

Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListBox}}, 

What did we actually do here? Just binded Width value of each TextBlock control within DataTemplate to the size of its ancestor (in this case ListBox) to stretch it to fill the available space.


  • 1st November, 2007: Initial post


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


About the Author

Tamir Khason
Architect Better Place
Israel Israel
Hello! My name is Tamir Khason, and I am software architect, project manager, system analyst and [of course] programmer. In addition to writing big amount of documentation, I also write code, a lot of code. I used to work as a freelance architect, project manager, trainer, and consultant here, in Israel, but recently join the company with extremely persuasive idea - to make a world better place. I have very pretty wife and 3 charming kids, but unfortunately almost no time for them.

To be updated within articles, I publishing, visit my blog or subscribe RSS feed. Also you can follow me on Twitter to be up to date about my everyday life.

You may also be interested in...


Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.171207.1 | Last Updated 1 Nov 2007
Article Copyright 2007 by Tamir Khason
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid