• Guest
HabraHabr
  • Main
  • Users

  • Development
    • Programming
    • Information Security
    • Website development
    • JavaScript
    • Game development
    • Open source
    • Developed for Android
    • Machine learning
    • Abnormal programming
    • Java
    • Python
    • Development of mobile applications
    • Analysis and design of systems
    • .NET
    • Mathematics
    • Algorithms
    • C#
    • System Programming
    • C++
    • C
    • Go
    • PHP
    • Reverse engineering
    • Assembler
    • Development under Linux
    • Big Data
    • Rust
    • Cryptography
    • Entertaining problems
    • Testing of IT systems
    • Testing Web Services
    • HTML
    • Programming microcontrollers
    • API
    • High performance
    • Developed for iOS
    • CSS
    • Industrial Programming
    • Development under Windows
    • Image processing
    • Compilers
    • FPGA
    • Professional literature
    • OpenStreetMap
    • Google Chrome
    • Data Mining
    • PostgreSQL
    • Development of robotics
    • Visualization of data
    • Angular
    • ReactJS
    • Search technologies
    • Debugging
    • Test mobile applications
    • Browsers
    • Designing and refactoring
    • IT Standards
    • Solidity
    • Node.JS
    • Git
    • LaTeX
    • SQL
    • Haskell
    • Unreal Engine
    • Unity3D
    • Development for the Internet of things
    • Functional Programming
    • Amazon Web Services
    • Google Cloud Platform
    • Development under AR and VR
    • Assembly systems
    • Version control systems
    • Kotlin
    • R
    • CAD/CAM
    • Customer Optimization
    • Development of communication systems
    • Microsoft Azure
    • Perfect code
    • Atlassian
    • Visual Studio
    • NoSQL
    • Yii
    • Mono и Moonlight
    • Parallel Programming
    • Asterisk
    • Yandex API
    • WordPress
    • Sports programming
    • Lua
    • Microsoft SQL Server
    • Payment systems
    • TypeScript
    • Scala
    • Google API
    • Development of data transmission systems
    • XML
    • Regular expressions
    • Development under Tizen
    • Swift
    • MySQL
    • Geoinformation services
    • Global Positioning Systems
    • Qt
    • Dart
    • Django
    • Development for Office 365
    • Erlang/OTP
    • GPGPU
    • Eclipse
    • Maps API
    • Testing games
    • Browser Extensions
    • 1C-Bitrix
    • Development under e-commerce
    • Xamarin
    • Xcode
    • Development under Windows Phone
    • Semantics
    • CMS
    • VueJS
    • GitHub
    • Open data
    • Sphinx
    • Ruby on Rails
    • Ruby
    • Symfony
    • Drupal
    • Messaging Systems
    • CTF
    • SaaS / S+S
    • SharePoint
    • jQuery
    • Puppet
    • Firefox
    • Elm
    • MODX
    • Billing systems
    • Graphical shells
    • Kodobred
    • MongoDB
    • SCADA
    • Hadoop
    • Gradle
    • Clojure
    • F#
    • CoffeeScript
    • Matlab
    • Phalcon
    • Development under Sailfish OS
    • Magento
    • Elixir/Phoenix
    • Microsoft Edge
    • Layout of letters
    • Development for OS X
    • Forth
    • Smalltalk
    • Julia
    • Laravel
    • WebGL
    • Meteor.JS
    • Firebird/Interbase
    • SQLite
    • D
    • Mesh-networks
    • I2P
    • Derby.js
    • Emacs
    • Development under Bada
    • Mercurial
    • UML Design
    • Objective C
    • Fortran
    • Cocoa
    • Cobol
    • Apache Flex
    • Action Script
    • Joomla
    • IIS
    • Twitter API
    • Vkontakte API
    • Facebook API
    • Microsoft Access
    • PDF
    • Prolog
    • GTK+
    • LabVIEW
    • Brainfuck
    • Cubrid
    • Canvas
    • Doctrine ORM
    • Google App Engine
    • Twisted
    • XSLT
    • TDD
    • Small Basic
    • Kohana
    • Development for Java ME
    • LiveStreet
    • MooTools
    • Adobe Flash
    • GreaseMonkey
    • INFOLUST
    • Groovy & Grails
    • Lisp
    • Delphi
    • Zend Framework
    • ExtJS / Sencha Library
    • Internet Explorer
    • CodeIgniter
    • Silverlight
    • Google Web Toolkit
    • CakePHP
    • Safari
    • Opera
    • Microformats
    • Ajax
    • VIM
  • Administration
    • System administration
    • IT Infrastructure
    • *nix
    • Network technologies
    • DevOps
    • Server Administration
    • Cloud computing
    • Configuring Linux
    • Wireless technologies
    • Virtualization
    • Hosting
    • Data storage
    • Decentralized networks
    • Database Administration
    • Data Warehousing
    • Communication standards
    • PowerShell
    • Backup
    • Cisco
    • Nginx
    • Antivirus protection
    • DNS
    • Server Optimization
    • Data recovery
    • Apache
    • Spam and antispam
    • Data Compression
    • SAN
    • IPv6
    • Fidonet
    • IPTV
    • Shells
    • Administering domain names
  • Design
    • Interfaces
    • Web design
    • Working with sound
    • Usability
    • Graphic design
    • Design Games
    • Mobile App Design
    • Working with 3D-graphics
    • Typography
    • Working with video
    • Work with vector graphics
    • Accessibility
    • Prototyping
    • CGI (graphics)
    • Computer Animation
    • Working with icons
  • Control
    • Careers in the IT industry
    • Project management
    • Development Management
    • Personnel Management
    • Product Management
    • Start-up development
    • Managing the community
    • Service Desk
    • GTD
    • IT Terminology
    • Agile
    • Business Models
    • Legislation and IT-business
    • Sales management
    • CRM-systems
    • Product localization
    • ECM / EDS
    • Freelance
    • Venture investments
    • ERP-systems
    • Help Desk Software
    • Media management
    • Patenting
    • E-commerce management
    • Creative Commons
  • Marketing
    • Conferences
    • Promotion of games
    • Internet Marketing
    • Search Engine Optimization
    • Web Analytics
    • Monetize Web services
    • Content marketing
    • Monetization of IT systems
    • Monetize mobile apps
    • Mobile App Analytics
    • Growth Hacking
    • Branding
    • Monetize Games
    • Display ads
    • Contextual advertising
    • Increase Conversion Rate
  • Sundry
    • Reading room
    • Educational process in IT
    • Research and forecasts in IT
    • Finance in IT
    • Hakatonas
    • IT emigration
    • Education abroad
    • Lumber room
    • I'm on my way

Quick start with WPF. Part 1. Binding, INotifyPropertyChanged and MVVM

3r33434. Hello! 3r33430. 3r33427.  
3r33434. For various reasons, most of us use desktop applications, at least a browser :) And some of us need to write our own. In this article, I want to go over the process of developing a simple desktop application using the technology 3r339. Windows Presentation Foundation (WPF)
and using the MVVM pattern. Those who wish to continue reading please under the cat. 3r311. 3r373. 3r33430. 3r33427.  
3r33434. I think it is not necessary to say that WPF is the development of Microsoft :) This technology is designed for developing desktop applications for Windows, starting with Windows XP. Why so? This is due to the fact that WPF runs on top of the .NET platform, the minimum requirements of which are Windows XP and later. Unfortunately, WPF does not work on other platforms, although there are chances that this will change in the near future: a WPF-based framework 3r317 is under development. Avalonia 3r373. . 3r33430. 3r33427.  
What is special about WPF? 3r3145. 3r33427.  
3r33434. The two main differences from other WPF tools for building desktop applications: 3r3-3303. 3r33427.  
 
3r33132. The XAML markup language, designed to markup the window interface itself.
 
3r33132. DirectX rendering, hardware graphics acceleration.
 
3r33427.  
3r33434. I will not go into details, because This is not exactly the topic of the article. If interested, then google XAML, WPF rendering, milcore.dll and DirectX :)
3r33427.  
What is this article about? 3r3145. 3r33427.  
3r33434. This article contains an example of an application built on WPF technology: 3r33430. 3r33427.  
 
3r33132. MVVM and INotifyPropertyChanged interface. Copy of text. 3r373.
 
3r33427.  
3r33434. I will try to orient the material of the article to the practical side in the “repeat after me” style with explanations. 3r33430. 3r33427.  
What do we need to repeat the article? 3r3145. 3r33427.  
3r33434. Little experience developing in C # :) At a minimum, you need to understand the syntax of the language well. You will also need a Windows machine (in the examples will be Win 10) with Visual Studio installed on it (in the examples will be 201? there is a free
Community
Version). When you install VS, you will need to enable desktop development support for the .NET platform 3r-3330. 3r33427.  
3r33434. Quick start with WPF. Part 1. Binding, INotifyPropertyChanged and MVVM 3r33430. 3r33427.  
3r33434. Also in this section I will describe the creation of the project. 3r33430. 3r33427.  
3r33434. Run VS, create a new project, select the type of application WPF App (.NET Framework) (you can enter in the search bar in the upper right), call it whatever you like. 3r33430. 3r33427.  
3r33434. 3r3391. 3r33430. 3r33427.  
3r33434. After creating a new project, the interface editor window will open, it looks like
for me. 3r33427.  
3r33434. 3r3-300. 3r33430. 3r33427.  
3r33434. At the bottom there is a markup editor, at the top - a preview of the window interface, but you can change the relative position of the code editor and the interface preview so that they will be arranged in a horizontal order using these buttons (to the right of the two areas): 3r33034. 3r33427.  
3r33434. 3r33430. 3r33427.  
3r3113. Before you start
3r33427.  
3r33434. The elements of the window (also called the control of the word
Control
) Must be placed inside the container or inside another element of the type ContentControl. 3r3155. Container
- This is a special control that allows you to place within yourself several child controls and organize their mutual arrangement. Examples of containers:
3r33427.  
 
3r33132. 3r3155. Grid 3r3416. - allows you to organize the elements in columns and rows, the width of each column or row is configured individually.
 
3r33132. 3r3155. StackPanel
- allows you to arrange child elements in a single row or column.
 
3r33427.  
3r33434. There are other containers. Since the container is also a control, inside the container there can be nested containers containing nested containers and so on. This allows you to flexibly position the controls relative to each other. Also, with the help of containers, we can no less flexibly control the behavior of nested controls when resizing a window. 3r33430. 3r33427.  
3r3144. MVVM and INotifyPropertyChanged interface. Copy of text. 3r3145. 3r33427.  
3r33434.
The result of this example will be an application with two controls, in one of which you can edit the text, and in the other you can only view. Changes from one to another will be transferred synchronously without explicitly copying text using 3r3155. binding (binding)
. 3r33333. 3r33430. 3r33427.  
3r33434. So, we have a newly created project (I called it 3r315415. Ex1 3r3-3416.), Move to the markup editor and first replace the default container (3r31515. 3r3160. 3r3161.
) With 3r3155. 3r3164. 3r33180. 3r31616. . This container will be enough, because we will need to place only two controls one above the other. We explicitly indicate how the components will be located by adding the property
Orientation = "Vertical"
. Add a couple of elements inside the panel stack: a text box and a text box. Since these controls will not contain nested code, you can describe them with a self-closing tag (see the code below). After all the above procedures, the container description code and nested controls should look like this: 3r33030. 3r33427.  
3r33399. 3r33400. 3r3174.
3r3176.
3r3178.
3r33180. 3r3404. 3r3405. 3r33427.  
3r33434. Now focus on the purpose of this example. We want the same text to be synchronously displayed in the text block when typing in the textbox, while avoiding the explicit text copy operation. We will need some kind of binding entity, and it is here that we come to such a thing as
binding (binding)
, which was mentioned above. Linking in WPF terminology is a mechanism that allows you to associate some properties of controls with some properties of a C # class object and perform mutual updating of these properties when one of the parts of the bundle changes (this can work in one, the other, or both sides at once). For those familiar with Qt, you can draw an analogy of slots and signals. In order not to stretch the time, let's move on to the code. 3r33430. 3r33427.  
3r33434. So, for organizing the binding, you need the properties of controls and a certain property of a certain C # class. First, let's look at the XAML code. The text of both controls is stored in the Text property, so we will add a binding for these properties. This is done like this:
3r33427.  
3r33399. 3r33400. 3r3197.
3r-33199. 3r3404. 3r3405. 3r33427.  
3r33434. We made a binding, but for the time being it is not clear to what :) We need an object of some class and some property in this object to which the binding will be performed (as they say, which needs to be bogged down). 3r33430. 3r33427.  
3r33434. So what is this class? This class is called the view model and serves as a link between the view (interface or its parts) and model (model, ie, those parts of the code that are responsible for the application logic. This allows us to separate (to some extent ) the application logic from the interface (view, view) is called 3r31515. Model-View-ViewModel pattern (MVVM) 3r33416. Within WPF, this class is also called 3r?3155. DataContext 3r31616. .3r33030.  
3r33434. However, simply writing a view model is not enough. It is also necessary to somehow notify the binding mechanism that the view model property or the view property has changed. For this there is a special interface
INotifyPropertyChanged
which contains event
PropertyChanged
. We implement this interface as part of the base class 3-333415. BaseViewModel
. In the future, we will inherit all our model views from this base class so as not to duplicate the interface implementation. So, add
to the project. ViewModels
, and in this directory, add the file
BaseViewModel.cs
. We get the following project structure:
3r33427.  
3r33434. 3r33430. 3r33427.  
3r33434. The implementation code for the basic view model is
3r33427.  
3r33399. 3r33400. using System.ComponentModel;
namespace Ex1.ViewModels
{
public class BaseViewModel: INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged (string propertyName = "")
{
PropertyChanged? .Invoke (this, new PropertyChangedEventArgs (propertyName));
}
}
} 3r3405. 3r33427.  
3r33434. Let's create for our class
MainWindow
its view model, inheriting from the base. For this in the same directory
ViewModels
create a file
MainWindowViewModel.cs
In which there will be such code:
3r33427.  
3r33399. 3r33400. namespace Ex1.ViewModels
{
public class MainWindowViewModel: BaseViewModel
{
}
} 3r3405. 3r33427.  
3r33434. Gorgeous! Now we need to add a property to this model that we will bind the text of our controls to. Since this is text, the type of this property should be
string
:
3r33427.  
3r33399. 3r33400. public string SynchronizedText {get; set;} 3r3405. 3r33427.  
3r33434. As a result, we get this code
3r33427.  
3r33399. 3r33400. namespace Ex1.ViewModels
{
public class MainWindowViewModel: BaseViewModel
{
public string SynchronizedText {get; set;}
}
} 3r3405. 3r33427.  
3r33434. So it seems to have done it. It remains to be bent on this property from the view and it is ready. Let's do it right now:
3r33427.  
3r33399. 3r33400.
3r33333. 3r3404. 3r3405. 3r33427.  
3r33434. Nishtyak, we are launching a project, we are typing text in a textbox and nothing happens))) Well, it's okay, in fact, we are going the right way, just have not reached the desired point yet. 3r33430. 3r33427.  
3r33434. I propose to stop for a moment and think about what we are missing. We have a view. Viewmodel too. Properties like zabindili. The desired interface has been implemented. We did a lot of work to copy a pathetic line of text, why do we need this ???!?! 111
3r33427.  
3r33434. Okay, jokes aside. We forgot to create an object view model and something else (more on that later). We have described the class itself, but it does not mean anything, because we do not have objects of this class. Ok, where you need to store a link to this object? Toward the beginning of the example, I mentioned a certain 3r3333334. DataContext
used in WPF. And so, any twist has property
DataContext
to which we can assign a link to our view model. Let's do it. To do this, open the file
MainWindow.xaml
and press F7 to open the code for this view. It is almost empty; it contains only the window class constructor. Add to it the creation of our view model and place it in
DataContext
windows (don't forget to add using with the necessary namespace):
3r33427.  
3r33399. 3r33400. public MainWindow ()
{
InitializeComponent ();
this.DataContext = new MainWindowViewModel ();
} 3r3405. 3r33427.  
3r33434. It was simple, but it is still not enough. Still, when you start the application, no text synchronization occurs. What else needs to be done? 3r33430. 3r33427.  
3r33434. You need to trigger the event
PropertyChanged
when you change the property
SynchronizedText
and inform the view that it should follow this event. So, to trigger an event, modify the view model code:
3r33427.  
3r33399. 3r33400. public class MainWindowViewModel: BaseViewModel
{
private string _synchronizedText;
public string SynchronizedText
{
get => _synchronizedText;
set
{
_synchronizedText = value;
OnPropertyChanged (nameof (SynchronizedText));
}
}
} 3r3405. 3r33427.  
3r33434. What did we do here? We added a hidden field for storing text, wrapped it in an already existing property, and when changing this property, we not only change the hidden field, but also call the 3r3154 method. OnPropertyChanged
, defined in the base view model and causing the
event. PropertyChanged
, declared in the interface
INotifyPropertyChanged
, also implemented in the base view model. It turns out that every time the text changes, an event occurs. PropertyChanged
The property name of the view model that was changed is passed to it. 3r33430. 3r33427.  
3r33434. Well, almost everything, finish line! It remains to indicate to the view that it should listen to the event 3r33415. PropertyChanged
:
3r33427.  
3r33399. 3r33400. 3r3013.
3r3403. 3r3404. 3r3405. 3r33427.  
3r33434. In addition to the fact that we indicated which trigger should be updated, we also indicated in which direction this update is being tracked: from view to view model or vice versa. Since we enter text in the textbox, we are only interested in the changes in the view, so we select the
mode. OneWayToSource
. In the case of a text blockIt is exactly the opposite: we are interested in changes in the view model in order to display them in a view, so we select the
mode. Oneway
. If we needed the changes to be tracked in both directions, it was possible not to indicate 3r3155. Mode
In general, either specify
TwoWay
obviously. 3r33430. 3r33427.  
3r33434. So, run the program, type the text and voi-la! The text changes simultaneously, and we haven't copied anything anywhere! 3r33430. 3r33427.  
3r33434. 3r33434. 3r33430. 3r33427.  
3r33434. Thank you for your attention, to be continued. We will deal with the DataTemplate and the Command pattern. 3r33430.
3r3r434. ! function (e) {function t (t, n) {if (! (n in e)) {for (var r, a = e.document, i = a.scripts, o = i.length; o-- ;) if (-1! == i[o].src.indexOf (t)) {r = i[o]; break} if (! r) {r = a.createElement ("script"), r.type = "text /jаvascript", r.async =! ? r.defer =! ? r.src = t, r.charset = "UTF-8"; var d = function () {var e = a.getElementsByTagName ("script")[0]; e.parentNode.insertBefore (r, e)}; "[object Opera]" == e.opera? a.addEventListener? a.addEventListener ("DOMContentLoaded", d,! 1): e.attachEvent ("onload", d ): d ()}}} t ("//mediator.mail.ru/script/2820404/"""_mediator") () (); 3r33434.

It may be interesting

  • Comments
  • About article
  • Similar news
This publication has no comments.

weber

Author

23-10-2018, 03:25

Publication Date

Development / .NET

Category
  • Comments: 0
  • Views: 303
The digest of interesting materials for
JsonWriterSax is a library for creating
Apache Ignite + Apache Spark Data
Cogear.JS - a modern static site
Upgrading to Windows 1809 deletes all
The native Russian from Xorg to
Write a comment
Name:*
E-Mail:


Comments

Here we introduce our top coupons that will help you for online shopping at discountable prices.Revounts bring you the best deals that slash the bills.If you are intrested in online shopping and want to save your savings then visit our site for best experience.
Today, 08:41

Emma Taylor

Global Dezigns is a Website Development Company in Karachi, Providing services of
website design in karachi
. We are delivering the best partnership across Pakistan. provides a complete range of web development services including web applications, website hosting and maintenance, domain registration, on-page search engine optimization, and website integration with social media platforms such as Facebook, Twitter, LinkedIn, Google Maps, and Google Local Directory. We believe we are well placed to take our knowledge and expertise to the logical next level with the latest web standards.  
  Show/hide text
https://www.globaldezigns.com/



Yesterday, 22:45

mike tomlin

This blog is really great. The information here will surely be of some help to me. Thanks!.mastering physics

Yesterday, 17:57

raymond weber

Coinyspace is the cryptocurrency community and trading forum where members can find any contributors of crypto ecosystem like currencies, exchanges & merchants. Check Out: Bitcoin Merchants
Yesterday, 16:57

noorseo

This is a great high resolution screen which you have shared for the users. Making a website is not an easy task but managing a good website is really a hard work. As far as this website is concerned, I am very happy.https://19216801.1
Yesterday, 16:01

nushra45

Adv
Website for web developers. New scripts, best ideas, programming tips. How to write a script for you here, we have a lot of information about various programming languages. You are a webmaster or a beginner programmer, it does not matter, useful articles will help to make your favorite business faster.

Login

Registration Forgot password