Windows 8 Metro App의 고해상도 및 ListView

HTML과 JavaScript가 포함 된 Windows 8 Metro App에서 작업 중이지만 화면 크기 조정 문제가 있습니다.Windows 8 Metro App의 고해상도 및 ListView

현재 저는 1366x768 용 응용 프로그램을 설계하고 있습니다. 일반적으로 페이지에 ListView가 있습니다.이 해상도에 대한 간단한 스케치를 볼 수 있습니다.

그러나 해상도가 높아지면 (예 : 2560x1440 해상도) ListView는 아래 이미지와 유사합니다.

이것은 매우 추한 것 같습니다. 사실 고해상도를 위해 무엇을해야하는지 잘 모르겠습니다.

화면 중간의 1366x768 해상도에서 동일한 ListView를 유지한다고 생각합니다. 그러나 나는 이것을 할 길을 찾을 수 없었다.

2012-09-20 bahadir arslan

레이아웃 관리에는 몇 가지 작업을 수행 할 수 있습니다. 첫 번째는 최대의이 같은 ListView은 그리드 레이아웃에 표시하는 행의 수, 설정하는 것입니다 : 당신이 충분히 항목이있는 경우

list.winControl.layout.maxRows = 2;

는,이 넓은 창조의 영향을 미칠 것입니다,하지만 얕은을, 형세.

당신이 다른 질문에 언급 한 옵션은 ListView를 가운데 맞추고 크기를 수정하는 것입니다. 가장 쉬운 방법은 CSS 플렉스 박스 레이아웃을 사용하는 것입니다. 다음은 maxRows 설정과 CSS (ListView (ListView 자체는 포함하지 않음)가 포함 된 요소에 적용됨)를 보여주는 약간 독립적 인 예입니다. 새로운 VS 프로젝트를 작성 default.html 파일에 태그를 복사하여 응용 프로그램을 시작하면 효과를 볼 수있을 것입니다 :

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" /> 
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script> 
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script> 
    <style type="text/css"> 
     #container { 
      display: -ms-flexbox; 
      -ms-flex-align: center; 
      -ms-flex-pack: center; 
      height: 100%; 
     } 
     #list { 
      width: 1366px; height: 768px; 
     } 
     .templateItem { 
      width: 200px; height: 200px; font-size: 30pt; 
      margin: 10px; border: thick solid white; background-color: gray; 
     } 
    </style> 
    <script> 
     WinJS.Application.onactivated = function (args) { 
      data = new WinJS.Binding.List(); 
      WinJS.UI.processAll().then(function() { 
       for (var i = 0; i < 8; i++) { 
        data.push({ value: i }); 
       } 
       list.winControl.layout.maxRows = 2; 
      }); 
     } 
     WinJS.Application.start(); 
    </script> 
</head> 
<body> 
    <div id="template" data-win-control="WinJS.Binding.Template"> 
     <div class="templateItem" data-win-bind="innerText: value"></div> 
    </div> 
    <div id="container"> 
     <div id="list" data-win-control="WinJS.UI.ListView" data-win-options="{ 
      itemDataSource: data.dataSource, 
      itemTemplate:template}"> 
     </div> 
    </div> 
</body> 
</html>

귀하의 질문에서 말하기 어렵지만, 당신은 또한 떨어지는 고려해 볼 수 있습니다 ListView과 다른 것을 사용합니다. 고정 된 수의 항목을 표시하려면 표준 HTML 요소를 사용하고 CSS (새 그리드 레이아웃을 사용하는 경우도 있음)를 사용하여 표시 방법을보다 잘 제어 할 수 있습니다.

출처

2012-09-20 10:48:45

답장을 보내 주셔서 감사합니다. 내가 물어 보면 ListView의 768px outer div에 height 속성을 설정하면 도움이됩니다. 하지만 먼저 maxRows 속성을 찾았지만 찾지 못했습니다. 그래서 이것도 고마워.) –

Windows 8 Metro App의 고해상도 및 ListView

답변

관련 문제