wpf实现旋转窗体效果的方法

[ At 2011/7/5 By wukong   4 comments ]

wpf实现一些很炫的效果是很容易的,2010年腾讯推出的基于wpf的概念版QQ就实现了很多超炫UI效果。一些诸如不规则窗体、动画效果、半透明特效,在普通winform来说实现起来比较麻烦,但对于wpf来说,一切都变得简单了。

今天介绍一下后面项目中我可能用到的旋转窗体效果,就是登录窗体或者启动界面旋转出现的动画效果。对于旋转窗体效果的wpf实现方法,网上有好多基于3D的,微软msdn上也介绍了3D实现的方法,不过我感觉就一个登录窗体的旋转效果,用3D来做,是不是有点大炮打蚊子。我这里用了基本的2D动画来实现窗体旋转效果,基本原理就是首先将window的背景设置为空,将AllowsTransparency属性设置为True,这样窗体就看起来是透明了,当然,要去掉标题栏和边框,也就是WindowStyle属性为None,ResizeModel属性为NoResize。然后在窗体中放置一个Grid,实际要旋转的就是这个Grid了,给Grid设置一个背景,可以是纯色也可以是图片,甚至可以直接用png的透明不规则图片作为背景来实现不规则窗体。然后创建事件触发器,在 Window.Loaded时执行旋转动画,来控制Grid翻转。这样旋转窗体效果就差不多实现了,呵呵。

具体看下面的旋转窗体实现代码:

MainWindow.xaml
 

 
  1. <Window
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" xmlns:ee="http://schemas.microsoft.com/expression/2010/effects"
  5.     x:Class="WpfApplication1.MainWindow"
  6.     x:Name="Window"
  7.     Title="MainWindow"
  8.     Width="640" Height="480" Foreground="{x:Null}" WindowStyle="None" ResizeMode="NoResize" MouseLeftButtonDown="Window_MouseLeftButtonDown" AllowsTransparency="True" Background="{x:Null}" Topmost="True">
  9.     <Window.Resources>
  10.         <Storyboard x:Key="OnLoaded1">
  11.             <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="grid">
  12.                 <EasingPointKeyFrame KeyTime="0" Value="0.5,0.5"/><!--悟空博客备注:这里定义了中心点偏移量-->
  13.             </PointAnimationUsingKeyFrames>
  14.             <!--悟空博客http://www.7es.cn备注:下面是一个动画,实现反转效果-->
  15.             <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="grid">
  16.                 <EasingDoubleKeyFrame KeyTime="0" Value="-1">
  17.                     <EasingDoubleKeyFrame.EasingFunction>
  18.                         <CubicEase EasingMode="EaseOut"/>
  19.                     </EasingDoubleKeyFrame.EasingFunction>
  20.                 </EasingDoubleKeyFrame>
  21.                 <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1">
  22.                     <EasingDoubleKeyFrame.EasingFunction>
  23.                         <CubicEase EasingMode="EaseOut"/>
  24.                     </EasingDoubleKeyFrame.EasingFunction>
  25.                 </EasingDoubleKeyFrame>
  26.             </DoubleAnimationUsingKeyFrames>
  27.         </Storyboard>
  28.     </Window.Resources>
  29.     <Window.Triggers>
  30.         <EventTrigger RoutedEvent="FrameworkElement.Loaded">
  31.             <BeginStoryboard Storyboard="{StaticResource OnLoaded1}"/>
  32.         </EventTrigger>
  33.     </Window.Triggers>
  34.     <Grid x:Name="grid" Margin="109,29,124,48">
  35.         <Grid.RenderTransform>
  36.             <TransformGroup>
  37.                 <ScaleTransform/>
  38.                 <SkewTransform/>
  39.                 <RotateTransform/>
  40.                 <TranslateTransform/>
  41.             </TransformGroup>
  42.         </Grid.RenderTransform>
  43.         <Grid.Background>
  44.             <ImageBrush ImageSource="2010042017230367.png" Stretch="None"/>
  45.         </Grid.Background>
  46.         <Rectangle Fill="#00F4F4F5" HorizontalAlignment="Right" Height="28" Margin="0,113,31,0" VerticalAlignment="Top" Width="24" MouseLeftButtonDown="Rectangle_MouseLeftButtonDown"/>
  47.         <TextBox Height="20" Margin="100,166,137,0" TextWrapping="Wrap" Text="输入用户名" VerticalAlignment="Top" Background="{x:Null}" BorderBrush="{x:Null}" BorderThickness="0"/>
  48.         <TextBox Margin="100,0,137,168" TextWrapping="Wrap" Text="password"  Background="{x:Null}" BorderBrush="{x:Null}" BorderThickness="0" Height="20" VerticalAlignment="Bottom"/>
  49.     </Grid>
  50. </Window>

MainWindow.xaml.cs

 
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Text;
  4. using System.Windows;
  5. using System.Windows.Controls;
  6. using System.Windows.Data;
  7. using System.Windows.Documents;
  8. using System.Windows.Input;
  9. using System.Windows.Media;
  10. using System.Windows.Media.Imaging;
  11. using System.Windows.Shapes;
  12.  
  13. namespace WpfApplication1
  14. {
  15.     /// <summary>
  16.     /// MainWindow.xaml 的交互逻辑
  17.     /// </summary>
  18.     public partial class MainWindow : Window
  19.     {
  20.         public MainWindow()
  21.         {
  22.             this.InitializeComponent();
  23.  
  24.             // 在此点下面插入创建对象所需的代码。
  25.         }
  26.  
  27.         /// <summary>
  28.         /// 悟空博客http://www.7es.cn
  29.         /// 实现鼠标左键点击后能够拖动窗体移动
  30.         /// </summary>
  31.         /// <param name="sender"></param>
  32.         /// <param name="e"></param>
  33.         private void Window_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
  34.         {
  35.             this.DragMove();
  36.         }
  37.  
  38.         /// <summary>
  39.         /// 关闭按钮事件
  40.         /// </summary>
  41.         /// <param name="sender"></param>
  42.         /// <param name="e"></param>
  43.         private void Rectangle_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
  44.         {
  45.             this.Close();
  46.         }
  47.     }
  48. }

效果么,还是不错的,代码中我使用了概念版QQ的登陆界面作为背景,是一个png图片,我自己费劲扣的哦,半透明的png让窗体变成不规则的了,再配合旋转窗体效果,看上去真的很不错。

示例代码这里下载 http://www.7es.cn/upload/201107051356141675.rar  悟空http://www.7es.cn自己编写的代码,转载请保留版权信息。

« 再说wpf/wilverlight的动画之后元素属性处于只读无法更改的问题GetResponse方法返回错误"远程服务器返回错误: (411) 所需的长度"的解决方法 »
  • 1.淡忘的笔迹
  • 请教 运用代码发生了错误:“[Unknown]”属性未指向路径“(0).(1)[0].(2)”中的 DependencyObject 求解答 求联系方式
  • 2011/7/6 20:08:11 回复该留言
  • 2.wukong
  • 出错了么??你用什么开发工具编译的,你试试用我的压缩包里的bin/debug里编译好的exe运行下看看是否有错,我这里是没错的,你检查下你的。net环境,我是用的.net 4.0的环境,vs 2010编译的。
  • 2011/7/8 17:42:09 回复该留言
  • 3.wukong
  • 相互学习,欢迎交流
    页面底部有我联系方式,联系请注明来意。
  • 2011/7/14 21:30:43 回复该留言

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

最新评论及回复

最近发表

Powered By 空空如也 

Copyright 2018 www.7es.cn . Some Rights Reserved. Email:iamwgh@msn.com