WPF版會飛的小鳥

用Blend畫界面、做動畫,C#控制位移。


MainWindow.xaml:

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="Bird.MainWindow"
        Title="Bird" Height="232.298" Width="276.537" AllowsTransparency="True" WindowStyle="None" Background="{x:Null}" WindowStartupLocation="Manual" MouseMove="Window_MouseMove" MouseRightButtonUp="Window_MouseRightButtonUp" Topmost="True" Icon="Application.ico" ShowInTaskbar="False" Cursor="Hand" ToolTip="鼠標右鍵退出!">
    <Window.Resources>
    	<Storyboard x:Key="sbWeiba" AutoReverse="True" RepeatBehavior="Forever">
    		<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="weiba">
    			<EasingDoubleKeyFrame KeyTime="0" Value="37.295"/>
    			<EasingDoubleKeyFrame KeyTime="0:0:2" Value="82.811"/>
    		</DoubleAnimationUsingKeyFrames>
    		<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="weiba">
    			<EasingDoubleKeyFrame KeyTime="0" Value="-19"/>
    			<EasingDoubleKeyFrame KeyTime="0:0:2" Value="-42"/>
    		</DoubleAnimationUsingKeyFrames>
    		<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="weiba">
    			<EasingDoubleKeyFrame KeyTime="0" Value="11"/>
    			<EasingDoubleKeyFrame KeyTime="0:0:2" Value="14"/>
    		</DoubleAnimationUsingKeyFrames>
    	</Storyboard>
    	<Storyboard x:Key="sbCibang" AutoReverse="True" RepeatBehavior="Forever">
    		<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="cibang">
    			<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
    			<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-0.833"/>
    		</DoubleAnimationUsingKeyFrames>
    		<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="cibang">
    			<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    			<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-49.5"/>
    		</DoubleAnimationUsingKeyFrames>
    	</Storyboard>
    	<Storyboard x:Key="sbEyeClose" RepeatBehavior="Forever" AutoReverse="True">
    		<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="eyesClosed">
    			<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    			<SplineDoubleKeyFrame KeyTime="0:0:1.4" Value="1" KeySpline="1,0,0.26,1"/>
    		</DoubleAnimationUsingKeyFrames>
    	</Storyboard>
    </Window.Resources>
    <Window.Triggers>
    	<EventTrigger RoutedEvent="FrameworkElement.Loaded">
    		<BeginStoryboard Storyboard="{StaticResource sbWeiba}"/>
    		<BeginStoryboard Storyboard="{StaticResource sbCibang}"/>
    		<BeginStoryboard Storyboard="{StaticResource sbEyeClose}"/>
    	</EventTrigger>
    </Window.Triggers>
    <Grid x:Name="tail" Margin="0,0,0,10" RenderTransformOrigin="0.5,0.5">
        <Grid.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Grid.RenderTransform>
        <Grid x:Name="weiba" Margin="26,72,177,0" RenderTransformOrigin="0.5,0.5" Height="128" VerticalAlignment="Top">
            <Grid.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform Angle="12.464"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Grid.RenderTransform>
            <Path x:Name="path3" Data="M159,142 C163.806,124.517 89.8437,197.881 106,211 C122.156,224.119 154.194,159.483 159,142 z" HorizontalAlignment="Left" Height="75.292" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Top" Width="58.005" StrokeThickness="6" RenderTransformOrigin="0.5,0.5" Margin="1,8,0,0">
                <Path.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform Angle="12.782"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Path.RenderTransform>

                <Path.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFF4DF00"/>
                        <GradientStop Color="#FFB15800" Offset="1"/>
                    </LinearGradientBrush>
                </Path.Fill>
            </Path>
            <Path x:Name="path2" Data="M159,142 C163.806,124.517 89.8437,197.881 106,211 C122.156,224.119 154.194,159.483 159,142 z" HorizontalAlignment="Left" Height="75.292" Margin="7.995,18,0,0" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Top" Width="58.005" StrokeThickness="6" RenderTransformOrigin="0.39,0.338">
                <Path.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform Angle="-0.958"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Path.RenderTransform>

                <Path.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFF4DF00"/>
                        <GradientStop Color="#FFB15800" Offset="1"/>
                    </LinearGradientBrush>
                </Path.Fill>
            </Path>
            <Path x:Name="path1" Data="M159,142 C163.806,124.517 89.8437,197.881 106,211 C122.156,224.119 154.194,159.483 159,142 z" HorizontalAlignment="Left" Height="75.292" Margin="16.005,27,0,0" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Top" Width="58.005" StrokeThickness="6" RenderTransformOrigin="0.299,0.359">
                <Path.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform Angle="-8.482"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Path.RenderTransform>

                <Path.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFF4DF00"/>
                        <GradientStop Color="#FFB15800" Offset="1"/>
                    </LinearGradientBrush>
                </Path.Fill>
            </Path>
            <Path x:Name="path" Data="M159,142 C163.806,124.517 89.8437,197.881 106,211 C122.156,224.119 154.194,159.483 159,142 z" HorizontalAlignment="Left" Height="75.292" Margin="26,34,-0.005,-0.292" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Top" Width="58.005" StrokeThickness="6" RenderTransformOrigin="0.5,0.5">
                <Path.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform Angle="-18.548"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Path.RenderTransform>

                <Path.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFF4DF00"/>
                        <GradientStop Color="#FFB15800" Offset="1"/>
                    </LinearGradientBrush>
                </Path.Fill>
            </Path>
        </Grid>
        <Grid Margin="156,167,78,10">
            <Ellipse x:Name="ellipse" HorizontalAlignment="Left" Height="26" Margin="0,2,0,0" Stroke="Black" StrokeThickness="3" VerticalAlignment="Top" Width="26" RenderTransformOrigin="0.5,0.5">

                <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="0.976,0.393" StartPoint="0.024,0.607">
                        <GradientStop Color="#FFB87C1A"/>
                        <GradientStop Color="#FF644C09" Offset="1"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse x:Name="ellipse1" HorizontalAlignment="Left" Height="26" Margin="11,2,0,0" Stroke="Black" StrokeThickness="3" VerticalAlignment="Top" Width="26" RenderTransformOrigin="0.5,0.5">

                <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="0.976,0.393" StartPoint="0.024,0.607">
                        <GradientStop Color="#FFB87C1A"/>
                        <GradientStop Color="#FF644C09" Offset="1"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse x:Name="ellipse2" HorizontalAlignment="Left" Height="26" Margin="23,0,-8,0" Stroke="Black" StrokeThickness="3" VerticalAlignment="Top" Width="26" RenderTransformOrigin="0.5,0.5">

                <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="0.976,0.393" StartPoint="0.024,0.607">
                        <GradientStop Color="#FFB87C1A"/>
                        <GradientStop Color="#FF644C09" Offset="1"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
        </Grid>
        <Grid Margin="76,32,3,10">
            <Ellipse x:Name="ellipse3" HorizontalAlignment="Left" Height="148" Stroke="Black" StrokeThickness="6" VerticalAlignment="Top" Width="158" RenderTransformOrigin="0.5,0.5">

                <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="0.55,0.59" StartPoint="-0.215,0.614">
                        <GradientStop Color="#FFF4C900"/>
                        <GradientStop Color="#FFA15000" Offset="1"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse x:Name="ellipse4" HorizontalAlignment="Left" Height="126" Margin="10,11,0,0" Stroke="Black" StrokeThickness="0" VerticalAlignment="Top" Width="137" Fill="#FF8E4903" Opacity="0.41" RenderTransformOrigin="0.5,0.5"/>
            <Path x:Name="path4" Data="M231,153 L219,141 L218.734,134.881 L218.474,128.892 L218,118 L234,103 L246,101 L270,112 C243.997,123.568 231.81,137.366 231,153 z" Fill="#FFF9F9F9" HorizontalAlignment="Left" Height="60" Margin="75,34,0,0" Stretch="Fill" StrokeThickness="5" UseLayoutRounding="False" VerticalAlignment="Top" Width="62" Opacity="0.25" RenderTransformOrigin="0.5,0.5"/>
        </Grid>
        <Canvas x:Name="sbird" Margin="86,9,47,10" RenderTransformOrigin="0.5,0.5">

            <Ellipse x:Name="ellipse5" HorizontalAlignment="Left" Height="126" Stroke="Black" StrokeThickness="0" VerticalAlignment="Top" Width="121" Fill="White" Opacity="0.1" Canvas.Top="34"/>
            <Ellipse x:Name="ellipse6" HorizontalAlignment="Left" Height="102" Stroke="Black" StrokeThickness="0" VerticalAlignment="Top" Width="99" Fill="Black" Opacity="0.2" Canvas.Left="38" Canvas.Top="45"/>
            <Ellipse x:Name="ellipse7" HorizontalAlignment="Left" Height="84" Stroke="Black" StrokeThickness="5" VerticalAlignment="Top" Width="86" Canvas.Left="51" Canvas.Top="45">
                <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="0.976,0.393" StartPoint="0.024,0.607">
                        <GradientStop Color="#FF6E6E6E"/>
                        <GradientStop Color="White" Offset="1"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Grid Height="99" Canvas.Left="141" Width="32">
                <Path x:Name="path5" Data="M307,128 C308,149 308,147 308,147 L335,147 z" HorizontalAlignment="Left" Height="22.051" Stretch="Fill" Stroke="Black" StrokeThickness="3" UseLayoutRounding="False" VerticalAlignment="Top" Width="31" Margin="0,77.318,0,-0.369">
                    <Path.Fill>
                        <LinearGradientBrush EndPoint="0.976,0.393" StartPoint="0.024,0.607">
                            <GradientStop Color="#FF6E6E6E"/>
                            <GradientStop Color="White" Offset="1"/>
                        </LinearGradientBrush>
                    </Path.Fill>
                </Path>
                <Path x:Name="path6" Data="M307,128 C308,149 308,147 308,147 L335,147 z" HorizontalAlignment="Left" Height="22.949" Stretch="Fill" Stroke="Black" StrokeThickness="3" UseLayoutRounding="False" VerticalAlignment="Top" Width="31" RenderTransformOrigin="0.629,2.653" Margin="0,-0.631,0,0">
                    <Path.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleY="-1" ScaleX="1"/>
                            <SkewTransform AngleY="0" AngleX="0"/>
                            <RotateTransform Angle="0"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Path.RenderTransform>

                    <Path.Fill>
                        <LinearGradientBrush EndPoint="0.976,0.393" StartPoint="0.024,0.607">
                            <GradientStop Color="#FF6E6E6E"/>
                            <GradientStop Color="White" Offset="1"/>
                        </LinearGradientBrush>
                    </Path.Fill>
                </Path>
            </Grid>
            <Grid x:Name="eye_grid" Height="60" Canvas.Left="65" Canvas.Top="57" Width="62">
                <Ellipse x:Name="ellipse8" HorizontalAlignment="Left" Height="60" Stroke="Black" StrokeThickness="5" VerticalAlignment="Top" Width="62" Fill="Black"/>
                <Ellipse x:Name="ellipse9" HorizontalAlignment="Left" Height="40" Margin="7,8,0,0" Stroke="Black" StrokeThickness="5" VerticalAlignment="Top" Width="41" Fill="#FFF5EDED"/>

            </Grid>
            <Grid x:Name="eyesClosed" Height="84" Canvas.Left="51" Canvas.Top="45" Width="86" Opacity="0">
                <Ellipse x:Name="ellipse10" HorizontalAlignment="Left" Height="84" Stroke="Black" StrokeThickness="5" VerticalAlignment="Top" Width="86" Fill="#FFA05000"/>
                <Ellipse x:Name="ellipse11" HorizontalAlignment="Left" Height="62" Margin="6,7,0,0" Stroke="Black" StrokeThickness="0" VerticalAlignment="Top" Width="64" Fill="#FFAC782C"/>
                <Ellipse x:Name="ellipse12" HorizontalAlignment="Left" Height="48" Margin="8,14,0,0" Stroke="Black" StrokeThickness="0" VerticalAlignment="Top" Width="50" Fill="#FFCB8724"/>
                <Path x:Name="path7" Data="M204,143 C227.844,129.228 254.374,124.221 284,129" Fill="#FFA05000" HorizontalAlignment="Left" Height="20.765" Margin="0.5,35.735,0,0" Stretch="Fill" Stroke="Black" StrokeThickness="5" UseLayoutRounding="False" VerticalAlignment="Top" Width="85"/>

            </Grid>
            <Grid x:Name="cibang" Height="54" Canvas.Left="16" Canvas.Top="142" Width="43" RenderTransformOrigin="0.5,0.5">
                <Grid.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Grid.RenderTransform>

                <Path x:Name="path8" Data="M164,257 L150,290 C157.786,298.518 162.927,300.497 165,289 C172.038,304.954 177.865,305.516 182,288 C186.966,305.659 192.524,309.266 199,285 C204.087,312.403 210.285,315.086 218,284.001 L217,254" HorizontalAlignment="Left" Height="54.358" Margin="0,0,-0.832,-0.358" Stretch="Fill" Stroke="Black" StrokeThickness="3" UseLayoutRounding="False" VerticalAlignment="Top" Width="43.832" Fill="#FFB3751A" RenderTransformOrigin="0.5,0.5"/>

            </Grid>

        </Canvas>

    </Grid>
</Window>

MainWindow.xaml.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Threading;

namespace Bird
{
    /// <summary>
    /// MainWindow.xaml 的交互邏輯
    /// </summary>
    public partial class MainWindow : Window
    {
        DispatcherTimer timer = new DispatcherTimer();
        public MainWindow()
        {
            InitializeComponent();
            timer.Tick += timer_Tick;
            timer.Interval = TimeSpan.FromMilliseconds(10);
            this.Left = 0;
            //this.Top = 0;
            timer.Start();
        }

        void timer_Tick(object sender, EventArgs e)
        {
            if (this.Left < SystemParameters.WorkArea.Width)    //如果位置小於屏幕
                this.Left += 2;  //右移兩位
            else
                this.Left = 0;     //恢復位置爲0
            //this.Top = this.Top + 3;
        }
      
        private void Window_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
        {
        	// 在此處添加事件處理程序實現。
			 if (e.LeftButton == MouseButtonState.Pressed)
            {
                DragMove();     //拖動
            }

        }

        private void Window_MouseRightButtonUp(object sender, MouseButtonEventArgs e)
        {
            this.Close();
        }
    }
}


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章