Sunday, July 25, 2010

Silverlight On Mobile : 3D on your Windows Phone 7 with Silverlight

With my last “Hello World” post, I am sure you must be in position to write some basic apps for your Windows Phone 7. Now we already spend some time to explore basics of Phone and other Development Environment. Now from this article onwards let’s try to look further.

3D in Silverlight is nothing new to us now since it has been made available to us by Microsoft from Silverlight Version 3. Since most of the features of version 3 are well supported on phone, 3D is one of them. Open a new Windows Phone Project and Open a Blend Instance to design your app. My 3D app look like this :

Blend3D


To demonstrate 3D, I have a simple Stack Panel over here and I have put one cool Super Mario Image inside that (Image is taken from Internet and have its own respective copyrights). To showcase 3D, I have taken 3 scrolls which will allow us to rotate the Image along X,Y and Z axis. Initial values for all of the three will be 0 like this :

<StackPanel.Projection>
                <PlaneProjection
                   RotationX="0"
                   RotationY="0"
                   RotationZ="0"/>
</StackPanel.Projection>

3D in Silverlight is mainly achieve by “Plane Projection” class under System.Windows.Media namespace.Plane Projection Class gives you certain Methods and Properties, Plane Projection helps you to set orientation across X,Y and Z axis with properties like RotationX,Y and Z respectively.Now UIElement have property as Projection. You can even set the Center of Rotation with CenterOfRotationX,Y and Z property respectively.

XAML Code :

<Grid x:Name="ContentGrid" Grid.Row="1" Grid.ColumnSpan="5" Grid.RowSpan="3">
           <TextBlock Margin="22,0,0,0" Foreground="Black" VerticalAlignment="Top" HorizontalAlignment="Left" Width="31"><Run Text="X:"/></TextBlock>
           <Slider Margin="8,7,0,0" x:Name="Slider1" Maximum="360" Minimum="-360"  ValueChanged="Slider1_ValueChanged" Height="78" VerticalAlignment="Top" HorizontalAlignment="Left" Width="201" />
           <TextBlock Margin="120,42,0,0" Foreground="Black" VerticalAlignment="Top" HorizontalAlignment="Left" Width="25"><Run Text="Y:"/></TextBlock>
           <Slider Margin="106,46,173,0" x:Name="Slider2" Maximum="360" Minimum="-360" ValueChanged="Slider2_ValueChanged" Height="80" VerticalAlignment="Top" />
           <TextBlock Margin="215,79,0,0" Foreground="Black" VerticalAlignment="Top" HorizontalAlignment="Left" Width="24"><Run Text="Z:"/></TextBlock>
           <Slider Margin="202,86,91,0" x:Name="Slider3" Maximum="360" Minimum="-360" ValueChanged="Slider3_ValueChanged" Height="80" VerticalAlignment="Top" />
           <StackPanel x:Name="MyStack" Margin="0,232,0,0">
               <StackPanel.Projection>
                   <PlaneProjection
                  RotationX="0"
                  RotationY="0"
                  RotationZ="0"
                  />
               </StackPanel.Projection>
               <Image x:Name="MyImg" Source="real-mario-face.jpg" Stretch="UniformToFill" Height="418" Canvas.Top="194"/>
           </StackPanel>
       </Grid>
   </Grid>

C# Code :

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

namespace Demo_3D_Home
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void Slider1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            ((PlaneProjection)MyStack.Projection).RotationX = e.NewValue;
        }

        private void Slider2_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            ((PlaneProjection)MyStack.Projection).RotationY = e.NewValue;
        }

        private void Slider3_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            ((PlaneProjection)MyStack.Projection).RotationZ = e.NewValue;
        }
    }
}

Once you execute application,It will look like this on emulator :

MarioDesk

Now once you start scrolling for corresponding X,Y and Z axis, You will get following outputs for X,Y and Z respectively.

MarioXMarioYMarioZ

So, This is how you can implement 3D on your Windows Phone 7 with the help of Silverlight on Mobile. In reality you can plug this 3D feature on your phone for some Object Representation or Images.This module can be further enhance by adding some animations to it. So its upto your creativity now, Sky is the limit !

Hope you like this feature and I assume you will start putting it in your apps. I am soon covering some more and odd features and then I will go for DataBinding and Service calls etc. which falls in Business Applications category.

Vikram.

Saturday, July 24, 2010

Silverlight on Mobile : Write your first Windows Phone 7 Application with Silverlight

Hi, I am back after a small break in between, well the gap I took just because the moment I started this series, There was a launch by Microsoft for Windows Phone 7 Tools, Yes ! I am talking about Windows Phone 7 Beta Tools which you can download right away. However while moving from CTP to Beta, your journey might not be safe and might go with lots of twist and turns,My fellow Community friend Mayur Tendulkar posted a nice solution here, do check that out so as to ease installation process.

Till the final bits comes to us or device or both, I will be using Beta version of tools henceforth,Whatever is new in Beta I will explore and explain here as we progress with applications.Beta tools will take pain to have Project Templates and Blend 4 for Windows Phone 7 on your machine.Today we are just greeting ourselves by saying “Hello World” and in coming posts we will go much more in depth.

Your first Windows Phone 7 Application :

I have already talked a lot about Emulator,Settings and Configurations etc. So today we will start application building via Visual Studio 2010. So Open your Visual Studio 2010 Instance. File->New Project, You will be able to see new template like this :

Prjtemp

There are by default 3 types of Projects under Silverlight for Windows Phone as :

  • Windows Phone Application – For Normal applications
  • Windows Phone List Application – Provides Navigation Support
  • Windows Phone Class Library – Typical Class Library for WP7

Once you choose “Windows Phone Application” you will get following instance where on left you will be able to design with controls on your Phone like page and on right hand side you can put your XAML,Something like this :

IDE

Typical Project Structure will be like this :

slnexplore

In my coming posts, I will be talking on each mini things in WMAppManifest.xml, Other png files and SplashScreenImage.jpg. At this moment, just understand that while loading your application on emulator, SplashScreenImage will be shown on device. We will soon discuss how you can more customize that experience for your application. To have a flavor of Expression Blend 4 for Windows Phone 7, Let’s put some Button and Textbox via Blend, So just Right Click on MainPage.xaml and choose “Open in Expression Blend” option.You will see following screen in Blend

Blend4WP7 

Do I need to tell more about capabilities of Blend? I think we already done with it in past posts. So lets write C# code and execute our First Application, It will now look like this :

 

DashboardApplicationmsgbox

In the leftmost screen you can see your application listed (See the Highlighted text as “Demo_Hello_World”), Second screen shows the initial screen of application with button and the third screen shows final output. So, your first ever Windows Phone 7 application is Ready !

XAML Code :

<!--TitlePanel contains the name of the application and page title-->
       <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">
           <TextBlock x:Name="ApplicationTitle" Text="Explore .NET with Vikram Pendse" Style="{StaticResource PhoneTextNormalStyle}"/>
           <TextBlock x:Name="PageTitle" Text="Hello World !" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
       </StackPanel>

       <!--ContentPanel - place additional content here-->
       <Grid x:Name="ContentGrid" Grid.Row="1">
           <Button Content="Greetings !" Margin="128,252,116,254" RenderTransformOrigin="0.5,0.5" Opacity="0.995" CacheMode="BitmapCache" Click="Button_Click">
               <Button.RenderTransform>
                   <CompositeTransform Rotation="-0.271"/>
               </Button.RenderTransform>
           </Button>
       </Grid>

C# Code :

using System.Windows;
using Microsoft.Phone.Controls;

namespace Demo_Hello_World
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            // TODO: Add event handler implementation here.
            MessageBox.Show("Welcome to world of Windows Phone 7","Windows Phone 7 Console",MessageBoxButton.OK);
        }
    }
}

I know this is very very basic example but don’t worry advance examples are coming from right next week, Till that time get comfortable with Tools and IDE, See you next week with some more exciting applications of Silverlight for Windows Phone 7

Vikram.

Sunday, July 11, 2010

Silverlight on Mobile : Get Ready with the Tools and Environment

I hope with my last article you are in position to Identify and define the term “Windows Phone 7” in this large space of Mobile devices. In last article we talked about overall Mobile scenario and how Windows Phone 7 is going to place in this large business market of phones. If you feel that I am being MVP trying to say that the phone is good then its not me alone but whole world here is part of this buzz, Don’t believe this? then visit : http://www.windowsphone7.com/buzz/

As we discuss in previous article that we can carry our Silverlight skills to develop applications for Windows Phone 7, though the statement is true, we still need to have certain prerequisite tools to be in place, So I request you to get those tools and be ready with the setup from here : Windows Phone Developer Tools CTP – April Refresh , We also need to keep this in mind that Version of Silverlight on Windows Phone 7 is a nearby subset of Version 3 of Silverlight, So the applications you have develop with Version 3 of Silverlight should work on Phone 7, Well due to Core OS Platform of Windows Phone 7 and .NET Compact Framework there will be some more new things as add-on to your application but basic applications build for Desktop should be in position to run on Phone 7.

Once you install Tools smoothly then just make sure you have XDE and Emulator in place like this :

SDK XDE x:\Program Files\Microsoft XDE\1.0 will be holding XDE.exe file. XDE file will allow you to run Emulator via your Command Prompt. 4 Image files there represents default skin of your phone. WPSplashScreen Image file is a loader/Splash Screen Image used. In coming days I will surely let you know how we can play around with these. WM7_Skin.xml file hold the default display location,Height and Width of the inner content area of phone like this :

wm7skin

As I said in earlier paragraph, XDE file is responsible to load emulator via command prompt. It comes with various switches so as to meet your needs, So you can see different options like this :

cmdlineOnce you run your emulator instance either from command line or from VS, it will look like this :

Dashboard  Menu EmulDisplay

On the left hand side you can see the Phone with 3 buttons and One menu which is shown in the middle image. If you observe carefully the middle image, you will find that Top 2 buttons are Close and Minimize, Next 2 with Arrow are actually allows you to Rotate the Device in 90 Degree angle. Other button will help to resize emulator and bottom most will allow you to configure with various display option as shown in 3rd Image, There is a Custom option as well to adjust your display of device to cater your screen resolution demands.

Windows Phone 7 have 3 buttons (Beside Camera and Power, I think in future as per vendor/Mobile Phone manufactures it may vary) as “Back”,”Start” and “Search” like this :

muttons 

I will be using Microsoft Visual Studio 2010 Express for Windows Phone to Design and Develop Windows Phone 7 App.For all the necessary tools and environment I have already shared the download link above.

ExpressWP7Environment will look like this :

devenvironment

Once you write some code and hit F5, Emulator will load and your application will get hosted. Well, I discuss few things about loading emulator from command prompt, You may have question in mind that will I be able to load multiple emulators while one is running, Answer for this is “yes”, I mean I see this scenario from Networked based application where one app/device is talking to other. Right now let’s now talk more on this since we are yet say “Hello World” but if in future we need something like this, then all you need to host your “WM70C1.bin” file via XDE like this :

C:\Program Files(x86)\Microsoft XDE\1.0> xde “C:\Program Files (x86)\Microsoft SDKs\WindowsPhone\v7.0\Emulation\Images\WM70C1.bin” and it load another instance of emulator and it will look like this :

runviacmd 

Well if you stuck up at some point in emulator or have some odd issues then you can check this on MSDN Forum thread.

I hope this much of basic information is more than sufficient to gear up ourselves for a long drive ahead with application development for Windows Phone 7, So next time we will say together “Hello World” and try to start looking into other various development related aspects. Hope you will like that one as well.

Vikram.

Wednesday, July 7, 2010

Silverlight on Mobile : Getting started

Past,Current and Future of Mobility :

Mobile as a “Technology” is not new to us, Mobile is our lifeline we can say, In this part of world, India, There is a tremendous growth in Mobile Subscribers and each year after year it is setting new benchmarks. I remember the time when Mobile phones were owned by Rich guys only since the service was too expensive.Government policies and involvement of Indian and Multinationals and their contribution, Now Mobile is in hands of Common man. I don’t want to spend time on Pros and Cons of mobility, But whatever I observe, There is not much awareness about the “Power and Potential” of these Mobile devices due to lack of awareness of Tools and Technology to develop applications for Mobile , Mobiles now changing the way we live, they are changing world economy with applications like M-PESA for example,World is at our fingertips now !

Microsoft and Mobile :

The power of .NET Framework already shown its strength to build Next Gen Apps to the world, .NET Compact Framework is what you can say Heart and Brain for Windows Mobile. I know there are others who are flying high in the same sky like Symbian, iPhone, Android etc. But after good success of .NET Compact Framework on Windows Mobile devices, now its time for Silverlight on Mobile to outshine and fly more high than other players. Offcourse strength of Windows Phone7 Hardware,Software and XNA Games Framework will be there along with it.

The Windows Phone 7 :

Well, lets not get into why they kept name as “Windows Phone 7” or how it is similar or different from other phones in functionality and behavior, There are already forums/blogs available on this to fire the forest up ! ;-) .. Let’s spend some quality time to understand what is the “Windows Phone 7” all about and how developer and enthusiast like you and me can develop some useful applications for this with using our current skills of Silverlight.

windows_phone_7_live_tiles

Windows Phone 7 is the upcoming Operating System made by Microsoft for Windows Mobile devices announced recently and demonstrated to millions in annual MIX event.

Whatever research I done on this allows me to say that current series of Windows Mobile devices does not comply the Hardware-Software prerequisites set by Windows Phone 7, So it will be altogether new generation of Devices with brand new OS. At the moment, I do not have any physical device to talk on, So I will not talk more on “How many buttons it will have”, “What Megapixel Camera it will have” and stuff like that.

Silverlight on Mobile :

Just to let you know, beside Windows Phone 7, Silverlight is now also available on Nokia Devices i.e S60 Platform which includes Nokia 5800 XpressMusic, Nokia N97. Read more on Silverlight on Nokia devices here : http://www.silverlight.net/getstarted/devices/symbian/

symbian-silverlight

If you are interested in Deep dive Architecture, I will then suggest you to have a look at Abhinaba’s articles. [ Abhinaba Basu is a extremely talented guy in the Windows Mobile space, he works for Microsoft India and I got chance to interact with him in person at Microsoft India Hyderabad Campus when I was there for South Asia MVP Summit 2010 early this year], Refer :

For Nokia :

http://geekgyan.blogspot.com/2010/03/silverlight-on-nokia-s60-platform.html

For Silverlight on Windows Phone 7 :

http://www.silverlight.net/getstarted/devices/windows-phone/

What’s next ? :

With the basic understanding of Windows Phone 7 here, from next article onwards, we will start saying first “Hello World” followed by other various aspects of application development for Windows Phone 7, So keep your Coffee/Beer ready, lot more to come here soon…

Vikram.

Friday, July 2, 2010

I am Silverlight MVP

Dear Visitors,

Today I am very much happy to share with you all that, I awarded as Microsoft MVP in Silverlight for year 2010-2011.This is my third year of MVP and I am so much happy to win this awards for second time for Silverlight Technology.

Year 2008-2009 was full of difficulties and challenges on each step, Global IT Slowdown made deep impact on everyone, In that era when all my work and assignments got dried out and I was on what they call as “Bench”,That point of time I was ASP.NET MVP and in that IT Slowdown time I had nothing great to do but just go to office and sit on chair. IT Slowdown may be a just another news for others but me and my friends in IT really saw that monster very closely.

IT Slowdown went bad for many of us ! I mean you go to office and you never know when next Cubic will become Empty ! or you might see your friend coming out of Main door with mixed feelings on his/her face. Sad things happened ! I also lost my job for few months in that era.Though impact was hard but the passion towards Microsoft was not that easy to break. Passion wins over IT Slowdown.

I started looking into Silverlight from its version 1. Believe me or not, It took hell lot of time in initial days just to figure out who things work here especially since I am from Client-Server arena. Slowly with version 2 I attracted more towards it and then I started putting here on blog, After release of first bits of version 3 I became very serious about it and given all my efforts towards it and finally got the MVP title in Silverlight and story is still going on...

mvplogo

Life of Microsoft MVP in general… :

There are lot of misconceptions about MVPs in people..Nothing like that we come with 2 brains etc. We do our 8 hrs “Paid” job with passion,We do work overtime and on weekends in office, We too get screwed up by Boss ! ;-) .. We do all the things which all others do like spend time with Family,Watch Movies and TV, Visit Hard Rock Cafe with friends and Dance there with Glass of Beer ! ;-) ..Play Cricket,Football, Go for long Bike Ride..get ticket for speeding from Police ! ;-) etc etc..so what makes us “Microsoft MVP” ? Here are few bullets !

  • Love and Passion towards Microsoft Technology/ies
  • Speak what you like and don’t like about specific product
  • Connect with community better
  • Spend quality time with Community, Partners, Investors, Business fellows to understand their practical problems
  • Generate awareness about Latest Microsoft Products in Community (This is a big job we do ! )
  • Understand other Technologies and their pros and cons over current products (e.g Javafx,Flash,Air ..Muhaa haaa )
  • Contribute back to community via Blogs, Forums, Newsletters,Online and Offline Sessions etc.
  • Bridge the gap between Microsoft,Microsoft Products and People (Another big job we do !)

This all we do in our normal life, This is not like we decide something and do, Its so natural that even we don’t feel pain of doing these things ! :) All above we do just naturally and with full of passion without any materialistic intentions and hence Microsoft each year recognize and evaluate us on basis of work we do over year and give us award saying “Thank you” :)

Want to join us, here you can start looking at :

https://mvp.support.microsoft.com/

India,Microsoft India and Silverlight :

Humm..Things are much better now compare to Year 2008-2009. India is a big Hub for IT and tons of people are working in Web Development. From my visits/Interactions with Customers, Partners and Communities in India, I see that lot of people now very curious about Silverlight and already started building apps on top of it. Windows Phone 7 is like fuel in fire ! :) ..There is so much excitement in the Indian community over this since there are millions of Mobile subscribers in India, Silverlight on Mobile, Silverlight in Sharepoint, Silverlight OOB are 3 big buzz words I heard in all top companies Canteen these days ;-)… That shows the growing adoption rate of Silverlight, Learning and Implementing too.

Microsoft India done a wonderful job in this area, I am very much thankful to Product Teams sitting in Microsoft India Development Center (MS IDC) for their continuous support to community for Silverlight and Windows Phone 7. Scenario is really getting amazing day by day.

I wish all Universities/Colleges who are into IT/Computers should start encouraging students to learn and explore Silverlight like they are doing for .NET Framework and ASP.NET. I am sure that the hidden Silverlight talent will soon outshine from there ! :)

Wassup for 2010-2011? :

So what will I do over next year here..Silverlight only? Or Silverlight + something more ?

As someone said “Picture speaks 1000 words”..here I go :)

windows_phone_7_live_tiles

Thanks once again for all your Love,Feedback and support over last few years and wish this will continue over coming years too..See you soon :)

Vikram.