Microsoft Surface Lab #2: Surface Controls

CS320  Tangible  User  Interface     Wellesley  College  

Fall  2013  

Microsoft  Surface  Lab  #2:  Surface  Controls  

As  we  discussed  in  class  the  Microsoft  Surface  was  designed  to  integrate  easily  with  WPF  in  terms  of   input  events  (where  the  most  basic  level  of  Surface  input  is  Contact  events  including  ContactDown,   ContactUp,  and  ContactChanged)  and  user  interface  controls  so  that  almost  every  Surface  control  has  a   direct  WPF  equivalent.  Surface  controls  include:    

• SurfaceWindow   • SurfaceButton   • SurfaceToggleButton   • SurfaceCheckBox   • SurfaceRadioButton   • SurfaceSlider   • SurfaceScrollViewer   • SurfaceListBox   • SurfaceInkCanvas   • ScatterView   • SurfaceTextBox   • SurfacePasswordBox  

• SurfaceMenu  and  SurfaceContextMenu  

• SurfaceLibraryContainer  ,  SurfaceLibraryContainerBarView,  SurfaceLibraryContainerStackView   • SurfaceDragDrop  

• ElementMenuItems  

A  detailed  description  and  sample  code  for  each  of  these  controls  is  available  in  Chapter  5  of  Developing   for  the  Microsoft  Surface  and  online  in  the  MSDN  library.  

Task  1:    working  with  basic  controls  

Open  SurfaceText1  in  Visual  C#  Express.  This  sample  application  was  developed  to  illustrate  the  use  of   several  basic  Surface  controls.  Open  the  Microsoft  Surface  Simulator,  then  run  the  application  and   explore  its  use.  Stop  the  debugging.  Open  SurfaceWindow1.xaml.  

What  is  the  child  element  of  SurfaceWindow?  Open  the  xaml  file,  what  controls  are  used  in  this   application,  to  what  events  they  respond?  Fill  in  the  following  table:  

Modify  the  xaml  code  so  that  when  the  SurfaceButton  is  selected  from  the  list,  three  vertically  stacked   SurfaceButtons  appear.  In  the  xaml  file,  add  an  event  handler  for  each  SurfaceButton  so  that  clicking   each  of  the  buttons  result  in  a  different  response.  In  the  cs  file  implement  the  event  handlers.  Your   event  handlers  should  implement  the  following  functionality:  changing  the  color  of  a  button’s   background,  changing  a  button’s  text,  and  displaying  a  notification  message.      

Task  2:  Tag  Visualization  and  Tag  Visualizer  

1)  On  the  Project  menu  in  Visual  C#  click  Add  New  Item.  

In  the  Categories  list,  click  Surface.  In  the  Templates  list,  Click  TagVisualization  (WPF).    Name  the   TagVisualization  object.  A  new  TagVisualization  layout  file  (i.e.  xaml)  is  created  with  an  accompanying   code  file  (i.e.  cs).  

2)  Modify  the  TagVisualization  xaml  file:  

Add  Height  =  “96”  and  Width  =  “150”  as  properties,  add  a  Label  to  the  Grid  Object.  Set  “Basic”   as  the  default  content  of  the  label,  name  the  label  VisualizationLabel.  

3)  Modify  the  TagVisualization.cs  file:  

Add  a  new  public  method  called  UpdateVisualization  that  accepts  a  string  as  an  argument.  The  method   displays  the  string  as  the  content  of  VisualizationLabel.  

4)  Open  SurfaceText1.xaml.  Add  a  Tag  Visualizer  element  to  the  SurfaceWindow.  The  Tag  Visualizer   should  contain  the  Grid  element.  Add  two  TagVisualizer  definitions,  each  specifies  a  particular  tag  value.   For  each  tag  value  specify  a  Source  (a  xaml  file  to  be  displayed)  and  an  event  handler  for  the  

VisualizationCreated  event.  When  you  are  finished  your  xaml  file  should  look  like  this:    

  5)  Open  SurfaceText1.xaml.cs  and  create  two  methods  corresponding  to  each  event  handler  specified  in   the  TagVisuailzation  definitions  (in  SurfaceText1.xaml).  Your  event  handling  methods  should  have  two   parameters:  object  sender,  and  TagVisualizationEventArgs  e.  Your  complete  methods  should  be  similar   to  the  following  code

Now  run  the  program  using  the  Simulator.  Use  the  tag  input  tool  to  test  your  application.  You  can  set   the  value  of  the  tag  input  to  0xc1  and  to  0xc2.  Close  the  project  when  you  are  done.  

Task  3:  Working  with  Scatter  View  

One  of  the  rich  and  most  commonly  used  Surface  control  is  the  ScatterView  Control.  Items  that  are   added  to  the  scatter  view  control  are  automatically  enabled  for  advanced  manipulations  such  as   dragging,  rotating,  and  resizing.  To  explore  ScatterView,  open  the  project  MyFirstSurfaceApplication.     Open  SurfaceWindow.xaml.  Scroll  through  the  xaml  file  until  you  locate  the  ScatterView  tag  with  the   Name  property  set  to  “My  Photos”.  You  will  see  that  in  this  tag  we  use  a  template  for  displaying  images   from  a  data  bound  collection.  Data  binding  connects  data  to  specific  controls.  Here  the  Microsoft   Surface  SDK  will  automatically  create  a  separate  ScatterViewItem  for  each  image  in  the  bound  collection   and  add  of  the  items  to  the  ScatterView.    

Open  the  SurfaceWindow1.xaml.cs  file.  In  the  constructor  for  the  SurfaceWindow1  class  you  can  see  the   following  instruction.  This  instruction  binds  the  photo  files  collection  to  ScatterView,  generates  the   individual  ScatterViewItems  and  adds  them  to  the  ScatterView.  

For  this  instruction  to  work  correctly  you  must  verify  the  string  photosFiles  is  set  to  a  valid  path.  Verify   the  path  and  then  uncomment  this  instruction  and  then  run  the  application.  Take  some  time  to  try  and   move  the  images  around.  Stop  the  application  and  comment  back  this  instruction.  

Next,  we  are  going  to  manually  create  ScatterViewItems  and  add  an  Image  object  into  the   ScatterViewItem.  First,  still  in  the  constructor  for  the  SurfaceWindow1  class  find  the  following   instruction  and  uncomment  it.  

Then  find    the  CreateScatterViewItems  method  which  is  located  further  on  in  the  

SurfaceWindow1.xaml.cs  file.  In  this  method  we  are  explicitly  creating  ScatterViewItems  and  adding   Image  objects  into  the  ScatterViewItems.  We  also  set  the  border  brush  color  and  thickness  of  each   ScatterViewItem.    

  Explore  other  properties  of  ScatterViewItems.  Modify  the  method  so  that  all  ScatterViewItems  will   appear  in  a  pile  in  the  center  of  the  surface  screen  (the  dimensions  of  the  surface  screen  are  1024x768).   What  property  do  you  need  to  change?    

The  last  two  instructions  in  the  CreateScatterViewItems  method  add  two  event  listeners  to  

ScatterViewItems.  Next,  add  two  methods  to  the  this  file  that  implements  the  corresponding  event   handlers  so  that  the  color  of  a  ScatterViewItem  changes  to  red  when  the  item  is  activated  and  changes   back  to  beige  when  the  item  is  deactivated.  Each  of  these  methods  takes  two  arguments:  object  sender   and  RoutedEventArgs  e.