Silverlight On Mobile : InputScope in Windows Phone 7

After a long break,I am back here finally.Well, You must have already downloaded the latest RTM bits of Windows Phone 7,If not already then download from here. In my upcoming post I will surely cover the new things like Pivot Viewer and newly added stuff in RTM bits of Windows Phone 7.Now lets focus on today’s topic.This is very short post but its important to know the InputScope in Windows Phone 7 since we will need that every now and then while asking user to key in data for your application.Every phone has keyboard, so what so great about this InputScope in Windows Phone 7?

This is actually known as SIP (Software Input Panel) which is a virtual keyboard which get invoke on screen once your Textbox or the equivalent control is focused and awaits for user input. Advantage of InputScope is to offer wide range of ways by which one can enter data. These are Text,Numeric,Chat Symbols, Telephone Numbers etc. While surfing I found out that there are around 62 InputScopes for Windows Phone 7. There are two ways we can implement this InputScopes which are via XAML or via Code. I personally recommend that if you know what are your fields and what input they are suppose to take then do it via XAML, Otherwise you can do it programmatically as well by looping over various types of InputScopes. Lets first see how the default InputScope looks like as :

Above is the default layout of the virtual keyboard of Windows Phone 7. This InputScope is “Default”.Now lets see how we can apply it.

XAML Code :

<TextBox InputScope="Number" Height="73" />

Above is the one approach,Another approach is to embed InputScope between opening closing tag like this :

<TextBox TextWrapping="Wrap" VerticalAlignment="Top">
     <TextBox.InputScope>
            <InputScope>
                 <InputScopeName NameValue="Digits"/>
            </InputScope>
     </TextBox.InputScope>
</TextBox>

C# Code :

NameValue are actually generated as Enum and you can have InputScope class from Namespace System.Windows.Input. So for doing this via code, you will be referring System.Windows.Input namespace.When you don’t specify any value it is treated as “Default”. The “Text” InputScope is something different than “Default”. “Text” provides suggestions as well once you start key in the textbox. Take look at this :

Here is sample code of Registration App where I am showcasing various InputScopes :

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">           
            <TextBlock Height="33" Margin="0,39,0,0" TextWrapping="Wrap" Text="Name" VerticalAlignment="Top" Grid.Column="1" HorizontalAlignment="Left" Width="88" d:LayoutOverrides="GridBox" FontSize="21.333"/>
            <TextBlock Height="43" Margin="0,114,0,0" TextWrapping="Wrap" Text="Age" VerticalAlignment="Top" Grid.Column="1" HorizontalAlignment="Left" Width="88" FontSize="21.333"/>
            <TextBlock Height="45" Margin="0,189,0,0" TextWrapping="Wrap" Text="E-mail" VerticalAlignment="Top" Grid.Column="1" HorizontalAlignment="Left" Width="73" FontSize="21.333"/>
            <TextBlock Margin="4,266,0,0" TextWrapping="Wrap" Text="Telephone" Grid.Column="1" HorizontalAlignment="Left" Width="104" d:LayoutOverrides="GridBox" Height="32" VerticalAlignment="Top" FontSize="21.333"/>
           
            <TextBox InputScope="Number" Grid.Column="1" Height="73" Margin="108,22,8,0" TextWrapping="Wrap" VerticalAlignment="Top"/>              
            <TextBox Grid.Column="1" Height="73" Margin="108,95,8,0" x:Name="AgeOfUser" TextWrapping="Wrap" VerticalAlignment="Top">
                <TextBox.InputScope>
                    <InputScope>
                        <InputScopeName NameValue="Digits"/>
                    </InputScope>
                </TextBox.InputScope>
            </TextBox>
            <TextBox Grid.Column="1" Height="73" Margin="108,169,8,0" TextWrapping="Wrap" VerticalAlignment="Top">
                <TextBox.InputScope>
                    <InputScope>
                        <InputScopeName NameValue="EmailNameOrAddress"/>
                    </InputScope>
                </TextBox.InputScope>
            </TextBox>
            <TextBox Grid.Column="1" Margin="108,242,8,292" TextWrapping="Wrap">
                <TextBox.InputScope>
                    <InputScope>
                        <InputScopeName NameValue="TelephoneNumber"/>
                    </InputScope>
                </TextBox.InputScope>
            </TextBox>
            <Button Content="Submit" Grid.Column="1" Height="75" Margin="116,0,185,174" VerticalAlignment="Bottom"/>           
        </Grid>
    </Grid>

Output will be like this :

Let’s see various other InputScopes :

 

This one is my favorite : Chat !

Well,That’s all from me on InputScope in Windows Phone 7 at the moment, you can check more information on MSDN here

There is a nice “tap tap” sound while you type with this SIP, however at the moment you might not be able to play with it but you can surely enjoy that sound on emulator, For more on this Sound and related stuff, check out this Channel 9 Screencast.

I am coming back here with more stuff on WP7 very vey soon, I know I am bit lazy and posts are getting delay for some reason due to my schedule but I am working on it very hard and soon you will see tons of new things here. Till then..have fun !

Vikram.

Silverlight On Mobile : Application Bar for your Windows Phone 7 Application

I hope you like my last article on Ink Capabilities, Also I am getting tons of email for Charting on WP7 and many of you made request for source project. Within few weeks, I am planning to keep all codes on a central web location and share url with you so that you all can download and explore more on bits I show here.

Coming back to our today’s topic, Today I am going to demonstrate Application Bar which will be a unique integral part of any of your application which you are planning to build on Windows Phone 7 platform.Application Bar allows you to choose various options or you can say it acts as a menu for your application. It sits at the bottom side of your application and you can invoke it on touching on “…” invoker/trigger to pull out application bar which I am going to demonstrate here.

There are two straight forward ways to build Application Bar

• With Built-in infra (XAML)
• Custom Creation

What I mean by custom creation is that you will create it in code something like this :

ApplicationBar = new ApplicationBar();

In both the cases you will have to code since even in first case though your infra will be ready by XAML, you need to take care of click event of each item via code.So can’t run away from code ideally in both the scenarios.Let us first see how Application Bar look like, here is a small look :

Uncomment code and default App Bar is Ready :

When you start new Windows Phone 7 Application Project Template, By default the XAML for App Bar you can find commented in your MainPage.xaml like this :

<!-- Sample code showing usage of ApplicationBar
   <phone:PhoneApplicationPage.ApplicationBar>
       <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
           <shell:ApplicationBarIconButton x:Name="appbar_button1" IconUri="/Images/appbar_button1.png" Text="Button 1"></shell:ApplicationBarIconButton>
           <shell:ApplicationBarIconButton x:Name="appbar_button2" IconUri="/Images/appbar_button2.png" Text="Button 2"></shell:ApplicationBarIconButton>
           <shell:ApplicationBar.MenuItems>
               <shell:ApplicationBarMenuItem x:Name="menuItem1" Text="MenuItem 1"></shell:ApplicationBarMenuItem>
               <shell:ApplicationBarMenuItem x:Name="menuItem2" Text="MenuItem 2"></shell:ApplicationBarMenuItem>
           </shell:ApplicationBar.MenuItems>
       </shell:ApplicationBar>
   </phone:PhoneApplicationPage.ApplicationBar>
   -->

This is what I was talking about “Developing with Ready Infra” above. To start with you just need to uncomment the above code and your default Application Bar is Ready !

AppBar : Inside out

Before going for actual development, it is necessary to understand first what all things we have in AppBar, they are :

• ApplicationBar Icon Buttons (Offcourse with Icons)
• Menu Item (Text based)

Your application on your business requirements can have Icon buttons or Menu items or both.You can do this via smartly commenting out IconButton XAML part or MenuItem XAML part vice-versa.Together it will look like this :

As per your application background and application requirement, you can always play with the Opacity property for best user experience,like this :

 

Before I land into coding part,Here are some things to look at :

Mind your Text ! :

If you are under impression that you can use lengthy Text for your IconButton, then you are having wrong mindset…really? yes ! If you try to put larger text,it will not allow you by any means to wrap it around (I tried out using many ways but my all attempts are FAIL !), see this is how it will look like with chopped text (Where Ticket is chopped to tick) :

Picture speak thousand words ! :

If you are strong believer of above quote,then its good but this will not work if you just try to Put Icon Image without any text. It will throw a runtime exception like this :

Make sure you follow Design Guidelines aka Standards ! :

There is information available about UI UX related to Phone and you can find it over Internet,more correctly over MSDN. There you can find information like what format of Image should be there for IconButton, What should be ideal size etc. information available. Following this guideline will help you while pushing your application to Customers via Application Market / Marketplace. I personally tried a lot to play around standards and try to make-break kind of things, I realized that Images have to be monocolor and in specific size else you will land into something like this :

Changing looks of AppBar by applying colors :

Not a big deal ! you have both Properties :

• BackgroundColor
• ForegroundColor

Anything Beyond IconButtons and MenuItems ? :

I took this concern to my fellow Silverlight MVPs on mail who are also doing wonderful things on Windows Phone 7. I got great inputs from them. Thanks to Shawn Wildermuth for his idea for Popup ( You should visit his article on Popup control on Windows Phone 7 here ) . If you intend to show something customize things like Extra controls or some color palette then AppBar might not help you directly to achieve this due to the default behavior of AppBar. So you can do such things either by your own customize design or on Popup.

Via Code :

Lets see the coding approach to build AppBar.

Namespace :

using Microsoft.Phone.Shell;

General Declaration :

ApplicationBar MyAppBar = new ApplicationBar();

Making ApplicationBar Enabled :

MyAppBar.IsVisible = true;
MyAppBar.IsMenuEnabled = true;

IconButton, Text and Event :

//Add Icon Button
            ApplicationBarIconButton MyAppBarTwoBtn = new ApplicationBarIconButton(new Uri("/Images/appbar.feature.email.rest.png",UriKind.Relative));
            MyAppBarTwoBtn.Text = "Hotel";
            MyAppBarTwoBtn.Click += new EventHandler(MyAppBarTwoBtn_Click);

//Adding IconButtons to Application Bar
MyAppBar.Buttons.Add(MyAppBarTwoBtn);

Event Handle :

void MyAppBarTwoBtn_Click(object sender, EventArgs e)
{
      MessageBox.Show("Hotel Room Booked !");
}

So this is how you can add it via C# Code. Similar technique is for MenuItem, I leave that to you to explore via C# Code, Hope this much of guideline will make your life easy for MenuItem.Instead of MyAppBar.Buttons.Add( ) it will be MyAppBar.MenuItems.Add( )

With this, I am closing this topic at the moment since I think this is more than sufficient for you to get idea about AppBar. I know some of you will raise your eye over this blog post since this is bit away from “Silverlight” and more towards phone though I title it as “Silverlight on Mobile”,but I will not be doing any compromise over any of the topic under Phone 7, I will soon again start talking on Silverlight once this series gets over.

So in coming days you might see here some stuff which is not Silverlight but part of Windows Phone 7. My intention of this series is to help you to get familiar get closer and get comfortable with Windows Phone 7 ecosystem.I will try my best !

See you soon with more stuff on Windows Phone 7 using our “love” platform Microsoft Silverlight.

Vikram.