Telerik blogs

RadControls For Windows Phone: Using RadPickerBox

by Viktor Skarlatov
November 03, 2010 Mobile 0 Comments


RadDatePicker and RadTimePicker have a lot of basic common functionality. One of the components that provide some of this common functionality is RadPickerBox. It is a very basic control designed to provide an easy way for users to display some content, just like ContentControl:
RadPickerBox first look

Also when the content is clicked RadPickerBox displays a popup with more content that makes no sense to occupy the main real estate of the application:
RadPickerBox opening
In the context of RadDatePicker and RadTimePicker the popup part is used to produce a value which is then displayed in the content part when the popup is closed. RadPickerBox is not restricted to displaying only the value produced by the popup, this is an arbitrary decision left to the application developer, that is, the content and popup content are only loosely related, they can visualize entirely different information if required. 

The best way to use RadPickerBox is to inherit from Silverlight’s Control class and use RadPickerBox as a part in the control’s ControlTemplate. This is exactly how RadDatePicker and RadTimePicker use it, they display the selected value in the content part, and the popup part contains the date and time selectors used to actually select the value.

[C#] Class declaration
public class SampleComboBox : Control
{
    private RadPickerBox pickerBox;
    // rest of class omitted
}

[XAML] ControlTemplate
<ControlTemplate TargetType="example:SampleComboBox">
                 <telerikPrimitives:RadPickerBox x:Name="PART_PickerBox"
                  PopupPlacementTarget="{Binding ElementName=LayoutRoot}"
                  Content="{Binding ElementName=PART_ListBox, Path=SelectedItem}"
                  PopupOpenAnimation="{TemplateBinding PopupOpenAnimation}"
                  PopupCloseAnimation="{TemplateBinding PopupCloseAnimation}"
                  IsFullScreen="True">
<!- - Rest of template omitted - ->
</ControlTemplate>
[C#] Class declaration
public class SampleComboBox : Control
{
    private RadPickerBox pickerBox;
    // rest of class omitted
}

[XAML] ControlTemplate
<ControlTemplate TargetType="example:SampleComboBox">
                 <telerikPrimitives:RadPickerBox x:Name="PART_PickerBox"
                  PopupPlacementTarget="{Binding ElementName=LayoutRoot}"
                  Content="{Binding ElementName=PART_ListBox, Path=SelectedItem}"
                  PopupOpenAnimation="{TemplateBinding PopupOpenAnimation}"
                  PopupCloseAnimation="{TemplateBinding PopupCloseAnimation}"
                  IsFullScreen="True">
<!- - Rest of template omitted - ->
</ControlTemplate>
[C#] Class declaration
public class SampleComboBox : Control
{
    private RadPickerBox pickerBox;
    // rest of class omitted
}

[XAML] ControlTemplate
<ControlTemplate TargetType="example:SampleComboBox">
                 <telerikPrimitives:RadPickerBox x:Name="PART_PickerBox"
                  PopupPlacementTarget="{Binding ElementName=LayoutRoot}"
                  Content="{Binding ElementName=PART_ListBox, Path=SelectedItem}"
                  PopupOpenAnimation="{TemplateBinding PopupOpenAnimation}"
                  PopupCloseAnimation="{TemplateBinding PopupCloseAnimation}"
                  IsFullScreen="True">
<!- - Rest of template omitted - ->
</ControlTemplate>

[C#] Class declaration
public class SampleComboBox : Control
{    
    private RadPickerBox pickerBox;    
    // rest of class omitted
}


[XAML] ControlTemplate 
<ControlTemplate TargetType="example:SampleComboBox">                  
<telerikPrimitives:RadPickerBox x:Name="PART_PickerBox"
                PopupPlacementTarget="{Binding ElementName=LayoutRoot}"
                Content="{Binding ElementName=PART_ListBox, Path=SelectedItem}"
                PopupOpenAnimation="{TemplateBinding PopupOpenAnimation}"
                PopupCloseAnimation="{TemplateBinding PopupCloseAnimation}"
                IsFullScreen="True"/>
 
<!-- Rest of template omitted -->
 </ControlTemplate>


RadPickerBox exposes the full functionality of RadWindow, namely, relative placement of the popup, popup location offsets, open and close animations etc. Inheriting from Control and aggregating RadPickerBox allows developers to hide some of this functionality which is not applicable to the new control. For example RadDatePicker only exposes the window’s events, it does not expose relative placement, the ability to change the placement target or to change the window’s sizing mode. If on the other hand the new control requires all of this, developers can simply use the good old inheritance mechanism to utilize all of the functionality.

Usage of RadPickerBox has been designed to be fairly straightforward if used in the two ways described above. Our examples application provides the full implementation of the composition method (part of the code above) which creates a new control and uses RadPickerBox as an instance field in order to achieve the functionality of the well-known combo box UI component. Any feedback is greatly appreciated so please post questions, bug reports or feature requests on the forums.

DatePicker, UI, Windows, Windows Phone
About the Author

Viktor Skarlatov

Software Developer,
Windows Phone Team

Comments

Comments are disabled in preview mode.