C# WPF项控制内容裁剪而不是滚动

我有一个使用MVVM模式的.NET4.0WPF应用程序，但我无法在其中一个屏幕上实现预期的结果UserControl as View。我把这一页的大部分内容都删去了，以显示问题的核心。页面由三行一列的网格组成。第一行包含标题文本，最后一行包含保存按钮。中间一行包含一个具有一行和一列的网格，并在带有自定义用户控件的数据模板的ItemsControl中显示ObservableCollection。集合中有十个项目，我希望它们显示在两列五行中，因此我有一个WrapPanel作为ItemsPanelTemplate

我希望ItemsControl在可用空间内滚动，但它正在扩展到内容的大小，并且大部分内容都被从页面底部裁剪下来

我列出了ObservableCollection用作数据模板的用户控件的XAML，以及下面主页的XAML。非常感谢您的帮助

<UserControl x:Class="OIL.UserControls.ShopNotes.ShopNoteComponent"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="120" d:DesignWidth="150">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Border Grid.Row="0" Grid.Column="0" Width="140" Margin="5,5,5,5" HorizontalAlignment="Center" VerticalAlignment="Top" BorderBrush="Black" BorderThickness="1" CornerRadius="5">
        <StackPanel Width="120" Margin="0,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Top" Orientation="Vertical">
            <Image Height="25" Width="30" HorizontalAlignment="Left" Source="/OIL;component/Images/BlueCam.png">
                <Image.ToolTip>
                    <Image Source="{Binding Path=ToolTipImagePath}" />
                </Image.ToolTip>
            </Image>
            <Label Style="{DynamicResource LargeText}" Content="{Binding Path=ComponentTitle}" />
            <CheckBox Width="80" Margin="0,5,0,5" HorizontalAlignment="Left" Style="{DynamicResource NormalText}" Content=" Mandatory?" 
                      IsChecked="{Binding Path=ComponentMandatory, Mode=TwoWay}" 
                      IsEnabled="{Binding Path=ComponentSelected}" />
            <CheckBox Width="15" Margin="0,5,0,5" HorizontalAlignment="Center" 
                      IsChecked="{Binding Path=ComponentSelected, Mode=TwoWay}" />
        </StackPanel>
    </Border>
</Grid>

这是XAML的主要页面：

<UserControl x:Class="OIL.View.ConfiguratorViews.Configurator_ShopNotes_Tab"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:igWPF="http://infragistics.com/Editors" 
         xmlns:uc="clr-namespace:OIL.UserControls.ShopNotes" 
         mc:Ignorable="d" 
         d:DesignHeight="570" d:DesignWidth="866">
<UserControl.Resources>
    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
    <DataTemplate x:Key="ShopNotesComponentsTemplate">
        <uc:ShopNoteComponent />
    </DataTemplate>
</UserControl.Resources>
<Border Margin="10" CornerRadius="13" BorderThickness="3" BorderBrush="#FF666666">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="40" />
            <RowDefinition Height="*" />
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
            <Button Height="30" Width="75" Margin="10,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Center" Background="{x:Null}" 
                    Command="{Binding Path=AddNewTemplateCommand}" 
                    Content="Add" />
            <Button Height="30" Width="75" Margin="10,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Center" Background="{x:Null}" 
                    Command="{Binding Path=EditTemplateCommand}" 
                    Content="Edit" />
            <Grid Margin="10,5,0,5">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Visibility="{Binding Path=IsNewTemplate, Converter={StaticResource BooleanToVisibilityConverter}}">
                    <TextBox Height="30" Width="250" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{DynamicResource NormalText}" Text="{Binding Path=TemplateDescription}" />
                </StackPanel>
                <StackPanel Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Visibility="{Binding Path=IsEditedTemplate, Converter={StaticResource BooleanToVisibilityConverter}}">
                    <igWPF:XamComboEditor Name="cmbShopNotesTemplate" Height="30" HorizontalAlignment="Left" VerticalAlignment="Center" 
                                          ItemsSource="{Binding Path=ShopNoteTemplates, Mode=TwoWay}" 
                                          DisplayMemberPath="CONFIGURATION_DESC" 
                                          SelectedItem="{Binding Path=SelectedShopNoteTemplate, ValidatesOnDataErrors=True}" 
                                          Value="Select Shop Notes Template" 
                                          NullText="Select Shop Notes Template" 
                                          IsEditable="True">
                    </igWPF:XamComboEditor>
                </StackPanel>
            </Grid>
        </StackPanel>
        <Grid Grid.Row="1" Grid.Column="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="40" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Label Grid.Row="0" Grid.Column="0" Height="30" Margin="0,5,0,5" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{DynamicResource NormalText}" Content="* Hover over camera icon to view Shop Note component" />
            <ItemsControl Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" 
                          ItemsSource="{Binding Path=ShopNoteComponents, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" 
                          ItemTemplate="{StaticResource ShopNotesComponentsTemplate}">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel Width="300" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
            </ItemsControl>
        </Grid>
        <Button Grid.Row="2" Grid.Column="0" Height="30" Width="150" Margin="10,10,0,10" HorizontalAlignment="Left" VerticalAlignment="Center" 
            Background="{x:Null}" 
            Command="{Binding Path=SaveTemplateCommand}" 
            Content="Save" />
    </Grid>
</Border>

编辑：更改了问题标题，因为我在启动问题和实际发布问题之间删除了ScrollViewer。另外，注意到“保存”按钮位于内部网格而不是外部网格中，因此我已更正渲染过程中没有任何更改。

ItemsControl不像ListBox那样具有自己的ScrollViewer。您可以将ItemsControl替换为ListBox，也可以简单地将其包装在ScrollViwer中，小心移动Grid.Row和Grid.Column设置，如下所示：

<ScrollViewer Grid.Row="1" Grid.Column="0">
    <ItemsControl HorizontalAlignment="Left" ItemsSource="{Binding Path=Items, 
        UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" 
        ItemTemplate="{StaticResource ShopNotesComponentsTemplate}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Width="300" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</ScrollViewer>

---

谢谢你，谢里登。这回答了我的问题，至少在我在这里发布的内容范围内，我将把它标记为答案。然而，我的问题范围更广，要实施解决方案还需要做更多的工作。我将添加一个可能有助于解决类似问题的其他人的补充答案。@BrianHancock，虽然您希望返回以提供完整的解决方案是令人钦佩的，但请不要发布包含此问题之外的详细信息的解决方案，因为这可能会混淆用户。我理解。我已经删除了我的回复帖子。