Question

使用WrapPanel ListBox ItemsPanelTemplate Vertical Orientation且VerticalScrollbarVisibility设置为Disabled，我无法滚动我的内容是鼠标滚轮在水平方向。

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

项目应以如下方式显示

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 listbox wrappanel滚动垂直方向

1 个答案: