컨트롤의 크기조절 및 스타일

Wijmo 컨트롤은 스타일, 모양 및 크기 조정을 위해 CSS를 사용합니다.

이 때문에 Wijmo 5 컨트롤에는 "너비", "높이"또는 "배경"과 같은 속성이 없습니다. 스타일 및 레이아웃은 CSS를 사용하여 처리하시면 됩니다. WinForms 및 XAML을 비롯한 .NET 컨트롤에 익숙하다면 처음에는 약간 이상하게 느껴질 수 있습니다. 그러나 CSS에 익숙해지면 매우 쉽고 강력하다는 것을 알게 되실 것입니다. CSS를 통해 모든 인스턴스를 쉽게 스타일링하거나 또는 특정 컨트롤만을 스타일링 할 수도 있습니다. 모두 몇 줄의 재사용 가능한 CSS만 있으면됩니다.

컨트롤 크기조절

컨트롤의 크기와 위치는 일반적인 HTML / CSS 규칙을 따르는 호스팅 요소에 의해 결정됩니다. 예를 들어, 아래의 CSS 규칙은 "grid"클래스의 요소를 그리드 내용에 맞게 높이를 자동으로 계산하여 배치하며 최대값은 300 픽셀입니다.

.grid {
  height: auto;
  max-height: 300px;
}

컨트롤 스타일링

컨트롤 스타일링은 크기조절과 동일한 원리를 따릅니다. CSS를 사용하여 글꼴, 색상, 여백, 패딩을 재정의하여 기존 컨트롤의 모든 시각적 요소를 덮어 쓰고 원하는 방식으로 표현 할수 있습니다.

.grid {
  height: auto;
  max-height: 350px;
}
.grid .wj-header.wj-cell {
  background-color: #000;
  color: #fff;
  font-weight: bold;
  border-right: solid 1px #404040;
  border-bottom: solid 1px #404040;
}
.grid .wj-cell {
  border: none;
  background-color: #fff;
}
.grid .wj-alt:not(.wj-state-selected):not(.wj-state-multi-selected) {
  background-color: #fff;
}
.grid .wj-state-selected {
  background: #000;
  color: #fff;
}
.grid .wj-state-multi-selected {
  background: #222222;
  color: #fff;
}

위 예제는 CSS를 사용하여 FlexGrid 컨트롤의 모양을 수정하는 방법을 보여줍니다. FlexGrid 샘플 중에 하나에 적용을 하면 그리드가 평범한 흑백 모양임을 알 수 있습니다.

CSS를 사용하는 다른 빠른 트릭을 통해서도 그리드에 적용할 수 있습니다. 격자의 셀 스타일을 변경하려면 "wj-cell" CSS 클래스를 사용하십시오. 다음 예제는 단순히 셀에서 테두리를 제거하고 배경을 흰색으로 설정합니다.

.grid .wj-cell {
  border: none;
  background-color: #fff;
}

코드-기반 스타일링

일반적으로 Wijmo 5 컨트롤은 레이아웃과 크기 조정을 위해 CSS를 사용하지만 일부의 경우에는 코드를 사용해야 할 때도 있습니다.

예를 들어, FlexGrid는 컨트롤을 렌더링하는 데 사용되는 글꼴을 기반으로 행 높이를 계산합니다. 그렇기 때문에 이 경우에는 CSS 기반 설정을 재정의하고 정확한 행 높이를 지정하는 것이 좋습니다. 예를 들면 다음과 같이 속성을 설정하여 이 작업을 수행 할 수 있습니다:

// 스크롤 가능한 영역에 행의 높이 설정
flex.rows.defaultSize = 34;
// 열 헤더 영역에 행의 높이 설정
flex.columnHeaders.rows.defaultSize = 40;