퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 레이아웃
  4. 스크롤뷰[ScrollView]

스크롤뷰[ScrollView]

ScrollView 클래스

사용 가능한 크기보다 큰 내용을 탐색하는 데 사용됩니다.

예제

큰 Panel을 포함하는 ScrollView의 사용 예입니다.

1
2
3
<ScrollView>
    <Panel Width="2000" Height="2000" />
</ScrollView>

AllowedScrollDirections 속성을 사용하여 ScrollView에서 스크롤 할 수 있는 방향을 제한할 수도 있습니다.

1
2
3
<ScrollView AllowedScrollDirections="Horizontal">
    <!-- Contents -->
</ScrollView>

기본적으로 ScrollView는 스크롤 할 수 있는 방향으로 내용과 동일한 양의 공간을 차지합니다. 그러나 Panel(또는 DockPanel, Grid 등)에 배치하면 ScrollView 자체의 크기는 부모 크기로 제한됩니다.

참고

StackPanel은 자식의 크기를 제한하지 않고 원하는 크기로 확장할 수 있습니다. 이것은 기본적으로 내용의 크기를 상속하므로 ScrollView의 문제입니다. StackPanel 안에 ScrollView를 배치하면 ScrollView의 크기가 화면 경계를 넘어 확장됩니다. 우리가 원하는 것은 ScrollView의 내용이 필요한 크기로 확장되어야 한다는 것입니다. 반면 ScrollView 자체는 부모의 경계로 제한됩니다.

즉, StackPanel 내의 ScrollView는 예상대로 동작하지 않습니다. 다른 대안으로는 다른 유형의 Panel(예: DockPanel)을 ScrollView의 부모로 사용하거나 크기를 명시적으로 지정하는 것입니다.

자식 컨텐츠의 Alignment[정렬]는 시작 ScrollPosition 뿐만 아니라 MinScroll 및 MaxScroll값에도 영향을 줍니다. 예를 들어, Bottom 정렬 요소는 내용의 하단이 ScrollView의 맨 아래에 정렬된 상태에서 시작하며 MinScroll은 오버플로가 ScrollView의 맨 위에 있으므로 음수가 됩니다.

LayoutMode

레이아웃이 변경되면 기본적으로 ScrollView는 일관된 ScrollPosition을 유지합니다. 이로 인해 내용이 추가/제거될 때 순간적으로 튕길 수 있습니다.

대신 대체 모드인 LayoutMode=”PreserveVisual”은 하위 또는 상위 레이아웃이 변경될 때 시각적 일관성을 유지하려고 시도합니다. 컨텐츠가 컨테이너라고 가정하고 해당 컨테이너의 자식을 보겠습니다. 예를 들어, 다음과 같은 레이아웃이 있습니다:

1
2
3
4
5
6
<ScrollView>
    <StackPanel>
        <Panel/>
        <Panel/>
    <StackPanel>
</ScrollView>

시각적 일관성을 유지할 때 LayoutRole=Standard가 없는 것은 고려되지 않습니다. 이 동작을 조정하려면 LayoutMode 속성을 사용할 수 있습니다.

ScrollView의 인터페이스

링크로 대신합니다: https://www.fusetools.com/docs/fuse/controls/scrollview#section-table-of-contents

Was this article helpful to you? Yes No

How can we help?