This post describes about the programming aspects of Surface tags.If you are not familiar with surface and surface tags please see posts below
Surface Application Development using Simulator and VisualStudio.
Identifying Finger ,Tag and Blob in Surface using Contacts class
TagVisualizer
TagVisualizer is a ContentControl derived from SurfaceContentControl and it’s basic function is to show Tag Visualizations when the corresponding tag is placed on the surface. Tag Visualizations are added by means of TagVisualizationDefinition.For that the TagVisualizer has a property called Definitions which is of type TagVisualizationDefinitionCollection.Each TagVisualizationDefinition tells what to display when a tag is being placed.
TagVisualizationDefinitions
This defines the visual against the tag value.The visual can be a UserControl and it is mentioned in the form of Uri.There are 2 types of tags in surface as you know.So there should be a mechanism to differentiate these tags while displaying.The method here used here is inheritance.ByteTagVisualizationDefinition which is derived from abstract class TagVisualizationDefinition deals with the byte tags and IdentityTagVisualizationDefinition derived from same ,deals with Identity tags.A simple xaml code which shows a red colored usercontrol on byte tag of value 10 is shown below.
<Grid Background="{StaticResource WindowBackground}">
<s:TagVisualizer>
<s:TagVisualizer.Definitions>
<s:ByteTagVisualizationDefinition Value="10"
Source="ByteTagVisualization.xaml">
</s:ByteTagVisualizationDefinition>
</s:TagVisualizer.Definitions>
</s:TagVisualizer>
</Grid> <UserControl x:Class="SurfaceApplication1.ByteTagVisualization"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300" Background="Red">
<Grid>
</Grid>
</UserControl>
ByteTagVisualization is a normal UserControl available in WPF.Hope this is clear like water.Shows the UserControl ByteTagVisualization when we place a byte tag with value 10 in the area covered by TagVisualizer.
TagVisualization
This is again a ContentControl which can be used as Source in TagVisualizationDefinition.The advantage here is that, the TagVisualization class has some properties which are related to the tag and tag data.Below goes steps which explains how to create TagVisualization.
- Create a UserControl
- In the xaml file change the root tag as s:TagVisualization where s is xmlns:s="http://schemas.microsoft.com/surface/2008" namespace of surface controls.
- In the xaml.cs file change the base class to TagVisualization.Also change the constructor to suit the class.
A sample TagVisualization is given below
<s:TagVisualization x:Class="SurfaceApplication1.IdentityTagVisualization"
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">
<StackPanel>
<TextBlock>An Identity tag has been placed</TextBlock>
</StackPanel >
</s:TagVisualization>
Getting tag values in TagVisualization and databinding
Even though the TagVisualization has the Property TagData we can’t use that in binding because that is not WPF friendly.
<TextBlock Text="{Binding VisualizedTag.Type,ElementName=tagVisualization}" /> The above code won’t work
To enable databinding in TagVisualization we have to write our own properties which are data bindable.Then to get the value of tag which is placed over TagVisualizer override the OnGotTag method and get value from VisualizedTag property.
public partial class IdentityTagVisualization : TagVisualization
{
public long? TagValue
{
get { return (long?)GetValue(TagValueProperty); }
set { SetValue(TagValueProperty, value); }
}
public static readonly DependencyProperty TagValueProperty =
DependencyProperty.Register("TagValue", typeof(long?), typeof(IdentityTagVisualization));
public IdentityTagVisualization()
{
InitializeComponent();
}
protected override void OnGotTag(RoutedEventArgs e)
{
if (VisualizedTag != null)
{
TagValue = (VisualizedTag.Type == TagType.Byte) ?
VisualizedTag.Byte.Value :
VisualizedTag.Identity.Value;
}
base.OnGotTag(e);
}
}
}
Now you can databind the value of the tag in xaml.
<s:TagVisualization x:Class="SurfaceApplication1.IdentityTagVisualization"
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" x:Name="tagVisualization">
<StackPanel>
<TextBlock>Tag has been placed value is </TextBlock>
<TextBlock Text="{Binding TagValue,ElementName=tagVisualization}" />
</StackPanel >
</s:TagVisualization>
Download sample from here.
