silverlight樂動魔方 實戰一 .

建立一個silverlight項目

 

  大概架構是這樣的  

建立之後，進入MainPage.xaml

 

很多大牛都說，silverlightUI最好使用，Microsoft Expression Blend ，（大牛都這樣說了，那就用唄， = =）··我用的就是Microsoft Expression Blend 4

 

那就只能先開啟···Microsoft Expression Blend

 

建立一個項目···

（- =！）這部份應該是美工做的，沒辦法，China 哪有這麼多美工額，~~~ 硬著頭皮學學，··具體參考···《Expression Blend知識錦》 上網Google一下有得下載。

 

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,0,0,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知識錦