利用WPF绘图

时间:2023-03-09 07:24:24
利用WPF绘图

C#入门经典 25章的一个例子,利用WPF绘图。

XAML:

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Ch25Ex01.MainWindow"
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.Effect>
<BlurEffect Radius="10" />
</Ellipse.Effect>
<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.Effect>
<BlurEffect />
</Ellipse.Effect>
<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.Effect>
<BlurEffect />
</Ellipse.Effect>
<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.Effect>
<BlurEffect />
</Ellipse.Effect>
<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.Effect>
<BlurEffect />
</Ellipse.Effect>
<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>

交互逻辑:

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;
using System.Windows.Media.Animation; namespace Ch25Ex01
{
/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
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);
}
}
}
}

最终效果很炫哦,推荐自己动手实现。