Intersoft ClientUI Documentation
How-to: Change Toolbar Orientation using Dock Tray
Intersoft ClientUI 8 > ClientUI Controls > Control Library > Toolbar and Menu Controls Overview > UXDockTray > How-to: Change Toolbar Orientation using Dock Tray

This example shows how to change the UXToolBar orientation using UXDockTray.

Example

Description

UXDockTray supports automatic layout orientation particularly when paired together with UXToolBar. Using UXDockTray, you can display one or more tool bars in vertical orientation which is unique in the way it supports the vertical orientation. 

When vertical orientation is used, UXDockTray re-arranges the dimension of the tool bar to fit into the dimension of the dock tray, while smartly transforming the necessary user interface elements to reflect the new orientation, such as the grip handle, overflow handle and overflow drop down menu.

This following code shows how to change UXToolBar orientation using UXDockTray.

Code

XAML
Copy Code 
<Intersoft:DockPanel>
    <Intersoft:UXDockTray Intersoft:DockPanel.Dock="Top" >
        <Intersoft:UXToolBar>
            <Intersoft:UXToolGroup>
                <Intersoft:UXToolBarButton DisplayMode="Image" Icon="/new.png" ToolTipService.ToolTip="New"/>
                <Intersoft:UXToolBarButton DisplayMode="Image" Icon="/open.png" ToolTipService.ToolTip="Open"/>
                <Intersoft:UXToolBarButton DisplayMode="Image" Icon="/save.png" ToolTipService.ToolTip="Save"/>
                <Intersoft:UXSeparator/>
                <Intersoft:UXToolBarButton DisplayMode="Image" Icon="/print.png" ToolTipService.ToolTip="Print"/>
            </Intersoft:UXToolGroup>
        </Intersoft:UXToolBar>
    </Intersoft:UXDockTray>
    <Intersoft:UXDockTray Intersoft:DockPanel.Dock="Left" Orientation="Vertical" >
        <Intersoft:UXToolBar>
            <Intersoft:UXToolGroup>
                <Intersoft:UXToolBarButton DisplayMode="Image" Icon="/BoldHS.png" ToolTipService.ToolTip="Bold"/>
                <Intersoft:UXToolBarButton DisplayMode="Image" Icon="/ItalicHS.png" ToolTipService.ToolTip="Italic"/>
                <Intersoft:UXSeparator/>
                <Intersoft:UXToolBarButton DisplayMode="Image" Icon="/List_BulletsHS.png" ToolTipService.ToolTip="Bullet List"/>
                <Intersoft:UXToolBarButton DisplayMode="Image" Icon="/List_NumberedHS.png" ToolTipService.ToolTip="Numbered List"/>
            </Intersoft:UXToolGroup>
        </Intersoft:UXToolBar>
    </Intersoft:UXDockTray>
</Intersoft:DockPanel>
See Also
UXToolBar Class
UXDockTray Class