别人是说了再做,我是做了再说;别人说了不一定做,我是做了不一定说。

用WPF开发仿QQ概念版之--------登录界面

自从安装了WIN7并试用了腾讯的概念版QQ后,心中总是对登录界面那漂浮的白云、来回摆动的绿叶感兴趣,惊叹于WPF的强大(特别是动画实现)。实在忍不住了,决定试着自己开发一个“类似”的东东。

声明一下下:本文章本着学习技术的目的,部分素材来自腾讯QQ概念版本(有些是导出的图片素材、有些则是本人截图后进行的图片处理),严禁任何人用于商业用途,否则后果自负。

先把我制作的效果秀一下:

 

 

 

 

XAML代码如下: 

 

代码
<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......感谢关注

 放一个好友管理效果吧

posted @ 2011-02-10 16:47  碧血黄沙-java、c#  阅读(9738)  评论(24编辑  收藏