We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to use DockingManager.SizetoContentInDock


I have a wpf project with a DockingManager in the MainWindow. I’m trying to put a View (ButtonsView) in a window which I want to be resized as I change the width of the content (ButtonsView). This is a User Control with a StackPanel and a ListView that I want to hide depending on the MouseEnter in the buttons I put in the StackPanel. Here is the code:













        Title="MainWindow" Height="350" Width="525">


        <syncfusion:DockingManager x:Name="dockingManager" DockFill="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"

                                   UseDocumentContainer="True" ShowTabListContextMenu="True" >

            <ContentControl x:Name="actions" HorizontalAlignment="Left" syncfusion:DockingManager.Header="Actions"

                            syncfusion:DockingManager.SizetoContentInDock="True" >

                <v:ButtonsView HorizontalAlignment="Left" />








<UserControl x:Class="ApplicationTest.View.ButtonsView"








             mc:Ignorable="d" >


        <DataTemplate x:Key="GridViewHeaderTemplate">

            <TextBlock FontWeight="Black" FontSize="22" Foreground="DarkBlue" Text="{Binding}"/>


        <Storyboard  x:Key="StoryboardCloseListView" >

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="rootObject" >

                <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="400"/>

                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="136"/>



        <Storyboard x:Key="StoryboardOpenListView">

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="rootObject" >

                <EasingDoubleKeyFrame KeyTime="0:0:0.0" Value="136"/>

                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="400"/>





    <Grid x:Name="rootObject" MouseLeave="rootObject_MouseLeave" >

        <Border x:Name="borderMenu" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Stretch" CornerRadius="5"

                                                             Background="#FFE3EEDE" >


                <EventTrigger RoutedEvent="UIElement.MouseLeave" SourceName="borderMenu">

                    <BeginStoryboard Storyboard="{StaticResource StoryboardCloseListView}"/>



            <Grid >


                    <RowDefinition Height="*"/>



                    <ColumnDefinition Width="{Binding Width, ElementName=spButton}"/>

                    <ColumnDefinition Width="*"/>


                <Border Grid.Column="0" HorizontalAlignment="Left" VerticalAlignment="Top">

                    <StackPanel x:Name="spButton">

                        <Button Height="125" Width="125" Margin="5,8,5,8" MouseEnter="Button_MouseEnter"/>



                <ListView Grid.Column="1" x:Name="lvSelector" Margin="5,8,5,8"


                                               ContextMenuOpening="lvSelector_ContextMenuOpening" HorizontalAlignment="Stretch">


                        <GridView >

                            <GridViewColumn x:Name="gvlList" HeaderTemplate="{StaticResource GridViewHeaderTemplate}"

                                            DisplayMemberBinding="{Binding NAME}"  />











using System.Windows.Controls;

using System.Windows.Input;

using System.Windows.Media.Animation;


namespace ApplicationTest.View



    public partial class ButtonsView : UserControl


        private bool IsOpen = false;


        private bool InEdition = false;


        public ButtonsView()





        private void DisplayListView(bool Open)


            Storyboard sb;

            if (Open)

                sb = this.FindResource("StoryboardOpenListView") as Storyboard;


                sb = this.FindResource("StoryboardCloseListView") as Storyboard;


            IsOpen = Open;



        private void Button_MouseEnter(object sender, MouseEventArgs e)


            // If it's not open, we open it

            if (!IsOpen)




        private void rootObject_MouseLeave(object sender, MouseEventArgs e)


            // If it's open, we close it

            if (IsOpen && !InEdition)




        private void lvSelector_PreviewMouseRightButtonDown(object sender, MouseButtonEventArgs e)


            // By clicking the right mouse button a context menu will be shown, so

     // in order to keep the listview opened, we set InEdition = true

            InEdition = true;



        private void lvSelector_ContextMenuOpening(object sender, ContextMenuEventArgs e)


            if (!InEdition)

                e.Handled = true;






What I thought is that setting syncfusion:DockingManager.SizetoContentInDock="True", the ContentControl resizes depending on the size of the content (ButtonView), but when I hide the ListView, the ContentControl “Actions” doesn’t wrap it. What I want is that the ContentControl “Actions” wraps the ButtonView and when this changes its size, because the listview in shown or hidden, the ContentControl changes as well.



5 Replies

AK Ashok Kumar Murugesan Syncfusion Team October 4, 2016 11:39 AM UTC

Hi Marcial Gonzale,

Thank you for contacting Syncfusion Support.

DockWindow width can be changed based on DesiredWidthInDockedMode. SizeToContentInDock sets the DesiredWidthInDockedMode property based on the Width of the direct Docking Child on loading. So we suggest you to use the ButtonsView as direct child of DockingManager. We have also modified the sample that tries to meet your requirement. In this sample we have bound the DesiredWidthInDockedMode property with Width of Grid inside the ButtonsView. You can download the sample from the following link.


Ashok Kumar M.

MG Marcial Gonzalez October 4, 2016 08:41 PM UTC

Hi Ashok, thank you for your answer. Effectively, that meets my requirements but I discovered something that astonished me. I run the application and first thing I do is dragging the splitter to the right, so then the binding doesn't work well: the listview expands and shrinks as usual but the window wrapper don't. Any solution, please?

Thanks a lot

AK Ashok Kumar Murugesan Syncfusion Team October 5, 2016 08:46 AM UTC

Hi Marcial Gonzale,

Thanks for your update.

We have modified the sample based on your requirement. In this sample, we have modified the binding mode as TwoWay for DesiredWidthInDockedMode property. You can download the sample from the following location.


Ashok Kumar M.


MG Marcial Gonzalez October 5, 2016 09:29 AM UTC

Hi Ashok

In this way it functions like a charm.  It works like I wanted.

Thank you very much for you help.

AK Ashok Kumar Murugesan Syncfusion Team October 6, 2016 09:10 AM UTC

Hi Marcial Gonzale,

We are glad that your issue has been solved. Please let us know if you need any other assistance.

Ashok Kumar M.

Live Chat Icon For mobile
Up arrow icon