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="0"/>
                <SplineDoubleKeyFrame KeyTime="00:00:04" Value="297"/>
                <SplineDoubleKeyFrame KeyTime="00:00:06" Value="320"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ball" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <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="0">
                    <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="0">
                    <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="0" Margin="12,35,0,28">
            <TextBlock Foreground="CornflowerBlue" Text="Naughty Egg" FontSize="50" HorizontalAlignment="Center"/>
        </StackPanel>
<!--
        <Grid Background="AliceBlue" x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Path Margin ="50,-200,0,0" Height="150" Width="150" 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="20" RadiusY="20"
                              x:Name="ball">
                        </EllipseGeometry>
                    </GeometryGroup>
                </Path.Data>
            </Path>
        </Grid>
-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Path Margin ="60,-250,0,0" Height="250" Width="250" Stretch="Uniform" 
              HorizontalAlignment="Left">
                <Path.Fill >
                    <ImageBrush Stretch="UniformToFill" ImageSource="Assets/Pic1.png" />
                </Path.Fill>
                <Path.Data>
                    <GeometryGroup FillRule="EvenOdd" > 
                        <EllipseGeometry  RadiusX="35" RadiusY="30" 
                             Center="100,100">
                        </EllipseGeometry>
                    </GeometryGroup>
                </Path.Data>
            </Path>
            <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">
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
            <StackPanel Margin="0,300,0,100" >
                <ProgressRing Background="#FFF0F1FF"  x:Name="prgRing" Width="120" Height=" 120" 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 == 5)
            {
                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="50"
              Height="50"
              Canvas.Left="255"
              ManipulationDelta="OnManipulationDelta" ManipulationStarting="OnManipulationStarting"
                ManipulationCompleted="OnManipulationCompleted" PointerPressed="finger_PointerPressed"
                       PointerMoved="finger_PointerMoved" PointerReleased="finger_PointerReleased"
              Canvas.Top="276" RenderTransformOrigin="3.56,3.875">
                    <Ellipse.DataContext>
                        <Button Content=" " ></Button>
                        <!--<Image Name="img1" Source="Assets/Pic2.png" Margin="0" Width="30" Height="30" />-->
                    </Ellipse.DataContext>
                </Ellipse>

                <TextBlock  Foreground="CornflowerBlue" Canvas.Left="48" TextWrapping="Wrap" Text="Grades" Canvas.Top="41" FontSize="18" Height="23" Width="100"
                       />
                <TextBlock Height="23" Canvas.Left="153" TextWrapping="Wrap" 
                     Name="test" Foreground="CornflowerBlue"
                     Text="{Binding Path=HP}" Canvas.Top="41" Width="120" FontSize="18" FontFamily="Buxton Sketch"
                       />
                <TextBlock  HorizontalAlignment="Center"  Name="lev" Foreground="CornflowerBlue" FontSize="30" Canvas.Left="135" TextWrapping="Wrap" Text="level1" Canvas.Top="10" Height="31" Width="88"/>
            </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 <= 518 && p.HP >= 478)
            {
                XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(ToastTemplateType.ToastText01);
                XmlNodeList elements = toastXml.GetElementsByTagName("text");
                elements[0].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 == 0)
            {
                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="1" Margin="12,0,12,0">
            <Path Margin ="60,-250,0,0" Height="250" Width="250" Stretch="Uniform" 
              HorizontalAlignment="Left">
                <Path.Fill >
                    <ImageBrush Stretch="UniformToFill" ImageSource="Assets/Pic1.png" />
                </Path.Fill>
                <Path.Data>
                    <GeometryGroup FillRule="EvenOdd" > 
                        <EllipseGeometry  RadiusX="35" RadiusY="30" 
                             Center="100,100">
                        </EllipseGeometry>
                    </GeometryGroup>
                </Path.Data>
            </Path>
            <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">
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
            <StackPanel Margin="0,300,0,100" >
                <ProgressRing Background="#FFF0F1FF"  x:Name="prgRing" Width="120" Height=" 120" Foreground="LightSeaGreen"
                IsActive ="True"  />

            </StackPanel>

        </Grid>

 

 效果：

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