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>

效果：

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