문서를 영문으로 보려면 영문 확인란을 선택하세요. 마우스 포인터를 텍스트 위로 이동시켜 팝업 창에서 영문 텍스트를 표시할 수도 있습니다.
번역
영문

FluidMoveBehavior, FluidMoveSetTagBehavior 및 데이터 저장소(WPF용 Blend SDK)

FluidMoveBehavior 동작을 사용하여 요소의 위치에서 변경 내용에 애니메이션 효과를 적용할 수 있습니다. 그러나 FluidMoveBehavior를 단독으로 사용하는 경우에는 식별된 항목의 특정 위치와 새 위치 간의 전환에만 애니메이션 효과를 적용할 수 있습니다. FluidMoveBehavior FluidMoveSetTagBehavior와 함께 사용하면 초기 위치가 응용 프로그램에 표시되는 데이터에 대한 참조에 의해서만 지정되는 경우에도 특정 시작 지점에서의 전환에 애니메이션 효과를 적용할 수 있습니다.

FluidMoveBehavior FluidMoveSetTagBehavior와 함께 사용할 때 숨겨진 데이터 저장소가 생성되어 원하는 데이터가 다른 범위에 있는 경우에도 해당 데이터에 액세스할 수 있도록 도와줍니다. 데이터 저장소는 보기에서 숨겨져 있지만 FluidMoveBehaviorFluidMoveSetTagBehavior를 사용할 때 데이터 저장소가 작동하는 방법을 이해하는 것이 좋습니다.



숨겨진 데이터 저장소를 사용하여 FluidMoveBehavior와 함께 사용하도록 제공되는 FluidMoveSetTagBehavior에서 태그가 지정된 데이터

FluidMove 시스템
참고 참고

FluidMoveSetTagBehavior 는 데이터 저장소에 값을 쓰는 데 사용됩니다. FluidMoveBehavior 는 데이터 저장소에서 데이터를 읽고 씁니다.

다음 예에서는 데이터의 목록 세부 보기를 사용할 때 ListBoxItem에 있는 항목의 세부 정보 보기와 ListBox 간의 부드러운 전환을 만들기 위해 FluidMoveBehavior, FluidMoveSetTagBehavior 및 데이터 저장소가 함께 작동하는 방법을 설명합니다.



항목을 선택할 때 목록의 항목과 항목의 세부 정보 보기 간의 전환에 애니메이션 효과를 적용하는 데 사용되는 FluidMoveBehavior 및 FluidMoveSetTagBehavior

FluidMoveBehavior 샘플

이 예에서 ListBox는 일련의 ListBoxItems(목록 보기), 즉 구매 가능한 의자 목록을 표시합니다. 의자의 목록 보기에는 각 의자에 지정된 속성 선택 사항인 이름, 가격 및 이미지가 포함됩니다.

의자가 ListBox에서 선택되면 세부 정보 보기가 표시됩니다. 세부 정보 보기는 목록에서 선택한 개별 항목에 연결된 세부 정보를 표시합니다.

이 예에서는 목록에서 선택한 의자와 세부 정보 보기에 표시되는 의자 간의 전환에 애니메이션 효과가 적용됩니다. 이 전환을 사용하려면 목록의 의자가 이 애니메이션의 시작 지점으로 식별되어야 합니다. 이 작업은 ItemTemplate(목록의 항목 모양을 정의하는 템플릿)의 Image 개체를 FluidMoveSetTagBehavior로 태그를 지정하여 수행됩니다.

Expression Community Gallery(Expression 커뮤니티 갤러리)에서 예제를 다운로드하고 연 경우 항목 템플릿을 찾으려면 개체 및 타임라인 패널에서 ListBox를 마우스의 오른쪽 단추로 클릭하고 추가 템플릿 편집, 생성된 항목(ItemTemplate) 편집을 차례로 클릭한 다음 현재 항목 편집을 클릭합니다. FluidMoveSetTagBehaviorImage 개체에 추가되어 있습니다.



Image 개체에 적용된 FluidMoveSetTagBehavior

ListBox의 FluidMoveSetTagBehavior

FluidMoveSetTagBehavior가 개체에 추가되면 공용 속성태그 속성 범주가 속성 패널에 표시됩니다.



속성 패널의 FluidMoveSetTagBehavior

속성 패널의 FluidMoveSetTagBehavior

AppliesTo 속성은 이미지 자체가 FluidMoveSetTagBehavior가 적용되는 항목이므로 Self로 설정됩니다.

Tag 속성은 이미지를 항목 템플릿 외부에서 사용할 수 없으므로 DataContext로 설정됩니다. DataContext 태그는 이 템플릿이 바인딩되는 데이터, 즉 의자에 관련된 데이터를 식별합니다.

FluidMoveSetTagBehavior 동작은 데이터(이 예에서는 이미지)에 태그를 지정하고 데이터 저장소에 데이터를 넣어서 FluidMoveBehavior가 적용된 후에 FluidMoveBehavior에서 찾을 수 있도록 합니다.

이 작업을 확인하려면 예제 프로젝트에서 범위 반환Dn195689.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(ko-kr,VS.120).png을 클릭합니다. 개체 및 타임라인 패널에서 Grid를 확장합니다. FluidMoveBehaviorGrid 개체에 추가되어 있습니다.



Grid에 적용된 FluidMoveBehavior

모눈의 FluidMoveBehavior

FluidMoveBehavior를 개체(이 예에서는 Grid)에 추가하면 공용 속성, 애니메이션 속성태그 속성 범주가 속성 패널에 표시됩니다.



속성 패널의 FluidMoveBehavior

속성 패널의 FluidMoveBehavior

태그 속성 범주에 InitialTag 속성이 DataContext 태그로 지정되어 있습니다. 즉 이 동작이 트리거되면 데이터 저장소에 등록된 DataContext의 마지막 위치(이 예에서는 선택한 ListBoxItemItemTemplate에 있는 Image 개체)를 찾습니다. 그런 다음 동작은 해당 인스턴스를 동작의 원점으로 사용합니다.

결론적으로 FluidMoveSetTagBehavior 동작은 애니메이션을 시작하려는 템플릿의 개체에 태그를 지정합니다. 테이터 컨텍스트는 데이터 원본을 참조하여 숨겨진 데이터 저장소에 등록합니다. FluidMoveSetTagBehavior 동작 참조를 통해 FluidMoveBehavior 동작은 애니메이션의 시작 지점을 찾은 다음 원하는 애니메이션 속성을 FluidMoveBehavior 동작에 의해 태그가 지정된 개체에 적용합니다. 이 예에서는 FluidMoveBehavior가 큰 의자(세부 정보 보기의 의자)를 작은 의자(목록 보기의 의자)에서 제외되도록 보이게 만드는 데 사용됩니다.

표시: