Posts
In this Screen cast, I’ll explore how to install the toolkit and develop a simple Twitter browser application using the toolkit. Along with the screen cast, you may
Click the below image to view the recorded Screencast.
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.
[+] 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.
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.
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).
In my last post, I introduced XamlAsyncController, a POC implementation that shows how to render Xaml controls from ASP.NET MVC.
To recap, these are the two steps you need to do to render Xaml or a WPF control as an image from your ASP.NET MVC Controller
- Inherit your Controller from XamlAsyncController, and add an Async action for serving the image
- Add your Xaml file to the path /Visualizations/{Controller}/{Action}.xaml
Also, now there is one more way of rendering a WPF control from your MVC controller. You can create a WPF control from your controller and pass it as a parameter of StartRendering method, in your Async method.
The Gauge control XAML I’ve used in this example is the Xaml guage control developed by Evelyn from Codeproject – Credits to Evelyn.
Have a look at the Controller that renders the Button image and the Gauge image, in the shown html page.
public class VisualsController : XamlAsyncController
{
public void GuageAsync()
{
ViewData["Score"]=200d;
ViewData["Title"] = "Hello";
StartRendering();
}
public ActionResult GuageCompleted()
{
return XamlView();
}
public void ButtonAsync()
{
StartRendering(()=>new Button() { Content="Hello",Height=30, Width=100 });
}
public ActionResult ButtonCompleted()
{
return XamlView();
}
}
And now you can do following to render those images
<h2>Xaml in ASP.NET MVC Demos</h2>
<h3>Simple Button</h3>
<image src="/Visuals/Button" />
<h3>Gauge</h3>
<image src="/Visuals/Guage" />
As you can see, the Visuals controller returns the image, based on the action name. In the case of ButtonAsync action, you can see that we are creating the WPF Button object directly in the action, and passing it as a parameter of StartRendering method, to render the button as an image.
In case of the GuageAsync action, you may see that we are just calling StartRendering after filling some data in the ViewData. If that is the case, as I explained in my previous post, by convention, we expect the Xaml view in the path Visualizations\Visual\Guage.xaml . Here is our Guage.xaml View, and you can see the we have the ‘Score’ property of our UserControl bound to the ViewData we passed in the GuageAsync action.
<UserControl x:Class="MvcXamlController.Demo.Visualizations.Dashboard.Guage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="clr-namespace:MvcXamlController.Controls;assembly=MvcXamlController.Controls"
Width="300" Height="300"
mc:Ignorable="d">
<Grid>
<controls:CircularGaugeControl x:Name="myGauge1"
Radius="150"
ScaleRadius="110"
ScaleStartAngle="120"
ScaleSweepAngle="300"
PointerLength="85"
PointerCapRadius="35"
MinValue="0"
MaxValue="1000"
MajorDivisionsCount="10"
MinorDivisionsCount="5"
CurrentValue="{Binding Score}"
ResetPointerOnStartUp="True"
ImageSize="40,50"
RangeIndicatorThickness="8"
RangeIndicatorRadius="120"
RangeIndicatorLightRadius="10"
RangeIndicatorLightOffset="80"
ScaleLabelRadius="90"
ScaleLabelSize="40,20"
ScaleLabelFontSize="10"
ScaleLabelForeground="LightGray"
MajorTickSize="10,3"
MinorTickSize="3,1"
MajorTickColor="LightGray"
MinorTickColor="LightGray"
ImageOffset="-50"
GaugeBackgroundColor="Black"
PointerThickness ="16"
OptimalRangeStartValue="300"
OptimalRangeEndValue="700"
DialTextOffset="40"
DialText="{Binding Title}"
DialTextColor="Black"
>
</controls:CircularGaugeControl>
</Grid>
</UserControl>
Have a look at the source code here.
There are some limitations as of now. You may note that if the WPF control supports animation (like the Chart controls), you won’t be able to render them properly. How ever, if you create your own UserControls, you can easily make them work
Also, Keep in touch :) follow me in twitter or subscribe to this blog. Interested in more ASP.NET MVC? Read my articles about creating a custom view engine for ASP.NET MVC or using Duck Typed View Models in ASP.NET MVC
Happy coding..
Subscribe to:
Posts (Atom)