wpf listbox wrappanel scroll vertical orientation

Question

Using WrapPanel in ListBox ItemsPanelTemplate with Vertical Orientation and VerticalScrollbarVisibility set to Disabled, I can't scroll my content with mouse wheel in horizontal direction.

I want to make my ListBox to view like it can be scroll-able in horizontal direction but the items should appear in top to bottom direction with respect to the window height.

Item should appear in this manner as below

1   4   7   10
2   5   8   11  ...
3   6   9   12

The main problem is I can't scroll with mouse. Using scrollbar it works well, using keyboard selection it works well.

Here's what I did

<ListBox ItemContainerStyle="{StaticResource ResourceKey=ContainerStyle}" Background="{StaticResource StaticBackground}" ItemsSource="{Binding ListSource}" ScrollViewer.VerticalScrollBarVisibility="Disabled">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Vertical" ScrollViewer.VerticalScrollBarVisibility="Disabled"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

Flow of data from top to bottom with horizontal orientation

and this is my ItemContainerStyle

<Style TargetType="{x:Type ListBoxItem}" x:Key="ContainerStyle">
    <Setter Property="ContentTemplate" Value="{StaticResource DT_TestTemplate}" />
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Border x:Name="Border"
                        Margin="5,5,5,5" 
                        SnapsToDevicePixels="true">
                    <Border.Background>
                        <SolidColorBrush Color="Transparent" />
                    </Border.Background>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Unselected" >
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                          Storyboard.TargetProperty="(Panel.Background).
              (SolidColorBrush.Color)">
                                        <EasingColorKeyFrame KeyTime="0"
                                   Value="White" />
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                          Storyboard.TargetProperty="(Panel.Background).
              (SolidColorBrush.Color)">
                                        <EasingColorKeyFrame KeyTime="0"
                                   Value="#FFF34235" />
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SelectedUnfocused">
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                          Storyboard.TargetProperty="(Panel.Background).
              (SolidColorBrush.Color)">
                                        <EasingColorKeyFrame KeyTime="0"
                                   Value="#FFF34235" />
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsSelected"  Value="True" >
            <!--<Setter Property="ContentTemplate" Value="{StaticResource DT_TestTemplateSelectedItem}" />-->
            <Setter Property="BorderBrush" Value="Transparent" />
        </Trigger>
    </Style.Triggers>
</Style>

What do I do to make it scroll with mouse wheel ?

Darshan Darshan · Accepted Answer · 2017-02-27T06:04:20

I used ScrollViewer as parent container for my list box and handled its PreviewMouseWheel event behind the code.

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled" PreviewMouseWheel="ScrollViewer_PreviewMouseWheel">
    <ListBox ItemContainerStyle="{StaticResource ResourceKey=ContainerStyle}" Background="{StaticResource StaticBackground}" ItemsSource="{Binding ListSource}" ScrollViewer.VerticalScrollBarVisibility="Disabled">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Vertical" Height="{Binding Path=ActualHeight, RelativeSource={RelativeSource AncestorType={x:Type ListBox}, Mode=FindAncestor}}" ScrollViewer.VerticalScrollBarVisibility="Disabled"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    </ListBox>
</ScrollViewer>

Here's my behind the code.

private void ScrollViewer_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
{
    ScrollViewer viewer = sender as ScrollViewer;
    viewer.ScrollToHorizontalOffset(viewer.HorizontalOffset - e.Delta);
}

Found this post helpful.

wpf listbox wrappanel scroll vertical orientation

1 Answers