VisualState.Storyboard 屬性

定義

命名空間:

Microsoft.UI.Xaml

取得或設定 分鏡腳本 ，這個腳本會在使用這個視覺狀態時定義控制項的狀態特定屬性值和外觀。

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做為目前視覺狀態時要套用至控制項的屬性變更。

範例

此範例會為包含一個Grid的Button建立簡單的ControlTemplate。 具有 「PointerOver」 x：Name 屬性值的VisualState具有分鏡腳本，當使用者將指標放在 上方 Button 時，會將按鈕內容 () 從綠色變更為紅色的按鈕內容 Grid 色彩。 包含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 一物件。 Storyboard就像是動畫的容器，它可以包含一或多個動畫定義。 每個這類動畫都可以以特定具名目標上的特定相依性屬性為目標。 具名目標必須是控制項範本中定義 Name 或 x：Name 屬性值 的專案。 相依性屬性必須是存在於該物件物件模型或附加屬性中的屬性。 若要設定動畫目標，您可以使用 Storyboard.TargetName 和 Storyboard.TargetProperty 附加屬性。 如需如何使用 XAML 語法定義動畫的詳細資訊，以及您可以使用的動畫類型，請參閱 分鏡腳本動畫。

影響版面配置的動畫可能是相依的動畫，當控制項載入 VisualState時，可能會對控制項的使用者產生效能影響。

另請參閱

• Storyboard
• 腳本動畫
• XAML 控制項範本
• XAML 控制項和應用程式樣式範例