Skip to main content

Developing A ‘touchy’ Twitter browser – Using Visual Studio 2010 + Surface Toolkit for Windows Touch devices beta

Microsoft recently released Microsoft Surface Toolkit for Windows Touch Beta. It seems that the next version of Microsoft Surface will provide a development model that is consistent along the lines of WPF and Silverlight – Promising infact..

The Microsoft Surface Toolkit for Windows Touch Beta is a set of controls, APIs, templates, sample applications and documentation currently available for Surface developers. With the .NET Framework 4.0, Windows Presentation Framework 4.0 (WPF), and this toolkit, Windows Touch developers can quickly and consistently create advanced multitouch applications for Windows Touch PCs. This toolkit also provides a jump-start for Surface application developers to prepare for the next version of Microsoft Surface. Use it to take advantage of the innovative Surface technology and user interface to develop your own rich and intuitive multitouch experiences for a variety of Windows Touch devices.

In this post, I’ll explore how to install the toolkit and develop a simple Twitter browser application using the toolkit.

image

 

[+] Download The Source Code Here

[+] View my recorded Screen cast to learn more about the controls, and building the application

Installing The Toolkit

You can download the toolkit beta from here. You need Windows 7 and Visual C# 2010 Express Edition or Visual Studio 2010. I installed the beta on top of my Windows 7 32bit Ultimate and Visual Studio 2010 Ultimate.

Once you install the demo, you will be able see the project templates in the Visual Studio 2010 new project dial box, under Surface category.

image

Examining the project

Go ahead and create the Windows Touch project, and you’ll see that the project you created looks very similar to WPF projects. If you note carefully, you’ll find that the main window, SurfaceWindow1 is inherited from Microsoft.Surface.Presentation.Controls.SurfaceWindow controls.

image

Let us see how to develop the application, in three easy steps.

Step 1 – Create a ViewModel to fetch the Tweets

Let us develop a simple application for displaying the Twitter public time line. Download the related source code and keep it handy.

As a first step, I’m adding a simple ViewModel class to our application, TwitterViewModel.cs. As you can see from the code below, we are fetching the public time line from twitter, and populating the TweetObject collection. We are also raising a property change notification for the ‘Tweets’ property, so that our View can rebind.

   public class TwitterViewModel : INotifyPropertyChanged
    {
        public TwitterViewModel()
        {
            Initialize();
        }

        /// <summary>
        /// Initialize the twitter element
        /// </summary>
        void Initialize()
        {
            try
            {
                WebClient cl = new WebClient();
                using (StreamReader r = new StreamReader
                    (cl.OpenRead(@"http://twitter.com/statuses/public_timeline.xml?lang=en")))
                {
                    var data = r.ReadToEnd();
                    var tweets = from status in XElement.Parse(data).Elements("status")
                                 select new TweetObject()
                                 {
                                     Name = status.Element("user").Element("screen_name").Value,
                                     Image = status.Element("user").Element("profile_image_url").Value,
                                     Text = status.Element("text").Value
                                 };


                    Tweets = new ObservableCollection<TweetObject>(tweets);
                    if (PropertyChanged != null)
                        PropertyChanged(this, new PropertyChangedEventArgs("Tweets"));
                }
            }
            catch { }
        }

        /// <summary>
        /// Tweets property. We'll bind our ScatterView control to this
        /// </summary>
        public ObservableCollection<TweetObject> Tweets { get; set; }

        /// <summary>
        /// For raising the notifications
        /// </summary>
        public event PropertyChangedEventHandler PropertyChanged;
    }

    public class TweetObject
    {
        public string Name { get; set; }
        public string Text { get; set; }
        public string Image { get; set; }
    }

Step 2 – Creating The View

The Surface toolkit comes with few interesting controls, including ScatterView control, LibraryStack, LibraryBar etc. Let us use the ScatterView control to display the Tweets. Let us add the following code to SurfaceWindow1.xaml

    <s:ScatterView ItemsSource="{Binding Tweets}">
            <s:ScatterView.ItemTemplate>
                <DataTemplate>
                    <Border BorderThickness="3" BorderBrush="White" CornerRadius="4">
                    <StackPanel Width="200" Height="140">
                        <StackPanel Orientation="Horizontal" Margin="2">
                            <Image Source="{Binding Image}" Width="32" Height="32"/>
                            <TextBlock Text="{Binding Name}" Padding="3" FontWeight="Bold"/>
                        </StackPanel>
                            <TextBlock Text="{Binding Text}" TextWrapping="Wrap" 
                                       Margin="2" Padding="4"/>
                    </StackPanel>
                    </Border>
                </DataTemplate>
            </s:ScatterView.ItemTemplate>
        </s:ScatterView>

Also, we need to bind our ViewModel to the view. Let us do it in the constructor of our View.

    /// <summary>
    /// Interaction logic for SurfaceWindow1.xaml
    /// </summary>
    public partial class SurfaceWindow1 : SurfaceWindow
    {
        /// <summary>
        /// Default constructor.
        /// </summary>
        public SurfaceWindow1()
        {
            InitializeComponent();
            this.DataContext = new TwitterViewModel();
        }
    }

 

Step 3 – Let us run the application

And you’ll be able to see the Twitter public time line cards, as shown in the very first image of this post. You may play around a bit, and try the same view with other controls as well, like LibraryStack. Here is the same application, this time using the LibraryStack control instead of ScatterView (Both samples included in the demo code).

image

Popular posts from this blog

Top 7 Coding Standards & Guideline Documents For C#/.NET Developers

Some time back, I collated a list of 7 Must Read, Free EBooks for .NET Developers, and a lot of people found it useful. So, I thought about putting together a list of Coding Standard guidelines/checklists for .NET /C# developers as well.As you may already know, it is easy to come up with a document - the key is in implementing these standards in your organization, through methods like internal trainings, Peer Reviews, Check in policies, Automated code review tools etc. You can have a look at FxCop and/or StyleCop for automating the review process to some extent, and can customize the rules based on your requirements.Anyway, here is a list of some good Coding Standard Documents. They are useful not just from a review perspective - going through these documents can definitely help you and me to iron out few hidden glitches we might have in the programming portion of our brain. So, here we go, the listing is not in any specific order.1 – IDesign C# Coding StandardsIDesign C# coding stand…

Creating a quick Todo listing app on Windows using IIS7, Node.js and Mongodb

As I mentioned in my last post, more and more organizations are leaning towards Web Oriented Architecture (WOA) which are highly scalable. If you were exploring cool, scalable options to build highly performing web applications, you know what Node.js is for.After following the recent post from Scott Hanselman, I was up and running quickly with Node.js. In this post, I’ll explain step by step how I’ve setup Node.js and Mongodb to create a simple Todo listing application.Setting up Node.jsThis is what I’ve done.1 – Goto http://nodejs.org/, scroll down and download node.exe for Windows, and place it in your c:\node folder2 – Goto IIS Node project in Git at https://github.com/tjanczuk/iisnode, download the correct ‘retail’ link of IIS Node zip file (I downloaded the already built retail package, otherwise you can download and build from the source).3 – Extract the zip file some where, and run the install.bat or install_iisexpress.bat depending on your IIS Version. If you don’t have IIS in…

5 Awesome Learning Resources For Programmers (To help you and your kids to grow the geek neurons)

Happy New Year, this is my first post in 2012. I’ll be sharing few awesome learning resources I’ve bookmarked, and will be pointing out some specific computer/programming related courses I've found interesting from these resources.Also, thought about saving this blog post for my kids as well - instead of investing in these Child education schemes (though they are too small as of today, 2 years and 60 days respectively ). Anyway, personally my new year resolution is to see as much videos from this course collections (assuming I can find some free time in between my regular job && changing my babies diapers).1 – Khan AcademyAs I mentioned some time back, you and your kids are missing some thing huge if you havn’t heard about Khan Academy.  It is an awesome learning resource, especially if you want to re-visit your basics in Math, Science etc.With a library of over 2,600 videos covering everything from arithmetic to physics, finance, and history and 268 practice exercises, th…