RadPageView - create multiline strip element with RadCommandBar
| Product Version | Product | Author | Last modified |
|---|---|---|---|
| Q2 2015 | RadPageView for WinForms | Dimitar Karamfilov | 15/1/2014 |
PROBLEM
This article will show how RadCommandBar can be used with combination with RadPageView to achieve multiline strips (pages), which will make the navigation easy when the page view has more pages. Also this will allow the user to benefit from both controls features and navigate between pages in a flexible way.
SOLUTION
We can start by creating a blank project where we can add a RadCommandBar (docked to the Top as is by default) and a RadPageView with a few pages:
Now we are ready to add the actual code, which will add buttons to the command bar. First we will create a CommandBarRowElement and CommandBarStripElement, we will use these elements to host and separate the buttons. Each row will contain a strip with maximum four buttons in it. New row will be created every time when the button number is greater than four. Then we will create, initialize and add a button to the corresponding command bar row for each page. Also we can hide the strip’s overflow button.
We can add a label to each page which will give us a visual clue that the current page is changed. Finally we can hide the original page view strip items:
public Form1()
{
InitializeComponent();
CommandBarRowElement row = new CommandBarRowElement();
CommandBarStripElement strip = new CommandBarStripElement();
row.Strips.Add(strip);
radCommandBar1.Rows.Add(row);
foreach (RadPageViewPage page in radPageView1.Pages)
{
if (strip.Items.Count >3)
{
row = new CommandBarRowElement();
strip = new CommandBarStripElement();
row.Strips.Add(strip);
radCommandBar1.Rows.Add(row);
}
CommandBarButton pageButton = new CommandBarButton();
pageButton.DrawText = true;
pageButton.Orientation = Orientation.Horizontal;
pageButton.Image = null;
pageButton.Text = page.Item.Text;
pageButton.Click += new EventHandler(pageButton_Click);
pageButton.StretchHorizontally = true;
strip.Items.Add(pageButton);
strip.StretchHorizontally = true;
strip.OverflowButton.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
//adding a label to each page in order to verify the change when a command bar button is clicked
RadLabel pageTitle = new RadLabel();
pageTitle.Text = "Current page = " + page.Item.Text;
pageTitle.Location = new Point(10, 10);
page.Controls.Add(pageTitle);
}
RadPageViewStripElement stripElement = radPageView1.ViewElement as RadPageViewStripElement;
stripElement.ItemContainer.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
}
void pageButton_Click(object sender, EventArgs e)
{
CommandBarButton pageButton = sender as CommandBarButton;
radPageView1.SelectedPage = radPageView1.Pages[pageButton.Text];
//reset all buttons colors
foreach (CommandBarRowElement row in radCommandBar1.Rows)
{
foreach (CommandBarStripElement strip in row.Strips)
{
foreach (CommandBarButton button in strip.Items)
{
button.ResetValue(LightVisualElement.BackColorProperty, Telerik.WinControls.ValueResetFlags.Local);
button.ResetValue(LightVisualElement.NumberOfColorsProperty, Telerik.WinControls.ValueResetFlags.Local);
}
}
}
pageButton.BackColor = Color.LightSalmon;
pageButton.NumberOfColors = 1;
}
Public Sub New()
InitializeComponent()
Dim row As New CommandBarRowElement()
Dim strip As New CommandBarStripElement()
row.Strips.Add(strip)
radCommandBar1.Rows.Add(row)
For Each page As RadPageViewPage In radPageView1.Pages
If strip.Items.Count > 3 Then
row = New CommandBarRowElement()
strip = New CommandBarStripElement()
row.Strips.Add(strip)
RadCommandBar1.Rows.Add(row)
End If
Dim pageButton As New CommandBarButton()
pageButton.DrawText = True
pageButton.Orientation = Orientation.Horizontal
pageButton.Image = Nothing
pageButton.Text = page.Item.Text
pageButton.StretchHorizontally = True
AddHandler pageButton.Click, AddressOf pageButton_Click
strip.Items.Add(pageButton)
strip.OverflowButton.Visibility = Telerik.WinControls.ElementVisibility.Collapsed
strip.StretchHorizontally = True
'adding a label to each page in order to verify the change when a command bar button is clicked
Dim pageTitle As New RadLabel()
pageTitle.Text = "Current page = " & page.Item.Text
pageTitle.Location = New Point(10, 10)
page.Controls.Add(pageTitle)
Next
Dim stripElement As RadPageViewStripElement = TryCast(radPageView1.ViewElement, RadPageViewStripElement)
stripElement.ItemContainer.Visibility = Telerik.WinControls.ElementVisibility.Collapsed
End Sub
Private Sub pageButton_Click(sender As Object, e As EventArgs)
Dim pageButton As CommandBarButton = TryCast(sender, CommandBarButton)
RadPageView1.SelectedPage = RadPageView1.Pages(pageButton.Text)
'reset all buttons colors
For Each row As CommandBarRowElement In RadCommandBar1.Rows
For Each strip As CommandBarStripElement In row.Strips
For Each button As CommandBarButton In strip.Items
button.ResetValue(LightVisualElement.BackColorProperty, Telerik.WinControls.ValueResetFlags.Local)
button.ResetValue(LightVisualElement.NumberOfColorsProperty, Telerik.WinControls.ValueResetFlags.Local)
Next
Next
Next
pageButton.BackColor = Color.LightSalmon
pageButton.NumberOfColors = 1
End Sub
The complete examples in C# and VB can be downloaded by clicking the following link.