WinUI3与C#：如何将图片路径Observable列表转为自适应水平填充列表

要实现单行水平排列、宽度一致且随窗口自适应缩放的图片列表，你可以用UniformGrid替代StackPanel作为ItemsControl的布局容器——它能自动将可用空间均分给每个子元素，完美模拟Grid列宽为*的缩放效果。

修改后的代码 #

基础自适应版本（无滚动，图片始终均分窗口宽度） #

<ItemsControl
    x:Name="HandImages"
    Padding="5">

    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <!-- 设置Rows=1强制水平单行排列 -->
            <UniformGrid Rows="1" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image  
                Source="{Binding}"
                Tapped="ImageTapped"
                Stretch="UniformToFill"
                Margin="2"
                FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyout}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>

</ItemsControl>

带滚动的版本（图片数量过多时允许水平滚动） #

如果图片数量较多，希望窗口过窄时不把图片缩得太小，而是显示滚动条，可以把ItemsControl嵌套进ScrollViewer，并给图片设置最小宽度：

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">
    <ItemsControl
        x:Name="HandImages"
        Padding="5">

        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Rows="1" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>

        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Image  
                    Source="{Binding}"
                    Tapped="ImageTapped"
                    Stretch="UniformToFill"
                    Margin="2"
                    MinWidth="100"
                    FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyout}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>

    </ItemsControl>
</ScrollViewer>

关键说明 #

• UniformGrid的作用：Rows="1"确保所有图片水平排列，同时它会将容器的可用水平空间平均分配给每个图片，保证每张图片宽度完全一致，窗口调整时宽度自动同步变化。
• Stretch属性：UniformToFill让图片填充分配到的空间，同时保持原始宽高比，避免变形。如果希望图片完整显示不裁剪，可以改用Uniform。
• Margin设置：给图片添加Margin可以避免图片之间紧贴，提升视觉效果。

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