首页 > 其他分享 >WPF Shape系列控件的详细使用教程

WPF Shape系列控件的详细使用教程

时间：2024-09-10 20:53:45浏览次数：11  
标签：动画 控件 示例 形状 Shape new WPF

WPF（Windows Presentation Foundation）中的 Shape 控件提供了一系列用于绘制几何形状的元素，如线条、矩形、椭圆、多边形等。这些控件继承自 System.Windows.Shapes.Shape 基类，具有一致的属性和行为，允许开发者轻松地在应用程序中创建丰富的图形界面。

本文将详细介绍 WPF 中的 Shape 控件，包括各类具体形状的使用方法、关键属性、样式设置、变换、动画、事件处理等内容。通过阅读本教程，您将能够全面掌握如何在 WPF 应用程序中使用和定制 Shape 控件。

目录

  1. Shape 控件概述
  2. Shape 基类及关键属性
  3. 常用 Shape 控件
  4. 样式与外观设置
  5. 形状的变换
  6. 形状的动画
  7. 事件处理
  8. 使用 Shape 控件的最佳实践
  9. 综合示例
  10. 总结

1. Shape 控件概述

WPF 提供了一组继承自 Shape 基类的控件，用于绘制各种几何图形。这些控件包括：

  • Line
  • Rectangle
  • Ellipse
  • Polygon
  • Polyline
  • Path

Shape 控件具有一致的属性，如 Fill、Stroke、StrokeThickness 等，允许开发者通过 XAML 或代码轻松地定制其外观和行为。此外，Shape 控件支持变换、动画和事件处理，使其在创建动态和交互式图形界面时非常有用。

2. Shape 基类及关键属性

所有的 Shape 控件都继承自 System.Windows.Shapes.Shape 类，该基类提供了以下关键属性：

主要属性

  • Fill：定义形状的内部填充。可以是纯色、渐变或图案。

    Fill="Red"

  • Stroke：定义形状的边框颜色。

    Stroke="Black"

  • StrokeThickness：定义边框的厚度。

    StrokeThickness="2"

  • StrokeDashArray：定义边框的虚线样式。

    StrokeDashArray="2,2"

  • Opacity：定义形状的透明度（0.0 到 1.0）。

    Opacity="0.5"

  • RenderTransform：应用几何变换，如旋转、缩放、平移等。

    RenderTransform="RotateTransform Angle=45"

常用属性

  • Width 和 Height：定义形状的尺寸。适用于 Rectangle、Ellipse 等。

    Width="100" Height="50"

  • Stretch：定义形状在可用空间中的拉伸方式（None、Fill、Uniform、UniformToFill）。

    Stretch="Uniform"

  • Margin：定义形状与周围元素的间距。

    Margin="10"

事件

Shape 控件支持多种事件，例如：

  • MouseLeftButtonDown：鼠标左键按下事件。
  • MouseEnter：鼠标进入形状区域。
  • MouseLeave：鼠标离开形状区域。
  • MouseMove：鼠标在形状区域移动。

3. 常用 Shape 控件

Line

Line 控件用于绘制直线段。需要定义起点和终点。

XAML 示例
<Line X1="10" Y1="10" X2="200" Y2="10"
      Stroke="Blue" StrokeThickness="2" />
属性说明
  • X1、Y1：起点坐标。
  • X2、Y2：终点坐标。
C# 代码示例
Line line = new Line
{
    X1 = 10,
    Y1 = 10,
    X2 = 200,
    Y2 = 10,
    Stroke = Brushes.Blue,
    StrokeThickness = 2
};

myCanvas.Children.Add(line);

Rectangle

Rectangle 控件用于绘制矩形。可以通过设置 Width 和 Height 定义尺寸。

XAML 示例
<Rectangle Width="100" Height="50" Fill="LightGreen" Stroke="DarkGreen" StrokeThickness="3" />
C# 代码示例
Rectangle rect = new Rectangle
{
    Width = 100,
    Height = 50,
    Fill = Brushes.LightGreen,
    Stroke = Brushes.DarkGreen,
    StrokeThickness = 3
};

myCanvas.Children.Add(rect);

Ellipse

Ellipse 控件用于绘制椭圆或圆。通过 Width 和 Height 定义尺寸，若两者相等则为圆。

XAML 示例
<Ellipse Width="100" Height="100" Fill="Yellow" Stroke="Orange" StrokeThickness="2" />
C# 代码示例
Ellipse ellipse = new Ellipse
{
    Width = 100,
    Height = 100,
    Fill = Brushes.Yellow,
    Stroke = Brushes.Orange,
    StrokeThickness = 2
};

myCanvas.Children.Add(ellipse);

Polygon

Polygon 控件用于绘制多边形，通过一系列点定义形状。

XAML 示例
<Polygon Points="50,0 100,50 50,100 0,50"
         Fill="Purple" Stroke="Black" StrokeThickness="2" />
C# 代码示例
Polygon polygon = new Polygon
{
    Points = new PointCollection(new List<Point>
    {
        new Point(50, 0),
        new Point(100, 50),
        new Point(50, 100),
        new Point(0, 50)
    }),
    Fill = Brushes.Purple,
    Stroke = Brushes.Black,
    StrokeThickness = 2
};

myCanvas.Children.Add(polygon);

Polyline

Polyline 控件类似于 Polygon，但不自动闭合。用于绘制折线。

XAML 示例
<Polyline Points="0,0 50,100 100,0"
          Stroke="Red" StrokeThickness="3" Fill="Transparent" />
C# 代码示例
Polyline polyline = new Polyline
{
    Points = new PointCollection(new List<Point>
    {
        new Point(0, 0),
        new Point(50, 100),
        new Point(100, 0)
    }),
    Stroke = Brushes.Red,
    StrokeThickness = 3,
    Fill = Brushes.Transparent
};

myCanvas.Children.Add(polyline);

Path

Path 控件用于绘制复杂的几何图形，通过 Data 属性定义路径数据。支持贝塞尔曲线、弧线等高级图形。

XAML 示例
<Path Stroke="Black" StrokeThickness="2" Fill="LightBlue" Data="M 10,100 C 100,0 200,200 300,100" />
属性说明
  • Data：定义路径的几何数据，使用路径语法（Path Markup Syntax）。
C# 代码示例
Path path = new Path
{
    Stroke = Brushes.Black,
    StrokeThickness = 2,
    Fill = Brushes.LightBlue,
    Data = Geometry.Parse("M 10,100 C 100,0 200,200 300,100")
};

myCanvas.Children.Add(path);
路径数据语法
  • M：移动到（Move to）。
  • L：直线到（Line to）。
  • C：三次贝塞尔曲线到（Cubic Bezier curve to）。
  • Q：二次贝塞尔曲线到（Quadratic Bezier curve to）。
  • A：弧线到（Arc to）。
  • Z：闭合路径（Close path）。

示例：绘制一个带弧线的心形

<Path Stroke="Red" StrokeThickness="2" Fill="Pink" Data="M 10,30
    A 20,20 0 0,1 50,30
    A 20,20 0 0,1 90,30
    Q 90,60 50,90
    Q 10,60 10,30 Z" />

4. 样式与外观设置

填充（Fill）

Fill 属性定义了形状内部的填充，可以是纯色、渐变、图案等。

纯色填充
<Rectangle Width="100" Height="50" Fill="LightBlue" />
渐变填充

线性渐变

<Rectangle Width="100" Height="50">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Blue" Offset="0" />
            <GradientStop Color="White" Offset="1" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

径向渐变

<Ellipse Width="100" Height="100">
    <Ellipse.Fill>
        <RadialGradientBrush>
            <GradientStop Color="Yellow" Offset="0" />
            <GradientStop Color="Red" Offset="1" />
        </RadialGradientBrush>
    </Ellipse.Fill>
</Ellipse>
图案填充
<Rectangle Width="100" Height="100">
    <Rectangle.Fill>
        <ImageBrush ImageSource="Images/pattern.png" />
    </Rectangle.Fill>
</Rectangle>

描边（Stroke）及描边厚度（StrokeThickness）

Stroke 属性定义了形状的边框颜色，StrokeThickness 定义了边框的宽度。

示例
<Ellipse Width="100" Height="100" Fill="Yellow" Stroke="Orange" StrokeThickness="4" />

填充和描边的渐变与图案

填充和描边都可以使用渐变或图案画刷。

描边使用线性渐变
<Rectangle Width="100" Height="50">
    <Rectangle.Stroke>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
            <GradientStop Color="Green" Offset="0" />
            <GradientStop Color="Black" Offset="1" />
        </LinearGradientBrush>
    </Rectangle.Stroke>
    <Rectangle.StrokeThickness>5</Rectangle.StrokeThickness>
</Rectangle>

形状的透明度和混合模式

  • Opacity：控制形状的整体透明度。

    <Rectangle Width="100" Height="50" Fill="Blue" Opacity="0.5" />

  • Fill 和 Stroke 的透明度：通过 Color 的 Alpha 通道设置部分透明。

    <Ellipse Width="100" Height="100">
    <Ellipse.Fill>
        <SolidColorBrush Color="#80FF0000" /> <!-- 半透明红色 -->
    </Ellipse.Fill>
    <Ellipse.Stroke>
        <SolidColorBrush Color="#800000FF" /> <!-- 半透明蓝色 -->
    </Ellipse.Stroke>
    <Ellipse.StrokeThickness>2</Ellipse.StrokeThickness>
</Ellipse>

5. 形状的变换

WPF 支持对 Shape 控件应用多种几何变换，如平移、旋转、缩放和倾斜。这些变换通过 RenderTransform 属性进行设置。

平移（TranslateTransform）

用于将形状在 X 和 Y 方向上移动。

XAML 示例
        <Rectangle Width="100" Height="50" Fill="LightBlue">
            <Rectangle.RenderTransform>
                <TranslateTransform X="50" Y="100"></TranslateTransform>
            </Rectangle.RenderTransform>
        </Rectangle
C# 代码示例
TranslateTransform translate = new TranslateTransform(50, 100);
rectangle.RenderTransform = translate;

旋转（RotateTransform）

用于将形状围绕一个中心点旋转指定的角度。

XAML 示例
   <Rectangle Width="100" Height="50" Fill="LightBlue">
       <Rectangle.RenderTransform>
           <RotateTransform  Angle="50"></RotateTransform>
       </Rectangle.RenderTransform>
   </Rectangle>
C# 代码示例
RotateTransform rotate = new RotateTransform(45);
ellipse.RenderTransform = rotate;
指定旋转中心

默认情况下，旋转中心是形状的中心点。可以通过 CenterX 和 CenterY 属性自定义旋转中心。

<Rectangle Width="100" Height="50" Fill="LightBlue">
    <Rectangle.RenderTransform>
        <RotateTransform Angle="30" CenterX="50" CenterY="25" />
    </Rectangle.RenderTransform>
</Rectangle>

缩放（ScaleTransform）

用于在 X 和 Y 方向上缩放形状。

XAML 示例
        <Polygon Points="50,0 100,50 50,100 0,50" Fill="Purple" >
            <Polygon.RenderTransform>
                <ScaleTransform   ScaleX="1.5" ScaleY="1.5" />
            </Polygon.RenderTransform>
        </Polygon>
C# 代码示例
ScaleTransform scale = new ScaleTransform(1.5, 1.5);
polygon.RenderTransform = scale;

倾斜（SkewTransform）

用于在 X 和 Y 方向上倾斜形状。

XAML 示例
<Line X1="0" Y1="0" X2="100" Y2="0" Stroke="Black" StrokeThickness="2">
    <Line.RenderTransform>
        <SkewTransform AngleX="20" AngleY="10" />
    </Line.RenderTransform>
</Line>
C# 代码示例
SkewTransform skew = new SkewTransform(20, 10);
line.RenderTransform = skew;

复合变换

可以组合多个变换，使用 TransformGroup 来实现。

XAML 示例
<Rectangle Width="100" Height="50" Fill="LightBlue">
    <Rectangle.RenderTransform>
        <TransformGroup>
            <RotateTransform Angle="30" />
            <ScaleTransform ScaleX="1.5" ScaleY="1.5" />
            <TranslateTransform X="50" Y="100" />
        </TransformGroup>
    </Rectangle.RenderTransform>
</Rectangle>
C# 代码示例
TransformGroup transformGroup = new TransformGroup();
transformGroup.Children.Add(new RotateTransform(30));
transformGroup.Children.Add(new ScaleTransform(1.5, 1.5));
transformGroup.Children.Add(new TranslateTransform(50, 100));

rectangle.RenderTransform = transformGroup;

6. 形状的动画

WPF 支持对 Shape 控件的属性进行动画，使界面更加生动和交互式。以下介绍几种常见的动画方式。

动画填充颜色

使用 ColorAnimation 动画填充颜色的过渡。

XAML 示例
<Ellipse Width="100" Height="100">
    <Ellipse.Fill>
        <SolidColorBrush x:Name="ellipseBrush" Color="Yellow" />
    </Ellipse.Fill>
    <Ellipse.Triggers>
        <EventTrigger RoutedEvent="Ellipse.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimation Storyboard.TargetName="ellipseBrush" Storyboard.TargetProperty="Color"
                                    To="Orange" Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Ellipse.Triggers>
</Ellipse>
C# 代码示例
SolidColorBrush brush = new SolidColorBrush(Colors.Yellow);
ellipse.Fill = brush;

ColorAnimation colorAnimation = new ColorAnimation
{
    To = Colors.Orange,
    Duration = TimeSpan.FromSeconds(2),
    AutoReverse = true,
    RepeatBehavior = RepeatBehavior.Forever
};

brush.BeginAnimation(SolidColorBrush.ColorProperty, colorAnimation);

动画描边颜色与厚度

可以分别对 Stroke 和 StrokeThickness 进行动画。

XAML 示例
<Rectangle Width="100" Height="50" Fill="LightBlue" Stroke="Blue" StrokeThickness="2">
    <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="StrokeThickness"
                                     To="10" Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever" />
                    <ColorAnimation Storyboard.TargetProperty="Stroke.Color"
                                    To="Red" Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Rectangle.Triggers>
</Rectangle>
C# 代码示例
SolidColorBrush strokeBrush = new SolidColorBrush(Colors.Blue);
rectangle.Stroke = strokeBrush;
rectangle.StrokeThickness = 2;

DoubleAnimation thicknessAnimation = new DoubleAnimation
{
    To = 10,
    Duration = TimeSpan.FromSeconds(2),
    AutoReverse = true,
    RepeatBehavior = RepeatBehavior.Forever
};

ColorAnimation strokeColorAnimation = new ColorAnimation
{
    To = Colors.Red,
    Duration = TimeSpan.FromSeconds(2),
    AutoReverse = true,
    RepeatBehavior = RepeatBehavior.Forever
};

strokeBrush.BeginAnimation(SolidColorBrush.ColorProperty, strokeColorAnimation);
rectangle.BeginAnimation(Shape.StrokeThicknessProperty, thicknessAnimation);

形状的移动与变换动画

使用 DoubleAnimation 或 Storyboard 对形状进行平移、旋转、缩放等变换的动画。

XAML 示例（平移动画）
<Rectangle Width="100" Height="50" Fill="LightBlue">
    <Rectangle.RenderTransform>
        <TranslateTransform x:Name="rectTransform" X="0" Y="0" />
    </Rectangle.RenderTransform>
    <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="rectTransform" Storyboard.TargetProperty="X"
                                     From="0" To="200" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Rectangle.Triggers>
</Rectangle>
C# 代码示例（旋转动画）
RotateTransform rotateTransform = new RotateTransform(0);
rectangle.RenderTransform = rotateTransform;
rectangle.RenderTransformOrigin = new Point(0.5, 0.5);

DoubleAnimation rotateAnimation = new DoubleAnimation
{
    From = 0,
    To = 360,
    Duration = TimeSpan.FromSeconds(5),
    RepeatBehavior = RepeatBehavior.Forever
};

rotateTransform.BeginAnimation(RotateTransform.AngleProperty, rotateAnimation);

路径动画

使用 PathAnimation 可以沿着路径移动形状，但 WPF 并未直接提供此类动画，可以通过组合动画和变换来实现。

示例：沿路径移动形状
<Canvas x:Name="myCanvas" Width="400" Height="400">
    <Path x:Name="motionPath" Stroke="Gray" StrokeThickness="1" Data="M 10,100 C 100,0 200,200 300,100" />
    <Ellipse Width="20" Height="20" Fill="Red">
        <Ellipse.RenderTransform>
            <TranslateTransform x:Name="ellipseTransform" />
        </Ellipse.RenderTransform>
    </Ellipse>
    <Canvas.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <BeginStoryboard>
                <Storyboard RepeatBehavior="Forever">
                    <DoubleAnimation Storyboard.TargetName="ellipseTransform" Storyboard.TargetProperty="X"
                                     From="10" To="300" Duration="0:0:5" />
                    <DoubleAnimation Storyboard.TargetName="ellipseTransform" Storyboard.TargetProperty="Y"
                                     From="100" To="100" Duration="0:0:5" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Canvas.Triggers>
</Canvas>

注意：要实现沿路径移动，需要根据路径的具体几何形状手动调整 X 和 Y 的动画值，或使用更高级的方法，如使用 CompositionTarget.Rendering 事件来逐帧更新位置。

7. 事件处理

Shape 控件支持多种用户交互事件，使其可以响应用户的鼠标操作、触摸操作等。

鼠标事件

常用的鼠标事件包括：

  • MouseLeftButtonDown：鼠标左键按下。
  • MouseLeftButtonUp：鼠标左键释放。
  • MouseEnter：鼠标指针进入形状区域。
  • MouseLeave：鼠标指针离开形状区域。
  • MouseMove：鼠标在形状区域移动。
XAML 示例
<Rectangle Width="100" Height="50" Fill="LightBlue" Stroke="Blue" StrokeThickness="2"
           MouseEnter="Rectangle_MouseEnter"
           MouseLeave="Rectangle_MouseLeave"
           MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" />
C# 代码示例
private void Rectangle_MouseEnter(object sender, MouseEventArgs e)
{
    Rectangle rect = sender as Rectangle;
    rect.Fill = Brushes.LightGreen;
}

private void Rectangle_MouseLeave(object sender, MouseEventArgs e)
{
    Rectangle rect = sender as Rectangle;
    rect.Fill = Brushes.LightBlue;
}

private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    MessageBox.Show("Rectangle clicked!");
}

触摸与手写事件

Shape 控件也可以响应触摸事件和手写输入事件，如 TouchDown、TouchMove、TouchUp 等。

示例：触摸事件
<Ellipse Width="100" Height="100" Fill="Yellow"
         TouchDown="Ellipse_TouchDown"
         TouchMove="Ellipse_TouchMove"
         TouchUp="Ellipse_TouchUp" />
C# 代码示例
private void Ellipse_TouchDown(object sender, TouchEventArgs e)
{
    Ellipse ellipse = sender as Ellipse;
    ellipse.Fill = Brushes.Orange;
}

private void Ellipse_TouchMove(object sender, TouchEventArgs e)
{
    // 处理触摸移动事件
}

private void Ellipse_TouchUp(object sender, TouchEventArgs e)
{
    Ellipse ellipse = sender as Ellipse;
    ellipse.Fill = Brushes.Yellow;
}

8. 使用 Shape 控件的最佳实践

优化性能

  • 减少过度绘制：尽量避免在视图中添加过多的形状，尤其是复杂的 Path 控件。必要时使用 DrawingVisual 来优化绘图性能。

  • 使用 Freeze 优化资源：对于不可变的 Brush 和 Geometry 对象，可以调用 Freeze 方法以提高性能。

    SolidColorBrush brush = new SolidColorBrush(Colors.Blue);
brush.Freeze();
rectangle.Fill = brush;

响应式设计

  • 使用 Viewbox：将 Shape 控件放入 Viewbox 中，使其能够根据容器大小自动缩放。

    <Viewbox>
    <Canvas Width="200" Height="200">
        <Ellipse Width="100" Height="100" Fill="Red" />
    </Canvas>
</Viewbox>

  • 绑定尺寸：使用数据绑定将 Shape 的 Width 和 Height 属性绑定到父容器或其他动态源。

    <Rectangle Fill="LightBlue" Stroke="Blue" StrokeThickness="2"
           Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Grid}}"
           Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=Grid}}" />

资源与样式复用

  • 定义样式：在资源字典中定义 Shape 的样式，便于复用和维护。

    <Window.Resources>
    <Style x:Key="StyledRectangle" TargetType="Rectangle">
        <Setter Property="Fill" Value="LightBlue" />
        <Setter Property="Stroke" Value="Blue" />
        <Setter Property="StrokeThickness" Value="2" />
    </Style>
</Window.Resources>

<Rectangle Width="100" Height="50" Style="{StaticResource StyledRectangle}" />

  • 使用控件模板：为 Shape 控件定义自定义模板，以实现更复杂的外观。

    <Style TargetType="Ellipse">
    <Setter Property="Fill" Value="Yellow" />
    <Setter Property="Stroke" Value="Orange" />
    <Setter Property="StrokeThickness" Value="3" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Ellipse">
                <Ellipse Fill="{TemplateBinding Fill}" Stroke="{TemplateBinding Stroke}" StrokeThickness="{TemplateBinding StrokeThickness}" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

9. 综合示例

以下是一个综合示例，展示了如何结合多种 Shape 控件、样式、变换和动画创建一个简单的动态图形界面。

XAML 示例

<Window x:Class="WpfShapeDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfShapeDemo"
        Title="Shape Demo" Height="500" Width="800">
    <Grid>
        <Grid.Resources>
            <Style x:Key="AnimatedEllipseStyle" TargetType="Ellipse">
                <Setter Property="Fill">
                    <Setter.Value>
                        <SolidColorBrush Color="Yellow" />
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <EventTrigger RoutedEvent="Ellipse.Loaded">
                        <BeginStoryboard>
                            <Storyboard RepeatBehavior="Forever" AutoReverse="True">
                                <ColorAnimation Storyboard.TargetProperty="Fill.Color"
                                                To="Orange" Duration="0:0:3" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Style.Triggers>
            </Style>
        </Grid.Resources>

        <Canvas>
            <!-- 旋转的矩形 -->
            <Rectangle Width="100" Height="50" Fill="LightBlue" Stroke="Blue" StrokeThickness="2"
                       Canvas.Left="50" Canvas.Top="50">
                <Rectangle.RenderTransform>
                    <RotateTransform x:Name="rotatingRectangle" Angle="0" CenterX="50" CenterY="25" />
                </Rectangle.RenderTransform>
            </Rectangle>

            <!-- 动画椭圆 -->
            <Ellipse Width="100" Height="100" Style="{StaticResource AnimatedEllipseStyle}"
                     Canvas.Left="200" Canvas.Top="50" />

            <!-- 多边形 -->
            <Polygon Points="300,10 350,100 250,100" Fill="Purple" Stroke="Black" StrokeThickness="2"
                     Canvas.Left="400" Canvas.Top="50" />

            <!-- 线条 -->
            <Line X1="0" Y1="0" X2="150" Y2="150" Stroke="Green" StrokeThickness="3"
                  Canvas.Left="600" Canvas.Top="50" />

            <!-- 路径 -->
            <Path Stroke="Red" StrokeThickness="2" Fill="Pink" Data="M 10,10 L 100,10 L 100,100 Z"
                  Canvas.Left="50" Canvas.Top="200">
                <Path.RenderTransform>
                    <ScaleTransform ScaleX="1" ScaleY="1" />
                </Path.RenderTransform>
            </Path>
        </Canvas>

        <!-- 旋转动画 -->
        <Grid.Triggers>
            <EventTrigger RoutedEvent="Grid.Loaded">
                <BeginStoryboard>
                    <Storyboard RepeatBehavior="Forever">
                        <DoubleAnimation Storyboard.TargetName="rotatingRectangle" Storyboard.TargetProperty="Angle"
                                         From="0" To="360" Duration="0:0:5" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Grid.Triggers>
    </Grid>
</Window>

C# 代码示例（MainWindow.xaml.cs）

using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace WpfShapeDemo
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // 为路径添加缩放动画
            Path path = new Path
            {
                Stroke = Brushes.Red,
                StrokeThickness = 2,
                Fill = Brushes.Pink,
                Data = Geometry.Parse("M 10,10 L 100,10 L 100,100 Z"),
                Canvas.Left = 50,
                Canvas.Top = 200
            };

            ScaleTransform scaleTransform = new ScaleTransform(1, 1);
            path.RenderTransform = scaleTransform;
            path.RenderTransformOrigin = new Point(0.5, 0.5);

            this.FindName("canvas"); // 假设 Canvas 有 x:Name="canvas"
            Canvas canvas = (Canvas)this.Content.FindName("canvas");
            canvas.Children.Add(path);

            DoubleAnimation scaleAnimation = new DoubleAnimation
            {
                From = 1,
                To = 1.5,
                Duration = TimeSpan.FromSeconds(2),
                AutoReverse = true,
                RepeatBehavior = RepeatBehavior.Forever
            };

            scaleTransform.BeginAnimation(ScaleTransform.ScaleXProperty, scaleAnimation);
            scaleTransform.BeginAnimation(ScaleTransform.ScaleYProperty, scaleAnimation);
        }
    }
}

注意：上述示例中，路径的缩放动画在代码中添加，矩形的旋转动画在 XAML 中通过 Storyboard 实现。

10. 总结

WPF 的 Shape 控件为开发者提供了强大且灵活的绘图工具，能够创建丰富的图形界面和视觉效果。通过掌握各类 Shape 控件的使用方法、样式设置、变换、动画和事件处理，您可以在 WPF 应用程序中实现各种动态和交互式的图形效果。

关键要点总结：

  • 多样的形状选择：Line、Rectangle、Ellipse、Polygon、Polyline、Path 等，满足不同的绘图需求。

  • 一致的属性体系：Fill、Stroke、StrokeThickness 等属性在所有 Shape 控件中通用，简化了样式设置。

  • 支持变换与动画：通过 RenderTransform 和 Storyboard，可以对形状进行动态的变换和动画效果。

  • 事件驱动的交互：支持鼠标、触摸等事件，使图形界面具有更高的互动性。

  • 资源与样式复用：通过资源字典和样式，提升代码的复用性和维护性。

  • 性能优化：合理使用绘图技术和资源管理，确保应用程序的流畅性和响应性。

通过不断实践和探索，您将能够充分利用 WPF 的 Shape 控件，打造出美观、动态且高效的图形用户界面。

标签：动画,控件,示例,形状,Shape,new,WPF
From： https://blog.csdn.net/weixin_39604653/article/details/142032330

相关文章

  • WPF UI线程死锁的各种场景
    WPFUI线程死锁的场景通常出现在多线程操作时，特别是当后台线程试图与UI线程交互、更新界面或同步执行任务时。如果没有正确处理线程间的资源访问或同步问题，UI线程可能会被阻塞，导致界面无响应。以下是常见的WPFUI线程死锁场景，以及如何避免这些问题的建议。1.使用Dispatche......
  • visualstudio 工具箱如何批量加载devexpress控件？
     1.DevExpress简单介绍        DevExpress是一套功能强大的‌.NET用户界面控件开发套包，广泛应用于企业内容管理、成本管控、进程监督、生产调度等领域。以下是DevExpress在不同平台和控件中的使用方法：DevExpressWinForms控件的使用方法‌TreeList控件‌：设置Dock属......
  • WPF datagrid datagridtemplatecolumn image mouseenter show the image in big windo
    <DataGridTemplateColumn><DataGridTemplateColumn.CellTemplate><DataTemplate><ImageSource="{BindingImgUrl}"Width="200"Height="500"><behavior:Inter......
  • wpf 触屏手势 触摸
    IsManipulationEnabled通过控件的IsManipulationEnabled属性设置为true激活触屏手势操作(ManipulationStarting、ManipulationStarted、ManipulationDelta、ManipulationInertiaStarting、ManipulationCompleted)<Windowx:Class="WpfManipulation.MainWindow"xmlns......
  • wpf inkcanvas 多点触控 解决部分屏幕画笔笔迹在绘制时会多出一段的问题
    添加一个支持多点触摸的画布///<summary>///支持多点触摸的InkCanvas///</summarypublicclassMultiTouchCanvas:FrameworkElement{privateInkCanvasProxy_inkCanvas=newInkCanvasProxy();privateGridtransparentOverlay=n......
  • [SDK]-菜单 和 树控件
    前言各位师傅大家好，我是qmx_07，今天给大家讲解菜单和树控件的相关知识菜单认识菜单及创建自定义菜单栏资源文件->项目名.rc->Menu这是系统提供的默认菜单，也可以往里面添加修改内容以下是自定义菜单栏：创建视图，修改菜单选项，需要绑定到注册窗口通过创建自定义视......
  • WPF DataGridTemplateColumn.CellTemplate Command CommandParameter
    <DataGridTemplateColumnHeader="Image"><DataGridTemplateColumn.CellTemplate><DataTemplate><ButtonCommand="{BindingDataContext.EnterCmd,RelativeSource={RelativeSourceFindAn......
  • 【Qt】解决设置QPlainTextEdit控件的Tab为4个空格
    前言PyQt5是一个用于创建跨平台桌面应用程序的Python绑定集合，它提供了对Qt应用程序框架的访问。用于开发具有图形用户界面（GUI）的应用程序，以及非GUI程序。PyQt5使得Python开发者可以使用Qt的丰富功能来构建应用程序。QPlainTextEdit是Qt框架中的一个纯文本编辑器......
  • 河南省12123公安厅临牌打印如何下载打印控件
    公安交通管理综合应用平台打印控件安装失败，河南省公安厅临牌打印如何下载打印控件，12123临牌系统怎么安装打印控件？   关于“12123河南省公安厅临牌打印如何下载打印控件怎么安装打印控件”的问题，实际上，交管12123APP主要用于在线申请临时号牌、查询车辆信息、处理交通违......
  • 不可不知的WPF几何图形（Geometry）
    在软件行业，经常会听到一句话“文不如表，表不如图”说明了图形在软件应用中的重要性。同样在WPF开发中，为了程序美观或者业务需要，经常会用到各种个样的图形。今天以一些简单的小例子，简述WPF开发中几何图形（Geometry）相关内容，仅供学习分享使用，如有不足之处，还请指正。 什么是几何图形（G......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99