ComboBox inside ScrollViewer doesn't scroll its dropped down items using MouseWheel

Question

I have held of asking here in hopes to find an answer by searching first but I have been unsuccessful.

I have what is a search filter bar on the left side of my window, looks something like this (I have omitted most of the controls for size sake and because most of them are ComboBox and experiencing the same issue):

<Grid Grid.Column="0" Background="#FF1E2125">
<Grid.RowDefinitions>
    <RowDefinition Height="*"/>
    <RowDefinition Height="auto"/>
</Grid.RowDefinitions>

<ScrollViewer x:Name="scroll_filter" Grid.Row="0" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">

    <StackPanel Grid.Row="0" Orientation="Vertical" Margin="0,0,0,10">

        <TextBlock Grid.Row="0" Text="User" Foreground="White" VerticalAlignment="Center" FontSize="12" Margin="10,3,10,3"/>

        <ComboBox x:Name="cbo_search_user" Grid.Row="1" Margin="10,3,10,3" SelectedIndex="0" IsTextSearchEnabled="True" TextSearch.TextPath="ID">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <Grid Height="20">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="50"/>
                            <ColumnDefinition Width="auto"/>
                        </Grid.ColumnDefinitions>

                        <TextBlock Grid.Column="0" Text="{Binding ID}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
                        <TextBlock Grid.Column="1" Text="{Binding Full_Name}" VerticalAlignment="Center"/>
                    </Grid>
                </DataTemplate>
            </ComboBox.ItemTemplate>
        </ComboBox>


        <!-- Other controls omitted for clarity -->

    </StackPanel>
</ScrollViewer>

<Button x:Name="btn_search" Grid.Row="1" Content="Search" Margin="10,3,10,10" VerticalAlignment="Bottom" Height="28" Foreground="White" Style="{StaticResource ButtonWithoutHover}" Background="#FF41B1E1" Click="btn_search_Click"/>

</Grid>

My ComboBoxes are being populated via ItemsSource from code behind and can contain multiple results so that the ComboBox gets its own ScrollViewer.

The ScrollViewer is there so that the controls are visible to the user if the window is resized.

The ScrollViewer scrolls fine with the mouse wheel (dragging the bars too) which is great, the problem however is that when I dropdown on a ComboBox with many items in I cannot scroll with the mouse wheel.

The ScrollViewer (if small enough and scrollable) seems to take over and scrolls the whole lot up and down instead of the items in the expanded ComboBox.

If the scrollbar isn't visible on the ScrollViewer, scrolling with the mouse wheel doesn't do anything and the only way to scroll in the ComboBox is by dragging it's scrollbar.

How can I make the ComboBox within the ScrollViewer scrollable with the mouse wheel so that users aren't forced to drag the scroll bars.

Thanks

Could you try setting ScrollViewer.VerticalScrollBarVisibility="Visible" in your combobox? It could force the combobox to show & use scrolling. — Keyur PATEL
Setting ScrollViewer.VerticalScrollBarVisibility="Visible" makes no difference on the ComboBox — Daniel

Gareth Gareth · Accepted Answer · 2017-06-16T09:42:47

This answer suggests using the FrameworkTemplate.FindName method like this

ScrollViewer sv = comboBox.Template.FindName("DropDownScrollViewer", comboBox) as ScrollViewer;
if (sv != null)
{
    // Do something...
}

ComboBox inside ScrollViewer doesn't scroll its dropped down items using MouseWheel

1 Answers