Silverlight新手入門教程（主要介紹一些效果的基本實現和用法）1

首先我也是剛剛自學一個禮拜，說實話自學真是好糾結，好多東西都要在網上這裡找那裡找的，所以我把找到的那些東西整理了一下。

推薦去這裡下載更多的SilverlightDemo

http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html

 

首先是配置Silverlight的環境，我的VS2010中文版，裝了2010SP1，然後再安裝這2個就可以了，先裝第一個，然後第二個

第一部分   http://download.csdn.net/detail/qq873113580/4861371

第二部分 http://download.csdn.net/detail/qq873113580/4861523

上面的只是Silverlight4的東西，在後面如果要引用Blend裡面的東東的時候最好把Silverlight5也裝上

http://download.csdn.net/detail/htp111111sinacom/3912889

這樣的話配置就搞定了

 

1，Rectangle長方行的一些用的東西

     Stroke屬性設定實線邊框，StrokeDashArray="5,2"虛線邊框

     模糊邊框，類似月亮的光暈

  <Rectangle RadiusX="5" RadiusY="5" Width="300" Height="200" Fill="#FFFF0000" Stroke="Blue" StrokeThickness="2"><Rectangle.Effect><BlurEffect Radius="5" /></Rectangle.Effect>  </Rectangle>

    Fill代表整個填充的顏色，BlurEffrct那裡設定的光暈的大小，可以自己慢慢調，查看效果。

    ，中間那個紅色長方行的邊框模糊的

   

  

   整個背景的漸層效果。

  

<Rectangle Grid.Column="0" Grid.Row="0" Grid.RowSpan="2">        <Rectangle.Fill>              <LinearGradientBrush StartPoint="1,0" >                        <GradientStop Color="#CC4E45" Offset="0.2"/>                        <GradientStop Color="#B52D20" Offset="0.7"/>              </LinearGradientBrush>         </Rectangle.Fill></Rectangle>

此代碼可以放在任何需要的背景顏色或者前景色彩裡面

offset，StartPoint，Color裡面的可以自己去調

如下
  

裡面顏色的漸層就這這樣

 

2，在App.XAML檔案裡面寫全域樣式,x:key類似ID，targettype代表這個樣式在什麼控制項使用，我這裡是用在Button控制項上面

      <Application.Resources><!--樣式必須寫在這個標籤裡面-->
               <Style x:Key="MenuButton" TargetType="Button">

                      <Setter Property="Width" Value=“100”>

                       <Setter Property="Height" Value=“100”>

                        ........

                </Style>

        </Application.Resources>

       在Main.XAML裡面調用樣式

        <Button Style="{StaticResource MenuButton}"/>

        這個是調用Style的文法{StaticResource x:key的值}

        當然這個樣式我們也可以自己定義一些模版，改變一下,就像上面那個面板的圓叉叉按鈕一樣

      

<Style x:Key="Close" TargetType="Button">       <Setter Property="Width" Value="50"/>       <Setter Property="Height" Value="25"/>       <Setter Property="Template">       <Setter.Value>           <ControlTemplate>                 <Border Width="22" Height="22" CornerRadius="15">                    <!--。。。。。。。。。。。。。。。。。。。。。。。 text的值隨便去賦值，只不過R代表的表徵圖是(X)-->                    <TextBlock Foreground="#222" TextAlignment="Center" Text="r" FontSize="11" FontFamily="Webdings" VerticalAlignment="Center"/>                    <Border.Background>                        <RadialGradientBrush GradientOrigin="0.3,0.3">                             <GradientStop Color="#FFF" Offset="0.15"/>                             <GradientStop Color="#777" Offset="1"/>                        </RadialGradientBrush>                    </Border.Background>                   </Border>             </ControlTemplate>       </Setter.Value>      </Setter></Style>

 

 下面這個是一些功能表按鈕自訂的一些樣式，，如果對於Silverlight有點理解的人話，不難看出自訂的模版，就是在樣式裡面設定Temple屬性,然後在值裡面嵌入一個

controlTemplate之後，裡面的東西就是和Main介面的寫法一樣的，這些代碼可以收集起來，用的時候直接粘貼，然後在根據自己的需求修改

<Application.Resources>        <!--功能表按鈕樣式-->        <Style x:Key="MenuButton" TargetType="Button">            <Setter Property="Template">                <Setter.Value>                    <ControlTemplate TargetType="Button">----從這之後自己設定類似介面效果一樣的                        <Grid>                            <Rectangle Width="75" Height="25" RadiusX="5" RadiusY="5" Stroke="#5E1A14" Margin="10,0">                                <Rectangle.Fill>                                    <LinearGradientBrush StartPoint="1,0">                                        <GradientStop Color="#BD5E54" Offset="0.0"/>                                        <GradientStop Color="#90322A" Offset="0.9"/>                                    </LinearGradientBrush>                                </Rectangle.Fill>                            </Rectangle>                            <TextBlock FontSize="12" Text="{TemplateBinding Content}" Foreground="#F5F5F5" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold"/>                        </Grid>                    </ControlTemplate>                </Setter.Value>            </Setter>        </Style>    </Application.Resources>

 

 

        在後台CS檔案裡面動態給某個控制項賦值樣式屬性

     

   btn.Style = App.Current.Resources["MenuButtonHover"] as Style;

      ["這裡面的是Style的Key"]

     

     動態賦值顏色

     第一種是用取色軟體取出來的顏色，顯示的數字，分別輸入在1，2，3，4的位置，但是取色軟體所取色的只有前三個，所以第4個參數用0就好了

      grid.Background = new SolidColorBrush(Color.FromArgb(1, 2, 3, 4));
      這種賦值是一般比較簡單的

     grid.Background = new SolidColorBrush(Colors.Red);

    提示框效果，類是HTML裡面的Title效果，滑鼠移動到控制項上面去的時候，滑鼠旁邊顯示一些提示

<Button ToolTipService.ToolTip="This is ToolTip text"/>第一種

第二種

 <Button Content="Button">     <ToolTipService.ToolTip>         <TextBlock Text="text"/>   </ToolTipService.ToolTip> </Button>

兩種方式，第一是直接，在標籤裡面加ToolTipService

另外一種是在標籤裡面使用

 

 

圖片圓角效果<Canvas x:Name="MainFrame" Background="AntiqueWhite" Margin="0,-200,600,0">   <Canvas.Clip>       <RectangleGeometry RadiusX="10" RadiusY="10" Rect="0,0,600,500" />   </Canvas.Clip>   ..下面是圖片</Canvas>

把圖片標籤嵌入進去之後，圖片會圓角顯示

 

 

動畫教程

動態註冊

           //執行個體化StoryBoard            Storyboard storyBoard = new Storyboard();            //設定動畫軌跡            DoubleAnimation doubleAnimationY = new DoubleAnimation();            //執行時間            doubleAnimationY.Duration = new Duration(TimeSpan.FromMilliseconds(500));            //變數大小            doubleAnimationY.To = 0;            //綁定執行動畫的對象            Storyboard.SetTarget(doubleAnimationY, this.Sale（“這個參數是控制項對象，也就是說給哪個註冊動畫”）);            //設定執行動畫的屬性            Storyboard.SetTargetProperty(doubleAnimationY, new PropertyPath("Height（這個是控制項的屬性，比如我現在動畫的方式改變高度）"));            //添加動畫            storyBoard.Children.Add(doubleAnimationY);            //執行動畫            storyBoard.Begin();

靜態註冊

<UserControl>    <UserControl.Resources>        <Storyboard x:Name="SlideOut">            <DoubleAnimation Storyboard.TargetName="Slide" Storyboard.TargetProperty="這裡的必須是Storyboard.TargetName對象的屬性" Duration="00:00:00.50" To="200"/>        </Storyboard>        <Storyboard x:Name="SlideIn">            <DoubleAnimation Storyboard.TargetName="Slide" Storyboard.TargetProperty="這裡的必須是Storyboard.TargetName對象的屬性" Duration="00:00:00.50" To="0"/>        </Storyboard>    </UserControl.Resources></UserControl>在事件裡面調用SlideIn.Begin();

這些代碼直接寫在你要註冊的介面裡面，注意標籤的嵌套，要不然不會有效果，調用的時候在代碼裡面，動畫名字.Begin就好了

 

動靜結合的動畫，適用於建立一個動畫，使用所有符合約定的控制項

自訂全域動畫，使用Behavior建議去看看這個有例子有代碼

http://www.cnblogs.com/chengxingliang/archive/2012/03/19/2403331.html

當然前面的Behavior只是靜態，如果需要在後台代碼裡面動態調用可以去這裡看看

http://geekswithblogs.net/SilverBlog/archive/2009/09/22/behaviors-how-to-attach-behavior-in-code-behind-silverlight-3.aspx

 

 

自訂計時器

主要原理是，利用動畫的完成事件，然後繼續調用自己，進入是死迴圈狀態。

在使用者介面定義，並且註冊完成事件

<UserControl.Resources>

    <Storyboard x:Name="timer" Completed="timer_Tick" /></UserControl.Resources> 

在初始化的時候設定時間timer.Duration = new TimeSpan(0, 0, 0, 0, 200); //200毫秒    timer.Begin();void timer_Tick(object sender, EventArgs e){//在這裡處理定時器事件timer.Begin();} 

利用Storyboard對象的Completed事件(動畫結束之後觸發)來類比定時器。

計時器的類
DispatcherTimer timer = new DispatcherTimer();
timer.Tick += (sender, e) => {
 這裡是重複的執行的一些代碼

};
timer.Interval = new TimeSpan(0,0,1);
timer.Start();

 

改變DataGrid列表的頭的樣式，預設下DataGrid是能修改Background樣式的,所以要這樣寫

<Style x:Key="Heander" TargetType="sdk:DataGridColumnHeader">            <Setter Property="Template">                <Setter.Value>                    <ControlTemplate TargetType="sdk:DataGridColumnHeader">                        <Grid Background="Black" Height="20"/>                    </ControlTemplate>                </Setter.Value>            </Setter>        </Style>

 

這些都是我初學的時候遇到的一些問題，我把他記錄下，也許對新人會有點協助。