The short story of ScrollableButtonList

Boss: “George, I want you to use a good looking ScrollableButtonList here. And make that for yesterday – we are getting behind schedule already!”
George: “What, for yesterday? It will take me at least a week! Come on, boss, you know how coding is!”
Boss: “Do it, or you will be looking for a new job!”
George (walking towards his office): “Oh maan, what am I gonna do?”
George (thinking again): “Of course! I will use the Telerik WinForms Framework! I bet the ScrollableButtonList will be ready in minutes… ”

This may sound bizarre, but it’s not! With the wide range of predefined elements that Telerik Presentation Framework provides, you can create your custom controls without much effort, and still benefit from the Theming mechanism and the unique Telerik visual appearance.

To start off, the ScrollableButtonList can be either a CheckedListBox or a ToggleButtonsListBox. First, you need to create a new RadScrollViewer and a StackLayoutPanel:

The Viewport property should be set to the StackLayoutPanel instance. Since this will be a vertical ListBox, we will set the Orientation property of the StackLayoutPanel to Vertical:

The RadScrollViewer instance itself will be hosted by the RadPanel control:

The final thing that we should do is to add RadCheckBoxElements to the StackLayoutPanel. That’s all for the CheckedListBox. Alternatively, we can add RadToggleButtonElements and we will have a ToggleButtonsListBox:
         

Of course, you can add some custom spices such as events and custom collections to your new control. However, as we saw, the foundation is easy to be made.

Here is the complete code snippet:

    this.radPanel1.Text = String.Empty;

    for(int i = 0 ; i < 100; i++)
    {
        RadCheckBoxElement checkBoxElement = new RadCheckBoxElement();
        checkBoxElement.Text = "Test" + i;
        checkBoxElement.Padding = new Padding(5);
        checkBoxElement.Margin = new Padding(2);
        stackLayout.Children.Add(checkBoxElement);
        // or 
        //RadToggleButtonElement checkBoxElement = new RadToggleButtonElement();
        //checkBoxElement.Text = "Test" + i;
        //checkBoxElement.Padding = new Padding(5);
        //checkBoxElement.Margin = new Padding(2);
        //stackLayout.Children.Add(checkBoxElement);
    }
}

So, how long did it take for you to read this story? 5-6 minutes? While you were reading, George showed the implementation to his boss, and he is once again put for promotion :)

~END~