【问题标题】:Windows8 ListView and space between itemsWindows8 ListView和项目之间的空间
【发布时间】:2012-07-21 18:26:02
【问题描述】:

我想更改 listView 中项目之间的间距(也许我应该使用另一个视图元素?)代码如下所示:

    <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>

我想尽可能地模仿普通的stackpanel(可以包装元素)。目前,物品之间的空间(水平空间)太大了。我之前的问题 -> Windows 8 WrapPanel

提前致谢

【问题讨论】:

    标签: xaml listview gridview windows-8 windows-store-apps


    【解决方案1】:

    您需要对默认模板进行更改。如果您只想进行简单的更改,例如填充和边距,那么您可以这样做:(测试代码并且应该可以)

                <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>
    

    要获得更多控制权,请通过在设计器中选择一个列表视图项并右键单击来复制整个默认模板。选择编辑模板,编辑副本。这将生成默认模板,您可以在那里进行更改。您可以对 listviewcontainer 执行相同的操作。您也可以使用 Blend 来做到这一点。

    I've added a description and images here (how you can edit a default template)

    如果您还有其他问题,请告诉我进展如何!祝你好运!

    编辑:

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

    【讨论】:

    • 感谢您的帮助 :) 还有一个问题。我几乎可以肯定它应该按照他的方式完成,但我找不到任何可以编辑这些样式的工具。例如,我如何在 Blend 中做到这一点?
    • 我已经发布了一篇博文,其中包含了如何在 VS 或 blend 中进行操作的描述和图片 :) 希望对您有所帮助!不要犹豫,提出更多问题等。链接:irisclasson.com/2012/07/22/…
    • 哇,太棒了!非常感谢:)
    • NP,很高兴能够提供帮助 :) 玩得开心编程 :)
    • 我必须这样做 才能让它为我工作。
    【解决方案2】:

    据我所知(windows8.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>
    

    希望可以避免其他人在键盘上反复砸头;)

    【讨论】:

    • 你救了我的命,伙计 :-):-)。很多天以来,我一直试图找到这个。
    • 我已经花了好几个小时在这上面,如果我没有找到这个,我会花好几天的时间!
    • 我仍然需要一个负的 ContentMargin 来进一步减少边距。
    【解决方案3】:

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

    【讨论】:

    • 看准了!经过大量的反复试验,这对我有用。
    • 哇,它不仅可以很好地用于原始目的,而且在缩小窗口大小时也能很好地工作:以前,一些底部列表项被剪掉了,现在,它没有了!
    【解决方案4】:

    您需要编辑 ListBox.ItemContainerTemplate 属性。 Blend 或 VS 视觉设计器帮助提取它进行修改。

    【讨论】:

    • ...是的,特别是其中的 ListViewItemPresenter 的 ContentMargin 和 Padding 属性
    【解决方案5】:

    用于消除 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>
    

    【讨论】: