Tuesday, September 28, 2010

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 :

sip1

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 :

sipcsharp

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 :

siptext

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 :

sipop

Let’s see various other InputScopes :

sipage sipemail

siptelecon

This one is my favorite : Chat !

sipchat

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.

Saturday, September 4, 2010

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 :

AppBarwotxt

AppBartxt

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 :

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

  opacityappbar

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) :

CropIssue

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 :

txterr

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 :

IconIssue
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.

Saturday, August 14, 2010

Microsoft Silverlight 4 and SharePoint 2010 Integration by Packt Publishing : Book Preview

I am more than happy to share that the book which keep me involved so much from past few months,finally got published and also now available on Packt Publishing and Amazon. Yes ! I am one of the Reviewer of this book with my fellow friends Marius Constantinescu,Laurent Duveau and Russell East. The book is published by Packt Publishing. I worked as reviewer for this Book which is now titled as “Microsoft Silverlight 4 and SharePoint 2010 Integration”. Gastón C. Hillar is Author of this book.This book is very unique ! With SharePoint 2010 lot many features got introduced by Microsoft, Along with that, Silverlight is another Technology which is creating a solid wave in Technical communities around the universe.

BookImage

About Author :

Read Bio here : https://www.packtpub.com/authors/profiles/gast%C3%B3n-c-hillar

Target Audience :

All Silverlight and SharePoint Developers and Enthusiast with some awareness about both technologies.

Acknowledgement Section :

I am happy to share these images out of book with you :)

Author’s words :

Reviewers

I dedicate this Book to My Family,Friends,India MVP Program and Team Silverlight at Microsoft for all their support for my work and activities :)

mylal

My Personal views on this Book :

As we are all aware that Silverlight is Cross Browser Cross Platform Technology and works as Plug-in Mechanism. Silverlight is helping businesses across the world in their day to day apps which we term as Line Of Business applications.

SharePoint on another hand, helping businesses to automate their most of the processes, Keeping day to day things centralized. I mean SharePoint have so many features under one hood. Its all in one solution for business as we know.

This book is about the Integration of Silverlight with SharePoint. In each chapter,Author shows us how the integration is powerful and how one can create wonders out of that.

About the Book : (via Packt Publishing site)

    • Develop and host Silverlight Rich Internet Applications in SharePoint 2010 Pages
    • Deploy and debug a Silverlight RIA included in a SharePoint solution by using the new SharePoint deployment features offered by Visual Studio 2010
    • Take advantage of Silverlight 4 features to create rich UX for SharePoint solutions
    • Work with asynchronous SharePoint requests and queries, and debug their execution
    • Retrieve information from SharePoint lists, workflows, and libraries
    • Use Silverlight applications to read, insert, update, and delete items from SharePoint 2010 lists and external data sources
    • Combine external data sources in SharePoint 2010 and interact with them through Silverlight
    • Create Web Parts that host multiple Silverlight applications
    • Create Visual Web Parts that render Silverlight applications
    • Consume SharePoint 2010 WCF Data Services in Silverlight applications
    • Use Silverlight multimedia controls and features to display information to users taking advantage of the processing power offered by their client computers
    • Enhance the responsiveness offered by SharePoint 2010 Visual Web Parts by transforming them into Silverlight Rich Internet Applications


Other Reviews by my friends :

Davide Zordan : http://www.davidezordan.net/blog/?p=2065

Russell East : http://russelleast.wordpress.com/2010/08/04/integrating-silverlight-4-with-sharepoint-2010/

Siddharth Mehta : http://siddhumehta.blogspot.com/2010/08/microsoft-silverlight-4-and-sharepoint.html

My Rating : * * * * * (5 Stars)

Would you like to check out Sample Chapter ? : https://www.packtpub.com/sites/default/files/0066-chapter-1-integrating-silverlight-4-with-share-point%20.pdf

Want to Buy this book? For all details,visit :

https://www.packtpub.com/microsoft-silverlight-4-and-sharepoint-2010-integration/book

I would like to say big “Thank You” to Poorvi,Geeta,Wilson from Packt Publishing and their entire Team who given me opportunity to become Reviewer of this unique book which will be going to be a unique resource of Microsoft Silverlight 4 and SharePoint 2010 Integration. Thanks to Pack Publishing once again !

How can I forget you guys? :) ..You are the one who always shown confidence in me. Given me encouragement for my work in Silverlight Technology and Community work I am doing along with my day to day routine..Million Thanks to all of you !!

See you soon with some more books..Silverlight and much more !

Vikram.

Silverlight On Mobile : Ink Capabilities on Windows Phone 7

Hope my last post on Charting on Windows Phone 7 went well for you and you must have explore that in depth. Today I am going to talk on Ink capabilities on Windows Phone 7. As you all know, Ink capabilities is nothing new to us, I have already made 2 posts on Ink in Silverlight in past. Since Ink is functionality provided by Silverlight 3, I am going to utilize the same on Phone 7 since we all know Silverlight 3 is main platform on Phone 7.

For this, I am taking typical Windows Phone 7 Application project. For Ink capabilities, you will need reference of following :

  • System.Windows.Ink
  • System.Windows.Media
  • System.Windows.Input
  • Microsoft.Phone.Controls

Remember, The challenge on Phone 7 will be performance not for Ink but for any app you write. So as usual, I will advice you to keep things simple and not make them too jazzy. In this app, I am going to make use of App Bar (Application Bar). I know that we have not touch upon App bar in our earlier discussions, but for time being, just try to understand the syntax part of it and I will cover that App Bar in my next post since its totally a new discussion and there are lot many small things to explore. If you don’t find App Bar comfortable at moment, you can surely replace that with normal Command Buttons as I have shown in my old posts on Ink Capabilities in Silverlight.

Let us first see at the XAML part for good design.

XAML Code : For Guys n Gals who don’t want App Bar

<Grid x:Name="ContentGrid" Grid.Row="1">
          <InkPresenter x:Name="inkP" Background="Pink">
              <Button Height="73" Width="114" Foreground="Black" Content="Blue" x:Name="btnBlue" Click="btnBlue_Click" Canvas.Left="126" Canvas.Top="466" />
              <Button Content="Red" Height="72" Foreground="Black" Width="116" x:Name="btnRed" Click="btnRed_Click" Canvas.Left="230" Canvas.Top="466" />
              <Button Height="72" Width="116" Foreground="Black" Content="Green" x:Name="btnGreen" Click="btnGreen_Click" Canvas.Left="336" Canvas.Top="466" />
              <Button Height="74" Width="114" Foreground="Black" x:Name="btnClear" Content="Clear" Click="btnClear_Click" Canvas.Left="21" Canvas.Top="466" />
          </InkPresenter>
      </Grid>
The Code in Italic represents the respective buttons for drawing and you need to handle and write code in each click of button respectively.

XAML Code : For Guys n Gals who are comfortable with App Bar

<Grid x:Name="ContentGrid" Grid.Row="1">
            <InkPresenter x:Name="inkP" Background="Pink">
            </InkPresenter>
</Grid>

<phone:PhoneApplicationPage.ApplicationBar>
       <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
           <shell:ApplicationBarIconButton x:Name="appbar_clear" IconUri="/Images/appbar.delete.rest.png" Text="Clear" Click="appbar_clear_Click"></shell:ApplicationBarIconButton>
           <shell:ApplicationBarIconButton x:Name="appbar_blue" IconUri="/Images/appbar.edit.rest.png" Text="Blue" Click="appbar_blue_Click"></shell:ApplicationBarIconButton>
           <shell:ApplicationBarIconButton x:Name="appbar_red" IconUri="/Images/appbar.edit.rest.png" Text="Red" Click="appbar_red_Click"></shell:ApplicationBarIconButton>
           <shell:ApplicationBarIconButton x:Name="appbar_green" IconUri="/Images/appbar.edit.rest.png" Text="Green" Click="appbar_green_Click"></shell:ApplicationBarIconButton>
       </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
There is also another option of “Menu Item”..but as we decided, not to speak too much on App Bar and focus more on Ink, so time being don’t scratch your head for this.

This peace of XAML will show the design like this :

InkDesign

From above snap, Understand the three main parts as “Ink Area”, “Command Buttons” and “App Bar”. Ink Area is area where you are going to Draw whatever you like with Ink. Out of Command Buttons and App Bar, depends what you implement in your development.

Namespaces :

using System;
using Microsoft.Phone.Controls;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;

Global Declarations :

Stroke s;
int mycol = 0;

Constructor :

inkP.MouseMove += new MouseEventHandler(inkP_MouseMove);
inkP.MouseLeftButtonDown += new MouseButtonEventHandler(inkP_MouseLeftButtonDown);
inkP.MouseLeftButtonUp += new MouseButtonEventHandler(inkP_MouseLeftButtonUp);

Mouse Events :

void inkP_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
       {
           s = null;
       }

       void inkP_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
       {
           inkP.Cursor = Cursors.Stylus;
           inkP.CaptureMouse();
           s = new Stroke();
           s.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkP));
           switch (mycol)
           {
               case 0: s.DrawingAttributes.Color = Colors.Black;
                   break;
               case 1: s.DrawingAttributes.Color = Colors.Blue;
                   break;
               case 2: s.DrawingAttributes.Color = Colors.Red;
                   break;
               case 3: s.DrawingAttributes.Color = Colors.Green;
                   break;
           }
           inkP.Strokes.Add(s);
       }

       void inkP_MouseMove(object sender, MouseEventArgs e)
       {
           if (s != null)
           {
               inkP.Cursor = Cursors.Stylus;
               s.StylusPoints.Add(e.StylusDevice.GetStylusPoints(inkP));
           }
       }

Application Bar :

private void appbar_clear_Click(object sender, EventArgs e)
{
      inkP.Strokes.Clear();
      mycol = 0;
}

private void appbar_blue_Click(object sender, EventArgs e)
{
      mycol = 1; 
}

private void appbar_red_Click(object sender, EventArgs e)
{
      mycol = 2; 
}

private void appbar_green_Click(object sender, EventArgs e)
{
      mycol = 3; 
}

Note : Same code will work if you put this in Command Button Click event.
Now just hit F5 and your Paint app is ready ! With Ink you can do much more things like stroke adjustments,colors and lot many things which you use to do it in Web based Silverlight Ink App.

The initial screen will look like this :

GettingReady

You can draw strokes with color strokes options from Command Button if you have or from App Bar like this :

Strokes

App Bar options have some Text, so you will be able to identify each of them and not to get confuse by white icons.It will look like this :

Appbar1Appbar2
I hope with this information, you must have understood that how quickly we can implement Ink on Windows Phone 7 with minimum efforts and minimum code. Do let me know your feedback, I am coming with much more stuff in next week..Till then enjoy WP7 Development !

ILUWP

Vikram.

Sunday, August 8, 2010

Silverlight On Mobile : Charting on Windows Phone 7

Working in office on weekends and that too doing bug fixes in code which is written by others is pathetic job ! Well, After doing that finally got some time to explore new things on Windows Phone 7. I hope you enjoyed my last article on Splash Screen on Windows Phone 7. Today I am going to talk on Charting on Windows Phone 7.

Charting in Silverlight is nothing new to us since I have already wrote one article on that in past.Today I am going to push this charting feature to our Windows Phone 7 to have the same Data Visualization experience which we had inside browser in Desktop/Web version of Silverlight. Visifire is another player to introduce Charting Controls for Windows Phone 7 when I search across. If you know any more vendors who exposed their charting controls for Windows Phone 7 then do buzz back. Visifire unfortunately didn’t worked for me. So I finally decided to use our traditional Charting Controls provided by Silverlight 3 Toolkit.

Remember one thing that you will not have those controls sitting ready to go on your designer, First you need to install toolkit then you can set reference to the Charting Controls DLL like this :

ChartingDLLSystem.Windows.Controls.DataVisualization.Toolkit for our development.So you should expect output like this :

PieChartBarChartColumnChart
So,Lets do a simple Pie Chart. The methodology I am going to demonstrate for Pie Chart is exactly similar for Line,Bar,Column and other types of graph. For sake of Data to display on chart, I am going to Class and not actual data from Database since we are yet to explore service consumption in Windows Phone 7, However you feel you can do that then please go ahead and let me know if you have some issues.

XAML Code :

<mychrt:Chart x:Name="MyPieChart"                           
                             Title="Sample Chart" BorderBrush="{x:Null}" Background="{StaticResource TransparentBrush}" Margin="8,181,8,8" Style="{StaticResource ChartStyle1}" d:IsHidden="True">           
                <mychrt:PieSeries
                        Foreground="AliceBlue"
                        IndependentValueBinding="{Binding Name}"                  
                        DependentValueBinding="{Binding Sales}" Height="397" Margin="8,-22,-21,0" VerticalAlignment="Top" Style="{StaticResource PieSeriesStyle1}">
                    <mychrt:PieSeries.Background>
                        <ImageBrush Stretch="UniformToFill"/>
                    </mychrt:PieSeries.Background>
                </mychrt:PieSeries>
            </mychrt:Chart>

C# Code :

Namespaces :

using System.Collections.Generic;
using System.Windows;
using Microsoft.Phone.Controls;
using System.Windows.Controls.DataVisualization.Charting;

Class Declaration :

#region ProductSales Class Declaration
       public class ProductSales
       {
           public string Name { get; set; }
           public double Sales { get; set; }
       }
#endregion

Class Implementation :

#region Public Method GetProductSales()
       public void GetProductSales()
       {
           List<ProductSales> PieData = new List<ProductSales>();
           PieData.Add(new ProductSales() { Name = "Vikram", Sales = 10.5 });
           PieData.Add(new ProductSales() { Name = "Chaitanya", Sales = 20.2 });
           PieData.Add(new ProductSales() { Name = "Manjiri", Sales = 30.2 });
           PieData.Add(new ProductSales() { Name = "Swati", Sales = 40.1 });

           PieSeries pieSlice = MyPieChart.Series[0] as PieSeries;
           pieSlice.ItemsSource = PieData;

           MyPieChart.LegendTitle = "Activity in this Month in %";
       }
#endregion

GetProductSales() Consumption :

// Constructor
        public MainPage()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(MainPage_Loaded);
        }

        #region Calling GetProductSales() to Bind Pie Chart
        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
                GetProductSales();          
        }
        #endregion

and here is the output…

PieChart
Make a note that, you can apply Styles to this chart like I did, I made use of some brushes and styles to make it look good.I know this looks very old style, How if your same graph looks like this :

OputputGraphGraph

Lets make this look Jazzy … So I am taking example of a picture which I got while surfing. So lets add some nice background to graph by adding Image to Grid. Remember one thing, Though I am going to show the way how it will look jazzy,I warn you guys that should not go beyond limits and make it over jazzy else it will put performance down and then you might suffer. But yes, using right design is also need of application, So lets do it. Lets take one Image like this :

crop

If you want to adjust some properties or style you can do it via blend like this :

editor

Style
Same piece of code,only looks will be different. So here it will look like this :

perfumes

I hope you will find this information useful especially to represent your business data in form of Charts on your Windows Phone 7. I know we are not playing with real data but with real data methodology will remain same. So go ahead and try this out, If you find something unique or worth to discuss over here then do buzz back. Let’s meet again on this weekend with some new exciting feature of Silverlight On Mobile – Silverlight on Windows Phone 7.

Vikram.

Sunday, August 1, 2010

Silverlight On Mobile : Windows Phone 7 Splash Screen and Customization

After talking about 3D capabilities on Windows Phone 7 using Silverlight in last article, Now I am moving ahead with small but equally important part of development. I am going to talk in short about Splash Screen of your application and how you can customize it depending on your business scenario.

Whenever you start with new project of Windows Phone 7, By default you will get on default splash screen as JPEG format titled as “SplashScreenImage”.This is a 10KB file,Default size of this Image is 480x800 and it is always recommended to keep the same even while you customize it.It loads once your application starts.If you have not seen it before, Here how it looks like :DefaultSplashScreen

Now we will see how we can make it more useful and good looking. In Ideal Scenario, This will be either your company logo or some product logo with some picture and text. (Loading.. Image and Progress Bar? Hold on…I am leaving that experiment to you).

Here today I am assuming a Application based on Indian Film Industry (Bollywood), You can take any case studay for your trial. The way we are going to this is important that content.So our job is make default splash screen look more nice like this :

DefaultSplashScreen[6]OutputNehaFinalOutput

So lets start !

Step 1 : Choose Editor to edit SplashScreenImage

This is initial important and easy step. All you have to do is just right click on SplashScreenImage and select “Open With…”, You will get Default dialog box where you will find list of editors, If you find that Editor you looking for is not there then you can add it as well,I added Expression Design 4 like this :

EditSplash

Step 2 : Edit in Microsoft Expression Design 4

Once you open Image in Expression Design 4 then you can edit it like this :

EditInDesigner

Remember one thing, Image has to be in JPEG format which is by default and also size aspect should be maintained 480x800 for ideal results.The advantage of Expression Design 4 is that it allows you to add effects and export image in whatever format you like.

I understand the above Image of Model is stunning ! Winking smile ..So how about make it more jazzy by adding some more effects? Smile

Step 3 : Adding Effects using Expression Design 4

Check the Effects Tab on right hand side and start applying some effects like this :

EffectsNeha

EffectWindows

After applying effects you can see the change in Plain Image and Image with Effects like this :

Before :NehaAfter :OutputNeha

Step 4: Export Image as JPEG and save as “SplashScreenImage”

After adding effects as per your requirement and choice,Next step is to save our work in Expression Designer 4 and hit back to Visual Studio. Export option you can find in Context Menu as well as in File Menu. Make sure while saving Image that Format and Size are as per predefined standards.

Export

Step 5 : Execute and Enjoy your Splash Screen !

OutputNehaWhile doing this POC, My friend saw this stuff I am doing and he asked me how one can add some Text over it and apply effects to that as well instead of just Raw Image or Image effects. Well the solution for this problem is same ! Follow same steps and take help of Expression Design 4, So something similar like this :

TextOnNeha

Again Export this Image so finally it will look like this :

FinalOutput
So, Your Splash Screen is Ready !.. I am seriously looking ahead for some exciting splash screens from you people since I am not expert Designer. So buzz me back with your designs.I will surely post it here with giving you full credits and it will be great collection as well.

Though my splash screen is Jazzy ! I Hope you understand the real life application of it and the business value it carries, Remember ! Splash Screen is your first impression of application. So be careful about it and do it very seriously.

On more serious note. While making splash screen jazzy like this, Make sure it does not becomes a Heavy Image and trouble for your end users and customers.

Note that I am using Microsoft Expression Design 4 because I find it simple, However you can do this using other editors and put some transparent layer of PNG image on this and do layer as well. You need to figure out smart and better way,I just shown the way to do it !

In coming post we will now focus into other areas related to UI and then we will go to controls and navigation then followed by Data and Line of Business applications. So expect lot of stuff here and keep visiting for more !

Vikram.