Getting Started
This article shows how you can start using RadPipsPager. The following result will be achieved at the end of this tutorial:
When using Bound Mode the PipsPager automatically changes the Position of the BindingSource. In unbound mode, the NumberOfPages property determines the amount of items and the SelectedIndexChanged events need to be handled to get notified when the user changes the selected Pips Pager Item.
RadPipsPager allows you to navigate the records of any collection by setting its BindingSource property. Usually, it is used together with a RadSlideView.
Follow the steps:
1. Go ahead and add a RadSlideView, a RadPipsPager and a BindingSource from the toolbox.
2. Set DataSource for the BindingSource to a collection of records.
3. Define TemplateElement for the RadSlideView. This is actually the visual element that represents the UI for the current item. For simplicity of this example, we will use a LightVisualElement for displaying the Title.
4. Define a Mapping for RadSlideView to link the TemplateElement with the respective data field.
5. Set the BindingSource property of RadSlideView and RadPipsPager.
BindingSource source = new BindingSource();
DataTable table = new DataTable();
table.Columns.Add("Title", typeof(string));
table.Rows.Add("Venice");
table.Rows.Add("Rome");
table.Rows.Add("Florence");
this.radSlideView1.BindingSource = source;
this.radPipsPager1.BindingSource = source;
this.radPipsPager1.ButtonsVisibility = ButtonsVisibility.Visible;
this.radSlideView1.ButtonsVisibility = ButtonsVisibility.VisibleOnMouseOver;
source.DataSource = table;
LightVisualElement titleTemplate = new LightVisualElement();
titleTemplate.ForeColor = Color.DarkGray;
titleTemplate.DrawText = true;
titleTemplate.Font = new Font("Verdana", 12f, FontStyle.Bold);
this.radSlideView1.Mappings.Add(new Mapping(titleTemplate, LightVisualElement.TextProperty, table.Columns[0].ColumnName));
this.radSlideView1.TemplateElement = titleTemplate;
Dim source As BindingSource = New BindingSource()
Dim table As DataTable = New DataTable()
table.Columns.Add("Title", GetType(String))
table.Rows.Add("Venice")
table.Rows.Add("Rome")
table.Rows.Add("Florence")
Me.radSlideView1.BindingSource = source
Me.radPipsPager1.BindingSource = source
Me.radPipsPager1.ButtonsVisibility = ButtonsVisibility.Visible
Me.radSlideView1.ButtonsVisibility = ButtonsVisibility.VisibleOnMouseOver
source.DataSource = table
Dim titleTemplate As LightVisualElement = New LightVisualElement()
titleTemplate.ForeColor = Color.DarkGray
titleTemplate.DrawText = True
titleTemplate.Font = New Font("Verdana", 12.0F, FontStyle.Bold)
Me.radSlideView1.Mappings.Add(New Mapping(titleTemplate, LightVisualElement.TextProperty, table.Columns(0).ColumnName))
Me.radSlideView1.TemplateElement = titleTemplate
More advanced TemplateElement is demonstrated in the Demo application >> SlideView/ PipsPager >> First look example which also shows the smooth integration between RadSlideView and RadPipsPager.