Как равномерно распределить элементы равномерной сетки только «изнутри» (см. Изображение)

Question

Я трийн, чтобы решить сложную ситуацию. Мой список ограничен определением grid.rowdefinition и grid.column; этот список использует UniformGrid в качестве ItemsPanel. Эффект, который я хочу получить, заключается в том, что элементы этого списка будут отображаться с равным интервалом, но только с внутренней стороны ItemsPanel, а не снаружи. На изображении черная граница является границей списка. Если бы элементы были расположены статически, я мог бы использовать Margin или установить правую, нижнюю и левую, верхнюю поля. Но они организованы динамически с использованием привязки данных. У меня нет идеи, как получить этот макет. В качестве дополнительной информации могу вам сказать, что наiformGrid всегда будет отображаться 8 элементов, даже если они расположены динамически.

Есть идеи? Спасибо! :)

Answer 1

Вот хакерское решение с использованием отрицательных полей:

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

Answer 2

попробуйте использовать ItemControl в качестве контейнера и свойство Stretch = "UniformToFill" в классе изображений, чтобы решить вашу проблему:

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