The Model-View-ViewModel Design Pattern

The Model-View-ViewModel (MVVM) pattern helps you to cleanly separate the business and presentation logic of your application from its user interface (UI). Maintaining a clean separation between application logic and UI helps to address numerous development and design issues and can make your application much easier to test, maintain, and evolve. It can also greatly improve code re-use opportunities and allows developers and UI designers to more easily collaborate when developing their respective parts of the application.

Using the MVVM pattern, the UI of the application and the underlying presentation and business logic is separated into three separate classes:

1- The view, which encapsulates the UI and UI logic

2- The view model, which encapsulates presentation logic and state

3- The model, which encapsulates the application’s business logic and data

The MVVM pattern is a close variant of the Presentation Model pattern, optimized to leverage some of the core capabilities of WPF, such as data binding, data templates, commands, and behaviors. In the MVVM pattern, the view interacts with the view model through data binding, commands, and change notification events. The view model queries, observes, and coordinates updates to the model, converting, validating, and aggregating data as necessary for display in the view.

The following illustration shows the three MVVM classes and their interaction.

 

 

 

 

 

 

The View Class

The view’s responsibility is to define the structure and appearance of what the user sees on the screen. Ideally, the code-behind of a view contains only a constructor that calls the InitializeComponent method. The view usually has the following key characteristics:

– The view is a visual element, such as a window, page, user control, or data template.
– The view defines the controls contained in the view and their visual layout and styling.
– The view references the view model through its DataContext property.
– The controls are data bound to properties and commands exposed by the view model.
– The view may customize the data binding behavior between the view and the view model.
– The view defines and handles UI visual behavior, such as animations.
– The view’s code-behind may implement visual behavior that is difficult to express in XAML.

The View Model Class

The view model in the MVVM pattern encapsulates the presentation logic for the view. It has no direct reference to the view or any knowledge about the view’s specific implementation or type. The view model implements properties and commands to which the view can data bind and notifies the view of any state changes through change notification events. The properties and commands that the view model provides define the functionality to be offered by the UI, but the view determines how that functionality is to be rendered.

The view model is responsible for coordinating the view’s interaction with any model classes that are required. Typically, there is a one-to many-relationship between the view model and the model classes. The view model may choose to expose model classes directly to the view so that controls in the view can data bind directly to them. The view model may convert or manipulate model data so that it can be easily consumed by the view.

The view model may also define logical states the view can use to provide visual changes in the UI. The view may define layout or styling changes that reflect the state of the view model. For example, the view model may define a state that indicates that data is being submitted asynchronously to a web service. The view can display an animation during this state to provide visual feedback to the user.

Typically, the view model will define commands or actions that can be represented in the UI and that the user can invoke. A common example is when the view model provides a Submit command that allows the user submit data to a web service or to a data repository. The view may choose to represent that command with a button so that the user can click the button to submit the data. Typically, when the command becomes unavailable, its associated UI representation becomes disabled. The view model usually has the following key characteristics:

– The view model is a non-visual class. It encapsulates the presentation logic.
– The view model is testable independently of the view and the model.
– The view model typically does not directly reference the view.
– The view model implements properties and commands to which the view can data bind.
– The view model notifies the view of any state changes via change notification events:
INotifyPropertyChanged and INotifyCollectionChanged
– The view model coordinates the view’s interaction with the model.
– The view model may define logical states that the view can represent visually to the user.

The Model Class

The model in the MVVM pattern encapsulates business logic and data. Business logic is defined as any application logic that is concerned with the retrieval and management of application data and for making sure that any business rules that ensure data consistency and validity are imposed. To maximize re-use opportunities, models should not contain any use case–specific or user task–specific behavior or application logic.

Typically, the model represents the client-side domain model for the application. The model may also include the code to support data access and caching, though typically a separate data repository or service is employed for this. Often, the model and data access layer are generated as part of a data access or service strategy, such as the ADO.NET Entity Framework, WCF Data Services, or WCF RIA Services.

The model implements the facilities that make it easy to bind to the view. This usually means it supports property and collection changed notification through the INotifyPropertyChanged and INotifyCollectionChanged interfaces. Models classes that represent collections of objects typically derive from the ObservableCollection<T> class, which provides an implementation of the INotifyCollectionChanged interface.

The model may also support data validation and error reporting through the IDataErrorInfo (or INotifyDataErrorInfo) interfaces. These interfaces allow WPF data binding to be notified when values change so that the UI can be updated. The model usually has the following key characteristics:

– Model classes are non-visual classes that encapsulate the application’s data.
– The model classes do not directly reference the view or view model classes.
– The model classes have no dependency on how they are implemented.
– The model classes typically provide property and collection change events through:
INotifyPropertyChanged/INotifyCollectionChanged interfaces.
– The Model classes typically derive from the ObservableCollection<T> class.
– The model classes typically provide data validation and error reporting through:
IDataErrorInfo/INotifyDataErrorInfo.
– The model classes are typically used with a service that encapsulates data access.

ZAM 3D for WPF

 

 

 

 

 

 
 

 
What is ZAM 3D?

ZAM 3D is a 3D XAML Tool for Microsoft Windows .NET 3.5+ Application Development. It provides developers and designers with a quick and easy solution for creating 3D elements for Microsoft Expression Blend and Visual Studio projects. It also acts as a 3ds or dxf to XAML converter. Electric Rain ZAM 3D™ is a full-featured 3D modeling application that enables easy creation, customization and animation of 3D interface elements for Windows .NET 3.5+ based applications. Once a 3D scene is created, ZAM 3D automatically generates the XAML (eXtensible Application Markup Language) markup necessary to convert the 3D elements into a Windows Presentation Foundation “WPF” 3D scene. XAML files created with ZAM 3D can be directly integrated into your application development environment to create rich and engaging user experiences never before possible.

ZAM 3D Interface

The ZAM 3D interface is built to be highly approachable, yet very powerful. It supplies all of the basic modeling features such as primitives, materials, lighting, etc., as well as several 2D to 3D tools like the Extrusion Editor and a Lathe Editor. Furthermore, there is a very robust Advanced Modeling environment that allows full mesh manipulation. For more information on the ZAM 3D interface, please visit the Swift 3D portion of our Website as the functionality is very similar.

Chart FX for WPF

 

 

 

 

 

Chart FX for WPF makes the application experience more enjoyable and intuitive to the user. Chart FX 7 integrates seamlessly into Visual Studio 2010, 2008 and 2005, providing developers with unprecedented data visualization capabilities. Chart FX 7 takes full advantage of the .NET Framework and cutting-edge technologies such as AJAX to create visually-rich, lightweight and secure charts that will enhance your enterprise application’s display layer.

Features:

Chart FX for WPF’s cutting-edge features will unleash new ways of exploring and analyzing your enterprise data.

1-Stylish Visual Attributes
With it’s impressive chart types, animations, motifs, layouts, palettes, borders, markers and multiple axes, Chart FX for WPF allows you to create visually-appealing charts in minutes.
2-Full XAML Support
For the first time ever, both developers and designers will be able to fully “style” chart elements and tightly couple Chart FX for WPF to their application and user interface guidelines.
3-Powerful 3D Engine
Chart FX leverages WPF’s 3D engine to allow users to manipulate any of the chart’s elements and also provide a compelling UI to make analyzing data more intuitive.
4-Innovative User Interactivity
Users can select any of the chart elements they would like to manipulate and provide compelling user interfaces to make the process of analyzing data more powerful and intuitive.
5-Flexible Data Binding
Through the magic of WPF data binding, LINQ and Chart FX, you can easily populate a chart based on other controls, XML files, databases and other underlying data.
6-Seamless IDE Integration
Chart FX for WPF maintains programmability, developer productivity and IDE integration with both Visual Studio 2008 and Expression Blend.

Adobe Flash (SWF) to XAML Export





 

What is Adobe Flash (SWF) to XAML Export Tool?

This tool allows you to directly open a SWF file and browse through its frames one by one. When you have found a frame that you like, you can either export to a XAML file or copy the XAML to the clipboard for easy pasting into your tool of choice.

To get the SWF2XAML tool up-and-running on your system, follow the follwoing steps:

Step 1- Make sure that you have the .NET Framework 3.0 installed on your machine.

Step 2- download SWF2XAML_0.2.zip from the following link: SWF2XAMLExport

Step 3- Extract all of the files to a folder of your choice.

Step 4- Double-click SWF2XAML.exe to run the tool.

Adobe Illustrator to XAML Export

 

 

 

What is the XAMLExport plug-in?

If you use Adobe Illustrator and would like to get your artwork into a WPF or Silverlight application using XAML, you need to use XAMLExport plug-in which works with both the PC and the Mac.
While the plug-in is capable of exporting very complex illustrations, in practice, it is mostly used to convert individual icons or user interface elements. Once assets have been exported from Illustrator, they can be used in a tool like Expression Blend to build a finished application.
The PC version of the plug-in requires Adobe Illustrator CS, CS2, CS3, or CS4. Once you have a compatible version of Illustrator installed:
Download XAMLExport_0.19_PC.zip from the following link: XAML Export  then Copy XAMLExport.aip from the zip file to your Illustrator plug-in folder. For a default installation of Adobe Illustrator CS4, this should be something like C:\Program Files\Adobe\Adobe Illustrator CS4\Plug-ins.
The next time you start Illustrator, you should be able to pull down the File menu, select Export…, and see both XAML for Silverlight (*.XAML) and XAML for WPF (*.XAML) as available selections under Save as type. There are no other options to configure or runtimes to install.

Metro Style App Development Useful Links

Metro Style App Development Useful Links

Metro style apps are designed to leverage special hardware capabilities and context information to create an experience that is tailored for the user. For example, an app that uses sensors to determine your location, delivering content appropriate to that context, while also using an ambient light sensor to adjust the brightness level of the screen. Metro style apps are built using your existing skills and can reuse code assets you already have. If you know web development technologies, you can use HTML5, CSS3, and JavaScript. Or, you can use more traditional programming techniques.

The following links are useful to learn the Metro Style programing model:

1-    Metro Style App Development Official Website

http://msdn.microsoft.com/en-us/library/windows/apps/

2-    Tools for Metro style app development

http://msdn.microsoft.com/en-us/library/windows/apps/br211374%28v=VS.85%29.aspx

3-    Videos of How to Create Metro Style Apps

http://channel9.msdn.com/Events/Build/Build2011

4-    Samples of Metro Style Apps

http://code.msdn.microsoft.com/windowsapps

From C# Learners

5-    Metro Style Apps

http://www.csharplearners.com/category/metro-style-apps/

From MSDN

6-    Metro Style Apps – Walkthroughs

http://msdn.microsoft.com/en-us/library/windows/apps/hh464943.aspx

http://msdn.microsoft.com/en-us/library/hh440545%28v=vs.110%29.aspx

From Code Project

7-    Metro Style Apps

http://www.codeproject.com/KB/WPF/WpfMetro.aspx

http://www.codeproject.com/KB/gadgets/MetroPuzzle.aspx

http://www.codeproject.com/KB/WinRT/MetroStyleToggleW8DevPre.aspx

http://www.codeproject.com/KB/WinRT/AddAppBarXAMLMetroApp.aspx

http://www.codeproject.com/KB/ThirdParty-Reviews/metroimageprocessing.aspx

http://www.codeproject.com/Articles/269351/WinRT-Transitions-Creating-Fast-and-Fluid-Metro-UI.aspx

http://www.codeproject.com/Articles/255730/TweetSearch-A-Cross-platform-Metro-UI-WinRT-and-Si.aspx

From C# Corners

8-    Major characteristics of UI of the Metro style apps

http://www.c-sharpcorner.com/Blogs/7148/what-makes-an-app-a-metro-style-app.aspx

From CodePlex

9-    Metro Applications

http://8metro.codeplex.com/

10-   MP2 Metro

http://mp2metro.codeplex.com/

11-   Metro Pandora

http://metropandora.codeplex.com/

Burke Holland on HTML5 in Tech.Days 2011

On November 15, 2011, Burke Holland presented in Tech.Days 2011 why HTML5 is the biggest and most powerful HTML specification to ever come out of the W3C. He also explained how to add drop shadows to HTML5 objects, how to create rounded corners, how to use custom fonts, and how to animate with CSS.


What are the webfonts?
The licensing, which is one of the biggest problem of using custom fonts, will not be an isuue whenyou are using webfonts. You just need to add a single CSS or script line to your HTML and some configuration and you are all done. Many like WebInk, Typekit, and Fontslive will allow you to use the fonts for a monthly fee. Using these services is very convenient for the casual developer, handing off some of the complications of serving a cross-browser solution. The Google Font API lets you use a small, curated set of freely licensed fonts by just linking to a stylesheet and letting Google handle the cross-browser and performance concerns. The following is a short list of some webfont providers:
1- http://www.fontsquirrel.com
2- http://webfonts.fonts.com
3- http://typekit.com/libraries
4- http://code.google.com/webfonts

Tomorrow Land (aka Mobile)

HTML 5 Useful Resources

Introduction

HTML 5 (HTML+CSS+JS) brings lots of benefits to your web development teams. Each web development consists of at least two groups: Web developers and web designers. Web developers need to know HTML5. They need to know JavaScript and they need to know CSS. Also, web designers need to know mark-up. They need to know HTML5. They need to be able to write CSS and understand web layout and they need to have at least a decent grasp of what JavaScript does and how JavaScript works. Both of these groups need useful training materials, tutorials, samples and demos. This post is introducing 4 main resources to help these groups to learn how or when to use or adopt HTML 5 in their web pages.

Resource 1: HTML 5 Doctor

HTML 5 doctor is a great resource for learning HTML 5. In this website, you see articles relating to HTML5, its semantics, and how to use it right now.
In the “Article Archive” section, a complete list of all HTML 5 related posts grouped accordingly in order to get you started or to help you understand the specification and specific elements a little more.

Resource 2: HTML 5 Cheat Sheet

HTML 5 cheat sheet is a PDF document which includes a list of all currently supported tags, their descriptions, their attributes and their support in HTML 4. ( HTML 5 Cheat Sheet )

Resource 3: HTML 5 Demos

HTML 5 demos is a great selection of HTML 5 demos. Some of the cool demos from this site are listed below:

1- Interactive canvas gradients ( http://html5demos.com/canvas-grad )
2- Geolocation ( http://html5demos.com/geo )
3- Drag and drop ( http://html5demos.com/drag )

Resource 4: HTML 5 Rocks  

HTML 5 rocks contains various samples and demo code. Some of the cool demos from this site are listed below:

1- Video cube ( http://studio.html5rocks.com/#Cube )
2- Page flip ( http://studio.html5rocks.com/#Flip )
3- WebGL Globe ( http://studio.html5rocks.com/#Globe )

Scott Hanselman on Visual Studio 2011 in Tech.Days 2011

On November 15, 2011, Scott Hanselman presented in Tech.Days 2011 the highlights of the editor of Visual Studio 2011 Developer Preview, as well as a few of his own insights about new features in Windows 8, HTML5, Windows Phone, ASP.NET, MVC, and SignalR.


 

 

 

 

 

 

 

 

 

 

Visual Studio 2011 New Editor Features

1- CSS Color Picker
The background color property comes with the color picker popup.

 

 

 

 

 

 

 

 

 

2- Region Block
Region block can be created in the CSS editor.

 

 

 

 

 

 

 

 

3- Extract to User Control
In the HTML editor you have an option called “Extract to User Control” that allows you to refactor your code and put the selected code in a user control.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Comments:

Scott Hanselman: Great post!

What are Metro style apps?

Metro Style Apps
Metro style apps are full screen apps tailored to your users’ needs, tailored to the device they run on, tailored for touch interaction, and tailored to the Windows user interface. Windows helps you interact with your users, and your users interact with your app. R

Your choice of programming languages
You can create your app in the languages you’re most comfortable with: JavaScript with HTML5 and CSS3, or C++/C#/VB with XAML.

New deployment method
Your users can safely and simply install your apps. Removal is just as safe and simple, and won’t lead to degradation of system performance over time.
1- Metro style app packaging: You package your apps for deployment as Metro style app packages. With Metro style apps, all apps are installed per user; they install, update, and uninstall cleanly; and they don’t change the operating system in an irreversible way.
2- Windows Store (not yet released)

New UI and touch-centered input
You can create apps with controls that put your users’ goals first, that support direct manipulation of UI elements.

Localization
You can develop your app once and deploy in multiple locales and multiple languages. Not only that, Windows Developer Preview provides an API that ensures your app responds to users’ language and cultural preferences—like date, time, number, and currency formats—with little to no effort on your part. The end result is a great app with a coherent cultural experience tailored to each user and to all users everywhere. Learn more about Globalizing your app.

Developer tools
With free versions of Microsoft Expression Blend and Microsoft Visual Studio 11 Express for Windows Developer Preview, you get a development environment and templates that help you design, develop, package, debug, and deploy your app.

Copyright © All Rights Reserved - C# Learners