Archive

Posts Tagged ‘Surface SDK’

PowerPoint Presentation : Overview of Microsoft Surface Application Design

May 13, 2013 1 comment

There are a lot of sources of information on the net where you can get different topics based on Surface application design. For one case where I need to present to a customer an overview on designing Surface Application, I though it would be much easier to get basic information, group in a presentation that I coud reuse at any time.

This is what I have done so far and customer personnal attending such presentation really appreciate . Clear enough, concentrate with the essential.

Note that this is not a support for developping an application but more a starting point on what you should know, mixed with my own experience from the field.

As it has been really usefull work for me, I decide to share it with you.

You can view the presentation here

Good luck !

Starting your PixelSense application efficiently : Loading Controls

May 12, 2013 Leave a comment

When you start to build application for the SUR40 and Microsoft PixelSense, all used to work really perfectly well on the simulator and your development PC. When you start to install and run your application directly on the device in Surface mode, you start to face a challenging but important issue:

Get your application started before the Surface Shell timeout

All of us as found the famous startup time-out handle by the Surface shell. It could happen that your application appears to never start in that mode or it start but not all the time.

Never block the main UI thread

The entry point of your Surface application is the main surface window, and this is also the main UI thread for your application. If you perform some long operation within the loading process of that main Window, you are blocking the main UI thread and you will definitely get the famous time-out message

How does it really works

A Microsoft Surface application must not block the UI thread for more than 5 seconds. If it does so, the system closes and tries to restart the unresponsive applications twice. If it must close the application a third time because of unresponsiveness, Surface returns to Launcher and does not try any further restarts.

Loading your application while using potentially long loading of controls

When you start to build an application, you usually start to fill up your SurfaceMainWindow.xaml grid with the different control that you think your need to load.
The following code snapshot shows that scenario:


Potentially Locked Main Surface windows loading process

<s:SurfaceWindow x:Class=”SurfaceAppStartup1.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;

Xmlns:controls=”clr-namespace:SurfaceAppStartup1.Controls”

Title=”SurfaceAppStartup1″

>

<Grid x:Name=”Content” Height=”Auto”>

<s:SurfaceScrollViewer x:Name=”_mainHScrollViewer” ScrollChanged=”_mainHScrollViewer_ScrollChanged”

Width=”{Binding Element Name=Main, Path=Width}”

PanningMode=”None”

HorizontalScrollBarVisibility=”Hidden”

VerticalScrollBarVisibility=”Hidden” DataContext=”{Binding}”>

<StackPanel x:Name=”AppPanel” Orientation=”Horizontal” Background=”Transparent” >

<!– Load background Window –>

<controls:BackgroundImage DataContext=”{Binding}”/>

<!– Load WordMapControl  –>

<controls:WorldMapControl/>

</StackPanel>

</s:SurfaceScrollViewer>

</Grid>

</s:SurfaceWindow>

From the sample above, you can see that we are instantiated directly in Xaml the loading of the WorldMapControl UserControl as <controls:WorldMapControl/>. In this case if the loading time that that control is longer than plan your main UI thread will be block and you will get the Surface Shell Time-Out.

Solution : Use of Content control and Binding

From the sample above, we simply replace the <controls:WorldMapControl/> by the code below :

<ContentControl DataContext=”{Binding Source={StaticResource Locator}, Path=WorldMapViewModelStatic}”

Content=”{Binding MapControl, UpdateSourceTrigger=PropertyChanged}” />

You can guess from code above that we are using binding and an MVVM pattern to reach our goal. By doing so, the main UI thread will not be block during the loading of the control. Instead it will prepare a Content control that will have its Content property bind to a MVVM property named MapControl. When the MapControl property change, the control will be injected in the ContentControl.

What to do then while my user will wait for control to load?

This is a really interesting question and there are different approach. First avoid using a simple loading screen without adding value for the user. Remember that as soon as a Surface application has started, the application is interactive and user expect to do something with it:

  1. Provide simple content information in relation with your application that users can already explore
  2. Indicate visually that remaining content are currently loading
  3. When the remaining controls have completed and the full application is ready,bring attention to users with visual component or effect that something more can be done

Important :

When all your application initialization content is done, your application must call the Microsoft.Surface.ApplicationServices.SignalApplicationLoadComplete method to dismiss the opening activity when the application is ready to appear.

You can download sample project which illustrate this from the msdn code sample.

Hoping this small post will be helpfull for you.

Sample Nested ScrollViewer interaction design

November 18, 2012 4 comments

In one of my project on a Samsung SUR40 with Microsoft PixelSense, I was facing to an interesting interaction design based on different information groups needed to be logically displayed and accessible in a natural way.

The final idea is illustrated by the picture below:

The visual tree

The most external brown rectangle is a panorama panel which should be able to be scroll in both horizontal directions in order to have freely access to child group control. When the user will reach is interesting group of information represented by the blue rectangle, inside information, in my scenario was to be able to scroll vertically the information. And here comes the interaction logic from where you have nested scrollable control.

In order to reach my goal the layout has been define by the following tree, but you could adjust in according to your need.

Control architecture

The resulting XAML of the main panel :

 

The resulting XAML of the group control :

 

Interaction & design key point:

From the interaction that we have setup and as mentioned earlier, we need to get it smooth, logic and natural. If we look closer to the inside group control, they are nothing much that SurfaceList box control with have been define to handle vertical scroll only in that sample. So in each group control we will be able to naturally scroll for vertical data.

But then how can we scroll the panel horizontally?

The first answer to this question: Easy we just need to scroll the whole panel with the help of the most outside scroll viewer. That is correct. But asking the user to scroll the whole panel by placing is finger at the bottom narrow space of the control, do you thing user will all think of that? Absolutely not.

The best approach and most natural way would be that users initiating a horizontal scroll from any group control should be able to start the main panel to scroll, as illustrate bellow:

Apparently should be possible without any trouble but in fact the scroll does not happen.

As we have seen in our layout, each control group embedded a scrollviewer set for vertical scrolling. Horizontal scroll is disabling, but even if it would be enable it will scroll the group control content only. So why does this not work?

The reason came from the fact that the touch is capture by the scrollwiewer and the handle is set to true, so the event in not propagated up to the visual tree.

Nested scrollViewer behavior comes to the rescue

In order to allows that interaction, we have define a nested scrollviewer behavior class which pass to the parent scrollviewer control interaction which is not dedicated to its child.

By adding this behavior to each group control scrollviewer, the gesture will be passing to the parent scrollviewer which is the main panel and you will have a natural scrolling effect.

You can download the project from msdn sample here.
The sample include MVVM pattern

Microsoft Surface slate available for Pre Order

October 16, 2012 Leave a comment

Every geek or developper like me would like to keep informed of the latest developments with Surface.
That’s done, just got the info to my mail box today that  Surface is available for pre-order today
starting at 9am Pacific Time on Surface.com. Get your order in today!

How to debug remotely your Microsoft PixelSense application

July 11, 2012 1 comment

Recently I receive request on how to debug a Microsoft PixelSense application from Visual Studio, either from customers or forums.
You will find below experience I get and what works for me in such approcah

When debugging on Microsoft Surface there are 2 ways of doing it:

  • By having a developpement environment installed directly on the SUR40 for debugging on the machine
  • By using remote debuging

Developpement environement on the unit

Personnaly with past experience on the previous verison of Surface, I was expeimenting the first approach. This solution require some good organisation. Organisation in the sense that installing a complete developpement environement can result in an unstable environment. So of course I would not recommand that approach on a production unit. Before going to such solution you should take care to get in hand a clean backup system in a safe place in order to be able to recover a clean machine. The way I was using it is by creating a deployement image of the SUR40 machine at the desire state I want it. Then keep the generated .WIM file in a safe place. At anytime with that file and a WinPE boot disk I can recover my clean system. Once done you can install whatever you want on the unit and debug directly on it.

Remote debugging

I have spend some times to explore the remote debuggnig on Surface and what do we need for that.
The first thing to consider is the way you are going to identify remote users. In case you connect your unit to your company domain, then user rights will be much easier to manage and hande. In the oposite, you will need to have your developpement account on on your dev machine duplicated on the Surface unit.

Setup the SUR40 environment:

    • Ccreate the same account used on your dev machine or login in to your domain with same account
    • Install on the VS2010 remote debugger ( 64 bits or 32 bits based on your scenarios ). You can get those binaries from http://www.microsoft.com/fr-fr/download/details.aspx?id=475
    • Create a folder that will receive you compile debug bits ( for instance C:\RemoteAppDebug)
    • Be sure to get full right on that created folder from your dev account on your dev machine

Set up your Visual sudio environment:

  • Open your Surface project
  • Compile your project in Debug and copy all bits including symbole files to your RemoteAppDebug directory on your SUR40
  •  Create a new configuration setting and call it “Remote Debug SUR40”
  • Right click on your project and select properties

The following picture illustrate setting to define for your remote debugging :

 

As shown above the important thing is to set the Remote Folder of the SUR40 defined earlier as it would be on the local machine.
What I mean here is if you map for instance the C drive of the SUR to a drive on your machine in will not work.

The next step is to specify that you need to run the debug setting on a remote machine. As shown on above picture be sure to check the “Use remote machine” option and specify the name of your SUR40 in the text box.
In case you are not connected to a domain with your SUR40 unit, you will have to enter here the machine name by passing the account to be used like <username>@Machinename

Start debugging:

When you have all this in place you can now debug your application. For that you need to :

  • Start the Visual Remote debugger on the unit based on the target aplication you deploy ( x86 or x64 )
  • Be sure you can access to the RemoteAppDebug folder from your devlopment machine
  • Press F5 to start debuggin your application

Trouble you might face on :

Firewal settings which prevent the conection with your remote environment
– Authentification

For those , please refer to recommandation and check settings according to the following information :
http://msdn.microsoft.com/en-us/library/bt727f1t.aspx

IMPORTANT : This debugging scenario allows you to debug you application when the SUR40 is in administrative mode as this request need admnistration priviledge

Change Thumb color style from a SurfaceListBox

May 28, 2012 1 comment

I have been ask recently in a post where to change the color and general style of surfaceListbox. Basically what will be affected if the ScrollViewer object within the SurfaceListbox. To do so the easiest way is as follow :

  1. Create an empty Surface project in VS2010
  2. Open your project withinh Expression Blend
  3. On your empty main windows add a SurfaceListbox control
  4. Right click on the Control and select EditTemplate -> Edit Copy
  5. You are now able to edit the template

The part in the template which is dedicated to the scroll bar is the following . Let’s take the sample of the vertical scrollbar

<!– ScrollBar Vert Thumb –>

<Style x:Key=”SurfaceScrollBarThumbStyle”

TargetType=”{x:Type s:SurfaceThumb}”

BasedOn=”{StaticResource SurfaceHitAreaBaseStyle}”>

<Setter Property=”Template”>

<Setter.Value>

<ControlTemplate TargetType=”{x:Type s:SurfaceThumb}”>

<ControlTemplate.Resources>

<Storyboard x:Key=”Touch”>

<DoubleAnimation Duration=”0:0:0.05″

Storyboard.TargetName=”Thumb”

Storyboard.TargetProperty=”Width”

To=”16″/>

<ThicknessAnimation Duration=”0:0:0.05″

Storyboard.TargetName=”Thumb”

Storyboard.TargetProperty=”Margin”

To=”-1,0,-1,0″ />

</Storyboard>

<Storyboard x:Key=”Release”>

<DoubleAnimation Duration=”0:0:0.1″

Storyboard.TargetName=”Thumb”

Storyboard.TargetProperty=”Width”

To=”14″/>

<ThicknessAnimation Duration=”0:0:0.1″

Storyboard.TargetName=”Thumb”

Storyboard.TargetProperty=”Margin”

To=”0,0,0,0″ />

</Storyboard>

</ControlTemplate.Resources>

<Grid x:Name=”Grid”

Background=”{TemplateBinding Background}”

SnapsToDevicePixels=”{TemplateBinding SnapsToDevicePixels}”>

<Rectangle x:Name=”Thumb”

Height=”Auto”

Width=”14″

HorizontalAlignment=”Stretch”

VerticalAlignment=”Stretch”

Fill=”{DynamicResource {x:Static s:SurfaceColors.ThumbEnabledBrushKey}}” />

</Grid>

<ControlTemplate.Triggers>

<Trigger Property=”s:TouchExtensions.AreAnyInputDevicesCapturedWithin”

Value=”True”>

<Trigger.EnterActions>

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

</Trigger.EnterActions>

<Trigger.ExitActions>

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

</Trigger.ExitActions>

</Trigger>

<Trigger Property=”IsEnabled”

Value=”False”>

<Setter Property=”Fill”

TargetName=”Thumb”

Value=”{DynamicResource {x:Static s:SurfaceColors.ThumbDisabledBrushKey}}”/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

From the template snipet above we are interresting on the bold section of it.
The background property of the grid element define tha color of the scroll bar.
The Fill property of the Rectangle child element of the grid represent the Thumb color.

Simply define your own style brush and reference them for this 2 properties

Hope it helps


								
Categories: SURFACE Tags: , , ,

Handling an XPS document in a Scatterview – Surface SUR40

May 14, 2012 2 comments

I have recently been in front of a situation where I was looking for a simple way to display an XPS document in a ScatterView without having to go for a new UserControl in my library.
I used to be lazy by default 🙂

So for that i start by :

  • Creating a simple Surface 2.0 project in VS2010
  • Add a DocumentViewer as a content of a Scatterview
  • Load the XPS document into the documentViewer

Sounds so simple right. Now let’s run your project and you will see that DocumentViewer is not responding to touch.

Simple solution to go, as the first solution we should all have primary in mind, try to see if we can hack the original default template of the DocumentViewer.

Yes we could:

  1.  Simply open your project in Blend and edit the current DocumentViewer template
  2. Look for ContentControl entries and the ScrollViewer element
  3. Replace the ScroolViewer entries by <s:SurfaceScrollViewer>

From that steps apply the style to your DocumentViewer in your project and run your application . Hmm cool you have a ScrollViewer in a Scatterview and you can scroll pages with vertical scrollbar.
Hmmm, yes but why i cannot scroll my document by panning directly the content naturally.

Simple, when you know and after some search, the only thing missing is to set the PanningMode of the SurfaceScrollViewer in the template you define earlier.

Run your application again and now you can manipulate your document page normally with fingers.

Hope it can help others
We use to learn every day simple things which are just nearby your nose 🙂

A full demo project can be download here

regards

Categories: SURFACE Tags: , ,