我的列表框中的项目之间的间隙

发布于 2024-10-12 12:59:42 字数 795 浏览 2 评论 0原文

当我创建具有水平项目排序的 ListBox 时，例如如下所示：

<DockPanel>
    <ListBox>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBoxItem>
            <Button Content="Hello" />
        </ListBoxItem>
        <ListBoxItem>
            <Button Content="Hello" />
        </ListBoxItem>
    </ListBox>
</DockPanel>

列表中的按钮之间有很小的间隙，如下图箭头所示：

显示间隙的图片

请问如何消除这些间隙？我需要将 ListBox 中的项目彼此相邻。我尝试更改 ListBox 的 ItemTemplate 但没有帮助。

原文

When I create ListBox with horizontal items ordering for example like this:

<DockPanel>
    <ListBox>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBoxItem>
            <Button Content="Hello" />
        </ListBoxItem>
        <ListBoxItem>
            <Button Content="Hello" />
        </ListBoxItem>
    </ListBox>
</DockPanel>

I have small gaps between buttons in the list as indicated by the arrows on following picture:

Picture showing gaps

How can I get rid of those gaps please ? I need to have items in ListBox just next to each other. I have tried changing ItemTemplate of the ListBox but it did not help.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

过期以后 2024-10-19 12:59:42

这是因为 ListBoxItem 的默认 ItemContainerStyle 内有填充。要删除它，您可以覆盖 ItemContainerStyle。例如，只需尝试将下面的 Empty ItemContainerStyle 添加到您的 ListBox，您就可以看到边距不再存在。

    <ListBox >
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate >
                <VirtualizingStackPanel IsItemsHost="True" Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                            <ContentPresenter/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListBox.ItemContainerStyle>
        <Button Content="hello1" Width="75"/>
        <Button Content="Hello2" Width="75"/>
    </ListBox>

This is because of the padding inside the default ItemContainerStyle for ListBoxItem. To remove this you can override the ItemContainerStyle. For example just try the below Empty ItemContainerStyle to your ListBox and you can see the margin is no more.

    <ListBox >
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate >
                <VirtualizingStackPanel IsItemsHost="True" Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                            <ContentPresenter/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListBox.ItemContainerStyle>
        <Button Content="hello1" Width="75"/>
        <Button Content="Hello2" Width="75"/>
    </ListBox>

回复收藏 0 原文

夜还是长夜 2024-10-19 12:59:42

这些间隙位于 ListViewItems 的 ControlTemplate 内，恐怕您必须覆盖它...

编辑： 在某些平台上您甚至不需要弄乱 Template 来消除项目之间的间隙：

    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="Padding" Value="0"/>
        </Style>
    </ListBox.ItemContainerStyle>

要消除最一侧的间隙，您实际上需要更改 ListBox ControlTemplate 本身，这不是问题的项目。在默认的 Aero 模板中，有一个带有 Padding = 1 的边框

Those gaps are inside the ControlTemplate of the ListViewItems, you'd have to override that i'm afraid...

Edit: On some platforms you do not even need to mess with the Template to get rid of the gaps between items:

    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="Padding" Value="0"/>
        </Style>
    </ListBox.ItemContainerStyle>

To get rid of the gap at the very side you actually need to change the ListBox ControlTemplate itself, it's not a matter of the items. In the default Aero template there is a border with Padding = 1

回复收藏 0 原文

~没有更多了~