如何在Metro風格應用中實現Bing Travel像UI一樣

我正在尋找一種類似於Windows 8標準的Bing Travel應用的佈局方式。我正在使用Javscript/CSS開發應用程序工作室2012年如何在Metro風格應用中實現Bing Travel像UI一樣

下面是一個簡單的模擬了：

ui mockup

這讓我爲難的是，就是BEING顯示的第一個項目的一部分。不知何故，第一個項目使用最大垂直空間顯示，而所有下一個項目都在一個網格佈局ListView中對齊..

我已經有了右邊顯示的groupheader的網格佈局。添加第一個項目是否有最佳做法？我應該添加另一個父css網格與2列（1t固定和第二個自動寬度），或者我可以以某種方式操縱listview保持佈局簡單？

來源

2012-09-03 user1107799

好的我解決了它，這是基於VS 2012 GridLayout模板。我做了兩件事。

1）用正確的溢出屬性創建了具有2列的（父級）網格佈局。

2）禁用WinJS.UI.ListView控件生成的溢出屬性。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>groupedItemsPage</title> 

    <!-- WinJS references --> 
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script> 
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script> 

    <link href="/css/default.css" rel="stylesheet" /> 
    <link href="/pages/groupedItems/groupedItems.css" rel="stylesheet" /> 
    <script src="/js/data.js"></script> 
    <script src="/pages/groupedItems/groupedItems.js"></script> 

    <style type="text/css"> 
     #scrollContainer 
     { 
      height:100%; 

      display:-ms-grid; 
      -ms-grid-columns: 480px max-content; 
      -ms-grid-rows: 1fr; 

      overflow-x:scroll; 
      overflow-y:hidden; 

      -ms-overflow-style:scrollbar; 
     } 

     #col1 
     { 
      -ms-grid-column:1; 
     } 

     #col2 
     { 
      -ms-grid-column:2; 
      -ms-overflow-style:none; 
     } 
    </style> 
</head> 
<body> 
    <!-- templates --> 

    <!-- The content that will be loaded and displayed. --> 
    <div id="scrollContainer"> 
     <div id="col1"> 
      col1 
     </div> 
     <div id="col2" class="fragment groupeditemspage "> 
      <!-- the code from the GridLayout example goes here --> 
     </div> 
    </div> 
</body> 
</html>

來源

2012-09-03 15:42:48 user1107799

如果是我，我會添加一列到包含第一項和ListView的元素。你可以試着想出一種方法來操縱ListView，但由於你是組數據，這將是一個痛苦，恕我直言。沒有理由讓事情變得比他們需要的更難。

來源

2012-09-03 13:51:35

由於可滾動容器是在listview中產生的，所以這樣做並不奏效，在列表視圖之前添加元素將僅放置在可滾動區域之外。 – user1107799

如何在Metro風格應用中實現Bing Travel像UI一樣

回答

相關問題