How to put dockingmanager on top of stackpanel so there is a border.

[Caleb Kliewer]

I would like to  add a border around the entire docking manager where I can add images, buttons, text, etc. How can I accomplish this while using the docking Adapter and MVVM design pattern?

[Mallika Kannan]

Hi Caleb Kliewer 

 

Thank you for contacting Syncfusion support. 

 

As you requirement is to set border for entire DockingManager, this can be done using BorderThickness and BorderBruch Property. We have included the code snippet below. 

 

Code Example: [XMAL] 

 

<mvvm:DockingAdapter BorderThickness="3" BorderBrush="Brown" Grid.Row="1" ItemsSource="{Binding Workspaces}" 

                             ActiveDocument="{Binding ActiveDocument,Mode=TwoWay}"> 

 

</mvvm:DockingAdapter> 

 

Screenshot 

 

 

  

We have also attached the MVVM sample below. 

 

Sample:  http://www.syncfusion.com/downloads/support/forum/135864/ze/DockingDemo919483604.zip 

 

Can you update whether you have asked the same? If not, please provide us more information about your requirement? 

 

Regards, 

Mallika  

[Caleb Kliewer]

Thanks for the reply! I've seen this solution but I need a way to add other controls onto the stack panel. This makes the Border Thickness property unusable unless I can add a control on it.

[Mallika Kannan]

Hi Caleb Kliewer    

   

Thanks for your update.   

   

We have prepared the sample for your query “How to put DockingManager on Top of StackPanal, I need a way to add other controls onto the stack panel”. In this sample, we have added the DockingManager on Top of StackPanel, then we have add the other controls like, RichTextBox, TreeView, GroupBar onto stack panel. The following code demonstrates the same.   

   

Code Example: [Xaml]   

 

<StackPanel Orientation="Vertical">   

   

<mvvm:DockingAdapter BorderThickness="3" Height="500"  BorderBrush="Brown" ItemsSource="{BindingWorkspaces}"   

ActiveDocument="{Binding ActiveDocument,Mode=TwoWay}">   

   

</mvvm:DockingAdapter>   

<RichTextBox x:Name="richTextBox" Height="100">   

<FlowDocument>   

<Paragraph>   

<Run Text="RichTextBox"/>   

</Paragraph>   

</FlowDocument>   

</RichTextBox>   

<TreeView x:Name="treeView" Height="100"/>   

<syncfusion:GroupBar Height="100" MinWidth="150" MinHeight="100"VisualMode="MultipleExpansion">   

<syncfusion:GroupBarItem ContentBreadth="0" ContentLength="0" HeaderText="New GroupBarItem"ShowInGroupBar="True">   

<syncfusion:GroupView IsListViewMode="True">   

<syncfusion:GroupViewItem Text="New GroupViewItem"/>   

</syncfusion:GroupView>   

</syncfusion:GroupBarItem>   

<syncfusion:GroupBarItem ContentBreadth="0" ContentLength="0"/>   

</syncfusion:GroupBar>   

</StackPanel>   

   

Screenshot   

   

    

   

Sample:  http://www.syncfusion.com/downloads/support/forum/135864/ze/DockingDemo-439253333.zip 

   

Please check this above solution and confirm whether you have asked the same? If we have misunderstood your query, please get back to us with more details like sample/Screenshot/video or modify the above sample to reproduce the issue.  This would help us to provide the solution at the earliest.     

   

Regards,   

Mallika