突然發現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 即可獲取。

如果喜歡，點個贊唄~

總結

以上是生活随笔為你收集整理的WPF 仿QQ登录框翻转效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。