Tabs Dragging and Reordering (xamTabControl)

Topic Overview

Purpose

This topic explains how to configure the tabs dragging feature which can be used to reorder tabs.

Required background

The following topics are prerequisites to understanding this topic:

Topic	Purpose
About xamTabControl	In this section you’ll find information that will help you to better understand the functionalities of xamTabControl .

In this topic

This topic contains the following sections:

Introduction
Tab Dragging Configuration Summary
Handling Associated Events
Related Topics

Introduction

Dragging and reordering summary

The xamTabControl allows the user to reorder the tabs by dragging them at a new position. This feature is disabled by default. The following screenshot demonstrates the process of moving the "Page Layout" tab to a new location between the "References" and "Mailing" tabs.

Tab Dragging Configuration Summary

Tab dragging configuration summary

The tab dragging feature supports two modes of tab dragging:

Deferred – while dragging a tab its new position is indicated by a floating representation and two insertion arrows.
Immediate – while dragging a tab, the whole tab area is constantly reordered to visualize the new tab position.

Note	Note If the tab dragging mode is set to Immediate it will resolve to Deferred in case the tabs are rendered on multiple rows.

Note	Note The tab dragging is not possible if the `ItemsSource` property is set to a read-only collection.

Tab dragging configuration summary chart

The following table explains briefly the configurable aspects of the xamTabControl’s tab dragging feature and maps its configurable aspects to the properties and events that configure them.

Configurable aspect	Details	Property/Events
Enable or Disable Tab Dragging	To enable tab dragging set this property to a value of type TabDragMode different than `TabDragMode.None`.	TabDragMode
Configure Dragging Mode	Set this property to either `TabDragMode.Deferred` or `TabDragMode.Immediate`.	`TabDragMode`
Handling Associated Events	You can use these events to get notified when the user performs certain drag operations.	TabDragStarted TabDragging TabDragComplete

Handling Associated Events

Overview

You can attach handlers to the following events to get notification when various operations are performed by the user.

Property settings

The following table maps the user operations to the event that is raised.

In order to:	Use this event:	Abilities of the event arguments object:
Get notified when tab dragging starts	`TabDragStarted`	Obtain the Tab that was dragged Obtain the associated Item from the underlying data source
Get notified on each mouse move while tab dragging	`TabDragging`	Cancel the dragging event Obtain the potential DropTargetTab Obtain the DropLocation (relative to the drop target tab) Obtain the `Tab` that was dragged Obtain the associated `Item` from the underlying data source
Get notified when a tab dragging completes	`TabDragComplete`	Obtain the `Tab` that was dragged Obtain the associated `Item` from the underlying data source

Note	Note The `Item` property of the event argument object contains the item from the underlying data source bound to the control. If the tabs are defined in XAML the `Item` property will be `null`.

Topic	Purpose
Add a Tab to xamTabControl	This topic describes how you can add a tab to a xamTabControl and work with TabItem and TabItemEx objects.
Add Content to a Tab	This topic describes how you can add content to a tab in xamTabControl.
Close a Tab	This topic describes how you can close a tab in xamTabControl.
Enable Multiple Tab Rows	This topic describes how you can modify tab layouts and create multiple rows.
Removing a Closed Tab	This topic describes how you can handle the TabItemEx object’s Closed event and remove the TabItemEx object from xamTabControl’s Items collection.
Select a Tab	This topic describes how you can select a tab in XAML and in code-behind.

WPF | Help Topics