Chapter 4. Displaying and Editing Graphs

Table of Contents

Model-View-Controller Paradigm
Graph Structure
Look-up Support
Working with the Graph Structure
Look-up Support
Working with DefaultGraph
Visual Representation of Graph Elements
Node Styles
Edge Styles
Port Styles
Label Styles
Working with Styles
Creating Custom Styles
Style Renderers
Node Style Renderers
Edge Style Renderers
Port Style Renderers
Label Style Renderers
Port Support
Port Location Model Parameter
Label Support
Label Model Parameter
Node Label Models
Edge Label Models
Generic Label Model
Styles-related Features
Rendering-related Features
View Implementations
Class GraphControl
General Features
Command Support
Scene Graph Addendum
Application-level Features
Class CanvasControl
General Features
Command Support
World and View Coordinates
Content Rectangle and Viewport
Canvas Redraw
Application-level Features
Scene Graph and Canvas Objects
Class GraphOverviewControl
User Interaction
Class GraphViewerInputMode
Element States in Interactions
Interaction Events
Interaction Customization
Class GraphEditorInputMode
General Features
Element States in Interactions
Interaction Events
Interaction Customization
Interactive Editing of Orthogonal Edges
Interactive Snapping of Graph Elements
Edge-to-Edge Connections
Class GraphCommands
Class MainInputMode
Class MoveViewportInputMode
Customizing Input Modes
Customizing User Interaction Behavior
Decorating the Look-up
Tabular Data Presentation
Table Model
Working with the Table Model
Visual Representation
Rows and Columns
User Interaction
Interaction Customization
Tutorial Demo Code
Automatic Layout
Tutorial Demo Code
Printing a Canvas's Content
Scaling and Poster Printing
Animations for Graph Elements
Animation Framework
Tutorial Demo Code
Data Binding for Graph Structures
Data Binding Support Overview
Choosing a Suitable Data Binding Class
Class TreeSource
Binding Properties
Building the Graph Structure
Class GraphSource
Binding Properties
Building the Graph Structure
Class AdjacentNodesGraphSource
Binding Properties
Building the Graph Structure
Class AdjacentEdgesGraphSource
Binding Properties
Building the Graph Structure
Common Features
Hierarchical Organization of General Graphs
Tutorial Demo Code

This chapter shows how to display a graph in a specialized Silverlight control and how user interaction with both graph elements and the control containing a graph is handled. It presents the types that are responsible for the visual representation of graph elements and explains their contribution to the "look and feel" of an application.

Model-View-Controller Paradigm

The yFiles for Silverlight Viewer library component provides user interface (UI) functionality comprising two main aspects, namely the presentation of a graph structure to the user and the interaction of a user with the graph structure.

The Model-View-Controller (MVC) paradigm is reflected in yFiles for Silverlight Viewer, i.e., among the classes there can be distinguished the following three types, each having specific responsibilities:

  • Model classes: hold data specific to the application
  • View classes: present information to the user
  • Controller classes: modify the model

In terms of MVC, the types around interface IGraph and around generic interface IVisualStyle<TModelItem> make up the model which holds data and state. Class GraphControl provides the view which presents the information to the user. Finally, the so-called input modes, i.e., in particular, class GraphEditorInputMode enable convenient modification of the model by means of a variety of supported user gestures.

The respective parts of MVC are further described in the following sections:

Figure 4.1, “Model-View-Controller paradigm in yFiles for Silverlight Viewer” depicts the interdependencies of the three parts. The view (a GraphControl instance) displays the model (consisting of an IGraph and the INode, IEdge, ILabel, etc. model item instances it contains). The view also propagates user interface events to the controller(s) (IInputMode implementations; with GraphEditorInputMode being the most comprehensive). According to these events, the controllers then change state on either view or model.

Figure 4.1. Model-View-Controller paradigm in yFiles for Silverlight Viewer

Model-View-Controller paradigm in yFiles for Silverlight Viewer.