Hello Surface
Så har jeg fået tid til at lege lidt med Surface SDK og emulator. Jeg har fået leget lidt med ScatterView kontrollen. Det er sjovt. Dog mangler jeg et Surface, eller en af de nye HP skærme som er med multitouch. Men indtil videre må jeg nøjes med emulatoren. Jeg mener bestemt at have hørt, at man skulle kunne installere en sekundær mus, for derved at kunne lave multitouch (to cursors). Det har jeg ikke fået til at virke. Det kan være jeg hørte forkert. Men anyways, jeg er klart til at deploye på Surface for at teste J
Jeg har lavet en lille demo, der.... gæt engang.... viser billeder og video. I mit ScatterView (Scatter), som er en ItemControl, har jeg indlæst både billeder og videoer. ScatterView smider indholdet i kontrollen helt tilfældigt på skærmen/Surface. Efterfølgende kan man så interagere med indholdet: flytte det rundt, skalere det og rotere det. Alt sammen meget naturligt hvis du har et Surface bord. Med emulatoren, skal det hele gøres med musen, hvilket selvfølgelig slet ikke er samme oplevelse. Der er mange andre kontroller med til Surface SDKet, som gør det lidt nemmere at arbejde med touch.
Koden til min ScatterView ser ud som følgende:
<s:ScatterView Name="Scatter" ItemTemplateSelector="{StaticResource itemTemplateSelector}" >
<s:ScatterView.ItemContainerStyle>
<Style TargetType="{x:Type s:ScatterViewItem}">
<Setter Property="CanRotate" Value="{Binding ElementName=RotateCheckbox, Path=IsChecked}" ></Setter>
<Setter Property="Opacity" Value="{Binding ElementName=OpacitiySlider, Path=Value}"></Setter>
</Style>
</s:ScatterView.ItemContainerStyle>
</s:ScatterView>
Codebehinden der publicerer mit ScatterView ser sådan her ud:
List<string> l = new List<string>();
l.AddRange(System.IO.Directory.GetFiles(@"C:\Users\Public\Pictures\Sample Pictures", "*.jpg", SearchOption.AllDirectories));
l.AddRange(System.IO.Directory.GetFiles(@"C:\Users\Public\Videos\Sample Videos", "*.wmv", SearchOption.AllDirectories));
Scatter.ItemsSource = l;
Set i WPF regi, så er der flere interessante ting i XAML koden. For det første bruger jeg en ItemTemplateSelector for at kunne håndtere både Images og MediaElements i min ScatterView (dette ville også gøre sig gældende for andre ListControls). Min ItemTemplateSelector skal finde ud af hvad det er for en type element som sættes ind i ScatterView, og derefter vælge den rigtige DataTemplate. Koden ser ud som følgende:
public class MyDataTemplateSelector : DataTemplateSelector
{
public override DataTemplate SelectTemplate(object obj, DependencyObject container)
{
string item = (string)obj;
if (item != null && item.EndsWith("jpg"))
{
Window window = Application.Current.MainWindow;
return window.FindResource("ImageTemplate")
as DataTemplate;
}
else if (item != null && item.EndsWith("wmv"))
{
Window window = Application.Current.MainWindow;
return window.FindResource("MediaElementTemplate")
as DataTemplate;
}
return null;
}
}
Det betyder, at når der tilføjes et item til mit ScatterView, så eksekveres MyDataTemplateSelector og finder ud af hvilken template der skal anvendes. DataTemplates er defineret i XAML i Resources.
<s:SurfaceWindow.Resources>
<local:MyDataTemplateSelector x:Key="itemTemplateSelector"/>
<DataTemplate x:Key="ImageTemplate">
<Image Source="{Binding}" ></Image>
</DataTemplate>
<DataTemplate x:Key="MediaElementTemplate">
<MediaElement Source="{Binding}" Width="300" Height="200" ></MediaElement>
</DataTemplate>
</s:SurfaceWindow.Resources>
Der er lidt databinding i XAML'en. I mit scatterview ville jeg gerne lave lidt interaktion med de tilføjede items. Derfor har jeg i mit ScatterViews tilføjet en style til alle ScatterViewItems, hvor jeg binder CanRotate og Opacity properties til to properties på to andre kontroller:
<StackPanel Width="200" >
<s:SurfaceCheckBox IsChecked="True" Name="RotateCheckbox" Width="200">Rotate</s:SurfaceCheckBox>
<s:SurfaceSlider Name="OpacitySlider" Minimum="0" Maximum="1" Value="1"></s:SurfaceSlider>
</StackPanel>
På denne vis kan jeg ved flytte slideren, gøre alle ScatterViewItems, i dette tilfælde Images og MediaElements, mere eller mindre transparente. Ved at fjerne markeringen i RotateCheckbox, så er der ingen af ScatterViewItems der kan roteres på skærmen længere. Desuden er der lavet databinding i mine datatemplates.
Desuden kan man også kan lave XNA projekter og deploye dem på Surface. Mon ikke vi også kommer til at se mange sjove spil på Surface? Der er i hvert fald en ny interaktionsform at tage stilling til og mange muligheder.
Hivs du vil se koden i sin helhed, kan den downloades her.
Man er ikke helt klar til at slippe SDK'et løs. Når det sker, så vil jeg tro det sker her: http://community.surface.com/
