新闻应用如何改变 gridview 项目的宽度答案

【问题标题】：How does the News app change the width of the gridviewitems新闻应用如何改变 gridview 项目的宽度
【发布时间】：2024-05-04 05:25:01
【问题描述】：

我正在尝试创建一个类似于 w10 中默认新闻应用程序主页的视图。但我无法弄清楚这些 gridviewitems 如何总是尽可能地伸展到最大。在我的 gridview 中，它们似乎都有一个静态宽度，即使我尝试过

                    <Style TargetType="GridViewItem">
                        <Setter Property="VerticalContentAlignment" Value="Stretch" />
                        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                    </Style>

【问题讨论】：

您是否也设置了 VSM（视觉状态）来设置这些属性？
尚未分配视觉状态
你需要设置它们来触发这些设置器，看看这个示例github.com/Windows-Readiness/WinDevCamp/tree/master/…
但这只是为了适应手机/电脑/平板电脑等分辨率，对吧？我想要的是无论如何都要填满所有可用空间。现在它只是创建了几列，但是我在右边有一些白色的空白区域
Viewbox 可能是最简单的解决方案。看看这个answer

标签： c# gridview win-universal-app uwp

【解决方案1】：

聚会有点晚了，但我最终为这个确切的问题制定了自己的解决方案。我制作了一个自定义面板，它使用可用的整个宽度并缩放项目以使用整个宽度。您所做的就是指定每列的最小宽度，然后面板在每行上放置尽可能多的项目。您可以通过Gist 找到它。

你可以这样使用它：

// Define the namespace  
xmlns:p="using:KodeFisk.Panels"

// And use it in a control (for example an ItemsControl)
<ItemsControl>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <p:UniformMinWidthWrapPanel MinColumnWidth="200"/>
        </ItemsPanelTemplate>
    <ItemsControl.ItemsPanel>
<ItemsControl>

【讨论】：