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

 放一个好友管理效果吧