WPF(Windows Presentation Foundation)
WPF是Microsoft的新一代GUI框架,它让界面和代码分离,可以做出更美观炫酷的界面。总之,写界面时让你感觉像在写网页。
变形(Transform)
WPF中的变形(RenderTransform)类是为了达到直接去改变某个对象的形状(比如缩放、旋转一个元素)的目的而设计的。
RenderTransform类的成员如下:
TranslateTransform:能够让某对象的位置发生平移变化。
RotateTransform:能够让某对象产生旋转变化,根据中心点进行顺时针旋转或逆时针旋转。
ScaleTransform:能够让某对象产生缩放变化。
SkewTransform:能够让某对象产生扭曲变化。
TransformGroup:能够让某对象的缩放、旋转、扭曲等变化效果合并起来使用。
MatrixTransform:能够让某对象通过矩阵算法实现更为复杂的变形。
故事版
StoryBoard是一系列动画的集合控制。
使用
创建一个WPF程序:
MainWindow.xaml
<Window x:Class="RotateAvatar.MainWindow"
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:local="clr-namespace:RotateAvatar"
mc:Ignorable="d"
Title="旋转头像" Height="350" Width="400" WindowStartupLocation="CenterScreen">
<Window.Resources>
<Storyboard x:Key="RotateHeadStoryboard">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:05" RepeatBehavior="Forever" Storyboard.TargetName="imgPortrait"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)">
<SplineDoubleKeyFrame Value="120"/>
<SplineDoubleKeyFrame Value="240"/>
<SplineDoubleKeyFrame Value="360"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<!--普通菜单按钮的样式-->
<Style TargetType="Button">
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Background" Value="#4cb0f9" />
<Setter Property="Padding" Value="0, 5" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<!--退出Button的控件模板-->
<ControlTemplate TargetType="Button">
<Grid x:Name="gridBack" Background="{TemplateBinding Background}">
<ContentPresenter x:Name="content"
Focusable="False"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True"
Content="{TemplateBinding Content}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="gridBack" Property="Background" Value="#3076A9"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image x:Name="imgPortrait" Source="/Images/author.png" Cursor="Hand" ToolTip="Masayume Chasing"
HorizontalAlignment="Center" Margin="10" RenderTransformOrigin="0.5, 0.5">
<Image.RenderTransform>
<TransformGroup>
<RotateTransform Angle="0" />
</TransformGroup>
</Image.RenderTransform>
</Image>
<Button x:Name="btnStart" Grid.Row="1" Margin="0, 20" Width="120" HorizontalAlignment="Center" Click="btnStart_Click">开始</Button>
</Grid>
</Window>
MainWindow.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace RotateAvatar
{
/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void btnStart_Click(object sender, RoutedEventArgs e)
{
Storyboard sbd = Resources["RotateHeadStoryboard"] as Storyboard;
sbd.Begin();
}
}
}
效果
应用
这个效果在我的WNMP项目中用了,关于界面。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。