Ribbon of Revit API – 1: PushButton and TextBox - RevitNetAddinWizard & NavisworksNetAddinWizard

Revit API introduced ribbon API in version 2010 and enhanced it dramatically in version 2011. Now the Ribbon API supports creating push buttons (PushButton), text boxes (TextBox), pull-down button groups (PulldownButton), split pull-down button groups (SplitButton), radio-button groups (RadioButtonGroup), combo-box groups (ComboBox), stacked item groups (StackedItems), and some non-data items like Separator and SlideOut.

Many of them are item containers such as those group ones, a couple of are data/reaction items as the PushButton and the TextBox, and some are for display purposes only as the Separator and the SlidOut, which do not contain real data or trigger commands. The first two can both be nested into some groups sometimes and stand side by side with those groups if necessary. In this article, we will be focusing on the two most fundamental but also important ones.

RibbonButton items are command oriented. They carry name, text, assembly and command information, have small image, large image and tooltip associated to indicate what command it is about, and can support a long description and a detailed image to show some more details about the command.

TextBox items are data centric. They provide an edit box to collect data from users, have a small image associated which can act as a button if necessary, and hold the data in the Value member. Its ItemText is not used at all and you will notice it’s always null if being debugged.

Here is some code to create a few PushButton and TextBox items and add them to a RibbonPanel:

        private void AddRibbonButtonsAndTexts(RibbonPanel panel)
        {
            PushButtonData itemData1 = new PushButtonData("itemName1", "Command 1", AssemblyFullName, "RevitAddinCSProject.ExtCmd1");
            PushButton item1 = panel.AddItem(itemData1) as PushButton;
            item1.ToolTip = itemData1.Text; // Can be changed to a more descriptive text.
            item1.Image = BmpImageSource("RevitAddinCSProject.Resources.Embedded_Item1_16x16.bmp");
            item1.LargeImage = BmpImageSource("RevitAddinCSProject.Resources.Embedded_Item1_32x32.bmp");

            PushButtonData itemData2 = new PushButtonData("itemName2", "Command 2", AssemblyFullName, "RevitAddinCSProject.ExtCmd2");
            PushButton item2 = panel.AddItem(itemData2) as PushButton;
            item2.ToolTip = itemData2.Text; // Can be changed to a more descriptive text.
            item2.Image = new BitmapImage(new Uri(Path.Combine(AssemblyPath, "Standalone_Item1_16x16.bmp"), UriKind.Absolute));
            item2.LargeImage = new BitmapImage(new Uri(Path.Combine(AssemblyPath, "Standalone_Item1_32x32.bmp"), UriKind.Absolute));

            TextBoxData itemData3 = new TextBoxData("itemName3");
            Autodesk.Revit.UI.TextBox item3 = panel.AddItem(itemData3) as Autodesk.Revit.UI.TextBox;
            item3.Value = "Option 3";
            item3.ToolTip = itemData3.Name; // Can be changed to a more descriptive text.
            item3.Image = BmpImageSource("RevitAddinCSProject.Resources.Embedded_Item2_16x16.bmp");
            item3.ShowImageAsButton = true;
            item3.EnterPressed += CallbackOfTextBox;

            TextBoxData itemData4 = new TextBoxData("itemName4");
            Autodesk.Revit.UI.TextBox item4 = panel.AddItem(itemData4) as Autodesk.Revit.UI.TextBox;
            item4.Value = "Option 4";
            item4.ToolTip = itemData4.Name; // Can be changed to a more descriptive text.
            item4.Image = new BitmapImage(new Uri(Path.Combine(AssemblyPath, "Standalone_Item2_16x16.bmp"), UriKind.Absolute));
            item4.ShowImageAsButton = true;
            item4.EnterPressed += CallbackOfTextBox;
        }

As can be noticed, two different image handling approaches are also introduced, one of which is to use some embedded resources and the other of which is to use some stand alone images which reside in the same folder as the running assembly is. Please make sure the images are embedded as specified and in the right place so as for the code to function properly.

The images associated with the TextBox items are all shown as buttons and they also serve as a workaround actually to an issue of the TextBox. That is, users have to press the Enter key to update the value behind the edit box, and if not, e.g. just moving focus away, the input will be lost. Clicking the image besides the TextBox will act like pressing the Enter key but in a more natural and user friendly way. It seems good to use a single save-like image for all TextBox items and may be better to wrap all these into a new class like TextBoxImage, NaturalTextBox, or something like that. Here is the callback of the TextBox image clicking event:

        public void CallbackOfTextBox(object sender, TextBoxEnterPressedEventArgs args)
        {
            Autodesk.Revit.UI.TextBox textBox = sender as Autodesk.Revit.UI.TextBox;
            // TODO: Add code to tweak the TextBox if necessary.
        }

Here are some utility methods used in the code mentioned earlier:

        private string AssemblyPath
        {
            get
            {
                return Path.GetDirectoryName(AssemblyFullName);
            }
        }

        private string AssemblyFullName
        {
            get
            {
                return Assembly.GetExecutingAssembly().Location;
            }
        }

        private System.Windows.Media.ImageSource BmpImageSource(string embeddedPath)
        {
            Stream stream = this.GetType().Assembly.GetManifestResourceStream(embeddedPath);
            var decoder = new System.Windows.Media.Imaging.BmpBitmapDecoder(stream, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default);

            return decoder.Frames[0];
        }

If the following method is called in the OnStartup implementation of an IExternalApplication:

        private RibbonPanel CreateRibbonPanel()
        {
            RibbonPanel panel = _cachedUiCtrApp.CreateRibbonPanel("RevitAddinCSProject");
            AddRibbonButtonsAndTexts(panel);

return panel;
}

A Revit Ribbon will be created and may look like (depending on what those images really are):

The RevitAddinWizard can help us create all these code automatically in a few seconds.

Our Software http://netspiderstudio.com/Software.html
Support: mailto:[email protected]
Query: mailto:[email protected]
Blog: http://spiderinnet.typepad.com
More: http://netspiderstudio.com

Links to some related articles:

Ribbon of Revit API - PushButton And TextBox

Use Ribbon Creator of RevitAddCoder to Create PushButton And Separator

Use Ribbon Creator of RevitAddCoder to Create TextBox

Ribbon of Revit API - ComboBox And ComboBoxMember

Use Ribbon Creator of RevitAddCoder to Create ComboBox And ComboBoxMember

Ribbon of Revit API - PulldownButton And SplitButton

Use Ribbon Creator of RevitAddCoder to Create PulldownButton And PushButton

Use Ribbon Creator of RevitAddCoder to Create SplitButton And PushButton

Ribbon of Revit API - RadioButtonGroup And ToggleButton

Use Ribbon Creator of RevitAddCoder to Create RadioButtonGroup And ToggleButton

Ribbon of Revit API - Stacked Group And AddStackedItems