StackPanel Scroll中的多个ListBox问题

本文关键字：ListBox 问题 Scroll StackPanel | 更新日期: 2023-09-27 18:27:17

这件简单的事让我抓狂。我不能用一个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是为了阅读而简化的），还有其他东西我应该使用吗？

StackPanel Scroll中的多个ListBox问题

问题是，ListBox模板内部有一个ScrollViewer，因此需要编辑模板才能执行此操作。我是这样做的：

<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边界中的一个项目，就可以滚动。

相关文章：