WPF 晚上没事做的iPhone
辛苦了几个晚上,简单的使用WPF做了个iPhone(屌丝程序员用不起iphone,只能自己做了),主要是闲的没事,想动手画画界面,发现样式什么的我都弱爆了.
各种拼界面,还算像样,用Viewport3D实现了下反转的效果,但是用的不太明白,想做成3D的旋转,不知大神们能否指教一下.
附主要代码,还请大神们多多指教.
手机正面:
手机背面:
反转过程:
主要代码:
1 <Grid> 2 <Viewport3D Width="280" Height="600"> 3 <Viewport3D.Camera> 4 <PerspectiveCamera Position="0 0 500" LookDirection="0 0 -1" NearPlaneDistance="100"/> 5 </Viewport3D.Camera> 6 <Viewport3D.Children> 7 <ContainerUIElement3D> 8 <Viewport2DVisual3D> 9 <Viewport2DVisual3D.Geometry> 10 <MeshGeometry3D Positions="-200 150 0 -200 -150 0 200 -150 0 200 150 0" TriangleIndices="0 1 2 0 2 3" TextureCoordinates="0 0 0 1 1 1 1 0"/> 11 </Viewport2DVisual3D.Geometry> 12 <Viewport2DVisual3D.Material> 13 <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True"/> 14 </Viewport2DVisual3D.Material> 15 <Viewport2DVisual3D.Visual> 16 <local:IPhoneFront x:Name="front" Width="284" Height="597" /> 17 </Viewport2DVisual3D.Visual> 18 </Viewport2DVisual3D> 19 <Viewport2DVisual3D> 20 <Viewport2DVisual3D.Geometry> 21 <MeshGeometry3D Positions="200 150 0 200 -150 0 -200 -150 0 -200 150 0" TriangleIndices="0 1 2 0 2 3" TextureCoordinates="0 0 0 1 1 1 1 0"/> 22 </Viewport2DVisual3D.Geometry> 23 <Viewport2DVisual3D.Material> 24 <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True"/> 25 </Viewport2DVisual3D.Material> 26 <Viewport2DVisual3D.Visual> 27 <local:IPhoneBack x:Name="back" Width="284" Height="597"/> 28 </Viewport2DVisual3D.Visual> 29 </Viewport2DVisual3D> 30 <!-- 三维变换 --> 31 <ContainerUIElement3D.Transform> 32 <Transform3DGroup> 33 <TranslateTransform3D OffsetZ="0" OffsetX="0" OffsetY="0"/> 34 <ScaleTransform3D ScaleY="2.7"/> 35 <RotateTransform3D > 36 <RotateTransform3D.Rotation> 37 <AxisAngleRotation3D x:Name="axr" Angle="0" Axis="0 1 0"/> 38 </RotateTransform3D.Rotation> 39 </RotateTransform3D> 40 </Transform3DGroup> 41 </ContainerUIElement3D.Transform> 42 </ContainerUIElement3D> 43 <ModelVisual3D> 44 <ModelVisual3D.Content> 45 <DirectionalLight Color="Transparent"/> 46 </ModelVisual3D.Content> 47 </ModelVisual3D> 48 </Viewport3D.Children> 49 </Viewport3D> 50 <Grid x:Name="dragMovePanel" Height="20" Background="Transparent" MouseMove="dragMovePanel_MouseMove" Margin="0,-530,0,0" /> 51 </Grid>
1 /// <summary> 2 /// 关闭 3 /// </summary> 4 /// <param name="sender">sender</param> 5 /// <param name="e">e</param> 6 void OnClose(object sender, EventArgs e) 7 { 8 this.Close(); 9 } 10 11 /// <summary> 12 /// 向前 13 /// </summary> 14 /// <param name="sender">sender</param> 15 /// <param name="e">e</param> 16 void MainWindow_OnFront(object sender, EventArgs e) 17 { 18 DoubleAnimation da = new DoubleAnimation(); 19 da.Duration = new Duration(TimeSpan.FromSeconds(1)); 20 da.To = 0d; 21 this.axr.BeginAnimation(AxisAngleRotation3D.AngleProperty, da); 22 } 23 24 /// <summary> 25 /// 向后 26 /// </summary> 27 /// <param name="sender">sender</param> 28 /// <param name="e">e</param> 29 private void MainWindow_OnBack(object sender, EventArgs e) 30 { 31 DoubleAnimation da = new DoubleAnimation(); 32 da.Duration = new Duration(TimeSpan.FromSeconds(1)); 33 da.To = 180d; 34 this.axr.BeginAnimation(AxisAngleRotation3D.AngleProperty, da); 35 } 36 37 /// <summary> 38 /// 窗口拖动事件 39 /// </summary> 40 /// <param name="sender">sender</param> 41 /// <param name="e">e</param> 42 private void dragMovePanel_MouseMove(object sender, MouseEventArgs e) 43 { 44 if (e.LeftButton == MouseButtonState.Pressed) 45 { 46 this.DragMove(); 47 } 48 }
1 <Grid> 2 <Border BorderThickness="4" Background="#FFE5E5E0" CornerRadius="35"> 3 <Border.BorderBrush> 4 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 5 <GradientStop Color="#FF9B9A9D" Offset="0"/> 6 <GradientStop Color="#FF9B9A9D" Offset="1"/> 7 <GradientStop Color="#FFD2D2D2" Offset="0.5"/> 8 </LinearGradientBrush> 9 </Border.BorderBrush> 10 <Grid> 11 <Grid.RowDefinitions> 12 <RowDefinition Height="0.1*"/> 13 <RowDefinition Height="0.1*"/> 14 <RowDefinition Height="auto"/> 15 <RowDefinition Height="0.2*"/> 16 </Grid.RowDefinitions> 17 <Border HorizontalAlignment="Center" VerticalAlignment="Center" Width="10" Height="10" CornerRadius="50" Background="#FF2F313D" Margin="0,10,0,0" /> 18 <Border Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Width="8" Height="8" CornerRadius="50" Background="#FF2F313D" Margin="0,0,73,10" Padding="0" /> 19 <Border Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center" Width="47" Height="6" CornerRadius="3" Background="#FF2F313D" Margin="0,0,0,10" /> 20 <Border Width="250" Height="434" Grid.Row="2" BorderThickness="3" CornerRadius="2"> 21 <Border.Background> 22 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 23 <GradientStop Color="#FF232155" Offset="0"/> 24 <GradientStop Color="#FF54B6E8" Offset="1"/> 25 </LinearGradientBrush> 26 </Border.Background> 27 <Border.BorderBrush> 28 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 29 <GradientStop Color="Black" Offset="0"/> 30 <GradientStop Color="#FF474545" Offset="1"/> 31 </LinearGradientBrush> 32 </Border.BorderBrush> 33 <Grid> 34 <Grid> 35 <Grid.RowDefinitions> 36 <RowDefinition Height="20"/> 37 <RowDefinition Height="*"/> 38 <RowDefinition Height="0.2*"/> 39 </Grid.RowDefinitions> 40 <Grid Margin="5,0"> 41 <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center"> 42 <Rectangle Fill="#FFE5E5E0" HorizontalAlignment="Center" Height="4" VerticalAlignment="Bottom" Width="2" Margin="0,0,1,0"/> 43 <Rectangle Fill="#FFE5E5E0" HorizontalAlignment="Center" Height="6" VerticalAlignment="Bottom" Width="2" Margin="0,0,1,0"/> 44 <Rectangle Fill="#FFE5E5E0" HorizontalAlignment="Center" Height="8" VerticalAlignment="Bottom" Width="2" Margin="0,0,1,0"/> 45 <Rectangle Fill="#FFE5E5E0" HorizontalAlignment="Center" Height="10" VerticalAlignment="Bottom" Width="2" Margin="0,0,1,0"/> 46 <Rectangle Fill="#FFE5E5E0" HorizontalAlignment="Center" Height="12" VerticalAlignment="Bottom" Width="2"/> 47 </StackPanel> 48 <TextBlock Text="中国移动" Foreground="#FFE5E5E0" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="10.667" Margin="18,0,0,0" /> 49 <TextBlock x:Name="TimeTb" Foreground="#FFE5E5E0" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="10.667" /> 50 <TextBlock Text="60%" Foreground="#FFE5E5E0" HorizontalAlignment="Right" VerticalAlignment="Center" FontSize="10.667" Margin="0,0,20,0" /> 51 <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center"> 52 <Rectangle Fill="#FFE5E5E0" HorizontalAlignment="Center" Height="8" VerticalAlignment="Center" Width="8" Stroke="#FFE5E5E0" /> 53 <Rectangle Fill="Transparent" HorizontalAlignment="Center" Height="8" VerticalAlignment="Center" Width="8" Stroke="#FFE5E5E0" /> 54 <Rectangle Fill="#FFE5E5E0" HorizontalAlignment="Center" Height="2" VerticalAlignment="Center" Width="2"/> 55 </StackPanel> 56 </Grid> 57 <ListBox x:Name="SystemDeskTopList" Margin="5,0,5,0" ScrollViewer.VerticalScrollBarVisibility="Disabled" ItemContainerStyle="{DynamicResource ListBoxItemStyle3}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" Background="Transparent" Style="{DynamicResource ListBoxStyle2}" Grid.Row="1" FontSize="10.667"> 58 <ListBox.ItemsPanel> 59 <ItemsPanelTemplate> 60 <WrapPanel Orientation="Horizontal" ScrollViewer.VerticalScrollBarVisibility="Disabled"/> 61 </ItemsPanelTemplate> 62 </ListBox.ItemsPanel> 63 <ListBox.ItemTemplate> 64 <DataTemplate> 65 <Grid x:Name="IcoPanel" Margin="3,0,3,6" Cursor="Hand" DataContext="{Binding}" Background="Transparent" 66 MouseLeftButtonDown="IcoPanel_MouseLeftButtonDown"> 67 <VisualStateManager.VisualStateGroups> 68 <VisualStateGroup x:Name="VisualStateGroup"> 69 <VisualState x:Name="Enter"> 70 <Storyboard> 71 <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border"> 72 <SplineColorKeyFrame KeyTime="0" Value="#7FE2E2E2"/> 73 </ColorAnimationUsingKeyFrames> 74 <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border"> 75 <SplineColorKeyFrame KeyTime="0" Value="#CCDADADA"/> 76 </ColorAnimationUsingKeyFrames> 77 </Storyboard> 78 </VisualState> 79 <VisualState x:Name="Leave"/> 80 </VisualStateGroup> 81 </VisualStateManager.VisualStateGroups> 82 <Grid.RowDefinitions> 83 <RowDefinition Height="*"/> 84 <RowDefinition Height="15"/> 85 </Grid.RowDefinitions> 86 <Border x:Name="border" CornerRadius="4"> 87 <Image x:Name="IcoImage" Width="48" Height="50" Source="{Binding IcoImage,Mode=OneWay}" Stretch="Fill"/> 88 </Border> 89 <TextBlock x:Name="IcoShowName" TextAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Stretch" HorizontalAlignment="Center" Foreground="#FFE5E5E0" Grid.Row="1" Margin="0" TextTrimming="None" Text="{Binding IcoShowName}" FontSize="9.333"/> 90 </Grid> 91 </DataTemplate> 92 </ListBox.ItemTemplate> 93 </ListBox> 94 <StackPanel Grid.Row="2" Orientation="Horizontal" Background="#FFA4EDFD"> 95 96 </StackPanel> 97 </Grid> 98 <Grid x:Name="ShowPanel" /> 99 </Grid> 100 </Border> 101 <Border Background="Transparent" ToolTip="关闭" Cursor="Hand" MouseLeftButtonUp="Home_MouseLeftButtonUp" Grid.Row="3" Width="53" Height="53" CornerRadius="50" BorderThickness="3" > 102 <Border.BorderBrush> 103 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 104 <GradientStop Color="#FF928E82" Offset="0"/> 105 <GradientStop Color="#FF74746A" Offset="1"/> 106 <GradientStop Color="#FF928E82" Offset="0.181"/> 107 <GradientStop Color="#FF74736E" Offset="0.453"/> 108 <GradientStop Color="#FF74736E" Offset="0.203"/> 109 <GradientStop Color="#FFFBFBF3" Offset="0.478"/> 110 <GradientStop Color="#FFFBFBF3" Offset="0.724"/> 111 <GradientStop Color="#FF74746A" Offset="0.741"/> 112 </LinearGradientBrush> 113 </Border.BorderBrush> 114 </Border> 115 </Grid> 116 </Border> 117 <Border Background="#FF9B9A9D" Width="47" Height="5" HorizontalAlignment="Right" Margin="0,-1,42.5,0" VerticalAlignment="Top" d:LayoutOverrides="Width, Height" CornerRadius="3" /> 118 <Border Background="#FFB0AFB1" Width="2" Height="30" CornerRadius="3" HorizontalAlignment="Left" Margin="-1,82,0,0" VerticalAlignment="Top" d:LayoutOverrides="Height" /> 119 <Border Background="#FFB9B9BA" Width="2" Height="22" CornerRadius="3" HorizontalAlignment="Left" Margin="-1,139,0,0" VerticalAlignment="Top" /> 120 <Border Background="#FFC3C2C3" Width="2" Height="22" CornerRadius="3" HorizontalAlignment="Left" Margin="-1,190,0,0" VerticalAlignment="Top" /> 121 <Grid MouseLeftButtonUp="Back_MouseLeftButtonUp" Background="Transparent" Width="15" Cursor="Hand" HorizontalAlignment="Left" /> 122 <Grid MouseLeftButtonUp="Back_MouseLeftButtonUp" Background="Transparent" Width="15" Cursor="Hand" HorizontalAlignment="Right" /> 123 </Grid>
1 public IPhoneFront() 2 { 3 InitializeComponent(); 4 5 // 加载图标 6 this.LoadIcoList(); 7 8 // 初始化时间及定时器 9 this.TimeTb.Text = DateTime.Now.ToString("HH:mm"); 10 DispatcherTimer timer = new DispatcherTimer(); 11 timer.Interval = TimeSpan.FromSeconds(1); 12 timer.Tick += new EventHandler(timer_Tick); 13 timer.Start(); 14 } 15 16 /// <summary> 17 /// 定时器间隔事件 18 /// </summary> 19 /// <param name="sender">sender</param> 20 /// <param name="e">e</param> 21 void timer_Tick(object sender, EventArgs e) 22 { 23 this.TimeTb.Text = DateTime.Now.ToString("HH:mm"); 24 this.TimeTb.ToolTip = DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss"); 25 } 26 27 #region event 28 29 /// <summary> 30 /// 反转手机事件 31 /// </summary> 32 private event EventHandler onBack; 33 34 /// <summary> 35 /// 反转手机事件 36 /// </summary> 37 public event EventHandler OnBack 38 { 39 add { this.onBack += value; } 40 remove { this.onBack -= value; } 41 } 42 43 /// <summary> 44 /// 关闭事件 45 /// </summary> 46 private event EventHandler onClose; 47 48 /// <summary> 49 /// 关闭事件 50 /// </summary> 51 public event EventHandler OnClose 52 { 53 add { this.onClose += value; } 54 remove { this.onClose -= value; } 55 } 56 57 #endregion 58 59 /// <summary> 60 /// 加载图标列表 61 /// </summary> 62 private void LoadIcoList() 63 { 64 List<IcoModel> icoList = new List<IcoModel> 65 { 66 new IcoModel{ Id =1, IcoShowName ="博客园1", IcoImage=@"Ico\3.png" }, 67 new IcoModel{ Id =2, IcoShowName ="博客园2", IcoImage=@"Ico\3.png" }, 68 new IcoModel{ Id =3, IcoShowName ="博客园3", IcoImage=@"Ico\3.png" }, 69 new IcoModel{ Id =4, IcoShowName ="旋转手机", IcoImage=@"Ico\3.png" }, 70 new IcoModel{ Id =5, IcoShowName ="博客园4", IcoImage=@"Ico\3.png" } 71 }; 72 73 this.SystemDeskTopList.ItemsSource = icoList; 74 } 75 76 /// <summary> 77 /// home键 78 /// </summary> 79 /// <param name="sender">sender</param> 80 /// <param name="e">e</param> 81 private void Home_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) 82 { 83 if (onClose != null) 84 { 85 this.onClose(sender, e); 86 } 87 } 88 89 /// <summary> 90 /// 向后 91 /// </summary> 92 /// <param name="sender">sender</param> 93 /// <param name="e">e</param> 94 private void Back_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) 95 { 96 if (this.onBack != null) 97 { 98 this.onBack(sender, e); 99 } 100 } 101 102 /// <summary> 103 /// 图标左键点击事件 104 /// </summary> 105 /// <param name="sender">sender</param> 106 /// <param name="e">e</param> 107 private void IcoPanel_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 108 { 109 // 获取图标 110 IcoModel ico = ((sender as Grid).DataContext as IcoModel); 111 112 if (ico == null) 113 { 114 return; 115 } 116 117 switch (ico.Id) 118 { 119 case 1: 120 System.Diagnostics.Process.Start("http://www.cnblogs.com/mcc7"); 121 case 2: 122 System.Diagnostics.Process.Start("http://www.cnblogs.com/mcc7"); 123 break; 124 case 3: 125 System.Diagnostics.Process.Start("http://www.cnblogs.com/mcc7"); 126 break; 127 case 4: 128 if (this.onBack != null) 129 { 130 this.onBack(sender, e); 131 } 132 break; 133 default: 134 break; 135 } 136 137 }