/************************************************************************
* 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>
按F5运行,效果图,到此WPF移植控件到Siverlight就大功告成了!不足的地方还有很多,期待着大家共同进步!
7.源码下载Url
http://url.cn/RzaVKP
文件名:(HelloSilverlight2014.4.18.rar)
学习移植WPF到Silverlight(1)——HelloSilverlight(移植带动画的登陆界面控件),布布扣,bubuko.com