DualPaneExample

This example is set up just like the [SinglePaneExample] with a few differences;

• We use the BarPlacement.LEFT for both open and close bar placements.
• See [Understanding the TaskPaneTitleWindow] for more information on this component.
• We use the vertTaskBarStyles style for both open and close bar placements.

.vertTaskBarStyles {
  borderSkin:Embed(source='../../TaskPaneFXExample/assets/verticalTitleBarSkin.png',
  scaleGridTop=1, scaleGridLeft=1, 
  scaleGridBottom=45, scaleGridRight=38);
 
  horizontalAlign:"center";
  verticalAlign:"top";
 
  paddingTop:2;
  paddingLeft:2;
  paddingBottom:0;
  paddingRight:10;
}

• We use the viewSide bindable property to let the TaskPaneTitleWindow component know which side of the application the task pane is on.

In the image above;

• Each task pane's isOpen property is set to true.
• The task pane located on the left has it's viewSide property set to "left".
• The task pane located on the right has it's viewSide property set to "right".

In the image above, to get to this state, both task pane's isOpen properties were set to false or the minimizeButton was clicked.

The left task pane collapses to the left and the right task pane collapses to the right.

paneLeft

<windows:TaskPaneTitleWindow id="paneLeft"
	barPlacementOpened="{BarPlacement.LEFT}"
	barPlacementClosed="{BarPlacement.LEFT}"
	barStyleNameOpened="vertTaskBarStyles"
	barStyleNameClosed="vertTaskBarStyles"
	viewSide="left"
	height="100%">

paneRight

<windows:TaskPaneTitleWindow id="paneRight"
	barPlacementOpened="{BarPlacement.RIGHT}"
	barPlacementClosed="{BarPlacement.RIGHT}"
	barStyleNameOpened="vertTaskBarStyles"
	barStyleNameClosed="vertTaskBarStyles"			
	viewSide="right"
	height="100%">