This is a migrated thread and some comments may be shown as answers.

RadListBox prevent scrollviewer to scrool with mouse wheel

4 Answers 67 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Etienne
Top achievements
Rank 1
Etienne asked on 05 Mar 2015, 10:09 PM
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

4 Answers, 1 is accepted

Sort by
0
Accepted
Geri
Telerik team
answered on 09 Mar 2015, 05:01 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Etienne
Top achievements
Rank 1
answered on 11 Mar 2015, 06:17 PM
Hi Geri,

Thanks for the workaround, it works great!

Etienne
0
Harish
Top achievements
Rank 1
Veteran
answered on 30 Dec 2020, 02:18 PM

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>

0
Dilyan Traykov
Telerik team
answered on 04 Jan 2021, 09:23 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
ListBox
Asked by
Etienne
Top achievements
Rank 1
Answers by
Geri
Telerik team
Etienne
Top achievements
Rank 1
Harish
Top achievements
Rank 1
Veteran
Dilyan Traykov
Telerik team
Share this question
or