一個 WPF ItemsControl 和 WrapPanel 走進一個酒吧

Question

我有一個ItemsControl ，它在WrapPanel內顯示一堆UserControl 。 這非常有效，除非我有一堆用戶控件，然后溢出在屏幕外呈現，我無法訪問它。 我的目標是讓 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 正在完成它的工作，但它呈現在窗口邊界之外。

這顯示了所有用戶控件，但我必須展開窗口才能看到它們。

任何幫助將不勝感激。

完整的 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

<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>

Answer 2

將您的第二行高度更改為*

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

將RowDefinition設置為Auto意味着它將計算該DesiredHeight中所有子元素的累積DesiredHeight並將其分配給RowDefinition的Height屬性。 因此，隨着您的WrapPanel增長，它會將高度應用於該行並伸展您的父級Grid 。