الإرشادات التفصيلية: تطبيق محرر نوع واجهة المستخدم

مقالة
06/30/2010

يمكنك توفير عمل وقت التصميم مخصصة لأنواع الخصائص المعقدة بتنفيذ واجهة المستخدم محرر نوع (UI).

توضح هذه معاينة كيفية كتابة نوع واجهة المستخدم الخاصة بك محرر نوع مخصص وعرض التحرير الواجهة باستخدام PropertyGrid.

تتضمن المهام الموضح في هذه الإرشادات التفصيلية:

تعريف نوع مخصص.
تعريف عنصر تحكم عرض لنوع واجهة المستخدم الخاصة بك محرر.
تعريف فئة مشتقة من UITypeEditor.
تجاوز GetEditStyleأسلوب إلى إعلام PropertyGridنوع النمط ediإلىr أنه سوف ediإلىr استخدم.
تجاوز EditValueالأسلوب إلى معالجة في واجهة مستخدم الخاصة بمعالجة إدخال مستخدم وتعيين القيمة.

إلى نسخ التعليمة البرمجية في هذه معاينة كقائمة واحدة، راجع كيفية: إنشاء عنصر تحكم نماذج Windows التي يأخذ ميزة ميزات وقت التصميم.

المتطلبات الأساسية

لإكمال هذه المعاينة ، سوف تحتاج إلى :

أذونات كافية لكي تكون قادراً تشغيل إنشاء وتشغيل مشاريع تطبيق Windows Forms تشغيل الكمبيوتر الموقع .NET Frameworkمثبت.

تعريف نوع مخصص

يعرض محرر نوع واجهة المستخدم المخصصة بنوع مخصص. قد يكون هذا النوع بسيطة أو معقدة. لهذه معاينة، سوف تقوم بتعريف نوع بسيط مع سلوك ‏‏تحرير مخصص لوقت التصميم. Th هو نوع هو يسمى MarqueeLightShape، وهو هو enumبقيمتين، Squareو Circle.

إلى تعريف نوع تعداد cusإلىm

في نص تعريف عنصر تحكم's نماذج Windows الخاص بك، بتعريف MarqueeLightShapeالنوع.

' This defines the possible values for the MarqueeBorder
' control's LightShape property.
Public Enum MarqueeLightShape
    Square
    Circle
End Enum

// This defines the possible values for the MarqueeBorder
// control's LightShape property.
public enum MarqueeLightShape
{
    Square,
    Circle
}

تعريف عنصر تحكم عرض

اكتب واجهة المستخدم المخصصة الخاصة بك يعرض المحرر ‏‏تحرير واجهة استخدام عنصر تحكم Windows Forms. Th هو عنصر التحكم هو باسم LightShapeSelectionControl، وأنها مشتقة من UserControl. يأخذ المنشئ الخاص به لالقيمة خاصية الحالي و مرجع إلى IWindowsFormsEditorService. يستخدم عنصر التحكم عرض CloseDropDownأسلوب تشغيل IWindowsFormsEditorServiceإلى يغلق نافذة قائمة منسدلة عند قيام مستخدم بالنقر تشغيل تحديد.

إلى تعريف عنصر تحكم عرض

في نص تعريف عنصر تحكم's نماذج Windows الخاص بك، عرف LightShapeSelectionControlعنصر تحكم.

' This control provides the custom UI for the LightShape property
' of the MarqueeBorder. It is used by the LightShapeEditor.
Public Class LightShapeSelectionControl
    Inherits System.Windows.Forms.UserControl

   Private lightShapeValue As MarqueeLightShape = MarqueeLightShape.Square

    Private editorService As IWindowsFormsEditorService
   Private squarePanel As System.Windows.Forms.Panel
   Private circlePanel As System.Windows.Forms.Panel

   ' Required designer variable.
   Private components As System.ComponentModel.Container = Nothing


   ' This constructor takes a MarqueeLightShape value from the
   ' design-time environment, which will be used to display
   ' the initial state.
    Public Sub New( _
    ByVal lightShape As MarqueeLightShape, _
    ByVal editorService As IWindowsFormsEditorService)
        ' This call is required by the Windows.Forms Form Designer.
        InitializeComponent()

        ' Cache the light shape value provided by the 
        ' design-time environment.
        Me.lightShapeValue = lightShape

        ' Cache the reference to the editor service.
        Me.editorService = editorService

        ' Handle the Click event for the two panels. 
        AddHandler Me.squarePanel.Click, AddressOf squarePanel_Click
        AddHandler Me.circlePanel.Click, AddressOf circlePanel_Click
    End Sub

    Protected Overrides Sub Dispose(ByVal disposing As Boolean)
        If disposing Then

            ' Be sure to unhook event handlers
            ' to prevent "lapsed listener" leaks.
            RemoveHandler Me.squarePanel.Click, AddressOf squarePanel_Click
            RemoveHandler Me.circlePanel.Click, AddressOf circlePanel_Click

            If (components IsNot Nothing) Then
                components.Dispose()
            End If

        End If
        MyBase.Dispose(disposing)
    End Sub

    ' LightShape is the property for which this control provides
    ' a custom user interface in the Properties window.
    Public Property LightShape() As MarqueeLightShape

        Get
            Return Me.lightShapeValue
        End Get

        Set(ByVal Value As MarqueeLightShape)
            If Me.lightShapeValue <> Value Then
                Me.lightShapeValue = Value
            End If
        End Set

    End Property

    Protected Overrides Sub OnPaint(ByVal e As PaintEventArgs)
        MyBase.OnPaint(e)

        Dim gCircle As Graphics = Me.circlePanel.CreateGraphics()
        Try
            Dim gSquare As Graphics = Me.squarePanel.CreateGraphics()
            Try
                ' Draw a filled square in the client area of
                ' the squarePanel control.
                gSquare.FillRectangle( _
                Brushes.Red, _
                0, _
                0, _
                Me.squarePanel.Width, _
                Me.squarePanel.Height)

                ' If the Square option has been selected, draw a 
                ' border inside the squarePanel.
                If Me.lightShapeValue = MarqueeLightShape.Square Then
                    gSquare.DrawRectangle( _
                    Pens.Black, _
                    0, _
                    0, _
                    Me.squarePanel.Width - 1, _
                    Me.squarePanel.Height - 1)
                End If

                ' Draw a filled circle in the client area of
                ' the circlePanel control.
                gCircle.Clear(Me.circlePanel.BackColor)
                gCircle.FillEllipse( _
                Brushes.Blue, _
                0, _
                0, _
                Me.circlePanel.Width, _
                Me.circlePanel.Height)

                ' If the Circle option has been selected, draw a 
                ' border inside the circlePanel.
                If Me.lightShapeValue = MarqueeLightShape.Circle Then
                    gCircle.DrawRectangle( _
                    Pens.Black, _
                    0, _
                    0, _
                    Me.circlePanel.Width - 1, _
                    Me.circlePanel.Height - 1)
                End If
            Finally
                gSquare.Dispose()
            End Try
        Finally
            gCircle.Dispose()
        End Try
    End Sub

    Private Sub squarePanel_Click( _
    ByVal sender As Object, _
    ByVal e As EventArgs)

        Me.lightShapeValue = MarqueeLightShape.Square
        Me.Invalidate(False)
        Me.editorService.CloseDropDown()

    End Sub


    Private Sub circlePanel_Click( _
    ByVal sender As Object, _
    ByVal e As EventArgs)

        Me.lightShapeValue = MarqueeLightShape.Circle
        Me.Invalidate(False)
        Me.editorService.CloseDropDown()

    End Sub

#Region "Component Designer generated code"

    '/ <summary> 
    '/ Required method for Designer support - do not modify 
    '/ the contents of this method with the code editor.
    '/ </summary>
    Private Sub InitializeComponent()
        Me.squarePanel = New System.Windows.Forms.Panel
        Me.circlePanel = New System.Windows.Forms.Panel
        Me.SuspendLayout()
        ' 
        ' squarePanel
        ' 
        Me.squarePanel.Location = New System.Drawing.Point(8, 10)
        Me.squarePanel.Name = "squarePanel"
        Me.squarePanel.Size = New System.Drawing.Size(60, 60)
        Me.squarePanel.TabIndex = 2
        ' 
        ' circlePanel
        ' 
        Me.circlePanel.Location = New System.Drawing.Point(80, 10)
        Me.circlePanel.Name = "circlePanel"
        Me.circlePanel.Size = New System.Drawing.Size(60, 60)
        Me.circlePanel.TabIndex = 3
        ' 
        ' LightShapeSelectionControl
        ' 
        Me.Controls.Add(squarePanel)
        Me.Controls.Add(circlePanel)
        Me.Name = "LightShapeSelectionControl"
        Me.Size = New System.Drawing.Size(150, 80)
        Me.ResumeLayout(False)
    End Sub

#End Region

End Class

    // This control provides the custom UI for the LightShape property
    // of the MarqueeBorder. It is used by the LightShapeEditor.
    public class LightShapeSelectionControl : System.Windows.Forms.UserControl
    {
        private MarqueeLightShape lightShapeValue = MarqueeLightShape.Square;
        private IWindowsFormsEditorService editorService = null;
        private System.Windows.Forms.Panel squarePanel;
        private System.Windows.Forms.Panel circlePanel;

        // Required designer variable.
        private System.ComponentModel.Container components = null;

        // This constructor takes a MarqueeLightShape value from the
        // design-time environment, which will be used to display
        // the initial state.
        public LightShapeSelectionControl( 
            MarqueeLightShape lightShape,
            IWindowsFormsEditorService editorService )
        {
            // This call is required by the designer.
            InitializeComponent();

            // Cache the light shape value provided by the 
            // design-time environment.
            this.lightShapeValue = lightShape;

            // Cache the reference to the editor service.
            this.editorService = editorService;

            // Handle the Click event for the two panels. 
            this.squarePanel.Click += new EventHandler(squarePanel_Click);
            this.circlePanel.Click += new EventHandler(circlePanel_Click);
        }

        protected override void Dispose( bool disposing )
        {
            if( disposing )
            {
                // Be sure to unhook event handlers
                // to prevent "lapsed listener" leaks.
                this.squarePanel.Click -= 
                    new EventHandler(squarePanel_Click);
                this.circlePanel.Click -= 
                    new EventHandler(circlePanel_Click);

                if(components != null)
                {
                    components.Dispose();
                }
            }
            base.Dispose( disposing );
        }

        // LightShape is the property for which this control provides
        // a custom user interface in the Properties window.
        public MarqueeLightShape LightShape
        {
            get
            {
                return this.lightShapeValue;
            }

            set
            {
                if( this.lightShapeValue != value )
                {
                    this.lightShapeValue = value;
                }
            }
        }

        protected override void OnPaint(PaintEventArgs e)
        {
            base.OnPaint (e);

            using( 
                Graphics gSquare = this.squarePanel.CreateGraphics(),
                gCircle = this.circlePanel.CreateGraphics() )
            {   
                // Draw a filled square in the client area of
                // the squarePanel control.
                gSquare.FillRectangle(
                    Brushes.Red, 
                    0,
                    0,
                    this.squarePanel.Width,
                    this.squarePanel.Height
                    );

                // If the Square option has been selected, draw a 
                // border inside the squarePanel.
                if( this.lightShapeValue == MarqueeLightShape.Square )
                {
                    gSquare.DrawRectangle( 
                        Pens.Black,
                        0,
                        0,
                        this.squarePanel.Width-1,
                        this.squarePanel.Height-1);
                }

                // Draw a filled circle in the client area of
                // the circlePanel control.
                gCircle.Clear( this.circlePanel.BackColor );
                gCircle.FillEllipse( 
                    Brushes.Blue, 
                    0,
                    0,
                    this.circlePanel.Width, 
                    this.circlePanel.Height
                    );

                // If the Circle option has been selected, draw a 
                // border inside the circlePanel.
                if( this.lightShapeValue == MarqueeLightShape.Circle )
                {
                    gCircle.DrawRectangle( 
                        Pens.Black,
                        0,
                        0,
                        this.circlePanel.Width-1,
                        this.circlePanel.Height-1);
                }
            }   
        }

        private void squarePanel_Click(object sender, EventArgs e)
        {
            this.lightShapeValue = MarqueeLightShape.Square;

            this.Invalidate( false );

            this.editorService.CloseDropDown();
        }

        private void circlePanel_Click(object sender, EventArgs e)
        {
            this.lightShapeValue = MarqueeLightShape.Circle;

            this.Invalidate( false );

            this.editorService.CloseDropDown();
        }

        #region Component Designer generated code
        /// <summary> 
        /// Required method for Designer support - do not modify 
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
            this.squarePanel = new System.Windows.Forms.Panel();
            this.circlePanel = new System.Windows.Forms.Panel();
            this.SuspendLayout();
// 
// squarePanel
// 
            this.squarePanel.Location = new System.Drawing.Point(8, 10);
            this.squarePanel.Name = "squarePanel";
            this.squarePanel.Size = new System.Drawing.Size(60, 60);
            this.squarePanel.TabIndex = 2;
// 
// circlePanel
// 
            this.circlePanel.Location = new System.Drawing.Point(80, 10);
            this.circlePanel.Name = "circlePanel";
            this.circlePanel.Size = new System.Drawing.Size(60, 60);
            this.circlePanel.TabIndex = 3;
// 
// LightShapeSelectionControl
// 
            this.Controls.Add(this.squarePanel);
            this.Controls.Add(this.circlePanel);
            this.Name = "LightShapeSelectionControl";
            this.Size = new System.Drawing.Size(150, 80);
            this.ResumeLayout(false);

        }
        #endregion


    }

تعريف واجهة المستخدم نوع محرر فئة

لتطبيق نوع واجهة المستخدم محرر السلوك، ينحدر من UITypeEditorفئة. الأساسية Th هو الفئة هو يسمى LightShapeEditor.

لتعريف واجهة مستخدم كتابة فئة محرر

تمكين الوصول إلى .NET Frameworkدعم وقت التصميم بواسطة الرجوع إلى تجميع النظام.تصميم واستيرادها System.Drawing.Designو System.Windows.Forms.Designمساحات الاسم. لمزيد من المعلومات، راجع كيفية: دعم وقت التصميم الوصول في نماذج Windows.

في نص تعريف عنصر تحكم's "نافذة النماذج" الخاصة بك، عرف LightShapeEditorفئة.

' This class demonstrates the use of a custom UITypeEditor. 
' It allows the MarqueeBorder control's LightShape property
' to be changed at design time using a customized UI element
' that is invoked by the Properties window. The UI is provided
' by the LightShapeSelectionControl class.
Friend Class LightShapeEditor
    Inherits UITypeEditor

// This class demonstrates the use of a custom UITypeEditor. 
// It allows the MarqueeBorder control's LightShape property
// to be changed at design time using a customized UI element
// that is invoked by the Properties window. The UI is provided
// by the LightShapeSelectionControl class.
internal class LightShapeEditor : UITypeEditor
{

تجاوز في GetEditStyle أسلوب

GetEditStyleالأسلوب يشير إلى بيئة تصميم أي نوع من واجهة مستخدم اكتب واجهة مستخدم الخاصة بك محرر implements. قيم المحتملة معرفة في UITypeEditorEditStyleنوع. LightShapeEditorيطبق DropDownنوع واجهة المستخدم محرر.

إلى تجاوز الأسلوب GetEditStyle

في النص LightShapeEditorالتعريف، يمنع GetEditStyleأسلوب إلى بإرجاع DropDown.

        Public Overrides Function GetEditStyle( _
        ByVal context As System.ComponentModel.ITypeDescriptorContext) _
        As UITypeEditorEditStyle
            Return UITypeEditorEditStyle.DropDown
        End Function

public override UITypeEditorEditStyle GetEditStyle(
System.ComponentModel.ITypeDescriptorContext context)
{
    return UITypeEditorEditStyle.DropDown;
}

تجاوز في EditValue أسلوب

EditValueيؤسس أسلوب تفاعل بين بيئة التصميم وواجهة مستخدم ل ‏‏تحرير نوع مخصص. EditValueالأسلوب إنشاء مثيل من عنصر تحكم لعرض أو Modal صندوق حوار معها مستخدم تحرير قيمة. عند مستخدم هو finهوhed التحرير، EditValueالأسلوب بإرجاع القيمة إلى بيئة تصميم.

في حالة من عنصر تحكم عرض مثل LightShapeSelectionControl، EditValueقد يمر أسلوب مرجع إلى IWindowsFormsEditorServiceإلى عنصر تحكم العرض. يمكنك استخدام طريقة عرض عنصر التحكم هذا مرجعاً إلى يغلق نفسه عندما يقوم مستخدم بتحديد القيمة. Th هو هو غير ضرورية لمربع حوار مشروط، لأنه يمكن إغلاق نموذج نفسه.

إلى تجاوز الأسلوب EditValue

في النص LightShapeEditorالتعريف، يمنع EditValueأسلوب.

Public Overrides Function EditValue( _
ByVal context As ITypeDescriptorContext, _
ByVal provider As IServiceProvider, _
ByVal value As Object) As Object
    If (provider IsNot Nothing) Then
        editorService = _
        CType(provider.GetService(GetType(IWindowsFormsEditorService)), _
        IWindowsFormsEditorService)
    End If

    If (editorService IsNot Nothing) Then
        Dim selectionControl As _
        New LightShapeSelectionControl( _
        CType(value, MarqueeLightShape), _
        editorService)

        editorService.DropDownControl(selectionControl)

        value = selectionControl.LightShape
    End If

    Return value
End Function

public override object EditValue(
    ITypeDescriptorContext context,
    IServiceProvider provider,
    object value)
{
    if (provider != null)
    {
        editorService =
            provider.GetService(
            typeof(IWindowsFormsEditorService))
            as IWindowsFormsEditorService;
    }

    if (editorService != null)
    {
        LightShapeSelectionControl selectionControl =
            new LightShapeSelectionControl(
            (MarqueeLightShape)value,
            editorService);

        editorService.DropDownControl(selectionControl);

        value = selectionControl.LightShape;
    }

    return value;
}

تجاوز في PaintValue أسلوب

يمكنك توفير تمثيل رسومي لقيمة خاصية واسطة تجاوز PaintValueأسلوب.

إلى تجاوز الأسلوب PaintValue

في النص LightShapeEditorالتعريف، يمنع PaintValueأسلوب. أيضا تجاوز GetPaintValueSupportedأسلوب إلى بإرجاع true.

' This method indicates to the design environment that
' the type editor will paint additional content in the
' LightShape entry in the PropertyGrid.
Public Overrides Function GetPaintValueSupported( _
ByVal context As ITypeDescriptorContext) As Boolean

    Return True

End Function

' This method paints a graphical representation of the 
' selected value of the LightShpae property.
Public Overrides Sub PaintValue( _
ByVal e As PaintValueEventArgs)

    Dim shape As MarqueeLightShape = _
    CType(e.Value, MarqueeLightShape)
    Using p As Pen = Pens.Black

        If shape = MarqueeLightShape.Square Then

            e.Graphics.DrawRectangle(p, e.Bounds)

        Else

            e.Graphics.DrawEllipse(p, e.Bounds)

        End If

    End Using

End Sub

// This method indicates to the design environment that
// the type editor will paint additional content in the
// LightShape entry in the PropertyGrid.
public override bool GetPaintValueSupported(
    ITypeDescriptorContext context)
{  
    return true;
}

// This method paints a graphical representation of the 
// selected value of the LightShpae property.
public override void PaintValue(PaintValueEventArgs e)
{   
    MarqueeLightShape shape = (MarqueeLightShape)e.Value;
    using (Pen p = Pens.Black)
    {
        if (shape == MarqueeLightShape.Square)
        {
            e.Graphics.DrawRectangle(p, e.Bounds);
        }
        else
        {
            e.Graphics.DrawEllipse(p, e.Bounds);
        }
    }   
}

إرفاق نوع واجهة المستخدم الخاصة بك محرر لخاصية

عند كتابة واجهة المستخدم الخاصة بك محرر هو جاهزة للاستخدام في عنصر التحكم المخصص الخاص بك، قم بيرفق LightShapeEditorلخاصية، قم بتطبيق خاصية استناداً إلى MarqueeLightShapeكتابة، وتطبيق EditorAttributeللخاصية.

إلى إرفاق ediإلىr نوع واجهة المستخدم الخاصة بك إلى خاصية

في نص تعريف عنصر تحكم's الخاص بك، قم بتعريف على MarqueeLightShapeخاصية المسماة LightShape. قم بتعريف أيضا على حقل مثيل مسمى lightShapeValueمن نوع MarqueeLightShapeإلى نسخ الخصائص. يطبق EditorAttributeإلى الخاصية.

Private lightShapeValue As MarqueeLightShape

<Category("Marquee"), _
Browsable(True), _
EditorAttribute(GetType(LightShapeEditor), _
GetType(System.Drawing.Design.UITypeEditor))> _
Public Property LightShape() As MarqueeLightShape
    Get
        Return Me.lightShapeValue
    End Get
    Set(ByVal value As MarqueeLightShape)
        Me.lightShapeValue = value
    End Set
End Property

private MarqueeLightShape lightShapeValue;

[Category("Marquee")]
[Browsable(true)]
[EditorAttribute(typeof(LightShapeEditor),
typeof(System.Drawing.Design.UITypeEditor))]
public MarqueeLightShape LightShape
{
    get
    {
        return this.lightShapeValue;
    }

    set
    {
        this.lightShapeValue = value;
    }
}

اختبار الخاص بك واجه المستخدم نوع محرر

يمكنك اختبار محرر نوع واجهة المستخدم الخاصة بك بواسطة إنشاء مثيل لجهاز مخصص عنصر تحكم وإرفاقها إلى PropertyGridعنصر تحكم استخدام SelectedObjectخاصية.

في حالة استخدام برنامج ‏‫Visual Studio، يمكنك إنشاء مشروع جديد لتطبيق Windows، تشير إلى تجميع عنصر تحكم، و إضافة مثيل لعنصر التحكم إلى النموذج. يوجد دعم شامل لهذه المهمة في Visual Studio. لمزيد من المعلومات، راجع: الإرشادات التفصيلية: تلقائياً بملء مربع أدوات التحكم مع مخصص المكونات.

عند الخصائص الخاص بك عنصر تحكم معروضة في وقت التصميم، يمكنك تحديد LightShapeخاصية. عندما يكون محدد، سهم المنسدل ( السهم لأسفل لنافذة الخصائص ) يظهر. عندما كنت انقر السهم، يظهر أسفل الإدخال خاصية التحكم في عرض الخاصة بك. انقر فوق دائرة أو مربع لتحديد القيمة. بعد النقر فوق عنصر تحكم لعرض dismisses نفسه وتظهر القيمة التي قمت بتحديدها في PropertyGrid.

ملاحظة

When you develop your مخصص UITypeEditor, it هو recommended that you التعيين the بنية رقم إلى increment مع each بنية. This prevents older, cached versions of your UITypeEditor من being تاريخ الإنشاء في the تصميم بيئة.

الخطوات التالية

Once you have authored your own واجه المستخدم نوع محرر, explore غير ذلك ways إلى interact مع a PropertyGrid و the تصميم بيئة:

Write a واجه المستخدم نوع محرر based تشغيل a مربع حوار مشروط instead of a عرض عنصر تحكم.
Write a نوع محوّل for a مخصص نوع using the TypeConverter فئة. لمزيد من المعلومات، راجع كيفية: تنفيذ محول نوع.
Write a مصمم for your مخصص عنصر تحكم. لمزيد من المعلومات، راجع كيفية: إنشاء عنصر تحكم نماذج Windows التي يأخذ ميزة ميزات وقت التصميم.

راجع أيضًا:

مشاركة عبر