dir.by  
  Поиск  
Компьютер, программы
WPF. Windows Presentation Foundation (standalone .exe file)
 Пример "Рисуем картинку с движением и анимацией sprite на Canvas" C# WPF 
посмотрели 13043 раз
обновлено: 23 June 2024
Скачать: WpfApp1_moveSprite.zip ...
размер: 57 kb

Шаг 1. Создаем новый проект
Шаг 2. Добавим картинку в проект и помечаем как Resource
Сохраните эту картинку к себе на компьютер
Скачать ...
Шаг 3. Напишем код
  C#     Файл MainWindow.xaml.cs
using System.Drawing;
using System.IO;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Resources;

namespace WpfApp1
{
     public class MyCanvas : Canvas
     {
          protected System.Drawing.Image _image1;
          protected System.Windows.Point _imagePos1;
          protected System.Windows.Size _imageSize1;
          protected int _imageGoXStep1;

          // sprit
          int SpriteIndex;
          Rectangle[] SpriteOffsets;

          public void LoadFromResource()
          {
               // load file
               StreamResourceInfo sri = Application.GetResourceStream(new Uri("dog_run.png", UriKind.Relative));
               if (sri != null)
               {
                    using (Stream s = sri.Stream)
                    {
                         _image1 = System.Drawing.Image.FromStream(s);
                    }
               }

               // set sprite rectangle
               SpriteIndex = 0;
               SpriteOffsets = new Rectangle[]{
                         new Rectangle(244, 3, 57, 42),
                         new Rectangle(304, 4, 54, 39),
                         new Rectangle(363, 4, 57, 38),
                         new Rectangle(420, 1, 55, 40),
                         new Rectangle(483, 4, 57, 36),
                         new Rectangle(542, 4, 57, 38),
               };

               // position
               _imagePos1 = new System.Windows.Point(10, 15);
               _imageSize1 = new System.Windows.Size(50, 50);
               _imageGoXStep1 = 4;
          }

          protected override void OnRender(DrawingContext drawingContext)
          {
               if (SpriteIndex < 0 || SpriteIndex >= SpriteOffsets.Length)
                    SpriteIndex = 0;

               Rectangle rect = SpriteOffsets[SpriteIndex];

               DrawPartImage(drawingContext, _imagePos1, _image1, rect);

               // next index
               SpriteIndex++;
          }

          public void DrawPartImage(DrawingContext drawingContext, System.Windows.Point pos, System.Drawing.Image imageFile, Rectangle part)
          {
               // Вырезаем выбранный кусок картинки
               Bitmap bmpPart = new Bitmap(part.Width, part.Height);
               using (Graphics g = Graphics.FromImage(bmpPart))
               {
                    g.DrawImage(imageFile, new Rectangle(0, 0, part.Width, part.Height), (float)part.X, (float)part.Y, (float)part.Width, (float)part.Height, GraphicsUnit.Pixel);
               }

               // convert to image source
               MemoryStream ms = new MemoryStream();
               ((System.Drawing.Bitmap)bmpPart).Save(ms, System.Drawing.Imaging.ImageFormat.Png);
               BitmapImage bmpImage = new BitmapImage();
               bmpImage.BeginInit();
               ms.Seek(0, SeekOrigin.Begin);
               bmpImage.StreamSource = ms;
               bmpImage.EndInit();

               // draw image
               System.Windows.Size size = new System.Windows.Size(part.Width, part.Height);
               drawingContext.DrawImage(bmpImage, new System.Windows.Rect(pos, size));
          }

          public void MoveObjects()
          {
               _imagePos1.X += _imageGoXStep1;
          }

          public void ReDraw()
          {
               // InvalidateVisual() says Canvas to call OnRender
               InvalidateVisual();
          }
     }

     // MainWindow
     public partial class MainWindow : Window
     {
          protected MyCanvas _myCanvas;
          protected System.Windows.Threading.DispatcherTimer myTimer;
          protected int TimeStepInMilliseconds = 100; // 1/10 second

          public MainWindow()
          {
               InitializeComponent();

               // remove child elements
               Content = null;

               // add Canvas
               _myCanvas = new MyCanvas();
               AddChild(_myCanvas);

               // init my objects
               _myCanvas.LoadFromResource();

               // timer
               myTimer = new System.Windows.Threading.DispatcherTimer();
               myTimer.Tick += new EventHandler(OnMyTimerTick);
               myTimer.Interval = new TimeSpan(0, 0, 0, 0, TimeStepInMilliseconds); // in milli second
               myTimer.Start();
          }

          private void OnMyTimerTick(object sender, EventArgs e)
          {
               _myCanvas.ReDraw();
               _myCanvas.MoveObjects();
          }
     }
}
Шаг 4. Добавим NuGet пакет System.Drawing.Common
Запускаем приложение
Все работает
 
← Previous topic
Example "Drawing a picture with movement on Canvas" C# WPF
 
Next topic →
How to Draw a Line | C# WPF application
 
Your feedback ... 1 Comments
guest
2 March 2020 10:20
Ошибки
admin (2 March 2020 11:01) Какие ошибки? answer
guest (25 October 2023 10:40) крутые answer
user2 (28 October 2024 9:22) Это вообще не крутые ошибки answer
Новичок (2 December 2024 9:31) Я из-за вас два получил answer
   
Your Name
Your comment (www links can only be added by a logged-in user)

  Объявления  
  Объявления  
 
WPF Simple New Application
Creating a New WPF Application | C#
WPF layout
Making a layout with DockPanel and StackPanel in WPF
Events
Example "Get the mouse coordinates when you left-click on TextBlock"| Screen Coordinates and Relative Coordinates | C# WPF application
Example "Get the mouse coordinates when you click the left mouse button on Button"| Screen Coordinates and Relative Coordinates | C# WPF application
Example "Get the mouse coordinates when you left-click on Grid and draw a line"| C# WPF application
Example "When you double-click on Grid, we show the message"| C# WPF application
WPF elements
Label
Example "Setting the text in Label" via c# code | WPF application
FontAwesome icons
Example "I show icons, for the icon I connect the fontawesome5" library | C# WPF application
Example "I make animations for icons, library fontawesome5" | C# WPF application
 <BR>
TextBlock
Example "Set the text in the TextBlock using Binding". Let"s also add double Bindning using INotifyPropertyChanged | C# WPF application
Example "Several TextBlocks (showing the texts) and making the element where mouse (mouse over)" | C# WPF application
Example "Get the mouse coordinates when you left-click on TextBlock"| Screen Coordinates and Relative Coordinates | C# WPF application
Button
Example "Get the mouse coordinates when you click the left mouse button on Button"| Screen Coordinates and Relative Coordinates | C# WPF application
TextBox
Example "Installing and getting text in a TextBox using Binding" | C# WPF application
Example "Set text in TextBox" via c# code | WPF application
 <BR>
TextBox with Place Holder
Example "Showing the Place Holder in TextBox" | WPF application
Example "Showing a Place Holder with an icon in TextBox", for the icon I include the fontawesome5 library | WPF application
 <BR>
TextBox with text validation
Example "Set the text in the TextBox using Binding and do validation (if the text is not correct)" | C# WPF application
 <BR>
ComboBox
Example "In ComboBox, we do text editing. Getting the text using Binding" | C# WPF application
 <BR>
ItemsControl
Example "ItemsControl, button and click handler" | WPF application
Grid
What is Grid in WPF
How to Add RowDefinition, ColumnDefinition to a Grid (with the mouse in the XAML design editor) | C# WPF application
Adding vertical scrolling | WPF application
DataGrid
Example "DataGrid doing bind data", button and click handler in DataGrid, text alignment in DataGrid, scrolling | WPF application
How do I scroll for DataGrid? | C# WPF application
Scrolling for DataGrid (so that scrolling works when we spin the mouse wheel and the mouse is outside the scroll bar) | C# WPF application
How do I color row when I click on row (change background for selected row) in DataGrid? | C# WPF application
How do I highlight a row DataGrid (make background) ? | C# WPF application
Example "DataGrid: sorting the column according to our own algorithm (Custom Sort)" | WPF application
DataGrid inside DataGrid
Example of an employee portfolio with task descriptions: "DataGrid inside DataGrid using RowDetailsTemplate" | WPF application
 <BR>
ListView
Example "In the ListView, expand the column when adding data (auto column width)" | WPF application
Example "In the ListView, we use ItemTemplate DataTemplate" | WPF application
 <BR>
ScrollViewer
Adding vertical scrolling | WPF application
How do I scroll for DataGrid? | C# WPF application
Scrolling for DataGrid (so that scrolling works when we spin the mouse wheel and the mouse is outside the scroll bar) | C# WPF application
Example "Do ScrollBar less(more) in ScrollViewer" | C# WPF application
Resource file
Add an image (jpg, bmp, png) to the project and mark it as Resource | C# WPF application
Image
In the Image element, show the image (jpg, bmp, png) from Resource | C# WPF application
Select the image (jpg, bmp, png) from the computer and show it in the Image element. Saving the image to the database | C# WPF application
Example "In the Image element, make a Binding for Source" | C# WPF application
Example "Convert the base64 text to a Bitmap image and show it in the Image element" | C# WPF application
Example "Open an SVG file and show the image in the Image element" | C# WPF application
 <BR>
Canvas
Example "Create a Canvas and draw a picture" C# WPF
Example "Drawing a picture with movement on Canvas" C# WPF
Example "Drawing a picture with motion and sprite animation on Canvas" C# WPF
 <BR>
Line
How to Draw a Line | C# WPF application
Example "Create and draw a line by left-clicking on Grid"| Grid Line | C# WPF application
Convert the image to XAML Path Geometry
Convert SVG to XAML (using Adobe Illustrator), populate the Path Data Geometry, show the lines on the screen | C# WPF application
Convert SVG to XAML (using Dias SVG to UWP XAML Converter), populate the Path Data Geometry, show the lines on the screen | C# WPF application
How to Convert PNG to SVG to XAML | C# WPF application
Converter SVG to XAML | WPF C#
How to Convert XAML to SVG | C# WPF application
ViewBox
Example "ViewBox Binding for Left, Top, Width, Height, ContetnPresenter binding" | C# WPF application
Width by percentage
Divide the screen vertically (by width) into 2 equal parts of the screen (width1 = 50%, width2 = 50%), use Grid | C# WPF application
Split the screen vertically (by width) into 2 parts (width1 = 70%, width2 = 30%), using Grid | C# WPF application
Example "Set the width of the element as a percentage of the width of the parent element" (width in percentage), write your IValueConverter | C# WPF application
Database (Entity Framework)
Entity Framework in a WPF application. Using Code First (we write c# code, and the tables in the database are created by ourselves)
Creating Your WPF Elements
Example "Create your own WPF element using Style and a new xaml file. The new element is: at the top Title, at the bottom the text in the frame. Using Binding | C# WPF application
Example "Create your new WPF element with your own properties in the new cs and xaml files. In WPF, a new element: Title at the top, text at the bottom, and in the box | C# WPF application
WPF application with Prism library (MVVM design pattern)
Create a new WPF application with Prism Unity (splitting the project into Services, Views, ViewModels folders). MVVM (Model-View-ViewModel) Patern | C#
WPF application with Prism Unity. In the Tab app and splitting into separate xamls using Region.
WPF application with Locator (MVVM design pattern)
Creating a new WPF application with Locator (dividing the project into Views, ViewModels folders)
How do I add Dependency Injection, boot from appsettings.json in a new WPF application?
Automated Tests
Writing an automated test for a WPF C# application (using Nuget.Appium and the AutomationProperties.AutomationId property)
Interview Questions
What is the difference between static resource and dynamic resource? | WPF C#
Additional topics, questions
Open the properties window for a graphic element in WPF application C#
Errors
Error "To run this application, you must install .NET. Would you like to download it now?" | I run WPF the application on C#
Books
WPF Study Books

  Ваши вопросы присылайте по почте: info@dir.by