silverlight乐动魔方 实战一

新建一个silverlight项目

 

 

 

大概框架是这样的

 

 

新建之后，进入MainPage.xaml

 

很多大牛都说，silverlightUI最好使用，Microsoft Expression Blend ，（大牛都这样说了，那就用呗， = =）··我用的就是Microsoft Expression Blend 4

 

那就只能先打开···Microsoft Expression Blend

 

新建一个项目···

（- =！）这部份应该是美工做的，没办法，China 哪有这么多美工额，~~~ 硬着头皮学学，··具体参考···《Expression Blend知识锦》 上网谷歌一下有得下载。

 

1、工具栏里面有个··· 渐变工具，把背景 搞成这样子~~

（觉得效果不太满意，可以拉动边缘上的箭头，调节渐变效果哦~~）

 

2、工具栏里面找【T】创建个Text ，打上文字~~哈··我打HillHome~~（自己创建多年的工作室，具体啥意思，··你懂得 = =！）

3、点击它，右键它，构成控件 ，选Button。

 

4、选择状态 ，编辑他的 normal事件

并且打开他的故事板~

 

5、选择相应的时间，按那故事板的"+" 来添加相应的显示状态， 其实 就是和做GIF一样嘛。 就设计不同时段的···opactiy属性，增加或较少他的透明度。

 

 

做好之后，回到MainPage 按F5运行一下， 文字是否一闪一闪的？

如果是的话··恭喜你，成功了！

呵呵····

 

XAML源码

<UserControl
	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"
	x:Class="SilverlightMusicHitUI.MainPage"
	Width="640" Height="480">
	<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="323"/>
			<ColumnDeFinition/>
		</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,153" RenderTransformOrigin="0.5,0.5" Style="{StaticResource ButtonStyle1}" Height="72" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="278">
			<Button.RenderTransform>
				<CompositeTransform/>
			</Button.RenderTransform>
		</Button>
	</Grid>
</UserControl>

name：5+x

 

参考文章与书籍：

Expression Blend知识锦