Building your First Windows Metro style Application using Visual Studio 2011 on Windows 8

 

For a while keeping aside the hot topic of  “Silverlight is dead”,I am coming back to normal activities and doing part of that I am putting a small post here just for those who have installed Windows 8 and wondering how overall things will work on their Windows 8 box.

I assume here that you have done with Windows 8 Developer Preview setup,For me,I installed Visual Studio 2011 as a separate installation.Frankly, it was not that smooth compare to Windows 8,it crashed 2-3 times.Well,with the assumption of successful installation, lets move ahead with our first “Hello World” kind of a Metro UI Application.

Our First Metro UI style App using Visual Studio 11 on Windows 8:

Once you installed Visual Studio,you will find the shortcut of the same on your Metro UI interface which is default in Windows 8 Developer Preview, so by clicking on that it will throw you with the Visual Studio 2011 IDE in Desktop mode which is very similar to your normal Windows Desktop in Windows 7

Once Visual Studio 2011 is open,Click on File>>New Project

Please see in the above snap, The one which is in red circle is your Windows Metro style Project template.Since this our first post,so I am not pushing too much content on you and leaving you in a state of confusion,so for other project templates in this category and what they do,that I will share in upcoming posts.So after selecting this template and giving a relevant name to your app, Click on OK to move ahead.

Visual Studio 2011 :

There are significant improvements in IDE and new features are there but right now I am purposefully not pulling them here just to keep our focus on App.So if you are familiar with Visual Studio 2010 then you will not struggle much with the Designer and Code Window.

Our First App using RichTextBlock :

As you know that XAML is the backbone of Metro style app,So I will be using XAML as UI and C# to code. I will talk about other ways to code using other languages in my upcoming posts.

XAML :

Make sure you set x:Name to the RichTextBlock control (which is very similar to our Silverlight 5 RichTextBox control)

C# Code :

So on visibility of each RichTextBlock I am controlling the UI via Button Click event. Idea is to show Japanese,Arabic and English content on each of the button click and similarly hide other two at the same time.

Output :

Oh wait ! what in case I don’t have Metro UI or for that matter I am running Visual Studio 11 on other box then?, well life is good ! you have a build in and fully functional simulator of Windows 8 which is very realistic in look and feel and behavior of Windows 8 Metro UI,so you will find that option once you wish to start debugging the application like shown here :

and now you are all set to see the output like shown below ! :

You can see shortcut of your Metro UI Style App on the Windows 8 Metro Desktop like this :

You can do much more configuration related settings with package.appmanifest file inside your project,it will help you to get settings like below :

Since this is our first app, I am not going into much more details on the each of the sectional tab shown above, that I will address in my upcoming posts, so now let’s see the final output :

Yahooo ! Our first ever app is ready on Windows 8 using Metro UI style inside Visual Studio 2011. Once you click on each of the button,you will see some language specific text. Well though its very basic, but idea behind is to get familiar with the environment, In upcoming post, I assure to have much more high level apps.

Something about Simulator :

Like Windows Phone 7 emulator, you can rotate this Tab and see app from various angles. It also provides you option to interact app with Mouse and even using Touch like I have shown in the second diagram.

       

 

In this way, its very useful and fully functional simulator and helps us a lot and saves lot of efforts,It gives best feel of your app on Windows 8 environment.

So, This is our first “Hello World !” kind of Metro UI style app using Visual Studio 2011 on Windows 8. I hope after reading this post, you will be in position to understand overall environment,better you that, so that you can easily understand my upcoming posts.

Do try this out, Build a small app,meanwhile I will go back to Windows 8 and Visual Studio 2011 and will try to build more solid app integrating some more good,jazzy business related stuff.So stay tuned ! keep visiting here for more !

Vikram.

Silverlight is dead…and our thought process too !

 

People says that when you dream about someone who you see going to die in your dreams,In reality he/she lives a long ! ..Something similar is going for Silverlight these days.More people saying bad about and more the core platform is growing better day after day.

My post here today is not to shout that I am Silverlight MVP and We are not dead but I just want to trigger a positive thought process so that we will not go dead with current “Silverlight dead” discussions in near future.

Just to clarify :

Thought I love Microsoft technologies a lot and especially Silverlight that does not mean that I am Fanboy and in this post I am defending something. I have equal love and passion towards other MS and Non MS technologies as well. From last 2 yrs I am working in IBM and executing large WPF Projects and also using some Open Source tools and technologies.

I am not employee or decision maker at Microsoft nor I am a complete Windows 8 Master or Metro UI Geek etc. So following stuff is purely based on my personal analysis, Being a community chap I am always open for feedback and do correct me if something I mentioned here is totally wrong.I would love to hear that and add more to me.

“Silverlight is dead !” ..The new story on Internet … :

This all started in last PDC when Microsoft showcase strength of HTML5 + JS on their own platform.I know even initially I was also wondering why they are doing such hype of this platform but then realize and understood entire Development Ecosystem.

I have also wrote a biggie article on that situate here and got positive response from all of you :

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

So before making any final thought,do read that and this article..after that its your call !

Coming back to the subject :

Build event and reactions after keynote :

Few points I would like to take up for discussion -

• Why people want every time a commitment from Microsoft Senior representatives like Scott Gu or Steve Ballmer to come on stage and explicitly say that “Silverlight is not dead !!” ? – Same for WPF and other technologies.
• Unless one technology is not dead, New and enhanced things never comes up..I mean do you still want Visual Basic 6 if I show you strength of VB.NET or WPF for that matter. Why people are not shouting when Classical ASP,VB6 etc gone dead ? Because there was a need of .NET/WPF somewhere and that’s why they are present today. Same is the case for HTML5,Metrofy Apps and WinRT

Windows 8 as OS and Windows 8 Tablets :

• Today I installed Win8 Dev Preview on my Dell XPS and frankly,with Mouse it does not give any feel like it gives on Touch supporting devices.But UI is amazing rather outstanding !
• There is a Desktop mode which is similar to normal Windows,So MS is not forcing you to be on Metro all the time,you have choice !
• Microsoft is now head to head with other vendors especially to compete devices like iPad.
• There are still millions and billions of Windows XP,Windows 7 Users. It takes years to migrate OS for big organizations.(My employer IBM India is still on Windows XP).So entire world will not change in one night time after complete Windows 8 is available.

Some random thoughts on HTML5 Native Apps :

• They are amazing ! Something worth to learn and try out.
• I don’t think they are true cross platform and will run on Mac ! Correct me here if I am wrong (Silverlight is Cross platform and same code with small modify runs on WP7 as well)
• At this moment I am not sure how many will adopt Metrofy or HTML5 + JS platform for “Enterprise Application Development” where we usually plug WCF,WF,MEF,Microsoft Enterprise Library etc.
• With Blend Support, Now job is easy to design these HTML5 apps, So Designers will be happy for sure.
• Performance and tooling support for HTML5 is in great progress but then same question again..Is it full functional like WPF or Silverlight, Just having similar features and capabilities does not change game totally.

If Microsoft declare death of Silverlight : Think over this..

• Do you think people will keep their mouth shut and just obey ? I mean think from WP7 perspective.Think over this..
• There are Thousands of App in WP7 Marketplace Up and Running on millions of devices, what will happen to them if Silverlight is dead ?
• Do you think Microsoft is just making fun of people from past few years by launching different versions of Silverlight? Today we are in version 5.So think over this..
• Do you think Microsoft will say one day that “Silverlight is dead totally..now rollback your apps which are there on your WP7/Marketplace/Web or OOB state” …crazy ! It will not happen like that anyway..think carefully when you say its dead !
• What to develop,which language to use : Usually this totally depends on one’s comfort level with the technology.Think over this..

Current Silverlight situation and what to do in future ? :

• There is no official statement from Microsoft saying “Silverlight is dead”, So stop right there and don’t follow those garbage and nonsense blogs/posts/discussions/videos/thoughts saying “Silverlight is dead”
• Read the feature set of Silverlight 5 Carefully !
• Windows 8 / WinRT /.NET 4.5 etc are in “preview” and not  even in “Beta" or “RC”..so some features can be added or removed,its common thing in Product development.So it will be too early to make judgments on availability of Silverlight on Windows 8 or with WinRT, Metrofication etc.
• Keep track of happening changes in the new Windows 8 Platform, start building small small apps using Visual Studio 2011.
• Do more visualization than actual migration.This is not right time to decide whether the new development should be a Metrofy or normal one since entire platform is in preview stage.So even not ideal time to create PoCs since many things will be changing/breaking up/crashing because of preview state.
• Follow correct and official Microsoft resources which can be : Microsoft Representatives, Silverlight MVPs and Insiders, DPE Evangelists etc.
• Now “XAML” + Code behind of your choice is the buzz word instead of just casually saying its WPF’s XAML or Silverlight’s XAML

What’s the benefit of investing in Silverlight from last few years then ? :

• XAML ! Those who are working on WPF and Silverlight..its party time for them since they already have one Rich and Demanding Skillset of XAML
• Not much learning curve since Silverlight Developers are already aware of C#,VB.NET and XAML with tools like Expression Blend etc. So they can easily upgrade themselves to Metro UI App Development.
• Windows Phone 7.5 aka Mango coming up, Silverlight is the core Application Development platform on phone,So keep your Silverlight skills with you.

Silverlight on Windows 8, Metro Plug-in less browser and other stuff :

• Agree and accepted that Silverlight does not work in “Metro IE” in Windows 8 but it does in Windows 8 Desktop mode and again Windows 8 is in preview stage and it will be too early to comment.
• See the picture below : Silverlight is still there on those blocks

• Visual Studio 11 do comes up with default project template for Silverlight, Check this out :

• I tried running my current SL5 apps and they got executed successfully,see this :

Conclusion :

I wrote all this to just trigger positive thought process instead of just shouting and spreading death news of Silverlight. Some things I know you have in mind and which are not clear,but frankly for some of the things even I also don’t have answers and clear vision since this is all a preview platform.

Picture will be more clear when entire platform will go to Beta and then RTM mode.So till the time instead of wasting time in nonsense discussion..lets focus and new Metro UI App using XAML, New HTML5 + JS platform,New Visual Studio 2011 and .NET 4.5 and lets get some good hold on that before making final judgment on Silverlight’s future.

In some of the section above I may sound arrogant and away from subject, but intention of this post is to keep positive focus about platform and build healthy and non biased thought process.

So..Silverlight is dead ? Look back..Think again..Do analysis,spend some time on new platform and then jump to conclusion.

Remember ! Blogs,Forum comments or News blogs people does not deal with your actual client, They are not real decision maker. Its only you and you and you who will take a call on your App Development platform and for Silverlight..lets Microsoft decide on that..It will be better !

Vikram.

Silverlight 5 : Implement “Run” functionality using Platform Invoke (PInvoke)

 

I hope you like my last article on PInvoke feature introduced in Silverlight 5 RC. As I mentioned in my last post that I will be posting more and more advance demos of PInvoke in coming days.Well, Today I am going to show you that how you can build “Run” kind of functionality using PInvoke in Silverlight 5 RC,Not getting this idea? Here is “Run” in our Windows look like :

Something similar we are going to develop using PInvoke in terms of look and feel and functionality.Idea is to make use of Shell32.dll’s ShellExecute( ).

I kept UI similar to Windows “Run” for better understanding,It is not exact replica or replacement for Windows “Run”, Idea is to demonstrate the functionality of ShellExecute( ) so I am not trying to break any copyright stuff of original Windows OS.

As discussed in my last article here,following the same steps lets build this component.

Namespace :

using System.Runtime.InteropServices;

This is the primary namespace used to develop PInvoke apps.

XAML :

<Image Source="Run.jpg" Height="42" Width="46" Canvas.Left="0" Canvas.Top="11" />
            <TextBlock Text="Type the name of Program,Folder,document,or Internet resource and Windows will open it for you." TextAlignment="Left" Height="44" Width="319" TextWrapping="Wrap" Canvas.Left="50" Canvas.Top="8" />
            <TextBlock Text="Open:" Height="20" Width="46" Canvas.Top="62" Canvas.Left="6" />
            <TextBox Height="23" HorizontalAlignment="Left" x:Name="txtValue" Width="311" Canvas.Left="50" Canvas.Top="62" />
            <Button x:Name="btnSubmit" Click="btnSubmit_Click" Content="Ok" Width="76" Height="22" Canvas.Left="50" Canvas.Top="100" d:LayoutOverrides="VerticalAlignment" />
            <Button x:Name="btnCancel" Click="btnCancel_Click"  Content="Cancel" Width="76" Height="22" Canvas.Left="150" Canvas.Top="100" d:LayoutOverrides="VerticalAlignment, Width" />

Note that like in Real “Run” box, I am skipping editable dropdown control and Browse button,Here I am taking Textbox to enter parameters and Ok and Cancel Button to handle the same.

UI will look like this after running :

C# Code :

public MainPage()
{
      InitializeComponent();
      App.Current.MainWindow.Title = "Run";            
}    

#region Shell Execute

[DllImport("shell32.dll")]
static extern IntPtr ShellExecute(
            IntPtr hwnd,
            string lpOperation,
            string lpFile,
            string lpParameters,
            string lpDirectory,
            ShowCommands nShowCmd);

#endregion     

private void btnSubmit_Click(object sender, RoutedEventArgs e)
       {
           ShellExecute(System.IntPtr.Zero, "open", Convert.ToString(txtValue.Text), string.Empty, string.Empty, ShowCommands.SW_SHOWNOACTIVATE);
       }

       private void btnCancel_Click(object sender, RoutedEventArgs e)
       {
           if (App.Current.IsRunningOutOfBrowser)
               App.Current.MainWindow.Close();
       }

Note that you need to build ShowCommands enum, for more information you can visit ShellExecute Documentation on MSDN here

txtValue does the job of taking parameters and passing to ShellExecute.

That’s it ! We are done with our own “Run” box build using Silverlight 5 RC P/Invoke Feature using Shell32.dll ‘s ShellExecute( )

OOB Settings :

Kindly refer my last post where I have given all information about setting trust and what kind of possible exceptions you might get.So read more over there.

Output :

Here are some screenshots I took with our Silverlight 5 based “Run” :

Calling Calculator,Command Prompt and MS Paint from our “Run” box

Visit my blog / any URL using our “Run” box ":

So if we compare Windows’s Run box and our in terms of looks..here we go !

Where this can be applicable in Real life applications ? :

Idea in this demo is to use ShellExecute( ) in Silverlight application,UI can be different or in different formatting.Core idea is to use ShellExecute( ) and make use of that using P/Invoke, Do you want me to share what can be done with ShellExecute( ) ? I know I don’t need to..there are lot of business scenarios where this can be used,For example : Open instances of Word,Excel,Powerpoint,MS Paint,Calculator as I have shown above, Run Command Prompt and run scripts etc.

So I hope you will like this sample once you build and run this. Let me know your feedback and I will soon going to post one more P/Invoke sample in coming weeks along with other good and fun stuff on Silverlight 5 RC and then few interesting things on Windows Phone 7 as well.

Vikram.

Silverlight 5 : Platform Invoke (PInvoke) in Silverlight

 

Two days back Microsoft announced availability of Silverlight 5 RC,I encourage you to download bits from here, My friend Pete Brown already given very good information on Silverlight 5 RC here.

PInvoke (some type this as p/Invoke) that is Platform Invoke is most awaited feature in Silverlight since the announcement of Roadmap of Silverlight 5.

There are lot of talks in the community about Native HTML5 Apps using JavaScript,I am sure with this feature of PInvoke,Silverlight is now equally powerful player in App Development.

Why I kept above text in Bold? This is because there is lot of HTML5 talks around and sometime people unnecessarily without judging pulling Silverlight down for no good reason.For those who think we are Dead or we are just Animation technology..well by this feature you folks must have realize the potential of this Silverlight platform and where we are heading towards.

Coming back to PInvoke,So today to start with,I am putting forward a very simple and basic demo of PInvoke for you to understand and grab the topic and get hold of it.Then in next article I will be putting some advance samples and also in coming days I will be covering few more Silverlight 5 topics as well.

This demo is based on calling a “Beep” functionality from kernel32.dll file from Windows

If your fundas of PInvoke are not clear,In that case I encourage you to have a look at this article on Wikipedia which talks about PInvoke

http://en.wikipedia.org/wiki/PInvoke

Our First Silverlight PInvoke Demo :  Beep !!..Beep !!…

Namespace :

using System.Runtime.InteropServices;

This is the primary namespace used to develop PInvoke apps.

XAML :

<Grid x:Name="LayoutRoot" Background="Black">
        <Image Source="Beep.jpg"/></Grid>

I just taken a Road Runner Image as name of the demo is Beep Beep

C# Code :

Now what we are going to do is that we will invoke Beep function which is a System Beep function from kernel32.dll

#region Beep Module
       [DllImport("kernel32.dll", SetLastError = true)]
       [return: MarshalAs(UnmanagedType.Bool)]
       static extern bool Beep(uint dwFreq, uint dwDuration);
#endregion

[DllImport…] specified which dll file we are invoking.”SetLastError” is actually a Named Parameter in the signature which indicate whether the callee calls the SetLastError Win32 API function before returning from attribute method.

So we are all set to call Beep function from kernel32.dll in our Silverlight app like shown below :

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

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {
           
            for (uint i = 100; i <= 200; i=i+10)
            {
                Beep(i,100);
            }
        }

Done ! We have just develop our first PInvoke Sample using Silverlight 5 RC !

Now turn on your speakers and get ready to hear Beep !! Beep !! from Road Runner ..I mean you will get some sound / default sound from system.If you want to change bits and duration then go ahead and feel free to tune the code.

Oh ! Wait ! What’s this error about? :

This is Runtime Exception because of lacking of trust,so you need to turn on that in OOB setting like this :

To know more on this Trust part I encourage you to read my friend Kunal’s article here.

Output : (Turn On the Speakers for Beep)

This ends our first ever PInvoke functionality using Silverlight 5 RC.I request you to download new RC bits and try out this demo,meanwhile I will prepare my next advance demo of PInvoke and other few articles.So with this PInvoke I can say again that ..Future is Bright ! Future is Silverlight !!

Vikram.