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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to use DockingManager.SizetoContentInDock

Thread ID:

Created:

Updated:

Platform:

Replies:

126238 Oct 3,2016 02:50 PM UTC Oct 6,2016 09:10 AM UTC WPF 5
loading
Tags: DockingManager
Marcial Gonzalez
Asked On October 3, 2016 02:50 PM UTC

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 [Syncfusion]
Replied On 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.

Sample:DockingManager

Regards,
Ashok Kumar M.

Marcial Gonzalez
Replied On 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

Ashok Kumar Murugesan [Syncfusion]
Replied On 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.

Sample:DockingManager 

Regards,
Ashok Kumar M.

 


Marcial Gonzalez
Replied On 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.

Ashok Kumar Murugesan [Syncfusion]
Replied On 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.

Regards,
Ashok Kumar M.


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;