RadControls for WinForms

The following tutorial demonstrates configuring RadStatusStrip at design-time and programmatic access of individual status bar items at run-time. The status bar contains label, separator, buttons and progress bar elements.  One of the button elements increments the RadListControl selected index. The label and one of the button elements reflect the current selection in the RadListControl while the progress bar mimics a process against the upcoming item.

 

  1. Add a RadStatusStrip,  and a RadListControl to a form.
  2. Take three images of your choice and set them as project resources.
  3. In the designer click the RadStatusStrip label "Type here" and enter "Current:". This step is one way to create a RadButtonElement in RadStatusStrip and populate it.
  4. Using the downward arrow of the RadStatusStrip add a RadLabelElement. In the Properties Window set the Name property to be "lblStatus" and the Spring property to true.
  5. Open the Smart Tag for the status bar and select Edit Items to open the Rad Item Collection Editor.

  6. Click the downward arrow on the Add split button. Add the following elements:

    1. RadButtonElement

    2. CommandBarSeparator

    3. RadProgressBarElement

    4. RadButtonElement

  7. Click OK to close the Rad Item Collection Editor.
  8. Use the Properties window to set the following properties to the elements above:
    1. RadImageButtonElement: Name = "imgStatus", DisplayStyle = "Image"

    2. CommandBarSeparator. There are no properties to set for the separator element.

    3. RadProgressBarElementName = "pbStatus"

    4. RadButtonElement: Name = "btnStatus", Text = "Go!", Spring = true.

  9. Double-click "btnStatus" to create a Click event handler. Add the code below to replace the event handler. This code block bumps the listbox selected index until the end of the list is reached, then moves the index back to the first item in the list.
    Copy[C#]
    private void btnStatus_Click(object sender, EventArgs e)
    {
        if (radListControl1.SelectedIndex >= radListControl1.Items.Count - 1)
            radListControl1.SelectedIndex = 0;
        else
            radListControl1.SelectedIndex += 1;
    }
    Copy[VB.NET]
    Private Sub btnStatus_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnStatus.Click
        If RadListControl1.SelectedIndex >= RadListControl1.Items.Count - 1 Then
            RadListControl1.SelectedIndex = 0
        Else
            RadListControl1.SelectedIndex += 1
        End If
    End Sub
  10. In the Properties Window for the RadListControl:
    1. Set the Dock property to Fill.
    2. Select the Items property ellipses. This will open the RadItem Collection Editor.
    3. Click the Add button. Set the RadListDataItemText property to "Music", TextImageRelation to ImageBeforeText and Image to one of the images previously set as project resources.
    4. Click the Add button. Set the RadListDataItemText property to "Pictures", TextImageRelation to ImageBeforeText and Image to one of the images previously set as project resources.
    5. Click the Add button. Set the RadListDataItemText property to "Email", TextImageRelation to ImageBeforeText and Image to one of the images previously set as project resources.
    6. Click OK to close the RadItem Collection Editor.
  11. In the Properties Window for the RadListControl select the Events button.
  12. Locate and double-click the RadListControlSelectedIndexChanged event to create an event handler.
  13. Paste the following code to the SelectedIndexChanged event handler.  The code retrieves the selected item and assigns the text and image for the selected item to the status bar label and image elements. Then the progress bar element mimics an operation against the newly selected item.
    Copy[C#]
    void radListControl1_SelectedIndexChanged(object sender, Telerik.WinControls.UI.Data.PositionChangedEventArgs e)
    {
        RadListElement listControl = (sender as RadListElement);
        RadListDataItem item = listControl.SelectedItem;
        lblStatus.Text = item.Text;
        imgStatus.Image = item.Image;
    
        pbStatus.Visibility = Telerik.WinControls.ElementVisibility.Visible;
        for (int i = 0; i < 100; i++)
        {
            pbStatus.Value1 = i;
            pbStatus.Text = item.Text + "...";
            radStatusStrip1.Refresh();
            Thread.Sleep(5);
        }
        pbStatus.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
    }
    Copy[VB.NET]
    Private Sub RadListControl1_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As Telerik.WinControls.UI.Data.PositionChangedEventArgs) Handles RadListControl1.SelectedIndexChanged
        Dim listControl As RadListControl = TryCast(sender, RadListControl)
        Dim item As RadListDataItem = listControl.SelectedItem
        lblStatus.Text = item.Text
        imgStatus.Image = item.Image
        pbStatus.Visibility = Telerik.WinControls.ElementVisibility.Visible
    
        Dim i As Integer = 0
        While i < 100
            pbStatus.Value1 = i
            pbStatus.Text = item.Text + "..."
            Thread.Sleep(5)
            System.Math.Max(System.Threading.Interlocked.Increment(i), i - 1)
        End While
    
        pbStatus.Visibility = Telerik.WinControls.ElementVisibility.Hidden
    End Sub
  14. Add Telerik.WinControls.UI and System.Threading references to the "using" (C#) or Imports (VB) section of the code.
    Copy[C#]
    using Telerik.WinControls.UI;
    using System.Threading;
    Copy[VB.NET]
    Imports Telerik.WinControls.UI
    Imports System.Threading
  15. Press F5 to run the application. Press the "Go!" button to see the status bar react to list control changes.