How to use DockingManager.SizetoContentInDock

[Marcial Gonzalez]

Hi

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:

 

MainWindow.xaml

<Window

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:local="clr-namespace:ApplicationTest"

        xmlns:syncfusion="http://schemas.syncfusion.com/wpf"

        x:Class="ApplicationTest.MainWindow"

              xmlns:v="clr-namespace:ApplicationTest.View"

        mc:Ignorable="d"

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

    <Grid>

        <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" />

            </ContentControl>

        </syncfusion:DockingManager>

    </Grid>

</Window>

 

 

ButtonsView.xaml

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

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

                  xmlns:System="clr-namespace:System;assembly=mscorlib"

             xmlns:local="clr-namespace:ApplicationTest.View"

              xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

             mc:Ignorable="d" >

    <UserControl.Resources>

        <DataTemplate x:Key="GridViewHeaderTemplate">

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

        </DataTemplate>

        <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"/>

            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

        <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"/>

            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

    </UserControl.Resources>

 

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

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

                                                             Background="#FFE3EEDE" >

            <Border.Triggers>

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

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

                </EventTrigger>

            </Border.Triggers>

            <Grid >

                <Grid.RowDefinitions>

                    <RowDefinition Height="*"/>

                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>

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

                    <ColumnDefinition Width="*"/>

                </Grid.ColumnDefinitions>

                <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"/>

                    </StackPanel>

                </Border>

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

                                               PreviewMouseRightButtonDown="lvSelector_PreviewMouseRightButtonDown"

                                               ContextMenuOpening="lvSelector_ContextMenuOpening" HorizontalAlignment="Stretch">

                    <ListView.View>

                        <GridView >

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

                                            DisplayMemberBinding="{Binding NAME}"  />

                        </GridView>

                    </ListView.View>

                </ListView>

            </Grid>

        </Border>

    </Grid>

</UserControl>

 

 

ButtonsView.xaml.cs

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()

        {

            InitializeComponent();

        }

 

        private void DisplayListView(bool Open)

        {

            Storyboard sb;

            if (Open)

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

            else

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

            sb.Begin();

            IsOpen = Open;

        }

 

        private void Button_MouseEnter(object sender, MouseEventArgs e)

        {

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

            if (!IsOpen)

                DisplayListView(true);

        }

 

        private void rootObject_MouseLeave(object sender, MouseEventArgs e)

        {

            // If it's open, we close it

            if (IsOpen && !InEdition)

                DisplayListView(false);

        }

 

        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.

 

Thanks

[Ashok Kumar Murugesan]

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.

Sample:DockingManager

Regards,
Ashok Kumar M.

[Marcial Gonzalez]

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

[Ashok Kumar Murugesan]

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.

Sample:DockingManager 

Regards,
Ashok Kumar M.

 

[Marcial Gonzalez]

Hi Ashok

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

Thank you very much for you help.

[Ashok Kumar Murugesan]

Hi Marcial Gonzale,

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

Regards,
Ashok Kumar M.