एक सूची में चर ऊंचाई के साथ आइटम दिखा रहा है

Question

मेरे पास एक WinJs मेट्रो ऐप है जिसमें ListView है जो परिवर्तनीय ऊंचाई के साथ है। यह मूल रूप से उसी तरह किया जाता है जैसे परिदृश्य 4 में "HTML ListView item templates" sample में। एक groupInfo समारोह GridLayout ListView के साथ जुड़े का सेल spaning सक्षम करने के लिए प्रयोग किया जाता है:

अब अपने आवेदन की तस्वीर को ध्यान में रखते मैं खड़ी स्क्रॉल करने के लिए आइटम चाहते हैं, तो मैं GridLayout साथ बदलने के लिए करने की कोशिश की एक ListLayout। इस ऊर्ध्वाधर स्क्रॉल का कारण बनता है, लेकिन अब सेल spaning याद आ रही है और वस्तुओं ओवरलैप:

मैं groupInfo समारोह GridLayout साथ के रूप में एक ही तरीके से इस्तेमाल किया है, लेकिन यह ध्यान नहीं दिया जा रहा है:

layout: { 
    groupInfo: groupInfo, 
    type: WinJS.UI.ListLayout 
} 

ListLayout में चर आकार के आइटम का उपयोग करने का कोई तरीका है? मेरे कुछ आइटमों में दूसरों की तुलना में अधिक सामग्री है और मैं वास्तव में सब कुछ दिखाने के लिए विभिन्न आकारों के टाइल्स का उपयोग करना चाहता हूं।

Answer 1

पुराने पोस्ट

हाँ आप निश्चित रूप से सब कुछ अनुकूलित कर सकते हैं। मुझे लगता है कि समस्या प्रस्तुत करने से आप इस समस्या से आ सकते हैं, forceLayout।

ready: function (element, options) { 
      element.querySelector("#listView").winControl.forceLayout(); 
     } 

मैं तो अगर कोई और नहीं उत्तर और समस्या forceLayout से नहीं आया था मैं रात द्वारा प्रतिक्रिया को अपडेट कर देंगे मुझ से पास मेरे Windows 8 जरूरत नहीं है।

मुझे आशा है कि यह सहायता होगी।

ठीक है इसलिए मैंने आपकी समस्या को पहले गलत समझा है।

यहां कुछ ऐसा है जो आपको संतुष्ट करना चाहिए।

बात यह है कि आपको जावास्क्रिप्ट और सीएसएस फ़ाइलों दोनों में अपने आवेदन की विभिन्न दृश्य स्थिति का प्रबंधन करना है।

तो जावास्क्रिप्ट के संबंध में मैंने दो कार्यों का उपयोग किया है जो उदाहरण के लिए ग्रिड एप्लिकेशन टेम्पलेट में पाए जा सकते हैं। इसलिए मैंने इस कोड को प्राप्त करने के लिए scenario4.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 }); 
       } 
      } 
     } 
    }); 
})(); 

तब मैं scenario4.html में सूचीदृश्य की पूरी layout संपत्ति नष्ट नहीं किया है के बाद से मैं scenario4.js में लेआउट ऊपर बनाने

इसलिए अपने सूचीदृश्य एक अलग लेआउट दृश्य के आधार पर उपयोग करता है राज्य लेकिन आपके पास पहले जैसा ही परिणाम होगा (बीटीडब्ल्यू आपको परिणाम देखने के लिए स्नैप मोड में रहते हुए परिदृश्य को बदलना होगा)।

तो हमें दृश्य स्थिति और सीएसएस 3 के आधार पर परिदृश्य 4.css को अपडेट करना होगा, हमारे पास मीडिया प्रश्न हैं जो हमें ऐसा करने की अनुमति दे रहे हैं। फिर दृश्य स्थिति के आधार पर snapped हम अपनी संपत्तियों को ओवरराइड करेंगे। आपको बस अपने परिदृश्य 4 में कोड जोड़ना होगा।सीएसएस

@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; 
    } 
} 

आशा इस बार यह मदद करता है;)

Answer 2

मेरी सामान्य सोचा बोले ध्यान में रखते हुए टेम्पलेट बाहर स्विच करने के लिए MyCellSpanningJSTemplate जो आइटम टेम्पलेट का आकार बदलने करता है का उपयोग कर से बचने के लिए है। आप यह कोशिश कर सकते हैं।

1) एक दूसरे मद टेम्पलेट बनाएं:

<div id="listLayoutItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none"> 
     <div class="regularListIconItem"> 
      <img src="#" class="regularListIconItem-Image" data-win-bind="src: picture" /> 
     </div> 
    </div> 

2) आकार बदलने घटना सुनकर बोले देखने के लिए पता लगाने (http://code.msdn.microsoft.com/windowsapps/Snap-Sample-2dc21ee3 देख)

3) प्रोग्राम टेम्पलेट टेम्प्लेट बदलते में बनाया चरण 1 में

var listView = document.querySelector("#listView").winControl; 
listView.itemTemplate = listLayoutItemTemplate;