Can't get ScrollViewer to work within ItemsControl>WrapPanel

Question

I have the following code:

<ItemsControl
  ItemsSource="{Binding ItemsList}"
  Visibility="{Binding HmiState, Converter={StaticResource IsHmiViewState}}">
  <ItemsControl.ItemsContainerStyle>
    <Style>
      <Setter Property="FrameworkElement.Margin" Value="5" />
    </Style>
  </ItemsControl.ItemsContainerStyle>
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapPanel Width=300 Height=200 ItemsHost="True"
           ScrollViewer.CanContentScroll="True"
           ScrollViewer.VerticalScrollVisibility="Auto" />
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
</ItemsControl>

It display everything up to the 200 height correctly (wrapped), but doesn't display anything below that and there's no scroll bar.
ItemsList is an ObservableCollection.

Does anyone have any suggestions?

score 0 · Accepted Answer · answered Feb 06 '21 at 19:01

There should be a ScrollViewer that hosts an ItemsPresenter in the ControlTemplate of the ItemsControl:

<ItemsControl ItemsSource="{Binding ItemsList}" Width="300" Height="200">
    <ItemsControl.Template>
        <ControlTemplate TargetType="ItemsControl">
            <ScrollViewer>
                <ItemsPresenter/>
            </ScrollViewer>
        </ControlTemplate>
    </ItemsControl.Template>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Margin" Value="5" />
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

Thanks, that worked (I actually thought I tried that, but I guess not). — Al Anderson, Feb 08 '21 at 11:07

score 0 · Answer 2 · answered Feb 08 '21 at 11:14

I came up with another way, before I saw that there was an answer waiting for me. Basically just wrapped what I had in a ScrollViewer. Is one "better" than the other?

<ScrollViewer Width=300 Height=200
   ScrollViewer.CanContentScroll="True"
   ScrollViewer.VerticalScrollVisibility="Auto"
   <ItemsControl
     ItemsSource="{Binding ItemsList}"
     Visibility="{Binding HmiState, Converter={StaticResource IsHmiViewState}}">
     <ItemsControl.ItemsContainerStyle>
       <Style>
         <Setter Property="FrameworkElement.Margin" Value="5" />
       </Style>
     </ItemsControl.ItemsContainerStyle>
     <ItemsControl.ItemsPanel>
       <ItemsPanelTemplate>
         <WrapPanel ItemsHost="True"/>
       </ItemsPanelTemplate>
     </ItemsControl.ItemsPanel>
   </ItemsControl>
</ScrollViewer>

Can't get ScrollViewer to work within ItemsControl>WrapPanel

2 Answers2