Lesson9 some interesting things in C#

1、关键帧动画

1）xml 界面

 <Page
     x:Class="Test.MainPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:Test"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

     <Page.Resources>
         <Storyboard  x:Name="Bounce">
             <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ball" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.X)">
                 <SplineDoubleKeyFrame KeyTime="00:00:00" Value=""/>
                 <SplineDoubleKeyFrame KeyTime="00:00:04" Value=""/>
                 <SplineDoubleKeyFrame KeyTime="00:00:06" Value=""/>
             </DoubleAnimationUsingKeyFrames>
             <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ball" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)">
                 <SplineDoubleKeyFrame KeyTime="00:00:00" Value=""/>
                 <SplineDoubleKeyFrame KeyTime="00:00:02" Value="-206">
                     <SplineDoubleKeyFrame.KeySpline>
                         <KeySpline ControlPoint1="0,1" ControlPoint2="1,1"/>
                     </SplineDoubleKeyFrame.KeySpline>
                 </SplineDoubleKeyFrame>
                 <SplineDoubleKeyFrame KeyTime="00:00:04" Value="">
                     <SplineDoubleKeyFrame.KeySpline>
                         <KeySpline ControlPoint1="1,0" ControlPoint2="1,1"/>
                     </SplineDoubleKeyFrame.KeySpline>
                 </SplineDoubleKeyFrame>
                 <SplineDoubleKeyFrame KeyTime="00:00:05" Value="-20">
                     <SplineDoubleKeyFrame.KeySpline>
                         <KeySpline ControlPoint1="0,1" ControlPoint2="1,1"/>
                     </SplineDoubleKeyFrame.KeySpline>
                 </SplineDoubleKeyFrame>
                 <SplineDoubleKeyFrame KeyTime="00:00:06" Value="">
                     <SplineDoubleKeyFrame.KeySpline>
                         <KeySpline ControlPoint1="1,0" ControlPoint2="1,1"/>
                     </SplineDoubleKeyFrame.KeySpline>
                 </SplineDoubleKeyFrame>
             </DoubleAnimationUsingKeyFrames>
         </Storyboard>
     </Page.Resources>
     <Grid Background="#FFF0F1FF">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="*"/>
         </Grid.RowDefinitions>

         <StackPanel x:Name="TitlePanel" Grid.Row="" Margin="12,35,0,28">
             <TextBlock Foreground="CornflowerBlue" Text="Naughty Egg" FontSize="" HorizontalAlignment="Center"/>
         </StackPanel>
 <!--
         <Grid Background="AliceBlue" x:Name="ContentPanel" Grid.Row="" Margin="12,0,12,0">
             <Path Margin ="50,-200,0,0" Height="" Width="" Stretch="Uniform"
               HorizontalAlignment="Left" >
                 <Path.Fill >
                     <ImageBrush Stretch="UniformToFill" ImageSource="Assets/Pic1.png" />
                 </Path.Fill>
                 <Path.Data >
                     <GeometryGroup FillRule="EvenOdd" >
                         <EllipseGeometry Center="50,50" RadiusX="" RadiusY=""
                               x:Name="ball">
                         </EllipseGeometry>
                     </GeometryGroup>
                 </Path.Data>
             </Path>
         </Grid>
 -->
         <Grid x:Name="ContentPanel" Grid.Row="" Margin="12,0,12,0">
             <Path Margin ="60,-250,0,0" Height="" Width="" Stretch="Uniform"
               HorizontalAlignment="Left">
                 <Path.Fill >
                     <ImageBrush Stretch="UniformToFill" ImageSource="Assets/Pic1.png" />
                 </Path.Fill>
                 <Path.Data>
                     <GeometryGroup FillRule="EvenOdd" >
                         <EllipseGeometry  RadiusX="" RadiusY=""
                              Center="100,100">
                         </EllipseGeometry>
                     </GeometryGroup>
                 </Path.Data>
             </Path>
             <Ellipse Height="" HorizontalAlignment="Left" Margin="5,0,0,151" VerticalAlignment="Bottom" Width="" Fill="#FFF40B0B" Stroke="#FF000000" x:Name="ball" RenderTransformOrigin="0.5,0.5" Opacity="0.5">
                 <Ellipse.RenderTransform>
                     <TransformGroup>
                         <TranslateTransform/>
                     </TransformGroup>
                 </Ellipse.RenderTransform>
             </Ellipse>
             <StackPanel Margin="0,300,0,100" >
                 <ProgressRing Background="#FFF0F1FF"  x:Name="prgRing" Width="" Height="" Foreground="LightSeaGreen"
                 IsActive ="True"  />

             </StackPanel>

         </Grid>

     </Grid>

 </Page>

2) .cs 中控制播放：

 public MainPage()
         {
             this.InitializeComponent();
             //开始运行Storyboard
             Bounce.Begin();
             Bounce.Completed += ToNewPage;

             timer.Tick += dispatcherTimer_Tick;
             timer.Interval = TimeSpan.FromSeconds(1.1);   //设置刷新的间隔时间
             timer.Start();
         }
         void dispatcherTimer_Tick(object sender, object e)
         {
             //function to execute
             count++;
             if (count == )
             {
                 this.prgRing.IsActive = false;
             }

         }
         private void ToNewPage(object sender, object e)
         {
             Frame rootFrame = this.Parent as Frame;
             if (rootFrame == null)
             {
                 return;
             }

             rootFrame.Navigate(typeof(Choice));
         }

3）效果：

     

2、C#中的触控

     xml：

         <Grid x:Name="gamegrid" RenderTransformOrigin="0.335,0.445" Margin="0,0,0,49"
                         Background="White" Opacity="0.9">
             <Canvas Name="canvas" Margin="5,4,5,3" >
                 <Ellipse Name="circle"
               Width=""
               Height=""
               Canvas.Left=""
               ManipulationDelta="OnManipulationDelta" ManipulationStarting="OnManipulationStarting"
                 ManipulationCompleted="OnManipulationCompleted" PointerPressed="finger_PointerPressed"
                        PointerMoved="finger_PointerMoved" PointerReleased="finger_PointerReleased"
               Canvas.Top="" RenderTransformOrigin="3.56,3.875">
                     <Ellipse.DataContext>
                         <Button Content=" " ></Button>
                         <!--<Image Name="img1" Source="Assets/Pic2.png" Margin="" Width="" Height="" />-->
                     </Ellipse.DataContext>
                 </Ellipse>

                 <TextBlock  Foreground="CornflowerBlue" Canvas.Left="" TextWrapping="Wrap" Text="Grades" Canvas.Top="" FontSize="" Height="" Width=""
                        />
                 <TextBlock Height="" Canvas.Left="" TextWrapping="Wrap"
                      Name="test" Foreground="CornflowerBlue"
                      Text="{Binding Path=HP}" Canvas.Top="" Width="" FontSize="" FontFamily="Buxton Sketch"
                        />
                 <TextBlock  HorizontalAlignment="Center"  Name="lev" Foreground="CornflowerBlue" FontSize="" Canvas.Left="" TextWrapping="Wrap" Text="level1" Canvas.Top="" Height="" Width=""/>
             </Canvas>

         </Grid>

     </Grid>
 </Page>

     .cs控制：

  //控制触摸移动的开始
         private void OnManipulationStarting(object sender, ManipulationStartingRoutedEventArgs e)
         {
             mapMode = e.Mode;
         }
         //移动中触发
         private void OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
         {
             if (ManipulationModes.TranslateX == (mapMode & ManipulationModes.TranslateX))
             {
                 cpTransform.TranslateX += e.Delta.Translation.X;
                 x = cpTransform.TranslateX;
             }
             if (ManipulationModes.TranslateY == (mapMode & ManipulationModes.TranslateY))
             {
                 cpTransform.TranslateY += e.Delta.Translation.Y;
                 y = (double)cpTransform.TranslateY;
             }

         }
         // 移动停止时触发
         private void OnManipulationCompleted(object sender,ManipulationCompletedRoutedEventArgs e)
         {

         }

         // 按下时触发
         Boolean pushDown = false;
         private void finger_PointerPressed(object sender, PointerRoutedEventArgs e)
         {
             pushDown = true;
            // rect1.Fill = new SolidColorBrush(Colors.Black); 

         }
         // 指针或手松开时触发
         private void finger_PointerReleased(object sender, PointerRoutedEventArgs e)
         {
             pushDown = false;
             //rect1.Fill = new SolidColorBrush(Colors.Orange);
             if (p.HP <=  && p.HP >= )
             {
                 XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(ToastTemplateType.ToastText01);
                 XmlNodeList elements = toastXml.GetElementsByTagName("text");
                 elements[].AppendChild(toastXml.CreateTextNode("恭喜你成为人生赢家！"));
                 ToastNotification toast = new ToastNotification(toastXml);
                 ToastNotificationManager.CreateToastNotifier().Show(toast);
             }
         }
         // 按下手或指针移动过程中触发
         private void finger_PointerMoved(object sender, PointerRoutedEventArgs e)
         {
             Point p = e.GetCurrentPoint(circle).Position;
             Point p2 = e.GetCurrentPoint(rect1).Position;
             mousepoint = e.GetCurrentPoint(circle).Position;
             if (pushDown) {
             if (tag == )
             {
                 rect1.Fill = new SolidColorBrush(Colors.Red); //矩形的填充颜色为红色!
                 changecolor(p2);
             }
             else
             {
                 changecolor2(p2);
                 rect1.Fill = new SolidColorBrush(Colors.Green); //矩形的填充颜色为绿色!
             }
             }
         }

      效果：

        

3、画刷

 前端xml界面：

  <Grid x:Name="ContentPanel" Grid.Row="" Margin="12,0,12,0">
             <Path Margin ="60,-250,0,0" Height="" Width="" Stretch="Uniform"
               HorizontalAlignment="Left">
                 <Path.Fill >
                     <ImageBrush Stretch="UniformToFill" ImageSource="Assets/Pic1.png" />
                 </Path.Fill>
                 <Path.Data>
                     <GeometryGroup FillRule="EvenOdd" >
                         <EllipseGeometry  RadiusX="" RadiusY=""
                              Center="100,100">
                         </EllipseGeometry>
                     </GeometryGroup>
                 </Path.Data>
             </Path>
             <Ellipse Height="" HorizontalAlignment="Left" Margin="5,0,0,151" VerticalAlignment="Bottom" Width="" Fill="#FFF40B0B" Stroke="#FF000000" x:Name="ball" RenderTransformOrigin="0.5,0.5" Opacity="0.5">
                 <Ellipse.RenderTransform>
                     <TransformGroup>
                         <TranslateTransform/>
                     </TransformGroup>
                 </Ellipse.RenderTransform>
             </Ellipse>
             <StackPanel Margin="0,300,0,100" >
                 <ProgressRing Background="#FFF0F1FF"  x:Name="prgRing" Width="" Height="" Foreground="LightSeaGreen"
                 IsActive ="True"  />

             </StackPanel>

         </Grid>

 效果：

      见上图中透出的椭圆形图片效果