Click here to Skip to main content
15,886,110 members
Articles / Desktop Programming / WPF

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 51.3K   2.2K   33  
This article explains a simpler way of attaching adorners by using a WPF behavior class.
  • AdornerBehaviorSample.zip
    • AdornerBehaviorSample
      • .svn
        • all-wcprops
        • entries
        • prop-base
          • AdornerBehaviorSample.suo.svn-base
          • EventMapping.png.svn-base
        • props
          • BlendSelection.png.svn-work
          • CodeProject.docx.svn-work
          • FinalScreen.png.svn-work
        • text-base
          • AdornerBehaviorSample.sln.svn-base
          • AdornerBehaviorSample.suo.svn-base
          • EventMapping.png.svn-base
        • tmp
          • prop-base
          • props
          • text-base
      • ~$deProject.docx
      • AdornerBehaviorSample.sln
      • AdornerBehaviorSample
        • .svn
          • all-wcprops
          • entries
          • prop-base
            • Application.ico.svn-base
            • Exclamation.png.svn-base
            • Mail-add.png.svn-base
            • Paper-pencil.png.svn-base
            • Pencil.png.svn-base
          • props
          • text-base
            • AdornerBehaviorSample.csproj.svn-base
            • app.config.svn-base
            • App.xaml.cs.svn-base
            • App.xaml.svn-base
            • Application.ico.svn-base
            • CaAdornerBehavior.cs.svn-base
            • Exclamation.png.svn-base
            • Mail-add.png.svn-base
            • MainWindow.xaml.cs.svn-base
            • MainWindow.xaml.svn-base
            • Paper-pencil.png.svn-base
            • Pencil.png.svn-base
            • SampleViewModel.cs.svn-base
            • Simple Styles.xaml.svn-base
          • tmp
            • prop-base
            • props
            • text-base
        • AdornerBehaviorSample.csproj
        • app.config
        • App.xaml
        • App.xaml.cs
        • Application.ico
        • CaAdornerBehavior.cs
        • Exclamation.png
        • Mail-add.png
        • MainWindow.xaml
        • MainWindow.xaml.cs
        • Paper-pencil.png
        • Pencil.png
        • Properties
          • .svn
            • all-wcprops
            • entries
            • prop-base
            • props
            • text-base
              • AssemblyInfo.cs.svn-base
            • tmp
              • prop-base
              • props
              • text-base
          • AssemblyInfo.cs
        • SampleViewModel.cs
        • Simple Styles.xaml
      • BlendSelection.png
      • CodeProject.docx
      • EventMapping.png
      • FinalScreen.png
  • AdornerBehaviorSample2.zip
    • all-wcprops
    • entries
    • AdornerBehaviorSample.suo.svn-base
    • EventMapping.png.svn-base
    • BlendSelection.png.svn-work
    • CodeProject.docx.svn-work
    • FinalScreen.png.svn-work
    • AdornerBehaviorSample.sln.svn-base
    • AdornerBehaviorSample.suo.svn-base
    • EventMapping.png.svn-base
    • ~$deProject.docx
    • AdornerBehaviorSample.sln
    • all-wcprops
    • entries
    • Application.ico.svn-base
    • Exclamation.png.svn-base
    • Mail-add.png.svn-base
    • Paper-pencil.png.svn-base
    • Pencil.png.svn-base
    • AdornerBehaviorSample.csproj.svn-base
    • app.config.svn-base
    • App.xaml.cs.svn-base
    • App.xaml.svn-base
    • Application.ico.svn-base
    • CaAdornerBehavior.cs.svn-base
    • Exclamation.png.svn-base
    • Mail-add.png.svn-base
    • MainWindow.xaml.cs.svn-base
    • MainWindow.xaml.svn-base
    • Paper-pencil.png.svn-base
    • Pencil.png.svn-base
    • SampleViewModel.cs.svn-base
    • Simple Styles.xaml.svn-base
    • AdornerBehaviorSample.csproj
    • app.config
    • App.xaml
    • App.xaml.cs
    • Application.ico
    • CaAdornerBehavior.cs
    • Exclamation.png
    • Mail-add.png
    • MainWindow.xaml
    • MainWindow.xaml.cs
    • Paper-pencil.png
    • Pencil.png
    • all-wcprops
    • entries
    • AssemblyInfo.cs.svn-base
    • AssemblyInfo.cs
    • SampleViewModel.cs
    • Simple Styles.xaml
    • BlendSelection.png
    • CodeProject.docx
    • EventMapping.png
    • FinalScreen.png
<Window
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" 
    xmlns:Custom="http://schemas.microsoft.com/expression/2010/interactivity" 
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
	xmlns:CaControlTestApp="clr-namespace:CaControlTestApp"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
	x:Class="AdornerBehaviorSample.MainWindow"
	x:Name="Window"
	Title="MainWindow"
	Width="640" Height="480">
    
	<Window.Resources>
    
        <!-- Template used in Adorner -->
        <DataTemplate x:Key="AdornerDataTemplate">
            <Grid>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top">
                    <Image Height="32" Width="32" Source="Mail-add.png"/>
                    <Image Height="32" Source="Paper-pencil.png" Width="32"/>
                    <Button Style="{DynamicResource SimpleButton}" Width="32" Height="32">
                        <Image Height="Auto" Source="Exclamation.png" Stretch="Fill"/>
                    </Button>
                </StackPanel>

                <TextBlock VerticalAlignment="Bottom"
                           HorizontalAlignment="Left" Text="{Binding Path=SampleString}"/>

                <Image Source="Pencil.png"
                       VerticalAlignment="Bottom"
                       HorizontalAlignment="Right"
                       Width="32" Height="32" />
            </Grid>
        </DataTemplate>

    </Window.Resources>

    
    
    
    
    <!--  Control -->
	<Grid x:Name="LayoutRoot">
		<AdornerDecorator Width="250" Height="250">
			<ed:Arc x:Name="arc" ArcThickness="1" ArcThicknessUnit="Percent" 
                    EndAngle="333" Stretch="None" StartAngle="-257" 
                    Stroke="#FF999292" StrokeThickness="5" RenderTransformOrigin="0.5,0.5">

                <ed:Arc.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFCEFF00" Offset="0"/>
                        <GradientStop Color="#FFFF8D4A" Offset="0.816"/>
                    </LinearGradientBrush>
                </ed:Arc.Fill>
				
				<Custom:Interaction.Behaviors>
					<CaControlTestApp:CaAdornerBehavior AdornerTemplate="{StaticResource AdornerDataTemplate}">
						<Custom:Interaction.Triggers>
							<Custom:EventTrigger SourceName="arc" EventName="MouseEnter">
								<Custom:InvokeCommandAction CommandName="ShowAdornerCommand"/>
							</Custom:EventTrigger>
							<Custom:EventTrigger SourceName="arc" EventName="MouseLeave">
								<Custom:InvokeCommandAction CommandName="HideAdornerCommand"/>
							</Custom:EventTrigger>
						</Custom:Interaction.Triggers>
					</CaControlTestApp:CaAdornerBehavior>
				</Custom:Interaction.Behaviors>
                
			</ed:Arc>
		</AdornerDecorator>
	</Grid>
</Window>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

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