Navigation in Microsoft Surface

Question

I'm writing an application for Microsoft's Surface table. I need to navigate between screens (Windows or Pages). Does the SurfaceSDK offer anything akin to a NavigationWindow? If not, how can I navigate between screens?

Answer 1

Hi Chris -- the SDK does not any offer Surface-specific versions of those controls, mostly because such navigations are usually not appropriate in Surface applications. Before diving in to build your app, you might consider the advice in the Surface User Experience Guidelines and the design and development training videos, which may inspire you to build your app in way that provides a more compelling multitouch and multiuser experience.

Answer 2

I totally agree with Josh that you should really rethink how you build your application's user experience.

But you may just open another window on top of the current window. Though with complex interactions between different windows this really is hard to maintain...

Answer 3

This should be fairly easy to build yourself. In the simplest case, you can have your main window have a contentcontrol somewhere that hosts your "screen". When you need to change screen, just change the Content property of the contentcontrol to the content of the new screen (which probably is a usercontrol). If you also want animations (like slide transitions between screens) you'd have to do some more work and I'd recommend creating a separate (user) control that just handles screen changes.

<s:SurfaceWindow .... />
  <Grid x:Name="LayoutRoot">
    <ContentControl x:Name="screenHolder" />
    <s:SurfaceButton Click="changeScreenButton_Click" Content="Change to next screen" />
  </Grid>
</s:SurfaceWindow>

Then to change screen, you'd do something like this in the click handler:

screenHolder.Content = new MyNewScreenControl();

In a MVVM architecture, you'd typically have said content bound to a property on the viewmodel and have the viewmodel take care of choosing which "screen" to show (by e.g. setting its screen property to another viewmodel). A command binding from the UI could trigger the screen change for instance:

public ScreenViewModelBase CurrentScreen
{
    get { return _currentScreen; }
    set
    {
        if (_currentScreen != value)
        {
          _currentScreen = value;
          RaisePropertyChanged("CurrentScreen");
        }
    }
}

public ICommand ChangeToNextScreenCommand
{ 
    get { return new RelayCommand(() => CurrentScreen = GetNextScreenFromList()); } 
}

The above UI would be changed to:

<s:SurfaceWindow .... />
  <!-- Assuming we have a data context setup which is our viewmodel above -->
  <Grid x:Name="LayoutRoot">
    <ContentControl Content="{Binding CurrentScreen}"/>
    <s:SurfaceButton Command="{Binding ChangeToNextScreen}" Content="Change to next screen" />
  </Grid>
</s:SurfaceWindow>