Question

这个简单的事情让我疯狂。我无法使用ScrollViewer来处理两个ListBox。这两个ListBox位于StackPanel内，每个ListBox都绑定到ObservableCollection。 ScrollViewer确实有效，但仅当用户将鼠标悬停在滚动条上时才有效。这就是我所拥有的;

<ScrollViewer VerticalScrollBarVisibility="Auto" PanningMode="VerticalOnly" PanningRatio="2" PanningDeceleration="5">
    <StackPanel>
        <TextBlock Margin="5,5,5,0" FontSize="18" FontWeight="Bold" Text="List 1:" />
        <ListBox Name="Listbox1" ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Padding="2" TextAlignment="Center">
                        <Run Text="{Binding List1_ID}"  />
                        <LineBreak />
                        <Run Text="{Binding Descript1}" />
                    </TextBlock>
                </DataTemplate>
            </ListBox.ItemTemplate>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel IsItemsHost="True" Orientation="Horizontal"  />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
        <TextBlock Margin="5,5,5,0" FontSize="18" FontWeight="Bold" Text="List 2:"   />
        <ListBox Name="Listbox2" ScrollViewer.HorizontalScrollBarVisibility="Disabled" />
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Padding="2" TextAlignment="Center">
                        <Run Text="{Binding List2_ID}"  />
                        <LineBreak />
                        <Run Text="{Binding Descript2}" />
                    </TextBlock>
                </DataTemplate>
            </ListBox.ItemTemplate>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel IsItemsHost="True" Orientation="Horizontal"  />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
</StackPanel>

我该如何处理？我应该使用ListBox之外的其他内容吗？我需要使用ItemTemplate（以上DataTemplate简化了阅读），还有其他我应该使用的内容吗？

Answer 1

问题是，ScrollViewer模板中是否有ListBox，因此您需要编辑模板才能执行此操作。以下是我的表现方式：

<Window.Resources>
    <SolidColorBrush x:Key="ListBox.Static.Background"
                     Color="#FFFFFFFF" />
    <SolidColorBrush x:Key="ListBox.Static.Border"
                     Color="#FFABADB3" />
    <SolidColorBrush x:Key="ListBox.Disabled.Background"
                     Color="#FFFFFFFF" />
    <SolidColorBrush x:Key="ListBox.Disabled.Border"
                     Color="#FFD9D9D9" />
    <Style x:Key="ListBoxStyle1"
           TargetType="{x:Type ListBox}">
        <Setter Property="Background"
                Value="{StaticResource ListBox.Static.Background}" />
        <Setter Property="BorderBrush"
                Value="{StaticResource ListBox.Static.Border}" />
        <Setter Property="BorderThickness"
                Value="1" />
        <Setter Property="Foreground"
                Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
        <!-- <Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
                Value="Auto" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility"
                Value="Auto" />
        <Setter Property="ScrollViewer.CanContentScroll"
                Value="true" />
        <Setter Property="ScrollViewer.PanningMode"
                Value="Both" /> -->
        <Setter Property="Stylus.IsFlicksEnabled"
                Value="False" />
        <Setter Property="VerticalContentAlignment"
                Value="Center" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ListBox}">
                    <Border x:Name="Bd"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"
                            Padding="1"
                            SnapsToDevicePixels="true">
                        <!-- <ScrollViewer Focusable="false"
                                      Padding="{TemplateBinding Padding}"> -->
                            <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        <!-- </ScrollViewer> -->
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled"
                                 Value="false">
                            <Setter Property="Background"
                                    TargetName="Bd"
                                    Value="{StaticResource ListBox.Disabled.Background}" />
                            <Setter Property="BorderBrush"
                                    TargetName="Bd"
                                    Value="{StaticResource ListBox.Disabled.Border}" />
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsGrouping"
                                           Value="true" />
                                <Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping"
                                           Value="false" />
                            </MultiTrigger.Conditions>
                            <!-- <Setter Property="ScrollViewer.CanContentScroll"
                                    Value="false" /> -->
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

用法：

<ScrollViewer Height="100">
    <StackPanel>
        <ListBox Style="{StaticResource ListBoxStyle1}" ... />
        <ListBox Style="{StaticResource ListBoxStyle1}" ... />
    </StackPanel>
</ScrollViewer>

注意：点击ScrollViewer范围内的项目，您就可以滚动。

StackPanel滚动问题中的多个ListBox

1 个答案: