Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can make ScrollViewer scroll when mouse is over *any* content

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>
like image 853
jpsstavares Avatar asked Jun 04 '10 17:06

jpsstavares


People also ask

How do I use a scroll viewer?

Scroll viewers enable content to extend beyond the bounds of the viewport (visible area). Users reach this content by manipulating the scroll viewer surface through touch, mousewheel, keyboard, or a gamepad, or by using the mouse or pen cursor to interact with the scroll viewer's scrollbar.

How do I add vertical scrolling to a page?

To add vertical scrolling to your page, wrap the page content in a scroll viewer. This XAML shows how to enable horizontal scrolling, place an image in a scroll viewer and enable zooming. It's typical for a ScrollViewer control to exist as a composite part of other controls.

Why can't I see ScrollViewer in child list Boxen?

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.

How much should the scrollbar overlap the content in ScrollViewer?

When the scrollbar is visible it is overlaid as 16px on top of the content inside your ScrollViewer. In order to ensure good UX design you will want to ensure that no interactive content is obscured by this overlay. Additionally if you would prefer not to have UX overlap, leave 16px of padding on the edge of the viewport to allow for the scrollbar.


1 Answers

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>

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

like image 160
repka Avatar answered Oct 14 '22 03:10

repka