none
How would you create Flippable controls in a list ? RRS feed

  • Question

  • Hi All,

    I'm asking myself a good question and would like to have your opinion about that :
    I want to create a ControlTemplate that would be a kind of filppable 3d panel embbeded in a listbox or anything that would have a collection of objects.
    For the example, imagine a listbox with Image controls in it's item template. It's a simple 2d gallery.
    But I want to make my Images Flippable to show backface of my image (with some informations in this backface).
    I've made it with a control template with a viewport3d and viewport2dvisual3d stuff. But Every time I have an Image, I have a viewport3d so I have many many Viewport3d. It's a simple method to keep Listbox, Wrappanel or anything else behavior to place images automatically.

    How would you make to show a gallery of flippable images keeping automatic placing of them in the container ?

    Hope my question is clear :P

    Thanks

    BR,
    Steeve
    Monday, February 2, 2009 10:35 AM

Answers

  • I was looking for the same type of control a while ago.  I guess I would use a list of ImageViewModels exposing the properties (ImageSource,ImageName,ImageSize,ImageDescription etc) for front and back and displaying them with a "flippable" datatemplate (for the view) like:

    <DataTemplate>
        <c:flippableControl>
             <c:flippableControl.FrontSide>
                <Image Source="{Binding Path=ImageSource}"/>
            </c:flippableControl.FrontSide>
            <c:flippableControl.BackSide>
                <StackPanel>
                    <TextBlock Text="{Binding Path=ImageName}"/>
                    <TextBlock Text="{Binding Path=ImageSize}"/>
                    <TextBlock Text="{Binding Path=ImageDescription}"/>
                </StackPanel>
            </c:flippableControl.BackSide>  
        </c:FlippableControl>
    </DataTemplate>
    I see it as a Headered ContentPresenter with a different layout.

    When it comes to the flippable template,I think this is exactly what you are looking for:
    (demo) http://www.interact-sw.co.uk/wpfapps/FlipList.xaml
    (info) http://www.interact-sw.co.uk/iangblog/2007/05/17/wpf-flippable-3D-list

    I used that code to get an understanding and modified it to my needs.
    /Hope it helps.
    /Henke


    • Marked as answer by Tao Liang Thursday, February 5, 2009 10:23 AM
    Monday, February 2, 2009 11:26 AM
  • Thanks For your answer.
    I've already seend this example but it was too complex for me.
    But it gives me an idea :

    I think I will try to create something in 2d and, only for the animation, show the 3d part of the control.
    It's approximatively what he does but his viewport3d is created for each 2d element at the loading of the 2d template.
    What I want is that no Viewport3d is created at the beginning but only when I click on the image.
    So here is what I will try :

    A simple 2d template with an image.
    In this template, I will add an eventtrigger on mouseup that will change the template to the 3dAnimation template
    I click on the image :
    It laods the 3d template, animating it and when animation is finished, I change the template to the 2d back template :D

    I will try to make this and post the answer ASAP here.

    Thanks
    • Marked as answer by Tao Liang Thursday, February 5, 2009 10:23 AM
    Monday, February 2, 2009 11:36 AM

All replies

  • I was looking for the same type of control a while ago.  I guess I would use a list of ImageViewModels exposing the properties (ImageSource,ImageName,ImageSize,ImageDescription etc) for front and back and displaying them with a "flippable" datatemplate (for the view) like:

    <DataTemplate>
        <c:flippableControl>
             <c:flippableControl.FrontSide>
                <Image Source="{Binding Path=ImageSource}"/>
            </c:flippableControl.FrontSide>
            <c:flippableControl.BackSide>
                <StackPanel>
                    <TextBlock Text="{Binding Path=ImageName}"/>
                    <TextBlock Text="{Binding Path=ImageSize}"/>
                    <TextBlock Text="{Binding Path=ImageDescription}"/>
                </StackPanel>
            </c:flippableControl.BackSide>  
        </c:FlippableControl>
    </DataTemplate>
    I see it as a Headered ContentPresenter with a different layout.

    When it comes to the flippable template,I think this is exactly what you are looking for:
    (demo) http://www.interact-sw.co.uk/wpfapps/FlipList.xaml
    (info) http://www.interact-sw.co.uk/iangblog/2007/05/17/wpf-flippable-3D-list

    I used that code to get an understanding and modified it to my needs.
    /Hope it helps.
    /Henke


    • Marked as answer by Tao Liang Thursday, February 5, 2009 10:23 AM
    Monday, February 2, 2009 11:26 AM
  • Thanks For your answer.
    I've already seend this example but it was too complex for me.
    But it gives me an idea :

    I think I will try to create something in 2d and, only for the animation, show the 3d part of the control.
    It's approximatively what he does but his viewport3d is created for each 2d element at the loading of the 2d template.
    What I want is that no Viewport3d is created at the beginning but only when I click on the image.
    So here is what I will try :

    A simple 2d template with an image.
    In this template, I will add an eventtrigger on mouseup that will change the template to the 3dAnimation template
    I click on the image :
    It laods the 3d template, animating it and when animation is finished, I change the template to the 2d back template :D

    I will try to make this and post the answer ASAP here.

    Thanks
    • Marked as answer by Tao Liang Thursday, February 5, 2009 10:23 AM
    Monday, February 2, 2009 11:36 AM