dir.by  
  Search  
Programming, development, testing
WPF. Windows Presentation Foundation (отдельное приложение exe файл)
Пример "Рисуем картинку с движением на Canvas" C# WPF
  Looked at 8820 times       Comments 20  
 Last Comment: (8 April 2022 8:48) понял, спасибо) read...       Write a comment...
 Пример "Рисуем картинку с движением на Canvas" C# WPF 
last updated: 23 June 2024
Скачать: WpfApp1_imageMove.zip ...
размер: 10 kb

Шаг 1. Создаем новый проект
Шаг 2. Добавим картинку в проект и помечаем как Resource
Сохраните эту картинку к себе на компьютер
Скачать ...
Выбираем картинку с вашего компьютера
Шаг 3. Напишем код
В файле MainWindow.xaml.cs
Сделал свой класс MyCanvas от Canvas
  C#  
public class MyCanvas : Canvas
{
     protected BitmapImage _imageFile1;

     ...

     public void LoadFromResource()
     {
          // load file from resource
          string pathImage = "pack://application:,,,/WpfApp1;component/tree.jpg";
          _imageFile1 = new BitmapImage(new Uri(pathImage, UriKind.Absolute));

          ...
     }

     ...

}


Указываю путь к картинке из Resource
string pathImage = "pack://application:,,,/WpfApp1;component/tree.jpg";


На заметку!
Путь к картинке из Resource это URI в таком общем виде:
pack://application:,,,/[название библиотеки];component/[путь к картинке]
 
При запуске приложения создается MyCanvas и добавляется на главное окно
  C#  
     // MainWindow
public partial class MainWindow : Window
{
     protected MyCanvas _myCanvas;

     ...

     public MainWindow()
     {
          InitializeComponent();

          ...

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


          ...
     }
}
 
Посмотрим весь код:
  C#     Файл MainWindow.xaml.cs
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Imaging;

namespace WpfApp1
{
     public class MyCanvas : Canvas
     {
          protected BitmapImage _imageFile1;
          protected Point _imagePos1;
          protected Size _imageSize1;
          protected int _imageGoXStep1;

          public void LoadFromResource()
          {
               // load file
               string pathImage = "pack://application:,,,/WpfApp1;component/tree.jpg";
               _imageFile1 = new BitmapImage(new Uri(pathImage, UriKind.Absolute));
               _imagePos1 = new Point(10, 15);
               _imageSize1 = new Size(50, 50);
               _imageGoXStep1 = 1;
          }

          protected override void OnRender(DrawingContext drawingContext)
          {
               drawingContext.DrawImage(_imageFile1, new System.Windows.Rect(_imagePos1, _imageSize1));
          }

          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);

               // load image
               _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();
          }
     }
}
 
← Previous topic
Пример "Создаем Canvas и рисуем картинку" C# WPF
 
Next topic →
Пример "Рисуем картинку с движением и анимацией sprite на Canvas" C# WPF
 
Your feedback ... 5 Comments
guest
7 April 2022 4:46
А как обрезать картинку из нескольких картинок? Как в гифке имеем 5 картинок.
Только нужно обрезать каждую часть и вывести на экран в отдельные image.
guest (7 April 2022 4:51) Чуть подкорректирую вопрос.
Есть картинка, в ней 5 иконок.
Эти 5 иконок нужно разместить на разные image1,image2...image5.
Как это можно реализовать? Гуглю уже сутки, ничего найти не могу.
Через <Image.Clip> не выходит сделать. Ибо там вначале картинка загружается, а потом уже редактируется, идей вообще не осталось :(
answer
admin (7 April 2022 9:24) Есть картинка, в ней 5 иконок.
Вопрос: картинка это файл с каким расширением jpg? ico? png?
answer
guest (7 April 2022 10:57) png, но разве есть разница? answer
admin (7 April 2022 11:13) Мне нужно по работе делать свою задачу поэтому в кратце буду писать как я бы делал. А потом подробнее.

Предлагаю вот такой алгоритм в кратце:

1) Загрузить исходную png картинку в System.Drawing.Image imageSource

2) Кусочки
      a) Вырезаем 1-ый кусок картинки из imageSource т.е. создаем BitmapImage bmpImage1
      b) Вырезаем 2-ой кусок картинки из imageSource т.е. создаем BitmapImage bmpImage2
      c) Вырезаем 3-ий кусок картинки из imageSource т.е. создаем BitmapImage bmpImage3
      d) Вырезаем 4-ый кусок картинки из imageSource т.е. создаем BitmapImage bmpImage4
      e) Вырезаем 5-ый кусок картинки из imageSource т.е. создаем BitmapImage bmpImage5
      
3) Создаем
      a) System.Drawing.Image image1 используя bmpImage1
      b) System.Drawing.Image image2 используя bmpImage2
      c) System.Drawing.Image image3 используя bmpImage3
      d) System.Drawing.Image image4 используя bmpImage4
      e) System.Drawing.Image image5 используя bmpImage5

Если есть вопросы в реализации какй-то части пиши
answer
guest (7 April 2022 11:34) Я разобрался +- как это сделать, но встала другая проблема.
Мне нужно изменить у 3 image картинки на другие, при клике, пытался передать через Binding, но тупо не понимаю как правильно забиндить image и как правильно к нему в коде обратиться.
Ибо Binding имя он не видит, на x:Name(class1) он тоже не отвечает.
Писал так: class1.ViewBox = (0,0,10,10); но тут ошибка.
Вообще не понимаю как программно можно viewbox поменять
answer
admin (7 April 2022 11:46) Чтобы сделать BindImage нужно в cs файле создать переменную вот так:
public ImageSource myImg { get; set; }

еще добавить в код DataContext:
this.DataContext = this;

А в xml файле указать Image вот так:
<Image Source="{Binding myImg}"/>

Использовать x:Name не очень хороший стиль, лучше использовать Binding

Ниже пример Binding изображения на xaml Image:
answer
admin
7 April 2022 12:02
admin
7 April 2022 12:04
admin
7 April 2022 12:09
По поводу ViewBox его можно добавить в этот пример и програмно пробовать поменять но это если надо....
guest (7 April 2022 21:44) Я именно с ViewBox разобраться не могу, вообще не получается изменить координаты из кода answer
guest (7 April 2022 22:28) Всё, разобрался как добавить, спасибо за помощь! answer
guest (7 April 2022 22:35) Хотя мб не совсем правильно сделал, все же посмотрел бы на ваш код answer
guest (7 April 2022 22:43) Когда привязываю 2 значения, они заменяют друг друга и вместе на ставятся на одну картинку, пытаюсь заменить ViewBox и Content answer
admin (8 April 2022 0:57) Фильм смотрел. Попробую добавить Binding Viewbox с Content: answer
admin (8 April 2022 1:06) answer
admin (8 April 2022 1:08) answer
admin (8 April 2022 1:12) Надеюсь написал то что нужно было answer
admin
8 April 2022 1:42
Binding Viewbox с Content и X,Y:
guest (8 April 2022 8:48) понял, спасибо) answer
   
Your Name
Your comment (www links can only be added by a logged-in user)

  Объявления  
  Объявления  
 
WPF простое новое приложение
Создаем новое WPF приложение | C#
WPF layout
Делаем layout с DockPanel и StackPanel в WPF
События
Пример "Получаем координаты мыши при нажатии левой клавишей мыши на TextBlock"| координаты экрана и относительные координаты | C# WPF приложение
Пример "Получаем координаты мыши при нажатии левой клавишей мыши на Button"| координаты экрана и относительные координаты | C# WPF приложение
Пример "Получаем координаты мыши при нажатии левой клавишей мыши на Grid и рисуем линию"| C# WPF приложение
Пример "При двойном нажатии левой клавишей мыши на Grid показываем сообщение"| C# WPF приложение
WPF элементы
Label
Пример "Устанавливаем текст в Label" через c# код | WPF приложение
иконки FontAwesome
Пример "Показываю иконки, для иконки подключаю библиотеку fontawesome5" | C# WPF приложение
Example "I make animations for icons, library fontawesome5" | C# WPF application
 
TextBlock
Пример "Устанавливаем текст в TextBlock используя Binding". Еще добавим двойной Bindning используя INotifyPropertyChanged | C# WPF приложение
Пример "Несколько TextBlock (показываем тексты) и делаем так чтобы при mouse move выделялся элемент где мышка (mouse over)" | C# WPF приложение
Пример "Получаем координаты мыши при нажатии левой клавишей мыши на TextBlock"| координаты экрана и относительные координаты | C# WPF приложение
Button
Пример "Получаем координаты мыши при нажатии левой клавишей мыши на Button"| координаты экрана и относительные координаты | C# WPF приложение
TextBox
Пример "Устанавливаем и получаем текст в TextBox используя Binding" | C# WPF приложение
Пример "Устанавливаем текст в TextBox" через c# код | WPF приложение
 
TextBox с Place Holder
Пример "Показываем Place Holder в TextBox" | WPF приложение
Пример "Показываем Place Holder с иконкой в TextBox", для иконки подключаю библиотеку fontawesome5 | WPF приложение
 
TextBox с проверкой текста (валидация)
Пример "Устанавливаем текст в TextBox используя Binding и делаем валидацию (если текст не правильный)" | C# WPF приложение
 
ComboBox
Пример "В ComboBox делаем редактирование текста. Получаем текст используя Binding" | C# WPF приложение
 
ItemsControl
Пример "ItemsControl, кнопка и обработчик нажатия" | WPF приложение
Grid
Что такое Grid в WPF
Как добавить RowDefinition, ColumnDefinition в Grid (мышкой в XAML design editor) | C# WPF приложение
В Grid добавляем vertical scrolling | WPF приложение
DataGrid
Пример "DataGrid делаем bind данных", кнопка и обработчик нажатия в DataGrid, выравнивание текста в DataGrid, scrolling | WPF приложение
Как сделать scrolling для DataGrid ? | C# WPF приложение
Scrolling для DataGrid (чтобы скролинг работал когда мы крутим колесо мышки и мышка находится вне scroll bar) | C# WPF приложение
Как выделить row цветом при нажатии на row мышкой (change background for selected row) в DataGrid ? | C# WPF приложение
Как row DataGrid выделить цветом (сделать background) ? | C# WPF приложение
Пример "DataGrid делаем сортировку колонки по своему алгоритму (Custom Sort)" | WPF приложение
DataGrid внутри DataGrid
Пример портфолио сотрудников с описанием задач: "DataGrid внутри DataGrid используя RowDetailsTemplate" | WPF приложение
 
ListView
Пример "В ListView расширяем колонку при добавлении данных (auto column width)" | WPF приложение
Пример "В ListView используем ItemTemplate DataTemplate" | WPF приложение
 
ScrollViewer
В Grid добавляем vertical scrolling | WPF приложение
Как сделать scrolling для DataGrid ? | C# WPF приложение
Scrolling для DataGrid (чтобы скролинг работал когда мы крутим колесо мышки и мышка находится вне scroll bar) | C# WPF приложение
Example "Do ScrollBar less(more) in ScrollViewer" | C# WPF application
Resource файл
Добавляем картинку (jpg, bmp, png) в проект и помечаем как Resource | C# WPF приложение
Image
В элементе Image показываем картинку (jpg, bmp, png) из Resource | C# WPF приложение
Выбираем картинку (jpg, bmp, png) из компьютера и показываем в элементе Image. Сохраняем картинку в базу данных | C# WPF приложение
Пример "В Image элементе делаем Binding для Source" | C# WPF приложение
Пример "Конвертируем текст base64 в картинку Bitmap и показываем в Image элементе" | C# WPF приложение
Пример "Открываем SVG файл и показываем картинку в Image элементе" | C# WPF приложение
 
Canvas
Пример "Создаем Canvas и рисуем картинку" C# WPF
Пример "Рисуем картинку с движением на Canvas" C# WPF
Пример "Рисуем картинку с движением и анимацией sprite на Canvas" C# WPF
 
Line
Рисуем Line (сплошная и штриховая линии) | C# WPF приложение
Пример "Создаем и рисуем линию при нажатии левой клавишей мыши на Grid"| Grid Line | C# WPF приложение
Конвертируем картинку в XAML Path Geometry
Конвертируем SVG в XAML(используя Adobe Illustrator), заполняем Path Data Geometry, показываем линии на экране | C# WPF приложение
Конвертируем SVG в XAML(используя Dias SVG to UWP XAML Converter), заполняем Path Data Geometry, показываем линии на экране | C# WPF приложение
Конвертируем PNG в SVG в XAML | C# WPF приложение
Converter SVG to XAML | WPF C#
Конвертируем XAML в SVG | C# WPF приложение
ViewBox
Пример "ViewBox делаем Binding для Left, Top, Width, Height, ContetnPresenter binding" | C# WPF приложение
Width by percentage
Разделить экран по вертикали (по ширине) на 2 равные части экран (width1 = 50%, width2 = 50%), используем Grid | C# WPF приложение
Разделить экран по вертикали (по ширине) на 2 части (width1 = 70%, width2 = 30%), используем Grid | C# WPF приложение
Пример "Устанавливаем ширину элемента в процентах от ширины родительского элемента" (width in percentage), пишем свой IValueConverter | C# WPF приложение
База данных (Entity Framework)
Entity Framework в приложении WPF. Используем Code First (пишем c# код, а таблицы в базе данных создаются сами)
Создаем свои WPF элементы
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
Пример "Создаем свой новый WPF элемент со своими свойсвами в новом cs и xaml файлах. В WPF новом элементе: вверху Title, снизу текст и в рамке | C# WPF приложение
WPF приложение с библиотекой Prism (MVVM шаблон проектирования)
Создаем новое WPF приложение с Prism Unity (разделение проекта на папки Services, Views, ViewModels). Патерн MVVM (Model-View-ViewModel) | C#
WPF приложение с Prism Unity. В приложении Tab и разделения на отдельные xaml используя Region.
WPF приложение с Locator (MVVM шаблон проектирования)
Создаем новое WPF приложение с Locator (разделение проекта на папки Views, ViewModels)
Как добавить Dependency Injection, загрузку из appsettings.json в новом WPF приложении ?
Автоматические тесты
Пишем автоматический тест для WPF C# приложения (используем Nuget.Appium и свойство AutomationProperties.AutomationId)
Вопросы на собеседованиях
В чем отличие static resource от dynamic resource ? | WPF C#
Дополнительные темы, вопросы
Открываем окно свойств (properties) для графического элемента в WPF приложении C#
Ошибки
Error "To run this application, you must install .NET. Would you like to download it now?" | I run WPF the application on C#
Книги
Книги для изучения WPF

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