学习移植WPF到Silverlight（1）——HelloSilverlight（移植带动画的登陆界面控件）

浏览数：20 / 时间：2015年06月09日

/************************************************************************
* Author: Air灬↓易弦
*
* Date: 2014.4.18
*
* License: 如果能对你的学习和项目起到帮助是我的荣幸！
*
************************************************************************/

开发工具：Visual Studio2012 + Microsoft Express Blend4

最近公司WPF项目到尾声了，就开始接触一下Siverlight，想把WPF移植到silverlight上，尝试了一下

1.最终效果图（WPF与Silverlight）

WPF项目中的动态登陆界面，直接移植到Siverlight上（太阳，云彩，树枝动画效果）

Siverlight效果图

2.开始创建Siverlight项目

选择Siverlight应用程序

可以选择Siverlight版本，Blend的Siverlight是4版本的，我这儿选的4，当然5也可以的。

创建成功。

在MainPage上简单放一个Lable”Hello Silverlight！“。

按F5运行看到页面时整个填充进网页的，而怎么把控件填充中间，修改App.xaml.cs。

原App.xaml.cs文件

在App.xaml.cs里面添加一个Grid，让Application承载这个Grid，再把MainPage放到Grid中就达到居中的效果

Grid grid = new Grid() { Background = new SolidColorBrush(Colors.DarkGray) };//承载控件画布；

        public App()
        {
            this.Startup += this.Application_Startup;
            this.Exit += this.Application_Exit;
            this.UnhandledException += this.Application_UnhandledException;

            InitializeComponent();
        }

        private void Application_Startup(object sender, StartupEventArgs e)
        {
            grid.Children.Add(new MainPage() { Height = 600, Width = 700 });

            this.RootVisual = grid;
        }

完成MainPage居中效果。

3.导入WPF控件到Siverlight

新建控件所需图片的文件夹：Resources/Images/ImgLogin。

新建Siverlight控件

将WPF的登陆动画控件直接复制到LoginControl上，然后修改

WPF中可以直接添加<UserControl.Triggers>的触发器，而Silverlight不行，在Blend中的WPF项目和Silverlight项目中也是有这个区别（有无触发器选项），所以在Siverlight中就必须在后台添加Loaded事件，如下图。

这儿在Loaded事件中执行OnLoaded1的动画就行，而这儿出行的红线需要将xmal中的 <Storyboard x:Key="OnLoaded1">改为 <Storyboard x:Name="OnLoaded1">，如下图。

改成

还要注销掉<UserControl.Triggers>

好了，现在WPF的这个登录动画控件就移植完了

这儿说一下，这个WPF动画控件是让美工帮我找了一些素材，然后用Blend简单做了些动画，这儿就不介绍Blend制作动画过程了，我也是初学Blend拿不出手，大家网上找找Blend教程就是！

4.新建资源字典并再移植添加LoginControl1和LoginControl2两个登陆界面控件

新建Resources/Dictionarys文件夹，添加一个DicBackgroundStyles.xaml文件

添加3个LinearGradientBrush资源。

移植登陆元素控件，Siverlight里面新增一个sdk的命名空间，如WPF的Lable变成了sdk:Lable，移植过来改一下就好。

移植登陆背景控件，现在给控件Grid加上背景资源，显示无法解析，是因为我们添加了背景资源，但是没有引用背景资源，当然可以在被控件里面引用，也可以再App.xaml中引用（全局引用）。

在App.xaml中加入

<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/Dictionarys/DicBackgroundStyles.xaml"/><!--全局资源-->
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

添加一个Border，是背景圆角，加入DropShadowEffect效果

 <Grid x:Name="LayoutRoot" >
        <Border Background="{StaticResource LittleBlueBackground}" CornerRadius="10">
            <Border.Effect>
                <DropShadowEffect Color="#FFDBDBDB"/>
            </Border.Effect>
        </Border>
    </Grid>

移植的两个控件和引用资源就完成了。

5.整合登陆界面3大控件：背景，动画，元素到MainPage

先F5编译一下工程，然后点 ”工具箱“就显示登陆三个控件，拉进去MainPage排版一下就好

  <Grid x:Name="LayoutRoot">
   
        <local:LoginControl2 HorizontalAlignment="Center" VerticalAlignment="Center"  Width="400" Height="260"/> <!--背景控件-->
        <local:LoginControl HorizontalAlignment="Center" VerticalAlignment="Center"  Width="500" Height="500" Margin="71,113,129,-13"/> <!--动画控件-->
        <local:LoginControl1 HorizontalAlignment="Center" VerticalAlignment="Center"  Width="400" Height="260"/> <!--元素控件-->

    </Grid>

按F5运行效果图。

6.给登陆界面两个button换个Style

新建一个DicButtonStyles.xaml文件

在App.xaml里面添加资源字典引用

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             x:Class="HelloSilverlight.App"
             >
    <Application.Resources>
        
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Dictionarys/DicBackgroundStyles.xaml"/><!--全局资源-->
                <ResourceDictionary Source="Resources/Dictionarys/DicButtonStyles.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
       
    </Application.Resources>
</Application>

用Blend简单做出一个Button的Style，复制到DicButtonStyles.xaml里

<ResourceDictionary
  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">

    <Style x:Key="LoginButtonStyle" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid x:Name="grid">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Disabled"/>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="16" Storyboard.TargetProperty="(UIElement.Effect).(BlurEffect.Radius)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                        <ColorAnimation Duration="0" To="#F9747474" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="rectangle1" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="0.374" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="rectangle1" d:IsOptimized="True"/>
                                        <ColorAnimation Duration="0" To="#C6A3A3A3" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="rectangle1" d:IsOptimized="True"/>
                                        <ColorAnimation Duration="0" To="#FFCDDC05" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle1" d:IsOptimized="True"/>
                                        <ColorAnimation Duration="0" To="#FFB6C400" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Cursor)" Storyboard.TargetName="grid">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Cursor>Hand</Cursor>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle1" d:IsOptimized="True"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="rectangle1" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="rectangle1" d:IsOptimized="True"/>
                                        <ColorAnimation Duration="0" To="#C68AC242" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="rectangle1" d:IsOptimized="True"/>
                                        <ColorAnimation Duration="0" To="#E5657F43" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="rectangle1" d:IsOptimized="True"/>
                                        <ColorAnimation Duration="0" To="#F950603C" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="rectangle1" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="0.499" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)" Storyboard.TargetName="rectangle1" d:IsOptimized="True"/>
                                        <DoubleAnimation Duration="0" To="0.746" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" Storyboard.TargetName="rectangle1" d:IsOptimized="True"/>
                                        <ColorAnimation Duration="0" To="#00000000" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Cursor)" Storyboard.TargetName="grid">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Cursor>Hand</Cursor>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle1" d:IsOptimized="True"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="rectangle" RadiusX="10" RadiusY="10" Fill="#00000000">
                            <Rectangle.Effect>
                                <BlurEffect/>
                            </Rectangle.Effect>
                        </Rectangle>
                        <Rectangle x:Name="rectangle1" RadiusX="10" RadiusY="10" Stroke="#00000000" RenderTransformOrigin="0.5,0.5" Opacity="0.695">
                            <Rectangle.RenderTransform>
                                <CompositeTransform/>
                            </Rectangle.RenderTransform>
                            <Rectangle.Fill>
                                <LinearGradientBrush EndPoint="0.699999988079071,1" StartPoint="0.699999988079071,0">
                                    <GradientStop Color="White" Offset="0"/>
                                    <GradientStop Color="#F9939789" Offset="0.375"/>
                                    <GradientStop Color="#E57A8461" Offset="0.625"/>
                                    <GradientStop Color="#C680924A" Offset="1"/>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
  
</ResourceDictionary>

引用ButtonStyle

<UserControl x:Class="HelloSilverlight.LoginControl1"
    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"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    mc:Ignorable="d"
    d:DesignHeight="260" d:DesignWidth="400">
    

    <Grid x:Name="LayoutRoot">
        <TextBox x:Name="txtName" HorizontalAlignment="Left" Height="34" Margin="144,93,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="155" Background="{x:Null}"/>
        <TextBox x:Name="txtPasswd" HorizontalAlignment="Left" Height="34" Margin="144,156,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="155" Background="{x:Null}"/>
        <sdk:Label Content="用户名" HorizontalAlignment="Left" Height="28" Margin="70,99,0,0" VerticalAlignment="Top" Width="69" FontSize="16" Foreground="#FFBEBEBE"/>
        <sdk:Label Content="密  码" HorizontalAlignment="Left" Height="28" Margin="70,161,0,0" VerticalAlignment="Top" Width="49" FontSize="16" Foreground="#FFBEBEBE" HorizontalContentAlignment="Left"/>
        <sdk:Label Content="欢迎登陆" HorizontalAlignment="Left" Height="28" Margin="158,10,0,0" VerticalAlignment="Top" Width="100" FontSize="24" Foreground="#FFBEBEBE"/>
        <Button Content="登陆" HorizontalAlignment="Left" Height="32" Margin="49,218,0,0" VerticalAlignment="Top" Width="70" Style="{StaticResource LoginButtonStyle}" Foreground="#FF2E2E2E" FontSize="14"/>
        <Button Content="注册" HorizontalAlignment="Left" Height="32" Margin="278,218,0,0" VerticalAlignment="Top" Width="70" Style="{StaticResource LoginButtonStyle}" Foreground="#FF2E2E2E" FontSize="14"/>
    </Grid>
</UserControl>