My DokuWiki

You've loaded an old revision of the document! If you save it, you will create a new version with this data.

**Telerik & Dev Notes**

====== Telerik – Editors ======

==== * RadAutoCompleteBox – racb ====

http://docs.telerik.com/devtools/winforms/editors/autocompletebox/autocompletebox\\
http://www.telerik.com/community/forums/winforms/editors.aspx\\
Video: http://www.telerik.com/videos/winforms/getting-started-with-radautocompletebox-for-winforms

RadAutoCompleteBox allows the end-user to easily fill-in text thanks to auto-complete functionality and tokens of text. This behavior is similar to the "To" field of Outlook and Facebook where you are filling-in the recipients to which you are going to send a message.

{{tdn:image83.png?335x158|A screenshot of a computer Description automatically generated}}

==== * RadBrowseEditor – rbe ====

[[https://docs.telerik.com/devtools/winforms/controls/editors/browseeditor/overview]]\\  [[http://www.telerik.com/community/forums/winforms/editors.aspx]]

Browse to specify a file or folder on disk.

<color red>### Take a look at this control set instead. [[https://docs.telerik.com/devtools/winforms/controls/file-dialogs/overview|File Dialogs]], It looks like this maybe replaces the RadBrowseEditor? ###</color>

//It opens a FileOpen, File Save or Folder Selection dialog apparently without calling the Windows API.//

RadBrowseEditor is a themable control which allows users to select a file or a directory from the file system or directly type the full path to it in the editor.

* ‘DialogType’ – one of a [[http://docs.telerik.com/devtools/winforms/editors/browseeditor/dialog-types|predefined set of dialog types]] determined by the BrowseEditorDialogType enumeration.
    * FolderBrowseDialogradBrowseEditor1.DialogType = BrowseEditorDialogType.FolderBrowseDialog;
    * FontDialog\\ radBrowseEditor1.DialogType = BrowseEditorDialogType.FontDialog;
    * OpenFileDialog\\ radBrowseEditor1.DialogType = BrowseEditorDialogType.OpenFileDialog;
    * SaveFileDialog\\ radBrowseEditor1.DialogType = BrowseEditorDialogType.SaveFileDialog;

### Add the [[https://docs.telerik.com/devtools/winforms/controls/file-dialogs/dialog-controls/radopenfolderdialog|RadOpenFolderDialog]] to this list. I like it much better than the old FolderBrowseDialog. Also see it here, under the RadBrowseEditor. I’m not sure which of those 2 controls are the one to use now.

{{tdn:image85.png?278x365|A screenshot of a computer Description automatically generated}}

{{tdn:image86.png?522x299|A screenshot of a computer program Description automatically generated}}

{{tdn:image87.png?524x300|A screenshot of a computer Description automatically generated}}

==== RadCalculatorDropDown – rcdd ====

[[http://docs.telerik.com/devtools/winforms/editors/calculatordropdown/calculatordropdown]]

RadCalculatorDropDown has a simple easy-to-use interface enabling the end user to perform all basic calculations such as addition, subtraction, multiplication, division as well as some more complicated ones – reciprocal, square root, negate.

{{tdn:image88.png?205x229|A screenshot of a calculator Description automatically generated}}

==== RadColorBox – rcb  ====

http://www.telerik.com/help/winforms/editors-color-box-overview.html\\
http://www.telerik.com/community/forums/winforms/editors.aspx

The main purpose of the control is to allow the user to select a color from a color dialog with preset colors or to type the color directly into the text field. The control then displays the color name if it is a named color or the RGB values of the selected color. A small rectangle filled with the selected color is displayed as well.

==== * RadDateTimePicker – rdtp  ====

http://www.telerik.com/help/winforms/editors-datetimepicker-overview.html

http://www.telerik.com/community/forums/winforms/calendar-and-datetimepicker.aspx\\
VIDEO: [[http://tv.telerik.com/watch/winforms/getting-started-with-radtimepicker-for-winforms|Getting Started Video]]

RadDateTimePicker allows interactive selection of dates using a drop down calendar.

{{tdn:image90.png?194x199|A calendar with green and white text Description automatically generated}}

Choose a date (optionally a time of day?)

* 'Format' = Short (9/24/2012), Long (Monday September 24, 2012), Time (1:24:38 AM), Custom (9/24/2012 1:24 AM)
 * 'Value' - date selected from the picker set in code or via the drop down calendar in the Properties window.<code csharp>this.rdtpStartDate.Value = DateTime.Today;  // Set Start date to today
this.radDateTimePicker1.Value = DateTime.Today.AddDays(1);  // Set the date to tomorrow
this.radDateTimePicker1.Value = DateTime.Today.AddDays(-1);  // Set the date to yesterday</code>

* By default a single arrow click moves one month and a double arrow click moves three months (called Fast Navigation).<code csharp>rrdtpNameOfControl.DateTimePickerElement.Calendar.FastNavigationStep = 12; // override fast navigation to 12 months so double arrow click jumps 1 year</code>
 * 'MinDate'/'MaxDate' - first and last dates that can be selected in the picker. Attempts to select outside these bounds are ignored.<code csharp>this.radDateTimePicker1.MinDate = DateTime.Today.AddDays(-DateTime.Today.Day);  // set the MinDate to be the first day of the current month.</code>

* 'NullText’ - text displayed when the NullableValue property is set to null and RadDateTimePicker is not in focus. By default, NullText is an empty string.<code csharp>this.radDateTimePicker1.NullText = "No date selected";</code>

* 'Format' - The DateTimePickerFormat enumeration values are Long, Short, Time and Custom. Set Format to Custom to enable the CustomFormat property.
 * 'CustomFormat' - format string determines the display of the date in the picker edit. See the Internationalization and Date Formats topic for more information.
 * 'Culture determines the language that the drop down calendar and edit will display in. See the Internationalization and Date Formats topic for more information.
 * 'CalendarSize' - gets/sets the size of the RadCalendar in the RadDateTimePicker drop-down.
 * 'NullableValue' - same as the Value property, but the NullableValue property is of type Nullable DateTime. It can be null – in this case if RadDateTimePicker is not selected it will show its NullText. In case RadDateTimePicker is selected, it will show the last entered date – this allows the end-user to enter and edit the date.<code csharp>this.radDateTimePicker1.NullableValue = null;</code>

==== * RadMaskedEditBox – rmeb ====

[[http://www.telerik.com/help/winforms/editors-maskededitbox-overview.html]]\\  [[http://www.telerik.com/community/forums/winforms/editors.aspx]]

RadMaskedEditBox is a themeable text box that formats and constrains text to a predefined pattern or a pattern you define. RadMaskedEditBox also handles globalization for date and time edits. Date and Time masks allow the user to navigate using the up and down arrow keys.

{{tdn:image91.png?416x262|A screenshot of a computer Description automatically generated}}

The MaskType property defines what type of mask would be used in the masked box:

* **None**
  * **[[http://www.telerik.com/help/winforms/editors-maskededitbox-date-and-time-masks.html|DateTime]] -** set the **MaskType** property to **DateTime** and the **Mask** property to "d". //See [[http://www.telerik.com/help/winforms/editors-maskededitbox-date-and-time-masks.html|Date and Time Masks]] for more information on how this mask is constructed.//
  * **[[http://www.telerik.com/help/winforms/editors-maskededitbox-numeric-masks.html|Numeric]] -** [[http://www.telerik.com/help/winforms/editors-maskededitbox-numeric-masks.html|The numeric mask]] is used when you need to display these ([[https://msdn.microsoft.com/en-us/library/dwhawy9k.aspx|defined on MS site]]):
    * Percent values.
    * Decimal values.
    * Currency (culture-aware).
    * Fixed point values.
  * **[[http://www.telerik.com/help/winforms/editors-maskededitbox-standart-masks.html|Standard]] -** set the **MaskType** property to **Standard** and the **Mask** property to "(###) ###-###". //See// [[http://www.telerik.com/help/winforms/editors-maskededitbox-standart-masks.html|Standard Masks]] //for more information on how this mask is constructed.//
  * **Regex** - You can define [[http://msdn.microsoft.com/en-us/library/2k3te2cs(v=vs.80).aspx|Regex expressions]] as masks. For example mask **[A-z]** will check for at least one symbol in this range (A-z) in MaskEditBox’s Text.
  * **IP** - allow user to input only **3** digits in **0-255** range in **four** groups
  * **Email** - validate user input for the valid mail. If this email is not valid will notify user with validation icon:
  * ‘TextMaskFormat ‘ - you may want to get a RadMaskedEditBox.Value that differs from what the end-user sees in the editor, or, in other words, from what the Text property provides. In such cases the you will find the TextMaskFormat property useful. It allows you to get variations of of the Text property value taking into account whether you want to get the prompt characters, and the literals used in the mask. The type of the TextMaskFormat property is the MaskFormat enum which provides the following values:
    * ‘IncludePromptAndLiterals’ (default value) - The Value property returns Return the text input by the user as well as any literal characters defined in the mask and any instances of the prompt character.
    * ‘ExcludePromptAndLiterals’ - The Value property returns only the text input by the user.
    * ‘IncludePrompt’ - The Value property returns the text input by the user as well as any instances of the prompt character.
    * ‘IncludeLiterals’ - The Value property returns the text input by the user as well as any literal characters defined in the mask.

==== * RadPropertyGrid – rpg  ====

http://www.telerik.com/help/winforms/propertygrid-overview.html\\
http://www.telerik.com/community/forums/winforms/property-grid.aspx\\
Video: http://www.telerik.com/videos/winforms/getting-started-with-telerik-radpropertygrid

Search/Filter PropertyGrid rows: http://docs.telerik.com/devtools/winforms/propertygrid/features/filtering.html

Use the Tasks button to access these properties:

* Enable Filtering
  * Enable Grouping
  * Enable Sorting
  * Show Helprich
  * Show SearchBox

Attach a RadPropertyGrid to an object and get a Visual Stuidio style property editor for the object.\\
radPropertyGrid1.SelectedObject = new PropertyGridElement(); %%//%% point to itself showing the PropertyGrid’s own properties\\
using Telerik.WinControls.UI; %%//%% required for ‘PropertyGridElement’

rpgControlProperties.SelectedObject = commandBarButton1; %%//%% Show the properties of a RadCommandBar button

* ‘SelectedObject’ - points to the object whose properties should be displayed
  * ‘HelpVisible’ - show/hide the help section at the bottom which displays the Description attribute of the selected property
  * ‘HelpBarHeight’ – in pixels of the help section at the bottom
  * ‘ToolBarVisible’ shows the toolbar where you would add RadButtonElements for sort by category vs. alphabetical for example
  * ‘’Category’ attribute of the SelectedObject property allows you to create groups in the PropertyGrid (for sort by category vs. alphabetical)
  * ‘PropertySort’ sets default sorting to one of the enumerated values:
    * ‘Alphabetical’ – sorts the properties according to the SortOrder setting (Ascending or Descending)
    * ‘Categorized’ – groups the properties according to their Category attribute
    * ‘CategorizedAlphabetical’ – groups the properties according to their Category attiribute and sorts them Alphabetically, according to the SortOrder setting (Ascending or Descending)
    * ‘None’ – removes sorting and grouping
  * ‘SortOrder’ - Ascending, Descending and None
  * ‘ItemHeight’ - sets the visible items height.
  * ‘ItemSpacing’ - sets the spacing between the items.
  * ‘ItemIndent’ - sets the indent space in the beginning of the items.

The elements of the SelectedObject

Here’s some articles on using the RadPropertyGrid:

* [[http://www.telerik.com/help/winforms/propertygrid-editors-using-custom-editor.html|Using Custom Editors]] (Replace a spin editor with a track bar editor)

=== Force a RadPropertyGrid to update ===

<code csharp>radPropertyGrid.PropertyGridElement.PropertyTableElement.Update(PropertyGridTableElement.UpdateActions.Reset);</code>

=== ToolTips on Value Column ===

Use the RadPropertyGrid.ToolTipTextNeeded event to specify the ToolTipText for the value column and set the ToolTip.AutoPopDelay.
<code csharp>
private void radPropertyGrid1_ToolTipTextNeeded(object sender, Telerik.WinControls.ToolTipTextNeededEventArgs e)
{
 PropertyGridItemElement itemElement = sender as PropertyGridItemElement;
 if (itemElement!=null)
 {
 e.ToolTipText = itemElement.ValueElement.Text; 
 e.ToolTip.AutoPopDelay = 1000;
 }
}
</code>
==== RadRichTextBox – (deprecated) ====

http://www.telerik.com/help/winforms/richtextbox-overview.html\\
http://www.telerik.com/community/forums/winforms/richtextbox.aspx\\
Video: http://www.telerik.com/videos/winforms/getting-started-with-telerik-radrichtextbox

Use the [[#radrichtexteditor---rrte|RadRichTextEditor]] instead.

==== RadRichTextEditor - rrte ====

http://docs.telerik.com/devtools/winforms/richtexteditor/overview

RadRichTextEditor is a control that is able to display and edit rich-text content including formatted text arranged in pages, paragraphs, spans (runs), tables, etc.

{{tdn:image92.png?525x404|A screenshot of a computer Description automatically generated}}

RadRichTextEditor allows you to edit text and apply rich formatting options, like:

* Bold, Italic
  * Underline, Strike Through, Superscript and Subscript
  * Usage of all available system fonts
  * Text color and background
  * Bullet and numbered lists
  * Paragraph alignment and indentation
  * Show/Hide formatting symbols
  * Clear Formatting
  * Inserting pictures/symbols/hyperlinks
  * Table support – including nested tables, merging cells, setting different RowSpan and ColumnSpan, tables with auto width and more.
  * ContextMenu - a standard one is provided out of the box, but it can be easily customized or substituted for a user-defined one.
  * SelectionMiniToolbar - very similar to the one in MS Word, but can also be replaced with another.
  * SpellChecker - extensible spell checking for different languages, using built-in or custom dictionaries.
  * Printing - RadRichTextEditor supports printing out of the box.
  * Multi-level Undo/Redo Support - Telerik RadRichTextEditor provides desktop-like usability and control thanks to its multilevel Undo/Redo feature. It allows past actions to be reviewed and reversed, just like in Microsoft Word.
  * Three types of layout – Paged, Flow (as text in an HTML page viewed in a browser) and FlowNoWrap.
  * Multi-region selection - the built-in multi-region support enables you to perform various operations for more than one selection simultaneously.
  * Rich-text clipboard - allows rich text copy/paste from Word, OpenOffice etc.
  * Import/export - with Telerik RadRichTextEditor control you can load XAML, HTML, RTF, DocX (rich-text) or TXT (plain text) into the control, you can format and edit it and then export it back to any of the above formats or PDF.
  * Headers and Footers - RadRichTextEditor supports headers and footers in its document.
  * Track changes - adding and removing of text, images, hyperlinks, tables, etc. and formatting changes of these elements can be tracked by different users.
  * Bookmarks - provide easy retrieval of previously marked parts of the document.
  * Comments - offer the ability to add text to the document which is not inserted directly in the page.
  * Document protection - allows editing restrictions in the document for a set of users and groups.
  * Mail merge - makes populating a template document with data easy.
  * Custom annotations - enables you to extend the document model in order to serve specific needs.
  * Footnotes and Endnotes - usually used to show the source of a material or add an explanation.
  * Bibliographic references - can be used for referencing a source in the form of text or pointing the source of a citation.
  * Cross-references - references to a Heading, Caption or Bookmark can now change along with their source.
  * Captions for tables and figures - images, tables, etc. can now be easily labeled.
  * Document variables - a mechanism used for storing information in the document.
  * Code blocks - provide the ability to add source code fragments in a document.
  * IME support - RadRichTextEditor supports IME out the box.

=== Properties ===

* .IsReadOnly = True to block editing
  * .SelectionEnabled = True to allow text selection
  * .IsSelectionMiniToolbarEnabled = False blocks this font toolbar popup on selected text
  * https://gyazo.com/5a11a797c43a8fe7f91f432de282efb7
    * This ContextMenu is still available: https://gyazo.com/d2f9184194167f7a833f7cbf507fc757

==== RadSpellChecker – rsc  ====

http://www.telerik.com/help/winforms/spellchecker-overview.html

RadSpellChecker enables developers to add multilingual spell checking capabilities to their Win Forms applications. The component is completely customizable and can be attached to any text-editing RadControl.

{{tdn:image93.png?420x315|A screenshot of a computer Description automatically generated}}

==== * RadSpinEditor – rse  ====

http://www.telerik.com/help/winforms/editors-spineditor-overview.html\\
http://www.telerik.com/community/forums/winforms/editors.aspx

RadSpinEditor is a themable alternative to the standard Windows Numeric Up Down control.

{{tdn:image94.png?110x32|A white rectangle with black arrows Description automatically generated}}

==== * RadTextBox – rtxt  ====

http://www.telerik.com/help/winforms/editors-textbox-overview.html\\
http://www.telerik.com/community/forums/winforms/editors.aspx

[[http://docs.telerik.com/devtools/winforms/editors/textboxcontrol/radtextboxcontrol-vs-radtextbox|**RadTextBoxControl vs RadTextBox**]] - **RadTextBox is a wrapper around the standard .NET TextBox control**, while RadTextBoxControl is built entirely on top of Telerik Presentation Framework.

Textbox that observes Telerik Theme settings

{{tdn:image95.png?278x159|A screenshot of a computer Description automatically generated}}

* <color red>'Multiline' set to True for multiple line textbox. Then resize manually, or Dock.</color>
 * 'Enabled' - False greys out the control and restricts user interaction
 * IsReadOnly – True then the text is readonly
 * <color red>'NullText' property specifies text to be displayed when the control has no Text value. When the control receives the focus, this text is automatically removed. Use this for things like ‘Search/Filter’ in a field where the user will type to search.</color>
 * 'PasswordChar' property specifies the character displayed in the text box. For example, if you want asterisks displayed in the password box, specify * for the PasswordChar property in the Properties window. Then, regardless of what character a user types in the text box, an asterisk is displayed. (Optional) Set the MaxLength property to limit password length.
 * CharacterCasing – forces entered characters to a specific case
 * See: http://msdn.microsoft.com/en-us/library/d3223ht2.aspx
 * See: http://stackoverflow.com/questions/2555984/quick-question-how-to-set-a-text-box-for-inputing-password-in-winforms

==== RadTextBoxControl – rtxtbc  ====

http://www.telerik.com/help/winforms/editors-textboxcontrol-overview.html\\
http://www.telerik.com/community/forums/winforms/editors.aspx

[[http://docs.telerik.com/devtools/winforms/editors/textboxcontrol/radtextboxcontrol-vs-radtextbox|**RadTextBoxControl vs RadTextBox**]] - **RadTextBox is a wrapper around the standard .NET TextBox control**, while RadTextBoxControl is built entirely on top of Telerik Presentation Framework.

RadTextBoxControl provides similar to the standard .NET Framework text box features. In addition it allows easy customizations and enhancements. It is generally used for editing text, although it can be used to display text, when in read-only mode. The control can display multiple lines, wrap text to the size of the control and perform text block formatting and replacement.

The control can display multiple lines, wrap text to the size of the control, add basic formatting, use themes, and //the main differences with RadTextBox - can be transparent and use gradients//.

==== * RadTimePicker – rtp  ====

http://www.telerik.com/help/winforms/editors-timepicker-overview.html

http://tv.telerik.com/watch/winforms/getting-started-with-radtimepicker-for-winforms

http://www.telerik.com/community/forums/winforms/calendar-and-datetimepicker.aspx\\
Video: http://www.telerik.com/videos/winforms/getting-started-with-radtimepicker-for-winforms

RadTimePicker control allows the end user to enter a time value to the editable area of the control, or pick the time from the drop down by selecting both the hours and the minutes. The drop down by default contains RadClock on the left side and two tables on the right side – for picking hours and minutes respectively.

{{tdn:image97.png?249x195|A screenshot of a clock Description automatically generated}}

Choose a time of day (not Date)

* **‘Value’** – used to get or set the control value

> this.rtpStartTimeStd.Value = DateTime.Now;  %%//%% Set Start time to now

* **‘Culture‘** – Control the hour format (Standard [AM/PM], Military, or various International)

> timepicker1.Culture = new CultureInfo("en-gb");  %%//%% set to Military time 
> 
> timepicker1.Culture = new CultureInfo("en-us");  %%//%% set to Standard (AM/PM) time

* ‘Step’ - gets or sets the desired minute’s interval
 * ‘ClockPosition’ – clock location in relation to the set time <Clock> dropbox (options: ClockBeforeTables, ClockAboveTables and HideClock)
 * ‘CloseButtonText’ – change the button text on the set time <Clock> dropbox
 * ‘NullText’ – the text displayed in RadTimePickerElement when the Value is null
 * ‘RowHeight’ – gets or sets the height of the rows in the hour/minutes tables in the drop down
 * ‘ColumnsCount’ – gets or sets the number of the columns in the hour/minutes tables in the drop down
 * ‘HeadersHeight’ – gets or sets the size of the headers (clock, hours and minutes headers) in the drop down
 * ‘ButtonPanelHeight’ – sets or sets the height of the buttons panel at the bottom of the drop down
 * ‘TableWidth’ – gets or sets the width of the hours and minutes tables in the drop down
 * ‘TimeTables’ – allows you to choose between one table or two tables to display both hours and minutes
 * ‘ReadOnly’ – makes the control read only – can’t type in it, or change its value from the UI. Also the drop down cannot be opened

==== RadTrackBar – rtb  ====

http://www.telerik.com/help/winforms/track-and-status-controls-trackbar-overview.html

http://www.telerik.com/community/forums/winforms/track-and-status.aspx

RadTrackBar, sometimes called a slider control, can be used for navigating a large amount of information or for visually adjusting a numeric setting.

{{tdn:image98.png?369x270|A diagram of a program Description automatically generated with medium confidence}}

There’s a bug that causes the bar to truncate if it’s physically shorter than a % of the total.\\
rtbPlaybackSpeed.TrackBarElement.MinSize = new System.Drawing.Size(0, 0); %%//%% Resolve by setting the MinSize of the TrackBarElement

==== # RadPopupEditor – rpe ====

http://docs.telerik.com/devtools/winforms/editors/popupeditor/popupeditor

Drop down a form where you can display/edit various controls/values configurable at design time.

RadPopupEditor allows you to show any predefined or custom controls in its popup. By default the control should be associated with a RadPopupContainer. RadPoupContainer on the other hand allows you to build your layout at design time. The controls added to the container will be shown in the popup window when the popup is opened.

{{tdn:image99.png?233x185|A screenshot of a computer Description automatically generated}}

From the Demo app:

{{tdn:image52.png?720x399|A screenshot of a computer Description automatically generated}}

===== RadControls – Buttons =====

==== * RadButton – rbtn  ====

http://www.telerik.com/help/winforms/buttons-button-overview.html

http://www.telerik.com/community/forums/winforms/buttons.aspx

* 'Text' \Behavior
 * 'DrawText' = False and no button text is displayed
 * 'Name' \Design
 * 'TextWrap' \Appearance (also must set 'AutoSize' = False, 'TextWrap' = False, adjust 'Size' as required)
 * 'DialogResult' - Handles the close event of a form. Set to "Cancel" for simple close. Set to "OK" for close but you can add saving code.
<code csharp>
// Toggle the ‘Image’ on button click.
 // First add the 2 images as Project Resources (under Project Properties)
 // Next create a property flag in the class to show the state

namespace LS.Common.Log.Presentation
   {
     public partial class ucLogViewer : UserControl
     {
       public bool LogPaused { get; set; } %%//%% Play/Pause button state flag property

public ucLogViewer()
 {
 InitializeComponent();
 // Code continues…
</code>
<code csharp>
// Now create a click event handler to swap the image and update the property flag
private void rcbbtnPlayPauseLog_Click(object sender, EventArgs e) {
 if (LogPaused == true) {
 rcbbtnPlayPauseLog.Image = LS.Common.Log.Presentation.Properties.Resources.Play_24x24;
 LogPaused = false;
 }
 else {
 rcbbtnPlayPauseLog.Image = LS.Common.Log.Presentation.Properties.Resources.Pause_24x24;
 LogPaused = true;
 }
 }

// NOTE: You could have used a bool variable (rather than a property) and called some method(s) from the click event.
</code>

Show only an icon w/o button frame, like this 3rd button:\\
{{tdn:image100.png?256x48|A close-up of a computer screen Description automatically generated}}
<code csharp>
radButton3.ButtonElement.ShowBorder = false;
radButton3.BackColor = System.Drawing.Color.Transparent;
radButton3.DisplayStyle = Telerik.WinControls.DisplayStyle.Image;
</code>

Toggle between 2 image (icon) values
<code csharp>
if (rbtnPlayPauseToggle.Text == "play") // use the .Text property as a flag
{
 rbtnPlayPauseToggle.Image = Properties.Resources.MediaPause_40; // .MediaPause_40 is ‘MediaPause_40.png’ imported to the app repository
 rbtnPlayPauseToggle.Text = "pause";
}
else
{
 rbtnPlayPauseToggle.Image = Properties.Resources.MediaPlay_40; // toggle to ‘MediaPlay_40.png’ image
 rbtnPlayPauseToggle.Text = "play";
}
 rbtnPlayPauseToggle.Refresh();
</code>
==== * RadCheckBox – rchk ====

http://www.telerik.com/help/winforms/buttons-checkbox-overview.html

http://www.telerik.com/community/forums/winforms/buttons.aspx\\
http://docs.telerik.com/devtools/winforms/buttons/checkbox/handling-radcheckbox-states\\
http://docs.telerik.com/devtools/winforms/buttons/checkbox/databinding-radcheckbox

RadCheckBox is designed to provide an interface element that can represent an On or Off state using a check mark.

RadCheckBox supports three states. This is controlled by the IsThreeState property. If it is set to false, the ToggleState property, which determines the current state of the check mark, can be On or Off . Otherwise, it can be set to On , Off , or Indeterminate .

CheckBox that observes Telerik Theme settings

* 'text' text label
  * 'CheckAlignment' checkbox location in relation to the label
  * 'Checked' True/False (get & set) (somehow tied to 'ToggleState' as well)
  * ‘RightToLeft’ = Yes puts the text label to the left of the checkbox.

==== * RadDropDownButton – rddbtn  ====

http://www.telerik.com/help/winforms/buttons-dropdownbutton-overview.html

Each of the items of RadDropDownButton can be set to perform an action when it is clicked. In addition, the items can contain other items, allowing you to create any hierarchy that fits your needs of sub-items.

{{tdn:image101.png?190x114|A green and black text on a green box Description automatically generated}}

==== RadSplitButton – rsbtn  ====

http://www.telerik.com/help/winforms/buttons-splitbutton-overview.html\\
http://www.telerik.com/community/forums/winforms/buttons.aspx\\
http://docs.telerik.com/devtools/winforms/buttons/splitbutton/working-with-radsplitbutton-items

RadSplitButton provides a menu-like interface contained within a button that can be placed anywhere on a form.

{{tdn:image102.png?157x119|A screenshot of a computer Description automatically generated}}

//RadSplitButton looks the same, and works nearly the same, as RadDropDownButton, but RadSplitButton has a DefaultItem property to specify the item whose Click event should be triggered when the button is clicked. The functionality of RadSplitButton is "split" between the button itself and the dropdown menu//.

* ‘Items’ – the possible button contents: RadMenuItem, RadMenuSeparatorItem, RadMenucomboItem, RadMenuButtonItem, RadMenuHeaderItem
  * ‘Image’ - property of the RadMenuItem enables you to include an icon next to the Item
  * ‘DefaultItem’ sets the default by Item name Ex: radSplitButton1.DefaultItem = mainItem;

==== * RadRadioButton – rrdo  ====

http://www.telerik.com/help/winforms/buttons-radiobutton-overview.html\\
http://www.telerik.com/community/forums/winforms/buttons.aspx\\

{{tdn:image103.png?128x81|A group of flags with text Description automatically generated}}

Put multiple in a RadGroupBox

**Properties**

‘IsChecked’ = True, button is filled in

==== RadRepeatButton – rrbtn  ====

http://www.telerik.com/help/winforms/buttons-repeatbutton-overview.html\\
http://www.telerik.com/community/forums/winforms/buttons.aspx\\
http://docs.telerik.com/devtools/winforms/buttons/repeatbutton/working-with-radrepeatbutton

RadRepeatButton provides press-and-hold functionality. While the mouse button is pressed down, the ButtonClick event fires at a pre-determined interval. RadRepeatButton is an ideal UI element for allowing users to control an increasing or decreasing value, such as volume or brightness.

{{tdn:image104.gif?322x157|A screenshot of a computer Description automatically generated}}

==== RadToggleButton – rtbtn  ====

http://www.telerik.com/help/winforms/buttons-togglebutton-overview.html

http:%%//%%docs.telerik.com/devtools/winforms/buttons/togglebutton/handling-radtogglebutton-states

http://www.telerik.com/community/forums/winforms/buttons.aspx

RadToggleButton is designed to manage states on your form. It shares many features with the RadCheckBox, but provides a different visual effect than the standard check mark.

{{tdn:image105.png?180x117|A screenshot of a computer error Description automatically generated}}

* 'ToggleState' On/Off
  * 'Text' \Behavior

To wrap the text label, 'AutoSize' = False, 'TextWrap' = True, adjust 'Size' as required.

* 'Name' \Design

==== RadToggleSwitch – rts ====

http://docs.telerik.com/devtools/winforms/buttons/toggleswitch/toggleswitch

RadToggleSwitch is a control designed to represent two states: e.g. true/false, On/Off, etc.

{{tdn:image106.gif?130x92|A screenshot of a computer error Description automatically generated}}

===== RadControls – Menus & Toolbars =====

http://www.telerik.com/help/winforms/menus-menu-overview.html

==== RadApplicationMenu – ram ====

http://www.telerik.com/community/forums/winforms/menus.aspx

RadApplicationMenu is the Telerik counterpart of the application menu that displays controls used to perform actions on entire documents and forms, such as Save and Print. It also provides a list of recent documents, access to form options, and the ability to exit the form or application.

{{tdn:image107.png?271x192|A screenshot of a computer Description automatically generated}} {{tdn:image108.png?290x203|A screenshot of a computer Description automatically generated}}

See [[#radribbonbar-rrb|RadRibbonBar]] for more property info.

* ‘Text’ – shows up on the button itself
 * ‘ButtonItems’ collection defines buttons on the bottom of the dropdown. For example the RadRibbonBar comes with an <Options> button here by default.

==== RadContextMenu – rcm ====

http://www.telerik.com/community/forums/winforms/menus.aspx

To implement context menus use RadContextMenu in your application. RadContextMenu is a non-visual component that sits in the component tray located below the form design surface. RadContextMenu, like RadMenu, can be themed and has an items collection that accepts RadMenuItem, RadMenuComboBoxItem, RadMenuSeparatorItem and RadMenuContextItem.

{{tdn:image109.png?272x247|A screenshot of a calendar Description automatically generated}}

**Create a right click (context) menu.**

Add to a form then link to a control via the control’s ‘RadContextMenu’ property.

Create a [[#_Telerik_Systray_App|Systray app]] menu by binding this to a Windows NotifyIcon (niMain).

RadContextMenuItem – rcmi

> These are the items that appear in the right click menu.

* ‘Visibiility’ – hide a menu item
  * ‘Enabled’ – set the text to grey and disable user interaction

Use an item as an information display only. You don’t want the highlight on mousehover or the click event to fire, but you don’t want the greyed out text of a disabled control.
<code csharp>
rmiLastSync.Enabled = false; // disable highlight on mousehover and click event
rmiLastSync.UseDefaultDisabledPaint = false; // control is disabled but don't show as grey text
</code>
==== RadContextMenuManager – rcmm ====

[[http://www.telerik.com/help/winforms/menus-context-menu-assign-radcontextmenu-to-telerik-and-non-telerik-controls.html|__http:%%//%%www.telerik.com/help/winforms/menus-context-menu-assign-radcontextmenu-to-telerik-and-non-telerik-controls.html__]]

You can assign RadContextMenu to Telerik and non-Telerik controls. This can be achieved by making use of RadContextMenuManager component. This component will add a RadContextMenu property to all controls on the form. Then, you should simply set a RadContextMenu instance to the RadContextMenu property.

==== * RadCommandBar – rcb ====

[[http://www.telerik.com/help/winforms/commandbar-overview.html]]

http:%%//%%docs.telerik.com/devtools/winforms/commandbar/design-time

[[http://www.telerik.com/community/forums/winforms/commandbar.aspx]]

Video: [[http://www.telerik.com/videos/winforms/working-with-radcommandbar-for-winforms|Working with RadCommandBar]]\\  [[http://docs.telerik.com/devtools/winforms/commandbar/save-and-load-layout|Save and Load Layout to XML file]]

RadCommandBar is a fully themeable tool strip that provides unprecedented flexibility. More than just a collection of buttons, RadCommandBar hosts any RadControl, including combo boxes, text boxes, split buttons, drop-down buttons, toggle buttons and more. CommandBar can be moved, rearranged and resized at run time for easy end-user customization.

{{tdn:image110.png?566x65|A screenshot of a computer Description automatically generated}}

Basically a Toolbar. Can add buttons, dropdowns, etc.

[[http://docs.telerik.com/devtools/winforms/commandbar/structure|The structure]] works like this:

* RadCommandBar
    * CommandBarRowElement - rcbre (1 or more rows)
      * CommandBarStripElement –rcbse (1 or more strips within a row)
        * ‘DisplayName’ is visible to users at runtime in the Overflow button dialog
        * ‘StretchHorizontally’ to make a Strip fill the available width on the Row.
        * RadCommandBarGripButton
        * Items (various)
          * CommandBarButton - rcbbtn
          * CommandBarDropDownButton - rcbddbtn
          * CommandBarDropDownList - rcbddl
          * CommandBarHostItem – can host other controls like date selector or checkbox
          * CommandBarSeparator
          * CommandBarLabel - rcblbl
          * CommandBarTextBox - rcbtxt
          * CommandBarToggleButton
          * CommandBarSplitButton
        * RadCommandBarOverflowButton

**//Select a CommandBarRowElement then click the Task button to ‘Edit Strips’. You can reorder the Strips within a row from this dialog. Choose a Strip to edit, then use the ‘Items’ property to add/edit items. Or can select a Strip directly from the Row and click the Tasks buton to edit only the Items for that Strip. Set the Strip ‘DisplayName’ so it’s visible from the Overflow button dialog at runtime. Set ‘StretchHorizontally’ to make a Strip fill the available width on the Row.//**

RadCommandBar allows the user to show/hide, reorder items and rearrange strip elements on different rows at runtime. ### We need to build a common lib class that saves/restores those customizations. The Save/Load layout functionality gives your applications the opportunity to preserve user settings concerning position, visibility and orientation.

[[http://www.telerik.com/help/winforms/commandbar-save-and-load-layout.html]]

Roll up empty space left behind from visible/collapsed ToolStrips\\  [[https://www.telerik.com/forums/problem-in-stripelement-visible-collapsed]]

[[https://www.telerik.com/forums/order-of-strips-to-display]]

[[#_Add_Resources_to|Add Resources to a Solution (Icons, Graphics, Files, etc.)]]

[[\\192.168.93.1\KB_MiM\Telerik\20160204)%20Add%20Icon%20Graphics%20to%20a%20VS%20Solution%20(Project%20Resource%20File).mp4|Here’s my updated video on how to add Icon Graphics to a Solution]]\\  {{tdn:image111.png?395x267|A screenshot of a computer Description automatically generated}}

The default icons are all small (16x16) but if you use a bigger icon (32x32 or 64x64) the RadCommandBar will expand as required. You can also force it in code. For example show 32x32 image in CommandBarButton like this:\\  1. Use image with size 32x32.\\  2. Set the MinSize if you want to have space between image and borders of the button.

<code csharp>
this.commandBarButton3.Image = global::CommandBarButtonDefaultSize.Properties.Resources.Button_Next_icon32x32;\\
this.commandBarButton3.MinSize = new System.Drawing.Size(40, 40);
</code>

You can add the items by clicking the down arrow on the RCB, but it’s easier to add and organize if you open the RCB ‘Collection Editor’. You can select multiple items to set common properties.

**Set the width to match the container**

???

**Show an icon and text on a control (button, combo, etc) including set button size for text wrap**

//NOTE: You can <Ctrl> click all the buttons to set these properties at once.//

* **'DrawText' = True**
 * **'TextImageRelation' = ImageAboveText** or ImageBeforeText (for text beside the icon)
 * **‘TextWrap’ – True** if long text. Also set:
 * **‘AutoSize’** = False
 * **‘Size’ = 55,65** for 32x32 image. Adjust as required.
 * **‘DisplayName’** – //Be sure to set this one equal to the text property or it won’t have a real name in the toolbar configuration control (from RadCommandBarOverflowButton).//
 * ‘Image’ – clear to remove the icon, or set to a desired icon image
 * ‘visible’ = false to hide the commandbar collapsing the space it occupies
 * CommandBarRowElement (Rows Collection) – a horiz or vert row where a StripElement (toolbar) is shown
 * CommandBarStripElement (Strips Collection) – basically a single, draggable toolbar on the CommandBar (which can hold multiple toolbars)
 * DisplayName – The name shown to the user for a StripElement or subcontrol the user sees when customizing the toolbar at runtime.
 * RadCommandBarGripButton
 * Orientation - the orientation in RadCommandBar can be set via the Orientation property:<code csharp>
radCommandBar1.Rows[0].Strips[0].Orientation = Orientation.Vertical;
</code>

* ‘VisibleInStrip’ Item property to hide a control from the Strip.
 * [[http://docs.telerik.com/devtools/winforms/commandbar/item-types|Item Types]] (arranged in ItemsLayout)
 * **CommandBarButton** – rcbbtn
 * ‘DrawText’ = True to display the text of the button. Use the ‘TextImageRelation’ property to control the layout of image and text: Overlay, **ImageAboveText**, TextAboveImage, **ImageBeforeText**, TextBeforeImage.
 * **CommandBarDropDownButton** – rcbddbtn (Drop down items are rcbddbtni )
 * ‘Text’ – the text on the button
 * ‘Items’ – rcbddbtni (the buttons that appear in the dropdown)[[https://www.telerik.com/forums/remove-left-side-extra-space-from-dropdownbuttons]]\\ Here’s how to have the main button display text, then have that text change based on the selected button (rcbddbtni - ‘Items’) from the dropdown.
 * Set the DropDownButton ‘Text‘ to the default value you want to display.
 * Add all the DropDownButton ‘Items’ and set their ‘Text’ properties to the text you want to display if they are selected. Make note of each time control name.
 * You have to add a Click Event to each DropDownButton Item (not the parent DropDownButton itself). Use the VS Property Grid dropdown to find each Item (that’s why we remembered them before). Then add a Click event. Here’s a couple of examples of click events that change the Text property on the CommandBarDropDownButton parent control.
 * <code csharp>
// 'Show entire event' Entire vs. Entry Only drop down button
private void rcbddbtniEntireEvent_Click(object sender, EventArgs e)
{
 rcbddbtnShowEntryVEvent.Text = rcbddbtniEntireEvent.Text;
}
 private void rcbddbtniEntryOnly_Click(object sender, EventArgs e) {
 rcbddbtnShowEntryVEvent.Text = rcbddbtniEntryOnly.Text;
}
</code>

* **CommandBarDropDownList** – rcbddl (Drop down items are rcbddli )
  * **CommandBarHostItem** – rcbhi (Item that can host any RadElement. Use the HostedElement property to get/set the element that you are hosting. [[http://www.telerik.com/community/forums/winforms/commandbar/add-a-datetimepicker-to-a-commandbar.aspx|For example a RadDateTimePicker]] and here’s how to [[http://www.telerik.com/community/forums/winforms/commandbar/read-value-from-datetimepicker-in-commandbar.aspx|‘Read Value from DateTimePicker in CommandBar’]])

Note: You must use a **CommandBarLabel** with a **CommandBarHostItem**. The built in ‘Text’ value won’t display.

<code csharp>
// RadDateTimePicker and RadTimePicker 'CommandBarHostItem's on a RadCommandBar
 // Stick this right after “InitializeComponent();” on the form or UC.
 SetupHostedItems(); // setup the RadDateTimePicker and RadTimePicker 'CommandBarHostItem's on the RadCommandBar
 
//Follow up (what’s a better way to say these follow after the function that include the Inititalize()?) with these:
 
private void SetupHostedItems() // setup the 'CommandBarHostItem's on the RadCommandBar
{
 rcbhiStartDate.HostedItem = GenerateDateTimePicker("rdtpStartDate"); // Start Date
 rcbhiStartTime.HostedItem = GenerateTimePicker("rtpStartTime"); // Start Time
 rcbhiEndDate.HostedItem = GenerateDateTimePicker("rdtpEndDate"); // End Date 
 rcbhiEndTime.HostedItem = GenerateTimePicker("rtpEndTime"); // End Time
}

private RadDateTimePickerElement GenerateDateTimePicker(string Name) // 'CommandBarHostItem' on the RadCommandBar
{
  RadDateTimePickerElement rdtp = new RadDateTimePickerElement();
  rdtp.AutoSizeMode = Telerik.WinControls.RadAutoSizeMode.FitToAvailableSize;
  rdtp.Name = Name;
  rdtp.MinSize = new System.Drawing.Size(100, 20);
  rdtp.Format = DateTimePickerFormat.Short;
  return rdtp;
}

private RadTimePickerElement GenerateTimePicker(string Name) // 'CommandBarHostItem' on the RadCommandBar
{
 RadTimePickerElement rtp = new RadTimePickerElement();
 rtp.AutoSizeMode = Telerik.WinControls.RadAutoSizeMode.FitToAvailableSize;
 rtp.Name = Name;
 rtp.MinSize = new System.Drawing.Size(100, 20);
 return rtp;
}
</code>

**Checkbox as CommandBarHostItem** [[https://www.telerik.com/forums/checkbox-in-radcommandbar]]\\  Create a RadCommandBar HostedItem in the IDE, then create a RadCheckBox in code and link it to the HostedItem.

<code csharp>
// Create a RadCheckBox ‘rchkOnlyFavoriteColumns’ and link it to the CommandBar HostedItem ‘rcbhiOnlyFavoriteColumns’
RadCheckBoxElement rchkOnlyFavoriteColumns = new RadCheckBoxElement();
rchkOnlyFavoriteColumns.MinSize = new System.Drawing.Size(19, 0); // Set the size here to match the HostedItem from the IDE
rcbhiOnlyFavoriteColumns.HostedItem = rchkOnlyFavoriteColumns;
</code>

* **CommandBarSeparator**
  * **CommandBarLabel** - rcblbl
  * **CommandBarTextBox**
  * **CommandBarToggleButton** – rcbrtb[[https://www.telerik.com/forums/commandbartogglebutton-appearance-when-disabled]]
  * **CommandBarSplitButton** - rcbsb

**RadCommandBarOverflowButton** - The overflow button automatically displays items that don't have the real estate to display by default. The end user can also customize the toolstrip by adding and removing buttons.

* [[http://www.telerik.com/help/winforms/commandbar-howto-customize-the-overflow-button.html|Customize the contents of the OverflowButton]]
 * Hide the Overflow button\\ <code csharp>
radCommandBarStripElement1.OverflowButton.Visibility = Telerik.WinControls.ElementVisibility.Collapsed; // Or should you use the ‘Hidden’ property?
</code>
 * Show the Overflow button only when necessary as you resize the formUse the ItemOverflowed and ItemOutOfOverflow events of CommandBarStripElement to show the overflow button only when needed and hide it if not needed. See: [[http://www.telerik.com/forums/hide-remove-add-or-remove-buttons]]<code csharp>
protected override void OnLoad(EventArgs e)
{
 base.OnLoad(e);
 AddCommandBar();
 radCommandBar1.Rows[0].Strips[0].ItemOverflowed += Form1_ItemOverflowed;
 radCommandBar1.Rows[0].Strips[0].ItemOutOfOverflow += Form1_ItemOutOfOverflow;
}

void Form1_ItemOutOfOverflow(object sender, EventArgs e)
{
  if (!radCommandBar1.Rows[0].Strips[0].HasOverflowedItems)
  {
    radCommandBar1.Rows[0].Strips[0].OverflowButton.Visibility = ElementVisibility.Collapsed;
  }
}

void Form1_ItemOverflowed(object sender, EventArgs e)
{
 radCommandBar1.Rows[0].Strips[0].OverflowButton.Visibility = ElementVisibility.Visible;
}
</code>
 * Programmatically hide a button on the CommandBar<code csharp>
// Hide the Documents button on the CommandBar
rcbbtnDocuments.VisibleInStrip = false; // removes it from toolbar
rcbbtnDocuments.VisibleInOverflowMenu = false; // removes it from overflow too (user can't see at all)
// We don’t know how to remove it from the Customize dialog
</code>

If you Dock a panel (or TableLayoutPanel) control to the form and it appears behind the RadCommandBar, collapse the panel in the Document Outline, then drag it above the RadCommandBar like this:\\  {{tdn:image112.png?232x124|C:\Users\rgray\AppData\Local\Temp\SNAGHTML4d8bb2c2.PNG}}

==== * RadMenu – rm ====

[[http://www.telerik.com/help/winforms/menus-menu-overview.html]]\\  [[http://www.telerik.com/community/forums/winforms/menus.aspx|__http:%%//%%www.telerik.com/community/forums/winforms/menus.aspx__]]

RadMenu enables you to integrate attractive and flexible menus on Forms within your Windows applications.

{{tdn:image113.png?300x115|A screenshot of a computer Description automatically generated}} {{tdn:image114.png?91x116|A screenshot of a computer Description automatically generated}}

{{tdn:image115.png?306x238|A screenshot of a program Description automatically generated}} {{tdn:image116.png?387x225|A screenshot of a computer Description automatically generated}}

{{tdn:image117.png?509x51}}{{tdn:image118.png?163x211|A screenshot of a computer Description automatically generated}}

Other controls, like the top of a RadPanel, can appear behind a RadMenu. I’m not sure how to force them both to the same layer, but you can use the Margin – Top to push the hidden control down. Look for a better solution. **The best thing to do is to add the panel after the RadMenu. //Also look to my instructions on RadCommandBar to deal with controls behind this one. It’s about setting the order in the IDE Document Outline.//**

=== RadMenuItem – rmi ===

> [[http://www.telerik.com/help/winforms/menus-menu-working-with-radmenu-items-radmenuitem.html]]

RadMenuButton – rmb

Menu child items are under the RadMenu.Items (Collection). Then select a child and look to its RadMenu.Items (Collection) for the grandchildren items.

* ‘Visibility’ – hide a menu item
  * ‘Enabled’ – set the text to grey and disable user interaction

If you Dock a panel (or TableLayoutPanel) control to the form and it appears behind the RadMenu, collapse the panel in the Document Outline, then drag it above the RadMenu like this:\\  {{tdn:image26.png?247x147|C:\Users\rgray\AppData\Local\Temp\SNAGHTML221ed26e.PNG}}

=== Standard Legality Software Help Menu Setup ===

- Add a radMenu control to rfrmMain and name it ‘radMenu’
 - Create these RadMenuItems **(Add to ‘ActiveItems’ under top level menu items, and ‘Items’ for sub level menu items)**<code csharp>
private Telerik.WinControls.UI.RadMenuItem rmiHelp;
private Telerik.WinControls.UI.RadMenuItem rmiHelpOnline;
private Telerik.WinControls.UI.RadMenuItem rmiLegalitySoftwareWebsite;
private Telerik.WinControls.UI.RadMenuItem rmiLicenseRegistration;
private Telerik.WinControls.UI.RadMenuItem rmiAbout;
</code>**Note you might also want to include these items:**<code csharp>
private Telerik.WinControls.UI.RadMenuItem rmiFile;
private Telerik.WinControls.UI.RadMenuItem rmiNew;
private Telerik.WinControls.UI.RadMenuItem rmiOpenSettings;
private Telerik.WinControls.UI.RadMenuItem rmiSaveSettings;
private Telerik.WinControls.UI.RadMenuItem rmiSaveSettingsAs;
// Add a separator then a Recent Items here – See File Renamer example code example
private Telerik.WinControls.UI.RadMenuItem rmiExit;
</code>
 - Click “TELERIK | RadControls for WinForms | Add RadAboutBox”. Name the form “rfrmRadAboutBox” and click <Add>. 
 - Add this to the top of rfrmMain.cs<code csharp>
using System.Diagnostics; // required by ‘Process’ to launch external apps (like the browser)
</code>
 - Use this code to rfrmMain.cs to handle the Help Menu clicks<code csharp>
// Help Menu =========================================================================
private void rmiHelpOnline_Click(object sender, EventArgs e)
{
 //TODO: FutureFeature - Implement online help system (wiki)
 Process.Start("http://www.legalitysoftware.com"); // launch the Legality Software site
}

private void rmiLegalitySoftwareWebsite_Click(object sender, EventArgs e)
{
  Process.Start("http:%%//%%www.legalitysoftware.com"); // launch the Legality Software site
}

private void rmiLicenseRegistration_Click(object sender, EventArgs e)
{
  //TODO: FutureFeature - Implement licensing
}

private void rmiCheckForUpdates_Click(object sender, EventArgs e)
{
  //TODO: Larry - Wire up the Update feature
}

private void rmiAbout_Click(object sender, EventArgs e)
{
 using (var rfrmAboutBox = new rfrmRadAboutBox()) // create an instance of the form 
 { 
 rfrmAboutBox.ShowDialog(this); // then show/opens it
 }
}
</code>

==== * RadRibbonBar – rrb ====

[[http://www.telerik.com/help/winforms/ribbonbar-overview.html]]\\  [[http://www.telerik.com/community/forums/winforms/ribbonbar.aspx]]\\  Video: [[http://tv.telerik.com/winforms/radribbonbar/radribbonbar-overview|Overview Video]]

With the RadRibbonBar control you can build user interfaces similar to those used in Microsoft Office.

{{tdn:image119.png?383x309|A screenshot of a computer Description automatically generated}}

**//Consider adding a [[#_RadRibbonForm|RadRibbonForm]] to the Solution rather than adding a RadRibbonBar to a regular RadForm.//**

* The StartButtonImage property specifies an image to use for the <Start> button in the upper left corner of the control.
 * **‘CommandTabs’ collection defines the ‘RibbonTab’ tabs across the top**
 * ‘contextualTabGroup’ collection defines areas across the top of the form. I assume to control tab visibility by context.
 * ‘QuickAccessToolbarItems’ collection defines QAT items
 * ‘StartMenuItems’ collection defines the items under the round <Start> button.
 * ‘StartMenuRightColumnItems’ collection defines the items in the right column under the round <Start> button.

**RadRibbonTab – rrbt**

* ‘Items’ collection defines ‘RadRibbonBarGroup’ items - button container groups on the current RadRibbonTab

RadRibbonBarGroup – rrbg

* ‘Items’ collection defines ‘RadMenuItems’ (controls - buttons, etc) or ‘RadRibbonBarButtonGroup’ containers which include a border and allow vertical orientation.
 * Set Buttons for AutoSize = False, TextWrap = True and set Size/Width = narrower so the text will wrap
 * <color red>I’m not sure how to center buttons in a group when the group name is wider than the list of buttons.</color>

RadRibbonBarButtonGroup – rrbbg

* ‘Orientation’
    * ‘Horizontal’ default. Controls side by side.
    * ‘Vertical’ Allows you to stack controls vertically
  * ‘Items’ collection defines ‘RadMenuItems’ (controls - buttons, etc)

**RadButtonElement - rbe - Position text to BottomCenter, enable TextWrap and config an icon**

* Select one or more buttons and set ‘TextAlignment’ = ‘BottomCenter’
 * By default the text sets the button width, but you probably should set size manually. These are good defaults:
 * AutoSize = False
 * TextWrap = True
 * Size/Width = small enough to wrap the text to 2 lines (assuming you also want a small icon).
 * Size/Height = 66 is a good default. 68 starts to push down the ButtonGroup label but is an acceptable max.
 * TextImageRelation – ImageAboveText
 * TextAlignment = BottomCenter.
 * <color red>Dealing with buttons with both 1 and 2 lines of text. Maybe better than above, use bottom padding to push single line text up from the bottom. Turn on TextWrap. Set button size to X,66, where x is the width that forces any required text wrap. Set Padding.Top to 2-8 to push the icon down and Padding.Bottom to 0 for buttons with 2 lines of text and 15 for buttons with 1 line of text.</color>
 * ‘Image’ = ??? to set the icon graphic image. Choose “Local resource” | <Import> | browse for graphic and finish. RibbonBar icons should be 32x32 pixels.
 * ‘ImageAlignment’ = TopCenter
 * Padding/Top = 8 (or so) to push the graphic down to the center of the button (assuming the above sizes)

**Hide elements of the Ribbon Bar**

Add the following code right under ‘InitializeComponent();’ in frmMain() (or whatever the form is called).
<code csharp>
// Stick this right after “InitializeComponent();” on the form
// Hide the AppButton (Office Start button or 'File' tab) on the RadRibbonBar
radRibbonBar1.RibbonBarElement.ApplicationButtonElement.Visibility = Telerik.WinControls.ElementVisibility.Hidden;

// Hide the QAT (Quick Access Toolbar) on the RadRibbonBar
radRibbonBar1.RibbonBarElement.QuickAccessToolBar.Visibility = Telerik.WinControls.ElementVisibility.Hidden;

//Hide Title Bar - collapse all 3 elements to hide this bar
richTextEditorRibbonBar.RibbonBarElement.QuickAccessToolBar.Visibility = ElementVisibility.Collapsed;
richTextEditorRibbonBar.RibbonBarElement.ApplicationButtonElement.Visibility = ElementVisibility.Collapsed;
richTextEditorRibbonBar.RibbonBarElement.RibbonCaption.Visibility = ElementVisibility.Collapsed;

// Hide any RibbonBar tab with 'Name' = "Hidden" or where 'Text' contains "Hidden" (just the tab, not content)
foreach (Telerik.WinControls.UI.RibbonTab item in radRibbonBar1.CommandTabs) {
  if (item.Text.ToLower().Contains("hidden") == true || item.Name.ToLower().Contains("hidden") == true)
    item.Visibility = Telerik.WinControls.ElementVisibility.Hidden; // sometimes ‘Collapsed’
}

// Shift Tab Groups to the left when the AppButton (Office Start button or 'File' tab) is collapsed
radRibbonBar1.RibbonBarElement.ApplicationButtonElement.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
Padding p = radRibbonBar1.RibbonBarElement.TabStripElement.ItemContainer.Padding;
radRibbonBar1.RibbonBarElement.TabStripElement.ItemContainer.Padding = new Padding(0, p.Top, p.Right, p.Bottom);

// Hide the ‘ribbonTab1’ tab on the RadRibbonBar  
ribbonTab1.Visibility = Telerik.WinControls.ElementVisibility.Hidden; // sometimes ‘Collapsed’

// Hide the Caret button in the upper right that collapses the RibbonBar
this.radRibbonBar1.RibbonBarElement.ExpandButton.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;

// Select the 1st tab [0] on the RadRibbonBar by default
((Telerik.WinControls.UI.RibbonTab)radRibbonBar1.CommandTabs[0]).IsSelected = true;
</code>

Use the ‘Document Outline’ view (<Ctrl>+W, U) to [[#_RadRibbonForm|manage a RadRibbonForm]].

**Managing & Reordering RibbonBar Groups**

* Select the RadRibbonBar, and click the <...> on the CommandTabs Property to open RadRibbonBarCommandTab Collection Editor.
 * Select a RadRibbonBarTab on the left, then click the <...> on the Items property to open the RadItem Collection Editor. <Add> and reorder Groups.
 * Select a RadRibbonBarGroup on the left, then click the <...> on the Items property to open the RadItem Collection Editor. <Add> and reorder buttons, etc.

NOTE: Reordering CommandTabs in the wizard doesn’t seem to work. You can use this code instead:
<code csharp> //The RibbonGroups 'rrbctArchives' and 'rrbctNotes' should be in the 1st and 2nd positions from the left. Telerik support ticket: 1453535 
this.richTextEditorRibbonBar.CommandTabs.Remove(this.rrbctArchives);
this.richTextEditorRibbonBar.CommandTabs.Insert(0, this.rrbctArchives);
richTextEditorRibbonBar.CommandTabs.Remove(this.rrbctNotes);
richTextEditorRibbonBar.CommandTabs.Insert(1, this.rrbctNotes);
</code>

**Set default selected CommandTab**

%%//%%Set Default Startup Tab

**<color orange>FIX</color>**

=== Add RadDateTimePicker to RadRibbonBar ===

This control is not available in the RadRibbonBar Items collection, but you can add it in code.

We wanted 2 date controls followed by a dropdown list of predefined date ranges. Add the dropdown list in the designer, then insert the 2 date controls above it (top down) in code.

{{tdn:image120.png?171x134|A screenshot of a computer Description automatically generated}} {{tdn:image121.png?96x110|A screenshot of a computer Description automatically generated}}
<code csharp>
public frmMain()
{
 InitializeComponent();
 SetupRibbonFilters();// add non-standard controls to RadRibbonBar
}

void SetupRibbonFilters()
{
  AddDateTimeControl("rdtpStartDate");
  AddDateTimeControl("rdtpEndDate");
}

void AddDateTimeControl(string controlName)
{
 RadDateTimePicker dtPicker = new RadDateTimePicker();
 dtPicker.Name = controlName;
 //dtPicker.ThemeName = "Office2007Blue";  // inherits the form theme if not specified
 RadHostItem hostItem = new RadHostItem(dtPicker); // placeholder
 hostItem.MinSize = new Size(135, 25);
 hostItem.MaxSize = new Size(150, 25);
 //rrbbgDateFilter.Items.Add(hostItem);  // add new control to the specified RibbonGroup
 rrbbgDateFilter.Items.Insert(rrbbgDateFilter.Items.Count - 1, hostItem); // insert new control from top down
}
</code>

=== Add CheckedDropDownList to RadRibbonBar ===

This control is not available in the RadRibbonBar Items collection, but you can add it in code.

{{tdn:image122.png?226x124|A screenshot of a computer Description automatically generated}}
<code csharp>
public frmMain()
{
 InitializeComponent();
 SetupRibbonFilters();  // add non-standard controls to RadRibbonBar\
}

void SetupRibbonFilters()
{
 AddOtherPartyDropDown();
}
void AddOtherPartyDropDown()
{
 Dictionary<int, string> other_parties = new Dictionary<int, string>();  // create sample data
 other_parties.Add(0, "Joe Bob");
 other_parties.Add(1, "Jim Bob");
 other_parties.Add(2, "Bob Bob");
 other_parties.Add(3, "Leroy Bob");
 AddCheckedDropDownList("rcddOtherParty", "key", "value", other_parties);\\
}

void AddCheckedDropDownList(string controlName, string dataMember, string valueMember, object dataSource)
{
 RadCheckedDropDownList rcddList = new RadCheckedDropDownList();
 rcddList.Name = controlName;
 rcddList.DataMember = dataMember;
 rcddList.ValueMember = valueMember;
 rcddList.DataSource = dataSource;
 RadHostItem hostItem = new RadHostItem(rcddList);  // placeholder
 hostItem.MinSize = new Size(150, 25);
 hostItem.MaxSize = new Size(150, 25);
 rbgOtherParty.Items.Add(hostItem);  // add new control to the specified RibbonGroup
}
</code>
==== RadPanorama ====

http://docs.telerik.com/devtools/winforms/panorama/overview

RadPanorama is a control that displays elements of type RadTileElement in a mosaic manner. This control is inspired by the Metro Start Menu screen of Windows 8.

{{tdn:image123.gif?342x280|A screenshot of a computer Description automatically generated}}

==== RadShortcut (Hotkeys) ====

http://docs.telerik.com/devtools/winforms/shortcuts/shortcuts-overview

Almost each application uses the so-called “Shortcuts” – a keyboard combination that triggers a specific action. For a valid shortcut is considered any keyboard combination where a Modifier Key (Ctrl, Alt and Shift or a combination of these) is down and other key(s) is pressed. This semantic is available out-of-the-box in our framework and allows you to seamlessly plug any valid keys combination as an action accelerator. Supported are also the so-called multiple keys shortcuts where the Keys member of each shortcut may be more than one key – e.g. Ctrl + A, S is recognized by the framework. Shortcuts without modifier keys are also supported, but they should be used with caution, since they may be in conflict with other controls which intercept keyboard input.

===== RadControls Misc =====

==== RadBreadCrumb – rbc ====

==== RadCarousel ====

http://www.telerik.com/help/winforms/carousel-overview.html\\
http:%%//%%www.telerik.com/support/code-library/winforms/carousel\\
Video: http://www.telerik.com/videos/winforms/overview-of-radcarousel-for-winforms

==== RadClock – rclock ====

http://www.telerik.com/help/winforms/clock-overview.html

http://www.telerik.com/community/forums/winforms/calendar-and-datetimepicker.aspx\\
VIDEO: http://tv.telerik.com/watch/winforms/getting-started-with-radtimepicker-for-winforms

//NOTE: The control cannot be resized since it uses a bitmap for its background.//

{{tdn:image124.gif?102x97|A clock with a black hand Description automatically generated}}

==== RadDesktopAlert – rda  ====

http://www.telerik.com/help/winforms/desktopalert-overview.html

http://www.telerik.com/community/forums/winforms/desktop-alert.aspx\\
http:%%//%%www.telerik.com/help/winforms/desktopalert-getting-started.html\\
http://tv.telerik.com/watch/winforms/getting-started-with-raddesktopalert - Video- how to get started with RadDesktopAlert.\\
http://www.telerik.com/help/winforms/allmembers_t_telerik_wincontrols_ui_desktopalertmanager.html\\
VIDEO: http://www.telerik.com/videos/winforms/getting-started-with-raddesktopalert

RadDesktopAlert component displays a small pop-up window on the screen to notify the user that a specific event has occurred in the application.

{{tdn:image125.png?294x96|A white and green background with black text Description automatically generated}}

My sample project: [[file:///\\192.168.93.1\KB_MiM\Telerik\LS.TelerikSystrayApp|\\192.168.93.1\KB_MiM\Telerik\LS.TelerikSystrayApp]]

Popup notification similar to Outlook’s you have a new email Notify (Notification) popup. You can drag it around the screen. There are three buttons in the upper right to close, pin it to the screen and display a list of options.

For multi-monitor systems use the SetActiveScreen() method of the DesktopAlertManager class to set the screen where alerts display at ‘ScreenPosition’.

You can display multiple alert instances on the screen and the DesktopAlertManager will calculate the alerts’ location so that they do not overlap. Alerts are stacked on the screen in the order of their appearance. When an alert is closed, all related visible alerts are automatically relocated to utilize the screen real estate. To show multiple desktop alerts you must create a new instance for every alert. To replace an alert dispose the instance and create another new one.
<code csharp>
int i ; // create multiple instances of the
for (i = 0; i <= 2; i++)
{
 RadDesktopAlert a = new RadDesktopAlert();
 a.CaptionText = i.ToString();
 a.Show();
}
</code>

RadDesktopAllert does not support auto-size mode. You must set the size of the control so your contents will fit.

Marcel tried this sample code in eTMsync but it didn’t work for him so he ended up writing his own resize code.

http://www.telerik.com/forums/desktop-alert-not-resizing-accordingly-to-the-contenttext-set

It offers some “HTML-like” formatting but does not support "&nbsp;". [[http://www.telerik.com/help/winforms/tpf-html-like-text-formatting.html|Here is a list]] of supported tags and expressions.

[[http://www.telerik.com/forums/hyperlink-click-9782f6494b85|Here’s a code example]] to make a clickable hyperlink in the Alert Content.

You can add a button (or other element) to any control, including an Alert. Here’s how to add a button:
<code csharp>
RadButtonElement element = new RadButtonElement();
element.Text = "Button";
element.MaxSize = new Size(20, 20);
this.radDesktopAlert1.Popup.AlertElement.ContentElement.Children.Add(element);
</code>

[[http://www.telerik.com/forums/changing-desktopalert-color|Here’s Color Change examples]] by choosing an alternate themes or using a customized theme from Visual Style Builder.

//You can Preview the Alert in the IDE from the control Smart Tag in the Component Bin.//

* ‘ScreenPosition’ accepts six possible positions from the AlertScreenPosition enumerator: TopLeft, TopCenter, TopRight, BottomLeft, BottomCenter, BottomRight
  * ‘FixedSize’ defaults to 0,0 for a default size. Set this to override the size, or do it in code:\\
this.radDesktopAlert1.FixedSize = new Size(200, 200);
  * ‘CanMove’ default True, enables the Alert to be dragged with the mouse
  * ‘AutoCloseDelay’ how long to stay on screen (defaults to 10 sec)
  * ‘AutoClose’ whether will disappear after the period of time defined by the property. Set = false to leave open.
  * ‘AlertImage’ specifies an icon that will be shown on the left of the alert panel
  * ‘ButtonItems’ collection adds custom buttons to the alert
  * ‘Opacity’ starting opacity when it appears (defaults to 0.8 – 80%). Changes to 100% on mouse over.
  * ‘PopupAnimation’ = true to enable animations
    * ‘PopupAnimationFrames’ number frames in the popup animation. More frames means longer animation.
    * ‘PopupAnimationDirection’ (default Down) direction of the animation. Down slides down from the initial location. Can aldo have Up, Left or Right.
    * ‘PopupAnimationEasing’ different animation easing effects which are used to start and finish the animation.
  * ‘FadeAnimationType‘ (default ‘FadeIn,FadeOut ‘)accepts values from FadeAnimationType enum which also allows for combinations of its values.
  * You can also use the FadeAnimationFrames property to define the amount of frames used to animate the opacity of the alert’s popup. By increasing the amount of frames you will increase the duration of the fade animation.
  * Caption Buttons
    * ‘CloseButton’ closes the alert. Use ShowCloseButton to show/hide the button.
    * ‘PinButton’ pin the alert on the screen and prevent it from being closed automatically. ShowPinButton to show/hide the button.
    * ‘OptionsButton’ displays a drop-down menu with user-defined content from the OptionItems collection. Use ShowOptionsButton to show/hide the button.

==== RadHScrollBar – rhsb ====

See: [[#radtoggleswitch-rts|RadVScrollBar]]

==== +-* RadLabel – rlbl ====

http://www.telerik.com/help/winforms/panels-and-labels-label-overview.html

http://www.telerik.com/community/forums/winforms/panels-and-labels.aspx

Telerik themeable label with [[http://docs.telerik.com/devtools/winforms/telerik-presentation-framework/html-like-text-formatting|HTML-like formatting]] capability. Also see [[http://tv.telerik.com/watch/winforms/utility/enhanced-html-like-markup-support|this video]].

{{tdn:image126.png?248x61|A black text on a white background Description automatically generated}}

//NOTE: Our design policy it to only change the control name from default if we will programmatically change the text.//

* 'Text' \Behavior
 * 'Name' \Design
 * 'Location' \Layout
 * 'Size' \Layout
 * <color red>Multiline RadLabel - Set 'Auto Size' = False and ‘TextWrap’ = True. Then go directly to the 'Size' and enter 50,50, or you can drag the box size. Don't embed \n in the text. Or dock the label to a container to set the size.</color>

Custom Text Formatting via MarkupEditor

http://www.telerik.com/help/winforms/panels-and-labels-label-html-like-text-formatting.html

* For example making one word in a sentence bold. Click the down arrow on the 'Text' value and click <Start MarkupEditor>.
 * Use <Shift><Enter> for new lines. It will generate HTML. The font changes made here (color, etc) are not the same properties as those in the Properties window.

=== Hyperlink to a function in the application ===

Set these RadLabel properties and double click the label to stub out a click event.

* ‘ForeColor’ = ‘HotTrack’ - a blue visible under the color dropdown ‘System’ tab
  * ‘Underline’ – ‘True’

=== Hyperlink to website in default browser ===

Instead of LinkLabel see the <Links> button on the ‘MarkupEditor’ behind the ‘[[#radlabel-rlbl|RadLabel]].Text’ property dropdown and open locations without additional code.

* Choose link ‘Type’ of ‘http:%%//%%’ or ‘https:%%//%%’ and enter a web url there and the link works with no extra code. The .Text generated markup looks like this:

> <html><a href="http:%%//%%www.legalitysoftware.com/">Legality Software</a></html>
> 
> <a href="http:%%//%%www.legalitysoftware.com/">Legality Software</a> - orange font in Wizards (NOTE: Set ‘BackColor’ = 225, 228, 240 to match wizard form)
> 
> <html><a href="http:%%//%%support.lawtopia.net/">View log files</a></html>

* Choose link ‘Type’ of ‘mailto:’ and enter an email address to open an email in the default client.
  * Choose link ‘Type’ of ‘(other)’ and enter a local file path to pop the Windows Explorer in the location.. The .Text generated markup looks like this:

> <html><a href="file:%%//%%/C:/DevGit">View log files</a></html>

* Make only part of the label a clickable link like this:

> <html>Click this <a href="file:%%//%%/C:/DevGit">View log files</a> to open Windows Explorer</html>

Here’s the HTML for our company blurb for wizard pages, etc. (Set ‘TextAlignment’ = MiddleCenter):
<code html>
Legality Software provides packaged software products and custom software solutions for law firms. Our solutions typically enhance the capabilities of, or fix problems with, the tools you use in your firm today. We also help firms automate difficult, time consuming or repetitive tasks. Legality products and solutions are designed to solve your problems so you can achieve your goals. If you have a specific problem we may already have a solution. If not we can build one for you. Visit <a href="http:%%//%%www.legalitysoftware.com/">Legality Software</a> to learn more.
</code>

{{tdn:image127.png?478x164|A screenshot of a software Description automatically generated}}

<color red>### I DON'T KNOW HOW TO CENTER TEXT IN A MULTI-LINE LABEL</color>

=== Dynamically Add Text to a Label ===

=== Dynamically Replace some Placeholder Text in a Label ===

<color red>### grab code from TMFU & ask Larry how he worked out the issue with the Placeholder Text is not there for the 2nd replace</color>

==== RadPrintDocument – rpd ====

==== RadProgressBar – rpb  ====

http://www.telerik.com/help/winforms/track-and-status-controls-progressbar-overview.html

http://www.telerik.com/community/forums/winforms/track-and-status.aspx

RadProgressBar is designed to display progress information to the user during a long-running operation.

{{vertopal_daaeffda7d704b80a16bba19fb3588e8/media/image48.gif?308x205|A screenshot of a progress bar Description automatically generated}}

**### Need an example**

==== RadWaitingBar – rwb ====

http://www.telerik.com/help/winforms/track-and-status-controls-waitingbar-overview.html

http://www.telerik.com/community/forums/winforms/track-and-status.aspx\\
http://docs.telerik.com/devtools/winforms/track-and-status-controls/waitingbar/waitingbar\\
http://docs.telerik.com/devtools/winforms/track-and-status-controls/waitingbar/properties-and-methods

Like a progress bar but with no start or end. It just shows activity.

^{{vertopal_daaeffda7d704b80a16bba19fb3588e8/media/image49.gif?93x183|A green and white striped object Description automatically generated}}^{{vertopal_daaeffda7d704b80a16bba19fb3588e8/media/image50.gif?261x46}}^
|                                                                                                                                           |{{vertopal_daaeffda7d704b80a16bba19fb3588e8/media/image51.gif?410x44}}|

Properties

* ‘WaitingStyle’ – Indeterminate, **Throbber**, Dash
  * ‘WaitingSpeed’ – (90) animation speed
  * ‘WaitingStep’ – (1) number of pixels to move for each step
  * ‘.Text’ – background text on the waiting bar – set ‘ShowText’ = true to make it visible
  * ‘StretchIndicatorsHorizontally’ – inverses the color on the shaded scrolling indicator for a nice effect
  *

> The ‘WaitingBarIndicatorElement’ is the sliding part, which has:

* Its own ‘.Text’ property making the text scroll with the colored highlight.
  * ‘ShouldPaint’ which hides the slider (even though it still moves) returning the waiting bar to a solid color – use this and the StartWaiting()/StopWaiting() methods to indicate the process is finished. //See note below about multiple elements…//
  *

> //NOTE: A RadWaitingBar may (does) have more than 1 ‘WaitingBarIndicatorElement’, named ‘WaitingBarIndicatorElement1’ and ‘WaitingBarIndicatorElement2’ so if you use ‘ShouldPaint’, besure to change both instances.//

Methods

* StartWaiting() method starts the animation
  * StopWaiting() method stops the animation
  * ResetWaiting() method moves the waiting indicators to their initial position.

**### Add an example here from HLS PdfParser**

==== RadRating ====

http://docs.telerik.com/devtools/winforms/track-and-status-controls/rating/rating

RadRating is a flexible UI component that allows users to place their rating by selecting from a finite number of items (stars, diamonds and hearts). The developers can fully customize the control by configuring its orientation, rating precision, direction etc.

{{vertopal_daaeffda7d704b80a16bba19fb3588e8/media/image52.png?277x119|A screenshot of a computer Description automatically generated}}

==== RadRotator – rrot ====

http://docs.telerik.com/devtools/winforms/rotator/overview

RadRotator is a multipurpose component for content rotation and personalization. Highly customizable, it delivers high interactivity and user involvement. You can display a series of images, web URLs or any collection of rad elements. Animation between frames can be opaque or transparent and the movement can be in any direction. You can adjust the level of granularity and interval between frames.

{{vertopal_daaeffda7d704b80a16bba19fb3588e8/media/image53.png?340x287|A screenshot of a computer Description automatically generated}}

==== RadTitleBar – rtb ====

http://www.telerik.com/help/winforms/forms-and-dialogs-radtitlebar-overview.html

http://www.telerik.com/community/forums/winforms/forms-and-dialogs.aspx

RadTitleBar control is used in forms and provides functionality for dragging, minimizing, maximizing and closing the form. This control is internally used by RadForm.

To include a title bar with help, maximize, minimize and close button functionality simply drag it from the toolbox on the desired form. This control is great addition to the ShapedForm.

To customize the help, minimize, maximize and close buttons, use the RadTitleBar.TitleBarElement's HelpButton, MinimizeButton, MaximizeButton and CloseButton objects. Each button is a RadButtonElement type that include properties to control text, image, and layout.

{{vertopal_daaeffda7d704b80a16bba19fb3588e8/media/image54.png?290x39|A green line on a white background Description automatically generated}}

//Note: By default, the HelpButton is not shown. It is necessary to set its Visibility property to ElementVisibility.Visible in order to be displayed.//

==== RadVScrollBar – rvsb ====

http://www.telerik.com/help/winforms/track-and-status-controls-scrollbar-overview.html

http://www.telerik.com/community/forums/winforms/track-and-status.aspx

http://www.telerik.com/help/winforms/track-and-status-controls-scrollbar-getting-started.html

Using Telerik scrollbars is a bit more intricate compared to using the standard scrollbars because you have to handle scroll event manually. Add a RadPanel to your form then add a RadVScrollbar in the panel and dock it to the Right. Add another RadPanel inside the 1st RadPanel and set its height to the total height you want to be available upon scrolling (taller than the 1st RadPanel). This value can be statics e.g. 1000 pixels or dynamic determined by the scrollable content. Now add controls (the controls which are to be scrolled) to the second RadPanel.

{{vertopal_daaeffda7d704b80a16bba19fb3588e8/media/image55.png?192x172|A white background with black squares Description automatically generated}}

Then subscribe to the Scroll event of the vertical scrollbar and assign its negated value to the Top property of the second RadPanel:

void radVScrollBar1_Scroll(object sender, ScrollEventArgs e)

{

this.radPanel2.Top = -this.radVScrollBar1.Value;

}

Finally, set the Maximum property of the scrollbar to reflect the size of the scrollable height which is the total height of the scrollable content minus the visible height. For the example of this section in particular, that is the height of the second panel minus the height of the first panel.

this.radVScrollBar1.Maximum = this.radPanel2.Size.Height - this.radPanel1.Size.Height;

==== * RadWizard – rw  ====

http://www.telerik.com/help/winforms/wizard-overview.html

http://www.telerik.com/community/forums/winforms/wizard.aspx\\
Design Time Settings http://www.telerik.com/help/winforms/wizard-design-time.html

Wizard dialog with multiple pages and <Back><Next> buttons.

{{vertopal_daaeffda7d704b80a16bba19fb3588e8/media/image56.png?368x272|A screenshot of a computer Description automatically generated}}

* Could leave as default assigned name unless we will use more than one Wizard in a project.
  * Drag this container to a regular form to create a Wizard.

Properties

* ‘Mode’ - Wizard97 for the header panel we use, or Aero for a header with nav buttons at the top

Quick Tasks Button

* 'Edit Pages' - use this instead of 'Add Page'. It gives you more control. You should add Welcome, Working (Wizard), and Completion pages.
 * This seems backwards but the 'Title' is the big text on top and the 'Header' is the smaller text under the Title.
 * Use the <Back>/<Next> buttons on the actual form to navigate in design time.

> Another option is to click page name in 'Pages' Collection Editor to jump/view.

### I’m not sure how to change the “Help” hyperlink in the lower left corner.

Contains the following elements:

* Pages collection – collection which contains Internal, Welcome and Completion RadWizard pages.
  * Page header – element which is located above each page and contains elements for title text, header text and page icon.
  * Command area – element which is located below each page and contains command button – Back (Wizard 97), Next, Cancel, Finish, and Help.
  * Welcome image – element which contains the image of the Welcome page.
  * Completion image - element which contains the image of the Completion page.
  * Top element – element which contains the Back button of Wizard Aero view.

Events - help you to follow the state of the control at run time, implement custom pages sequence and page processing validation.\\
http://www.telerik.com/help/winforms/wizard-events.html

* ModeChanging - Fires before the mode of RadWizard is changed. It is cancelable event. The arguments of the event provide the current and the next WizardMode.
  * ModeChanged - Fires after the mode of RadWizard is changed. The arguments of the event provide the previous and the current WizardMode.
  * Next - Fires when the Next command button is clicked. It is cancelable event.

> [[http://www.telerik.com/forums/how-to-add-custom-functionality-to-next-button-in-a-wizard|Add custom/Validation functionality to Wizard Next Button]]
> 
> Subscribe to the Next event
> 
> this.radWizard1.Next += new WizardCancelEventHandler(radWizard1_Next);
> 
> Handle the Next event
> 
> private void radWizard1_Next(object sender, WizardCancelEventArgs e)
> 
> {
> 
> if (this.radWizard1.SelectedPage == this.radWizard1.Pages[1]) %%//%% Check if this is the desired page
> 
> {
> 
> %%//%% Do some validation here
> 
> e.Cancel = true; %%//%% If the validation does not pass
> 
> this.radWizard1.SelectedPage = this.radWizard1.Pages[0]; %%//%% Could return to 1st page
> 
> %%//%% Or you could show some message to the user
> 
> }
> 
> }

* Previous - Fires when the Back command button is clicked. It is cancelable event.
  * SelectedPageChanging - Fires before the selected page of RadWizard is changed. It is cancelable event. The arguments of the event provide the selected page of the control and the page to be selected.
  * SelectedPageChanged - Fires after the selected page of RadWizard is changed. The arguments of the event provide the previous selected page and the selected page of the control.
  * Finish - Fires when the Finish command button is clicked.
  * Cancel - Fires when the Cancel command button is clicked.
  * Help - Fires when the Help command button is clicked.

[[http://www.telerik.com/forums/branching|Custom Page Branching Sample Project]]

[[http://www.telerik.com/forums/navigation-buttons|Custom CommandArea Controls like Navigation Buttons]]

Create multiple Welcome or Completion pages

* ‘WelcomePage’ - Select one of multiple Welcome pages
 * ‘WelcomePage.Name’ – Provide a rwppagenameWelcomePage style name from one of multiple Welcome pages
 * ‘CompletionPage’ - Select one of multiple Completionpages
 * ‘CompletionPage.Name’ – Provide a rwppagenameCompletionPage style name from one of multiple Completionpages
 * Edit one of the alternate pages by selecting it from the Quick Task ‘Edit Pages’ list or ‘Pages’ collection, then click <Cancel> (believe it or not). If you click <OK> it will jump to a different page.

RadWizardPage - rwp

> Only change from default if we will programmatically change the text)

Edit summary