ItemsPanel как матрица с авторазбором - PullRequest
Новая
       3

ItemsPanel как матрица с авторазбором

0 голосов
/ 01 апреля 2012

Я работаю над окном, в котором у меня в основном есть список (сформированный из Binding to ObservableCollection). Эти предметы имеют изображение, заголовок и другие вещи. Я хочу, чтобы список (через itemTemplate) формировался как матрица только изображений из моей коллекции объектов ObservableCollection. Я использовал UniformGrid, но проблема в том, что я не могу изменить количество столбцов в зависимости от WindowSize. В качестве примера у меня есть 10 предметов. изображения имеют ширину 100 пикселей. Окно имеет ширину 1000 пикселей. Технически, это должно появиться 10 пунктов подряд. Если я изменю размер окна до 500 px, у меня будет 2 строки по 5 изображений / строка. Если я увеличу его до 700 пикселей, это будет одна строка из 4 изображений, а вторая с 3 изображениями. Если я установлю столбец UniformGrid, он не изменит себя при изменении размера окна. Я попытался установить горизонтальное выравнивание списка или вертикальное выравнивание списка сверху / по центру / и т.д. ... Пока что я пришел к этому: 

<ListBox x:Name="ListBoxItems" ItemsSource="{Binding}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid x:Name="UniformGridTest" Columns="?"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <Image Name="ListItemImage" Source="{Binding LocImage.Source}" 
                       RenderOptions.BitmapScalingMode="HighQuality" 
                       MaxHeight="100" MaxWidth="100" Margin="0,0,5,0" 
                       MouseDown="ListItemImage_MouseDown"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>`

Я использую ListBox, потому что мне нужно выбрать элементы. Надеюсь, я объяснил достаточно хорошо, чтобы вы поняли. Большое спасибо! Адриан.

1 Ответ

0 голосов
/ 01 апреля 2012

Вы должны попробовать WrapPanel. В него поместится столько элементов, сколько позволяет ваша ширина, остальное будет перенесено на следующую строку. В конце концов, это должно выглядеть так, как вам нужно. Но в этом случае у вас будут пробелы справа при определенных значениях ширины. 

<ListBox x:Name="ListBoxItems" ItemsSource="{Binding}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel x:Name="WrapPanel"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel >
                <Image Name="ListItemImage" Source="{Binding LocImage.Source}" RenderOptions.BitmapScalingMode="HighQuality" MaxHeight="100" MaxWidth="100" Margin="0,0,5,0" MouseDown="ListItemImage_MouseDown"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>
...