WrapPanel lays out items in one long horizontal line (displaying scroll bars) instead of wrapping lines

Question

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto"/>
  <ColumnDefinition />
</Grid.ColumnDefinitions>

<Grid.RowDefinitions>
  <RowDefinition Height="Auto"/>
  <RowDefinition/>
  <RowDefinition Height="40"/>
</Grid.RowDefinitions>

<c:SearchTextBox Grid.ColumnSpan="2" .../>

<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="1">
  <ListBox 
    ItemsSource="{Binding Categories}" 
    IsSynchronizedWithCurrentItem="True" 
    ... />
</ScrollViewer>

<!-- Here is what I'm talking about:-->
<ListBox ItemsSource="{Binding Products}"
  IsSynchronizedWithCurrentItem="True" Grid.Column="1" Grid.Row="1">
  <ListBox.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapPanel />
    </ItemsPanelTemplate>
  </ListBox.ItemsPanel>
</ListBox>

What I want is that the items in the right column should be laid out to fill window width, and then create a new line, that's exactly what WrapPanel is made for.
The problem is, that the WrapPanel lays out the items in just one line showing an horizontal scroll bar beneath whereas all the items are 'hidden' in the right side exceeding the window's size.

How can I prevent that?

Answer 1

You need to make the horizontal scrollbar of the second ListBox disable.

<ListBox ItemsSource="{Binding}" 
         ScrollViewer.HorizontalScrollBarVisibility="Disabled" ...>
....
</ListBox>

EDIT

Addtionally, there is reason that you use ScrollViewer for the first ListBox? Why I ask is that ListBox already has ScrollViewer internally, of which default Visibility is Auto.