애니메이션은 패널에 의해 제한됩니다.

Question

설명하기가 조금 어렵지만 최선을 다할 것입니다.
저는 이미지와 레이블이 있고 두 개의 상태 ("Big"및 "Small")가 필요한 컨트롤이 있습니다.

"큰"상태에서 이미지는 컨트롤의 중앙에 위치해야하며 레이블은 가운데가 있어야합니다 (이미지가있는 도크와 레이블이 상단에 고정 된 것처럼).

"작은"상태에서 이미지는 컨트롤의 왼쪽 상단과 작게 표시되어야하며 레이블은 바로 옆에 있어야합니다.

큰 국가는과 같이 보일 것입니다 :

그리고 작은 상태 :

그리고 까다로운 부분을 : 내가 그들 사이를 전환 할 때 나는 그것이 애니메이션 필요 0.3 초 ​​이상.
적합하다고 판단한 패널이 없습니다.

DockPanel은 두 가지 상태에 대한 좋은 해결책이지만 애니메이션을 만들 수는 없습니다.
캔버스에는 애니메이션을 적용 할 수 있지만 적절한 레이아웃이 없습니다 (너무 쉽게 가운데 맞춤 할 수 없음).

가장 좋은 방법은 무엇입니까?

Answer 1

WPF에서 애니메이션 정렬이 없으면 올 수있는 유일한 것은 - ThicknessAnimation입니다. 그러나 DiscreteObjectKeyFrame을 사용하여 정렬을 설정할 수 있습니다. 다음은 Label에 Bottom에 VerticalAlignment을 설정하는 간단한 예제입니다 :

<Grid> 
    <Grid.Triggers> 
     <EventTrigger SourceName="Small" RoutedEvent="Button.Click"> 
      <BeginStoryboard> 
       <Storyboard>       
        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Test" Storyboard.TargetProperty="VerticalAlignment"> 
         <DiscreteObjectKeyFrame KeyTime="0:0:0"> 
          <DiscreteObjectKeyFrame.Value> 
           <VerticalAlignment>Bottom</VerticalAlignment> 
          </DiscreteObjectKeyFrame.Value> 
         </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger> 
    </Grid.Triggers> 

    <Label x:Name="Test" Content="Test" Width="300" Height="300" Background="Aqua" VerticalAlignment="Top" HorizontalAlignment="Center" /> 

    <Button Name="Small" Content="Small" Width="100" Height="30" HorizontalAlignment="Right" VerticalAlignment="Top" /> 
</Grid> 

표준 애니메이션과 함께 사용, 같은 DoubleAnimation, 나는 당신이이 목표를 달성 할 수있을 것 같아요.