Microsoft Surface Videos

Watch some cool Microsoft Surface Videos here.

Hope you’ll enjoy.

AjaxControlToolkit New Version

AjaxControlToolkit version 3.0.30512 is released with  3 new controls,

• HTMLEditor
• ComboBox
• ColorPicker

Download AjaxControlToolkit

Visual Studio 2010 Professional Beta 1

Finally here comes what we’ve been waiting.Next Generation of Visual Studio is on move.Visual Studio 2010 Professional Beta 1 is now available for Download.

Visual Studio 2010 Professional Beta 1

Enjoy

ElementMenu in Microsoft Surface

Microsoft Surface 1.0 SP1 introduced a new control named ElementMenu.ElementMenu in surface SDK provides you a new way to display the data in a new hierarchical manner.ElementMenu implementing SurfaceItemsControl and its a collection of ElementMenuItem.I created a sample application using this ElementMenu just to checking out how its looking.Of course its pretty cool.

Create a Surface Project.In surfaceWindow1 add ElementMenu Control from Toolbox.

<s:ElementMenu Name="MainMenu">
                  
</s:ElementMenu>

Add child ElementMenuItem controls.

<s:ElementMenu Name="MainMenu"
             VerticalAlignment="Bottom">
  <s:ElementMenuItem Header="Honda">
      <s:ElementMenuItem x:Name="MenuItem1"
                         Header="Civic"
                         Click="MenuItem1_Click" />
      <s:ElementMenuItem Header="CRV"
        Command="local:SurfaceWindow1.MenuItemCommand" />
       <s:ElementMenuItem Header="City"
                          Click="MenuItem1_Click" />
       <s:ElementMenuItem Header="Accord"
        Command="local:SurfaceWindow1.MenuItemCommand" />
   </s:ElementMenuItem>          
</s:ElementMenu>

Here i added two levels of ElementMenuItem for the ElementMenu.We can handle the click event by either using Click Event handler or using Command.Here i am using both for different Element Menu Items.Using Click Event handler is straight forward.But if we are using command first create a RoutedCommand in the code behind,

public static readonly RoutedCommand MenuItemCommand = new RoutedCommand();

Then add this command to the Window’s CommandBindings.Here am using XAML for adding the command to the command collection,

<Window.CommandBindings>
  <CommandBinding Command="local:SurfaceWindow1.MenuItemCommand"
                  Executed="CommandBinding_Executed" />
</Window.CommandBindings>

where local is the reference to the current assembly,

xmlns:local="clr-namespace:MySurfaceApplication"

SurfaceWindow1 is the Class name.Add this command to the Element Menu Item as in the above code snippet.Add CommandBinding_Executed in the code behind,

private void CommandBinding_Executed(object sender, ExecutedRoutedEventArgs e)
{
  CarDetails.Text = (e.OriginalSource as ElementMenuItem).Header.ToString();
}

So now my whole XAML looks like,

<s:SurfaceWindow x:Class="MySurfaceApplication.SurfaceWindow1"
               xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
               xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
               xmlns:s="http://schemas.microsoft.com/surface/2008"
               xmlns:local="clr-namespace:MySurfaceApplication"
               Title="MySurfaceApplication">
  <Window.CommandBindings>
      <CommandBinding Command="local:SurfaceWindow1.MenuItemCommand"
                      Executed="CommandBinding_Executed" />
  </Window.CommandBindings>

      <Grid>
          <Grid.RowDefinitions>
              <RowDefinition />
              <RowDefinition />
          </Grid.RowDefinitions>
          <TextBlock x:Name="Comparison"
                     Grid.Row="0"
                     Text="Car Comparison"
                     VerticalAlignment="Bottom"
                     HorizontalAlignment="Center"
                     Foreground="White"
                     Background="Blue">
          <s:ElementMenu Name="MainMenu"
                         VerticalAlignment="Bottom"
                         ActivationMode="HostInteraction"
                         ActivationHost="{Binding ElementName=Comparison}">
              <s:ElementMenuItem Header="Honda">
                  <s:ElementMenuItem x:Name="MenuItem1"
                                     Header="Civic"
                                     Click="MenuItem1_Click" />
                  <s:ElementMenuItem Header="CRV"
                                     Command="local:SurfaceWindow1.MenuItemCommand" />
                  <s:ElementMenuItem Header="City"
                                     Click="MenuItem1_Click" />
                  <s:ElementMenuItem Header="Accord"
                                     Command="local:SurfaceWindow1.MenuItemCommand" />
              </s:ElementMenuItem>             
          </s:ElementMenu>
          </TextBlock>
          <TextBlock x:Name="CarDetails"
                     Height="200"
                     Width="200"
                     Grid.Row="1"
                     Text="Car Details"
                     VerticalAlignment="Center"
                     Background="DarkRed"
                     HorizontalAlignment="Center" />
      </Grid>  
</s:SurfaceWindow>

and code behind like(using directives removed),

namespace MySurfaceApplication
{
  /// <summary>
  /// Interaction logic for SurfaceWindow1.xaml
  /// </summary>
  public partial class SurfaceWindow1 : SurfaceWindow
  {
      public static readonly RoutedCommand MenuItemCommand = new RoutedCommand();
      /// <summary>
      /// Default constructor.
      /// </summary>
      public SurfaceWindow1()
      {
          InitializeComponent();
          // Add handlers for Application activation events
          AddActivationHandlers();       

      }


      /// <summary>
      /// Occurs when the window is about to close.
      /// </summary>
      /// <param name="e"></param>
      protected override void OnClosed(EventArgs e)
      {
          base.OnClosed(e);

          // Remove handlers for Application activation events
          RemoveActivationHandlers();
      }

      /// <summary>
      /// Adds handlers for Application activation events.
      /// </summary>
      private void AddActivationHandlers()
      {
          // Subscribe to surface application activation events
          ApplicationLauncher.ApplicationActivated += OnApplicationActivated;
          ApplicationLauncher.ApplicationPreviewed += OnApplicationPreviewed;
          ApplicationLauncher.ApplicationDeactivated += OnApplicationDeactivated;
      }

      /// <summary>
      /// Removes handlers for Application activation events.
      /// </summary>
      private void RemoveActivationHandlers()
      {
          // Unsubscribe from surface application activation events
          ApplicationLauncher.ApplicationActivated -= OnApplicationActivated;
          ApplicationLauncher.ApplicationPreviewed -= OnApplicationPreviewed;
          ApplicationLauncher.ApplicationDeactivated -= OnApplicationDeactivated;
      }

      /// <summary>
      /// This is called when application has been activated.
      /// </summary>
      /// <param name="sender"></param>
      /// <param name="e"></param>
      private void OnApplicationActivated(object sender, EventArgs e)
      {
          //TODO: enable audio, animations here
      }

      /// <summary>
      /// This is called when application is in preview mode.
      /// </summary>
      /// <param name="sender"></param>
      /// <param name="e"></param>
      private void OnApplicationPreviewed(object sender, EventArgs e)
      {
          //TODO: Disable audio here if it is enabled

          //TODO: optionally enable animations here
      }

      /// <summary>
      ///  This is called when application has been deactivated.
      /// </summary>
      /// <param name="sender"></param>
      /// <param name="e"></param>
      private void OnApplicationDeactivated(object sender, EventArgs e)
      {
          //TODO: disable audio, animations here
      }

      private void MenuItem1_Click(object sender, RoutedEventArgs e)
      {
          CarDetails.Text = (e.OriginalSource as ElementMenuItem).Header.ToString();
      }

      private void CommandBinding_Executed(object sender, ExecutedRoutedEventArgs e)
      {
          CarDetails.Text = (e.OriginalSource as ElementMenuItem).Header.ToString();
      }
  }
}

Build and Run the application.

Tagged Objects in Microsoft Surface – TagVisualizer,TagVisualization,TagVisualizationDefinition

Microsoft introduced a new concept called Tag driven application or Tagged Objects in Surface SDK through which the surface can identify Objects placed over the surface table.Object is printed with some tags that surface engine can read.Tags are either Byte Tags or Identity Tags.

How we can achieve this using Surface SDK?Let’s have a look at that.
I tried a sample by using Tagged Objects in Surface SDK.

Tag Visualization is possible by using these three classes,

• TagVisualizer – is what actually responding to the Tagged Object and showing up the TagVisualization when placing a tag.
• TagVisualization - is what we are showing in the surface when a tag is placed in the surface.
• TagVisualizationDefinition – is using for defining the tag value to which the TagVisualizer will respond and also source, physical location,orientation and other properties of the visualization.

So Let’s try a sample.

• Create a Surface project from the Visual Studio 2008 Template.
• In the SurfaceWindow1 add a TagVisualizer.

<s:TagVisualizer Name="TagVisualizer">

</s:TagVisualizer>

• Add a TagVisualization to the project.Add New Item>TagVisualization.I created TagVisualization SampleTagVisualization,

<s:TagVisualization x:Class="MySurfaceApplication.SampleTagVisualization"        
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="http://schemas.microsoft.com/surface/2008"
Loaded="SampleTagVisualization_Loaded">
<Grid Height="400"
Width="600"
Background="White">
<TextBlock Text="Some Tagged Object UI here."
        VerticalAlignment="Center"
        HorizontalAlignment="Center"
        Foreground="Red" />
</Grid>
</s:TagVisualization>

• Add TagVisualizationDefinition to SurfaceWindow1 for TagVisualizer.We can add this either by XAML or from code behind,

Either From XAML,

<s:TagVisualizer Name="TagVisualizer">
<s:TagVisualizer.Definitions>
<s:ByteTagVisualizationDefinition Value="192"
Source="SampleTagVisualization.xaml"
UsesTagOrientation="True"
TagRemovedBehavior="Fade"
PhysicalCenterOffsetFromTag="7.5,4.5"/>
</s:TagVisualizer.Definitions>
</s:TagVisualizer>

or From code behind,(add it in the constructor)

ByteTagVisualizationDefinition tagVisualizationDefinition = new 
ByteTagVisualizationDefinition();
tagVisualizationDefinition.Value = 192;
tagVisualizationDefinition.Source = new Uri("SampleTagVisualization.xaml",
UriKind.Relative);
tagVisualizationDefinition.UsesTagOrientation = true;
tagVisualizationDefinition.TagRemovedBehavior = TagRemovedBehavior.Fade;
tagVisualizationDefinition.PhysicalCenterOffsetFromTag = new 
Vector(7.5, 4.5);
TagVisualizer.Definitions.Add(tagVisualizationDefinition);

Build and Run the application in Surface Simulator.Tag Value is here 192.So give Tag Value as C0 (Hexadecimal).