WPF中ScrollViewer嵌套UniformGrid布局失效问题求助

核心问题分析 #

外层ScrollViewer包裹ItemsControl后内容消失，本质是UniformGrid在无约束的滚动容器中无法正确计算自身尺寸；仅保留内层滚动时子项收缩，是因为子UniformGrid未收到明确的最小宽度约束。

具体实现代码 #

<!-- 外层容器：横向滚动的父集合 -->
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
    <ItemsControl ItemsSource="{Binding ParentCollection}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <!-- Rows=1的UniformGrid，确保子项横向排列 -->
                <UniformGrid Rows="1" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <!-- 内层容器：纵向滚动的子集合，设置最小宽度防止收缩 -->
                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"
                              MinWidth="200"> <!-- 自定义子项最小宽度 -->
                    <ItemsControl ItemsSource="{Binding ChildCollection}">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <!-- Columns=1的UniformGrid，让子项高度匹配 -->
                                <UniformGrid Columns="1" />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <!-- 子项模板：按需自定义，示例为TextBlock -->
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Content}" Padding="10" Margin="5" Background="#EEE" />
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </ScrollViewer>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <!-- 可选：给父项容器添加最小宽度约束，强化布局稳定性 -->
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="ContentPresenter">
                <Setter Property="MinWidth" Value="200" />
            </Style>
        </ItemsControl.ItemContainerStyle>
    </ItemsControl>
</ScrollViewer>

关键修改点说明 #

• 外层ScrollViewer禁用纵向滚动，确保父集合仅横向滚动，同时开启横向滚动条自动显示。
• 给内层ScrollViewer设置MinWidth，强制子项保持最小宽度，避免数量增加时收缩。
• 父UniformGrid保持Rows=1，确保子集合容器横向排列；子UniformGrid保持Columns=1，让子项纵向排列且高度自动均分。
• 若父集合的子项仍出现尺寸异常，通过ItemContainerStyle给父项容器添加MinWidth约束，进一步强化布局稳定性。

额外注意事项 #

• 确保绑定的ParentCollection和ChildCollection有实际数据，避免因空集合导致界面空白。
• 若子项内容高度固定，可替换UniformGrid为StackPanel，但UniformGrid更适合需要子项等高的场景。

内容的提问来源于stack exchange，提问作者Alberto