WPF 仿QQ登录框翻转效果

突然发现qq登录窗体的翻转特效看起来不错，决定用wpf试试。

主要知识点就是Viewport3D和AxisAngleRotation3D

看一下效果：

下面看一下代码：

主要xaml代码：

<UserControl x:Class="GQ.DirectContentSample"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:GQ" Width="495" Height="470"><local:Panel3D x:Name="panel" MaxWidth="495" MaxHeight="430"><local:Panel3D.Content><Grid Width="430" Height="330"><Grid.Background><LinearGradientBrush><GradientStop Offset="0" Color="Red"/><GradientStop Offset="0.5" Color="Green"/><GradientStop Offset="1" Color="Blue"/></LinearGradientBrush></Grid.Background><TextBlock Background="Transparent" Focusable="False" FontSize="30"Text="搜一搜：WPF UI" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/><Button Content="翻转" FontSize="20" Padding="10"HorizontalAlignment="Right" VerticalAlignment="Top"Command="local:Panel3D.RotateCommand"/></Grid></local:Panel3D.Content><local:Panel3D.BackContent><Grid Width="430" Height="330" Background="LightGreen"><TextBlock Background="Transparent" Focusable="False" FontSize="30"Text="这是背面" HorizontalAlignment="Center" VerticalAlignment="Center"/><Button Content="翻转" FontSize="20"  Padding="10"HorizontalAlignment="Right" VerticalAlignment="Top"Command="local:Panel3D.RotateCommand"/></Grid></local:Panel3D.BackContent></local:Panel3D>
</UserControl>

控件的样式：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:GQ"><DiffuseMaterial x:Key="diffMaterial" Viewport2DVisual3D.IsVisualHostMaterial="True" Brush="White" /><MeshGeometry3D x:Key="meshGeometry3D"  TriangleIndices="0,1,2 2,3,0"TextureCoordinates="0,1 1,1 1,0 0,0"Positions="-1.3,-1.05,0 1.3,-1.05,0 1.3,1.05,0 -1.3,1.05,0" /><Style TargetType="local:Panel3D"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="local:Panel3D"><ControlTemplate.Resources><local:ContentValueConverter x:Key="ContentConv" /></ControlTemplate.Resources><Border Background="{TemplateBinding Background}"BorderBrush="{TemplateBinding BorderBrush}"BorderThickness="{TemplateBinding BorderThickness}"Width="{TemplateBinding Width}"Height="{TemplateBinding Height}">   <Viewport3D x:Name="PART_Viewport"><Viewport3D.Children><ModelVisual3D><ModelVisual3D.Content><Model3DGroup><DirectionalLight Color="#444" Direction="0,0,-1" /><AmbientLight Color="#BBB" /></Model3DGroup></ModelVisual3D.Content></ModelVisual3D><Viewport2DVisual3D Material="{StaticResource diffMaterial}"Geometry="{StaticResource meshGeometry3D}"><Viewport2DVisual3D.Transform><RotateTransform3D><RotateTransform3D.Rotation><AxisAngleRotation3D Angle="180" /></RotateTransform3D.Rotation></RotateTransform3D></Viewport2DVisual3D.Transform><Viewport2DVisual3D.Visual><Border BorderBrush="Transparent" BorderThickness="1"><ContentPresenter x:Name="PART_BackContentPresenter"Content="{TemplateBinding BackContent, Converter={StaticResource ContentConv}, ConverterParameter=BACK}" ContentTemplate="{TemplateBinding BackContentTemplate}"/></Border></Viewport2DVisual3D.Visual></Viewport2DVisual3D><Viewport2DVisual3D Material="{StaticResource diffMaterial}"Geometry="{StaticResource meshGeometry3D}"><Viewport2DVisual3D.Transform><RotateTransform3D><RotateTransform3D.Rotation><AxisAngleRotation3D Angle="0" /></RotateTransform3D.Rotation></RotateTransform3D></Viewport2DVisual3D.Transform><Viewport2DVisual3D.Visual><Border BorderBrush="Transparent" BorderThickness="1"><ContentPresenter x:Name="PART_FrontContentPresenter"Content="{TemplateBinding Content,Converter={StaticResource ContentConv},ConverterParameter=FRONT}" ContentTemplate="{TemplateBinding ContentTemplate}"/></Border></Viewport2DVisual3D.Visual></Viewport2DVisual3D></Viewport3D.Children></Viewport3D></Border></ControlTemplate></Setter.Value></Setter>
</Style>
</ResourceDictionary>

由于控件类代码太长，就不粘出来了，

需要控件示例项目代码的小伙伴，关注公众号WPF UI,回复 Panel3D 即可获取。