2015-07-14 4 views
0

Как можно подобрать одно изображение (маленький размер) несколько раз в контейнере Grid, чтобы он выглядел так, что Grid удерживает одно изображение вместо нескольких изображений, сложенных вместе?Tiling image in a Grid

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

Как это можно сделать?

ОБНОВЛЕНИЕ: Кажется, нет простого способа сделать это. Итак, как обходной путь, как я могу создать одно большее изображение, разбив несколько меньших изображений вместе в WP8.1 RT?

+0

Вы пробовали использовать WrapPanel/WrapGrid и просто добавить свои изображения кучу раз, которые затем завернуть до тех пор, пока есть пространство, и будет казаться, что они «один большой образ»? –

+1

Вопрос в том, как программно генерировать сетку n * n tile с тем же img в ячейках без границ, которые их разделяют? – ntohl

+0

Это должно сделать это, но я хочу, чтобы изображение масштабировалось до нескольких размеров макета в зависимости от размера экрана устройства. Вероятно, это означает, что я добавляю одно и то же изображение достаточно времени, чтобы размер изображения масштабировался до всех возможных размеров, но я думаю, что это создаст какой-то уродливый код XAML. – Flipper

ответ

1

В этом коде я создал экземпляр только одного растрового изображения. Тхо, я не уверен, если это память.

{ 
     int n = 5; 
     Grid grid = new Grid(); 
     BitmapImage bitmapImage = new BitmapImage(new Uri("pack://application:,,,/StackOverflowTest;Component/1.jpg")); 
     for (int i = 0; i < n; i++) 
     { 
      grid.ColumnDefinitions.Add(new ColumnDefinition {Width = GridLength.Auto}); 
      grid.RowDefinitions.Add(new RowDefinition {Height= GridLength.Auto}); 
     } 
     for (int i = 0; i < n; i++) 
     { 
      for (int j = 0; j < n; j++) 
      {     
       Image image = new Image { Source = bitmapImage }; 
       Grid.SetRow(image, i); 
       Grid.SetColumn(image, j); 
       grid.Children.Add(image); 
      } 
     } 
     containerOfGrid.Children.Add(grid); 
} 

EDIT:

Я проверил, и мне кажется, в открывшемся окне, что исходное изображение не выделяется несколько раз.

((System.Windows.Controls.Image)((new System.Linq.SystemCore_EnumerableDebugView(((System.Windows.Controls.Panel)(grid)).Children)).Items[0]))._bitmapSource.GetHashCode() 
37855919 
((System.Windows.Controls.Image)((new System.Linq.SystemCore_EnumerableDebugView(((System.Windows.Controls.Panel)(grid)).Children)).Items[1]))._bitmapSource.GetHashCode() 
37855919 
((System.Windows.Controls.Image)((new System.Linq.SystemCore_EnumerableDebugView(((System.Windows.Controls.Panel)(grid)).Children)).Items[0])).GetHashCode() 
19914648 
((System.Windows.Controls.Image)((new System.Linq.SystemCore_EnumerableDebugView(((System.Windows.Controls.Panel)(grid)).Children)).Items[1])).GetHashCode() 
3378500 
+0

Работает и довольно быстро, но есть недостаток. Когда я открываю страницу и выполняется код выше, я вижу вспышку разделительных линий на границах изображения плитки. Хотя эти строки быстро исчезают, это плохо UX. Я попытался использовать Lumia Imaging SDK, но его выходное изображение также имеет несколько размытых линий на границах плитки. (См. Здесь: http://stackoverflow.com/questions/31472176/lumia-imaging-sdk-image-blending-creates-separation-lines). – Flipper

+0

Это вспышки разделения, о которых я говорил: http://i.imgur.com/wnWSbjB.jpg. Они появляются только на долю секунды. – Flipper

+0

Странно. Моим первым советом было бы использовать двойную буферизацию, но wpf уже использует DirectX с двойной двойной буферизацией по умолчанию ... – ntohl