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="Hill@Home" 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="Hill@Home" 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="Hill@Home" 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葵花宝典