Search code examples
wpfmvvmuser-controlsitemscontrolitemsource

ItemsControl-wrapping the contents inside the window


I am using an ItemsControl inside a window in WPF. The itemscontrol is bound with a collection and the collection is a group of view models(user controls). My problem - the view is going beyond the current window as a result of many view models in the collection. I tried many things to handle it with a scroll bar but no use. Any suggestions? The question really is how to contain the itemscontrol within a window(with scrolling)?

The XAML below

<Window x:Class="WpfApplicationTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:app="clr-namespace:WpfApplicationTest"
    Title="MainWindow" Height="350" Width="525">   
  <Grid Height="Auto">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="30"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <ItemsControl Grid.Row="0" Grid.Column="0" ItemsSource="{Binding UserControlCollection}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>           
    <StackPanel Grid.Row="1" Grid.Column="0" Orientation="Horizontal" VerticalAlignment="Bottom">
        <Button Content="OK" Width="100" Margin="3" />
        <Button Content="Cancel" Width="100" Margin="3" />
    </StackPanel>
</Grid>


Solution

  • Wrap your ItemsControl in a ScrollViewer

    Update: in your example, also set row height to * if it won't scale correctly.