Intersoft ClientUI Documentation
How-to: Enable Drag-drop in Toolbar using Dock Tray
Intersoft ClientUI 8 > ClientUI Controls > Control Library > Toolbar and Menu Controls Overview > UXDockTray > How-to: Enable Drag-drop in Toolbar using Dock Tray

This example shows how to enable drag drop in UXToolBar using UXDockTray.

Example

Description

UXDockTray derives from UXStackPanel, which means it exposes many properties and features related to interactivity and drag drop operation. UXStackPanel is a stack panel with sophisticated drag-drop features. To learn more about interactivity panels, see Interactive Panels Overview.

To enable drag and drop operation in UXToolBar, you first define a dock zone by creating a UXDockTray in your page layout. Subsequently, you add one or more tool bars in the content of the UXDockTray.

Once you defined the dock zone along with the tool bars, you set the following properties in the UXDockTray to enable the drag and drop operation:

The following example shows how to setup the UXDockTray to enable drag and drop operation for the tool bars that it contains.

XAML
Copy Code 
<Grid x:Name="LayoutRoot">
        <Intersoft:DockPanel FillChildMode="Custom">
            <Intersoft:UXDockTray Intersoft:DockPanel.Dock="Top" 
                                  AllowMoveItem="True" 
                                  AllowReorderItem="True" 
                                  AllowDropItem="True">

                <Intersoft:UXToolBar>
                    <Intersoft:UXToolGroup>
                        <Intersoft:UXToolBarButton DisplayMode="Image" Icon="../Assets/Images/Office/NewDocumentHS.png" ToolTipService.ToolTip="New Document"/>
                        <Intersoft:UXToolBarButton DisplayMode="Image" Icon="../Assets/Images/Office/OpenFile.png" ToolTipService.ToolTip="Open Document"/>
                        <Intersoft:UXToolBarButton DisplayMode="Image" Icon="../Assets/Images/Office/SaveHS.png" ToolTipService.ToolTip="Save"/>
                    </Intersoft:UXToolGroup>
                </Intersoft:UXToolBar>

                <Intersoft:UXToolBar>
                    <Intersoft:UXToolGroup>
                        <Intersoft:UXToolBarButton DisplayMode="Image" Icon="../Assets/Images/Office/CutHS.png" IsEnabled="False" ToolTipService.ToolTip="Cut"/>
                        <Intersoft:UXToolBarButton DisplayMode="Image" Icon="../Assets/Images/Office/CopyHS.png" IsEnabled="False" ToolTipService.ToolTip="Copy"/>
                        <Intersoft:UXToolBarButton DisplayMode="Image" Icon="../Assets/Images/Office/PasteHS.png" ToolTipService.ToolTip="Paste"/>
                        <Intersoft:UXSeparator/>
                        <Intersoft:UXToolBarButton DisplayMode="Image" Icon="../Assets/Images/Office/AlignTableCellMiddleCenterHS.png" ToolTipService.ToolTip="Align Center"/>
                        <Intersoft:UXToolBarButton DisplayMode="Image" Icon="../Assets/Images/Office/AlignTableCellMiddleRightHS.png" ToolTipService.ToolTip="Align Right"/>
                    </Intersoft:UXToolGroup>
                </Intersoft:UXToolBar>

            </Intersoft:UXDockTray>
        </Intersoft:DockPanel>
</Grid>

The following illustration shows the result of the example above and also describes a high level overview of the dock tray concept.

See Also
UXToolBar Class
UXDockTray Class