将任何 DataTemplate 用作 WPF 中的 Adorner

• 下载示例 - 636 KB

引言

Adorner 非常强大，有时您希望轻松地快速添加一些 adorner。 目前所有示例通常都包括使用代码自定义构建 adorner，或使用其他类。

本文介绍了一种更简单的方法，通过使用行为类来附加 adorner。 附带的示例是使用 Expression Blend 4.0 创建的，但您可以在 Visual Studio 2010 中打开它。

此处描述的所有代码都包含在附带的项目中。

请参阅下面的最终屏幕。 Adorner 由通过 DataTemplate 组成的视觉元素。

使用代码

代码非常简单。 首先，您需要确保要装饰的项目包含 Adorner 层，否则 CaAdornerBehavior 将抛出空异常。 使用 AdornerDecorator 添加 adorner 层。 XAML 示例如下

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

将文件 CaAdornerBehavior.cs 复制到您的项目文件夹中并包含在项目中。 该文件将编译为行为。 它将出现在 Blend 行为资源中

在这里，我们将使用 Blend 设计器来集成行为属性。

1. 请注意 Arc 对象的行为部分。 这会将行为与 Arc 关联。 使用设计器，您可以将行为与其它对象关联。
2. 该行为包含两个事件属性：ShowAdornerCommand 和 HideAdornerCommand。 这些绑定允许用户控制显示或隐藏模板 adorner。
3. 请注意 AdornerTemplate 属性。 在这里，该行为接受将显示为 adorner 的 DataTemplate。 DataTemplate 内部作为行为中 ContentControl 的 ContentTemplate 托管。
4. Adorner DataTemplate。 它是一个标准的 DataTemplate，因此您可以包含任何视觉元素。

XAML 代码

Adorner DataTemplate 非常简单明了。 它包含一些按相应方式对齐的图标。

<Window.Resources>
   <DropShadowEffect x:Key="BlurEffectStyle" …/>
    
        <!-- Template used in Adorner -->
        <DataTemplate x:Key="AdornerDataTemplate">
            <Grid>
                <StackPanel Orientation="Horizontal">
                    <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>
        
                <Image Source="Pencil.png"
                       Width="32" Height="32"
                       VerticalAlignment="Bottom" 
                       HorizontalAlignment="Right"/>
            </Grid>
   </DataTemplate>
</Window.Resources>

使用 adorner 行为也非常简单明了。

<Custom:Interaction.Behaviors>
     <CaControlTestApp:CaAdornerBehavior
            AdornerTemplate="{DynamicResource 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>

请注意，我们有事件触发器来显示/隐藏 adorner 到父级的 MouseEvents。 您可以使用任何其它触发器来显示它。 DataTrigger 等也会起作用。

历史

• 2011 年 10 月 19 日：第一个版本。
• 2011 年 11 月 18 日：更新了示例代码。 行为类没有正确绑定。 这已修复为绑定到被装饰的 UI 元素的数据上下文。