C# WPF入门学习主线篇(三十四)—— 图形和动画

news2024/11/7 21:48:21

C# WPF入门学习主线篇(三十四)—— 图形和动画

在这里插入图片描述

图形和动画是WPF的重要组成部分,能够大幅提升应用程序的用户体验。本篇博客将详细介绍WPF中图形和动画的使用方法,涵盖基本图形绘制、动画创建及多媒体的应用。通过本文,你将学习如何利用Shapes、Brushes、Transforms等绘制和处理图形,如何使用Storyboard和各种动画类创建动态效果,以及如何在WPF中集成音频和视频。

一、图形绘制

1. 使用Shapes绘制基本图形

WPF提供了多个Shape类,用于绘制基本图形,如线条、矩形和椭圆。以下是几个常用的图形绘制示例。

1.1 绘制线条
<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Graphics Demo" Height="350" Width="525">
    <Grid>
        <Canvas>
            <Line X1="10" Y1="10" X2="100" Y2="100" Stroke="Black" StrokeThickness="2"/>
        </Canvas>
    </Grid>
</Window>
1.2 绘制矩形
<Canvas>
    <Rectangle Width="100" Height="50" Fill="Blue" Stroke="Black" StrokeThickness="2" Canvas.Left="50" Canvas.Top="50"/>
</Canvas>
1.3 绘制椭圆
<Canvas>
    <Ellipse Width="100" Height="50" Fill="Red" Stroke="Black" StrokeThickness="2" Canvas.Left="200" Canvas.Top="50"/>
</Canvas>

2. 使用Brushes和Transforms

WPF提供了丰富的Brushes和Transforms来处理图形的填充和变换。

2.1 使用Brushes
<Canvas>
    <Rectangle Width="100" Height="50" Canvas.Left="50" Canvas.Top="150">
        <Rectangle.Fill>
            <LinearGradientBrush>
                <GradientStop Color="Yellow" Offset="0"/>
                <GradientStop Color="Orange" Offset="1"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</Canvas>
2.2 使用Transforms
<Canvas>
    <Rectangle Width="100" Height="50" Fill="Green" Stroke="Black" StrokeThickness="2" Canvas.Left="50" Canvas.Top="250">
        <Rectangle.RenderTransform>
            <RotateTransform Angle="45" CenterX="50" CenterY="25"/>
        </Rectangle.RenderTransform>
    </Rectangle>
</Canvas>

二、动画

1. 动画基础

WPF的动画系统可以创建复杂的动画效果,主要通过Storyboard和各种Animation类实现。

1.1 创建简单动画
<Canvas>
    <Rectangle Width="100" Height="50" Fill="Blue" Canvas.Left="50" Canvas.Top="50">
        <Rectangle.Triggers>
            <EventTrigger RoutedEvent="Rectangle.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" From="50" To="300" Duration="0:0:5"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Rectangle.Triggers>
    </Rectangle>
</Canvas>

2. 使用动画创建动态效果

通过组合多个动画,可以实现复杂的动态效果。

<Canvas>
    <Rectangle Width="100" Height="50" Fill="Blue" Canvas.Left="50" Canvas.Top="50">
        <Rectangle.Triggers>
            <EventTrigger RoutedEvent="Rectangle.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" From="50" To="300" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>
                        <DoubleAnimation Storyboard.TargetProperty="(Canvas.Top)" From="50" To="200" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Rectangle.Triggers>
    </Rectangle>
</Canvas>

在这里插入图片描述

三、多媒体

1. 在WPF中使用音频和视频控件

WPF提供了MediaElement控件,用于播放音频和视频文件。

1.1 播放音频
<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Media Player" Height="200" Width="400">
    <Grid>
        <MediaElement Name="audioPlayer" LoadedBehavior="Manual" UnloadedBehavior="Stop" Width="0" Height="0"/>
        <Button Name="playPauseButton" Content="Play" Click="PlayPauseButton_Click" Width="100" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Grid>
</Window>

using System;
using System.Windows;

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        private bool isPlaying = false; // 跟踪播放状态

        public MainWindow()
        {
            InitializeComponent();
            audioPlayer.Source = new Uri("zaijiana.mp3", UriKind.Relative);
        }

        private void PlayPauseButton_Click(object sender, RoutedEventArgs e)
        {
            if (isPlaying)
            {
                audioPlayer.Pause();
                playPauseButton.Content = "Play";
            }
            else
            {
                audioPlayer.Play();
                playPauseButton.Content = "Pause";
            }
            isPlaying = !isPlaying; // 切换播放状态
        }
    }
}

1.2 播放视频
<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Media Demo" Height="350" Width="525">
    <Grid>
        <MediaElement Name="videoPlayer" Source="video.mp4" LoadedBehavior="Manual" UnloadedBehavior="Stop" Width="300" Height="200"/>
        <Button Content="Play Video" Click="PlayVideo_Click" Width="100" Height="30" VerticalAlignment="Bottom"/>
    </Grid>
</Window>
1.3 代码后台播放控制
private void PlayAudio_Click(object sender, RoutedEventArgs e)
{
    audioPlayer.Play();
}

private void PlayVideo_Click(object sender, RoutedEventArgs e)
{
    videoPlayer.Play();
}

四、总结

本文详细介绍了如何在WPF中使用图形和动画,涵盖了基本图形的绘制、动画效果的创建以及多媒体的应用。通过掌握这些技术,你可以创建更为丰富和生动的WPF应用程序,提升用户体验。希望通过本文的讲解,你能更好地理解和应用WPF中的图形和动画功能。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1819450.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Lecture2——最优化问题建模

一&#xff0c;建模 1&#xff0c;重要性 实际上&#xff0c;我们并没有得到一个数学公式——通常问题是由某个领域的专家口头描述的。能够将问题转换成数学公式非常重要。建模并不是一件容易的事&#xff1a;有时&#xff0c;我们不仅想找到一个公式&#xff0c;还想找到一个…

ArcGIS Pro SDK (三)Addin控件 1 按钮类

ArcGIS Pro SDK &#xff08;一&#xff09;Addin控件 目录 ArcGIS Pro SDK &#xff08;一&#xff09;Addin控件1 Addin控件2 ArcGIS Pro 按钮2.1 添加控件2.2 Code 3 ArcGIS Pro 按钮面板3.1 添加控件3.2 Code 4 ArcGIS Pro 菜单4.1 添加控件4.2 Code 5 ArcGIS Pro 分割按钮…

人工智能的潜在威胁:罗曼·扬波尔斯基对AGI的警示

随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;技术正迅速成为人类社会不可或缺的一部分。然而&#xff0c;随着人工智能技术的发展&#xff0c;一些科学家对其潜在的危险表示了担忧。本文将深入探讨计算机科学家罗曼扬波尔斯基对人工智能特别是人工通用智…

Java springboot社区团购系统源码

Java springboot社区团购系统源码-012 环境要求 1.运行环境&#xff1a;最好是java jdk1.8,我们在这个平台上运行的。其他版本理论上也可以。 2.IDE环境&#xff1a;IDEA,Eclipse,Myeclipse都可以。推荐IDEA; 3.tomcat环境&#xff1a;Tomcat7.x,8.X,9.x版本均可 4.硬件环境…

计算机组成原理(六)

0x12345678和12345678H都是指同一个十六进制,也就是12345678&#xff0c;不过是不同的编程语言的写法而已 具体来说&#xff0c;如果有 n 根地址线&#xff0c;计算机可以寻址的内存空间大小是 2^n 字节。 24根地址线&#xff1a; 如果一个系统有24根地址线&#xff0c;意味着它…

上位机图像处理和嵌入式模块部署(f407 mcu类项目开发特点)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 和soc相比较&#xff0c;mcu的项目规模一般不算大。因为&#xff0c;soc项目中&#xff0c;从规划、硬件开发、驱动、应用端、服务器端到测试&…

【论文阅读】-- Omnisketch:高效的多维任意谓词高速流分析

Omnisketch&#xff1a;高效的多维任意谓词高速流分析 摘要1 引言2 预备知识及相关工作3 OMNISKETCH&#xff1a;使用任意谓词估计频率3.1 Sketch S0&#xff1a;Count-Min with rid-sets 用于估计带有谓词的查询3.2 Sketch S1 &#xff08;OmniSketch&#xff09;&#xff1a;…

conda虚拟环境报错总结

创建conda虚拟环境 文章前景&#xff08;小白篇&#xff09;为什么要安装Anaconda&#xff1f;&#xff1f;&#xff1f; Conda创建虚拟环境遇到的错误总结错误1&#xff1a;jupyter 里面没有显示我的虚拟环境怎么办&#xff1f;错误2&#xff1a;配置pycharm的时候conda虚拟环…

【数字化转型,销售先行】销售的数字化转型需要做哪些工作?

引言&#xff1a;销售进行数字化转型的背景主要包括市场环境的快速变化、新技术发展的推动、企业发展的需求以及数据驱动决策的需求。这些背景因素共同促使企业加快数字化转型步伐&#xff0c;以适应市场变化、提升竞争力并实现可持续发展。 销售的数字化转型包含哪些内容&…

python的np.array()函数

1、创建数组 2、 与矩阵相关的函数 3、与排序相关的函数 4、 一元计算函数 5、 多元计算函数 6、 与文件读写相关的函数 7、与数组形状、属性相关的函数 8、 常用计算函数 9、 数组选取:切片和索引 10、np.random相关函数 Numpy常用的20个函数 一…

集成学习 #数据挖掘 #Python

集成学习是一种机器学习方法&#xff0c;它通过结合多个模型的预测结果来提高整体性能和稳定性。这种方法的主要思想是“集合智慧”&#xff0c;通过将多个模型&#xff08;比如决策树、随机森林、梯度提升机等&#xff09;的预测集成起来&#xff0c;可以减少单个模型的过拟合…

重新安装TortoiseGit后提示权限错误问题解决

今天在Windows11系统中下载安装使用TortoiseGit可视化Git工具&#xff0c;进行代码提交管理。 由于电脑之前是一位开发人员在使用&#xff0c;所以曾经安装使用过这个工具。 重新安装好软件后&#xff0c;在coding网站中复制代码路径后&#xff0c;在本地目录通过鼠标右键选择…

视频生成模型 Dream Machine 开放试用;微软将停止 Copilot GPTs丨 RTE 开发者日报 Vol.224

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE&#xff08;Real-Time Engagement&#xff09; 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文…

React 渲染函数render、初始化函数、更新函数运行了两次,原因为何,如何解决? React.StrictMode

文章目录 Intro官网解释解决另一篇官网文章——初始化函数或更新函数运行了两次 Intro 我在用 react 写一个 demo &#xff0c;当我在某个自定义组件的 return 语句之前加上一句log之后&#xff0c;发现&#xff1a;每次页面重新渲染&#xff0c;该行日志都打印了两次&#xf…

加油卡APP开发,汽车加油便捷新方式

随着生活水平的提高&#xff0c;人们对汽车的需求量不断上升&#xff0c;加油成为了大众生活中不可缺少的开销&#xff0c;为节省开销&#xff0c;如何优惠加油成为了大众所追求的事。因此&#xff0c;越来越多的加油卡APP成为了汽车加油市场的发展“主流”。在汽车加油规模上升…

数据结构错题答案汇总

王道学习 第一章 绪论 1.1 3.A 数据的逻辑结构是从面向实际问题的角度出发的&#xff0c;只采用抽象表达方式&#xff0c;独立于存储结构&#xff0c;数据的存储方式有多种不同的选择;而数据的存储结构是逻辑结构在计算机上的映射&#xff0c;它不能独立于逻辑结构而存在。数…

PFC旁路二极管、继电器驱动电路以及PFC主功率

R001和R002以及R003三个电阻作用是限放X电容上的电 整流桥串联两个BJ1和BJ2 电容C3:给整流桥储能&#xff0c;给后续llc供电 PFC工作是正弦波上叠加高频电流 PFC功率部分 2个PFC电感&#xff08;选择两个磁芯骨架小&#xff0c;有利于散热&#xff09;、2个续流二极管&…

Mac 下载并激活IDEA

1.https://3.jetbra.in 打开这个网站,点击第一个网速比较快的连接 2.在新页面顶部有一个蓝色的下载链接文字< jetbra.zip(20220801) >点击下载 3.步骤2打开的页面不要关闭后面还有用 4.在idea官网下载idea对应的版本 https://www.jetbrains.com/idea/download/other.htm…

linux配置用户

一&#xff0c;安装sudo与确保在管理员用户下 apt update apt install sudo -y 切换用户&#xff1a;密码不会显示&#xff0c;一个个输入然后回车。//图中是zfxt-->Stable用户切换 su root //root为用户名 以其他用户执行命令&#xff1a; su root ping baidu.com //su…

不测评不知道,该这款主食冻干嚣张!PR、希喂、扑呀真实测评

主食冻干喂养越来越火了&#xff0c;除了知名的“四大金刚”K9、VE、SC、PR之外&#xff0c;也有像希喂、扑呀这类以营养、高肉含量为切入点的新锐品牌&#xff0c;各大猫粮商更是纷纷推出了自家的主食冻干产品。目前关于主食冻干的讨论也很多&#xff0c;但大多数还是以科普和…