Как сделать переменный элемент GridView?

Question

Я хотел бы сделать VariableSizedWrapGrid для элемента в wrapgrid.

Нечто подобное. Название группы выше хранит все шоу детского предмета на фотографии. После прокрутки вправо, другой заголовок группы с ребенком, показанный ниже. У кого-нибудь есть идеи, как это сделать?

Мне удалось отобразить название группы с дочерним элементом, как показано ниже. Единственное, чего я не могу достичь, это размер переменной дочернего элемента.

Answer 1

Один из способов вы можете пойти, чтобы использовать встроенные свойства селекторных GridView в.

Посмотри мой блог entry.

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

Вам необходимо получить шаблон стиля GridViewItem по умолчанию через Blend или онлайн-ресурс и создать явный стиль по умолчанию. Затем создать новые стили BasedOn явный один так:

<Style x:Key="DoubleHeightGridViewItemStyle" 
     BasedOn="{StaticResource DefaultGridViewItemStyle}" 
     TargetType="GridViewItem"> 
     <Setter Property="VariableSizedWrapGrid.RowSpan" 
       Value="2" /> 
</Style> 

Для этого, чтобы работать, вам также необходимо изменить шаблон ItemsPanel в GridView для использования в VariableSizedWrapGrid.

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

Answer 2

Я не уверен в коде C# и XMAL этого. Но в JavaScript, вместо создания шаблона в формате HTML, можно создать шаблон элемента в JavaScript, делая что-то вроде этого

function MyItemTemplate(itemPromise) { 
    return itemPromise.then(function (currentItem) { 
     var result = document.createElement("div"); 

     //use source data to decide what size to make the 
     //ListView item and apply different css class to it 
     result.className = currentItem.data.type; 
     result.style.overflow = "hidden"; 

     // Display image 
     var image = document.createElement("img"); 
     image.className = "regularListIconTextItem-Image"; 
     image.src = currentItem.data.picture; 
     result.appendChild(image); 

     var body = document.createElement("div"); 
     body.className = "regularListIconTextItem-Detail"; 
     body.style.overflow = "hidden"; 

     // Display title 
     var title = document.createElement("h4"); 
     title.innerText = currentItem.data.title; 
     body.appendChild(title); 

     // Display text 
     var fulltext = document.createElement("h6"); 
     fulltext.innerText = currentItem.data.text; 
     body.appendChild(fulltext); 

     result.appendChild(body); 
     return result; 
    }); 
} 

Источник этого кода в образце ListView товара 'Шаблоны consumer preview sample package. К сожалению, я не смог найти версию C#.

Надеюсь, это поможет в некоторой степени.

Answer 3

Вот решение сделать это в C#: http://leeontech.wordpress.com/2012/03/01/customizing-gridview-items-in-metro-app-4/

Answer 4

Обновление это потому, что некоторые другие полезные вещи появились, так как вопрос был задан. Мой коллега Джерри Никсон имеет хороший пост, описывающую, как создавать элементы переменного размера в GridView:

• Windows 8 Beauty Tip: Using a VariableSizedWrapGrid in a GridView makes Grids Prettier

Короткая версия, вы можете сделать пользовательский GridView, который реализует PrepareContainerForItemOverride.

Там также более подробно в более раннем примере (с мая), что Марк Райдаут отвечал:

• How To: Create a Variable Sized Grouped GridView (like the store)