VisualState.Storyboard 속성

정의

네임스페이스:

Windows.UI.Xaml

이 시각적 상태를 사용할 때 컨트롤의 상태별 속성 값과 모양을 정의하는 Storyboard 를 가져오거나 설정합니다.

public:
 property Storyboard ^ Storyboard { Storyboard ^ get(); void set(Storyboard ^ value); };

Storyboard Storyboard();

void Storyboard(Storyboard value);

public Storyboard Storyboard { get; set; }

var storyboard = visualState.storyboard;
visualState.storyboard = storyboard;

Public Property Storyboard As Storyboard

<VisualState>
  singleStoryboard
</VisualState>

속성 값

Storyboard

이 VisualState를 현재 시각적 상태로 사용할 때 컨트롤에 적용할 속성 변경 내용을 정의하는 Storyboard입니다.

예제

이 예제에서는 하나의 그리드를 포함하는 단추에 대한 간단한 ControlTemplate을 만듭니다. x:Name 특성 값이 "PointerOver"인 VisualState에는 사용자가 단추 위에 포인터를 놓을 때 단추 콘텐츠(그리드)의 색을 녹색에서 빨간색으로 변경하는 Storyboard가 있습니다. x:Name 특성 값이 "Normal"인 VisualState가 포함되어 사용자가 단추에서 포인터를 옮기면 Grid 배경이 녹색으로 돌아갑니다.

<ControlTemplate TargetType="Button">
  <Grid >
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">

        <VisualStateGroup.Transitions>

          <!--Take one half second to transition to the PointerOver state.-->
          <VisualTransition To="PointerOver" 
                              GeneratedDuration="0:0:0.5"/>
        </VisualStateGroup.Transitions>
        
        <VisualState x:Name="Normal" />

        <!--Change the SolidColorBrush, ButtonBrush, to red when the
            Pointer is over the button.-->
        <VisualState x:Name="PointerOver">
          <Storyboard>
            <ColorAnimation Storyboard.TargetName="ButtonBrush" 
                            Storyboard.TargetProperty="Color" To="Red" />
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid.Background>
      <SolidColorBrush x:Name="ButtonBrush" Color="Green"/>
    </Grid.Background>
  </Grid>
</ControlTemplate>

설명

Storyboard 속성의 값은 null이거나 단일 Storyboard 개체입니다. 스토리보드는 애니메이션용 컨테이너와 같습니다. 하나 이상의 애니메이션 정의를 포함할 수 있습니다. 이러한 각 애니메이션은 특정 명명된 대상에 대한 특정 종속성 속성을 대상으로 지정할 수 있습니다. 명명된 대상은 템플릿 자체에 정의된 Name 또는 x:Name 특성 값이 있는 컨트롤 템플릿의 요소여야 합니다. 종속성 속성은 해당 개체의 개체 모델에 있는 속성이거나 연결된 속성이어야 합니다. 애니메이션을 대상으로 하려면 Storyboard.TargetName 및 Storyboard.TargetProperty 연결된 속성을 사용합니다. XAML 구문을 사용하여 애니메이션을 정의하는 방법과 사용할 수 있는 애니메이션 유형에 대한 자세한 내용은 스토리보드 애니메이션을 참조하세요.

레이아웃에 영향을 주는 애니메이션은 잠재적으로 종속된 애니메이션으로, 컨트롤이 VisualState를 로드할 때 컨트롤 사용자에게 성능이 저하될 수 있습니다. 자세한 내용은 시각적 상태에 대한 스토리보드 애니메이션을 참조하세요.

추가 정보

• Storyboard
• 스토리보드 애니메이션
• 시각적 상태에 대한 스토리보드 애니메이션
• 빠른 시작: 컨트롤 템플릿
• XAML 컨트롤 및 앱 스타일 샘플