RadListBox prevent scrollviewer to scrool with mouse wheel

[Etienne]

Hi,

I have some RadListbox inside a ScrollViewer and I would like to be able to scroll with the mouse wheel anywhere inside the scrollviewer.
I'm aware that the RadListBox has a ScrollViewer in his template that capture the MouseWheelEvent so I changed the template by the following.

<Style x:Key="UnscrollableRadListBoxStyle" TargetType="telerik:RadListBox" BasedOn="{StaticResource RadListBoxStyle}">
        <Setter Property="telerik:ScrollingSettingsBehavior.IsEnabled" Value="False"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:RadListBox">
                    <Grid>
                        <Border Padding="{TemplateBinding Padding}"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                Margin="0"
                                BorderThickness="{TemplateBinding BorderThickness}">
                            <Border.InputBindings>
                                <KeyBinding Command="telerik:ListControl.SelectAllCommand" Key="A" Modifiers="Control"/>
                            </Border.InputBindings>
                            <ItemsPresenter/>
                        </Border>
                        <ContentPresenter x:Name="PART_DropVisualPlaceholder" Visibility="Collapsed" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Now, the scroll works great, I can scroll with the mouse wheel everywhere. The problem is that when I drop an item inside one of the RadListBox, the DropVisualPlaceHolder appear at wrong place.

Do you have any idea of what I've done wrong ?

Thank you,

Etienne

[Geri]

Hi Etienne,

Thank you for contacting us.

It turns out this behavior is caused by an inaccuracy in the way the position of the DropVisualPlaceHolder is calculated. We updated your Telerik points for bringing this to our attention. The issue is logged in our system, you can track its progress here. We're sorry for any inconvenience caused.

Fortunately, we were able to come up with a workaround by creating a custom DropVisualProvider.
Please take a look at the attached project and tell us if it works for you.

Hope this helps.

Regards,
Geri
Telerik

 

 

[Etienne]

Hi Geri,

Thanks for the workaround, it works great!

Etienne

[Harish]

Hi,

I am not able to scroll my radlistbox by using mouse scroll wheel

<ScrollViewer x:Name="WellsScrollViewer" Grid.Row="2" Grid.ColumnSpan="2" HorizontalScrollBarVisibility="Hidden" 
                          VerticalScrollBarVisibility="Auto" HorizontalContentAlignment="Center" CanContentScroll="True">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                    </Grid.RowDefinitions>
                        <telerik:RadListBox x:Name="recentPinnedProject" Grid.Row="0" Width="370" Background="Transparent"
                                      HorizontalContentAlignment="Left"
                                      HorizontalAlignment="Left" BorderThickness="0"
                                      ItemsSource="{Binding EntitledWells}"
                                      SelectedItem="{Binding SelectedWell,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
                                      SelectionMode="Single" Margin="4,0,0,0">
                            <telerik:RadListBox.ItemTemplate>
                                <DataTemplate>
                                    <DockPanel HorizontalAlignment="Left" Height="Auto">
                                        <Image DockPanel.Dock="Left" Source="{Binding path}" Width="Auto" IsEnabled="{Binding IsEnabled}">
                                            <Image.Style>
                                                <Style TargetType="Image">
                                                    <Setter Property="Opacity" Value="1.0" />
                                                    <Style.Triggers>
                                                        <Trigger Property="Image.IsEnabled" Value="False">
                                                            <Setter Property="Opacity" Value="0.2" />
                                                        </Trigger>
                                                    </Style.Triggers>
                                                </Style>
                                            </Image.Style>
                                        </Image>
                                        <TextBlock DockPanel.Dock="Top" FontSize="15" FontFamily="Segoe UI" Text="{Binding Name}" FontWeight="DemiBold"
                                               Padding="3,0,0,0" Height="Auto" Width="300" VerticalAlignment="Center" TextAlignment="Left"  TextWrapping="WrapWithOverflow">
                                            <TextBlock.Style>
                                                <Style TargetType="TextBlock">
                                                    <Setter Property="Foreground" Value="White"/>
                                                    <Style.Triggers>
                                                        <Trigger Property="TextBlock.IsEnabled" Value="False">
                                                            <Setter Property="TextBlock.Foreground" Value="Gray" />
                                                        </Trigger>
                                                    </Style.Triggers>
                                                </Style>
                                            </TextBlock.Style>
                                        </TextBlock>
                                    </DockPanel>
                                </DataTemplate>
                            </telerik:RadListBox.ItemTemplate>
                            <telerik:RadListBox.ItemContainerStyle>
                                <Style TargetType="{x:Type telerik:RadListBoxItem}">
                                    <Setter Property="Margin" Value="5,5,5,5"/>
                                    <Setter Property="Background" Value="{Binding Color}"/>
                                    <Setter Property="BorderThickness" Value="1"/>
                                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                                    <Setter Property="HorizontalContentAlignment" Value="Left"/>
                                    <Setter Property="VerticalContentAlignment" Value="Top"/>
                                    <Setter Property="Padding" Value="1"/>
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="{x:Type telerik:RadListBoxItem}">
                                                <Grid x:Name="Chrome" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                                                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                                </Grid>
                                                <ControlTemplate.Triggers>
                                                    <Trigger Property="IsMouseOver" Value="true">
                                                        <Setter Property="Background" Value="#3F00D6FF" />
                                                    </Trigger>
                                                </ControlTemplate.Triggers>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </telerik:RadListBox.ItemContainerStyle>
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="MouseLeftButtonUp">
                                    <i:InvokeCommandAction Command="{Binding SelectedCommand}"/>
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </telerik:RadListBox>
                    </Grid>
            </ScrollViewer>

[Dilyan Traykov]

Hi Harish,

Thank you very much for the provided code snippet.

As mentioned in the original post, the RadListBox has a ScrollViewer inside its control template which handles the mouse wheel event and it is not passed on to the external ScrollViewer (WellsScrollViewer in your particular case). To overcome this, you can handle the PreviewMouseWheel event of the control in the following manner:

        public void recentPinnedProject_PreviewMouseWheel(object sender, MouseWheelEventArgs args)
        {
            args.Handled = true;
            var scrollViewer = this.recentPinnedProject.ParentOfType<ScrollViewer>();
            scrollViewer.ScrollToVerticalOffset(scrollViewer.VerticalOffset - args.Delta);
        }

For your convenience, I've also prepared a small sample project using the code snippet you provided which demonstrates this implementation.

Please have a look and let me know if such an approach works for you.

Regards,
Dilyan Traykov
Progress Telerik