Microsoft Surface - Flip & Scatter View Items

Question

В настоящее время я пытаюсь получить флип для работы с элементами рассеивания, и у меня возникли некоторые проблемы с ним, используя плагин Thriple (http://thriple.codeplex.com/).

По существу, 2 односторонней трехкратная управления выглядит следующим образом:

<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> 

То, что я изо всех сил, чтобы понять, если я должен сделать 2 отдельные шаблоны ScatterView для связывания с данными, которые я хочу, а затем каждый один был бы «фронтом» и «назад» элемента рассеивания ИЛИ должен я сделать 2 отдельных элемента ScatterView, которые привязаны к данным, которые я хочу, которые затем привязаны к «спине» и «фронту» основного элемента ScatterView ?

Если есть лучший способ использовать флип-анимацию с помощью ScatterViewItem, это тоже будет классно!

Спасибо!

Answer 1

Я бы создал два отдельных шаблона для данных. Для пользователя это все тот же метод рассеяния (с двумя сторонами), поэтому иметь их как два отдельных элемента имеет мало смысла. Вы можете указать, какие шаблоны использовать для фронта и обратно в свойствах класса ContentControl3D. (Они типа DataTemplate)

Code-мудр, он бы выглядеть примерно так:

<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}" 
/> 

Вы также можете просто указать содержание непосредственно в объявлении элемента управления (например, у вас есть кнопки выше), если это имеет для вас больше смысла. Это избавляет вас от необходимости создавать шаблоны данных для контента:

<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>