none
How to create a 'scrollable' stackpanel ?

    Question

  • Hi

    I'm a beginning WPF developer and I've got a rather complex question for guys wit more experience. I hope you'll understand my problem, else just ask me!

    So here we go: I want to make a user control in WPF that is based on a stackpanel (horizontal). This stackpanel will contain databound images. Since there are too many images to show on one screen, I want to add two 'buttons' (left en right of the stackpanel) that allow the user to scroll through them. Specifically, this means that pressing the right button causes an animation to begin that slides all images to the left (continuous motion), resulting in an additional image on the right, and the loss of the most left image...

    Little example: Say 5 images on 1 screen:    < A B C D E F >
    If I press '>': resulting in < B C D E F G >
    But the switch of each images location need to be continuous motions.

    I really hope you understand my problem. Since I'm still a beginner, I don't really have an idea on how to begin developing this.
    I hope you guys with all your experience can lend me a hand !

    Thanks !

    Saturday, May 30, 2009 7:44 AM

Answers

  • Hi AmorJogo,

    in my first reply I placed a link to how to implement ITunes coverflow in #c which is nothing else then an imageflow. Because it is not easy to understand for a wpf beginner I gave you a sample of a simple animation. If you put more rectangles in the right one disappears and on the left side you get a new one.

    There is a Microsoft sample http://msdn.microsoft.com/en-us/library/ms771331.aspx for a photo viewer app.
    and another one http://msdn.microsoft.com/en-us/library/ms771672.aspx for a photo-flipper app. Download this samples and have a look on it. I learned a lot by analyzing those
    samples provided by Microsoft. The flipper-app (when I remember rigt) is very close to your requirement.

    Anyway there is a standard component to use if content exceeds display bounderies and that is scrollviewer. Here is an example of how to use it.

    <Window x:Class="WpfApplication1.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300" Loaded="Window_Loaded">
        <Grid>
            <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Hidden" x:Name="panel">
                <StackPanel Orientation="Horizontal">
                    <Rectangle Width="80" Height="80" Fill="blue" Margin="4"/>
                    <Rectangle Width="80" Height="80" Fill="red" Margin="4"/>
                    <Rectangle Width="80" Height="80" Fill="green" Margin="4"/>
                    <Rectangle Width="80" Height="80" Fill="black" Margin="4"/>
                    <Rectangle Width="80" Height="80" Fill="yellow" Margin="4"/>
                    <Rectangle Width="80" Height="80" Fill="Orange" Margin="4"/>
                </StackPanel>
            </ScrollViewer>
            
        </Grid>
    </Window>
    
    Do you want to have an endless loop? Means you start again when the last image is reached?
    If you are looking for a more complex sample click the links above or have a look at the link in my first reply.

    Good luck
    kind regards
    hapevau
    • Marked as answer by AmorJogo Saturday, May 30, 2009 2:29 PM
    Saturday, May 30, 2009 1:50 PM

All replies

  • Hi

    I faced similar problem earlier

    Then I used Listbox and its items being arranged in horizontal direction and i also placed two buttons on either sides of the list box to scroll the listbox items

    ofcourse this may or may not be helpfull to ur problem but this is one among the solutons in many

    and here is the style to change the default direction of listbox items

    i mean this will have the list items in horizontal directions

    <Style x:Key="StyleListBox" TargetType="ListBox">
    <Setter Property="ItemsPanel">
    <Setter.Value>
    <ItemsPanelTemplate>
    <StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Left"/>
    </ItemsPanelTemplate>
    </Setter.Value>
    </Setter>
    </Style>


    Thanks & Regards
    Seshu
    Saturday, May 30, 2009 8:10 AM
  • Well I was thinking about using a Listbox, but using the buttons won't cause an 'animated' motion of these images. They will just 'jump' from location A to location B...
    Is there a way around that ?

    Thanks !
    Saturday, May 30, 2009 8:15 AM
  • Hello,

    sounds like coverflow. Here is an example using animations.
    http://mentas.spaces.live.com/blog/cns!A8D899E9B03A6E15!605.entry

    Why not to bind to a slider instead of using 2 buttons? Here a little sample. 
    To keep it simple I put the RenderTransform under each Rectangle. Normally you should do that in a style in the Resources. 
    <Window x:Class="WpfApplication1.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Grid.Resources>
                
            </Grid.Resources>
            <Slider Minimum="0" Maximum="300" x:Name="slider"></Slider>
            <Canvas Grid.Row="1">
                <Rectangle Width="40" Height="40" Fill="Blue" Canvas.Left="10">
                    <Rectangle.RenderTransform>
                        <TranslateTransform X="{Binding ElementName=slider, Path=Value}"></TranslateTransform>
                    </Rectangle.RenderTransform>
                </Rectangle>
                <Rectangle Width="40" Height="40" Fill="Blue" Canvas.Left="70">
                    <Rectangle.RenderTransform>
                        <TranslateTransform X="{Binding ElementName=slider, Path=Value}"></TranslateTransform>
                    </Rectangle.RenderTransform>
                </Rectangle>
                <Rectangle Width="40" Height="40" Fill="Blue" Canvas.Left="130">
                    <Rectangle.RenderTransform>
                        <TranslateTransform X="{Binding ElementName=slider, Path=Value}"></TranslateTransform>
                    </Rectangle.RenderTransform>
                </Rectangle>
            </Canvas>
        </Grid>
    </Window>
    
    hope, that helps

    kind regards hpv
    Saturday, May 30, 2009 10:09 AM
  • Well, this definitely helps 'animating' the motion of these images...
    But it still doesn't really solve my problem regarding the fact that the last image should be 'dumped' and a new image should appear...

    Any thoughts about that ?
    Saturday, May 30, 2009 12:47 PM
  • Hi AmorJogo,

    in my first reply I placed a link to how to implement ITunes coverflow in #c which is nothing else then an imageflow. Because it is not easy to understand for a wpf beginner I gave you a sample of a simple animation. If you put more rectangles in the right one disappears and on the left side you get a new one.

    There is a Microsoft sample http://msdn.microsoft.com/en-us/library/ms771331.aspx for a photo viewer app.
    and another one http://msdn.microsoft.com/en-us/library/ms771672.aspx for a photo-flipper app. Download this samples and have a look on it. I learned a lot by analyzing those
    samples provided by Microsoft. The flipper-app (when I remember rigt) is very close to your requirement.

    Anyway there is a standard component to use if content exceeds display bounderies and that is scrollviewer. Here is an example of how to use it.

    <Window x:Class="WpfApplication1.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300" Loaded="Window_Loaded">
        <Grid>
            <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Hidden" x:Name="panel">
                <StackPanel Orientation="Horizontal">
                    <Rectangle Width="80" Height="80" Fill="blue" Margin="4"/>
                    <Rectangle Width="80" Height="80" Fill="red" Margin="4"/>
                    <Rectangle Width="80" Height="80" Fill="green" Margin="4"/>
                    <Rectangle Width="80" Height="80" Fill="black" Margin="4"/>
                    <Rectangle Width="80" Height="80" Fill="yellow" Margin="4"/>
                    <Rectangle Width="80" Height="80" Fill="Orange" Margin="4"/>
                </StackPanel>
            </ScrollViewer>
            
        </Grid>
    </Window>
    
    Do you want to have an endless loop? Means you start again when the last image is reached?
    If you are looking for a more complex sample click the links above or have a look at the link in my first reply.

    Good luck
    kind regards
    hapevau
    • Marked as answer by AmorJogo Saturday, May 30, 2009 2:29 PM
    Saturday, May 30, 2009 1:50 PM
  • Thanks !
    The two msdn samples did it for me !
    Saturday, May 30, 2009 2:29 PM