wpf 列表框包装面板滚动垂直方向

Question

在 ListBox ItemsPanelTemplate 中使用 WrapPanel 并将 Vertical Orientation 和 VerticalScrollbarVisibility 设置为 Disabled，我可以'不要在水平方向上用鼠标滚轮滚动我的内容。

我想让我的 ListBox 看起来像它可以在水平方向上滚动，但项目应该相对于 window 高度从上到下的方向显示。

项目应以如下方式显示

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

主要问题是我不能用鼠标滚动。使用滚动条效果很好，使用键盘选择效果很好。

这是我所做的

<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

这是我的 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>

我该怎么做才能让它用鼠标滚轮滚动？

Answer 1

我使用 ScrollViewer 作为我的列表框的父容器，并在代码后面处理了它的 PreviewMouseWheel 事件。

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

下面是我的代码。

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

发现此 post 有帮助。

wpf 列表框包装面板滚动垂直方向

wpf listbox wrappanel scroll vertical orientation

c#

wpf

listbox

wrappanel

scrollviewer