Návod: Implementace editoru typů uživatelského rozhraní

Článek
07/21/2015

Můžete zadat vlastní zkušenosti návrhu pro komplexní vlastnosti typy implementací do uživatelského rozhraní (UI) typ editoru.

Tento návod popisuje, jak vytvářet vlastní uživatelské rozhraní typu editor pro vlastní typ a zobrazení pomocí úpravy rozhraní PropertyGrid.

V tomto návodu úlohy zahrnují:

Definování vlastní typ.
Definování ovládacího prvku zobrazení uživatelského rozhraní editoru typu.
Definice třídy, který je odvozen od UITypeEditor.
Potlačení GetEditStyle metoda informovat PropertyGrid typu editor stylu, který bude používat editor.
Potlačení EditValue metoda zpracování uživatelského rozhraní, zpracování vstupu uživatele a přiřazení hodnoty.

Chcete-li zkopírovat kód v tomto návodu je jako jediný výpis, viz Postupy: Vytvoření ovládacího prvku Windows Forms, který využívá funkce sady Visual Studio pro dobu návrhu.

Požadavky

K dokončení tohoto návodu budete potřebovat:

Dostatečná oprávnění, budete moci vytvořit a spustit v počítači aplikace projekty model Windows Forms kde .NET Framework je nainstalován.

Definování vlastní typ

Vlastní typ editor uživatelského rozhraní zobrazí vlastní typ.Tento typ může být složitý nebo jednoduché.U tohoto postupu bude definovat jednoduchý typ s vlastní chování úpravy návrhu.Tento typ se nazývá MarqueeLightShape, a je enum dvě hodnoty Square a Circle.

Definovat vlastní výčtu typu

V textu ovládacího prvku model Windows Forms definice definovat MarqueeLightShape typu.

' 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
}

Definování ovládacího prvku zobrazení

Vlastní typ editor uživatelského rozhraní zobrazí editační rozhraní pomocí ovládacího prvku model Windows Forms.Tento ovládací prvek s názvem LightShapeSelectionControl, a je odvozeno z UserControl.Jeho konstruktoru bere aktuální hodnotu vlastnosti a odkaz na IWindowsFormsEditorService.Ovládací prvek zobrazení používá CloseDropDown metodu na IWindowsFormsEditorService zavřete rozbalovací okna při klepnutí na výběr.

Definovat zobrazení ovládacího prvku

V textu ovládacího prvku model Windows Forms definice definovat LightShapeSelectionControl řízení.

' 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


    }

Definování uživatelského rozhraní typu Třída Editor

Chcete-li implementovat chování editoru typu UI odvodit z UITypeEditor základní třída.Tato třída se nazývá LightShapeEditor.

Definovat uživatelské rozhraní typu Třída Editor

Povolit přístup k .NET Framework podporu návrhu odkazování na sestavení System.Design a importem System.Drawing.Design a System.Windows.Forms.Design obory názvů.Další informace naleznete v tématu Postupy: Přístup k podpoře návrhu ve Windows Forms.

V textu ovládacího prvku formuláře okno Definice definovat LightShapeEditor třídy.

' 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
{

Potlačení metody GetEditStyle

GetEditStyle Metoda označuje návrhu prostředí, jaký typ uživatelského rozhraní vašeho uživatelského rozhraní typu editor implementuje.Možné hodnoty jsou definovány v UITypeEditorEditStyle typu.LightShapeEditor Implementuje DropDown editor typ uživatelského rozhraní.

Potlačit metodu GetEditStyle

V textu LightShapeEditor definice přepsat GetEditStyle metoda vrátit 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;
}

Potlačení metody EditValue

EditValue Stanoví metody interakce mezi návrhové prostředí a uživatelské rozhraní pro úpravy vlastní typ.EditValue Metoda vytvoří instanci ovládacího prvku zobrazení nebo modálním dialogovým oknem, se kterým uživatel upraví hodnotu.Po dokončení uživatele úpravy, EditValue metoda vrátí hodnotu návrhové prostředí.

U ovládacího prvku zobrazení jako LightShapeSelectionControl, EditValue metoda může předat odkaz na IWindowsFormsEditorService do ovládacího prvku zobrazení.Ovládací prvek zobrazení můžete použít tento odkaz zavřete sám, když uživatel vybere hodnotu.To není nutné pro modální dialogové okno, protože formulář zavřít sama.

Potlačit metodu EditValue

V textu LightShapeEditor definici přepsat EditValue metoda.

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;
}

Potlačení metody PaintValue

Grafické znázornění hodnota této vlastnosti může poskytnout přepsáním PaintValue metoda.

Potlačit metodu PaintValue

V textu LightShapeEditor definici přepsat PaintValue metoda.Také přepsat GetPaintValueSupported metoda vrátit 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);
        }
    }   
}

Vlastnosti připojení Editor typ uživatelského rozhraní

Při editor typ uživatelského rozhraní je připraven pro použití ve vaší vlastní ovládací prvek, připojit LightShapeEditor na vlastnost implementovat vlastnost založené na MarqueeLightShape zadejte a aplikovat EditorAttribute vlastnosti.

Připojit k vlastnosti editor typ uživatelského rozhraní

V textu ovládacího prvku definice deklarovat MarqueeLightShape vlastnost pojmenovanou LightShape.Také deklarovat pole s názvem instance lightShapeValue typu MarqueeLightShape vlastnost dozadu.Použije EditorAttribute vlastnosti.

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;
    }
}

Testování Editor typ uživatelského rozhraní

Editor typu uživatelského rozhraní můžete otestovat vytvořením instanci vlastního ovládacího prvku a jejich připojení k PropertyGrid ovládat pomocí SelectedObject vlastnost.

Používáte-li aplikaci Visual Studio, vytvořit nový projekt aplikace systému Windows a odkaz na sestavení ovládacího prvku přidejte instanci ovládacího prvku do formuláře.Rozsáhlá podpora pro tento úkol v Visual Studio.Walkthrough: Automatically Populating the Toolbox with Custom Components

Pokud v době návrhu jsou zobrazeny vlastnosti ovládacího prvku, můžete vybrat LightShape vlastnost.Při výběru, šipka dolů ( Okno vlastností šipka dolů ) se zobrazí.Po klepnutí na šipku se objeví pod položku Vlastnosti ovládacího prvku zobrazení.Klepněte na kruh nebo čtverec, vyberte hodnotu.Po klepnutí na tlačítko, ovládacího prvku zobrazení zavře sama a hodnoty, které jste vybrali, se zobrazí v PropertyGrid.

[!POZNÁMKA]

Při vývoji vlastní UITypeEditor, je vhodné nastavit číslo sestavení přibývá s každou sestavení.To zabrání verze starší, mezipaměti vaše UITypeEditor z vytvořených v návrhovém prostředí.

Další kroky

Jakmile máte vytvořen vlastní typ editor uživatelského rozhraní, Prozkoumat další způsoby interakce s PropertyGrid a návrhové prostředí:

Typ editor uživatelského rozhraní, který je modální dialogové okno namísto zobrazení ovládacího prvku na základě zápisu.
Konvertor typu pro vlastní typ pomocí zápisu TypeConverter třídy.Další informace naleznete v tématu Postupy: Implementace konvertoru typů.
Zápis designer pro vaše vlastní ovládací prvek.Další informace naleznete v tématu Postupy: Vytvoření ovládacího prvku Windows Forms, který využívá funkce sady Visual Studio pro dobu návrhu.

Viz také

Sdílet prostřednictvím