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葵花宝典
----------------------------
用心做产品 name:5+x
----------------------------
用心做产品 name:5+x
----------------------------