WinJS ListView 자동 크기 조정

자체 스크롤 막대를 표시하지 않는 WinJS에서 ListView를 표시하려고합니다. 그 대신 부모 컨테이너에 가로로 자라고 싶습니다. 내가 구현 한 방법은 기본적으로 ListView에 min-width CSS 속성을 설정하는 것입니다. 초기로드시, 이것은 완벽하게 작동합니다. 추가 데이터가 백업 데이터 소스 (이 경우 WinJS.Binding.List)에로드되면 ListView에서 요소를 그리고 자체 크기를 조정할 것으로 기대합니다. 대신, ListView 요소를 그려 자체 스크롤 가로 막대를 추가합니다. 약 1-2 초가 지나면 갑자기 ListView가 자동으로 크기가 조정되고 부모 컨테이너에 맞춰집니다.WinJS ListView 자동 크기 조정

요소를 추가 한 직후에이 크기 조정을 수행하려면 어떻게해야합니까? 모든 단일 항목을 다시 그리기 때문에이 레이아웃에 많은 요소가 채워지기 때문에 강제 레이아웃이 작동하지 않습니다.

출처

2012-11-21 Szymon Rozga

div에있는 how to detect overflow에서 찾은 기술을 사용했습니다. 기본적으로, 모든 새 데이터 항목을 추가 한 후에는 ListView div에 오버플로가 없어 질 때까지 ListView의 부모 div 크기를 늘리는 것이 좋습니다.

편집 : 결국이 게시물의 결과로 조언 때문에이 전략에 반대했습니다. 필자는 내장 된 그리드 프로젝트 템플릿을보고 목록보기가 전체 화면에 적합하게 표시되는지 확인했습니다. 다음 CSS를 사용했습니다.

#listid{ 
    height: 100%; 
    position: relative; 
    width: 100%; 
    z-index: 0; 
} 
#section[role=main]{ 
    margin-left: 0; 
} 

#listid .win-horizontal.win-viewport .win-surface { 
    margin-left: 120px; 
    margin-right: 115px; 
}

출처

2012-11-21 16:11:39

성능 프로필에 따라 성능이 저하 될 수 있습니다. 아마도 ListView에서 loadingStateChanged 이벤트를 수신하고이를 사용하여 계산 한 메서드를 사용하는 것이 좋습니다. 가능한 파손을 나중에 받아들이려는 경우 DOM으로 잠입하여 실제로 크기를 변경하는 요소를 찾고 크기를 사용하여 필요한 너비를 설정하십시오. 궁극적으로, 나는 당신이 원하는 행동에 의문을 제기합니다 - 제가 출전 한 어플리케이션에서, 그것은 아주 나쁜 경험이었습니다. –

도미닉은 listview 컨트롤에서 loadingStateChanged 이벤트를 수신 대기해야한다고 동의합니다. 즉시 실행되지 않을 가능성이 있습니다.이 경우 진행률 요소를 목록에 표시하고 다시 그리기를 기다린 다음 진행률을 제거합니다.

출처

2012-11-21 20:07:38

답변

관련 문제