Walkthrough: Creating a Menu Provider

Article
05/09/2012

[This documentation is for preview only, and is subject to change in later releases. Blank topics are included as placeholders.]

This walkthrough shows how to create a design-time menu provider for a Windows Presentation Foundation (WPF) custom control. You can use this shortcut menu item to set the value of the Background property on a custom button control. For a complete code listing, see the Context Menu Provider sample from the WPF Designer Extensibility Samples site.

In this walkthrough, you perform the following tasks:

Create a WPF custom control library project.
Create a separate assembly for design-time metadata.
Implement the menu provider.
Use the control at design time.

When you are finished, you will know how create a menu provider for a custom control.

Note

The dialog boxes and menu commands you see might differ from those described in Help depending on your active settings or edition. To change your settings, choose Import and Export Settings on the Tools menu. For more information, see Visual Studio Settings.

Prerequisites

You need the following components to complete this walkthrough:

Visual Studio 2012 RC.

Creating the Custom Control

The first step is to create the project for the custom control. The control is a simple button with small amount of design-time code, which uses the GetIsInDesignMode method to implement a design-time behavior.

To create the custom control

Create a new WPF Custom Control Library project in Visual Basic or Visual C# named CustomControlLibrary.

The code for CustomControl1 opens in the Code Editor.
In Solution Explorer, change the name of the code file to ButtonWithDesignTime.cs or ButtonWithDesignTime.vb. If a message box appears that asks if you want to perform a rename for all references in this project, click Yes.
Open ButtonWithDesignTime.cs or ButtonWithDesignTime.vb in the Code Editor.

Replace the automatically generated code with the following code. This code inherits from Button and displays the text "Design mode active" when the button appears in the designer.

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

Public Class ButtonWithDesignTime
    Inherits Button

    Public Sub New()
        ' 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 CustomControlLibrary
{
    public class ButtonWithDesignTime : Button
    {
        public ButtonWithDesignTime()
        {
            // The GetIsInDesignMode check and the following design-time 
            // code are optional and shown only for demonstration.
            if (DesignerProperties.GetIsInDesignMode(this))
            {
                Content = "Design mode active";
            }
        }
    }
}

Set the project's output path to "bin\".
Build the solution.

Creating the Design-time Metadata Assembly

Design-time code is deployed in special metadata assemblies. For this walkthrough, the context menu implementation is deployed in an assembly called CustomControlLibrary.VisualStudio.Design. For more information, see Providing Design-time Metadata.

To create the design-time metadata assembly

Add a new Class Library project in Visual Basic or Visual C# named CustomControlLibrary.VisualStudio.Design to the solution.
Set the project's output path to "..\CustomControlLibrary\bin\". This keeps the control's assembly and the metadata assembly in the same folder, which enables metadata discovery for designers.
Add references to the following WPF assemblies.
- PresentationCore
- PresentationFramework
- System.Xaml
- WindowsBase
Add references to the following WPF Designer assemblies.
- Microsoft.Windows.Design.Extensibility
- Microsoft.Windows.Design.Interaction
Add a reference to the CustomControlLibrary project.
In Solution Explorer, change the name of the Class1 code file to Metadata.cs or Metadata.vb. If a message box appears that asks if you want to perform a rename for all references in this project, click Yes.

Replace the automatically generated code with the following code. This code creates an AttributeTable which attaches the custom design-time implementation to the ButtonWithDesignTime class.

Imports System
Imports System.Collections.Generic
Imports System.Text
Imports System.ComponentModel
Imports System.Windows.Media
Imports System.Windows.Controls
Imports System.Windows
Imports CustomControlLibrary
Imports Microsoft.Windows.Design.Features
Imports Microsoft.Windows.Design.Metadata
'Imports CustomControlLibrary.VisualStudio.Design.Slid

' The ProvideMetadata assembly-level attribute indicates to designers
' that this assembly contains a class that provides an attribute table. 
<Assembly: ProvideMetadata(GetType(CustomControlLibrary.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()

            ' Add the menu provider to the design-time metadata.
            builder.AddCustomAttributes(GetType(ButtonWithDesignTime), _
                                        New FeatureAttribute(GetType(CustomContextMenuProvider)))

            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 CustomControlLibrary;
using Microsoft.Windows.Design.Features;
using Microsoft.Windows.Design.Metadata;
using CustomControlLibrary.VisualStudio.Design;

// The ProvideMetadata assembly-level attribute indicates to designers
// that this assembly contains a class that provides an attribute table. 
[assembly: ProvideMetadata(typeof(CustomControlLibrary.VisualStudio.Design.Metadata))]
namespace CustomControlLibrary.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();

                // Add the menu provider to the design-time metadata.
                builder.AddCustomAttributes(
                    typeof(ButtonWithDesignTime),
                    new FeatureAttribute(typeof(CustomContextMenuProvider)));

                return builder.CreateTable(); 
            }
        }
    }
}

Save the solution.

The menu provider is implemented in a type named CustomContextMenuProvider. The provided MenuAction enables setting the control's Background property at design time.

Add a new class named CustomContextMenuProvider to the CustomControlLibrary.VisualStudio.Design project.

In the Code Editor for CustomContextMenuProvider, replace the automatically generated code with the following code. This code implements a PrimarySelectionContextMenuProvider which provides a custom MenuAction.

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

' The CustomContextMenuProvider class provides two context menu items
' at design time. These are implemented with the MenuAction class.
Class CustomContextMenuProvider
    Inherits PrimarySelectionContextMenuProvider

    Private setBackgroundToBlueMenuAction As MenuAction
    Private clearBackgroundMenuAction As MenuAction

    ' The provider's constructor sets up the MenuAction objects 
    ' and the the MenuGroup which holds them.
    Public Sub New()

        ' Set up the MenuAction which sets the control's 
        ' background to Blue.
        setBackgroundToBlueMenuAction = New MenuAction("Blue")
        setBackgroundToBlueMenuAction.Checkable = True
        AddHandler setBackgroundToBlueMenuAction.Execute, AddressOf SetBackgroundToBlue_Execute

        ' Set up the MenuAction which sets the control's 
        ' background to its default value.
        clearBackgroundMenuAction = New MenuAction("Cleared")
        clearBackgroundMenuAction.Checkable = True
        AddHandler clearBackgroundMenuAction.Execute, AddressOf ClearBackground_Execute

        ' Set up the MenuGroup which holds the MenuAction items.
        Dim backgroundFlyoutGroup As New MenuGroup("SetBackgroundsGroup", "Set Background")

        ' If HasDropDown is false, the group appears inline, 
        ' instead of as a flyout. Set to true.
        backgroundFlyoutGroup.HasDropDown = True
        backgroundFlyoutGroup.Items.Add(setBackgroundToBlueMenuAction)
        backgroundFlyoutGroup.Items.Add(clearBackgroundMenuAction)
        Me.Items.Add(backgroundFlyoutGroup)

        ' The UpdateItemStatus event is raised immediately before 
        ' this provider shows its tabs, which provides the opportunity 
        ' to set states.
        AddHandler UpdateItemStatus, AddressOf CustomContextMenuProvider_UpdateItemStatus

    End Sub

    ' The following method handles the UpdateItemStatus event.
    ' It sets the MenuAction states according to the state
    ' of the control's Background property. This method is
    ' called before the context menu is shown.
    Sub CustomContextMenuProvider_UpdateItemStatus( _
        ByVal sender As Object, _
        ByVal e As MenuActionEventArgs)

        ' Turn everything on, and then based on the value 
        ' of the BackgroundProperty, selectively turn some off.
        clearBackgroundMenuAction.Checked = False
        clearBackgroundMenuAction.Enabled = True
        setBackgroundToBlueMenuAction.Checked = False
        setBackgroundToBlueMenuAction.Enabled = True

        ' Get a ModelItem which represents the selected control. 
        Dim selectedControl As ModelItem = _
            e.Selection.PrimarySelection

        ' Get the value of the Background property from the ModelItem.
        Dim backgroundProperty As ModelProperty = _
            selectedControl.Properties("Background")

        ' Set the MenuAction items appropriately.
        If Not backgroundProperty.IsSet Then
            clearBackgroundMenuAction.Checked = True
            clearBackgroundMenuAction.Enabled = False
        ElseIf backgroundProperty.ComputedValue.Equals(Brushes.Blue) Then
            setBackgroundToBlueMenuAction.Checked = True
            setBackgroundToBlueMenuAction.Enabled = False
        End If

    End Sub

    ' The following method handles the Execute event. 
    ' It sets the Background property to its default value.
    Sub ClearBackground_Execute( _
        ByVal sender As Object, _
        ByVal e As MenuActionEventArgs)

        Dim selectedControl As ModelItem = e.Selection.PrimarySelection
        selectedControl.Properties("Background").ClearValue()

    End Sub

    ' The following method handles the Execute event. 
    ' It sets the Background property to Brushes.Blue.
    Sub SetBackgroundToBlue_Execute( _
        ByVal sender As Object, _
        ByVal e As MenuActionEventArgs)

        Dim selectedControl As ModelItem = e.Selection.PrimarySelection
        selectedControl.Properties("Background").SetValue(Brushes.Blue)

    End Sub

End Class

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

namespace CustomControlLibrary.VisualStudio.Design
{
    // The CustomContextMenuProvider class provides two context menu items
    // at design time. These are implemented with the MenuAction class.
    class CustomContextMenuProvider : PrimarySelectionContextMenuProvider
    {
        private MenuAction setBackgroundToBlueMenuAction;
        private MenuAction clearBackgroundMenuAction;

        // The provider's constructor sets up the MenuAction objects 
        // and the the MenuGroup which holds them.
        public CustomContextMenuProvider()
        {   
            // Set up the MenuAction which sets the control's 
            // background to Blue.
            setBackgroundToBlueMenuAction = new MenuAction("Blue");
            setBackgroundToBlueMenuAction.Checkable = true;
            setBackgroundToBlueMenuAction.Execute += 
                new EventHandler<MenuActionEventArgs>(SetBackgroundToBlue_Execute);

            // Set up the MenuAction which sets the control's 
            // background to its default value.
            clearBackgroundMenuAction = new MenuAction("Cleared");
            clearBackgroundMenuAction.Checkable = true;
            clearBackgroundMenuAction.Execute += 
                new EventHandler<MenuActionEventArgs>(ClearBackground_Execute);

            // Set up the MenuGroup which holds the MenuAction items.
            MenuGroup backgroundFlyoutGroup = 
                new MenuGroup("SetBackgroundsGroup", "Set Background");

            // If HasDropDown is false, the group appears inline, 
            // instead of as a flyout. Set to true.
            backgroundFlyoutGroup.HasDropDown = true;
            backgroundFlyoutGroup.Items.Add(setBackgroundToBlueMenuAction);
            backgroundFlyoutGroup.Items.Add(clearBackgroundMenuAction);
            this.Items.Add(backgroundFlyoutGroup);

            // The UpdateItemStatus event is raised immediately before 
            // this provider shows its tabs, which provides the opportunity 
            // to set states.
            UpdateItemStatus += 
                new EventHandler<MenuActionEventArgs>(
                    CustomContextMenuProvider_UpdateItemStatus);
        }

        // The following method handles the UpdateItemStatus event.
        // It sets the MenuAction states according to the state
        // of the control's Background property. This method is
        // called before the context menu is shown.
        void CustomContextMenuProvider_UpdateItemStatus(
            object sender, 
            MenuActionEventArgs e)
        {
            // Turn everything on, and then based on the value 
            // of the BackgroundProperty, selectively turn some off.
            clearBackgroundMenuAction.Checked = false;
            clearBackgroundMenuAction.Enabled = true;
            setBackgroundToBlueMenuAction.Checked = false;
            setBackgroundToBlueMenuAction.Enabled = true;

            // Get a ModelItem which represents the selected control. 
            ModelItem selectedControl = e.Selection.PrimarySelection;

            // Get the value of the Background property from the ModelItem.
            ModelProperty backgroundProperty = 
                selectedControl.Properties["Background"];

            // Set the MenuAction items appropriately.
            if (!backgroundProperty.IsSet)
            {
                clearBackgroundMenuAction.Checked = true;
                clearBackgroundMenuAction.Enabled = false;
            }
            else if (backgroundProperty.ComputedValue == Brushes.Blue)
            {
                setBackgroundToBlueMenuAction.Checked = true;
                setBackgroundToBlueMenuAction.Enabled = false;
            }
        }

        // The following method handles the Execute event. 
        // It sets the Background property to its default value.
        void ClearBackground_Execute(
            object sender, 
            MenuActionEventArgs e)
        {
            ModelItem selectedControl = e.Selection.PrimarySelection;
            selectedControl.Properties["Background"].ClearValue();
        }

        // The following method handles the Execute event. 
        // It sets the Background property to Brushes.Blue.
        void SetBackgroundToBlue_Execute(
            object sender, 
            MenuActionEventArgs e)
        {
            ModelItem selectedControl = e.Selection.PrimarySelection;
            selectedControl.Properties["Background"].SetValue(Brushes.Blue);
        }
    }
}

Build the solution.

Testing the Design-time Implementation

You can use the ButtonWithDesignTime control as you would use any other WPF control. The WPF Designer handles the creation of all design-time objects.

To test the design-time implementation

Add a new WPF Application project in Visual Basic or Visual C# named DemoApplication to the solution.

MainWindow.xaml opens in the WPF Designer.
Add a reference to the CustomControlLibrary project.

In XAML view, replace the automatically generated XAML with the following XAML. This XAML adds a reference to the CustomControlLibrary namespace and adds the ButtonWithDesignTime custom control. The button appears in Design view with the text "Design mode active", indicating that it is in design mode. If the button does not appear, you might need to click the Information bar at the top of the designer to reload the view.

<Window x:Class="DemoApplication.MainWindow"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:cc="clr-namespace:CustomControlLibrary;assembly=CustomControlLibrary"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <cc:ButtonWithDesignTime Margin="30,30,30,30" Background="#FFD4D0C8"></cc:ButtonWithDesignTime>
    </Grid>
</Window>

In Design view, click the ButtonWithDesignTime control to select it.
Right-click the ButtonWithDesignTime control, point to Set Background, and select Blue.

The control's background is set to blue. In XAML view, the Background property is set to the value specified by the menu action.
Run the DemoApplication project.

At runtime, the button has the background you set with the shortcut menu.

Next Steps

You can add more custom design-time features to your custom controls.

Add a custom adorner to your control's design time. For more information, see Walkthrough: Creating a Design-time Adorner.
Create an editor for a custom type, which you can use in the Properties window. For more information, see How to: Create a Value Editor.

Share via

Walkthrough: Creating a Menu Provider

Prerequisites

Creating the Custom Control

To create the custom control

Creating the Design-time Metadata Assembly

To create the design-time metadata assembly

Implementing the Menu Provider

To implement the menu provider

Testing the Design-time Implementation

To test the design-time implementation

Next Steps

See Also

Reference

Other Resources

Additional resources