Windows8中的ListView和项之间的间距问题

Question

Windows8中的ListView和项之间的间距问题

xamllistviewgridviewwindows-8windows-store-apps

18

我想要改变listView中项目之间的间距（也许我应该使用另一个View元素？）代码看起来像这样：

    <ListView SelectionMode="None" HorizontalContentAlignment="Left" >
        <ListView.Items>
            <TextBlock Text="Item 1" />
            <TextBlock Text="Item 2" />
            <TextBlock Text="Item 3" />
            <TextBlock Text="Item 4" />
        </ListView.Items>
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapGrid Orientation="Horizontal" HorizontalChildrenAlignment="left"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
    </ListView>

我希望尽可能地模仿普通的堆栈面板（可以自动换行元素）。目前，项之间的空白（水平空间）太大了。我的先前问题 -> Windows 8 WrapPanel

提前感谢。

- Krzysztof Kaczor

6个回答

22

据我所知（Windows 8.1 XAML 商店应用程序），将这两个设置为零后。

<ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="Padding" Value="0"/>
                    <Setter Property="Margin" Value="0"/>

我仍然存在着令人沮丧的间隙，似乎无法摆脱。

在这里使用负边距可能会解决问题，但是... 这是一种取巧的方法，难以处理，并且不总能产生预期的结果

抓狂之后，我发现这个问题可以通过以下方式解决：

ContentMargin="0" Padding="0"

在ListViewItemPresenter中如下：

        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="Padding" Value="0" />
                <Setter Property="Margin" Value="0" />
                <Setter Property="BorderThickness" Value="0" />
                <Setter Property="VerticalContentAlignment" Value="Top" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <ListViewItemPresenter ContentMargin="0" Padding="0" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListView.ItemContainerStyle>

希望这可以避免其他人不断地在键盘上砸头；)

- MemeDeveloper

1

你救了我的一天，伙计 :-):-)。我已经试图找到这个东西很多天了。 - Kinjan Bhavsar

我花了好几个小时在这上面，如果我没有找到这个，我可能会花费数天时间！ - Stephen Hosking

我仍需要一个负的ContentMargin来进一步减少边距。 - Stephen Hosking

13

我认为在这里修改正确的ItemContainerStyle属性是MinHeight，而不是Margin或Padding。

- Peter Meinl

1

太准了！在经历了一系列的试错之后，这个方法对我起作用了。 - Ash

1

哇，它不仅在原始目的上运行良好，而且当窗口大小减小时也非常出色：以前，一些底部列表项被裁剪，现在则不会！ - Brian Hong

2

你需要编辑 ListBox.ItemContainerTemplate 属性。使用 Blend 或 VS 可视化设计工具可以帮助提取它以进行修改。

- Filip Skakun

...是的，特别是其中ListViewItemPresenter的ContentMargin和Padding属性。 - MemeDeveloper

1

针对Windows 8.1商店应用程序中GridView项的边距问题的解决方案。灵感来自上述ListView解决方案。

<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GridViewItem">
                <GridViewItemPresenter ContentMargin="0" Padding="0"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
</GridView.ItemContainerStyle>

- user3227765

0

对于 WinUI3，以下几行代码帮我解决了行之间的空格问题：

                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="MinHeight" Value="0" />
                    </Style>
                </ListView.ItemContainerStyle>

我希望能帮助到某个人。

- pshi-ya-chyel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Iris Classon · Accepted Answer

你需要对默认模板进行修改。如果你只想进行简单的更改，比如填充和边距，则可以这样做：（已测试代码并应该可行）

            <ListView>
        <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid Orientation="Horizontal" HorizontalChildrenAlignment="left"/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
        <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="Padding" Value="0"/>
                    <Setter Property="Margin" Value="0"/>
                </Style>
            </ListView.ItemContainerStyle>
            <ListViewItem>
                <TextBlock Foreground="Wheat">hej</TextBlock>
            </ListViewItem>
            <ListViewItem>
                <TextBlock Foreground="Wheat">hej</TextBlock>
            </ListViewItem>
        </ListView>

要更多地控制模板，可以通过在设计器中选择listviewitem并右键单击来复制整个默认模板。选择编辑模板，编辑副本。这将生成默认模板，您可以在那里进行更改。您还可以对listviewcontainer执行相同的操作。您也可以使用Blend完成此操作。

我在这里添加了说明和图片（如何编辑默认模板）

请告诉我结果如何，并且如果您有更多问题，请问！祝你好运！

编辑：

MemeDeveloper在下面提到他仍然存在问题，并通过调整其他属性解决了它-他在此处发布了代码和答案，请务必查看。