Click here to Skip to main content
15,742,619 members
Articles / Desktop Programming / WPF
Posted 19 Oct 2011


33 bookmarked

Use any DataTemplate as an Adorner in WPF

Rate me:
Please Sign up or sign in to vote.
4.72/5 (9 votes)
18 Nov 2011CPOL2 min read
This article explains a simpler way of attaching adorners by using a WPF behavior class.


Adorners are great and sometimes you want to quickly put some adorners up with ease. All samples today usually include custom building adorners with code, or some other class.

This article explains a simpler way of attaching adorners by using a behavior class. The attached example was created with Expression Blend 4.0 but you can open it in Visual Studio 2010.

All code described here is in the attached project.

Find the final screen below. Adorners are composed of visual elements via the DataTemplate.


Using the code

The code is quite simple. First you need to ensure the item you want to adorn contains an Adorner layer, otherwise CaAdornerBehavior will throw a null exception. Use an AdornerDecorator to add the adorner layer. The XAML sample follows:

<Grid x:Name="LayoutRoot">
    <AdornerDecorator Width="250" Height="250">
        <ed:Arc x:Name="arc">
                     : : : : : 
                     : : : : : 

Copy the file CaAdornerBehavior.cs to your project folder and include in the project. This file will compile as a behavior. It will appear in Blend behavior assets:


Here, we’ll go over the Blend designer to integrate the behavior properties.


  1. Notice the behavior part of the Arc object. This associates the behavior with Arc. Using the designer, you can associate the behavior with other objects.
  2. The behavior contains two event properties: ShowAdornerCommand and HideAdornerCommand. These bindings allow the user to control showing or hiding the template adorner.
  3. Notice the AdornerTemplate property. Here the behavior accepts the DataTemplate that will be shown as the adorner. The DataTemplate is internally hosted as a ContentTemplate of a ContentControl in the Behavior.
  4. The Adorner DataTemplate. It is a standard DataTemplate so you can include any visual element.

XAML code

The Adorner DataTemplate is very straightforward. It includes some icons aligned accordingly.

   <DropShadowEffect x:Key="BlurEffectStyle" …/>
        <!-- Template used in Adorner -->
        <DataTemplate x:Key="AdornerDataTemplate">
                <StackPanel Orientation="Horizontal">
                    <Image Height="32" Width="32" 
                    <Image Height="32" 
                             Source="Paper-pencil.png" Width="32"/>
                    <Button Style="{DynamicResource SimpleButton}"
                              Width="32" Height="32">
                        <Image Height="Auto"
                <Image Source="Pencil.png"
                       Width="32" Height="32"

Using the adorner behavior is also very straightforward.

            AdornerTemplate="{DynamicResource AdornerDataTemplate}">


                  <Custom:EventTrigger SourceName="arc"

                  <Custom:EventTrigger SourceName="arc"


Notice that we have event triggers to show/hide the adorner to the parent's MouseEvents. You can use any other trigger to show it. A DataTrigger, and others, will also work.


  • 19 Oct 2011: First version.
  • 18 Nov 2011: Sample code updated. The behavior class was not properly binding. This was fixed to bind to the adorned UI element data context.


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

Written By
Windows Consultant
United States United States
20+ yrs Leading and Developing Microsoft products in the Financial Industry.

My main background is VC++, server and client development.

Currently focused in WPF/XAML, Windows 8 and Windows Azure Server technologies.

Comments and Discussions

Questionnot to useful lol put that adorneddecator around say a button that sits in a grid Pin
Member 1100807822-Aug-14 18:27
Member 1100807822-Aug-14 18:27 
QuestionGreat Job! Pin
BrowniePoints19-Dec-11 5:20
BrowniePoints19-Dec-11 5:20 
AnswerRe: Great Job! Pin
Carlos A Alvarez19-Dec-11 14:35
Carlos A Alvarez19-Dec-11 14:35 
GeneralMy vote of 5 Pin
VallarasuS20-Nov-11 7:25
VallarasuS20-Nov-11 7:25 
GeneralRe: My vote of 5 Pin
Carlos A Alvarez7-Dec-11 6:19
Carlos A Alvarez7-Dec-11 6:19 
GeneralMy vote of 5 Pin
Filip D'haene18-Nov-11 7:33
Filip D'haene18-Nov-11 7:33 
GeneralMy vote of 5 Pin
toantvo20-Oct-11 5:05
toantvo20-Oct-11 5:05 
QuestionQuite nice actually Pin
Sacha Barber19-Oct-11 22:35
Sacha Barber19-Oct-11 22:35 

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.