演练：在设计时调试 WPF 自定义控件

项目
05/28/2012

[本文档仅供预览，在以后的发行版中可能会发生更改。包含的空白主题用作占位符。]

本演练演示如何调试 windows presentation foundation (WPF) 自定义控件的设计时装饰器。装饰器是一个复选框，提供简单的自动调整大小功能。

在本演练中，您将执行下列任务:

创建一个 WPF 自定义控件库项目。
创建设计时元数据的一个单独的程序集。
实现装饰器提供程序。
在设计时测试控件。
设置项目以便进行设计时调试。
调试控件在设计时。

完成后，您将了解如何为自定义控件调试装饰器。

备注

您看到的对话框和菜单命令可能会与 " 帮助 " 中的描述不同具体取决于您现用的设置或版本。若要更改设置，请选择在工具菜单的 导入和导出设置 。有关更多信息，请参见 Visual Studio 设置。

系统必备

您需要以下组件来完成本演练:

Visual Studio 2012 RC.

创建自定义控件

第一步是为自定义控件创建项目。该控件是带有少量设计时代码的按钮，使用 GetIsInDesignMode 方法实现设计时行为。

创建自定义控件

创建新 WPF 自定义控件库名为 AutoSizeButtonLibrary的项目在 Visual Basic 或 Visual C#。

CustomControl1 的代码在代码编辑器中打开。
在 解决方案资源管理器，将代码文件的名称更改为 AutoSizeButton.cs 或 AutoSizeButton.vb。如果此项目请求的出现消息框是要执行重命名所有引用，单击是。
打开 AutoSizeButton.cs 或 AutoSizeButton.vb 在代码编辑器中。

用下面的代码替换自动生成的代码。，当按钮出现在设计器中时，此代码从 Button 继承并显示文本 “已激活设计模式”。

Imports System
Imports System.Collections.Generic
Imports System.Text
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.ComponentModel

' The AutoSizeButton control implements a button
' with a custom design-time experience. 
Public Class AutoSizeButton
    Inherits Button

    Public Sub New()
        ' The following code enables custom design-mode logic.
        ' The GetIsInDesignMode check and the following design-time 
        ' code are optional and shown only for demonstration.
        If DesignerProperties.GetIsInDesignMode(Me) Then
            Content = "Design mode active"
        End If

    End Sub
End Class

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows.Controls;
using System.Windows.Media;
using System.ComponentModel;

namespace AutoSizeButtonLibrary
{
    // The AutoSizeButton control implements a button
    // with a custom design-time experience. 
    public class AutoSizeButton : Button
    {
        public AutoSizeButton()
        {
            // The following code enables custom design-mode logic.
            // The GetIsInDesignMode check and the following design-time 
            // code are optional and shown only for demonstration.
            if (DesignerProperties.GetIsInDesignMode(this))
            {
                Content = "Design mode active";
            }
        }
    }
}

将项目的输出路径设置为 “bin \”。
生成解决方案。

创建设计时元数据程序集

设计时代码在特定元数据程序集中部署。对于本演练，自定义装饰器在名为 AutoSizeButtonLibrary.VisualStudio.Design 的程序集中部署。有关更多信息，请参见提供设计时元数据。

创建设计时元数据程序集

在 Visual Basic 中添加个新的类库名为 AutoSizeButtonLibrary.VisualStudio.Design 的项目或 Visual c# 为解决方案。
将项目的输出路径设置为 “ \ AutoSizeButtonLibrary \ bin \”。这在同一文件夹使控件的程序集和元数据程序集，使设计器的元数据发现。
添加对下列 WPF 程序集。
- PresentationCore
- PresentationFramework
- System.Xaml
- WindowsBase
添加对以下 WPF Designer 程序集。
- Microsoft.Windows.Design.Extensibility
- Microsoft.Windows.Design.Interaction
添加对 AutoSizeButtonLibrary 项目。
在 解决方案资源管理器，将 Class1 代码文件的名称改为 Metadata.cs 或 Metadata.vb。如果此项目请求的出现消息框是要执行重命名所有引用，单击是。

用下面的代码替换自动生成的代码。将自定义设计时实现附加到 AutoSizeButton 类的此代码创建 AttributeTable 。

Imports System
Imports System.Collections.Generic
Imports System.Text
Imports System.ComponentModel
Imports System.Windows.Media
Imports System.Windows.Controls
Imports System.Windows

Imports AutoSizeButtonLibrary
Imports Microsoft.Windows.Design.Features
Imports Microsoft.Windows.Design.Metadata
Imports AutoSizeButtonLibrary.VisualStudio.Design

' The ProvideMetadata assembly-level attribute indicates to designers
' that this assembly contains a class that provides an attribute table. 
<Assembly: ProvideMetadata(GetType(AutoSizeButtonLibrary.VisualStudio.Design.Metadata))> 

' Container for any general design-time metadata to initialize.
' Designers look for a type in the design-time assembly that 
' implements IProvideAttributeTable. If found, designers instantiate
' this class and access its AttributeTable property automatically.
Friend Class Metadata
    Implements IProvideAttributeTable

    ' Accessed by the designer to register any design-time metadata.
    Public ReadOnly Property AttributeTable() As AttributeTable _
        Implements IProvideAttributeTable.AttributeTable
        Get
            Dim builder As New AttributeTableBuilder()

            builder.AddCustomAttributes( _
                GetType(AutoSizeButton), _
                New FeatureAttribute(GetType(AutoSizeAdornerProvider)))

            Return builder.CreateTable()
        End Get
    End Property
End Class

using System;
using System.Collections.Generic;
using System.Text;
using System.ComponentModel;
using System.Windows.Media;
using System.Windows.Controls;
using System.Windows;

using AutoSizeButtonLibrary;
using Microsoft.Windows.Design.Features;
using Microsoft.Windows.Design.Metadata;
using AutoSizeButtonLibrary.VisualStudio.Design;

// The ProvideMetadata assembly-level attribute indicates to designers
// that this assembly contains a class that provides an attribute table. 
[assembly: ProvideMetadata(typeof(AutoSizeButtonLibrary.VisualStudio.Design.Metadata))]
namespace AutoSizeButtonLibrary.VisualStudio.Design
{
    // Container for any general design-time metadata to initialize.
    // Designers look for a type in the design-time assembly that 
    // implements IProvideAttributeTable. If found, designers instantiate 
    // this class and access its AttributeTable property automatically.
    internal class Metadata : IProvideAttributeTable
    {
        // Accessed by the designer to register any design-time metadata.
        public AttributeTable AttributeTable
        {
            get 
            {
                AttributeTableBuilder builder = new AttributeTableBuilder();

                builder.AddCustomAttributes(
                    typeof(AutoSizeButton),
                    new FeatureAttribute(typeof(AutoSizeAdornerProvider)));

                return builder.CreateTable();
            }
        }
    }
}

保存解决方案。

实现装饰器提供程序

装饰器提供程序是在名为 AutoSizeAdornerProvider的类型中实现的。此装饰器 FeatureProvider 启用设置控件的 Height 和 Width 属性在设计时。

实现装饰器提供程序

将名为 AutoSizeAdornerProvider 的新类添加到 AutoSizeButtonLibrary.VisualStudio.Design 项目。

在 AutoSizeAdornerProvider的代码编辑器中，用以下代码替换自动生成的代码。提供基于 CheckBox 控件的装饰器的此代码实现 PrimarySelectionAdornerProvider 。

Imports System
Imports System.Collections.Generic
Imports System.Text
Imports System.Windows.Input
Imports System.Windows
Imports System.Windows.Automation
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Shapes
Imports Microsoft.Windows.Design.Interaction
Imports Microsoft.Windows.Design.Model

' The following class implements an adorner provider for the 
' AutoSizeButton control. The adorner is a CheckBox control, which 
' changes the Height and Width of the AutoSizeButton to "Auto",
' which is represented by Double.NaN.
Public Class AutoSizeAdornerProvider
    Inherits PrimarySelectionAdornerProvider

    Private settingProperties As Boolean
    Private adornedControlModel As ModelItem
    Private autoSizeCheckBox As CheckBox
    Private autoSizeAdornerPanel As AdornerPanel

    ' The constructor sets up the adorner control. 
    Public Sub New()
        autoSizeCheckBox = New CheckBox()
        autoSizeCheckBox.Content = "AutoSize"
        autoSizeCheckBox.IsChecked = True
        autoSizeCheckBox.FontFamily = AdornerFonts.FontFamily
        autoSizeCheckBox.FontSize = AdornerFonts.FontSize
        autoSizeCheckBox.Background = CType( _
            AdornerResources.FindResource(AdornerColors.RailFillBrushKey),  _
            Brush)
    End Sub

    ' The following method is called when the adorner is activated.
    ' It creates the adorner control, sets up the adorner panel,
    ' and attaches a ModelItem to the AutoSizeButton.
    Protected Overrides Sub Activate(ByVal item As ModelItem)

        ' Save the ModelItem and hook into when it changes.
        ' This enables updating the slider position when 
        ' a new background value is set.
        adornedControlModel = item
        AddHandler adornedControlModel.PropertyChanged, AddressOf AdornedControlModel_PropertyChanged

        ' All adorners are placed in an AdornerPanel
        ' for sizing and layout support.
        Dim panel As AdornerPanel = Me.Panel

        ' Set up the adorner's placement.
        AdornerPanel.SetAdornerHorizontalAlignment(autoSizeCheckBox, AdornerHorizontalAlignment.OutsideLeft)
        AdornerPanel.SetAdornerVerticalAlignment(autoSizeCheckBox, AdornerVerticalAlignment.OutsideTop)

        ' Listen for changes to the checked state.
        AddHandler autoSizeCheckBox.Checked, AddressOf autoSizeCheckBox_Checked
        AddHandler autoSizeCheckBox.Unchecked, AddressOf autoSizeCheckBox_Unchecked

        ' Run the base implementation.
        MyBase.Activate(item)

    End Sub

    ' The Panel utility property demand-creates the 
    ' adorner panel and adds it to the provider's 
    ' Adorners collection.
    Public ReadOnly Property Panel() As AdornerPanel
        Get
            If Me.autoSizeAdornerPanel Is Nothing Then
                Me.autoSizeAdornerPanel = New AdornerPanel()

                ' Add the adorner to the adorner panel.
                Me.autoSizeAdornerPanel.Children.Add(autoSizeCheckBox)

                ' Add the panel to the Adorners collection.
                Adorners.Add(autoSizeAdornerPanel)

            End If

            Return Me.autoSizeAdornerPanel
        End Get
    End Property

    ' The following code handles the Checked event.
    ' It autosizes the adorned control's Height and Width.
    Sub autoSizeCheckBox_Checked(ByVal sender As Object, ByVal e As RoutedEventArgs) 
        Me.SetHeightAndWidth(True)
    End Sub


    ' The following code handles the Unchecked event.
    ' It sets the adorned control's Height and Width to a hard-coded value.
    Sub autoSizeCheckBox_Unchecked(ByVal sender As Object, ByVal e As RoutedEventArgs) 
        Me.SetHeightAndWidth(False)
    End Sub

    ' The SetHeightAndWidth utility method sets the Height and Width
    ' properties through the model and commits the change.
    Private Sub SetHeightAndWidth(ByVal [auto] As Boolean) 

        settingProperties = True

        Dim batchedChange As ModelEditingScope = adornedControlModel.BeginEdit()
        Try
            Dim widthProperty As ModelProperty = adornedControlModel.Properties("Width")

            Dim heightProperty As ModelProperty = adornedControlModel.Properties("Height")

            If [auto] Then
                widthProperty.ClearValue()
                heightProperty.ClearValue()
            Else
                widthProperty.SetValue(20.0)
                heightProperty.SetValue(20.0)
            End If

            batchedChange.Complete()
        Finally
            batchedChange.Dispose()
            settingProperties = False
        End Try

    End Sub

    ' The following method deactivates the adorner.
    Protected Overrides Sub Deactivate()

        RemoveHandler adornedControlModel.PropertyChanged, _
            AddressOf AdornedControlModel_PropertyChanged

        MyBase.Deactivate()

    End Sub


    ' The following method handles the PropertyChanged event.
    Sub AdornedControlModel_PropertyChanged( _
        ByVal sender As Object, _
        ByVal e As System.ComponentModel.PropertyChangedEventArgs)

        If settingProperties Then Return

        If e.PropertyName = "Height" Or e.PropertyName = "Width" Then
            Dim h As Double = CType(adornedControlModel.Properties("Height").ComputedValue, Double)
            Dim w As Double = CType(adornedControlModel.Properties("Width").ComputedValue, Double)

            If Double.IsNaN(h) And Double.IsNaN(w) Then
                autoSizeCheckBox.IsChecked = True
            Else
                autoSizeCheckBox.IsChecked = False
            End If
        End If

    End Sub
End Class

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows.Input;
using System.Windows;
using System.Windows.Automation;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;
using Microsoft.Windows.Design.Interaction;
using Microsoft.Windows.Design.Model;

namespace AutoSizeButtonLibrary.VisualStudio.Design
{
    // The following class implements an adorner provider for the 
    // AutoSizeButton control. The adorner is a CheckBox control, which 
    // changes the Height and Width of the AutoSizeButton to "Auto",
    // which is represented by double.NaN.
    public class AutoSizeAdornerProvider : PrimarySelectionAdornerProvider
    {
        bool settingProperties;
        private ModelItem adornedControlModel;
        CheckBox autoSizeCheckBox;
        AdornerPanel autoSizeAdornerPanel;

        // The constructor sets up the adorner control. 
        public AutoSizeAdornerProvider()
        {
            autoSizeCheckBox = new CheckBox();
            autoSizeCheckBox.Content = "AutoSize";
            autoSizeCheckBox.IsChecked = true;
            autoSizeCheckBox.FontFamily = AdornerFonts.FontFamily;
            autoSizeCheckBox.FontSize = AdornerFonts.FontSize;
            autoSizeCheckBox.Background = AdornerResources.FindResource(
                AdornerColors.RailFillBrushKey) as Brush;
        }

        // The following method is called when the adorner is activated.
        // It creates the adorner control, sets up the adorner panel,
        // and attaches a ModelItem to the AutoSizeButton.
        protected override void Activate(ModelItem item)
        {
            // Save the ModelItem and hook into when it changes.
            // This enables updating the slider position when 
            // a new background value is set.
            adornedControlModel = item;
            adornedControlModel.PropertyChanged += 
                new System.ComponentModel.PropertyChangedEventHandler(
                    AdornedControlModel_PropertyChanged);

            // All adorners are placed in an AdornerPanel
            // for sizing and layout support.
            AdornerPanel panel = this.Panel;

            // Set up the adorner's placement.
            AdornerPanel.SetAdornerHorizontalAlignment(autoSizeCheckBox, AdornerHorizontalAlignment.OutsideLeft);
            AdornerPanel.SetAdornerVerticalAlignment(autoSizeCheckBox, AdornerVerticalAlignment.OutsideTop);

            // Listen for changes to the checked state.
            autoSizeCheckBox.Checked += new RoutedEventHandler(autoSizeCheckBox_Checked);
            autoSizeCheckBox.Unchecked += new RoutedEventHandler(autoSizeCheckBox_Unchecked);

            // Run the base implementation.
            base.Activate(item);
        }

        // The Panel utility property demand-creates the 
        // adorner panel and adds it to the provider's 
        // Adorners collection.
        private AdornerPanel Panel
        {
            get
            {
                if (this.autoSizeAdornerPanel == null)
                {
                    autoSizeAdornerPanel = new AdornerPanel();

                    // Add the adorner to the adorner panel.
                    autoSizeAdornerPanel.Children.Add(autoSizeCheckBox);

                    // Add the panel to the Adorners collection.
                    Adorners.Add(autoSizeAdornerPanel);
                }

                return this.autoSizeAdornerPanel;
            }
        }

        // The following code handles the Checked event.
        // It autosizes the adorned control's Height and Width.
        void autoSizeCheckBox_Checked(object sender, RoutedEventArgs e)
        {
            this.SetHeightAndWidth(true);
        }

        // The following code handles the Unchecked event.
        // It sets the adorned control's Height and Width to a hard-coded value.
        void autoSizeCheckBox_Unchecked(object sender, RoutedEventArgs e)
        {
            this.SetHeightAndWidth(false);
        }

        // The SetHeightAndWidth utility method sets the Height and Width
        // properties through the model and commits the change.
        private void SetHeightAndWidth(bool autoSize)
        {
            settingProperties = true;

            try
            {
            using (ModelEditingScope batchedChange = adornedControlModel.BeginEdit())
            {
                ModelProperty widthProperty =
                    adornedControlModel.Properties["Width"];

                ModelProperty heightProperty =
                    adornedControlModel.Properties["Height"];

                if (autoSize)
                {
                    widthProperty.ClearValue();
                    heightProperty.ClearValue();
                }
                else
                {
                    widthProperty.SetValue(20d);
                    heightProperty.SetValue(20d);
                }

                batchedChange.Complete();
            }
            }
            finally { settingProperties = false; }
        }

        // The following method deactivates the adorner.
        protected override void Deactivate()
        {
            adornedControlModel.PropertyChanged -= 
                new System.ComponentModel.PropertyChangedEventHandler(
                    AdornedControlModel_PropertyChanged);

            base.Deactivate();
        }

        // The following method handles the PropertyChanged event.
        void AdornedControlModel_PropertyChanged(
            object sender, 
            System.ComponentModel.PropertyChangedEventArgs e)
        {
            if (settingProperties)
            {
                return;
            }

            if (e.PropertyName == "Height" || e.PropertyName == "Width")
            {
                double h = (double)adornedControlModel.Properties["Height"].ComputedValue;
                double w = (double)adornedControlModel.Properties["Width"].ComputedValue;

                autoSizeCheckBox.IsChecked = (h == double.NaN && w == double.NaN) ? true : false;
            }
        }
    }
}

生成解决方案。

测试设计时实现

代码，就象使用任何其他 WPF 控件，可以使用 AutoSizeButton 控件。 WPF Designer 处理所有设计时对象的创建。

测试设计时实现

新的 WPF 应用程序项目添加名为 DemoApplication 到解决方案。

在 MainWindow.xaml WPF Designer打开。
添加对 AutoSizeButtonLibrary 项目。

在 XAML 视图中，用以下代码替换自动生成的代码。此 XAML 将添加对 AutoSizeButtonLibrary 命名空间并添加 AutoSizeButton 自定义控件。该按钮出现在且带有文本 “已激活设计模式”设计 " 视图中，表明该按钮处于设计模式下。如果该按钮未出现，可能需要单击设计器顶部的信息栏以重新加载视图。

<Window x:Class="DemoApplication.MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ab="clr-namespace:AutoSizeButtonLibrary;assembly=AutoSizeButtonLibrary"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <ab:AutoSizeButton Height="Auto" Width="Auto" />
    </Grid>
</Window>

在设计视图中，单击 AutoSizeButton 选择控件。

CheckBox 控件在 AutoSizeButton 控件上方。
取消选中复选框装饰器。

控件变小。复选框装饰器将保留其位置相对于所装饰的控件。

设置项目以便进行设计时调试

此时，您已完成设计时实现。现在可以使用 Visual Studio 设置断点并单步执行设计时代码。若要调试设计时实现，要附加到 Visual Studio 另一个实例对当前 Visual Studio 会话。

设置项目以便进行设计时调试

在 解决方案资源管理器，右击 DemoApplication 项目并选择 设为启动项目。
在 解决方案资源管理器，右击 DemoApplication 项目并选择属性。
在 DemoApplication 项目设计器 " 中，单击调试选项。
在 启动操作 部分中，选择 启动外部程序。在调试 Visual Studio实例。
单击省略号 () 按钮打开 选择文件 对话框。
为 Visual Studio浏览。可执行文件的名称为 devenv.exe，，并且，如果将安装在默认位置的 Visual Studio ，则路径为 “%programfiles% \ Microsoft Visual Studio 9.0 \ Common7 \ IDE \ devenv.exe”。
单击打开选择 devenv.exe。

在设计时调试的自定义控件

现在，因为它在设计模式下运行，可以进行调试自定义控件。启动调试会话时， Visual Studio 将创建一个新的实例，因此，您将使用它来加载 AutoSizeButtonLibrary 解决方案。当您在WPF Designer的 MainWindow.xaml，自定义控件实例将创建并开始运行。

调试自定义控件在设计时

在代码编辑器中打开 AutoSizeButton 代码文件并在构造函数中添加断点。
打开 Metadata.cs 或 Metadata.vb 在代码编辑器并添加断点。 AttributeTable 属性。
打开 AutoSizeAdornerProvider.cs 或 AutoSizeAdornerProvider.vb 在 代码编辑器 并添加断点在构造函数。
添加其余方法中的断点 AutoSizeAdornerProvider 类的。
按 F5 启动调试会话。

Visual Studio 第二个实例创建。可以区分调试实例和第二个实例之间有两种方法:
- 调试实例具有文字 正在运行 在其标题栏。
- 调试实例在其禁用的调试工具栏的启动按钮。
您的断点在调试实例将设置为。
在 Visual Studio第二个实例中，打开 AutoSizeButtonLibrary 解决方案。
打开在 WPF Designer的 MainWindow.xaml。

Visual Studio 调试实例将获得焦点，并且执行将停止在AttributeTable 属性的断点。
按 F5 继续调试。

停止执行在 AutoSizeButton 构造函数中的断点。
按 F5 继续调试。

Visual Studio 第二个实例将获得焦点，并且 WPF Designer 显示。
在设计视图中，单击 AutoSizeButton 选择控件。

Visual Studio 调试实例将获得焦点，并且执行将停止在 AutoSizeAdornerProvider 构造函数中的断点。
按 F5 继续调试。

停止执行在 Activate 方法中的断点。
按 F5 继续调试。

Visual Studio 第二个实例将获得焦点，并且 WPF Designer 显示。复选框装饰器将显示在 AutoSizeButton上方和左侧。
完成本演练后，您可以来停止调试会话通过关闭 Visual Studio 第二个实例或单击调试实例中的 停止调试 按钮。

后续步骤

可以添加更多的自定义设计时功能。您的自定义控件。

添加自定义装饰器添加到控件的设计时。有关更多信息，请参见演练：创建设计时装饰器。
创建自定义类型的一个编辑器，可在 " 属性 " 窗口中使用。有关更多信息，请参见如何：创建值编辑器。
创建一个颜色编辑器，可在 " 属性 " 窗口中使用。有关更多信息，请参见演练：实现颜色编辑器。

请参见

演练：在设计时调试 WPF 自定义控件

系统必备

创建自定义控件

创建自定义控件

创建设计时元数据程序集

创建设计时元数据程序集

实现装饰器提供程序

实现装饰器提供程序

测试设计时实现

测试设计时实现

设置项目以便进行设计时调试

设置项目以便进行设计时调试

在设计时调试的自定义控件

调试自定义控件在设计时

后续步骤

请参见

任务

参考

概念

其他资源

其他资源