在 ScrollViewer 中嵌入 ItemsControl答案

【问题标题】：Embedding an ItemsControl within a ScrollViewer在 ScrollViewer 中嵌入 ItemsControl
【发布时间】：2011-07-07 03:26:43
【问题描述】：

我研究了几个与 ScrollViewer 相关的问题，但没有一个对我有用。这几乎可以肯定归结为我对元素的大小缺乏了解。首先，我的 XAML（除了 UserControl 定义，这是整个控件）：

<DockPanel Width="Auto">
            <ScrollViewer DockPanel.Dock="Top" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Visible" CanContentScroll="True" BorderBrush="{DynamicResource PanelBorder}" BorderThickness="1,1,1,1" Background="{DynamicResource LightGradientBackgroundBrush}">
            <ItemsControl Focusable="false" Width="Auto"  MinHeight="30" ItemsSource="{Binding RequiredFields}" OverridesDefaultStyle="False">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <DockPanel />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="3,0,3,3">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="110"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Label Content="{Binding Path=Header, Mode=OneTime}" Foreground="{DynamicResource SilverBorderColorBrush}" Grid.Column="0"/>
                            <TextBox Text="{Binding Path=Value}" HorizontalAlignment="Stretch" Foreground="{DynamicResource SilverBorderColorBrush}" Grid.Column="1"/>
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>
        </DockPanel>

此控件作为内容加载到选项卡中。承载选项卡的窗口是可调整大小的，并且选项卡内容的最小大小为 60。我想要做的是让滚动查看器填充选项卡，但不要将选项卡推过窗口的边界。使用上面的 XAML，多余的内容会导致选项卡高度扩大，并且滚动条出现在窗口上，而不是选项卡上。

滚动查看器正在扩展到其子项的大小，因此将选项卡高度推出。我想要的是将滚动查看器固定为选项卡的大小，并使滚动查看器中的内容在滚动查看器的范围内增长，以便在内容过多时显示滚动条。

我哪里出错了？

编辑：

问题是高度，而不是宽度。宽度的行为应如此。我已按照建议将包装器更改为网格，但除非我设置 Height 属性，否则网格会扩展以适应展开后的滚动查看器的内容，从而导致与以前相同的问题。

更新的 XAML：

<Grid MinHeight="60" VerticalAlignment="Top">
        <Border BorderBrush="{DynamicResource PanelBorder}" BorderThickness="1,1,1,1">
        <ScrollViewer 
            HorizontalScrollBarVisibility="Auto" 
            VerticalScrollBarVisibility="Visible" 
            CanContentScroll="True" 
            BorderBrush="{DynamicResource PanelBorder}" 
            BorderThickness="1,1,1,1" 
            Background="{DynamicResource LightGradientBackgroundBrush}"
            >
            <ItemsControl Focusable="false" Width="Auto"  MinHeight="30" ItemsSource="{Binding RequiredFields}" OverridesDefaultStyle="False">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Vertical" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="3,0,3,3">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="110"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Label Content="{Binding Path=Header, Mode=OneTime}" Foreground="{DynamicResource SilverBorderColorBrush}" Grid.Column="0"/>
                            <TextBox Text="{Binding Path=Value}" HorizontalAlignment="Stretch" Foreground="{DynamicResource SilverBorderColorBrush}" Grid.Column="1"/>
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
                <ItemsControl.ItemContainerStyle>
                    <Style>
                        <Setter Property="DockPanel.Dock" Value="Top"/>
                    </Style>
                </ItemsControl.ItemContainerStyle>
            </ItemsControl>
        </ScrollViewer>
        </Border>
    </Grid>

以下答案均无助于完成这项工作，但我相当有信心这些答案在大多数情况下都有效。

我的控件托管在标签页中。它是动态加载的，我无法控制标签页的设计方式。我的直觉是选项卡控件允许与其中的内容一样多的空间。因为我控件中的网格说用尽了所有可用空间，并且标签页提供了子容器所需的尽可能多的空间，并且 itemscontrol 试图使用网格提供的尽可能多的空间；它最终在标签页扩展以包含整个 ItemsControl 内容。

如果标签页的创建不适合其内容，则以下解决方案将有效。不幸的是，我认为情况并非如此。

一整天都浪费在这上面。是时候继续前进了。

【问题讨论】：

标签： wpf itemscontrol scrollviewer

【解决方案1】：

啊，是的，WPF 布局的复杂性有时是一种痛苦。杀死你的是 DockPanel 和 ItemsControl 上的 Width="Auto" 的组合。 DockPanel 告诉它的孩子，他们可以有尽可能多的空间来进行布局。您的 ItemsControl 然后告诉它的孩子同样的事情。最后，Window 会创建一个 ScrollViewer 来处理超大的内容。

将外部的 DockPanel 替换为网格，一切都会好起来的。

【讨论】：

谢谢@Mike。如果我使用网格控件作为包装器，并设置一个固定的高度，它会像宣传的那样工作。但是，如果窗口被展开，顶部/底部会有很多空白空间。我希望网格与其父级一起扩展，但限制其子级（垂直）。所以，我宁愿不设置一个固定的高度。如果我不这样做，则会发生同样的错误行为。
对不起，我的意思是告诉你创建一个列和行定义，并将宽度和高度分别设置为 *。那应该可以实现您想要的。
这对我也不起作用，但我想我知道原因了。我会用我的想法编辑我的问题，所以这个问题并不是完全浪费时间。感谢您的帮助。

【解决方案2】：

要让scrollviewer不强，你需要使用Grid容器

<Grid>            
<ScrollViewer DockPanel.Dock="Top" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Visible" CanContentScroll="True" BorderBrush="{DynamicResource PanelBorder}" BorderThickness="1,1,1,1" Background="{DynamicResource LightGradientBackgroundBrush}">  
...
</ScrollViewer>        
</Grid>

DockPanel 和 StackPanel 总是伸展以适应它的孩子

也看看这个注释（我从here复制）

面板 X 尺寸 Y 尺寸

帆布不不

停靠是的

堆栈面板（垂直）是否

堆栈面板（水平）否是

网格是* 是*

WrapPanel 否否

使用“自动”行和列时除外

上表中的“是”表示“儿童被拉伸到可用尺寸”

上表中的否表示“孩子是他们想要的大小”

【讨论】：