Microsoft Surface - Flip & Scatter View Items

Question

Hi Guys,

I'm currently trying to get flip to work with scatterview items, and I'm having some trouble conceptually with it, using a plugin called Thriple (http://thriple.codeplex.com/).

Essentially, a 2 sided thriple control looks like this:

<thriple:ContentControl3D
  xmlns:thriple="http://thriple.codeplex.com/"
  Background="LightBlue"
  BorderBrush="Black"
  BorderThickness="2"
  MaxWidth="200" MaxHeight="200"
 >
<thriple:ContentControl3D.Content>
<Button 
  Content="Front Side"
  Command="thriple:ContentControl3D.RotateCommand"
  Width="100" Height="100"
  />
</thriple:ContentControl3D.Content>
<thriple:ContentControl3D.BackContent>
<Button 
  Content="Back Side"
  Command="thriple:ContentControl3D.RotateCommand"
  Width="100" Height="100"
  />
</thriple:ContentControl3D.BackContent>
</thriple:ContentControl3D>

What I'm struggling to grasp is if I should be making 2 separate ScatterView templates to bind to the data I want, and then each one would be the "front" and "back" of a scatterview item OR should i make 2 separate ScatterView items which are bound to the data I want, which is then bound to the "back" and "front" of a main ScatterView item?

If there is a better way of using doing flip animations with ScatterViewItem's, that'd be cool too!

Thanks!

Answer 1

I would create two separate templates for the data. To the user, it is still the same scatterviewitem (with two sides) so having them as two separate items makes little sense. You can specify which templates to use for front vs back in the properties of the ContentControl3D class. (They are of type DataTemplate)

Code-wise, it'd look something like this:

<thriple:ContentControl3D
  xmlns:thriple="http://thriple.codeplex.com/"
  Background="LightBlue"
  BorderBrush="Black"
  BorderThickness="2"
  MaxWidth="200" MaxHeight="200"
  Content="{Binding MyData}"
  BackContent="{Binding MyData}"
  ContentTemplate="{StaticResource MyFrontTemplate}"
  BackContentTemplate="{StaticResource MyBackTemplate}"   
 />

You could also just specify the content directly in the declaration of the control (like you have your buttons above) if that makes more sense for you. That saves you from having to create data templates for the content:

<thriple:ContentControl3D
  xmlns:thriple="http://thriple.codeplex.com/"
  Background="LightBlue"
  BorderBrush="Black"
  BorderThickness="2"
  MaxWidth="200" MaxHeight="200"
 >

<thriple:ContentControl3D.Content>
  <Grid>
    <TextBlock Text="I'm the front" />
    <TextBlock Text="{Binding SomeDataProperty}" />
    <Button 
        Content="Flip"
        Command="thriple:ContentControl3D.RotateCommand"
        Width="100" Height="100"
        />
  </Grid>
<thriple:ContentControl3D.BackContent>
  <Grid>
    <TextBlock Text="I'm the back" />
    <TextBlock Text="{Binding SomeOtherDataProperty}" />
    <Button 
        Content="Flip"
        Command="thriple:ContentControl3D.RotateCommand"
        Width="100" Height="100"
        />
  </Grid>
</thriple:ContentControl3D.BackContent>
</thriple:ContentControl3D>

Answer 2

Hello,

I am also trying to use this Tripple in Scatterview item but could not mahe them working inthe sense that the scatterview item did not size to the tripple user control.

have you suceed ? Could you post wour sample on how you have implment your scetterview item ?

Thnaks for help regards Serge