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

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

 

开发工具:Visual Studio2012 + Microsoft Express Blend4

 

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

1.最终效果图(WPF与Silverlight)

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

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

 

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

Siverlight效果图

 

2.开始创建Siverlight项目

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

选择Siverlight应用程序

 

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

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

 

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

创建成功。

 

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

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

 

 

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

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

 

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

原App.xaml.cs文件

 

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

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

学习移植WPF到Silverlight(1)——HelloSilverlight(移植带动画的登陆界面控件)
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;
        }
学习移植WPF到Silverlight(1)——HelloSilverlight(移植带动画的登陆界面控件)

 

 

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

完成MainPage居中效果。

 

3.导入WPF控件到Siverlight

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

 

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

 

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

新建Siverlight控件

 

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

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

 

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

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

 

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

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

 

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

改成

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

 

还要注销掉<UserControl.Triggers>

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

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

 

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

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

 

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

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

 

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

 

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

添加3个LinearGradientBrush资源。

 

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

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

 

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

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

 

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

在App.xaml中加入

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

 

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

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

学习移植WPF到Silverlight(1)——HelloSilverlight(移植带动画的登陆界面控件)
 <Grid x:Name="LayoutRoot" >
        <Border Background="{StaticResource LittleBlueBackground}" CornerRadius="10">
            <Border.Effect>
                <DropShadowEffect Color="#FFDBDBDB"/>
            </Border.Effect>
        </Border>
    </Grid>
学习移植WPF到Silverlight(1)——HelloSilverlight(移植带动画的登陆界面控件)

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

 

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

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

 

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

 

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

学习移植WPF到Silverlight(1)——HelloSilverlight(移植带动画的登陆界面控件)
  <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>
学习移植WPF到Silverlight(1)——HelloSilverlight(移植带动画的登陆界面控件)

 

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

按F5运行效果图。

 

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

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

新建一个DicButtonStyles.xaml文件

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

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

学习移植WPF到Silverlight(1)——HelloSilverlight(移植带动画的登陆界面控件)
<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>
学习移植WPF到Silverlight(1)——HelloSilverlight(移植带动画的登陆界面控件)

 

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

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

学习移植WPF到Silverlight(1)——HelloSilverlight(移植带动画的登陆界面控件)
<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>
学习移植WPF到Silverlight(1)——HelloSilverlight(移植带动画的登陆界面控件)

 

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

引用ButtonStyle

学习移植WPF到Silverlight(1)——HelloSilverlight(移植带动画的登陆界面控件)
<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>
学习移植WPF到Silverlight(1)——HelloSilverlight(移植带动画的登陆界面控件)

 

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

按F5运行,效果图,到此WPF移植控件到Siverlight就大功告成了!不足的地方还有很多,期待着大家共同进步!

 

7.源码下载Url

http://url.cn/RzaVKP

 

文件名:(HelloSilverlight2014.4.18.rar)

 

学习移植WPF到Silverlight(1)——HelloSilverlight(移植带动画的登陆界面控件),布布扣,bubuko.com

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

上一篇:Buuctf之web(五)


下一篇:BUUCTF PWN ciscn_2019_n_1