Telerik UI for Windows Phone by Progress

This topic demonstrates some examples of using RadInputPrompt for Windows Phone.

Examples

Specifying arbitrary text for the buttons:

CopyC#
RadInputPrompt.Show(new string[] { "Button1", "Button2", "Button3", "Button4" }, "Title");

Specifying a custom template for the buttons:

CopyXAML
<DataTemplate x:Key="ButtonsTemplate">
    <telerikPrimitives:RadWrapPanel x:Name="PART_ButtonsPanel" />
</DataTemplate>
CopyC#
DataTemplate buttonsTemplate = (DataTemplate)this.Resources["ButtonsTemplate"];
RadInputPrompt.Show(buttonsTemplate, "Title", new string[] { "Button1", "Button2", "Button3", "Button4" });

It is very important that the panel inside the data template has its name set to "PART_ButtonsPanel". This is a required part of the control and if it is not present, RadInputPrompt will not work.

Creating a control template for RadInputPrompt:

CopyXAML
xmlns:inputPrompt="clr-namespace:Telerik.Windows.Controls.InputPrompt;assembly=Telerik.Windows.Controls.Primitives"

 <ControlTemplate x:Key="ImageTemplate" TargetType="inputPrompt:RadInputPromptControl">
    <Border Padding="12" Background="{StaticResource PhoneChromeBrush}">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <ContentControl x:Name="PART_Title" HorizontalContentAlignment="Left" FontSize="{StaticResource PhoneFontSizeLarge}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Margin="{StaticResource PhoneMargin}" />
            <StackPanel Grid.Row="1" Orientation="Horizontal">
                <Image Source="SomeImage.png" Margin="12, 12, 0, 24" />
                <ContentControl HorizontalContentAlignment="Left" VerticalContentAlignment="Top" x:Name="PART_Message" Margin="12, 12, 12, 24" />
            </StackPanel>
            <telerikPrimitives:RadTextBox x:Name="PART_TextBox1" Grid.Row="2" />
            <telerikPrimitives:RadPasswordBox x:Name="PART_PasswordBox1" Grid.Row="2" Visibility="Collapsed" />
            <CheckBox x:Name="PART_CheckBox" Grid.Row="3" HorizontalAlignment="Left" VerticalAlignment="Bottom" />
            <ContentControl Grid.Row="4" x:Name="PART_ButtonsContainer" HorizontalContentAlignment="Stretch">
                <ContentControl.ContentTemplate>
                    <DataTemplate>
                        <StackPanel x:Name="PART_ButtonsPanel" Orientation="Horizontal"></StackPanel>
                    </DataTemplate>
                </ContentControl.ContentTemplate>
            </ContentControl>
        </Grid>
    </Border>
</ControlTemplate>
CopyC#
ControlTemplate imageTemplate = (ControlTemplate)this.Resources["ImageTemplate"];
RadInputPrompt.Show(imageTemplate, "Title", new string[] { "yes", "no" });

Calling the Show method only with the required arguments:

CopyC#
RadInputPrompt.Show("Title", vibrate: true, horizontalAlignment: HorizontalAlignment.Center);

The Show method can be called as succinctly as possible with the aid of named arguments. Notice how each argument after the first is specified by name.

Determining which button was pressed:

CopyC#
RadInputPrompt.Show("Message", closedHandler: (args) =>
{
    /*
        * The args parameter in closedHandler gives us three types of information
        * regarding which button was pressed.
        */

    // The Result property returns either OK or Cancel depending on whether the first
    // button in the buttons panel was pressed or a different one. This is equivalent
    // to checking if the ButtonIndex property is 0 or not. 0 = OK, non-zero = Cancel.
    DialogResult result = args.Result;

    // The ButtonIndex is the index of the pressed button in its parent's Children collection.
    // For example if the buttons are arranged in a vertical stack panel. Tapping on the top-most
    // button will result in ButtonIndex = 0, tapping on the second button in ButtonIndex = 1 etc.
    int buttonIndex = args.ButtonIndex;

    //The Text property is the text that was entered in the input field by the user, before 
    //closing the prompt.
    string value = args.Text;

    // Finally, the args parameter gives a reference to the actual button that was tapped via the
    // ClickedButton property.
    Button clickedButton = args.ClickedButton;
});

InputPrompt with custom PasswordBox:

CopyXAML
<Style x:Key="customStyle" TargetType="telerikPrimitives:RadPasswordBox">
    <Setter Property="ActionButtonVisibility" Value="Visible"/>
    <Setter Property="Watermark" Value="password"/>
</Style>
CopyC#
Style customStyle = (Style)this.Resources["customStyle"];
RadInputPrompt.Show("password confirmation", 
                    MessageBoxButtons.OKCancel, 
                    "please confirm your password", 
                    InputMode.Password, 
                    customStyle, 
                    null, 
                    false, 
                    true, 
                    HorizontalAlignment.Stretch, 
                    VerticalAlignment.Top, 
                    (args) => {this.Password = args.Text;});

InputPrompt that closes on pressing enter or space, but takes the entered text only if the pressed key was enter:

CopyC#
RadInputPrompt.Show("Title",
    closedHandler: (closedArgs) =>
        {
            if (closedArgs.Result == DialogResult.OK)
            {
                myText = closedArgs.Text;
            }
            else
            {
                myText = "Canceled by user";
            }
        },
    keyDownHandler: (keyArgs) =>
        {
            if (keyArgs.Key == Key.Enter)
            {
                RadInputPrompt.Close(0);
            }
            if (keyArgs.Key == Key.Space)
            {
                RadInputPrompt.Close(1);
            }
        });

InputPrompt with multiple input fields for registration details:

CopyC#
Style usernameStyle = new System.Windows.Style(typeof(RadTextBox));
usernameStyle.Setters.Add(new Setter(RadTextBox.HeaderProperty, "username"));
Style passwordStyle = new System.Windows.Style(typeof(RadPasswordBox));
passwordStyle.Setters.Add(new Setter(RadPasswordBox.HeaderProperty, "password"));
Style repeatPasswordStyle = new System.Windows.Style(typeof(RadPasswordBox));
repeatPasswordStyle.Setters.Add(new Setter(RadPasswordBox.WatermarkProperty, "repeat password"));

InputPromptSettings settings = new InputPromptSettings();
settings.Field1Mode = InputMode.Text;
settings.Field1Style = usernameStyle;
settings.Field2Mode = InputMode.Password;
settings.Field2Style = passwordStyle;
settings.Field3Mode = InputMode.Password;
settings.Field3Style = repeatPasswordStyle;

string messageTitle = "Registration";
string message = "Please enter your registration information:";

RadInputPrompt.Show(settings, messageTitle, MessageBoxButtons.OKCancel, message);
Note

In RadInputPrompt for Windows Phone 8, you can achieve the same results by using the async implementations of these methods. All of the Show methods have a ShowAsync counterpart, where the closedHandler parameter is omitted. Here is how you can show the input from the previous example with the async implementation and use the returned information:

CopyC#
InputPromptClosedEventArgs args = await RadInputPrompt.ShowAsync(settings, messageTitle, MessageBoxButtons.OKCancel, message);
if (args.Result == DialogResult.OK)
{
    //get input information
}