Question

我很想解决一个棘手的问题。我的列表框被限制在grid.rowdefinition和grid.column定义中; 此列表框使用UniformGrid作为ItemsPanel。我想要获得的效果是此列表框的项目将以相等的间隔显示，但仅在ItemsPanel的内部显示，而不是在外部。在图像中，黑色边框是列表框的边框。如果物品是静态排列的，我可以使用Margin或者设置右边，底边和左边，顶边距。但它们使用数据绑定进行了动态排列。我没有想法如何获得这种布局。作为附加信息，我可以告诉你，uniformGrid将始终显示8个项目，即使它们是动态排列的。

enter image description here

你知道吗？谢谢！：）

Answer 1

这将是一个使用负边距的hacky解决方案：

<ListBox ItemsSource="12345678" HorizontalAlignment="Left">
    <ListBox.Template>
        <ControlTemplate TargetType="ListBox">
            <Border BorderBrush="Black" BorderThickness="1" ClipToBounds="True">
                <!-- Cut off the outer 10 pixels -->
                <ScrollViewer  Margin="-10">
                    <ItemsPresenter />
                </ScrollViewer>
            </Border>
        </ControlTemplate>
    </ListBox.Template>
    <ListBox.ItemContainerStyle>
        <!-- Might want to port some selection triggers from the default template -->
        <Style TargetType="ListBoxItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <!-- Default margin -->
                        <ContentPresenter  Margin="10"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.ItemContainerStyle>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Columns="2"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Border BorderBrush="Green" BorderThickness="1" Width="100">
                <Image Source="http://www.gravatar.com/avatar/c35af79e54306caedad37141f13de30c?s=128&amp;d=identicon&amp;r=PG"/>
            </Border>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

screenshot

Answer 2

尝试使用ItemControl作为容器，并使用Stretch =＆＃34; UniformToFill＆＃34;图像类中的属性可以解决您的问题：

 <Border Grid.Row="1" Margin="0,5,0,0" BorderThickness="1" BorderBrush="Black">
        <ItemsControl ItemsSource="{Binding AvailableImages}">              
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding Path=.}" Stretch="UniformToFill"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Border>

如何仅在“内部”平均分隔均匀网格的项目（见图）

2 个答案: