[聚合文章] Just for fun——用WPF做个旋转头像

c# 2017-08-29 4 阅读

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项目中用了,关于界面。

注:本文内容来自互联网,旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜,请你联系站长进行处理。