Wrap изображений в 3 колонки в GridView

Question

У меня есть фото галерея GridView:

<GridView x:Name="list1" Padding="5" SelectionMode="Multiple"> 
    <GridView.ItemsPanel> 
     <ItemsPanelTemplate> 
      <ItemsWrapGrid MaximumRowsOrColumns="3" Orientation="Horizontal"/> 
     </ItemsPanelTemplate> 
    </GridView.ItemsPanel> 
    <GridView.ItemTemplate> 
     <DataTemplate> 
      <Image Width="auto" Height="auto" Source="{Binding}"/> 
     </DataTemplate> 
    </GridView.ItemTemplate> 
</GridView> 

Я хочу изображения показаны на 3 колонки. Но с этим кодом изображения отображаются для всей ширины экрана, по одной на строку.

Answer 1

Вам необходимо ограничить размер изображения, установив либо ширину, либо высоту (одна из них может быть автоматической). Я думаю, что это автоматический размер изображения, переопределяющий поведение GridView.

В качестве примера, на большом экране, таком как рабочий стол, попробуйте установить ширину изображения = «300», и вы должны увидеть упаковку GridView каждые 3 изображения. Уменьшите ширину, если устройство является Windows Mobile, чтобы отображать как минимум 3 изображения.

Ширина изображения не обязательно должна быть жесткой, как указано выше - вы можете сделать ее адаптивной, например, используя VisualState management для определения размера экрана вместе с преобразователями привязки и значения для определения оптимальной ширины изображения. Вы также можете сделать это в codebehind, и у вас есть больше возможностей сделать изображение более гибким и адаптивным.