Lesson9 some interesting things in C#
1、关键帧动画
1)xml 界面
1 <Page 2 x:Class="Test.MainPage" 3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 5 xmlns:local="using:Test" 6 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 7 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 8 mc:Ignorable="d" 9 Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 10 11 12 13 <Page.Resources> 14 <Storyboard x:Name="Bounce"> 15 <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ball" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)"> 16 <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/> 17 <SplineDoubleKeyFrame KeyTime="00:00:04" Value="297"/> 18 <SplineDoubleKeyFrame KeyTime="00:00:06" Value="320"/> 19 </DoubleAnimationUsingKeyFrames> 20 <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ball" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)"> 21 <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/> 22 <SplineDoubleKeyFrame KeyTime="00:00:02" Value="-206"> 23 <SplineDoubleKeyFrame.KeySpline> 24 <KeySpline ControlPoint1="0,1" ControlPoint2="1,1"/> 25 </SplineDoubleKeyFrame.KeySpline> 26 </SplineDoubleKeyFrame> 27 <SplineDoubleKeyFrame KeyTime="00:00:04" Value="0"> 28 <SplineDoubleKeyFrame.KeySpline> 29 <KeySpline ControlPoint1="1,0" ControlPoint2="1,1"/> 30 </SplineDoubleKeyFrame.KeySpline> 31 </SplineDoubleKeyFrame> 32 <SplineDoubleKeyFrame KeyTime="00:00:05" Value="-20"> 33 <SplineDoubleKeyFrame.KeySpline> 34 <KeySpline ControlPoint1="0,1" ControlPoint2="1,1"/> 35 </SplineDoubleKeyFrame.KeySpline> 36 </SplineDoubleKeyFrame> 37 <SplineDoubleKeyFrame KeyTime="00:00:06" Value="0"> 38 <SplineDoubleKeyFrame.KeySpline> 39 <KeySpline ControlPoint1="1,0" ControlPoint2="1,1"/> 40 </SplineDoubleKeyFrame.KeySpline> 41 </SplineDoubleKeyFrame> 42 </DoubleAnimationUsingKeyFrames> 43 </Storyboard> 44 </Page.Resources> 45 <Grid Background="#FFF0F1FF"> 46 <Grid.RowDefinitions> 47 <RowDefinition Height="Auto"/> 48 <RowDefinition Height="*"/> 49 </Grid.RowDefinitions> 50 51 <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,35,0,28"> 52 <TextBlock Foreground="CornflowerBlue" Text="Naughty Egg" FontSize="50" HorizontalAlignment="Center"/> 53 </StackPanel> 54 <!-- 55 <Grid Background="AliceBlue" x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 56 <Path Margin ="50,-200,0,0" Height="150" Width="150" Stretch="Uniform" 57 HorizontalAlignment="Left" > 58 <Path.Fill > 59 <ImageBrush Stretch="UniformToFill" ImageSource="Assets/Pic1.png" /> 60 </Path.Fill> 61 <Path.Data > 62 <GeometryGroup FillRule="EvenOdd" > 63 <EllipseGeometry Center="50,50" RadiusX="20" RadiusY="20" 64 x:Name="ball"> 65 </EllipseGeometry> 66 </GeometryGroup> 67 </Path.Data> 68 </Path> 69 </Grid> 70 --> 71 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 72 <Path Margin ="60,-250,0,0" Height="250" Width="250" Stretch="Uniform" 73 HorizontalAlignment="Left"> 74 <Path.Fill > 75 <ImageBrush Stretch="UniformToFill" ImageSource="Assets/Pic1.png" /> 76 </Path.Fill> 77 <Path.Data> 78 <GeometryGroup FillRule="EvenOdd" > 79 <EllipseGeometry RadiusX="35" RadiusY="30" 80 Center="100,100"> 81 </EllipseGeometry> 82 </GeometryGroup> 83 </Path.Data> 84 </Path> 85 <Ellipse Height="85" HorizontalAlignment="Left" Margin="5,0,0,151" VerticalAlignment="Bottom" Width="85" Fill="#FFF40B0B" Stroke="#FF000000" x:Name="ball" RenderTransformOrigin="0.5,0.5" Opacity="0.5"> 86 <Ellipse.RenderTransform> 87 <TransformGroup> 88 <TranslateTransform/> 89 </TransformGroup> 90 </Ellipse.RenderTransform> 91 </Ellipse> 92 <StackPanel Margin="0,300,0,100" > 93 <ProgressRing Background="#FFF0F1FF" x:Name="prgRing" Width="120" Height=" 120" Foreground="LightSeaGreen" 94 IsActive ="True" /> 95 96 </StackPanel> 97 98 </Grid> 99 100 101 </Grid> 102 103 </Page>
2) .cs 中控制播放:
1 public MainPage() 2 { 3 this.InitializeComponent(); 4 //开始运行Storyboard 5 Bounce.Begin(); 6 Bounce.Completed += ToNewPage; 7 8 timer.Tick += dispatcherTimer_Tick; 9 timer.Interval = TimeSpan.FromSeconds(1.1); //设置刷新的间隔时间 10 timer.Start(); 11 } 12 void dispatcherTimer_Tick(object sender, object e) 13 { 14 //function to execute 15 count++; 16 if (count == 5) 17 { 18 this.prgRing.IsActive = false; 19 } 20 21 } 22 private void ToNewPage(object sender, object e) 23 { 24 Frame rootFrame = this.Parent as Frame; 25 if (rootFrame == null) 26 { 27 return; 28 } 29 30 rootFrame.Navigate(typeof(Choice)); 31 }
3)效果:
2、C#中的触控
xml:
1 2 <Grid x:Name="gamegrid" RenderTransformOrigin="0.335,0.445" Margin="0,0,0,49" 3 Background="White" Opacity="0.9"> 4 <Canvas Name="canvas" Margin="5,4,5,3" > 5 <Ellipse Name="circle" 6 Width="50" 7 Height="50" 8 Canvas.Left="255" 9 ManipulationDelta="OnManipulationDelta" ManipulationStarting="OnManipulationStarting" 10 ManipulationCompleted="OnManipulationCompleted" PointerPressed="finger_PointerPressed" 11 PointerMoved="finger_PointerMoved" PointerReleased="finger_PointerReleased" 12 Canvas.Top="276" RenderTransformOrigin="3.56,3.875"> 13 <Ellipse.DataContext> 14 <Button Content=" " ></Button> 15 <!--<Image Name="img1" Source="Assets/Pic2.png" Margin="0" Width="30" Height="30" />--> 16 </Ellipse.DataContext> 17 </Ellipse> 18 19 <TextBlock Foreground="CornflowerBlue" Canvas.Left="48" TextWrapping="Wrap" Text="Grades" Canvas.Top="41" FontSize="18" Height="23" Width="100" 20 /> 21 <TextBlock Height="23" Canvas.Left="153" TextWrapping="Wrap" 22 Name="test" Foreground="CornflowerBlue" 23 Text="{Binding Path=HP}" Canvas.Top="41" Width="120" FontSize="18" FontFamily="Buxton Sketch" 24 /> 25 <TextBlock HorizontalAlignment="Center" Name="lev" Foreground="CornflowerBlue" FontSize="30" Canvas.Left="135" TextWrapping="Wrap" Text="level1" Canvas.Top="10" Height="31" Width="88"/> 26 </Canvas> 27 28 29 </Grid> 30 31 </Grid> 32 </Page>
.cs控制:
1 //控制触摸移动的开始 2 private void OnManipulationStarting(object sender, ManipulationStartingRoutedEventArgs e) 3 { 4 mapMode = e.Mode; 5 } 6 //移动中触发 7 private void OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e) 8 { 9 if (ManipulationModes.TranslateX == (mapMode & ManipulationModes.TranslateX)) 10 { 11 cpTransform.TranslateX += e.Delta.Translation.X; 12 x = cpTransform.TranslateX; 13 } 14 if (ManipulationModes.TranslateY == (mapMode & ManipulationModes.TranslateY)) 15 { 16 cpTransform.TranslateY += e.Delta.Translation.Y; 17 y = (double)cpTransform.TranslateY; 18 } 19 20 21 22 } 23 // 移动停止时触发 24 private void OnManipulationCompleted(object sender,ManipulationCompletedRoutedEventArgs e) 25 { 26 27 28 } 29 30 // 按下时触发 31 Boolean pushDown = false; 32 private void finger_PointerPressed(object sender, PointerRoutedEventArgs e) 33 { 34 pushDown = true; 35 // rect1.Fill = new SolidColorBrush(Colors.Black); 36 37 } 38 // 指针或手松开时触发 39 private void finger_PointerReleased(object sender, PointerRoutedEventArgs e) 40 { 41 pushDown = false; 42 //rect1.Fill = new SolidColorBrush(Colors.Orange); 43 if (p.HP <= 518 && p.HP >= 478) 44 { 45 XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(ToastTemplateType.ToastText01); 46 XmlNodeList elements = toastXml.GetElementsByTagName("text"); 47 elements[0].AppendChild(toastXml.CreateTextNode("恭喜你成为人生赢家!")); 48 ToastNotification toast = new ToastNotification(toastXml); 49 ToastNotificationManager.CreateToastNotifier().Show(toast); 50 } 51 } 52 // 按下手或指针移动过程中触发 53 private void finger_PointerMoved(object sender, PointerRoutedEventArgs e) 54 { 55 Point p = e.GetCurrentPoint(circle).Position; 56 Point p2 = e.GetCurrentPoint(rect1).Position; 57 mousepoint = e.GetCurrentPoint(circle).Position; 58 if (pushDown) { 59 if (tag == 0) 60 { 61 rect1.Fill = new SolidColorBrush(Colors.Red); //矩形的填充颜色为红色! 62 changecolor(p2); 63 } 64 else 65 { 66 changecolor2(p2); 67 rect1.Fill = new SolidColorBrush(Colors.Green); //矩形的填充颜色为绿色! 68 } 69 } 70 }
效果:
3、画刷
前端xml界面:
1 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 2 <Path Margin ="60,-250,0,0" Height="250" Width="250" Stretch="Uniform" 3 HorizontalAlignment="Left"> 4 <Path.Fill > 5 <ImageBrush Stretch="UniformToFill" ImageSource="Assets/Pic1.png" /> 6 </Path.Fill> 7 <Path.Data> 8 <GeometryGroup FillRule="EvenOdd" > 9 <EllipseGeometry RadiusX="35" RadiusY="30" 10 Center="100,100"> 11 </EllipseGeometry> 12 </GeometryGroup> 13 </Path.Data> 14 </Path> 15 <Ellipse Height="85" HorizontalAlignment="Left" Margin="5,0,0,151" VerticalAlignment="Bottom" Width="85" Fill="#FFF40B0B" Stroke="#FF000000" x:Name="ball" RenderTransformOrigin="0.5,0.5" Opacity="0.5"> 16 <Ellipse.RenderTransform> 17 <TransformGroup> 18 <TranslateTransform/> 19 </TransformGroup> 20 </Ellipse.RenderTransform> 21 </Ellipse> 22 <StackPanel Margin="0,300,0,100" > 23 <ProgressRing Background="#FFF0F1FF" x:Name="prgRing" Width="120" Height=" 120" Foreground="LightSeaGreen" 24 IsActive ="True" /> 25 26 </StackPanel> 27 28 </Grid>
效果:
见上图中透出的椭圆形图片效果