Using Ribbon Editor to design the Ribbon for your application

 

Visual Studio 2010 has integrated the new Ribbon Designer for MFC Applications. Previously I blogged about integrating ribbon with the MFC application and adding even handlers to get the notifications. But the developer must visualize the ribbon while scripting the ribbon code. But using the new Ribbon Designer, we can design ribbons designer, just like the menu designer.


Please check the following links to explore more.
How to integrate a simple ribbon with your MFC Application?
How to handle Ribbon Control Events?
Ribbon designer (MSDN)

 

Programming Windows Phone 7 – Hello World

 

I was really excited about to see the upcoming release of Windows Phone 7. This is truly a great answer from Microsoft to the rest of world. Apple iOS which is currently the most popular mobile platform, Google Android, BlackBerry etc. were taking pace with the new technologies and Microsoft was still battling to find a space in the mobile world. Of course Windows Mobile operating system was popular some time before but the smart phones were not really popular and on aging, the platform itself being outdated in front of other new age platforms.

All programs for Windows Phone 7 can be written in .NET managed code. Currently C# is the only programming language supported. The tools for Windows Phone 7 can be freely downloaded from Windows Phone 7 website. It includes

  • Visual Studio 2010 Express Edition
  • XNA Game Studio 4.0
  • On Screen Phone Emulator

Windows Phone 7 can be programmed mainly using XNA FrameWorks and the popular Silverlight platform. XNA is used for high performance games (usually 3D games) and Silverlight is usually used for the 2D graphical applications.

Windows Phone 7 contains the stripped down version of Silverlight 3. Microsoft has avoided the silverlight features which are not really compatible with the Windows Phone 7 platform. The animations for the programs can be down using the Microsoft Expression Blend

Ultimately it comes to programmer’s responsibility to choose which platform should be used for programming Windows Phone 7 application.

Windows Phone 7 contains the Azure services to access the cloud service. One of the examples are XBox Live (runs on cloud). Programs are location aware and can access data through bing, social networking websites etc.

Windows Phone 7 features Multi-Touch screen with 3 navigation buttons. Back (like the back button in the browser. This will terminate the application),  Start button (to navigate to home screen), Search. Currently the native resolution of a Windows Phone hardware is 400×800. Also 320×480 resolution screen is expected. The hardware component features

  • Wi-Fi
  • Camera
  • Accelerometer – to detect the movement of the phone
  • GPS based Location
  • Vibration (programmable)
  • FM Radio
  • Push notifications

Once after downloading the tools, you can either start programming in the Visual Studio Express Edition or Visual Studio 2010 (if it’s already installed).

Here I’m demonstrating a basic Windows Phone 7 application in Silverlight. The code is only tested in Simulator not on any real hardware.

Create the new project using the Wizard

image

The basic layouts will automatically be created using the XAML and corresponding C# source will also be created. Notice that the standard controls available in the Windows phone 7 is not similar to the controls available in Windows. They’re transparent and designed for the phone. The entire theme is based on black. You can simply start debugging/execute the code using the emulator available. It’s better not to close the emulator Windows frequently as it may take time to start it up. The program will automatically deployed and starts in the emulator.

The user actions like home screen, back button, search etc will end up the application by default. The application must manage itself to restore the previous state if necessary on quit.On startup Windows phone 7 emulator will ask for the basic setup. It’s very easy to set it up and this is a one time process. The emulator can be used for changing the orientation between portrait and landscape. The buttons are available on the right top corner of the emulator window on hovering the mouse.

The demo application loads the posts from this blog and display it, whlie tap on the post titles listed, the article will be loaded on webBrower.

The layout and controls are as follows

image

Loading the feed items

The silverlight application had put lot of restrictions in accessing the APIs and resources of other websites. Loading news feed (RSS/Atom) is not really painful using the C# code. Silverlight supports asynchronous read operations for web requests. SyndicationFeed class is not supported supported bu default. Basically it’s safe to add this assembly to the project (System.ServiceModel.Syndication,dll) You can browse to Windows SDK folder, locate and add the same assembly in the “Client” folder

private void buttonRefresh_Click(object sender, RoutedEventArgs e)
{
    // Load the feed items
    LoadFeedItems();
}

private void LoadFeedItems()
{
    // Asynchronously load the feed content.
    WebClient client = new WebClient();
    Uri address = new Uri("http://feeds.feedburner.com/sharingmythoughts");
    client.OpenReadCompleted += client_openReadComplete;
    // Add the callback on completion
    client.OpenReadAsync(address);
    webBrowser.Visibility = Visibility.Collapsed;
    buttonBack.Visibility = Visibility.Collapsed;

}
private void client_openReadComplete(object sender, OpenReadCompletedEventArgs args)
{
    try
    {
        listBoxPosts.Items.Clear();
        // try to load the result in the XML reader.
        // Exception may occur if the request is failed
        XmlReader reader = XmlReader.Create(args.Result);

        // Syndication Feed is not supported by default.
        // It's safe to add this assembly.
        SyndicationFeed feed = SyndicationFeed.Load(reader);
        Items = feed.Items.ToArray();
        foreach (SyndicationItem e in Items)
            listBoxPosts.Items.Add(e.Title.Text);
    }
    catch
    {
        MessageBox.Show("Error downloading feed");
    }

}

Navigate to the base URL on tapping

private void OnTapItem(object sender, MouseButtonEventArgs e)
{
    if (listBoxPosts.SelectedIndex >= 0)
    {
        buttonRefresh.Visibility = Visibility.Collapsed;
        buttonBack.Visibility = Visibility.Visible;
        webBrowser.Visibility = Visibility.Visible;
        Uri address = new Uri(Items[listBoxPosts.SelectedIndex].Id);
        webBrowser.Navigate(address);
    }
}

The mobile theme I’ve enabled for this blog is not really working well. The WPTouch theme I installed seems not really identifying Windows Phone 7 user agent string. (Amazingly it works well when I load using Intenet Explorer App in the Phone 7).

Adding support for Orientation

By default, the wizard creates application with Portrait Orientation. The page content will not be arranged according to the current orientation if we don’t add support for it. Change the orientation to Portrait/Landscape/PortraitOrLandscape in the XAML file

SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"

Handling Orientation Events

It’s possible to override OnOrientationChanged function do if we need to manage something else other than the default orientation change support implemented in the base class. For the simple applications using controls, we can use the standard alignment surppot provided by the grids and panels. The controls will be perfectly aligned according the vertical and horizontal settings of the controls.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <ListBox Margin="0" x:Name="listBoxPosts" MouseLeftButtonUp="OnTapItem" />
    <phone:WebBrowser Margin="0" x:Name="webBrowser" />
</Grid>
<Button Content="Refresh" Height="71" HorizontalAlignment="Right" Margin="320,145,0,0" x:Name="buttonRefresh" VerticalAlignment="Top" Width="160" Click="buttonRefresh_Click" />
<Button Content="Back" Height="71" HorizontalAlignment="Left" Margin="0,145,0,0" x:Name="buttonBack" VerticalAlignment="Top" Width="160" Click="buttonBack_Click" />

Override the OnOrientationChanged if more flexibility is necessary

protected override void OnOrientationChanged(OrientationChangedEventArgs args)
{
    // do your code. If base is not called, then the orientation will not be changed
    base.OnOrientationChanged(args);
}

Portrait Orientation

image

 

Landscape Orientation

image

Putting it all together

Download the source from GIT Hub

Closing note

I feel Windows Phone 7 is a solid platform. It uses the modern programming languages and technologies. C# is one of the most popular language and it’s expressive. The Apple’s iOS platform is truly a solid and great foundation but the object C has a slight learning curve. It’s obvious because it’s my father’s programming language, not mine. But Apple made the platform truly solid and cash cow for the developers. So nobody really care it’s his father’s or his. :)

Microsoft has chosen right technologies for Windows Phone 7 is proven and popular. XNA, Silverlight with C# will surely give edge for Microsoft to get a pace on their platform. Also the developer tools are easy to work and available for free.

Charles Petzold is working for a free version of book for Programming Windows Phone 7 which is expected to out soon. Apple has a definite documentation, video tutorials and lot more stuffs to help the developers. The MSDN documentation is slightly noisy with too many languages technologies. Even if we check the documentation for silverlight, some of the functionalities may not work under Windows Phone 7. Hopefully we can see lot of good stuffs in MSDN and Channel 9 for Windows Phone 7( Channel 9 offer Windows Phone 7 Training Kit now). Now I’m exploring more about deploying the phone applications. See you son.

 

Visual Studio 2010 – Productivity tools

 

Most of the Visual Studio Developers are familiar with Visual Assist X developer tool. It has really nifty features for improving the productivity. It may not be too detailed refactoring facilities or so flexible features as other tools provides like DevExpress but as a whole all we like this tool. But only one problem, it’s a paid software.

Visual Studio IDE is consistently getting improved over the versions but still some of the feature are missing like Symbol Search, file search within the IDE until Visual Studio 2010. It’s really important while managing large projects. The best thing in the Visual Studio 2010, is the extensibility SDK. It’s far more flexible and prominent comparing to it’s predecessors.

Microsoft has created a really helpful site to host the useful tools for Visual Studio created by developers across the world. Even Microsoft has created some really cool tools for Visual Studio which is freely available in Visual Studio Gallery.

Productivity tools are one of best extensions available. It contains a bunch of features to improve your Visual Studio 2010 experience. You can download it from Visual Studio Gallery. The features can be simply enabled and disabled through Tools->Option menu.

image

Let’s have a quick look into the features. Each options are described well in their home page itself. Let’s skim through the features anyway. This contains only the features I handpicked from the whole features available. You can see the entire features the home page itself. The descriptions and screenshots are given same as the extension’s homepage.

Solution Navigator  (More Info)

image

This is one of the best feature.

  • Expand code files to navigate to its classes, expand classes to navigate to their members, and so on (C# and VB only)
  • Search your solution, all the way down to class members
  • Filter your solution or projects to see just opened files, unsaved files, and so on
  • View related information about classes and members (such as references or callers/callees for C#)
  • Preview images by hovering over them, or preview rich information by hovering over code item

Solution Navigator also provides interactive tooltips in C# and VB code (replacing the default “quick info” tooltips) that give you the same kind of data, but right at your fingertips.  In addition to getting the tooltips on hover, you can:

  • Press Ctrl+1 to open a relevant tooltip at the current cursor location
  • Press Ctrl+2 to quickly navigate to any class/member in the current source file

Ctrl + Click Go To Definition
This extension gives the editor a web browser by adding clickable hyperlinks to symbols in your code as you hold down the Ctrl key.

Align Assignments
This extension is useful for making your code a little more readable by aligning the assignments when you type Ctrl+Alt+] such that it takes this:

And turns it into this:

Please note: This may conflict with your formatting settings. E.g. in C# you will need to disable: Tools->Options->Text Editor->C#->Formatting->Spacing->"Ignore spaces in declaration statements"

Triple Click
It’s never been easier to select a line of code from the mouse by simple triple-clicking anywhere on the line.

Highlight Current Line
As the resolution of monitors increases, it’s becoming more difficult to find the caret in the code editor.  The highlight current line extension makes it easy to find the caret by highlighting the line that the caret is on in the editor.  You can even configure the default colour by changing the setting for “Current Line (Extension)” and “Current Line Inactive (Extension)” in Tools Options Fonts & Colors.

HTML Copy (More Info)
This extension provides support for the HTML Clipboard format when cutting or copying code from the editor.  This means that you’ll no longer have to go fix up the formatting of your code when you paste it into a TFS bug form or any other HTML based control.

Colorized Parameter Help
This extension improves consistency with the editor by applying syntax highlighting to the contents of the Parameter Help window for C# &VB.
Please note: Syntax highlighting colors can be customized using the display items prefixed with “Signature Help” in the “Fonts and Colors” menu.

Tab Well UI
This extension allows you to completely customize the behavior of your document tabs from the Productivity Power Tools Options: See More Info

Auto Brace Completion
Automatic Brace Completion improves the productivity of writing code by automatically inserting the closing code construct when the opening construct is typed for VB & C#.  More specifically, this extension:

  • Supports the following constructs: (), {}, [], <>, “”, and ‘’. 
  • Allows you to press <TAB> to navigate past the next enclosing brace
  • Allows you to automatically complete a statement in C# by inserting the closing semi-colon and moving you to the next line with SHIFT + ENTER