silverlight樂動魔方 實戰二

回歸上次，

把XAML源碼複制黏貼到···SilverlightMusicHit項目上的···MainPage上，就會把那一閃一閃的···放進去了

（有沒有發現有啥不同額，··沒錯··是倒影~~）

1、再寫一個新的BUTTON···使用一樣的樣式，StaticResource ButtonStyle1，

<Button Grid.Column="1" Margin="-137,0,0,121" RenderTransformOrigin="0.5,0.5" Style="{StaticResource ButtonStyle1}" Height="72" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="278" Content="[email protected]" Opacity="0.1">
            <Button.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="-1"/>
                    <TranslateTransform Y="10"></TranslateTransform>
                </TransformGroup>
           

具體用法··檢視MSDN

RenderTransform 屬性

擷取或設定影響此元素呈現位置的轉換資訊。 這是一個依賴項屬性。

MainPage源碼

<UserControl x:Class="SilverlightMusicHit.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="600" d:DesignWidth="800">
    <UserControl.Resources>
        <Style x:Key="ButtonStyle1" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.75"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.5"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="0.25"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:2.5" Value="0.25"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:3" Value="0.5"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:3.5" Value="0.75"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:4" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOver"/>
                                    <VisualState x:Name="Pressed"/>
                                    <VisualState x:Name="Disabled"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter x:Name="contentPresenter" OpacityMask="Black"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="FontFamily" Value="Arial Black"/>
            <Setter Property="FontSize" Value="48"/>
            <Setter Property="Foreground">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Black" Offset="0"/>
                        <GradientStop Color="White" Offset="1"/>
                        <GradientStop Color="#FF1D1D1D" Offset="0.116"/>
                        <GradientStop Color="#FF303030" Offset="0.191"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="300"/>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="35*" />
        </Grid.ColumnDefinitions>
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.803,1.006" StartPoint="0.8,-0.006">
                <GradientStop Color="Black" Offset="0.584"/>
                <GradientStop Color="White" Offset="1"/>
            </LinearGradientBrush>
        </Grid.Background>
        <Button Content="[email protected]" Grid.Column="1" Margin="-137,0,0,153" RenderTransformOrigin="0.5,0.5" Style="{StaticResource ButtonStyle1}" Height="72" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="278"/>
        <Button Grid.Column="1" Margin="-137,0,0,121" RenderTransformOrigin="0.5,0.5" Style="{StaticResource ButtonStyle1}" Height="72" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="278" Content="[email protected]" Opacity="0.1">
            <Button.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="-1"/>
                    <TranslateTransform Y="10"></TranslateTransform>
                </TransformGroup>
            </Button.RenderTransform>
        </Button>

        <Button Name="btnStart" Content="Play Game" Grid.Column="1" Height="69" HorizontalAlignment="Left" Margin="209,378,0,0"  VerticalAlignment="Top" Width="256" FontFamily="Comic Sans MS" FontSize="26" Background="#FFE2C200" Foreground="#FF570000" Click="btnStart_Click" Opacity="0.5"></Button>
        <Canvas Name="Hit" Margin="267,226,64,239" Width="135" Height="135" Grid.Column="1"></Canvas>
        <TextBlock Name="txtBlog" Text="http://blog.csdn.net/cheng110110" Height="20" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="300" />
    </Grid>
</UserControl>
           

再改改它的 透明度Opacity="0.1" 倒影就這樣完成了~~

name:5+x

參考文章與書籍：

MSDN

Expression Blend知識錦

WPF葵花寶典