Как сделать элемент VariableSized GridView? - PullRequest
Новая
       21

Как сделать элемент VariableSized GridView?

4 голосов
/ 20 марта 2012

Я хотел бы сделать VariableSizedWrapGrid для элемента внутри wrapgrid. enter image description here

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

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

Ответы [ 4 ]

2 голосов
/ 12 марта 2013

Один из способов - использовать встроенные свойства селектора GridView.

Смотрите мой блог запись .

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

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

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

Чтобы это работало, вам также нужно изменить шаблон ItemsPanel в GridView, чтобы использовать VariableSizedWrapGrid.

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

2 голосов
/ 02 октября 2012

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

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

В более раннем примере (с мая), опубликованном Mark Rideout, есть еще подробности:

1 голос
/ 28 марта 2012
0 голосов
/ 20 марта 2012

Я не уверен насчет 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 образец потребительского предварительного просмотра .К сожалению, мне не удалось найти его версию на C #.

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

...