locked
wpf "carousel listbox" Something like the Spotify app RRS feed

  • Question

  • Hello,
    I need advice on how to create something like a "carousel listbox", which will dynamically add or subtract items from the listbox on the basis of changes in the size of the program window, and also that they be grouped into pages.

    Something like the Spotify app.

    See picture:
    http://i.imgur.com/sCOMB05.gifv

    I tried to create something similar to help PathListbox http://expressionblend.codeplex.com , but still that's not it. Then I tried created a listbox that displays items horizontally: see source code

    I would be very glad for any advice. Thanks a lot.

    <ListBox x:Name="ListBoxPlaylists" 
                     ItemsSource="{Binding FeaturedPlaylistsCvs,IsAsync=True}"
                     ItemTemplate="{StaticResource FeaturedPlaylistsItemTemplate}" 
                     ScrollViewer.HorizontalScrollBarVisibility="Hidden"
                     ScrollViewer.VerticalScrollBarVisibility="Disabled"  
                     SelectionMode="Single" 
                     helpers:ListBoxBehavior.ScrollSelectedIntoView="True"
                     IsSynchronizedWithCurrentItem="true">
    
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel x:Name="MyStackPanel" 
                        VirtualizingPanel.IsVirtualizing="True" 
                        Orientation="Horizontal"  
                        IsItemsHost="True">
                            <i:Interaction.Behaviors>
                                <ei:FluidMoveBehavior Duration="0:0:0:1" AppliesTo="Children">
                                    <ei:FluidMoveBehavior.EaseY>
                                        <QuinticEase EasingMode="EaseInOut"/>
                                    </ei:FluidMoveBehavior.EaseY>
                                    <ei:FluidMoveBehavior.EaseX>
                                        <QuinticEase EasingMode="EaseInOut"/>
                                    </ei:FluidMoveBehavior.EaseX>
                                </ei:FluidMoveBehavior>
                            </i:Interaction.Behaviors>
                        </VirtualizingStackPanel>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
    
                <ListBox.ItemContainerStyle>
                    <Style TargetType="{x:Type ListBoxItem}">
                        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                        <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
                        <Setter Property="SnapsToDevicePixels" Value="True"></Setter>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ListBoxItem">
                                    <ContentPresenter x:Name="Cont" Margin="10" Content="{TemplateBinding Content}"
                                         ContentTemplate="{TemplateBinding ContentTemplate}"/>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver"
                        Value="True">
                                <Setter Property="Background"
                        Value="Transparent" />
                            </Trigger>
                            <Trigger Property="IsSelected"
                        Value="True">
                                <Setter Property="Background"
                        Value="Transparent" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </ListBox.ItemContainerStyle>
    
            </ListBox>
    
       <DataTemplate x:Key="FeaturedPlaylistsItemTemplate">
                <DataTemplate.Resources>
                    <DropShadowEffect x:Key="z-depth1" BlurRadius="5" ShadowDepth="1" Direction="270" Color="Black"/>
                </DataTemplate.Resources>
                <Grid x:Name="Grid1" d:DesignWidth="199" d:DesignHeight="316" MaxHeight="316" Background="{DynamicResource WindowBackground}"  >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="199"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <cachedImage:Image Grid.Row="0" 
                                       Stretch="UniformToFill" 
                                       ImageUrl="{Binding ImgUrl}" 
                                       Width="199" 
                                       Height="199"
                                       RenderOptions.BitmapScalingMode="HighQuality" 
                                       Margin="0" 
                                       VerticalAlignment="Stretch" 
                                       HorizontalAlignment="Stretch" />
                    <StackPanel Grid.Row="1" Height="47" VerticalAlignment="Top" Width="Auto">
                        <TextBlock Margin="10,10,10,0" TextTrimming="CharacterEllipsis" Text="{Binding Title}"/>
                        <TextBlock Margin="10,10,10,0" TextWrapping="Wrap" TextTrimming="CharacterEllipsis" MaxHeight="50" Text="{Binding Description}"/>
                    </StackPanel>
    
    
                </Grid>
            </DataTemplate>


    Thursday, January 5, 2017 10:14 AM

All replies


  • Hi ORRNY66,

    >>Then I tried created a listbox that displays items horizontally

    I found the following article describes a suitable way to implement this.

    WPF: Carousel Control:
    https://www.codeproject.com/Articles/181835/WPF-Carousel-Control

    I also found the third-party control wpf-coverflow may be helpful for you.

    WPF Cover Flow Tutorial:
    http://d3dal3.blogspot.sg/search?q=wpf+tutorial&by-date=true

    WPF itself does not province such a control to use, I suggest you can refer to some good three-party control to achieve this effect.

    Note: This response contains a reference to a third party World Wide Web site. Microsoft is providing this information as a convenience to you. Microsoft does not control these sites and has not tested any software or information found on these sites; therefore, Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. There are inherent dangers in the use of any software found on the Internet, and Microsoft cautions you to make sure that you completely understand the risk before retrieving any software from the Internet.

    Best Regards,

    Yohann Lu


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Friday, January 6, 2017 5:27 AM