Version

Configuring UI Elements with xamDiagram Commands

Topic Overview

Purpose

This topic explains how to use the commands provided by xamDiagram™ in UI elements such as menus and buttons. For a list of the pre-configured keyboard shortcuts associated with the basic commands, see Configuring Keyboard Shortcuts.

Required background

The following topics are prerequisites to understanding this topic:

Topic Purpose

This topic provides a conceptual overview of the xamDiagram control and its main features and capabilities.

This topic explains the operational logic of the commands available in the xamDiagram control.

This topic explains how to add the xamDiagram control to a WPF application.

Introduction

Configuring UI elements with xamDiagram commands summary

The xamDiagram control supports commands for performing common user operations on its items such as Copy/Paste, Select All, etc., as well as for item editing and showing/hiding its Item Options pane. By default, most of these commands are associated with keyboard shortcuts (see the Configuring Keyboard Shortcuts for details), but they can also be configured to be invoked by a user interaction with another control, e.g. Menu , Button , etc..

The basic diagram operations (Copy, Paste, Delete, Cut, Select All, Undo, Redo) are implemented in the API as ApplicationCommands because the effect of their invoking resembles the expected behavior of any other UI element which may be present in the application. There are also a few commands, such as the ShowOptionsPane, EnterEditMode, and CloseOptionsPane, which carry diagram-specific logic and have been implemented as members of the DiagramCommands class. This separation is reflected in the different ways of accessing the commands from the two groups.

The actions associated with the different commands are applied to the diagram or to any of its items when the control owns the focus and an interaction which invokes that command occurs.

Commands summary chart

The following table summarizes the commands supported by the xamDiagram control and maps them to the pre-configured keyboard shortcuts.

Command Property Details Key

A diagram item can moved in front of the item that is currently over it.

A diagram item can be moved in front of all items.

Ctrl+Shift+F

A diagram item can be copied after it has been selected and the respective keyboard shortcut (or combination) has been applied.

Ctrl+C

The user can cut the currently selected diagram item(s).

Ctrl+X

The user can delete the currently selected diagram item(s).

Del

If a single item is selected, it enters edit mode upon the execution of this command.

If an item is currently being edited, it will exit edit mode upon the execution of this command.

The user can hide the Options pane by pressing the Esc key while it has focus.

Esc

Copied diagram item(s) can be pasted on the surface of the diagram.

Ctrl+V

Redoing an operation re-applies the last operation on (a) diagram item(s) if it has been previously reverted with the Undo command.

Ctrl+Y

For the Select All command to be applied, the diagram must have the focus.

Ctrl+A

A diagram item can moved in behind the item that is currently behind it.

A diagram item can be moved behind all other items.

Ctrl+Shift+B

The user can show the Options pane by clicking the gear-like icon which appears upon diagram item’s/items’ selection if the visibility of the Options pane has been enabled.

Executes the EnterEditMode or the ExitEditMode commands depending on whether there is an edited item in the diagram.

F2

Applying Undo causes the last operation applied to be reverted and all affected objects – restored to their previous state.

Ctrl+Z

Configuring UI Elements with xamDiagram Commands – Procedure

Introduction

This procedure walks you through the process of configuring UI elements with some xamDiagram commands. For the sake of example, in this procedure, a Menu control is used and its three MenuItems configured to triggers Copy, Paste, and EnterEditMode commands, respectively, on xamDiagram ’s items.

Preview

The following screenshot demonstrates a menu with Copy, Paste, and Edit options added to the diagram added as a result of this procedure.

xamDiagram Configuring UIElements with xamDiagram Commands 1.png

Prerequisites

To complete the procedure, you need the following:

Overview

Following is a conceptual overview of the process:

1. Adding the Menu control

2. Configuring the MenuItem objects interaction commands

3. (Optional) Verifying the result of the procedure

Steps

The following steps demonstrate how to configure the MenuItems of a Menu control to invoke xamDiagram commands.

1. Add the Menu control.

Create an instance of the Menu control and add it to the page.

In XAML:

<Menu VerticalAlignment="Top">
</Menu>

2. Configure the MenuItem objects interaction commands.

1. Configure the Copy and Paste menu items.

Because the copy and paste commands for the diagram are ApplicationCommands, configure the Command parameter of the respective MenuItem to perform copy or paste action . The action will be applied on the item of the diagram that has the focus (and to any other UI element on the page, for that matter, if it has the focus).

In XAML:

<MenuItem Command="ApplicationCommands.Copy" />
<MenuItem Command="ApplicationCommands.Paste"/>

2. Configure the Edit menu item.

Because the EnterEditMode command belongs to the DiagramCommands class, to bind it to a specific MenuItem, set the Command and CommandTarget properties of the MenuItem object . The latter setting is used to specify that the command binding target is the diagram object.

In XAML:

<MenuItem Header="Edit"
        Command="{x:Static ig:DiagramCommands.EnterEditMode}"
        CommandTarget="{Binding ElementName=diagram}"/>

3. Add the menu items to the menu.

In XAML:

<Menu VerticalAlignment="Top">
 <MenuItem Command="ApplicationCommands.Copy" />
 <MenuItem Command="ApplicationCommands.Paste" />
 <MenuItem Header="Edit"
              Command="{x:Static ig:DiagramCommands.EnterEditMode}"
              CommandTarget="{Binding ElementName=diagram}"/>
</Menu>

3. (Optional) Verify the result of the procedure.

As a result of this procedure you should have a functional menu like the one demonstrated in the Preview.

You can test the functionality of the menu items, by, for example, selecting a node, clicking Copy from the menu and then pasting it again using the Paste menu item on a location in the diagram space.

Full code

Following is the full code for this procedure.

In XAML:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition Height="5*" />
    </Grid.RowDefinitions>
    <Menu VerticalAlignment="Top">
        <MenuItem Command="ApplicationCommands.Copy" />
        <MenuItem Command="ApplicationCommands.Paste" />
        <MenuItem Header="Edit"
                  Command="{x:Static ig:DiagramCommands.EnterEditMode}"
                  CommandTarget="{Binding ElementName=diagram}" />
    </Menu>
    <ig:XamDiagram x:Name="diagram" Grid.Row="1">
        <ig:DiagramNode Key="node1"
                        Content="Start"
                        Height="100"
                        Width="150"
                        Position="200,20" />
        <ig:DiagramNode Key="node2"
                        Content="Condition"
                        Height="100"
                        Width="100"
                        ShapeType="Rhombus"
                        Position="225,200"
                        MaintainAspectRatio="True" />
        <ig:DiagramNode Key="node3"
                        Content="End"
                        Height="100"
                        Width="150"
                        ShapeType="Ellipse"
                        Position="200,380" />
        <ig:DiagramConnection Name="conn12"
                              StartNodeKey="node1"
                              EndNodeKey="node2"
                              ConnectionType="Straight" />
        <ig:DiagramConnection Name="conn23"
                              StartNodeKey="node2"
                              EndNodeKey="node3"
                              ConnectionType="Straight"
                              Content="Yes" />
        <ig:DiagramConnection Name="conn21"
                              StartNodeKey="node2"
                              EndNodeKey="node1"
                              StartNodeConnectionPointName="Right"
                              EndNodeConnectionPointName="Top"
                              Content="No" />
        <ig:DiagramConnection Name="connStart"
                              StartPosition="175,70"
                              EndPosition="195,70" />
    </ig:XamDiagram>
</Grid>

Related Topics

The following topics provide additional information related to this topic.

Topic Purpose

This topic provides a summary of all user interaction tasks in the xamDiagram control.

This topic explains how to configure the Undo/Redo in xamDiagram . The topic covers configuring an Undo/Redo Manager that is exclusive for the xamDiagram control.

This topic explains how to change the keyboard shortcuts associated with xamDiagram commands.