自从安装了WIN7并试用了腾讯的概念版QQ后,心中总是对登录界面那漂浮的白云、来回摆动的绿叶感兴趣,惊叹于WPF的强大(特别是动画实现)。实在忍不住了,决定试着自己开发一个“类似”的东东。
声明一下下:本文章本着学习技术的目的,部分素材来自腾讯QQ概念版本(有些是导出的图片素材、有些则是本人截图后进行的图片处理),严禁任何人用于商业用途,否则后果自负。
先把我制作的效果秀一下:
XAML代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<
Window
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 = " WpfQQ.LoginWindow "
x:Name = " Window "
Title = " QQ "
Width = " 369 " Height = " 292 " WindowStyle = " None "
Background = " {x:Null} " AllowsTransparency = " True " MouseLeftButtonDown = " Window_MouseLeftButtonDown " WindowStartupLocation = " CenterScreen " Icon = " /WpfQQ;component/Images/logo32.ico " >
< Window.Resources >
< Storyboard x:Key = " StoryboardCloud " RepeatBehavior = " Forever " >
< DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = " (UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X) " Storyboard.TargetName = " image2 " >
< EasingDoubleKeyFrame KeyTime = " 0 " Value = " 0 " />
< EasingDoubleKeyFrame KeyTime = " 0:0:15 " Value = " 153 " />
< EasingDoubleKeyFrame KeyTime = " 0:0:20 " Value = " 190 " />
</ DoubleAnimationUsingKeyFrames >
< DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = " (UIElement.Opacity) " Storyboard.TargetName = " image2 " >
< EasingDoubleKeyFrame KeyTime = " 0:0:15 " Value = " 1 " />
< EasingDoubleKeyFrame KeyTime = " 0:0:20 " Value = " 0.05 " />
</ DoubleAnimationUsingKeyFrames >
< DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = " (UIElement.Opacity) " Storyboard.TargetName = " txtUserName " >
< EasingDoubleKeyFrame KeyTime = " 0:0:15 " Value = " 1 " />
</ DoubleAnimationUsingKeyFrames >
< ColorAnimationUsingKeyFrames Storyboard.TargetProperty = " (Panel.Background).(SolidColorBrush.Color) " Storyboard.TargetName = " txtUserName " >
< EasingColorKeyFrame KeyTime = " 0 " Value = " #FFF3F5F5 " />
< EasingColorKeyFrame KeyTime = " 0:0:15 " Value = " #FFF3F5F5 " />
</ ColorAnimationUsingKeyFrames >
</ Storyboard >
<!-- 定义按钮样式 -->
< Style x:Key = " buttonTemplate " TargetType = " Button " >
<!-- 修改模板属性 -->
< Setter Property = " Template " >
< Setter.Value >
<!-- 控件模板 -->
< ControlTemplate TargetType = " Button " >
<!-- 只有Grid才能装下这么多Child -->
< Grid Background = " Yellow " >
<!-- 带特效的底层背景 -->
< Border x:Name = " back " Opacity = " 0.8 " CornerRadius = " 2 " >
< Border.BitmapEffect >
< OuterGlowBitmapEffect Opacity = " 0.8 " GlowSize = " 0 " GlowColor = " Red " />
</ Border.BitmapEffect >
< Ellipse Width = " 49 " Height = " 49 " >
< Ellipse.Fill >
Red
</ Ellipse.Fill >
</ Ellipse >
<!-- 按钮呈圆形 -->
</ Border >
< Ellipse x:Name = " outerCircle " Width = " 50 " Height = " 50 " >
< Ellipse.Fill >
< LinearGradientBrush StartPoint = " 0,0 " EndPoint = " 0,1 " >
< GradientStop Offset = " 0 " Color = " DarkOliveGreen " />
< GradientStop Offset = " 1 " Color = " Azure " />
</ LinearGradientBrush >
</ Ellipse.Fill >
</ Ellipse >
< Ellipse Width = " 40 " Height = " 40 " >
< Ellipse.Fill >
< LinearGradientBrush StartPoint = " 0,0 " EndPoint = " 0,1 " >
< GradientStop Offset = " 0 " Color = " White " />
< GradientStop Offset = " 1 " Color = " Transparent " />
</ LinearGradientBrush >
</ Ellipse.Fill >
</ Ellipse >
<!-- 按钮内容 -->
< Border >
< TextBlock x:Name = " content " HorizontalAlignment = " Center " VerticalAlignment = " Center " Text = " {TemplateBinding Content} " >
</ TextBlock >
</ Border >
</ Grid >
<!-- 触发器 -->
< ControlTemplate.Triggers >
< Trigger Property = " Button.IsMouseOver " Value = " True " >
< Trigger.EnterActions >
< BeginStoryboard >
< Storyboard >
< DoubleAnimation To = " 10 " Duration = " 0:0:0.2 " Storyboard.TargetName = " back " Storyboard.TargetProperty = " (Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize) " />
< ColorAnimation To = " #4FFF " BeginTime = " 0:0:0.2 " Duration = " 0:0:0.2 " Storyboard.TargetName = " outerCircle " Storyboard.TargetProperty = " (Ellipse.Fill).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color) " />
< ColorAnimation To = " #3FFF " BeginTime = " 0:0:0.2 " Duration = " 0:0:0.2 " Storyboard.TargetName = " outerCircle " Storyboard.TargetProperty = " (Ellipse.Fill).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color) " />
</ Storyboard >
</ BeginStoryboard >
</ Trigger.EnterActions >
< Trigger.ExitActions >
< BeginStoryboard >
< Storyboard >
< DoubleAnimation Duration = " 0:0:0.2 " Storyboard.TargetName = " back " Storyboard.TargetProperty = " (Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize) " />
< ColorAnimation Duration = " 0:0:0.2 " Storyboard.TargetName = " outerCircle " Storyboard.TargetProperty = " (Ellipse.Fill).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color) " />
< ColorAnimation Duration = " 0:0:0.2 " Storyboard.TargetName = " outerCircle " Storyboard.TargetProperty = " (Ellipse.Fill).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color) " />
</ Storyboard >
</ BeginStoryboard >
</ Trigger.ExitActions >
</ Trigger >
< Trigger Property = " Button.IsPressed " Value = " True " >
< Setter Property = " RenderTransform " >
< Setter.Value >
< ScaleTransform ScaleX = " .9 " ScaleY = " .9 " />
</ Setter.Value >
</ Setter >
< Setter Property = " RenderTransformOrigin " Value = " .5,.5 " />
</ Trigger >
</ ControlTemplate.Triggers >
</ ControlTemplate >
</ Setter.Value >
</ Setter >
</ Style >
< Storyboard x:Key = " StoryboardLeaf " RepeatBehavior = " Forever " >
< DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = " (UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle) " Storyboard.TargetName = " image1 " >
< EasingDoubleKeyFrame KeyTime = " 0 " Value = " 0 " />
< EasingDoubleKeyFrame KeyTime = " 0:0:2 " Value = " 13 " />
< EasingDoubleKeyFrame KeyTime = " 0:0:4 " Value = " 0 " />
</ DoubleAnimationUsingKeyFrames >
< DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = " (UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle) " Storyboard.TargetName = " image " >
< EasingDoubleKeyFrame KeyTime = " 0 " Value = " 0 " />
< EasingDoubleKeyFrame KeyTime = " 0:0:2 " Value = " 13 " />
< EasingDoubleKeyFrame KeyTime = " 0:0:4 " Value = " 0 " />
</ DoubleAnimationUsingKeyFrames >
</ Storyboard >
</ Window.Resources >
< Window.Triggers >
< EventTrigger RoutedEvent = " FrameworkElement.Loaded " >
< BeginStoryboard Storyboard = " {StaticResource StoryboardCloud} " />
< BeginStoryboard Storyboard = " {StaticResource StoryboardLeaf} " />
</ EventTrigger >
</ Window.Triggers >
< Grid x:Name = " LayoutRoot " Width = " 370 " Height = " 370 " >
< Grid.ColumnDefinitions >
< ColumnDefinition Width = " 0.935* " />
< ColumnDefinition Width = " 0.065* " />
</ Grid.ColumnDefinitions >
< Image x:Name = " image5 " HorizontalAlignment = " Left " Height = " 53 " Source = " sun2.png " Stretch = " Fill " VerticalAlignment = " Top " Width = " 105 " RenderTransformOrigin = " 0.5,0.5 " Margin = " -3,-2,0,0 " >
< Image.RenderTransform >
< TransformGroup >
< ScaleTransform />
< SkewTransform />
< RotateTransform />
< TranslateTransform />
</ TransformGroup >
</ Image.RenderTransform >
</ Image >
< Image x:Name = " image3 " Margin = " -2,43,6,81 " Source = " loginbody.png " Stretch = " Fill " RenderTransformOrigin = " 0.5,0.5 " Grid.ColumnSpan = " 2 " Width = " 366 " Height = " 246 " >
< Image.RenderTransform >
< TransformGroup >
< ScaleTransform />
< SkewTransform />
< RotateTransform />
< TranslateTransform />
</ TransformGroup >
</ Image.RenderTransform >
</ Image >
< Image x:Name = " image2 " Height = " 50 " Margin = " -14,7,170.11,0 " Source = " cloud.png " Stretch = " Fill " VerticalAlignment = " Top " RenderTransformOrigin = " 0.5,0.5 " >
< Image.RenderTransform >
< TransformGroup >
< ScaleTransform />
< SkewTransform />
< RotateTransform />
< TranslateTransform />
</ TransformGroup >
</ Image.RenderTransform >
</ Image >
< Image x:Name = " image4 " Height = " 82 " Margin = " 16,17,0,0 " Source = " yezi2.png " Stretch = " Fill " VerticalAlignment = " Top " RenderTransformOrigin = " 0.5,0.5 " Grid.ColumnSpan = " 2 " >
< Image.RenderTransform >
< TransformGroup >
< ScaleTransform />
< SkewTransform />
< RotateTransform />
< TranslateTransform />
</ TransformGroup >
</ Image.RenderTransform >
</ Image >
< Image x:Name = " image1 " HorizontalAlignment = " Left " Height = " 35.368 " Margin = " 75,51,0,0 " Source = " yezi3.png " Stretch = " Fill " VerticalAlignment = " Top " Width = " 37 " RenderTransformOrigin = " 1.135,-1.103 " >
< Image.RenderTransform >
< TransformGroup >
< ScaleTransform />
< SkewTransform />
< RotateTransform />
< TranslateTransform />
</ TransformGroup >
</ Image.RenderTransform >
</ Image >
< Button x:Name = " button " Content = " X " Template = " {StaticResource temp_b_top_close} " HorizontalAlignment = " Right " Height = " 22 " Margin = " 0,67.368,-3.89,0 " VerticalAlignment = " Top " Width = " 22 " RenderTransformOrigin = " 0.5,0.5 " Click = " button_Click " >
< Button.RenderTransform >
< TransformGroup >
< ScaleTransform />
< SkewTransform />
< RotateTransform />
< TranslateTransform />
</ TransformGroup >
</ Button.RenderTransform >
</ Button >
< TextBox x:Name = " txtUserName " Margin = " 75,121,62.11,0 " TextWrapping = " Wrap " Text = "" BorderThickness = " 0 " Height = " 18 " VerticalAlignment = " Top " Background = " #FFF3F5F5 " />
< Button Content = " 登 录 " Margin = " 0,0,48.11,111.5 " Height = " 30 " Click = " Button_Click " VerticalAlignment = " Bottom " d:LayoutOverrides = " Height " HorizontalAlignment = " Right " Width = " 122 " />
< Button x:Name = " RegButton " Content = " 注册新帐号 " Margin = " 61,0,0,111 " HorizontalAlignment = " Left " Width = " 74 " Height = " 30 " VerticalAlignment = " Bottom " d:LayoutOverrides = " Height " Click = " RegButton_Click " />
< CheckBox Content = " CheckBox " HorizontalAlignment = " Right " Height = " 21 " Margin = " 0,0,105.11,149.5 " VerticalAlignment = " Bottom " Width = " 21 " />
< Image x:Name = " image " Height = " 65 " Margin = " 133,63,145.11,0 " Source = " yezi3.png " Stretch = " Fill " VerticalAlignment = " Top " RenderTransformOrigin = " 0.5,0.5 " >
< Image.RenderTransform >
< TransformGroup >
< ScaleTransform />
< SkewTransform />
< RotateTransform />
< TranslateTransform />
</ TransformGroup >
</ Image.RenderTransform >
</ Image >
< Button x:Name = " button_mini " Content = " X " Template = " {StaticResource temp_b_mini_close} " HorizontalAlignment = " Right " Height = " 22 " Margin = " 0,68.368,14.11,0 " VerticalAlignment = " Top " Width = " 22 " RenderTransformOrigin = " 0.5,0.5 " Click = " button_mini_Click " >
< Button.RenderTransform >
< TransformGroup >
< ScaleTransform />
< SkewTransform />
< RotateTransform />
< TranslateTransform />
</ TransformGroup >
</ Button.RenderTransform >
</ Button >
< PasswordBox x:Name = " txtPassWord " Margin = " 75,170.5,74.11,181.5 " Width = " 196.84 " BorderThickness = " 0 " Background = " #FFF3F5F5 " >
< PasswordBox.BorderBrush >
< LinearGradientBrush EndPoint = " 0,20 " MappingMode = " Absolute " StartPoint = " 0,0 " >
< GradientStop Color = " #FFABADB3 " Offset = " 0.05 " />
< GradientStop Color = " #FFE2E3EA " Offset = " 0.07 " />
< GradientStop Color = " #FFF3F5F5 " Offset = " 1 " />
</ LinearGradientBrush >
</ PasswordBox.BorderBrush >
</ PasswordBox >
</ Grid >
</ Window >
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 = " WpfQQ.LoginWindow "
x:Name = " Window "
Title = " QQ "
Width = " 369 " Height = " 292 " WindowStyle = " None "
Background = " {x:Null} " AllowsTransparency = " True " MouseLeftButtonDown = " Window_MouseLeftButtonDown " WindowStartupLocation = " CenterScreen " Icon = " /WpfQQ;component/Images/logo32.ico " >
< Window.Resources >
< Storyboard x:Key = " StoryboardCloud " RepeatBehavior = " Forever " >
< DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = " (UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X) " Storyboard.TargetName = " image2 " >
< EasingDoubleKeyFrame KeyTime = " 0 " Value = " 0 " />
< EasingDoubleKeyFrame KeyTime = " 0:0:15 " Value = " 153 " />
< EasingDoubleKeyFrame KeyTime = " 0:0:20 " Value = " 190 " />
</ DoubleAnimationUsingKeyFrames >
< DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = " (UIElement.Opacity) " Storyboard.TargetName = " image2 " >
< EasingDoubleKeyFrame KeyTime = " 0:0:15 " Value = " 1 " />
< EasingDoubleKeyFrame KeyTime = " 0:0:20 " Value = " 0.05 " />
</ DoubleAnimationUsingKeyFrames >
< DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = " (UIElement.Opacity) " Storyboard.TargetName = " txtUserName " >
< EasingDoubleKeyFrame KeyTime = " 0:0:15 " Value = " 1 " />
</ DoubleAnimationUsingKeyFrames >
< ColorAnimationUsingKeyFrames Storyboard.TargetProperty = " (Panel.Background).(SolidColorBrush.Color) " Storyboard.TargetName = " txtUserName " >
< EasingColorKeyFrame KeyTime = " 0 " Value = " #FFF3F5F5 " />
< EasingColorKeyFrame KeyTime = " 0:0:15 " Value = " #FFF3F5F5 " />
</ ColorAnimationUsingKeyFrames >
</ Storyboard >
<!-- 定义按钮样式 -->
< Style x:Key = " buttonTemplate " TargetType = " Button " >
<!-- 修改模板属性 -->
< Setter Property = " Template " >
< Setter.Value >
<!-- 控件模板 -->
< ControlTemplate TargetType = " Button " >
<!-- 只有Grid才能装下这么多Child -->
< Grid Background = " Yellow " >
<!-- 带特效的底层背景 -->
< Border x:Name = " back " Opacity = " 0.8 " CornerRadius = " 2 " >
< Border.BitmapEffect >
< OuterGlowBitmapEffect Opacity = " 0.8 " GlowSize = " 0 " GlowColor = " Red " />
</ Border.BitmapEffect >
< Ellipse Width = " 49 " Height = " 49 " >
< Ellipse.Fill >
Red
</ Ellipse.Fill >
</ Ellipse >
<!-- 按钮呈圆形 -->
</ Border >
< Ellipse x:Name = " outerCircle " Width = " 50 " Height = " 50 " >
< Ellipse.Fill >
< LinearGradientBrush StartPoint = " 0,0 " EndPoint = " 0,1 " >
< GradientStop Offset = " 0 " Color = " DarkOliveGreen " />
< GradientStop Offset = " 1 " Color = " Azure " />
</ LinearGradientBrush >
</ Ellipse.Fill >
</ Ellipse >
< Ellipse Width = " 40 " Height = " 40 " >
< Ellipse.Fill >
< LinearGradientBrush StartPoint = " 0,0 " EndPoint = " 0,1 " >
< GradientStop Offset = " 0 " Color = " White " />
< GradientStop Offset = " 1 " Color = " Transparent " />
</ LinearGradientBrush >
</ Ellipse.Fill >
</ Ellipse >
<!-- 按钮内容 -->
< Border >
< TextBlock x:Name = " content " HorizontalAlignment = " Center " VerticalAlignment = " Center " Text = " {TemplateBinding Content} " >
</ TextBlock >
</ Border >
</ Grid >
<!-- 触发器 -->
< ControlTemplate.Triggers >
< Trigger Property = " Button.IsMouseOver " Value = " True " >
< Trigger.EnterActions >
< BeginStoryboard >
< Storyboard >
< DoubleAnimation To = " 10 " Duration = " 0:0:0.2 " Storyboard.TargetName = " back " Storyboard.TargetProperty = " (Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize) " />
< ColorAnimation To = " #4FFF " BeginTime = " 0:0:0.2 " Duration = " 0:0:0.2 " Storyboard.TargetName = " outerCircle " Storyboard.TargetProperty = " (Ellipse.Fill).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color) " />
< ColorAnimation To = " #3FFF " BeginTime = " 0:0:0.2 " Duration = " 0:0:0.2 " Storyboard.TargetName = " outerCircle " Storyboard.TargetProperty = " (Ellipse.Fill).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color) " />
</ Storyboard >
</ BeginStoryboard >
</ Trigger.EnterActions >
< Trigger.ExitActions >
< BeginStoryboard >
< Storyboard >
< DoubleAnimation Duration = " 0:0:0.2 " Storyboard.TargetName = " back " Storyboard.TargetProperty = " (Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize) " />
< ColorAnimation Duration = " 0:0:0.2 " Storyboard.TargetName = " outerCircle " Storyboard.TargetProperty = " (Ellipse.Fill).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color) " />
< ColorAnimation Duration = " 0:0:0.2 " Storyboard.TargetName = " outerCircle " Storyboard.TargetProperty = " (Ellipse.Fill).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color) " />
</ Storyboard >
</ BeginStoryboard >
</ Trigger.ExitActions >
</ Trigger >
< Trigger Property = " Button.IsPressed " Value = " True " >
< Setter Property = " RenderTransform " >
< Setter.Value >
< ScaleTransform ScaleX = " .9 " ScaleY = " .9 " />
</ Setter.Value >
</ Setter >
< Setter Property = " RenderTransformOrigin " Value = " .5,.5 " />
</ Trigger >
</ ControlTemplate.Triggers >
</ ControlTemplate >
</ Setter.Value >
</ Setter >
</ Style >
< Storyboard x:Key = " StoryboardLeaf " RepeatBehavior = " Forever " >
< DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = " (UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle) " Storyboard.TargetName = " image1 " >
< EasingDoubleKeyFrame KeyTime = " 0 " Value = " 0 " />
< EasingDoubleKeyFrame KeyTime = " 0:0:2 " Value = " 13 " />
< EasingDoubleKeyFrame KeyTime = " 0:0:4 " Value = " 0 " />
</ DoubleAnimationUsingKeyFrames >
< DoubleAnimationUsingKeyFrames Storyboard.TargetProperty = " (UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle) " Storyboard.TargetName = " image " >
< EasingDoubleKeyFrame KeyTime = " 0 " Value = " 0 " />
< EasingDoubleKeyFrame KeyTime = " 0:0:2 " Value = " 13 " />
< EasingDoubleKeyFrame KeyTime = " 0:0:4 " Value = " 0 " />
</ DoubleAnimationUsingKeyFrames >
</ Storyboard >
</ Window.Resources >
< Window.Triggers >
< EventTrigger RoutedEvent = " FrameworkElement.Loaded " >
< BeginStoryboard Storyboard = " {StaticResource StoryboardCloud} " />
< BeginStoryboard Storyboard = " {StaticResource StoryboardLeaf} " />
</ EventTrigger >
</ Window.Triggers >
< Grid x:Name = " LayoutRoot " Width = " 370 " Height = " 370 " >
< Grid.ColumnDefinitions >
< ColumnDefinition Width = " 0.935* " />
< ColumnDefinition Width = " 0.065* " />
</ Grid.ColumnDefinitions >
< Image x:Name = " image5 " HorizontalAlignment = " Left " Height = " 53 " Source = " sun2.png " Stretch = " Fill " VerticalAlignment = " Top " Width = " 105 " RenderTransformOrigin = " 0.5,0.5 " Margin = " -3,-2,0,0 " >
< Image.RenderTransform >
< TransformGroup >
< ScaleTransform />
< SkewTransform />
< RotateTransform />
< TranslateTransform />
</ TransformGroup >
</ Image.RenderTransform >
</ Image >
< Image x:Name = " image3 " Margin = " -2,43,6,81 " Source = " loginbody.png " Stretch = " Fill " RenderTransformOrigin = " 0.5,0.5 " Grid.ColumnSpan = " 2 " Width = " 366 " Height = " 246 " >
< Image.RenderTransform >
< TransformGroup >
< ScaleTransform />
< SkewTransform />
< RotateTransform />
< TranslateTransform />
</ TransformGroup >
</ Image.RenderTransform >
</ Image >
< Image x:Name = " image2 " Height = " 50 " Margin = " -14,7,170.11,0 " Source = " cloud.png " Stretch = " Fill " VerticalAlignment = " Top " RenderTransformOrigin = " 0.5,0.5 " >
< Image.RenderTransform >
< TransformGroup >
< ScaleTransform />
< SkewTransform />
< RotateTransform />
< TranslateTransform />
</ TransformGroup >
</ Image.RenderTransform >
</ Image >
< Image x:Name = " image4 " Height = " 82 " Margin = " 16,17,0,0 " Source = " yezi2.png " Stretch = " Fill " VerticalAlignment = " Top " RenderTransformOrigin = " 0.5,0.5 " Grid.ColumnSpan = " 2 " >
< Image.RenderTransform >
< TransformGroup >
< ScaleTransform />
< SkewTransform />
< RotateTransform />
< TranslateTransform />
</ TransformGroup >
</ Image.RenderTransform >
</ Image >
< Image x:Name = " image1 " HorizontalAlignment = " Left " Height = " 35.368 " Margin = " 75,51,0,0 " Source = " yezi3.png " Stretch = " Fill " VerticalAlignment = " Top " Width = " 37 " RenderTransformOrigin = " 1.135,-1.103 " >
< Image.RenderTransform >
< TransformGroup >
< ScaleTransform />
< SkewTransform />
< RotateTransform />
< TranslateTransform />
</ TransformGroup >
</ Image.RenderTransform >
</ Image >
< Button x:Name = " button " Content = " X " Template = " {StaticResource temp_b_top_close} " HorizontalAlignment = " Right " Height = " 22 " Margin = " 0,67.368,-3.89,0 " VerticalAlignment = " Top " Width = " 22 " RenderTransformOrigin = " 0.5,0.5 " Click = " button_Click " >
< Button.RenderTransform >
< TransformGroup >
< ScaleTransform />
< SkewTransform />
< RotateTransform />
< TranslateTransform />
</ TransformGroup >
</ Button.RenderTransform >
</ Button >
< TextBox x:Name = " txtUserName " Margin = " 75,121,62.11,0 " TextWrapping = " Wrap " Text = "" BorderThickness = " 0 " Height = " 18 " VerticalAlignment = " Top " Background = " #FFF3F5F5 " />
< Button Content = " 登 录 " Margin = " 0,0,48.11,111.5 " Height = " 30 " Click = " Button_Click " VerticalAlignment = " Bottom " d:LayoutOverrides = " Height " HorizontalAlignment = " Right " Width = " 122 " />
< Button x:Name = " RegButton " Content = " 注册新帐号 " Margin = " 61,0,0,111 " HorizontalAlignment = " Left " Width = " 74 " Height = " 30 " VerticalAlignment = " Bottom " d:LayoutOverrides = " Height " Click = " RegButton_Click " />
< CheckBox Content = " CheckBox " HorizontalAlignment = " Right " Height = " 21 " Margin = " 0,0,105.11,149.5 " VerticalAlignment = " Bottom " Width = " 21 " />
< Image x:Name = " image " Height = " 65 " Margin = " 133,63,145.11,0 " Source = " yezi3.png " Stretch = " Fill " VerticalAlignment = " Top " RenderTransformOrigin = " 0.5,0.5 " >
< Image.RenderTransform >
< TransformGroup >
< ScaleTransform />
< SkewTransform />
< RotateTransform />
< TranslateTransform />
</ TransformGroup >
</ Image.RenderTransform >
</ Image >
< Button x:Name = " button_mini " Content = " X " Template = " {StaticResource temp_b_mini_close} " HorizontalAlignment = " Right " Height = " 22 " Margin = " 0,68.368,14.11,0 " VerticalAlignment = " Top " Width = " 22 " RenderTransformOrigin = " 0.5,0.5 " Click = " button_mini_Click " >
< Button.RenderTransform >
< TransformGroup >
< ScaleTransform />
< SkewTransform />
< RotateTransform />
< TranslateTransform />
</ TransformGroup >
</ Button.RenderTransform >
</ Button >
< PasswordBox x:Name = " txtPassWord " Margin = " 75,170.5,74.11,181.5 " Width = " 196.84 " BorderThickness = " 0 " Background = " #FFF3F5F5 " >
< PasswordBox.BorderBrush >
< LinearGradientBrush EndPoint = " 0,20 " MappingMode = " Absolute " StartPoint = " 0,0 " >
< GradientStop Color = " #FFABADB3 " Offset = " 0.05 " />
< GradientStop Color = " #FFE2E3EA " Offset = " 0.07 " />
< GradientStop Color = " #FFF3F5F5 " Offset = " 1 " />
</ LinearGradientBrush >
</ PasswordBox.BorderBrush >
</ PasswordBox >
</ Grid >
</ Window >
随后放出DEMO......感谢关注
放一个好友管理效果吧