WPF ItemsControl display only first item

Question

I have ItemsControl defined in XAML.

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

    ...

    <StackPanel Orientation="Horizontal" Grid.Row="2" Margin="5" MaxHeight="160">

        <ItemsControl Name="FilterItemsControl" ItemsSource="{Binding Filters}" >
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <GroupBox Header="{Binding Path=Key}" Margin="10,0,0,5" MaxWidth="150">
                        <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
                            <ItemsControl ItemsSource="{Binding Path=Value}" >
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <CheckBox  Content="{Binding Path=Name}" IsChecked="{Binding Path=IsChecked}" Margin="1"/>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </ScrollViewer>
                    </GroupBox>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

    </StackPanel>

    ...

</Grid>

ViewModel:

public Dictionary<string, ObservableCollection<CheckableItem>> Filters
    {
        get 
        { 
            return filters; 
        }
        set
        {
            filters = value;
            OnPropertyChanged("Filters");
        }
    }

And simple class for CheckableItem:

public class CheckableItem
{
    private long id;
    private bool isChecked;
    private string name;

    public long Id
    {
        get { return id; }
        set { id = value; }
    }

    public string Name
    {
        get { return name; }
        set { name = value; }
    }

    public bool IsChecked
    {
        get { return isChecked; }
        set { isChecked = value; }
    }
}

Filters dictionary is properly filled in ViewModel. Also Filters.Count is greater than one. I want to display every KeyValuePair from dictionary in horizontal orientation but only first item from the dictionary is shown, why?

Also, is code for horizontal orientation ok?

Answer 1

Putting a ScrollViewer inside a StackPanel is a bad idea as a StackPanel measures its children with an infinite space:

Horizontal scroll for stackpanel doesn't work

If you want the ItemsControl to layout the items horizontally you should set its ItemsPanel to a horizontal StackPanel.

Try this:

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

    <ScrollViewer Grid.Row="2" Margin="5" ScrollViewer.HorizontalScrollBarVisibility="Auto">
        <ItemsControl Name="FilterItemsControl" ItemsSource="{Binding Filters}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <GroupBox Header="{Binding Path=Key}" Margin="10,0,0,5" MaxWidth="150">
                        <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
                            <ItemsControl ItemsSource="{Binding Path=Value}" >
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <CheckBox  Content="{Binding Path=Name}" IsChecked="{Binding Path=IsChecked}" Margin="1"/>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </ScrollViewer>
                    </GroupBox>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</Grid>