2011年2月15日 星期二

Tilt Effect

MSDN 的 Windows Phone 專頁中,可以找到一些範例程式碼,
最近有興趣的是這個 TiltEffect Sample

原因是最近我們正想為公司 WP7 App 中的按鍵加入一些動畫效果,
這個 Tilt Effect Sample 表現的效果蠻不錯的,個人相當喜愛,
但我們的 App 不太適合直接拿這個 Sample Code 來用,
這份範例的動畫主要是在 mouse leave 時發生按鍵浮起來的效果,
在我們寫的 App 中,幾乎所有的按鍵在 mouse enter 後立刻就會導至新的 Page
也就是說用戶根本看不到 mouse leave 時的動畫效果,
所以我必須將這個效果移到 mouse pressed 上面。

範例中的 TiltEffect.cs 這個 class 是重點中的重點,
這種方法可以讓整個 Page 的 Controller 預設得到同樣的效果,
但有點太過全面也有點超出我們的需求,
最後是使用 Style 的方式在按鍵中加入效果,xaml 紀錄如下。


<phone:PhoneApplicationPage
    x:Class="Btn_SB_Test.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <phone:PhoneApplicationPage.Resources>
        <Style x:Key="customButtonStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Grid.Projection>
                                <PlaneProjection x:Name="cusBtnProjection" CenterOfRotationX="1" CenterOfRotationY="1" />
                            </Grid.Projection>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver"/>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="cusBtnProjection" Storyboard.TargetProperty="RotationX" From="0" To="-20" Duration="0:0:0.1"/>
                                            <DoubleAnimation Storyboard.TargetName="cusBtnProjection" Storyboard.TargetProperty="RotationY" From="0" To="10" Duration="0:0:0.1"/>
                                            <DoubleAnimation Storyboard.TargetName="cusBtnProjection" Storyboard.TargetProperty="GlobalOffsetZ" From="75" To="50" Duration="0:0:0.1"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentControl x:Name="ContentContainer" Content="{TemplateBinding Content}"
                                            Foreground="{TemplateBinding Foreground}"
                                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                            Padding="{TemplateBinding Padding}"
                                            ContentTemplate="{TemplateBinding ContentTemplate}">
                            </ContentControl>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </phone:PhoneApplicationPage.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Button x:Name="btn_Album" Height="75" Width="75" BorderThickness="0" Padding="0" Style="{StaticResource customButtonStyle}">
            <Image x:Name="img_Login" Height="50" Width="50"/>
        </Button>
    </Grid>
</phone:PhoneApplicationPage>

4 則留言:

  1. 我係門外漢對PROGRAM 0 知識...但又想學下寫WP7既APP 應該點入手..係咪學好C#就OK??? 如果自學應該係睇書? 有冇推介...

    回覆刪除
  2. 學好C#只是學好一個程式語言,就好比VB.Net也可以開發WP7軟體,所以開發軟體還必須選一個framework,而開發WP7的framework是Silverlight,也要一併看看唷,書的話建議可上WP7官網下載免費的電子書唷 :D

    回覆刪除
  3. 問多一件事...請問如果想寫一個關於手機版的討論區/討壇的APP應該要怎去連結/編寫的...例如入APP可以選討論區的分區, 看到最新的文章等..

    回覆刪除
  4. 我看不太懂您的說法…我猜想你自己製作且經營了一個論壇…你想要做一個手機的App讓其他人可以透過App來使用論壇是嗎?
    若是如此你應該會可以操作自己的資料庫…App的寫法就和網頁類似…對資料庫請求資料…想辦法用自己要的介面秀出來即可。
    若論壇不是您自己製作、經營的…您可能要先了解該論壇是否有開放的介面可供用戶使用…例如Facebook就有登入的介面、發文的介面、取得朋友列表的介面等…若沒有開放的介面可用製作出可連結/編寫的App難度頗高…

    回覆刪除