Etiquetas

, ,

Para empezar a desarrollar nuestra primera aplicación para Surface solo tenemos que abrir el Visual Studio e ir a File-New Proyect-Visual c#-Surface-v1.0 y en las plantillas disponibles escoger

Sourface Application (WPF)

Se creara un proyecto con la siguiente estructura básica la cual es muy parecida a la de una aplicación WPF salvo por algunas diferencias.

Uno de ellas es que podemos ver como entre las referencias tenemos:

Microsoft.Surface

Microsoft.Surface.Presentation

Microsoft.Surface.Presentation.Controls

Ahora vamos a modificar nuestro archivo SurfaceWindoes1.xml para que luzca de la siguiente manera.

<s:SurfaceWindow x:Class=”HelloSurfaceWPF.SurfaceWindow1″

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

xmlns:s=”http://schemas.microsoft.com/surface/2008&#8243;

Title=”HelloSurfaceWPF” >

<s:SurfaceWindow.Resources>

<ImageBrush x:Key=”WindowBackground” Stretch=”None” Opacity=”0.6″ ImageSource=”pack://application:,,,/Resources/WindowBackground.jpg”/>

<Storyboard x:Key=”RotateAnimation”>

<DoubleAnimation

From=”0″ To=”360″

Storyboard.TargetName=”Transform”

Storyboard.TargetProperty=”Angle”

Duration=”0:0:2″ />

</Storyboard>

</s:SurfaceWindow.Resources>

<s:SurfaceWindow.Triggers>

<EventTrigger RoutedEvent=”FrameworkElement.Loaded”>

<BeginStoryboard Storyboard=”{StaticResource RotateAnimation}”/>

</EventTrigger>

</s:SurfaceWindow.Triggers>

<Canvas Background=”{StaticResource WindowBackground}”  s:Contacts.ContactDown=”OnCanvasContactDown”>

<TextBlock

x:Name=”AppText”

Text=”Hello, Surface!”

Canvas.Left=”375″ Canvas.Top=”350″

FontFamily=”Tahoma” FontSize=”36″

HorizontalAlignment=”Center” VerticalAlignment=”Center”

RenderTransformOrigin=”0.5,0.5″>

<TextBlock.RenderTransform>

<RotateTransform x:Name=”Transform” Angle=”0″ />

</TextBlock.RenderTransform>

</TextBlock>

</Canvas>

</s:SurfaceWindow>

Y en el SurfaceWindows1.xml.cs agregaremos:

private void OnCanvasContactDown(object sender, ContactEventArgs e)

{

// The contact position is stored here.

Point contactPosition;

// Get the position of the current contact.

contactPosition = e.Contact.GetPosition(this);

// Set the X and Y position of AppText

// in relation to the canvas.

Canvas.SetLeft(AppText, contactPosition.X);

Canvas.SetTop(AppText, contactPosition.Y);

}

Esta es la acción que se ejecutara cuando toquemos la superficie del Surface o exactamente sobre el canvas que hemos creado en el cual podemos ver s:Contacts.ContactDown=”OnCanvasContactDown” , para nuestro caso solo estamos haciendo que cambie la posición de la caja de texto al sitio donde hemos pinchado.

Lo único que hemos hecho es agregar una caja de texto con unos cuantos efectos.

Lo siguiente que debemos hacer es abrir el simulador que ya sabemos que está en Inicio- Todos los programas-Microsoft Surface SDK 1.0 –Tools- Suface Simulator.

Es muy problema que dependiendo de la configuración de tu equipo de la tarjeta gráfica falle la carga del Attract application.

Lo siguiente es ejecutar nuestra aplicación yendo al Visual Studio y luego a Debug-Star Debuggin.

Deberíamos ver el simulador con nuestra aplicación.

Y eso es todo el resto fácil solo hay que volverse un experto en WPF y XAML🙂

En el siguiente post explicare un poco sobre las características físicas del Surface lo cual nos hará comprender mejor como hace posible Surface este nivel de interacción.