Animation of Docking windows

Docking/MDI for WPF Forum

Posted 3 years ago by Jeff LI
Version: 16.1.0632
Avatar

hi, Actipro devs / product manager

I am really intereted in the WPF docking windows and all the features are good, except one thing as follow,

I am trying to do an animation storyboard based on a two columns DocumentWindow. On the begining, there is only one column, which is a DocumentWindow with grid. When I click a row of the grid, the first column DocumentWindow is shrinking to the left, at the same time, the second column will be created with another DocumentWindow inside and moving the same pace as the first DocumentWindow, from right to left and stop at middle of the window. Then two columns DocumentWinow are fully occupied wholel screen. On the left is a grid list, on the right is detail editor. It looks like the outlook email list and email details.  I tried couple of samples through your samples however, not of them can work very well with WPF animation. 

I just want to know is the WPF controls support animation, is there any samples to have a look? If animation is perfectly supported, then this is the product I am looking for. 

I am looking forward to your reply.

Best Regards

Jeff

Comments (5)

Posted 3 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hi Jeff,

We do support animations with feature areas like tab dragging, drop guide and drop target display, and auto-hide popups.  Are you asking about animation within the content area of a particular DocumentWindow, or animated display of a second tabbed DocumentWindow that appears next to a first tabbed DocumentWindow?  If you mean the first, the DocumentWindow should fully support any child control content and animations within that content.


Actipro Software Support

Posted 3 years ago by Jeff LI
Avatar

Hi, there

What I am talking about is the DocumentWindow itself, not the content inside the DocumentWindow. Following is my code.

what I want to achive is to shrink(animation) the 'listWIndow' to the left, and create another DocumentWindow by code and expaned(animation) to middle of the main screen. then left is the list window, and right the editor window.

What I tried was I can create the new TabbedMdiContainer with new DocumentWindow, but I cannot make the animation by changing the DocumentWindwo.WidthProperty. Is any other way or I made any mistake?

<docking:Workspace>

     <docking:TabbedMdiHost>
         <docking:SplitContainer Orientation="Horizontal" Name="mainContainer">
               <docking:TabbedMdiContainer Name="listContainer">
                       <docking:DocumentWindow Title="List" Name="listWindow">
                               <StackPanel Name="workingPanel">
                                      <Button Name="btnShow" Click="ButtonBase_OnClick" Width="75" Height="50" Content="Show Editor"></Button>
                               </StackPanel>
                        </docking:DocumentWindow>
                 </docking:TabbedMdiContainer>
            </docking:SplitContainer>
    </docking:TabbedMdiHost>
</docking:Workspace>

Posted 3 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hi Jeff,

Thanks for the explanation.  Unfortunately that sort of animation won't work since there is a panel in SplitContainer doing all of the layouts.  And if you set the Width of a DocumentWindow, it might prevent that panel's arrange from being correct.

Also on a side note, you should never really reference a container like a SplitContainer or TabbedMdiContainer directly since those are transient objects that get created/destroyed as layout changes occur, unlike things like DockSite, Workspace, TabbedMdiHost, and DocumentWindow. 


Actipro Software Support

Posted 3 years ago by Jeff LI
Avatar

hi, Supporting team

By changing theTabbedMdiContainer WidthProperty and HeightProperty , I can get the animation I want, however, after that the Container/DockingWindow inside become a fixed window, when I maximize the Window , the container/dockingwindow still the orginal size. How can I do to make the control can auto resize? I've tried to set the properties of container as follow, 

editorContainer.HorizontalAlignment = HorizontalAlignment.Stretch;
editorContainer.VerticalAlignment = VerticalAlignment.Stretch; 

which still not working. Any suggestions?

 

Cheers

Jeff

Posted 3 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hi Jeff,

You should never be setting Width/Height properties of any containers for that specific reason, because it prevents the container from being arranged properly by our framework's containing controls.  Our framework needs to be able to arrange the container to various sizes based on docking location, other docking windows being docked, the user moving a splitter, and so on.  By fixing a container to a certain Width/Height, you block our ability to do that.  The Width/Height need to be double.NaN.  Maybe you could set it back to that value after your animation.


Actipro Software Support

The latest build of this product (v2019.1 build 0683) was released 1 month ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.