当鼠标悬停在*任何*内容上时如何使 ScrollViewer 滚动 [英] How can make ScrollViewer scroll when mouse is over *any* content

问题描述

我强调any"的原因是因为 CanContentScroll 在我的 ScollViewer 中没有完全工作.让我解释一下场景:我有一个 ScrollViewer，它有三个标签，每个标签后跟一个 ListBox.我在 ScrollViewer 中有这个内容的原因是因为我不希望每个 ListBox 都有一个 ScrollBar，我只想要一个全局" 滚动条.问题是当光标在 ListBox 上时 ScrollViewer 不会滚动.我尝试在 ScrollViewer、ListBox 和 ListBoxItem 样式中将 CanContentScroll 属性设置为 true，但没有成功.我应该使用其他控制类型吗?这是我的代码示例:

The reason I stress 'any' is because CanContentScroll is not fully working in my ScollViewer. Let me explain the scenario: I have a ScrollViewer that has three Labels followed by a ListBox each. The reason I have this content inside the ScrollViewer is because I don't want each ListBox to have a ScrollBar, I just want one "global" ScrollBar. The problem is that when the cursor is over the the ListBox the ScrollViewer doesn't scroll. I've tried to set CanContentScroll property to true in the ScrollViewer, the ListBox and on the ListBoxItem style, without success. Is there other Control type I should use? Here is my code sample:

<UserControl x:Class="Telbit.TeStudio.View.Controls.TestStepsView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my="clr-namespace:Telbit.TeStudio.View.Controls">

<UserControl.Resources>
    <DataTemplate DataType="{x:Type my:TestStepsStepViewModel}">
        <my:TestStepsStepView HorizontalAlignment="Stretch"/>
    </DataTemplate>

    <Style x:Key="StepItemStyle" TargetType="{x:Type ListBoxItem}">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsSelected" Value="{Binding Mode=TwoWay, Path=IsSelected}"/>
        <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Border Name="Border" SnapsToDevicePixels="true" Background="Transparent" BorderThickness="0" Padding="1">
                        <ContentPresenter/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter TargetName="Border" Property="Background" Value="#40a0f5ff"/>
                        </Trigger>
                        <Trigger Property="IsKeyboardFocusWithin" Value="True">
                            <Setter Property="IsSelected" Value="True" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<UserControl.Background>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFF2F2F2"/>
        <GradientStop Color="Gainsboro" Offset="1"/>
    </LinearGradientBrush>
</UserControl.Background>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="30"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <HeaderedContentControl Grid.Row="0" >
        <HeaderedContentControl.Header>
            <Grid Background="#e8f2f8">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="30"/>
                    <ColumnDefinition MinWidth="200" Width="*" />
                    <ColumnDefinition Width="75"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="120"/>
                    <ColumnDefinition Width="130"/>
                </Grid.ColumnDefinitions>

                <Label Grid.Column="0" Content="#" BorderBrush="#70add4" BorderThickness="2 2 0 2"/>
                <Label Grid.Column="1"
                       Content="FolderName" 
                       BorderBrush="#70add4" BorderThickness="0 2 0 2"/>
                <Label Grid.Column="2" Content="Type" BorderBrush="#70add4" BorderThickness="0 2 0 2" Margin="-20 0 0 0"/>
                <Label Grid.Column="3" Content="Auto Start" BorderBrush="#70add4" BorderThickness="0 2 0 2" Margin="-20 0 0 0"/>
                <Label Grid.Column="4" Content="Run After" BorderBrush="#70add4" BorderThickness="0 2 0 2" Margin="-20 0 0 0"/>
                <Label Grid.Column="5" Content="Stop After" BorderBrush="#70add4" BorderThickness="0 2 0 2" Margin="-20 0 0 0"/>
                <Label Grid.Column="6" Content="Delay (s)" BorderBrush="#70add4" BorderThickness="0 2 0 2" Margin="-20 0 0 0"/>
                <Label Grid.Column="7" Content="Timestamp" BorderBrush="#70add4" BorderThickness="0 2 0 2" Margin="-20 0 0 0"/>
                <Label Grid.Column="8" Content="Edited by" BorderBrush="#70add4" BorderThickness="0 2 2 2" Margin="-20 0 0 0"/>
            </Grid>
        </HeaderedContentControl.Header>
    </HeaderedContentControl>
    <ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="1" VerticalAlignment="Top" CanContentScroll="True">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="30"/>
                <RowDefinition Height="3*"/>
                <RowDefinition Height="30"/>
                <RowDefinition Height="3*"/>
                <RowDefinition Height="30"/>
                <RowDefinition Height="3*"/>
            </Grid.RowDefinitions>

            <Label Name="lblSetup" Grid.Row="0" 
                   VerticalContentAlignment="Center"
                   BorderBrush="DarkGray" BorderThickness="0 0 0 1"
                   TextBlock.FontSize="10pt" TextBlock.FontWeight="Bold" TextBlock.Foreground="#949494"
                   Content="Setup" AllowDrop="True"/>
            <ListBox Name="itmCtrlSetupSteps" Grid.Row="1"
                     BorderThickness="0" Background="Transparent"
                     ItemsSource="{Binding SetupSteps}" SelectionMode="Single"
                     HorizontalContentAlignment="Stretch" 
                     ItemContainerStyle="{StaticResource StepItemStyle}"
                     SelectionChanged="manageStep_SelectionChanged"
                     ScrollViewer.CanContentScroll="True"
                     />

            <Label Name="lblTest" Grid.Row="2" 
                   VerticalContentAlignment="Center"
                   BorderBrush="DarkGray" BorderThickness="0 0 0 1"
                   TextBlock.FontSize="10pt" TextBlock.FontWeight="Bold" TextBlock.Foreground="#949494"
                   Content="Test" AllowDrop="True"/>
            <ListBox Name="itmCtrlTestSteps" Grid.Row="3"
                     BorderThickness="0" Background="Transparent"
                     ItemsSource="{Binding TestSteps}" SelectionMode="Single"
                     HorizontalContentAlignment="Stretch"
                     ItemContainerStyle="{StaticResource StepItemStyle}"
                     SelectionChanged="manageStep_SelectionChanged"
                     />

            <Label Name="lblTearDown" Grid.Row="4" 
                   VerticalContentAlignment="Center"
                   BorderBrush="DarkGray" BorderThickness="0 0 0 1"
                   TextBlock.FontSize="10pt" TextBlock.FontWeight="Bold" TextBlock.Foreground="#949494"
                   Content="Tear Down" AllowDrop="True"/>
            <ListBox Name="itmCtrlTearDownSteps" Grid.Row="5"
                     BorderThickness="0" Background="Transparent"
                     ItemsSource="{Binding TearDownSteps}" SelectionMode="Single"
                     HorizontalContentAlignment="Stretch"
                     ItemContainerStyle="{StaticResource StepItemStyle}"
                     SelectionChanged="manageStep_SelectionChanged"
                     />
        </Grid>
    </ScrollViewer>
</Grid>
</UserControl>

推荐答案

问题是即使子列表框没有可见的滚动条，但根据他们的模板.幸运的是，这个模板很容易修改.对每个子列表框执行此操作，或者更好地使用通用样式:

The problem is that even though child list boxen don't have scroll bars visible, they do have ScrollViewer in them according to their template. Fortunately this template is easily modifiable. Do this for each child list box, or better yet put it in common style:

<ListBox.Template>
    <ControlTemplate TargetType="ListBox">
        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderBrush}">
            <ItemsPresenter/>
        </Border>
    </ControlTemplate>
</ListBox.Template>

除了 ScrollViewer 包裹在 ItemsPresenter 之外，默认值几乎相同.

The default is almost the same with the exception of ScrollViewer wrapping around ItemsPresenter.

这篇关于当鼠标悬停在*任何*内容上时如何使 ScrollViewer 滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！