Use buttons, pickers, combo boxes and other input controls

The basic input controls are in the Mordex.Windows.UI.Controls namespace. The checked combo box, the multi column combo box and the value list up down box are in Mordex.Windows.DataGrid.Editors. Tool tips and the About box are in Mordex.Windows.Common.

All of them follow the theme of the application. See Themes.

Add a button

MxButton works like a Windows Forms button. Handle Click to run your code.

using System.Drawing;
using System.Windows.Forms;
using Mordex.Windows.UI.Controls;

MxButton save = new MxButton { Text = "Save", Size = new Size(96, 30) };
save.Click += (s, e) => SaveDocument();
Controls.Add(save);

MxButton implements IButtonControl. You can set it as the AcceptButton or CancelButton of a form, and set its DialogResult in a dialog.

ButtonStyle sets the kind of button.

For the two menu styles, set DropDownContextMenu to an MxContextMenu from the Mordex.Windows.UI.CommandBars namespace. DropDown() opens the menu in code.

To show a picture, set Image, or set ImageList and ImageIndex. HotImageIndex, PressedImageIndex and DisabledImageIndex give other pictures for those states. ToolTipText shows a tip when the mouse rests on the button.

Add check boxes and radio buttons

MxCheckBox and MxRadioButton work like their Windows Forms partners.

MxCheckBox notify = new MxCheckBox { Text = "Send e-mail notifications", Checked = true };

MxCheckBox install = new MxCheckBox { Text = "Install all components", ThreeState = true };
install.CheckState = CheckState.Indeterminate;

MxRadioButton standard = new MxRadioButton { Text = "Standard", Checked = true };
standard.CheckedChanged += (s, e) =>
{
    if (standard.Checked)
    {
        planLabel.Text = "Plan: Standard";
    }
};

Set ThreeState to true to allow the third state. Read it with CheckState. The CheckStateChanged event fires when it changes.

Let the user pick a color

MxColorButton shows the selected color. A click opens a color palette under the button.

MxColorButton textColor = new MxColorButton { SelectedColor = Color.FromArgb(31, 78, 121) };
textColor.SelectedColorChanged += (s, e) => preview.ForeColor = textColor.SelectedColor;

• SelectedColor. The chosen color.
• UseColorName. When true, the button text is the name of the color.
• EmptyColorText. The text when no color is chosen.
• ColorPicker. The palette that the button opens. Use it to change the palette options below.

MxColorPicker is the same palette as a control that stays on the form.

MxColorPicker palette = new MxColorPicker
{
    SelectedColor = Color.FromArgb(0, 120, 212),
    ShowMoreColorsButton = false,
    ShowAutomaticButton = false,
    ColorItemSize = new Size(32, 32)
};
palette.SelectedColorChanged += (s, e) => textColor.SelectedColor = palette.SelectedColor;

• ShowAutomaticButton. Shows a button for the automatic color, set in AutomaticColor. AutomaticButtonText is its text.
• ShowMoreColorsButton. Shows a button for more colors. MoreColorsButtonText is its text. Handle MoreColorsButtonClick to open your own color dialog.
• Columns. The number of color columns.
• ColorItemSize. The size of one color square.

Let the user pick a font

MxFontPicker lists the installed font families. The Text is the name of the chosen font.

MxFontPicker font = new MxFontPicker { Text = "Segoe UI" };
font.SelectedValueChanged += (s, e) => fontLabel.Text = font.Text;

• UseFontInFontNames. When true, each name in the list is drawn in its own font. This is the default.
• MaxRecentItems. The number of recently used fonts shown at the top of the list.
• SetFamilies(families). Limits the list to the font families you pass.

Add a combo box

MxComboBox holds a list of items. Add each item with its text and its value.

MxComboBox language = new MxComboBox { ComboStyle = Mordex.Windows.UI.Controls.ComboStyle.DropDownList };
language.Items.Add("English", "en");
language.Items.Add("French", "fr");
language.Items.Add("German", "de");
language.SelectedIndex = 0;

language.SelectedValueChanged += (s, e) => SetLanguage((string)language.SelectedValue);

ComboStyle.DropDownList lets the user only pick from the list. ComboStyle.Combo also lets the user type. With AutoComplete set to true, which is the default, typed text is completed from the list.

To fill the list from data, set DataSource, DisplayMember and ValueMember. Read the choice with SelectedValue, SelectedIndex or SelectedItem. NotInList is true when no item is selected.

Members of every combo box

MxComboBox and MxFontPicker share a base class, MxComboBase. It gives them these members:

• ReadOnly. Stops the user from changing the value.
• DroppedDown. Opens or closes the list in code.
• MaxDropDownItems. The number of items the list shows before it scrolls.
• DroppingDown. An event before the list opens. Set e.Cancel to true to keep it closed.
• DropDown and Closed. Events after the list opens and after it closes.

Let the user check several items

MxCheckedComboBox shows a list with a check box on each row. It reads its rows from a data source.

using System.Data;
using Mordex.Windows.DataGrid.Editors;

MxCheckedComboBox departments = new MxCheckedComboBox();
departments.SetDataBinding(departmentTable, "");
departments.DropDownValueMember = "Id";
departments.DropDownDisplayMember = "Name";
departments.RetrieveStructure();
departments.DropDownList.Columns["Id"].Visible = false;

departments.CheckedValues = new object[] { 1, 3 };
departments.CheckedValuesChanged += (s, e) => ShowChecked(departments.CheckedValues);

CheckedValues holds the values of the checked rows. CheckAll() and UncheckAll() change all rows at once. DropDownList is the grid inside the list, so you can hide or show its columns.

Show several columns in the list

MxMultiColumnComboBox shows a grid with several columns when it opens. The user picks one row.

MxMultiColumnComboBox employee = new MxMultiColumnComboBox();
employee.DataSource = employeeTable;
employee.ValueMember = "Id";
employee.DisplayMember = "Name";
employee.DropDownList.RetrieveStructure();
employee.Value = 3;

employee.ValueChanged += (s, e) => selectedLabel.Text = "Selected id: " + (employee.Value ?? "none");

Value is the value of the chosen row. Hide the columns you do not need through DropDownList.Columns.

Step through a fixed list of values

MxValueListUpDown shows one value at a time. The up and down buttons and the arrow keys move through the list.

MxValueListUpDown priority = new MxValueListUpDown();
priority.ValueList.Add(1, "Low");
priority.ValueList.Add(2, "Normal");
priority.ValueList.Add(3, "High");
priority.ValueList.Add(4, "Urgent");
priority.Value = 2;

priority.ValueChanged += (s, e) => priorityLabel.Text = "Priority " + priority.Value;

Each item has a value and a text. The control shows the text and returns the value in Value.

Pick a number with a track bar

MxTrackBar lets the user drag a thumb to pick a number between Minimum and Maximum.

MxTrackBar volume = new MxTrackBar
{
    Minimum = 0,
    Maximum = 100,
    Value = 40,
    SmallChange = 1,
    LargeChange = 10,
    TickStyle = TickStyle.BottomRight
};
volume.ValueChanged += (s, e) => volumeLabel.Text = volume.Value.ToString();

• SmallChange. The step for the arrow keys.
• LargeChange. The step for the Page Up and Page Down keys and for a click on the track.
• TickStyle. Where the tick marks go, with a Windows Forms TickStyle value. TickStyle.None hides them.
• Orientation. Set to Orientation.Vertical for an upright track bar.
• ThumbColor. The color of the thumb.

ValueChanged fires on every change. Scroll fires when the user moves the thumb.

Show progress

MxProgressBar fills from Minimum to Maximum as Value grows.

MxProgressBar download = new MxProgressBar { Height = 22, ShowPercentage = true };
download.Value = 65;

Set ShowPercentage to true to draw the percentage on the bar. StringAlignment places that text. The ValueChanged event fires when Value changes.

Add a rich tool tip

MxSuperTip shows a tool tip with a header, a picture, body text and a footer. Create one MxSuperTip for the form. Then give each control its own SuperTipSettings.

using Mordex.Windows.Common;

MxSuperTip superTip = new MxSuperTip { InitialDelay = 300, AutoPopDelay = 8000, ShowAlways = true };

SuperTipSettings settings = new SuperTipSettings
{
    HeaderText = "Save the document",
    Text = "Writes the open document to disk.",
    Image = picture,
    FooterText = "Press F1 for more help"
};

superTip.UseDefaultTheme = true;
superTip.SetSuperTip(saveButton, settings);

• UseDefaultTheme. When true, the tip takes its colors and border from the theme of the application.
• ToolTipStyle. The style of the tip when it does not use the theme: Standard, Office2007 or Office2010.
• WordWrap. Wraps long body text.
• HeaderImage and FooterImage. Small pictures next to the header and the footer.

InitialDelay and AutoPopDelay are in milliseconds. To show a tip at once, call Show(settings, control, point). The point is relative to the control.

superTip.Show(settings, saveButton, new Point(0, saveButton.Height + 4));

For a plain one line tip, use ThemedToolTip. It is a Windows Forms ToolTip that draws itself with the theme.

ThemedToolTip tip = new ThemedToolTip { InitialDelay = 300, ShowAlways = true };
tip.SetToolTip(otherButton, "A plain tip");

Dispose MxSuperTip and ThemedToolTip with the form when you create them in code.

Show an About box

MxAboutDialog is a ready About window. Pass it an assembly. It shows the product name, the description, the copyright and the file version from the attributes of that assembly.

using System.Reflection;
using Mordex.Windows.Common;

using (MxAboutDialog about = new MxAboutDialog(Assembly.GetExecutingAssembly()))
{
    about.ShowDialog(this);
}

Fill in AssemblyProduct, AssemblyDescription, AssemblyCopyright and AssemblyFileVersion of your assembly so the dialog has text to show. In an SDK style project these come from Product, Description, Copyright and FileVersion in the project file.