WPF - 중첩된 ScrollViewer의 크기 제어
제목 짓기가 영 난감합니다. ^^; 이해를 돕기 위해, 다음의 XAML 디자인 화면을 먼저 보도록 하겠습니다
[그림 1: Grid와, 그 내부에 정의된 Grid 2개]
계층 구조는 다음과 같이 되어 있습니다.
ScrollViewer(A)
Grid
첫 번째 요소 (Grid)
두 번째 요소 (Grid)
보는 것처럼, 첫 번째 Row에 있는 Grid 요소는 윈도우 크기에서 무리 없이 보이고 있지만, 두 번째 Row에 있는 Grid 요소는 5번째 컬럼부터 모두 표현해 주지 못하고 있습니다. 이 때문에, 덩달아서 첫 번째 Row의 Width까지도 넓어져버리고, 이런 Grid 2개를 감싸고 있는 외부 Grid가 ScrollViewer에 포함되어 있어 [그림 2]와 같이 나타나게 됩니다.
[그림 2: 두 번째 Row의 크기에 맞게 스크롤이 생긴 레이아웃]
그런데, 때에 따라서는 두 번째 Row를 차지하고 있는 (폭이 넓은) 요소에 ScrollViewer를 씌우고 전체적인 레이아웃상으로는 두 번째 Row의 크기를 무시하고 싶을 수도 있습니다. 아래와 같은 식이겠지요.
[그림 3: 첫 번째 Row의 크기에 맞게 구성된 레이아웃]
ScrollViewer(A)
Grid
Grid.RowDefinition
첫 번째 Grid
Grid.RowDefinition
ScrollViewer(B)
두 번째 Grid
동작 방식을 동영상으로 보면 아래와 같이 실행되기를 원하는 것입니다.
직접 해보면, 의도했던 것과는 달리 실제로는 여전히 [그림 2]처럼 나오는 것을 확인할 수 있습니다. 왜 그러냐면, 외곽의 "ScrollViewer(A)"까지는 윈도우의 고정적인 크기가 전달된 MeasureOverride가 호출되지만, 그것의 자식 요소들부터는 MeasureOverride 인자에 Infinity 값이 전달되기 떄문입니다.
그렇기 때문에 두 번째 "ScollViewer(B)"조차도 MeasureOverride에 "Infinity" 값을 전달받게 되어 크기 조절이 안되는 것입니다.
이런 경우에 어찌해야 할까요?
제가 생각한 방법은 첫 번째 Grid의 Width를 기준으로 두 번째 Grid의 Width를 제어하는 걸로 결정했습니다.
그래서, 다음과 같은 식으로 기준이 되는 요소를 "anchor"라고 이름짓고, 다른 곳에서 그에 대한 참조를 했습니다.
<Border Name="anchor">
<Grid>
...
</Grid>
</Border>
<Border>
<my:RelativeScrollViewer DependsOnElement="{Binding ElementName=anchor}">
<Grid>
...
</Grid>
</my:RelativeScrollViewer>
</Border>
그럼, DependsOnElement 의존 속성에서는 anchor 요소의 참조를 보관해 놓은 후, RelativeScrollViewer 요소의 MeasureOverride에 재사용을 하면 됩니다.
public class RelativeScrollViewer : ScrollViewer
{
public object DependsOnElement
{
get { return (object)GetValue(DependsOnElementProperty); }
set { SetValue(DependsOnElementProperty, value); }
}
public static readonly DependencyProperty DependsOnElementProperty =
DependencyProperty.Register("DependsOnElement", typeof(object), typeof(RelativeScrollViewer),
new PropertyMetadata(null));
protected override Size MeasureOverride(Size constraint)
{
FrameworkElement elem = DependsOnElement as FrameworkElement;
if (elem != null)
{
return base.MeasureOverride(new Size(elem.DesiredSize.Width, constraint.Height));
}
else
{
return base.MeasureOverride(constraint);
}
}
}
일단, 요즘 진행하고 있는 프로젝트에서는 위와 같은 방법으로 해결을 하긴 했는데... 영 마음에 들지 않습니다. 혹시... 위의 방법보다 더 좋은 방법을 제시할 분 계신가요?
한가한 일요일 오후... 문득 저 방법이 너무 마음에 안들어서 개선을 하기로 작정했는데 생각보다 아주 간단하게 해결이 되었습니다.
정답은 첨부된 프로젝트에! ^^ (월요일날 출근해서 이렇게 고쳐야 겠습니다.)
[이 토픽에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]