How to work with RadTextBox for Windows Phone

Read documentation here

RadTextBox is adding below functionalities in usual TextBox. Those functionalities are

  • Watermark
  • Validation
  • Clear Button
  • Action Button
  • Headers

You may have immersive experience of a RadTextBox as following

image

To start working with RadTextBox very first you need to add namespace on XAML as following

image

After adding namespace you need to put RadTextBox on xaml. Explicitly you need to set ActionButtonVisibility property as visible.

image

Clear button will only be visible once you start typing the text. ActionButtonTap event gets called when action button gets tapped. You can set watermark as following

image

On running you should get RadTextBox as below

image

If you want you can change style of clear and action button. Header of the RadTextBox can bind to a data source as following

image

And in the code behind

image

And Data class is defined as following

image

You should be getting RadTextBox experience as following. You will notice that header has been data bind now.

image

One of the most important features of RadTextBox is validation capabilities. You may want to perform some validation on the lost focus. To start with validation you need to add namespace

image

ValidationState enum is used to specify validation state on RadTextBox. There are four possible value of ValidationState

image

You can validate as following

image

Validate is user defined function and you may defined it as per your business requirement. Validation message will be displayed as following

image

image

In this way you can work with RadTextBox. Below is the consolidated code of all discussion from this post

MainPage.xaml


<phone:PhoneApplicationPage
x:Class="Demo.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
xmlns:telerikSlideView="clr-namespace:Telerik.Windows.Controls.SlideView;assembly=Telerik.Windows.Controls.Primitives"
xmlns:telerikData="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Data"
xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
xmlns:telerikDataVisualization="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.DataVisualization"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait"  Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="DEMO RAD CONTROLS" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Autocomplete" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

<telerikPrimitives:RadTextBox x:Name="rdTextBox" Height="110"
ActionButtonVisibility="Visible"
Header="{Binding Name}"
Watermark="Search"
ActionButtonTap="RadTextBox_ActionButtonTap"
/>

</Grid>
</Grid>

</phone:PhoneApplicationPage>

MainPage.xaml.cs

 

</pre>
using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Net;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Documents;
 using System.Windows.Input;
 using System.Windows.Media;
 using System.Windows.Media.Animation;
 using System.Windows.Shapes;
 using Microsoft.Phone.Controls;
 using System.Collections.ObjectModel;
 using Telerik.Windows.Controls;
 using System.Windows.Media.Imaging;
 using System.Xml.Linq;
 using Telerik.Windows.Controls.PhoneTextBox;

namespace Demo
 {
 public partial class MainPage : PhoneApplicationPage
 {

public MainPage()
 {
 InitializeComponent();
 this.rdTextBox.DataContext = new Data { Name = "I am  data bind Header" };
 rdTextBox.LostFocus += new RoutedEventHandler(rdTextBox_LostFocus);

}

void rdTextBox_LostFocus(object sender, RoutedEventArgs e)
 {

bool isValid = Validate(rdTextBox.Text);
 if (isValid)
 {
 rdTextBox.ChangeValidationState(ValidationState.Valid, "Wow valid input!");
 }
 else
 {
 rdTextBox.ChangeValidationState(ValidationState.Invalid, "Oops InValid input!");
 }

}

private bool Validate(string text)
 {
 //Your validation logic
 return false;
 }

private void RadTextBox_ActionButtonTap(object sender, EventArgs e)
 {

MessageBox.Show("Hello");

}

}
 public  class Data
 {
 public string Name { get; set; }
 }

}

&nbsp;
<pre>

I hope you find this post useful. Thanks for reading.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s