套用面板與製作按鈕的動畫效果

您可以任意套用應用程式的按鈕面板,也可以讓按鈕產生動畫效果。方法如下。

為應用程式定義外觀是一項重要的任務,而且您可能已經在 iOS UIButton 自訂變化上花費很多時間,使用 PNG 檔建立最適合應用程式的外觀。定義外觀後,您要決定使用者點選按鈕後會呈現什麼樣的效果:閃爍、顯示新影像、改變大小,或是一次呈現三種效果?

您的 Windows 市集應用程式按鈕控制項同樣也可以變更外觀,以及套用自訂的動畫效果。我們來看看如何在 XAML 中建立這些效果,並從 C# 和 C++ 觸發這些效果。

注意  如需使用 JavaScript 和 HTML 之 Windows 市集應用程式中動畫的詳細資訊,請參閱讓 UI 產生動畫效果

為按鈕控制項套用面板

您可以透過幾種方式變更按鈕控制項的外觀,最常用的方式為:

  • 使用預設樣式
  • 使用 XAML 繪圖工具,或
  • 使用點陣圖

讓我們更深入了解細節。

  • 使用預設樣式

    如果您希望應用程式遵循標準的 Windows 8 設計指導方針,就不需要進行太多的工作。現有的 XAML 按鈕可提供您想要的外觀及操作方式,而且您只需要調整幾項屬性,就可以改變色彩、大小及字型樣式,如快速入門:設定控制項的樣式 (使用 C#/VB/C++ 和 XAML 的 Windows 市集應用程式) 中所述。這些按鈕會自動調整,無論以任何大小顯示都能呈現最佳效果。

    使用 Xcode 時,您可以採用 [完成]、[確定]、[取消] 等系統設計。在 Windows 8,Windows 市集應用程式中對等的按鈕儲存在 StandardStyles.xaml 中。例如,這是套用至 XAML 按鈕時的內建 [播放] 按鈕樣式,可立即在 [應用程式列] 控制項中使用:

    範例按鈕

    建立這個樣式所需的唯一 XAML 是:

    
     <Button x:Name="myPlayButton"  Style="{StaticResource PlayAppBarButtonStyle}" />
    
    

    注意  StaticResource 中大部分的樣式都會預設標記為註解。若要使用這些樣式,請開啟 StandardStyles.xaml 檔案,尋找您要使用的按鈕,然後取消其註解。

    在專為 Windows 8.1 撰寫的應用程式中,不再提供 StandardStyles.xaml 檔案,而是有一個稱為 AppBarButton 的新型按鈕。例如,若要在 Windows 8.1 應用程式建立播放按鈕,您應該使用以下 XAML:

    
    <AppBarButton x:Name="myPlayButton" Icon="Play" Label="Play"/>
    
    
  • 使用 XAML

    假設您想要為媒體播放應用程式建立外觀如下的按鈕版本:

    範例按鈕

    這個按鈕有漸層的深色背景,以及代表 [播放] 符號的前景影像。您可能想要在使用者點選按鈕時變更前景影像,因此讓前景和背景影像各自獨立是較為合理的做法。

    那麼,在您啟動慣用的繪製程式建立幾個影像之前,請先考慮如何以程式設計的方式達成相同的結果。XAML 提供許多繪圖選項,讓您快速建立漸層紋理的背景,以及前景三角形。下列是其中一種做法:

    
     <Button x:Name="myCoolButton" Height="55" Width="104"  BorderThickness="0" >
                <Grid>
                    <Rectangle Width="104" Height="55">
                        <Rectangle.Fill>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="Black" Offset="0.0" />
                                <GradientStop Color="Gray" Offset="0.03" />
                                <GradientStop Color="Black" Offset="0.25" />
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <Polygon  Points="25,3,25,39,55,21">
                        <Polygon.Fill>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="LightGreen" Offset="0.0" />
                                <GradientStop Color="DarkGreen" Offset="1.0" />
                            </LinearGradientBrush>
                        </Polygon.Fill>
                    </Polygon>
                </Grid>
            </Button>
    
    

    如果您不想要手動輸入 XAML,可以使用 Blend 透過較為視覺化的方式建立相同的效果:

    使用 Blend 建立按鈕

  • 使用點陣圖

    XAML 按鈕控制項可以讓您使用自己定義的外觀覆寫其內容 – 假設您想要顯示多個影像。Grid 元素可以用來堆疊這兩個物件 (一個背景影像、一個前景影像),如下所示:

    
      <Button x:Name="myBitMapButton" Height="55" Width="104" BorderThickness="0" >
                <Grid>
                    <Image Source="graduated-button.png"/>
                    <Image Source="play-green.png"/>
                </Grid>
            </Button>
    
    

    您可以使用 StackPanel 元素組合更多物件,例如 TextBlock,讓按鈕呈現這樣的效果:

    範例按鈕

    以下是產生這種效果的程式碼:

    
      <Grid Background="#FF5989A4">
            <Button x:Name="myBitMapButton"   Height="200" Width="104"  BorderThickness="0" Margin="80,34,0,679" >
                <StackPanel Height="86" >
                    <Grid Height="55" VerticalAlignment="Top" >
                        <Image Source="graduated-button.png" Margin="0,16,0,-7"/>
                    <Image Source="play-green.png" Margin="0,16,0,-5"/>
                    <TextBlock Text="Play"  VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="24,0,22,-15"/>
                    </Grid>
                </StackPanel>
            </Button>
    
    

與點陣圖相較之下,使用 XAML 的優點在於影像會是有效的向量:無論顯示螢幕的解析度為何,都能適當的進行縮放調整。如果同時使用點陣圖和 XAML 方法建立按鈕,而且並排放置,當影像放大時,就能清楚看見兩者的差異。當然,您可以提供多個版本的影像來減少縮放效果,(請參閱支援多種解析度),但是可能很快就會對管理這麼多個檔案感到疲累。

看看這些像素!

XAML 的優點之一是能夠讓您定義範本供多個控制項使用。例如,假設您想要建立具有相同漸層背景的一系列按鈕,就像這樣:

媒體控制項按鈕

您可以建立一個樣式供每個按鈕使用,而不必每次定義漸層背景。在這個範例中,樣式會放在顯示按鈕的頁面 .xaml 檔中,假設為 MainPage.xaml。接著這個樣式會放入 <Page.Resources> 區段,像這樣:


        <Style x:Name="graduatedButton" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Rectangle>
                                <Rectangle.Fill >
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="Black" Offset="0.0" />
                                        <GradientStop Color="Gray" Offset="0.03" />
                                        <GradientStop Color="Black" Offset="0.25" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <ContentPresenter />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

請注意 <ContentPresenter/> 標記的使用方式,這是任何額外內容的預留位置 (例如,文字或其他影像)。以下 XAML 會宣告使用這個新樣式的按鈕,然後新增額外的三角形:


       <Button x:Name="myPlayButton" Style="{StaticResource graduatedButton}"  Height="44" Width="135"  Click="myPlayButton_Click" >
            <Grid>
                 <Polygon Points="50,3,50,39,86,21">
                    <Polygon.Fill>
                     <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                         <GradientStop Color="Yellow" Offset="0.0" />
                         <GradientStop Color="YellowGreen" Offset="0.5" />
                    </LinearGradientBrush>
                </Polygon.Fill>
              </Polygon>
            </Grid>
        </Button>


製作按鈕的動畫效果

撰寫 iOS 應用程式時,製作控制項 (如按鈕) 的動畫效果通常是在 [UIView beginAnimations]/[UIView commitAnimations] 區塊內修改控制項的一些屬性。在 Windows 市集應用程式中的對等程序涉及建立腳本物件。腳本物件可視為控制項所遵循的指令碼,描述其屬性經過一段時間的變化情形。這相當適合用來建立點選按鈕時產生的動畫,或是滑入一個新的資訊面板。

注意  請不要混淆 XAML 中的 [腳本] 一詞與 iOS 中的 [腳本] 一詞!

建立動畫最簡單的方式是使用 Blend。Blend 提供圖形化的方式來建立製作腳本的 XAML,此外還可以讓您邊工作邊預覽動畫。

首先讓我們來了解如何新增單一動畫至特定按鈕,然後再進一步了解如何透過建立樣式來建立可以套用至多個按鈕的動畫。這個動畫會使按鈕傾斜,呈現像是按入螢幕中的樣子。

在 XAML 檔案中定義按鈕,就像這樣:


 <Button x:Name="TiltButton"   BorderThickness="0" Margin="100,0,0,0" >
            <Grid>
                <Rectangle Width="200" Height="100">
                    <Rectangle.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Color="Black" Offset="0.0" />
                            <GradientStop Color="Gray" Offset="0.03" />
                            <GradientStop Color="Black" Offset="0.25" />
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <Polygon  Points="75,5,75,95,145,50">
                    <Polygon.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Color="LightGreen" Offset="0.0" />
                            <GradientStop Color="DarkGreen" Offset="1.0" />
                        </LinearGradientBrush>
                    </Polygon.Fill>
                </Polygon>
            </Grid>
        </Button>

這樣會產生看起來像這樣的按鈕:

按鈕

現在,在 Blend 中開啟專案。選取按鈕控制項,然後按一下 [物件與時間軸] 視窗中的 + 按鈕,如下所示:

Blend 進行中

選取 [新增] 建立新的腳本物件,然後為它命名,就像這樣:

在 Blend 中建立新腳本

點選 [錄製主要畫面格] 按鈕,這個按鈕位於時間碼顯示的左邊。這樣將會建立主要畫面格,而且所有按鈕的屬性都會在預設位置。將黃色的播放點線拖曳至少於約 0.5 秒。這會是第二個 (在此案例中也是最後一個) 主要畫面格的位置。

移動播放點

現在可以調整按鈕的參數以呈現傾斜效果。在右邊 [屬性] 檢視的 [轉換] 下,尋找 [投影] 並且將 Y 角度變更為約 -30。

變更 Y 軸值以建立傾斜效果

最後,按一下 [物件與時間軸] 視窗中腳本的名稱,然後確認已核取右邊的 [AutoReverse]。這樣會讓動畫在完成動作後回復原始狀態。

核取 AutoReverse

儲存 Blend 專案,並返回 Visual Studio。詢問您是否要重新載入方案時,務必按一下 [全部皆是]。現在動畫是專案的一部分,但是不會自動觸發。我們必須變更按鈕的 XAML 定義來執行兩件事:首先,它必須支援轉換 (實際上,Blend 會自動新增所需的 XAML),其次,它必須在 C# 程式碼後置檔案中呼叫函式 (我們必須自行新增這個函式)。以下是更新的 XAML:


<Button x:Name="TiltButton"   BorderThickness="0"  Click="TiltButton_Click" >
            <Grid>
                <Rectangle x:Name="rectangle" Width="200" Height="100">
                	<Rectangle.Projection>
                		<PlaneProjection/>
                	</Rectangle.Projection>
                    <Rectangle.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Color="Black" Offset="0.0" />
                            <GradientStop Color="Gray" Offset="0.03" />
                            <GradientStop Color="Black" Offset="0.25" />
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <Polygon  Points="75,5,75,95,145,50">
                    <Polygon.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Color="LightGreen" Offset="0.0" />
                            <GradientStop Color="DarkGreen" Offset="1.0" />
                        </LinearGradientBrush>
                    </Polygon.Fill>
                </Polygon>
            </Grid>
        </Button>

以下是程式碼後置頁面中會觸發動畫的 C# 函式:


private void TiltButton_Click(object sender, RoutedEventArgs e)
        {
            TiltAnimation.Begin();
        }

如果您使用 C++,則可使用類似的程式碼:


void MyApp::MainPage::TiltButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
	TiltAnimation->Begin();
}


當您執行這個應用程式時,會在點選按鈕時看見按鈕快速地稍微傾斜,就像這樣:

它真的傾斜了!

在上一節中,我們了解建立樣式能夠加速使用者介面的實作。下面要說明如何新增腳本至樣式,讓任何使用樣式建立的按鈕控制項都能繼承動畫。祕訣就是使用 VisualStateManager 物件,這可讓您為每個按鈕事件定義專屬腳本。以下 XAML 將在點選按鈕時觸發短暫動畫。如前面所述,這個 XAML 應該放入 <Page.Resources> 區段中,而且樣式會套用至您的按鈕。


 <Style x:Name="graduatedButton" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="grid" RenderTransformOrigin="0.5,0.5">
                            <Grid.RenderTransform>
                                <CompositeTransform/>
                            </Grid.RenderTransform>
                            <VisualStateManager.VisualStateGroups>                             
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>                                 
                                        <VisualState x:Name="Pressed">                                    
                                            <Storyboard >
                                            <DoubleAnimation Duration="0" To=" 0.9" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="grid"/>
                                            <DoubleAnimation Duration="0" To=" 0.9" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="grid"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>                              
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle >
                                <Rectangle.Fill >
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="Black" Offset="0.0" />
                                        <GradientStop Color="Gray" Offset="0.03" />
                                        <GradientStop Color="Black" Offset="0.25" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <ContentPresenter />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

使用 VisualStateManager 表示您甚至不需要使用 Begin() 觸發腳本動畫,因為只要狀態啟動它就會自動觸發。

相關主題

適用於 iOS 開發人員的主題
適用於 iOS 開發人員的資源
適用於 iOS 開發人員的 Windows 8 控制項
適用於 iOS 開發人員的 Windows 8 手冊
套用面板與動畫主題
開始使用:動畫
使用方法:使用 XAML 和 Expression Blend 建立使用者介面
讓 UI 產生動畫效果 (使用 C#/VB/C++ 和 XAML 的 Windows 市集應用程式)
腳本動畫 (使用 C#/VB/C++ 和 XAML 的 Windows 市集應用程式)
視覺狀態的腳本動畫

 

 

顯示:
© 2015 Microsoft