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

问题描述

我之所以强调'any'是因为CanContentScroll在我的ScollViewer中不能完全正常工作. 让我解释一下这种情况: 我有一个ScrollViewer，它具有三个标签，每个标签后面紧跟着一个ListBox.我在ScrollViewer中包含此内容的原因是因为我不想每个ListBox都有一个ScrollBar，我只想要一个全局" 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="Folder\Name" 
                       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>

推荐答案

问题是，即使子列表框没有可见的滚动条，但根据模板它们的确有ScrollViewer.幸运的是，此模板易于修改.为每个子列表框执行此操作，或者最好将其置于通用样式:

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