前言

---

 

有時候我們開發應用程式時會需要用到一些小動畫來做使用者點擊或觸發某些事情時的回饋，例如：使用者點及按鈕後，某個方塊會自動做變大的動畫，在這邊如果你是開發有XAML的專案，有一個很方便的元件可以使用－Storyboard。

Storyboard是什麼呢？

他是一個可以透過設定時刻表用來控制元件隨著時間做變化的腳本元件。

接下來讓我們介紹一下如何實作出Storyboard

 

在這邊我們要做的範例是點選Button後會使一個紅色Rectangle的消失

 

1.加入Button與紅色Rectangle

<Button Content="Show" Margin="597,429,0,121" Click="Button_Click" x:Name="execButton" Height="98" Width="180" Grid.Row="1"/>
        <Rectangle x:Name="Rect" Grid.Row="1" Width="240" Height =" 160" 
                   HorizontalAlignment="Center" VerticalAlignment="Center" Fill="Brown" StrokeThickness ="5"/>

 

2．在XAML中加入Storyboard

首先我們為了要使用Stoyboard，需要在XAML介面中加入Storyboard標籤：

x:Name = "myStoryboard"　是Storyboard腳本元件的名稱，用來之後在Code啟動Storyboard後的

 

在這邊你會看到Storyboard標籤被包覆在<Grid.Resources>，因為Storyboard是屬於一種Resources的內容。

Resources是一種共享，反覆利用元素、屬性的機制。

而在這邊我們元件都放在Grid下，所以需要被包覆在Grid.Resources中（當然不一定是在Grid.Resources，如果你今天的元件是放在StackPanel，則可以透過StackPanel.Resources，甚至也可以放在App.Resources）

 

你會看到

1．Storyboard.TargetNameTargetName ：

這行的意思是去指定我所想要對應的元件，如Storyboard.TargetName = "Rect"，這個Rect是我前面定義的Rectangle元件名稱。

 

2．Storyboard.TargetProperty：

是去指定TargetName 要改變的屬性，Storyboard.TargetProperty="Opacity"則是代表我要對透明度去做改變

 

3．From與To則代表透明度的變化，由不透明到變成透明，最後Duration：則是設定動畫的時間。

<Grid.Resources>
            <Storyboard x:Name="myStoryboard">
                <DoubleAnimation
              Storyboard.TargetName="Rect"
              Storyboard.TargetProperty="Opacity"
              From="1.0" To="0.0" Duration="0:0:1"/>
            </Storyboard>
 </Grid.Resources>

 

3．設定啟動Storyboard的時間

在前面我們加入了Button的Click事件，而這邊我們就要在這事件中去處理啟動Storyboard

 

private void Button_Click(object sender, RoutedEventArgs e)
{
         
            myStoryboard.Begin();
}

 

以上當你完成後點選Button便會看到Rectangle的改變！

 

 

---

 

文章中的敘述如有觀念不正確錯誤的部分，歡迎告知指正　謝謝　=)

另外要轉載請附上出處 感謝