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
To start working with RadTextBox very first you need to add namespace on XAML as following
After adding namespace you need to put RadTextBox on xaml. Explicitly you need to set ActionButtonVisibility property as visible.
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
On running you should get RadTextBox as below
If you want you can change style of clear and action button. Header of the RadTextBox can bind to a data source as following
And in the code behind
And Data class is defined as following
You should be getting RadTextBox experience as following. You will notice that header has been data bind now.
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
ValidationState enum is used to specify validation state on RadTextBox. There are four possible value of ValidationState
You can validate as following
Validate is user defined function and you may defined it as per your business requirement. Validation message will be displayed as following
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; } } } <pre>
I hope you find this post useful. Thanks for reading.