Telerik UI for Windows Phone by Progress

The RadPickerBox control provides you with a control that can be implemented into scenarios, where the user is required to select an option.

This topic will explain the following:

Using RadPickerBox

In order to use the RadPickerBox control in your application you have to reference the following assembly in your project:

  • Telerik.Windows.Controls.Primitives.dll

After adding references to the aforementioned dll, you can declare a new RadPickerBox instance as any normal Silverlight control.

Note

To use the RadPickerBox control in the XAML you have to add the following namespace declaration:

xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
CopyXAML
<telerikPrimitives:RadPickerBox x:Name="radPickerBox" />
CopyC#
RadPickerBox radPickerBox = new RadPickerBox();

Setting Content

In its normal state (when the popup window is not opened) the RadPickerBox control allows you to display content in it. In order to set the content of the RadPickerBox control you have to use its Content property. It is of type object, so you can assign everything to it - simple strings, UIElements, UserControls etc.

For example, if you want the user to select a country via your picker, you can set the Content to be equal to "Select country".

CopyXAML
          <telerikPrimitives:RadPickerBox x:Name="radPickerBox" Content="Select
country"></telerikPrimitives:RadPickerBox>
Tip
You can also bind the Content of the RadPickerBox control to a data object and use the ContentTemplate property to define a DataTemplate to visualize the object.

Here is a snapshot of the result.

Picker Box-Getting Started-01

Setting Popup Content

When the RadPickerBox control's action button gets hit, a popup window appears, which can also hold some content. In order to set the content of the popup window you have to use the PopupContent property of the RadPickerBox control. It is of type object, so you can assign everything to it - simple strings, UIElements, UserControls etc.

Note
You can directly wrap the content of the popup window inside the tag of the RadPickerBox control.

Here is an example of a RadPickerBox control showing in its popup window a ListBox containing some countries.

CopyXAML
          <telerikPrimitives:RadPickerBox x:Name="radPickerBox" Content="Select
country">
          <ListBox x:Name="countriesListBox" Background="Black" Padding="20">
          <ListBoxItem Content="United Kingdom" IsSelected="True" />
          <ListBoxItem Content="Germany" />
          <ListBoxItem Content="Russia" />
          <ListBoxItem Content="Japan" />
          <ListBoxItem Content="Bulgaria" />
          </ListBox>
          </telerikPrimitives:RadPickerBox>
Tip
You can also bind the Content of the RadPickerBox control to a data object and use the ContentTemplate property to define a DataTemplate to visualize the object.

Here is a snapshot of the result.

Picker Box-Getting Started-02

Adding Buttons to the Application Bar Info

Additionally you can provide the user with some ways to submit or cancel his choice. This is done by using the ApplicationBarInfo  property and the ApplicationBarButton classes. To handle their clicks you have to attach a handler to the ButtonClick event of the ApplicationBarInfo class.

Note
ApplicationBarButton cannot be used without an icon. Also the image representing the icon should have its BuildAction property set to Content.

Here is an example of two buttons representing OK and Cancel options.

CopyXAML
          <telerikPrimitives:RadPickerBox x:Name="radPickerBox" Content="Select
country">
          <telerikPrimitives:RadPickerBox.ApplicationBarInfo>
          <telerikPrimitives:ApplicationBarInfo ButtonClick="ApplicationBarInfo_ButtonClick">
          <telerikPrimitives:ApplicationBarButton IconUri="/Demos/Images/ok.png" Text="OK" />
          <telerikPrimitives:ApplicationBarButton IconUri="/Demos/Images/cancel.png" Text="Cancel" />
          </telerikPrimitives:ApplicationBarInfo>
          </telerikPrimitives:RadPickerBox.ApplicationBarInfo>
          <ListBox x:Name="countriesListBox" Background="Black" Padding="20">
          <ListBoxItem Content="United Kingdom" IsSelected="True" />
          <ListBoxItem Content="Germany" />
          <ListBoxItem Content="Russia" />
          <ListBoxItem Content="Japan" />
          <ListBoxItem Content="Bulgaria" />
          </ListBox>
          </telerikPrimitives:RadPickerBox>
CopyC#
private void ApplicationBarInfo_ButtonClick( object sender, Telerik.Windows.Controls.ApplicationBarButtonClickEventArgs e )
{
if ( e.Button.Text == "OK" )
{
//get and use the selected value.
string selectedValue = ( ( ListBoxItem )this.countriesListBox.SelectedItem ).Content.ToString();
this.UpdateSelectedValue( selectedValue );
this.radPickerBox.IsPopupOpen = false;
}
else
{
this.radPickerBox.IsPopupOpen = false;
}
}

private void UpdateSelectedValue( string value )
{
//your update logic here.
}

Here is a snapshot of the result.

Picker Box-Getting Started-03

Handling the Opening and the Closing of the Popup

In order to execute custom logic before the popup gets opened or closed, you have to handle the PopupOpening and PopupClosing events of RadPickerBox. To execute the logic after the popup gets opened or closed use the respective events of RadPickerBox - PopupOpened and PopupClosed.

Configuring the RadPickerBox