Prototyping Windows Phone 7 Applications using SketchFlow

 

I should actually say “Prototyping Windows Phone 7 / 7.1 Applications using SketchFlow” since let it be ver. 7 or 7.1, The way we are going to do prototyping will remain the same.

What is Prototyping and SketchFlow and why to use that? :

Those hardcore developers who are not involved in Designing phase of application usually not much aware of Prototyping and SketchFlow and power of both.Like we see Movie Trailer before actual Movie comes to Cinema Hall, There we get glimpse of Movie and what it will be all about. On the same line, SketchFlow which is the new way of doing Prototypes using Microsoft Expression Blend give glimpse of your application and how it will look like. So being a developer question may come to your mind that why we should use this? Well to answer you, I have already done a series on Prototyping and SketchFlow for Silverlight in past, Those articles will give you more better idea about these,so take some time out and visit those articles as well, you can find them below :

Part 1:

http://pendsevikram.blogspot.com/2009/10/expression-blend-3-sketch-flow-new-era.html

Part 2:

http://pendsevikram.blogspot.com/2009/10/expression-blend-3-sketchflow-new-era.html

Part 3:

http://pendsevikram.blogspot.com/2009/11/expression-blend-3-sketchflow-new-era.html

SketchFlow for Windows Phone :

When you install Expression Blend Designer for Windows Phone or Expression Blend in general you will not get any special or additional Project Template for SketchFlow which you usually get for Silverlight. So I am using the SketchFlow Project Template published on Codeplex site here :

http://wp7sketchflow.codeplex.com/

Creating SketchFlow for your Windows Phone Application :

After installing you will find Windows Phone SketchFlow Project Template inside your Microsoft Expression Blend 4 instance like this :

Once you select this template, Then your design works start,To start with, You can pick few Mockups from Mockup option and also can make use of Controls in sketchflow like this :

For my demo, I am making use of Pivot Control and Pivot Item, you can always connect multiple screens to each other and navigate between them. Designer will look like this :

Once I took Pivot it was looking like this :

If you have multiple screens, you can always track them with the help of SketchFlow Map given with Expression Blend 4 SketchFlow,It will help you to give Macro view of your Design / Prototype, It looks like :

Once you are done with the Design you can Press F5 and Run that in Browser and it will look like this in your Browser :

Inside that, you have various options like Map,Feedback etc. You can give feedback like this :

If above things I mentioned looks difficult for you to understand, Take a look at 5 mins Video below which I have recorded via Microsoft Expression Encoder Screen Capture Utility (Check this post which will guide you how to use that utility)

Using SketchFlow for Windows Phone by Vikram Pendse–MVP Silverlight

The beauty of SketchFlow is that it allows you to export your project as “Word Document” So for that all you need to do is go to File->Export to MS Word option and you are done ! The word document generated by SketchFlow looks like this :

Well, That all today from me, Hope you like this post and I am sure you will try this out and make best use of the same in your Windows Phone 7 Projects. I am going for weekend Bike Ride and will back from there with great ideas for upcoming posts, Till that time you guys enjoy and try this out,See you soon.

Vikram.

Mango : Using DeviceStatus in Windows Phone 7.1

First of all “Thank You” for your wonderful response and comments on my last article on Silverlight Vs HTML5 ,I hope you like the points I raised there and I will soon write more about it in future.Today I am going to share information on DeviceStatus API and how it helps to give more information about Windows Phone Device.

Information :

DeviceStatus is a static class and you can find the same in Microsoft.Phone.Info Namespace. DeviceStatus exposes bunch of static properties and two events of keyboard and powersource respectively. Properties are like below :

• ApplicationCurrentMemoryUsage
• ApplicationPeakMemoryUsage
• DeviceFirmwareVersion
• DeviceHardwareVersion
• DeviceManufacturer
• DeviceName
• DeviceTotalMemory
• PowerSource

and two more boolean properties with events I mentioned above.

XAML :

I have taken TextBlocks to display information as shown above which I am assigning from Code Behind,So XAML will be like this :

<!--ContentPanel - place additional content here-->

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <TextBlock FontWeight="Bold" x:Name="txtApplicationCurrentMemoryUsage" Height="30" HorizontalAlignment="Left" Margin="0,62,0,0" VerticalAlignment="Top" Width="450" />

            <TextBlock FontWeight="Bold" x:Name="txtApplicationPeakMemoryUsage" Height="30" HorizontalAlignment="Left" Margin="0,118,0,0" VerticalAlignment="Top" Width="450" />

            <TextBlock FontWeight="Bold" x:Name="txtDeviceFirmwareVersion" Height="30" HorizontalAlignment="Left" Margin="0,172,0,0" VerticalAlignment="Top" Width="450" />

            <TextBlock FontWeight="Bold" x:Name="txtDeviceHardwareVersion" Height="30" HorizontalAlignment="Left" Margin="2,227,0,0" VerticalAlignment="Top" Width="450" />

            <TextBlock FontWeight="Bold" x:Name="txtDeviceManufacturer" Height="30" HorizontalAlignment="Left" Margin="0,281,0,0" VerticalAlignment="Top" Width="450" />

            <TextBlock FontWeight="Bold" x:Name="txtDeviceName" Height="30" HorizontalAlignment="Left" Margin="6,331,0,0" VerticalAlignment="Top" Width="450" />

            <TextBlock FontWeight="Bold" x:Name="txtDeviceTotalMemory" Height="30" HorizontalAlignment="Left" Margin="6,383,0,0" VerticalAlignment="Top" Width="450" />

            <TextBlock FontWeight="Bold" x:Name="txtPowerSource" Height="30" HorizontalAlignment="Left" Margin="6,435,0,0" VerticalAlignment="Top" Width="450" />

        </Grid>

C# Code :

General Declaration :

DispatcherTimer dptm = new DispatcherTimer();

Constructor :

// Constructor
public MainPage()
{
    InitializeComponent();
    dptm.Interval = new TimeSpan(0, 0, 5);
    dptm.Tick += new EventHandler(dptm_Tick);
    dptm.Start();
    this.Loaded += new RoutedEventHandler(MainPage_Loaded);
}

I have added DispatcherTimer just to get real time memory status and nothing else.

void dptm_Tick(object sender, EventArgs e)
{
     txtApplicationCurrentMemoryUsage.Text = "Application Current Memory Usage : " + Microsoft.Phone.Info.DeviceStatus.ApplicationCurrentMemoryUsage.ToString();
     txtApplicationPeakMemoryUsage.Text = "Application Peak Memory Usage : " + Microsoft.Phone.Info.DeviceStatus.ApplicationPeakMemoryUsage.ToString();
}

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
     WP7DeviceStatus();
}

public void WP7DeviceStatus()
{
     txtDeviceFirmwareVersion.Text = "Firmware Version : " + Microsoft.Phone.Info.DeviceStatus.DeviceFirmwareVersion.ToString();
     txtDeviceHardwareVersion.Text = "Hardware Version : " + Microsoft.Phone.Info.DeviceStatus.DeviceHardwareVersion.ToString();
     txtDeviceManufacturer.Text = "Manufacturer : " + Microsoft.Phone.Info.DeviceStatus.DeviceManufacturer.ToString();
     txtDeviceName.Text = "Device Name : " + Microsoft.Phone.Info.DeviceStatus.DeviceName.ToString();
     txtDeviceTotalMemory.Text = "Total Memory : " + Microsoft.Phone.Info.DeviceStatus.DeviceTotalMemory.ToString();
     txtPowerSource.Text = "Power Source : " + Microsoft.Phone.Info.DeviceStatus.PowerSource.ToString(); 
}

finally this will look like this on Device, As it is running on Emulator hence most of the information will be change after it goes on actual device.

Output :

Remember that its always good to notify user that your application is recording this information if at all your application is storing this information somewhere for some kind of analysis is getting perform on the same or using this data for application. Soon I will be posting full end to end application there I will be showing the exact use of this DeviceStatus.However I hope you will explore it and start using it in your Windows Phone application.As I shown above,it is very simple to implement. I am soon posting some advance tutorials on Mango in coming days. I don’t want to push to much which will create confusion for you, So I am posting basic articles to start with and then we will slowly go ahead at different higher levels.

So try out this API and I will be back soon with some more interesting demos on Mango, There is lot to show and talk on Mango and I am at background exploring lot many things,so keep visiting here as I will be posting some good stuff on Mango in coming days.

Vikram.

Silverlight, HTML5 & Windows 8 : Where we are heading to ?

This is not the post or yet another post on most happening debate of Silverlight and HTML5, This is just a visit to all of them to realize the potential in each and see what we can make best out of it.

I recently attended Microsoft MVP Open Day 2011 organized for South Asia in Microsoft IDC at Hyderabad, India. It was amazing to meet fellow MVPs and we had lot of learning and too much fun. During my visit, I met many glorious minds who are doing amazing stuff for Web and we had some discussions on this topic especially Silverlight and HTML5.By points raised in this discussion and overall stuff came out during my last year Communities and Customer interactions that I am going to put down for you.

Silverlight : Past,Present and Future

I have already posted about my thoughts on Silverlight Vs HTML5 here. Day by day situation is getting worst and confusing, So I thought to write this post actually. Initially even I was confused and frustrated about what happened in last PDC event. With recent Video which came up for Windows 8 added more fuel to the discussion of HTML5 and Silverlight. If you have not seen this video,please do once :

Building “Windows 8”–Video #1

After this video and when there was mention of HTML5 + JS, Fumes started coming up and people’s reactions and anger was spontaneous.

I saw some deadly thread on Silverlight.net forums talking about the same, Check this.

What’s happening to Developers with this cold war of Silverlight & HTML5 :

With the Previews of HTML5 shown by Microsoft with IE9 and IE10 Platform preview and from other vendors, There is a great confusion among people that Microsoft is no longer focusing on Silverlight or they have stop investments on the same. We all agree that HTML5 came up with some jazzy stuff which can do better things with less lines of codes and without plugin.

There are so many things one can pick up for Web Development these days.

• ASP.NET MVC
• PHP
• HTML5 + JS
• Silverlight | RIA Services
• Adobe Flash | Air

JQuery goes well with many of them. If you look at cost wise effective solution, HTML and PHP comes out as a natural choice, If you look at flexibility, Value added features and rich tooling then ASP.NET and Silverlight are good choice. So as far as Web Apps which will get into use via Browser, There is less confusion. For very rich apps either one can go for Silverlight or Flash depending upon the client requirement and business scenarios.

Advantages :

• Silverlight comes here as Advantage due to its Out Of Browser capabilities along with similar availability from Flash/Air but they are clear winner over other languages.
• With Rich Tools like Expression Studio and features like Sketch Flow, Overall experience is way better
• Rich UI, Managed Code, Cross Browser and Cross Platform, Easy Development
• Great Capabilities and features for designing and developing Line of Business applications.
• Support with various new patters and frameworks like MVVM, MEF etc.
• Sandbox Architecture, Secure and lightweight framework

Some Disadvantages : I am not biased here…

• Plug-in based Architecture and dependent on Plug-in
• Cost involved in Tooling
• Not truly Cross Platform (See later section)
• Limitations due to Size of Plug-in and CoreCLR functionalities
• Learning Curve is bit high compare to HTML

Where exactly things are getting wrong ! :

• From IE9 and IE10 Platform Previews, People assumed that Silverlight is near death.Reality : Silverlight 5 is announced with tons of new features,Currently its in Beta stage.
• Microsoft created more Hype of HTML5 while showcasing IE9 and IE10 Preview.Reality: Yes ! Even I was confused that what they are exactly promoting Browser or HTML5 ? but the idea behind showing HTML5 is nothing but to showcase the Power of IE9 and 10 and how better they support HTML5,That’s it !
• HTML5 will replace many things that Silverlight is capable of giving. Reality : Yes ! ..but Wait ! for some of the functionalities and stuff it will really be less effort,I mean what you do in 10 lines of Code in Silverlight,HTML5 might do it in 3-4 lines/Tags or vice versa !
• HTML5 Standardization,OOB and LOB Apps capability.Reality : Till whatever little I heard of HTML5 and its capabilities, Nothing beats Silverlight here in first shot ! HTML5 may ease the overall process of Designing and Developing Business Apps, but the current feature set provided by Silverlight and RIA Services is far way Rich in all aspects.
• Silverlight OOB Vs WPF. Reality : Both have 2 common things, XAML and C# that does not mean they are equal,One is .NET Framework of around 200+MB and one is CoreCLR of around 6MB, Should I tell more differences? I don’t think so ! WPF is more strong especially on Desktop Apps (XBAP Story we all know ! ), So Role of OOB is always different and it was never to compete or replace WPF
• Availability on Tablets with upcoming Windows 8.Reality : Currently Microsoft is saying that you can design and develop Windows 8 Apps with HTML5 + JS (How they are going to give support to build native Windows apps using HTML5 + JS is also a puzzle for me) but during the course they never said that you cannot Design,Develop and Run Silverlight Apps on it or Silverlight is blocked or something. So let’s wait and let’s not waste time in thinking what will happen in near future, Since even if you think still you don’t know what will happen when.

Where HTML5 is getting ahead ?

• There are set of people who do not want Plug-in based development for their own reasons
• There are set of people (end users) who don’t wish to download any plug-in on their machines
• There are set of people who do not wish to invest in heavy tooling and want to get things done quickly with less cost
• HTML5 like its earlier versions runs smoothly in all browsers
• HTML5 support is available in Visual Studio 2010
• This is big one ! : You cannot view,read,watch Silverlight sites in Windows Phone 7’s IE Browser even after Mango Update but you can view,read and interact with HTML5 + JS pages on Windows Phone 7’s Browser.So if you develop Jazzy Silverlight Website and if your customer wish to view that on his Windows Phone 7..I have no words here !
• Silverlight presence on Windows 8 is not clear to anyone since Windows 8 itself is in very early stage,even its pre-preview stage you can say,So it will not good to comment on that at this point of time.

My 0.02$ on this situation :

• As I said in my earlier Silverlight Vs HTML5 post, Customer is King ! Understand his business,Understand his requirements, Match them with technologies you have and go ahead, No matter if you may have to adopt HTML5 if it comes out to be better solution.
• If someone says in some event that HTML5 is future or we have change or shifted our focus that does not mean that Silverlight is dead after completing that statement. So keep your cool ! Microsoft Silverlight Team is working at their best (I am Silverlight MVP and Insider, So who else know better? :) )
• Do not worry about Windows 8 and what will happen, focus on your current development. Even if Windows 8 comes to market, there will be still tons and millions of apps still running on Vista and Windows 7.Everyone in the world will not get Windows 8 Tablet on Day One !
• Learn HTML5,See how you can combine HTML5 with JS and make simpler things more simpler and fast which might take time or painful to do in Silverlight.It will always add value to your Customer and you as well.
• I don’t see any other option but HTML5 if you wish your Browser App to be visible and interactive in browser of Windows Phone 7,So bit hard decision for you here.

Lastly :

Keep faith ! Silverlight is going smoothly and has very good future and it will be shining on various fronts. Take wise decisions before jumping to HTML5 from Silverlight and vice-versa.Do not blindly follow anyone’s opinion (including me) about Silverlight and HTML5. Build PoCs for HTML5 and for Silverlight 5, See what and how best you can give your Customers and End Users. Don’t get confuse between HTML5 and Silverlight,Both are way different in behavior. Feel free to buzz Silverlight MVPs, Silverlight Forums, Local Community Experts if you need any advice on Silverlight or making choice between Silverlight and HTML5, We will always help you at our best and guide you without having any bias in mind.

Why I wrote this post ?

This post is not written because I have no content to write on Silverlight or Windows Phone 7,I will be doing the next Technical post soon.This post is not written to defend or promote Silverlight or HTML5. This post is just written to touch some reality and ground level issues which one should keep in mind instead of getting confuse by what is going on other forums,blogs and news.

This post is never final answer to that endless debate of Silverlight and HTML5 but I am sure it will always give you better views and basic points which are important in future for your decision making.

These points are not already recorded or guided by someone,These are all outcome of my community interaction and what I see,feel and interact with people for Silverlight and Windows Phone 7.

Hope you will think positively over this topic, Take part in Silverlight Vs HTML5 threads and discussions actively but learn out of it and do not get lost in that ! Do not let your Silverlight Weapon down ! Respect compete technologies, Learn HTML5 slowly (I might help you in that via this blog in near future),Take HTML5 change happening with world positively,Give your customer what is best  and make people happy !

Remember ! Future is Bright because Future is Silverlight !!

Vikram.

*Please note that Images and Video used in this post are from Internet found during regular search, Images have their respective copyrights and they are part of this post just for demo/representation purpose.

Mango : How to use RichTextBox in Windows Phone 7.1

Today I am going to talk about RichTextBox, I know you must be having lot of expectations from this RichTextBox. Here I will try my best to make you aware of what will work and what will not work in this short post for RichTextBox in Windows Phone 7.1

RichTextBox control is not new for Silverlightians, We have already seen amazing implementation of the same in Apps developed using Silverlight on top of RichTextBox Control.It is supported in Silverlight ver. 4 & 5 and now in Windows Phone 7.1

Use of RichTextBox is to display text in rich format which includes images and hyperlinks and also various styles of font,font family and sizes in formatted form. You can find RichTextBox control in System.Windows.dll, v2.0.50727 and you can invoke the same using Namespace System.Windows.Controls where RichTextBox Class is inherited from Control Class and it exposes various properties and events.

To add RichTextBox control on your design layout of your Windows Phone 7.1 you don’t need to add any extra references and stuff however you will find that RichTextBox though its part of System.Windows.Controls does not sit in Toolbox. So all you need to do is put a Container as StackPanel and hit Control + Space and pick RichTextBox from intellisense.

<StackPanel>
       <RichTextBox … />
</StackPanel>

It will look like this on your Designer inside Visual Studio :

Please make a kind note that there is no design support for RichTextBox in Windows Phone 7.1, Also no default style present so I used Static Resource, Firstly I fumbled a lot and saw that output was not coming on the phone.

Well, Before I move ahead please make note of this :

• RichTextBox does not have Default Style
• It is not part of your Toolbox but also you don’t need to add any extra references,you can find it in intellisense
• It supports FlowDirect property so you can have RightToLeft and LeftToRight flow of text
• However by default it is in ReadOnly mode so at the moment with current bits you cannot play with it beyond limit
• Hyperlinks and Images can be part of content but since currently this control is in ReadOnly mode hence these features might not add value
• Indic does not getting displayed thought with Mango core platform goes as Silverlight 4. Indic simply breaks..Sorry for my friends in India for this
• Like Silverlight 5 Beta RichTextBox, It does not supporting any OverflowContentTarget so as to push text in next RichTextBox

Lets now see what all we can do with this :

XAML :

<StackPanel>
      <RichTextBox x:Name="txtMyRTBx" ... >
      <Paragraph>
      <Run FontFamily="Lucida Sans Unicode"
       Text="春が来た
                春が来た 春が来た どこに来た
                山に来た 里に来た 野にも来た

                花が咲く 花が咲く どこに咲く
                山に咲く 里に咲く 野にも咲く

                鳥がなく 鳥がなく どこでなく
                山でなく 里でなく 野でもなく"/>
      </Paragraph>
      </RichTextBox>
</StackPanel>

This will look like following on your emulator :

Kindly make note that though its Non English language here or symbolic that does not mean you cannot apply styles. You can very well make such text Bold,Italic and Underline.

To emphasize my bulleted point above about Language rendering capability and FlowDirection, here is a small piece of XAML to showcase Arabic text flowing from LeftToRight :

XAML :

<StackPanel>
      <RichTextBox x:Name="txtMyRTBx" ... >
      <Paragraph>
       <Run FontSize="24" FontFamily="Lucida Sans Unicode" 
         Text="مرحبا! أنا فيكرام من الهند وأنا أتعلم اللغة العربية" />    
      </Paragraph>
      </RichTextBox>
</StackPanel>

and it will look like this on your emulator :

As I mentioned above that you can make Text as Bold Italic and even you can insert Hyperlink, for that here is a small piece of XAML to showcase that area :

XAML :

<StackPanel>
      <RichTextBox x:Name="txtMyRTBx" ... >
      <Paragraph>
          <Run FontFamily="Lucida Sans Unicode" Text=" Windows Phone Developer Tools 7.1 Beta makes significant strides forward, and enables you to build many classes of applications that were not previously possible. "/>
            <Bold Foreground="Yellow">I am Bold !</Bold>
                <Italic Foreground="Green">I am Italic ! </Italic>
                <Underline Foreground="Gold"> Its line under me !! </Underline>
    A first look at the new <Hyperlink NavigateUri="http://www.buildwindows.com">"Windows 8"</Hyperlink> user interface.  
      </Paragraph>
      </RichTextBox>
</StackPanel>

and it will look like this on your emulator :

No wonder that we can always play with it from Code behind, Well if you want to see XAML behind this in your app then you can also use snippet like this :

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
     MessageBox.Show(txtMyRTBx.Xaml.ToString());
}

This will show the Xaml piece of code on screen like this :

So that’s all I want to share on this topic at the moment,Being ReadOnly it pulls me back from lot of ideas but I am sure I will be putting up amazing and crazy samples in coming days, I don’t want to bombard you with <bold><italic> and <Underline> etc tags in the post so I pushed some language support in between which I hope you will like it very much. I know by looking at that language you will surely give try to your local language and build app on top of it. Go ahead and enjoy every bit of this control.

As I said above,I don’t want to waste your valuable time in small small snippets on <bold><italic> so if you still want to dig down on this, you can visit this MSDN Page where you will get all relevant stuff about usage of RichTextBox. So check that out, meanwhile I will go back and come here with some more cool stuff on Mango and Silverlight in coming week. So have a great weekend ahead with Mango and Silverlight 5 !

Vikram.

*Note : I used Translator tools for Arabic and Japanese demos here, I know Japanese because I learn that for 2 years but I do not know anyting about Arabic, So if you find the Arabic or Japanese Text in above demo irrelevant or not grammatically correct then please forgive me since its only used for demonstration purpose.

Mango : DeviceNetworkInformation in Windows Phone 7.1

Hope you already downloaded Windows Phone 7.1 Mango Beta Tools as I mentioned in my last post here

Today I am going to talk about DeviceNetworkInformation API with small demo. This API is exposed with the new toolset and very useful especially when you need to check various things related to Mobile Operator. Let’s have a look in more depth about this API.

What this API does ? :

This API helps you to identify and know more about Network capabilities by which one can identify Availability of Network, Availability of Roaming Data and WiFi Network etc. How to make use of this in your Windows Phone 7.1 app its totally your call and it is dependent on your Application Requirement. So I will leave this “Where to use” part to you.

Structure of DeviceNetworkInformation API :

DeviceNetworkInformation is a static class insider Microsoft.Phone.Net.NetworkInformation namespace having few boolean properties and ResolveHostNameAsync method and NetworkAvailabilityChanged. Since all the properties are static you don’t need to create instance. Properties are

• CellularMobileOperator
  
• IsCellularDataEnabled
  
• IsCellularDataRoamingEnabled
  
• IsNetworkAvailable
  
• IsWiFiEnabled

It resides in Microsoft.Phone.dll(v2.0.50727) which you can find in WindowsPhone71 directory.

General Structure is like this :

namespace Microsoft.Phone.Net.NetworkInformation
{   
    [SecuritySafeCritical]
    public static class DeviceNetworkInformation
    {
        public static string CellularMobileOperator { get; }
        public static bool IsCellularDataEnabled { get; }    
        public static bool IsCellularDataRoamingEnabled { get; }     
        public static bool IsNetworkAvailable { get; }      
        public static bool IsWiFiEnabled { get; }

        public static event EventHandler<NetworkNotificationEventArgs> NetworkAvailabilityChanged;

        public static void ResolveHostNameAsync(DnsEndPoint endPoint, NameResolutionCallback callback, object context);
        public static void ResolveHostNameAsync(DnsEndPoint endPoint, NetworkInterfaceInfo networkInterface, NameResolutionCallback callback, object context);
    }
}
Now Let’s build one small App on top of this API, So here are steps :

How it will look like :

*Please note that Images used in this post are from Internet found during regular search, Images have their respective copyrights and they are part of this post just for demo purpose.

XAML :

<!--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="Explore .NET With Vikram Pendse" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Network Info" 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">
            <Image Source="GSMNetwork.jpg" Opacity="0.3" Height="607" HorizontalAlignment="Left" Margin="-2,-6,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="458" />
            <TextBlock FontWeight="Bold" x:Name="txtMobileOptr" Height="30" HorizontalAlignment="Left" Margin="0,104,0,0" VerticalAlignment="Top" Width="450" />
            <TextBlock FontWeight="Bold" x:Name="txtNetworkAvail" Height="30" HorizontalAlignment="Left" Margin="0,158,0,0" VerticalAlignment="Top" Width="450" />
            <TextBlock FontWeight="Bold" x:Name="txtCDEnable" Height="30" HorizontalAlignment="Left" Margin="0,212,0,0" VerticalAlignment="Top" Width="450" />
            <TextBlock FontWeight="Bold" x:Name="txtRoaming" Height="30" HorizontalAlignment="Left" Margin="2,269,0,0" VerticalAlignment="Top" Width="448" />
            <TextBlock FontWeight="Bold" x:Name="txtWiFi" Height="56" TextWrapping="Wrap" HorizontalAlignment="Left" Margin="0,325,0,0" VerticalAlignment="Top" Width="450" />
            <Image x:Name="imgWiFi" Height="150" HorizontalAlignment="Left" Margin="228,431,0,0" Stretch="Fill" VerticalAlignment="Top" Width="200" />
        </Grid>

So on designer layout in Visual Studio it will look like this :

C# Code :

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
     GetDeviceNetworkInformation();
}

public void GetDeviceNetworkInformation()
{
     txtMobileOptr.Text = "Your Mobile Operator is : " + DeviceNetworkInformation.CellularMobileOperator.ToString();
            
     if (DeviceNetworkInformation.IsNetworkAvailable)
        txtNetworkAvail.Text = "Network is Available";
     else
        txtNetworkAvail.Text = "Network is Not Available";

// Similarly you can get and set other properties to Textblocks

}

Output :

Now if you need to make it more Jazzy you can put icons and make it more attractive and friendly. For example, I have done for Wi Fi, I am showing Wi Fi enable – disable by displaying PNG file like this :

         

I know the images used here are bit dull,but idea is to show how you can enhance the app by such ideas and code for this is very simple like this :

if (DeviceNetworkInformation.IsWiFiEnabled)
{
    txtWiFi.Text = "You are connected to WiFi Network";
    Uri uri = new Uri(@"wificon.png", UriKind.Relative);
    ImageSource imgSource = new BitmapImage(uri);
    imgWiFi.Source = imgSource;
}
else
{
    txtWiFi.Text = "You are not connected to WiFi Network,Check your WiFi Settings and Retry";
    Uri uri = new Uri(@"wifidiscon.png", UriKind.Relative);
    ImageSource imgSource = new BitmapImage(uri);
    imgWiFi.Source = imgSource;
}

So this is how you can make use of DeviceNetworkInformation in your Windows Phone 7.1 Application, As I mentioned earlier that how you will use this is totally your choice and depends on business scenario, But next time when you need all Network related information inside your app, you don’t need to search, The solution is already with you with this API. See you then with more good stuff on Mango aka Windows Phone 7.1 in coming posts.Keep buzzing over emails and in comment section as usual.

Vikram.

Mango : What’s new in Windows Phone 7.1

Just back from lovely Microsoft MVP Open Day 2011 at Hyderabad,Andhra Pradesh in India conducted at Microsoft India Development Center (Microsoft’s next biggest center after Redmond and some amazing people work here !) We always see and talk about success stories of Redmond people, but take a time and see and check out what an amazing contribution Indian folks doing at Microsoft IDC. Hats off ! and hearties congratulations to them and Microsoft Windows Phone 7 Team.

[Mighty Indian MVPs at Microsoft India Development Center,India]

Whatsoever ! Mango is King of all fruits and India is the only best place in universe to get it ! Hope you can read between the lines !

Mango :

Codename “Mango” is a revolutionary and major update of Windows Phone 7 Platform.

The Windows Phone team announced the release of the Windows Phone Developer Tools for Mango yesterday. We all eagerly waiting for Mango and finally it comes to us as Beta Tools in first step.

Download Tools :

From Web :

http://www.microsoft.com/downloads/en/details.aspx?FamilyID=77586864-ab15-40e1-bc38-713a95a56a05&displaylang=en

ISO :

http://go.microsoft.com/fwlink/?LinkID=219401

Few very important points to remember :

• As per installation notes:Windows Server®,Windows® XP and Virtual machines are not supported.
• Visual Basic is now fully integrated into Windows Phone Developer Tools 7.1 Beta so you must uninstall Visual Basic for Windows Phone Developer Tools 7.0 if you have installed already.
• Windows Phone 7.1 Tools will allow you to create Windows Phone 7.0 Apps, Target platform feature like we have in Silverlight, Check this :

• Application created with Windows Phone 7.1 will not run on NoDo Device, so hold your breath till the actual update hits the phone,Emulator is so powerful so keep your pain points aside.
• It is not so recommended to use Windows Phone 7.1 Tools to create Windows Phone 7.0 apps for Marketplace.It may break badly.
• Installed bits might hit Expression Blend 4, I am personally investigating this issue so not much I can share at the moment.See this what happened to my Blend 4 :

I am running Windows 7 x64 Ultimate with Visual Studio 2010 Ultimate along with SP1, I did not uninstalled anything and seems that my Silverlight 5 Beta bits are working well, I will share more to you if I find something is breaking up. But with this info I think you are good to go.

What’s New in Mango :

Some of the top features :

• Silverlight 4 as core platform
  
• IE9 web browser control
  
• Networking / sockets for communications
  
• Local SQL database for structured storage
  
• Live Tile enhancements: use of back of tiles and ability to
• update Live Tiles locally
  
• Deep linking into apps from notifications and Live Tiles
  
• Background processing
  
• New profiler and emulator for testing
  
• Use of Silverlight + XNA together
  
• Additional sensors; direct camera access, compass & gyro
  
• Fast application switching
  
• Access to calendar and contacts
  

There is actually a big list and instead of giving you more neck pain to scroll and read, I will suggest you to visit following link of MSDN where all new information about Windows Phone 7.1 is available.

http://msdn.microsoft.com/en-us/library/ff637516.aspx

Already downloaded tools and want to check stuff ? :

This is my first post on Mango so I will be dropping few good examples here from next post, till the time if you want you can check few cool Code samples on Windows Phone 7.1 here :

http://msdn.microsoft.com/en-us/library/ff431744%28v=VS.92%29.aspx

Some New Project Templates with Windows Phone 7.1 :

Check this out new templates as :

• Windows Phone 3D Graphics Application
• Windows Phone Audio Playback Agent
• Windows Phone Audio Streaming Agent
• Windows Phone Task Scheduler Agent

I will soon take a stab at each one and explain it to you what each one does and when to use what template.

New Look of Windows Phone 7.1 Emulator :

The new emulator is amazing and gives feel of Mango Update on Phone, In coming days I will be surely giving more insights on that but to start with take a look how it helps you to test your location based apps and Acceleronometer apps :

1. Acceleronometer Support :

2. Location Support :

So that's all I have to say in this quick post on Mango aka Windows Phone 7.1 Beta Tools, Hope you got the glimpse of what coming in big way ahead, I will be posting few good stuff in coming days, Till the time you guys download bits and get ready,I’ll be back !

Vikram.

Multiple Window Support in Silverlight 5

So much talks about Multiple Window support in Silverlight 5 which made available in beta version around various Silverlight blogs and forums.I am putting my few thoughts here on this feature.

The basic idea behind this feature is host stuff across multiple windows,remember the good old days of MDI forms in Visual Basic 6 days? well its not I will say replica of but its of similar kinds.

The bookish meaning of Multiple Window support is :

The ability to create an application that can have additional top level windows other than the single window that's opened for a Silverlight Out of Browser application

Game starts with namespace System.Windows.Window and it looks like following :

#region Assembly System.Windows.dll, v4.0.30319
// C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\Silverlight\v5.0\System.Windows.dll
#endregion

using System;
using System.ComponentModel;
using System.Runtime.InteropServices;
using System.Security;

namespace System.Windows
{
    // Summary:
    //     Represents an out-of-browser application window.
    public sealed class Window : DependencyObject
    {

        //… some code

     }

}

It’s a sealed class inherited from Dependency Object and as class level xml comment shouts, its an OOB and Work only in Elevated Trust Applications.

You can achieve Multiple Window like this :

Window tearOffWindow = new Window();
//Once a Window has been instantied, one can
//set its initial property values    

tearOffWindow.Height = 300;
tearOffWindow.Width = 400;
tearOffWindow.Top = 24;
tearOffWindow.Left = 30;
tearOffWindow.Title = "Tear Off Stack Panel";
tearOffWindow.Content = mnp.movUIElement; /*Set Content to someFrameworkElement Obj*/;

//Once all the initial properties have
//been set, set the Visibility property
//to 'Visible' to display the Window
tearOffWindow.Visibility = Visibility.Visible;

It will look something like this :

Like this you can create instance of window and put stuff on that whatever you feel appropriate to your application or per requirement. Note that once you close main window another window instance will be closed as well. Its very ideal feature for many Line of Business applications as well. So you should give try to this one today. I know there will be lot more can be done with this,but for the moment I am restricting myself,In upcoming posts I will share more with some demo apps and how you can use this feature at best.

Issues I observed with Multiple Window :

1. Background color/Background property Mystery :

While working I came across that there does not exists any Background property via code which I find strange personally.

2. “Black” Background color :

If you do not set any background color to your UIElement which you are going to tear off,It applies Black color automatically. Some videos and blogs says this is “By default” or “Automatic” but I don’t believe on this,how it can be “by default” since if I don’t apply any background color it should be whitish as usual.This I personally find very strange.

3. Setting WindowStyle as “BorderlessRoundCornersWindow” :

Though it works for parent window well,I will not say this as bug or limitation but if its not expected then they should have thrown compile time error to prompt that it cannot be mixed with Multiple Window support feature but it throws exception here  :

Well, despite of these small issues which I think either might be resolve in coming bits or can be carry ahead ignoring but I feel that I should share this with you so that while designing app based on this Multiple Window feature you will be in good position with possible problems and solution.

I will soon post more deep dive article with some more good examples and features but now my mind is in Hyderabad city where 100+ South Asian MVPs are coming together for Microsoft MVP Open Day 2011 .. I will be traveling there for few days..So see you soon with more good stuff from May end onwards.

Vikram.