Search code examples
c#wpfitemscontrol

ScrollViewer not working with ItemsControl


I'm trying to use a ScrollViewer to be able to scroll the items in an ItemsControl but for some reason, it's not working. The scroll view shows but it is disabled.

<UserControl x:Class="Tool.Views.ShortcutsView"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            d:DesignWidth="500"
            mc:Ignorable="d" Height="541">

<UserControl.Resources>
    <Style x:Key="GlobalShortcutButtonTemplate" TargetType="{x:Type Button}"> 
     <!-- Style code -->
 </Style>

</UserControl.Resources>

        <Grid Margin="10,40,10,0" Background="White" Height="108" VerticalAlignment="Top">


            <ScrollViewer CanContentScroll="True">        
                <ItemsControl 
                        ItemsSource="{Binding ShortcutsObservableCollection}" 
                        Height="108" VerticalAlignment="Top" HorizontalAlignment="Left">

                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel Orientation="Horizontal" HorizontalAlignment="Center"  Margin="10"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>

                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Button 
                                    Height="35" 
                                    Content="{Binding ShortcutName}" 
                                    Command="{Binding ShortcutCommand}"
                                    CommandParameter="{Binding FilePath}" 
                                    Margin="10 0 0 10"
                                    Background="#FF30CCFF" 
                                    Foreground="White"
                                    Padding="10,0"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>


        </Grid>
</UserControl>

This is what I see...

enter image description here

There are plenty of items in the ItemsControl for the scroller to show and be able to scroll the items in it, the rest of the items are hidden.

Any idea what can I do to make the scroller to show up properly?


Solution

  • Just remove Height="108" from your ItemsControl. You can't scroll because there is nothing to scroll.