How to create watermark Textbox in Windows Phone 8

In this tutorial in step by step manner we will learn to create watermark textbox in Windows Phone 8. Watermark textbox looks like below. You use watermark textbox in your app if you want to display readable text to user such that they can enter desired information in that particular textbox. In below app these two watermark textboxes are giving information that user should enter Name and Phone in first and second textboxes respectively.

image

Let us learn how we can create watermark textbox.

Step 1

Create two text boxes and set text property of textboxes as watermark text. Since we want to display Name and Phone as watermark text of two textboxes so we have set Text property as Name and Phone respectively.

 



<TextBox x:Name="txtName"
                     Text="Name"                     
                     GotFocus="txtName_GotFocus" 
                     LostFocus="txtName_LostFocus"
            />
                
            <TextBox x:Name="txtPhone" 
                     Text="Phone"                    
                     GotFocus="txtName_GotFocus"
                     LostFocus="txtName_LostFocus"
             />



I have also set GotFocus and LostFocus events of textboxes.

Step 2

In watermark textbox when user will click on the textbox prepopulated value should get erased and user can type in new value. In Windows Phone 8 for textbox GotFoucs event gets fired when user selects textbox, so on GotFocus we need to perform two tasks,

  1. Erase prepopulated task
  2. In case user has left textbox without putting any value then again set textbox text with previous prepopulated value.

 


        string data;
        private void txtName_GotFocus(object sender, RoutedEventArgs e)
        {

            TextBox t = sender as TextBox;
            data = t.Text;
            t.Text = string.Empty;

        }



In above code snippet we are typecasting as TextBox and then setting its Text property to string.empty. Before setting value to empty we are saving existing text value such that if user leaves textbox control without inserting any value then previous value can be used to prepopulate textbox.

Step 3

Assume that user clicked or touched textbox but did not type any value and went away. In this case pervious value should get prepopulated in textbox. So to do this when user will navigate from control we need to check that whether textbox contains any value. If textbox text is empty then we will set text property to previous value. This can be done as below,

 


   
private void txtName_LostFocus(object sender, RoutedEventArgs e)
        {
            TextBox t = sender as TextBox;
            if (t.Text.Equals(string.Empty))
            {
                t.Text = data;
            }

        }


This is what all you need to do to create watermark textbox in Windows Pone 8. I hope this post is useful. See demo of control below,

About these ads

No Data tab in portal in Azure Mobile Services: Solved

Azure Mobile Service supports two platform for the backend. They are

  1. .NET backend
  2. JavaScript backend

I worked with JavaScript backend many times but with .NET backend it was my first attempt. So while creating Azure Mobile Service, I selected .NET platform as backend. To my surprise there is no Data tab available when you choose .NET backend.

clip_image002

Reason behind this is if you choose .NET backend data access becomes part of the .NET project and should be deployed from there. And in JavaScript backend Data tab would be visible in portal and scripts can run at the portal.

Learn AngularJS: Hour 2

In hour 1 of this series we learnt to get started with AngularJS. In this hour we will see Angular Templates and how AngularJS app can be embraced into a pattern.

Let us start with writing a simple web application with static template. In below application we are printing name of the authors in HTML unordered list.


<body>
    <h1>Authors : 8</h1>
   <ul>
       <li>Dhananjay Kumar</li>
       <li>Pinal Dave</li>
       <li>Glen Block</li>
       <li>Dan Wahlin</li>
       <li>Julie Learman</li>
       <li>Mahesh Chand</li>
       <li>Prabhjot Singh</li>
       <li>Gaurav Mantri</li>
   </ul>
</body>

We will get application rendered as below and authors are printed in HTML using static template. Below rendered page is pure static HTML page.

clip_image002

Next we will learn to populate Authors dynamically using AngularJS. Before we get into implementation of this, let us understand that AngularJS Apps can be created adhering any MV* pattern. For this implementation we will follow Model-View-Controller pattern. Let us start with creating controller. Controller can be created in a separate JavaScript file. I have created a JavaScript file Product.js.

Author.js

 


var AuthorApp = angular.module('AuthorApp', []);

AuthorApp.controller('AuthorController',function($scope)
{
    $scope.authors =
        [
                { 'name': 'Dhananjay Kumar' },
                { 'name': 'Pinal Dave' },
                { 'name': 'Glen Block' },
                { 'name': 'Dan Wahlin' },
                { 'name': 'Mahesh Chand' },
                { 'name': 'Prabhjot Singh' },
                { 'name': 'Julie Learman' }
       ];
});


Let us examine the controller class,

  • In first line we are creating Module.
  • In second line we are creating Controller. Controller is a function which takes $scope as parameter.
  • Then adding authors JOSN array in scope of the controller. This is Model.

In Angular Controller is a constructor function that takes $scope parameter.

Once we have Controller in place we will have to create View. View simply displays model through templates.

image

View and Template get created in HTML. We will bind View with Controller and Angular will project data from Model on the View. On the View we are using various Angular directives.

image

We created AuthorApp module and AuthorController controller in Author.js. Now if you see we bind View and Controller in three steps,

  1. Implicit Scope Declaration
  2. Scope Inheritance
  3. Model-View Data Binding

In first step we did Scope declaration by setting ng-app directive to Angular module name.

clip_image002[6]

Then Scope Inheritance is done by setting ng-controller directive. After setting ng-controller directive scope of body is set to controller we created in Author.js

clip_image004

Now any element inside this body can bind to array of controller.

clip_image006

These are simple steps you need to follow to work with Angular Template and Controller. For your reference code of View an Template is given below,

 


<!DOCTYPE html>
<html ng-app="AuthorApp">
<head>
    <title>Angular Demo</title>
    <script src="Scripts/angular.min.js"></script>
    <script src="Author.js"></script>
</head>
<body ng-controller="AuthorController">
    <ul>
        <li ng-repeat="author in authors">
            {{author.name}}
        </li>
    </ul>
</body>
</html>


In next hours we will get into other aspects of AngularJS.