Microsoft MVP성태의 닷넷 이야기
.NET Framework: 146. WPF - 중첩된 ScrollViewer의 크기 제어 [링크 복사], [링크+제목 복사],
조회: 18195
글쓴 사람
정성태 (techsharer at outlook.com)
홈페이지
첨부 파일
(연관된 글이 1개 있습니다.)

WPF - 중첩된 ScrollViewer의 크기 제어


제목 짓기가 영 난감합니다. ^^; 이해를 돕기 위해, 다음의 XAML 디자인 화면을 먼저 보도록 하겠습니다

[그림 1: Grid와, 그 내부에 정의된 Grid 2개]
ignore_measure_override_1.png

계층 구조는 다음과 같이 되어 있습니다.

ScrollViewer(A)
    Grid
        첫 번째 요소 (Grid)
        두 번째 요소 (Grid)

보는 것처럼, 첫 번째 Row에 있는 Grid 요소는 윈도우 크기에서 무리 없이 보이고 있지만, 두 번째 Row에 있는 Grid 요소는 5번째 컬럼부터 모두 표현해 주지 못하고 있습니다. 이 때문에, 덩달아서 첫 번째 Row의 Width까지도 넓어져버리고, 이런 Grid 2개를 감싸고 있는 외부 Grid가 ScrollViewer에 포함되어 있어 [그림 2]와 같이 나타나게 됩니다.

[그림 2: 두 번째 Row의 크기에 맞게 스크롤이 생긴 레이아웃]
ignore_measure_override_2.png

그런데, 때에 따라서는 두 번째 Row를 차지하고 있는 (폭이 넓은) 요소에 ScrollViewer를 씌우고 전체적인 레이아웃상으로는 두 번째 Row의 크기를 무시하고 싶을 수도 있습니다. 아래와 같은 식이겠지요.

[그림 3: 첫 번째 Row의 크기에 맞게 구성된 레이아웃]
ignore_measure_override_3.png

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);
        }
    }
}

일단, 요즘 진행하고 있는 프로젝트에서는 위와 같은 방법으로 해결을 하긴 했는데... 영 마음에 들지 않습니다. 혹시... 위의 방법보다 더 좋은 방법을 제시할 분 계신가요?

한가한 일요일 오후... 문득 저 방법이 너무 마음에 안들어서 개선을 하기로 작정했는데 생각보다 아주 간단하게 해결이 되었습니다. 정답은 첨부된 프로젝트에! ^^ (월요일날 출근해서 이렇게 고쳐야 겠습니다.)



[이 토픽에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]

[연관 글]






[최초 등록일: ]
[최종 수정일: 6/26/2021]

Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
by SeongTae Jeong, mailto:techsharer at outlook.com

비밀번호

댓글 작성자
 



2009-06-21 11시18분
[김성기] 너무 심플해서 이것보다 더 좋은 방법은 없을 것 같아요! ^^;
그리고 동영상은 재생이 안됩니다~
[guest]
2009-06-22 11시04분
^^ 이상하네요... 내 컴퓨터에서는 동영상 재생이 잘 되는데.
kevin25

... 16  17  18  19  20  21  22  23  24  25  26  27  28  29  [30]  ...
NoWriterDateCnt.TitleFile(s)
12890정성태12/23/20217136VC++: 152. Golang - (문자가 아닌) 바이트 위치를 반환하는 strings.IndexRune 함수
12889정성태12/22/20219569.NET Framework: 1123. C# - (SharpDX + DXGI) 화면 캡처한 이미지를 빠르게 JPG로 변환하는 방법파일 다운로드1
12888정성태12/21/20217671.NET Framework: 1122. C# - ImageCodecInfo 사용 시 System.Drawing.Image와 System.Drawing.Bitmap에 따른 Save 성능 차이파일 다운로드1
12887정성태12/21/20219810오류 유형: 777. OpenCVSharp4를 사용한 프로그램 실행 시 "The type initializer for 'OpenCvSharp.Internal.NativeMethods' threw an exception." 예외 발생
12886정성태12/20/20217618스크립트: 37. 파이썬 - uwsgi의 --enable-threads 옵션 [2]
12885정성태12/20/20217884오류 유형: 776. uwsgi-plugin-python3 환경에서 MySQLdb 사용 환경
12884정성태12/20/20216928개발 환경 구성: 620. Windows 10+에서 WMI root/Microsoft/Windows/WindowsUpdate 네임스페이스 제거
12883정성태12/19/20217831오류 유형: 775. uwsgi-plugin-python3 환경에서 "ModuleNotFoundError: No module named 'django'" 오류 발생
12882정성태12/18/20216935개발 환경 구성: 619. Windows Server에서 WSL을 위한 리눅스 배포본을 설치하는 방법
12881정성태12/17/20217401개발 환경 구성: 618. WSL Ubuntu 20.04에서 파이썬을 위한 uwsgi 설치 방법 (2)
12880정성태12/16/20217248VS.NET IDE: 170. Visual Studio에서 .NET Core/5+ 역어셈블 소스코드 확인하는 방법
12879정성태12/16/202113517오류 유형: 774. Windows Server 2022 + docker desktop 설치 시 WSL 2로 선택한 경우 "Failed to deploy distro docker-desktop to ..." 오류 발생
12878정성태12/15/20218545개발 환경 구성: 617. 윈도우 WSL 환경에서 같은 종류의 리눅스를 다중으로 설치하는 방법
12877정성태12/15/20217200스크립트: 36. 파이썬 - pymysql 기본 예제 코드
12876정성태12/14/20217035개발 환경 구성: 616. Custom Sources를 이용한 Azure Monitor Metric 만들기
12875정성태12/13/20216706스크립트: 35. python - time.sleep(...) 호출 시 hang이 걸리는 듯한 문제
12874정성태12/13/20216722오류 유형: 773. shell script 실행 시 "$'\r': command not found" 오류
12873정성태12/12/20217871오류 유형: 772. 리눅스 - PATH에 등록했는데도 "command not found"가 나온다면?
12872정성태12/12/20217683개발 환경 구성: 615. GoLang과 Python 빌드가 모두 가능한 docker 이미지 만들기
12871정성태12/12/20217736오류 유형: 771. docker: Error response from daemon: OCI runtime create failed
12870정성태12/9/20216307개발 환경 구성: 614. 파이썬 - PyPI 패키지 만들기 (4) package_data 옵션
12869정성태12/8/20218616개발 환경 구성: 613. git clone 실행 시 fingerprint 묻는 단계를 생략하는 방법
12868정성태12/7/20217187오류 유형: 770. twine 업로드 시 "HTTPError: 400 Bad Request ..." 오류 [1]
12867정성태12/7/20216857개발 환경 구성: 612. 파이썬 - PyPI 패키지 만들기 (3) entry_points 옵션
12866정성태12/7/202114271오류 유형: 769. "docker build ..." 시 "failed to solve with frontend dockerfile.v0: failed to read dockerfile ..." 오류
12865정성태12/6/20216944개발 환경 구성: 611. 파이썬 - PyPI 패키지 만들기 (2) long_description, cmdclass 옵션
... 16  17  18  19  20  21  22  23  24  25  26  27  28  29  [30]  ...