wpf Ellipse - 技术栈

Shape是一个抽象基类，它不能被实例化，所以我们在使用时只能实例化它的子类。而Shape的父类是FrameworkElement，所以，所有的Shape子类都是一个UIElement 类，因此形状对象可以用在面板和大多数控件中。由于 Canvas 面板支持其子对象的绝对位置，因此特别适合创建复杂的图形。这句话什么意思?

这段话涵盖了几个WPF中关于绘图和布局的核心概念。让我们分步骤来解析这段话：

Shape 类

在WPF中，Shape是一个抽象基类，用于绘制图形界面上的几何图形。由于它是抽象的，你不能直接创建Shape的实例。相反，你需要使用它的子类，比如Rectangle、Ellipse、Line、Polygon等，这些都是可以直接实例化并用于绘制对应图形的类。

FrameworkElement 和 UIElement

Shape的父类是FrameworkElement，这意味着Shape和其所有子类继承了FrameworkElement的特性。FrameworkElement本身继承自UIElement，这为Shape及其子类提供了一系列UI相关的功能，比如布局、事件处理等。这种继承关系意味着所有的Shape子类也都是UIElement，因此它们可以被用作用户界面的组成部分，可以放置在WPF窗口或页面中的面板和控件内。

Canvas 面板

Canvas是WPF中的一种面板，它提供了一种基于绝对位置来布局子元素的方式。每个放置在Canvas上的元素都可以通过设置Canvas.Left和Canvas.Top（以及可选的Canvas.Right和Canvas.Bottom）属性来指定其位置。这种布局方式使得Canvas非常适合用于创建需要精确控制元素位置的图形和界面，例如绘图应用、游戏界面或其他复杂的视觉布局。

结合使用

将这些概念结合起来，意味着你可以使用Shape的子类（如Rectangle、Ellipse等）来在Canvas面板上绘制各种图形，并通过设置这些图形的绝对位置来创建复杂的布局和视觉效果。由于Canvas支持子元素的绝对定位，这使得它特别适合于图形绘制和复杂布局的场景，为WPF应用程序提供了强大的视觉和布局能力。

解释

xml 复制代码

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Ellipse Width="100" 
                 Height="50" 
                 Stroke="Black" 
                 StrokeThickness="2" 
                 Fill="Red">
            <Ellipse.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation From="100" 
                                             To="200" 
                                             Duration="0:0:2" 
                                             AutoReverse="True" 
                                             RepeatBehavior="Forever"
                                             Storyboard.TargetProperty="(Ellipse.Width)" />
                            <DoubleAnimation From="50" 
                                             To="100" 
                                             Duration="0:0:2" 
                                             AutoReverse="True" 
                                             RepeatBehavior="Forever"
                                             Storyboard.TargetProperty="(Ellipse.Height)" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Ellipse.Triggers>
        </Ellipse>
        <Grid Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>
            <Ellipse Width="{Binding ElementName=slider,Path=Value}" 
                     Height="{Binding ElementName=slider,Path=Value}" 
                     Fill="Green"/>
            <Slider x:Name="slider" Grid.Row="1" Value="50" Maximum="200"/>
        </Grid>
    </Grid>

这段XAML代码定义了一个带有两列的Grid布局，并在每列中分别放置了一个Ellipse控件。这个布局展示了两种不同的方式来动态调整椭圆的尺寸。

第一列中的 Ellipse

第一列中的Ellipse初始设置为宽度100，高度50，边框为黑色且填充为红色。重点在于它包含了一个动画触发器，当椭圆加载（Loaded事件）时，会触发一组动画：

宽度动画 ：通过DoubleAnimation，椭圆的宽度从100动画到200，持续时间为2秒，然后自动反向（即从200动画回100），并且这个动画会永远重复。
高度动画：与宽度动画类似，只不过是控制椭圆的高度，从50动画到100。

这两个动画让椭圆在加载后开始膨胀和收缩，形成一个呼吸效果。

第二列中的 Ellipse

第二列包含一个Grid，该Grid定义了两行：第一行放置了另一个Ellipse，第二行（Height="auto"）放置了一个Slider控件。

Ellipse ：这个椭圆的宽度和高度都绑定到Slider的Value属性上，初始Value设置为50，Maximum值设置为200。这意味着椭圆的大小会随着滑动条的滑动而动态改变。填充色为绿色。
Slider ：放置在Grid的第二行，它允许用户通过拖动来动态调整值，进而改变绑定到它的Ellipse的大小。

整

体布局和交互

布局 : 通过Grid布局分成两列，展示了两种不同的椭圆大小动态调整方式。左侧展示了通过动画自动改变大小的椭圆，右侧则展示了通过用户交互（滑动Slider控件）来改变大小的椭圆。
动画效果 : 第一列中的椭圆通过Storyboard动画在一定范围内自动变化大小，形成了一种视觉上的"呼吸"效果。这种动画是自动开始的，且会无限循环，因为设置了AutoReverse="True"和RepeatBehavior="Forever"。
交互式调整 : 第二列中的椭圆大小随Slider的值动态变化，提供了一种交互式的方式来调整椭圆的大小。这种方式允许用户直观地看到Slider值变化时椭圆尺寸的响应。
数据绑定 : 第二列的椭圆使用了数据绑定(Binding)技术，将其Width和Height属性绑定到了Slider的Value属性。这展示了WPF强大的数据绑定能力，能够将UI元素的属性与数据源（在这里是Slider的值）进行绑定，使得UI元素能够响应数据的变化。
布局控制: 整个示例展示了WPF布局和控件的灵活性，以及如何通过动画和数据绑定来创建动态和交互式的UI。

这段代码不仅展示了WPF中动画和数据绑定的使用，还演示了如何在布局中使用这些技术来增强应用程序的视觉效果和用户交互体验。

详细精讲

xml 复制代码

<EventTrigger RoutedEvent="Loaded">
                  <BeginStoryboard>
                      <Storyboard>
                          <DoubleAnimation From="100" 
                                           To="200" 
                                           Duration="0:0:2" 
                                           AutoReverse="True" 
                                           RepeatBehavior="Forever"
                                           Storyboard.TargetProperty="(Ellipse.Width)" />
                          <DoubleAnimation From="50" 
                                           To="100" 
                                           Duration="0:0:2" 
                                           AutoReverse="True" 
                                           RepeatBehavior="Forever"
                                           Storyboard.TargetProperty="(Ellipse.Height)" />
                      </Storyboard>
                  </BeginStoryboard>
              </EventTrigger>

在这段代码中，使用了WPF的动画和触发器系统来在Ellipse控件上创建动态效果。这段代码的目标是在Ellipse加载完成后开始两个动画，这两个动画会使椭圆的宽度和高度在初始值与目标值之间循环变化，创建一种呼吸或脉动的视觉效果。下面是代码的详细解析：

EventTrigger

EventTrigger RoutedEvent="Loaded" ：这个EventTrigger监听Ellipse控件的Loaded事件，即控件被加载并准备好显示在界面上时。当这个事件发生时，触发器内部的动作（在这个例子中是BeginStoryboard动作）将被执行。

BeginStoryboard

BeginStoryboard ：这个动作开始一个或多个动画序列。在这个例子中，它包含了一个Storyboard，Storyboard定义了一系列要执行的动画。

Storyboard

Storyboard ：定义了一组动画，这些动画可以同时或按顺序播放。在这个例子中，Storyboard包含了两个DoubleAnimation动画，它们负责改变椭圆的宽度和高度。

DoubleAnimation

DoubleAnimation ：此动画用于创建从一个数值（From）动态改变到另一个数值（To）的效果。动画的持续时间由Duration属性指定。
- 第一个DoubleAnimation将椭圆的宽度从100改变到200，持续时间为2秒，AutoReverse="True"意味着动画完成后会自动反向播放（即从200改变回100），RepeatBehavior="Forever"表示这个动画会无限重复。
- 第二个DoubleAnimation类似地将椭圆的高度从50改变到100，也是在2秒内完成，并且具有自动反向和无限重复的特性。

Storyboard.TargetProperty

Storyboard.TargetProperty="(Ellipse.Width)"和Storyboard.TargetProperty="(Ellipse.Height)" ：这些属性指定了DoubleAnimation动画应用于的目标属性。在这个例子中，动画分别作用于椭圆的Width和Height属性。

这里需要注意的是，属性路径的指定方式不是标准的。正确的方式是不使用圆括号，直接指定属性名，如Width和Height。如果在实际应用中动画没有按预期运行，这可能是因为属性路径的指定方式不正确。正确的代码应该像下面这样：

xml 复制代码

<DoubleAnimation Storyboard.TargetProperty="Width" ... />
<DoubleAnimation Storyboard.TargetProperty="Height" ... />

这段代码将会在Ellipse控件加载后创建一种视觉效果，使椭圆的宽度和高度不断地在初始值和目标值之间变化，由于设置了AutoReverse和RepeatBehavior="Forever"，这种效果会无限循环，直到控件被卸载或动画被明确停止。