레이아웃 변경 간 매끄러운 전환

아티클
10/11/2017

Layout 속성은 보통 개별적인 값(예: 행 또는 열 번호)으로 설정되거나 자동 값(예: 너비 및 높이)으로 설정됩니다. 이러한 종류의 속성에 대한 변경 값 사이에 부드럽게 전환하려면 유체 레이아웃을 사용합니다. 예를 들어 개체가 하나의 상태에서 Grid 레이아웃 패널의 왼쪽 아래 셀에 표시되지만 다른 상태에서는 해당 레이아웃 패널의 오른쪽 아래 셀에 표시되는 경우 상태 그룹에 대한 유체 레이아웃을 켜고 전환 지속 시간을 늘리지 않을 경우 두 상태 사이의 전환으로 즉각적인 변경이 일어납니다.

[!참고]

유체 레이아웃은 레이아웃 속성에만 영향을 미칩니다.

레이아웃 변경 사이의 부드러운 전환

열린 문서에서 개체의 레이아웃을 설정합니다. 예를 들어 4개의 셀에 서로 다른 개체를 가진 3개의 열 및 3개의 행으로 만든 Grid 개체가 있을 수 있습니다.
상태 패널에서 여러 개의 시각적 상태를 정의하고 이 상태에서 개체의 레이아웃 속성을 변경합니다. 예를 들어 개체 각각에 대해 두 개의 행과 열을 가진 개체를 오른쪽 아래 모퉁이에 표시하는 상태를 정의합니다.

상태 만들기에 대한 자세한 내용은 사용자 정의 컨트롤의 다양한 시각적 상태 및 전환 시간 정의를 참조하십시오.
상태 패널에서 상태 그룹에 대한 기본 전환 시간을 1초로 설정합니다.
선택적으로 EasingFunction을 클릭하여 전환에 적용할 감속/가속 기능을 선택합니다. 감속/가속 기능으로 더욱 현실적인 애니메이션을 만들 수 있습니다. 예를 들어 공을 튀기기 감속/가속 기능으로 공을 튀기는 효과를 만듭니다.
상태 사이의 전환을 가능하게 하려면 자산 패널을 열고 동작 범주를 선택하고 GoToStateAction 동작을 왼쪽 아래 모퉁이의 개체로 끌어 옵니다.
속성 패널에서 GoToStateAction의 StateName 속성을 왼쪽 아래 개체로 이동하는 상태의 이름으로 변경합니다. 예를 들어 StateName 속성을 Show1로 변경합니다.

동작에 대한 자세한 내용은 개체에 동작 추가를 참조하십시오.
이제 유효한 상태 전환을 만들었습니다. F5 키를 누르고 모눈의 왼쪽 아래 모퉁이에 있는 개체를 클릭하여 응용 프로그램을 테스트합니다. 전환 시간이 1초라 하더라도 즉시 오른쪽 아래 모퉁이로 이동합니다.
상태 패널에서 상태 그룹에 대해 FluidLayout 설정을 클릭합니다.
F5 키를 누르고 모눈의 왼쪽 아래 모퉁이에 있는 개체를 클릭하여 응용 프로그램을 다시 테스트합니다. 1초 후 오른쪽 아래 모퉁이로 부드럽게 이동합니다.