WP7 CustomInputPrompt control with Cancel button

by WindowsPhoneGeek

In this article I am going to demonstrate how to implement a custom  InputPropmt control with OK and Cancel buttons. I will create a new custom control based on the InputPrompt  from the Coding4fun Toolkit .

NOTE: More information about the InputPropmt from the Coding4fun Toolkit  you can find here: WP7 InputPrompt in depth .

NOTE: For more information of how to write a Custom Control in WP7 take a look at : Creating a WP7 Custom Control in 7 Steps

Getting Started

Now lets begin.

1. I will create a ClassLibrart project called  CustomInputPromptLibrary. Add CustomInputPrompt.cs class , add Generic.xaml, add reference to Coding4Fun.Phone.Controls.dll and we will need one more icon for the Cancel button.  Here is how the project looks like:

2. CustomInputPromptLibrary will inherit InputPrompt and I will also add a new bool property IsCancelButtonEnabled that determine whether or not the Cancel button is Visible. By default it is set to false so that the InputPrompt's default behavior will remain the same. The cancel button is visible only when this property is set to true. And of course I set the PopUpResult.Cancelled in the cancel button handler.

public CustomInputPrompt()
{
    DefaultStyleKey = typeof(CustomInputPrompt);
}

public static readonly DependencyProperty IsCancelButtonEnabledProperty =
   DependencyProperty.Register("IsCancelButtonEnabled", typeof(bool), typeof(CustomInputPrompt), new PropertyMetadata(false));

public bool IsCancelButtonEnabled
{
    get { return (bool)GetValue(IsCancelButtonEnabledProperty); }
    set { SetValue(IsCancelButtonEnabledProperty, value); }
}

3.  The next step is to create the ControlTemplate in Generic.xaml. Actually I will add one more element to the default InputPrompt template : the Cancel button. I will also arrange the buttons in a Horizontal StackPanel with HorizontalAlignment = Center so that the buttons are conceited. The Visibility of the newly added CancelButton is Templatebound to the IsCancelButtonEnabledProperty using BooleanToVisibilityConverter converter.

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Controls="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls"
    xmlns:local="clr-namespace:CustomInputPrompt"
    xmlns:Binding="clr-namespace:Coding4Fun.Phone.Controls.Binding;assembly=Coding4Fun.Phone.Controls"
    xmlns:Converters="clr-namespace:Coding4Fun.Phone.Controls.Converters;assembly=Coding4Fun.Phone.Controls">

    <Converters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
    <Style TargetType="local:CustomInputPrompt">
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeNormal}"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="Background" Value="{StaticResource PhoneChromeBrush}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:CustomInputPrompt">
                    <Grid>
                        <Rectangle Fill="Transparent" />
                        <Border 
                            VerticalAlignment="Top" 
                            Margin="10" 
                            Background="{TemplateBinding Background}" 
                            BorderThickness="1" 
                            BorderBrush="{StaticResource PhoneForegroundBrush}">
                            <StackPanel Margin="10">
                                <TextBlock 
                                    Text="{TemplateBinding Title}" 
                                    Margin="0,-10,-25,0" 
                                    FontSize="30" 
                                    TextWrapping="Wrap" FontFamily="Segoe WP Light" />
                                <TextBlock Text="{TemplateBinding Message}" />
                                <TextBox Name="inputBox" 
                                        Binding:TextBoxBinding.UpdateSourceOnChange="True"
                                        InputScope="{TemplateBinding InputScope}"
                                        Text="{TemplateBinding Value}" />
                                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                                    <Controls:RoundButton 
                                        HorizontalAlignment="Left"
                                        x:Name="okButton" />
                                    <Controls:RoundButton DataContext="{TemplateBinding IsCancelButtonEnabled}" Visibility="{Binding Converter={StaticResource BooleanToVisibilityConverter}}"
                                    HorizontalAlignment="Right" ImageSource="/CustomInputPrompt;component/Themes/dark/appbar.cancel.rest.png"
                                    x:Name="cancelButton" />
                                </StackPanel>
                            </StackPanel>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

4. Next I will add the following code into the OnApplyTemplate():

protected Button CancelButton;
private const string CancelButtonName = "cancelButton";

public override void OnApplyTemplate()
{
    base.OnApplyTemplate();
    
    if (CancelButton != null)
        CancelButton.Click -= cancel_Click;

    CancelButton = GetTemplateChild(CancelButtonName) as Button;
    
    if (CancelButton != null)
        CancelButton.Click += cancel_Click;
}

5.And the last step is to cancel the popup in the cancel_Click handler:

private void cancel_Click(object sender, RoutedEventArgs e)
{
    OnCompleted(new PopUpEventArgs<string, PopUpResult> {Result = Value, PopUpResult = PopUpResult.Cancelled });
}

SampleUdage

Here are some examples of how to use the newly created CustomInputPrompt control.

NOTE: In order to use this control  in a Windows Phone Application project you will have to add a reference to the CustomInputPromptLibrary.dll that we have just created and Coding4Fun.Phone.Controls.dll . So create a sample Windows Phone 7 Application project , add these references and you are ready to start using  the CustomInputPrompt  control.

Example1. This example demonstrates the usage of IsCancelButtonEnabled  in a simple CustomInputPrompt usage.

private void Button_Click(object sender, RoutedEventArgs e)
{
    CustomInputPrompt input = new CustomInputPrompt();
    input.IsCancelButtonEnabled = true;
    input.Show();
}

Example2: This example demonstrates the usage of IsCancelButtonEnabled  in advanced CustomInputPrompt scenario.

private void Button_Click(object sender, RoutedEventArgs e)
{
    CustomInputPrompt input = new CustomInputPrompt
    {
        IsCancelButtonEnabled = true,
        Title = "TelephoneNum",
        Message = "I'm a message about Telephone numbers!",
        Background = new SolidColorBrush(Colors.Green),
        Overlay = new SolidColorBrush(Color.FromArgb(200, 255, 117, 24))
    };

    input.InputScope = new InputScope { Names = { new InputScopeName() { NameValue = InputScopeNameValue.TelephoneNumber } } };
    input.Show();
}

Example3: This example demonstrates the default behavior of IsCancelButtonEnabled.

private void Button_Click_2(object sender, RoutedEventArgs e)
{
    CustomInputPrompt input = new CustomInputPrompt();
    input.Title = "CustomInputPrompt Title";
    input.Show();
}

That was all about how to implement a CustomImputPrompt control that derives from the Coding4fun InputPrompt in Silverlight for Windows Phone 7. You can find the full source code and a test project with the samples as well here:

I hope that the article was helpful.

You can also follow us on Twitter @winphonegeek

Comments

                InputPrompt input = new InputPrompt();
                input.Completed += input_Completed;//what is the use of input_Completed method
                input.Title = "Add The Condition Name";
                input.Show();

                lst.Add(input.Value);//how can i get the value that user entered

                CustomListBox.ItemsSource = null;
                CustomListBox.ItemsSource = lst;



        }

        void input_Completed(object sender, PopUpEventArgs<object, PopUpResult> e)
        {

        }
Blockquote

Blockquote> BlockquoteBlockquote

Blockquote125