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>
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.
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.
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.
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.
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
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With