Skip to main content
Visual Studio 11 Beta
演练:在设计时调试 WPF 自定义控件

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

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

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

  • 创建一个 WPF 自定义控件库项目。

  • 创建设计时元数据的一个单独的程序集。

  • 实现装饰器提供程序。

  • 在设计时测试控件。

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

  • 调试控件在设计时。

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

NoteNote

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

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

  • Visual Studio 2012 RC.

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

创建自定义控件

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

    CustomControl1 的代码在代码编辑器中打开。

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

  3. 打开 AutoSizeButton.cs 或 AutoSizeButton.vb 在代码编辑器中。

  4. 用下面的代码替换自动生成的代码。 ,当按钮出现在设计器中时,此代码从 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";
                }
            }
        }
    }
    
    
  5. 将项目的输出路径设置为 “bin \”。

  6. 生成解决方案。

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

创建设计时元数据程序集

  1. 在 Visual Basic 中添加个新的类库名为 AutoSizeButtonLibrary.VisualStudio.Design 的项目或 Visual c# 为解决方案。

  2. 将项目的输出路径设置为 “ \ AutoSizeButtonLibrary \ bin \”。 这在同一文件夹使控件的程序集和元数据程序集,使设计器的元数据发现。

  3. 添加对下列 WPF 程序集。

    • PresentationCore

    • PresentationFramework

    • System.Xaml

    • WindowsBase

  4. 添加对以下 WPF Designer 程序集。

    • Microsoft.Windows.Design.Extensibility

    • Microsoft.Windows.Design.Interaction

  5. 添加对 AutoSizeButtonLibrary 项目。

  6. 解决方案资源管理器,将 Class1 代码文件的名称改为 Metadata.cs 或 Metadata.vb。 如果此项目请求的出现消息框是要执行重命名所有引用,单击

  7. 用下面的代码替换自动生成的代码。 将自定义设计时实现附加到 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();
                }
            }
        }
    }
    
    
  8. 保存解决方案。

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

实现装饰器提供程序

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

  2. 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;
                }
            }
        }
    }
    
    
  3. 生成解决方案。

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

测试设计时实现

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

    在 MainWindow.xaml WPF Designer打开。

  2. 添加对 AutoSizeButtonLibrary 项目。

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

    
    <Window x:Class="DemoApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://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>
    
    
  4. 在设计视图中,单击 AutoSizeButton 选择控件。

    CheckBox 控件在 AutoSizeButton 控件上方。

  5. 取消选中复选框装饰器。

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

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

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

  1. 解决方案资源管理器,右击 DemoApplication 项目并选择 设为启动项目

  2. 解决方案资源管理器,右击 DemoApplication 项目并选择 属性

  3. DemoApplication 项目设计器 " 中,单击 调试 选项。

  4. 启动操作 部分中,选择 启动外部程序 在调试 Visual Studio实例。

  5. 单击省略号 ( VisualStudioEllipsesButton 屏幕快照) 按钮打开 选择文件 对话框。

  6. 为 Visual Studio浏览。 可执行文件的名称为 devenv.exe,,并且,如果将安装在默认位置的 Visual Studio ,则路径为 “%programfiles% \ Microsoft Visual Studio 9.0 \ Common7 \ IDE \ devenv.exe”。

  7. 单击 打开 选择 devenv.exe。

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

调试自定义控件在设计时

  1. 在代码编辑器中打开 AutoSizeButton 代码文件并在构造函数中添加断点。

  2. 打开 Metadata.cs 或 Metadata.vb 在代码编辑器并添加断点。 AttributeTable 属性。

  3. 打开 AutoSizeAdornerProvider.cs 或 AutoSizeAdornerProvider.vb 在 代码编辑器 并添加断点在构造函数。

  4. 添加其余方法中的断点 AutoSizeAdornerProvider 类的。

  5. 按 F5 启动调试会话。

    Visual Studio 第二个实例创建。 可以区分调试实例和第二个实例之间有两种方法:

    • 调试实例具有文字 正在运行 在其标题栏。

    • 调试实例在其禁用的 调试 工具栏的 启动 按钮。

    您的断点在调试实例将设置为。

  6. 在 Visual Studio第二个实例中,打开 AutoSizeButtonLibrary 解决方案。

  7. 打开在 WPF Designer的 MainWindow.xaml。

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

  8. 按 F5 继续调试。

    停止执行在 AutoSizeButton 构造函数中的断点。

  9. 按 F5 继续调试。

    Visual Studio 第二个实例将获得焦点,并且 WPF Designer 显示。

  10. 在设计视图中,单击 AutoSizeButton 选择控件。

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

  11. 按 F5 继续调试。

    停止执行在 Activate 方法中的断点。

  12. 按 F5 继续调试。

    Visual Studio 第二个实例将获得焦点,并且 WPF Designer 显示。 复选框装饰器将显示在 AutoSizeButton上方和左侧。

  13. 完成本演练后,您可以来停止调试会话通过关闭 Visual Studio 第二个实例或单击调试实例中的 停止调试 按钮。

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