старый пост
Да, вы, конечно, можете настроить все. Я думаю, что ваша проблема с рендерингом возникла из-за того, что вы, возможно, забыли файл forceLayout
.
ready: function (element, options) {
element.querySelector("#listView").winControl.forceLayout();
}
У меня нет поблизости Windows 8, поэтому, если никто не ответит и проблема не в forceLayout
, я обновлю ответ к ночи.
Я надеюсь, что это поможет.
Итак, я неправильно понял вашу проблему ранее.
Вот то, что должно вас удовлетворить.
Дело в том, что вы должны управлять различным состоянием представления вашего приложения как в файлах JavaScript, так и в файлах CSS.
Итак, что касается JavaScript, я использовал две функции, которые можно найти, например, в шаблоне Grid Application. Поэтому я изменил сценарий4.js, чтобы получить этот код.
function MyCellSpanningJSTemplate(itemPromise) {
return itemPromise.then(function (currentItem) {
var result = document.createElement("div");
// Use source data to decide what size to make the
// ListView item
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";
result.appendChild(body);
// 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);
return result;
});
}
var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
var appView = Windows.UI.ViewManagement.ApplicationView;
var ui = WinJS.UI;
(function () {
"use strict";
var page = WinJS.UI.Pages.define("/html/scenario4.html", {
initializeLayout: function (listView, viewState) {
/// <param name="listView" value="WinJS.UI.ListView.prototype" />
if (viewState === appViewState.snapped) {
listView.layout = new ui.ListLayout();
}
else {
listView.layout = new ui.GridLayout({ groupInfo: groupInfo });
}
},
ready: function (element, options) {
var listView = element.querySelector("#listView").winControl;
this.initializeLayout(listView, appView.value);
},
updateLayout: function (element, viewState, lastViewState) {
var listView = element.querySelector("#listView").winControl;
if (lastViewState !== viewState) {
if (lastViewState === appViewState.snapped || viewState === appViewState.snapped) {
this.initializeLayout(listView, viewState);
}
else {
listView.layout = new ui.GridLayout({ groupInfo: groupInfo });
}
}
}
});
})();
Затем я удалил все свойство layout
представления списка в сценарии4.html, так как я создал макет выше в сценарии4.js
Поэтому ваш список использует другой макет в зависимости от состояния просмотра, но вы получите тот же результат, что и раньше (кстати, вам нужно изменить сценарий, пока вы находитесь в режиме привязки, чтобы увидеть результат).
Так что нам просто нужно обновить script4.css в зависимости от состояния просмотра, а в CSS 3 у нас есть медиа-запросы, которые позволяют нам это делать. Затем, в зависимости от состояния просмотра здесь snapped
, мы переопределим наши свойства. Вам просто нужно добавить код ниже в ваш сценарий4.css
@media screen and (-ms-view-state: snapped) {
#listView {
max-width: 260px;
height: 280px;
border: solid 2px rgba(0, 0, 0, 0.13);
}
.regularListIconTextItem {
max-width: 250px;
max-height: 70px;
padding: 5px;
overflow: hidden;
display: -ms-grid;
}
.smallListIconTextItem {
max-width: 250px;
max-height: 70px;
padding: 5px;
overflow: hidden;
background-color: Pink;
display: -ms-grid;
}
/* Medium size */
.mediumListIconTextItem {
max-width: 250px;
max-height: 70px;
padding: 5px;
overflow: hidden;
background-color: LightGreen;
display: -ms-grid;
}
/* Large size */
.largeListIconTextItem {
max-width: 250px;
max-height: 70px;
padding: 5px;
overflow: hidden;
background-color: LightBlue;
display: -ms-grid;
}
}
Надеюсь, в этот раз поможет ;)
person
Aymeric
schedule
02.07.2012