A WPF ItemsControl и WrapPanel входят в бар

Question

У меня есть ItemsControl, который отображает кучу UserControl внутри WrapPanel. Это работает отлично, если у меня нет кучи UserControls, а затем переполнение отображается за пределами экрана, и я не могу получить к нему доступ. Моя цель состоит в том, чтобы обернуть WrapPanel горизонтально, но как только элементы управления отключены от экрана, чтобы отобразить полосу прокрутки, и это, похоже, не работает для меня.

<ItemsControl ItemsSource="{Binding Servers, Mode=OneWay}"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <WrapPanel /> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Border BorderBrush="Black" BorderThickness="1" Margin="5,5,5,5"> 
       <local:ServerControl DataContext="{Binding }" /> <!-- The actual UserControl --> 
      </Border> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

Когда приложение запускается, это то, на что оно похоже. То, что вы не видите, должно быть в том, что должно быть 14 ящиков. WrapPanel выполняет свою работу, но он отображается за пределами окна.

Это показывает все UserControls, но мне пришлось развернуть окно, чтобы быть в состоянии увидеть их все.

Любая помощь будет принята с благодарностью.

Полный XAML:

<Window x:Class="ServerMonitor.Wpf.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:local="clr-namespace:ServerMonitor.Wpf" 
     xmlns:models="clr-namespace:ServerMonitor.Wpf.Models" 
     xmlns:System="clr-namespace:System;assembly=mscorlib" 
     Title="Leading Hedge Server Monitor" Height="350" Width="800"> 
    <Window.DataContext> 
     <models:MainWindowViewModel> 
      <models:MainWindowViewModel.MachineNames> 
       <!-- Test Servers --> 
       <System:String>T009</System:String> 
       <System:String>T010</System:String> 
       <System:String>T011</System:String> 
       <System:String>T012</System:String> 
      </models:MainWindowViewModel.MachineNames> 
     </models:MainWindowViewModel> 
    </Window.DataContext> 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto" /> 
      <RowDefinition Height="Auto" /> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="Auto" /> 
     </Grid.RowDefinitions> 

     <Menu Grid.Row="0"> 

     </Menu> 

     <ItemsControl Grid.Row="1" ItemsSource="{Binding Servers, Mode=OneWay}"> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <WrapPanel /> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <Border BorderBrush="Black" BorderThickness="1" Margin="5,5,5,5"> 
         <local:ServerControl DataContext="{Binding }" /> 
        </Border> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
      <ItemsControl.Template> 
       <ControlTemplate TargetType="{x:Type ItemsControl}"> 
        <ScrollViewer VerticalScrollBarVisibility="Auto"> 
         <ItemsPresenter /> 
        </ScrollViewer> 
       </ControlTemplate> 
      </ItemsControl.Template> 
     </ItemsControl> 

    </Grid> 
</Window> 

Answer 1

Изменение вам вторую высоту строки для *

<Grid.RowDefinitions> 
    <RowDefinition Height="Auto" /> 
    <RowDefinition Height="*" /> <-- This is what you want --> 
    <RowDefinition Height="Auto" /> 
    <RowDefinition Height="Auto" /> 
</Grid.RowDefinitions> 

установив RowDefinition в Auto означает, что он рассчитает кумулятивный DesiredHeight всех дочерних элементов в этой строке и присвоит его Height собственности RowDefinition. Таким образом, по мере роста вашего WrapPanel, он будет применять высоту к этой строке и растянуть ваш родительский Grid.

Answer 2

<ItemsControl ItemsSource="{Binding Servers, Mode=OneWay}"> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <WrapPanel /> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Border BorderBrush="Black" BorderThickness="1" Margin="5,5,5,5"> 
       <local:ServerControl DataContext="{Binding }" /> <!-- The actual UserControl --> 
      </Border> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
    <ItemsControl.Template> 
     <ControlTemplate TargetType="{x:Type ItemsControl}"> 
      <ScrollViewer VerticalScrollBarVisibility="Auto"> 
       <ItemsPresenter /> 
      </ScrollViewer> 
     </ControlTemplate> 
    </ItemsControl.Template> 
</ItemsControl> 

ИЛИ

<ScrollViewer VerticalScrollBarVisibility="Auto"> 
    <ItemsControl ItemsSource="{Binding Servers, Mode=OneWay}"> 
    ... 
    <ItemsControl/> 
</ScrollViewer>