C# WPF 初步

照书敲了一个例子,效果挺炫的,先看图

不得不说,微软家的东西包装的真是好,这么华丽的效果,只要简单几步

  1. 新建一个 WPF 应用程序,叫做 Ch34Ex01
  2. 修改自动打开的 Windows1.xaml ,改成这样样子
    <Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="Ch34Ex01.Window1"
        Title="Color Spinner" Height="370" Width="270" >
        <Window.Resources>
            <Storyboard x:Key="Spin">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" RepeatBehavior="Forever">
                    <SplineDoubleKeyFrame KeyTime="00:00:10" Value="360"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse2" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" RepeatBehavior="Forever">
                    <SplineDoubleKeyFrame KeyTime="00:00:10" Value="-360"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse3" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" RepeatBehavior="Forever">
                    <SplineDoubleKeyFrame KeyTime="00:00:05" Value="360"/>
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ellipse4" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" RepeatBehavior="Forever">
                    <SplineDoubleKeyFrame KeyTime="00:00:05" Value="-360"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </Window.Resources>
        <Window.Triggers>
            <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                <BeginStoryboard Storyboard="{StaticResource Spin}" x:Name="Spin_BeginStoryboard"/>
            </EventTrigger>
            <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="goButton">
                <ResumeStoryboard BeginStoryboardName="Spin_BeginStoryboard"/>
            </EventTrigger>
            <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="stopButton">
                <PauseStoryboard BeginStoryboardName="Spin_BeginStoryboard"/>
            </EventTrigger>
        </Window.Triggers>
        <Window.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFFFFFFF" Offset="0"/>
                <GradientStop Color="#FFFFC45A" Offset="1"/>
            </LinearGradientBrush>
        </Window.Background>
        <Grid>
            <Ellipse Margin="50,50,0,0" Name="ellipse5" Stroke="Black" Height="150" HorizontalAlignment="Left" VerticalAlignment="Top" Width="150">
                <Ellipse.BitmapEffect>
                    <BlurBitmapEffect Radius="10"/>
                </Ellipse.BitmapEffect>
                <Ellipse.Fill>
                    <RadialGradientBrush>
                        <GradientStop Color="#FF000000" Offset="1"/>
                        <GradientStop Color="#FFFFFFFF" Offset="0.306"/>
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse Margin="15,85,0,0" Name="ellipse1" Stroke="{x:Null}" Height="80" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" Fill="Red" Opacity="0.5" RenderTransformOrigin="0.92,0.5" >
                <Ellipse.BitmapEffect>
                    <BevelBitmapEffect/>
                </Ellipse.BitmapEffect>
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <RotateTransform Angle="0"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse Margin="85,15,0,0" Name="ellipse2" Stroke="{x:Null}" Height="120" HorizontalAlignment="Left" VerticalAlignment="Top" Width="80" Fill="Blue" Opacity="0.5" RenderTransformOrigin="0.5,0.92" >
                <Ellipse.BitmapEffect>
                    <BevelBitmapEffect/>
                </Ellipse.BitmapEffect>
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <RotateTransform Angle="0"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse Margin="115,85,0,0" Name="ellipse3" Stroke="{x:Null}" Height="80" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" Opacity="0.5" Fill="Yellow" RenderTransformOrigin="0.08,0.5" >
                <Ellipse.BitmapEffect>
                    <BevelBitmapEffect/>
                </Ellipse.BitmapEffect>
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <RotateTransform Angle="0"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse Margin="85,115,0,0" Name="ellipse4" Stroke="{x:Null}" Height="120" HorizontalAlignment="Left" VerticalAlignment="Top" Width="80" Opacity="0.5" Fill="Green" RenderTransformOrigin="0.5,0.08" >
                <Ellipse.BitmapEffect>
                    <BevelBitmapEffect/>
                </Ellipse.BitmapEffect>
                <Ellipse.RenderTransform>
                    <TransformGroup>
                        <RotateTransform Angle="0"/>
                    </TransformGroup>
                </Ellipse.RenderTransform>
            </Ellipse>
            <Button Height="23" HorizontalAlignment="Left" Margin="20,0,0,56" Name="goButton" VerticalAlignment="Bottom" Width="75" Content="Go"/>
            <Button Height="23" HorizontalAlignment="Left" Margin="152,0,0,56" Name="stopButton" VerticalAlignment="Bottom" Width="75" Content="Stop"/>
            <Button Height="23" HorizontalAlignment="Left" Margin="85,0,86,16" Name="toggleButton" VerticalAlignment="Bottom" Width="75" Content="Toggle" Click="toggleButton_Click" />
        </Grid>
    </Window>
    
  3. 双击 toggle 按钮,在打开的 Windows1.xaml.cs 中写入这些

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    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;
    // add by zrj
    using System.Windows.Media.Animation;
    
    namespace Ch34Ex01
    {
        /// <summary>
        /// Window1.xaml 的交互逻辑
        /// </summary>
        public partial class Window1 : Window
        {
            public Window1()
            {
                InitializeComponent();
            }
    
            private void toggleButton_Click(object sender, RoutedEventArgs e)
            {
                Storyboard spinStoryboard = Resources["Spin"] as Storyboard;
                if (spinStoryboard != null)
                {
                    if (spinStoryboard.GetIsPaused(this))
                    {
                        spinStoryboard.Resume(this);
                    }
                    else
                    {
                        spinStoryboard.Pause(this);
                    }
                }
            }
        }
    }
    
  4. OK,跑一下

Leave a Reply

Your email address will not be published. Required fields are marked *