C1.WPF.Docking

Posted by: gkayne on 13 January 2022, 10:02 am EST

  • Posted 13 January 2022, 10:02 am EST

    My scenario is as follows:

    - I have a C1DockTabControl docked on the left with a single tab
    - I move a tab from another C1DockTabControl and dock it to the bottom inner
    part so the C1DockTabControl now has two tabs one on top of the other.
    - Now if I collapse the lower tab, it collapses to the bottom of the parent Dock Control

    This is not desired. In winforms (and VS6) the bottom tab would collapse to the left (inherit the dock location of the Parent C1DockTabControl ), which is desired. Is this by design and, if so, how can I get it to dock as it does in winforms (and VS6).

    A second question is what is the purpose of the C1DockGroup - very little literature regarding this control which suggests that it is needed to create certain layouts - but I can't seem to see any value in what it achieves beyond the C1DockTabControl. Do I need the C1DockGroup to achieve what I am trying to accomplish above.
  • Replied 17 January 2022, 11:07 pm EST

    A couple other questions:

    2A - How do I set the initial width of a C1DockTabControl that has been docked to the left - setting its DockWidth (say to 200) works great when it is collapsed, but as soon as I dock/pin the C1DockTabControl, it takes up 50% of the parent C1DockControl's width. Also, how can this be done in code.

    2B - The WinForms DockTabControl has a TabSizeMode = TabSizeModeEnum.Fit property - is there an equivalent in WPF.

    2C - Is there a way to set the height of the TabStrip and Header of the C1DockTabControl - it is disproportionate under certain settings (ie. when the TabItemShape is set to Rectangle)

    2D - Is there a way to change the pin on the new WPF C1DockTabControl so it looks as it did in the 4.5 version and in Winforms.
  • Replied 17 January 2022, 11:53 pm EST

    My answer to 2A above:

    2A - How do I set the initial width of a C1DockTabControl that has been docked to the left - setting its DockWidth (say to 200) works great when it is collapsed, but as soon as I dock/pin the C1DockTabControl, it takes up 50% of the parent C1DockControl's width. Also, how can this be done in code.


    This is what I have figured out:

    - Setting the DockWidth in XAML (or in code) proportions the ActualWidth of all the C1DockTabControls within the parent C1DockControl.

    - After the control is resized, the assigned DockWidth property is retained, however the ActualWidth changes based on the proportioned amount. So when the C1DockTabControl's DockMode = DockMode.Sliding, it will resize based on the DockWidth property setting (this property value does not change when resized) and when it is pinned it will resize based on the proportioned ActualWidth properties of all the C1DockTabControls .

    So the solution I found to set the desired width of the C1DockTabControls is to use the code behind Loaded event on the Parent C1DockControl as follows:

    C1DockTabControl1.DockWidth = 250
    C1DockTabControl2.DockWidth = C1DockControl1.ActualWidth - 250

    If you have more than two C1DockTabControls, you would obviously expand on the above accordingly.

  • Replied 8 March 2022, 9:33 pm EST

    Hi,

    Sorry for the delay in response.

    1. We are discussing this WPF/Winform C1DockControl's collapse behavior to the concerned team and will be get back to you once we have any update from them.[Internal Track Id - C1XAML-28773]

    2. C1DockGroup is to bind the C1DockTabControls in group, It use as a C1DockControl item to enclose C1DockTabControls in a sub-rectangle of the available space.

    2A. This is related to DockPanel which measure DockTabControl. Try setting HorizontalFill="True" for at least one C1DockTabControl, it will fill the remaining space and behavior will be correct(implemented in attached sample).

    2B. Wpf and Winforms DockControl have different architecture. Hence Wpf C1DockControl's Tab item automatic adjust according to the header content size.

    2C. You can set TabStrip and Header height by handling Loaded event f C1dockTabControl as: (see code snippet)


    Dim dockTabControl = CType(sender, C1DockTabControl)
    Dim tabStrip = CType(dockTabControl.Template.FindName("TabPanel", dockTabControl), C1TabPanel)
    tabStrip.Height = 40
    For Each item As C1TabItem In tabStrip.Children
    Dim presenter = CType(item.Template.FindName("DockTabItemContent", item), ContentPresenter)
    presenter.Height = 40
    Next

    Dim head = CType(dockTabControl.Template.FindName("HeaderContainer", dockTabControl), Border)
    head.Height = 60


    2D. You can change Pin/Unpin icon, just like 4.5.2 C1DockControls by handling Loaded event od C1DockTabControl as : (see code snippet)


    Dim stack = CType(dockTabControl.Template.FindName("StackPanelButtons", dockTabControl), StackPanel)

    CType(CType(CType(stack.Children(2), Border).Child, Button).Content, C1PathIcon).Data = "M 3.71875 2.28125 L 2.28125 3.71875 L 28.28125 29.71875 L 29.71875 28.28125 L 21.75 20.3125 C 21.988678 19.231627 22.072023 18.111911 21.875 17 L 29.4375 11.46875 L 20.53125 2.5625 L 15 10.125 C 13.889037 9.9274235 12.764228 10.013944 11.6875 10.25 L 3.71875 2.28125 z M 20.78125 5.625 L 26.375 11.21875 L 19.59375 16.1875 L 19.78125 16.84375 C 19.930164 17.410929 20.006357 17.989892 20 18.5625 L 13.4375 12 C 14.010039 11.993776 14.588137 12.069369 15.15625 12.21875 L 15.8125 12.40625 L 20.78125 5.625 z M 8.21875 11.84375 C 7.96575 12.04475 7.732 12.269 7.5 12.5 L 6.78125 13.1875 L 12.09375 18.5 L 4 26.59375 L 4 28 L 5.40625 28 L 13.5 19.90625 L 18.8125 25.21875 L 19.5 24.5 C 19.731 24.269 19.95625 24.03425 20.15625 23.78125 L 8.21875 11.84375 z"

    CType(CType(CType(stack.Children(1), Border).Child, Button).Content, C1PathIcon).Data = "M 20.53125 2.5625 L 19.84375 3.5 L 14.9375 10.1875 C 12.306897 9.7319347 9.5276177 10.472382 7.5 12.5 L 6.78125 13.1875 L 7.5 13.90625 L 12.09375 18.5 L 4 26.59375 L 4 28 L 5.40625 28 L 13.5 19.90625 L 18.09375 24.5 L 18.8125 25.21875 L 19.5 24.5 C 21.527618 22.472382 22.268065 19.693103 21.8125 17.0625 L 28.5 12.15625 L 29.4375 11.46875 L 28.625 10.65625 L 21.34375 3.375 L 20.53125 2.5625 z M 20.78125 5.625 L 26.375 11.21875 L 20.15625 15.78125 L 19.59375 16.1875 L 19.78125 16.84375 C 20.263326 18.677254 19.73729 20.586311 18.59375 22.1875 L 9.8125 13.40625 C 11.413689 12.262708 13.322746 11.736674 15.15625 12.21875 L 15.8125 12.40625 L 16.21875 11.84375 L 20.78125 5.625 z"


    Please refer the attached sample for the same : WPFAppDockingDemo.zip

    Best Regards,
    Nitin
  • Replied 19 January 2022, 8:09 pm EST

    Thanks for the feedback Nitin. Note the Icons do not change in your sample, but I get the gist, and appreciate the direction regarding the other items.

    I'll await with anticipation to hear back regarding the discussion of the WPF/Winform C1DockControl's collapse behavior.
  • Replied 19 January 2022, 9:47 pm EST

    Hi,

    Thanks for your acknowledgement. And we are happy to hear that you got the way to update the icon.

    And we will response ASAP, whenever we get update from devs regarding WPF/Winform C1DockControl's collapse behavior.

    Regards,
    Nitin
  • Replied 5 March 2022, 12:30 am EST

    Nitin, in a separate post you mentioned a new release will be coming out at the end of March - can you confirm whether or not the WPF C1DockControl's collapse behavior will be updated in that release?
  • Replied 6 March 2022, 7:35 pm EST

    Hi,

    We investigated the collapse behavior in WinForms and WPF C1DockControl based on your inputs and observed as below:

    If we have two-tab items say, Tab-1(Dock=Left) and Tab-2(Dock=Right) in the dock control. Dragging and docking the Tab-1 to the bottom of Tab-2 and then collapsing Tab-1, have different behavior in WPF and WinForms. (See Gif)

    In WinForms, on collapsing Tab-1, it docks according to the Parent's docking state. i.e., after following the above steps, it collapses to the right, as Tab-2 was docked to the right.


    In WPF, on collapsing Tab-1, it docks according to its current docking state. i.e., after following the above steps, it collapses to the bottom, as Tab-1 was docked to the bottom.


    As per the discussion with the development team, WPF C1DockControl have appropriate behavior than WinForms. So, there will be no change in collapse behavior in WPF and is by design. Hence, you will only get the fix of Dock Resizing and Dock selected state issue in the next build.

    Best Regards,
    Nitin
  • Replied 7 March 2022, 7:58 pm EST

    In both examples you are docking it to the InnerPart of the target so it should behave as it does in the WinForms example. If you were to dock it to the OuterPart in both examples, it would behave as it does in the WPF example - which is desired.

    To really see the issue you need to add a third tab - in this case, with the WPF control, after docking one tab to the TopInnerPart or BottomInnerPart of a second tab, it should collapse according to the Parent's docking state as it does with the Winforms control.

    Sorry, but your WinForms version is docking correctly - the WPF control is not.
  • Replied 8 March 2022, 9:31 pm EST

    Hi Glen,

    We are discussing with the development team on priority basis. We'll let you know once we have any update from them.

    Regards,
    Nitin
  • Replied 9 March 2022, 5:19 am EST

    Here is a gif demonstrating the issues:



    When "Left 01" is docked to the LeftInnerPart of the C1DockTabControl that is docked on the Right side - it should collapse to the Right (Inherit from its new parent C1DockTabControl) - not on the left side or the parent C1DockControl - this makes no sense.

    This issue is the same for all situations when docking to any InnerPart (Right, Left, Bottom or Top) - it should always collapse as defined by the parent C1DockTabControl hosting the InnerPart you are docking to, as per the WinForms control.
  • Marked as Answer

    Replied 9 March 2022, 5:40 pm EST

    Hi Glen,

    As per the discussion, it looks correct to collapse bottom when you dock left tab to right tab(inner bottom part) which stretches horizontally as the behavior in Wpf.
    If after both inner and outer dock we have the same UI with horizontal stretch, it would be strange if it will collapse differently depending on some previous actions.

    So, we are sorry to inform you that our product team doesn't want to change this behavior in WPF C1DockControl.
    Hope you will understand.

    Best Regards,
    Nitin
  • Replied 13 March 2022, 4:25 pm EST

    Well, we'll have to agree to disagree - I have extended the WPF C1DockControl and given it a VSMode Property to dock the way it does in Visual Studio - who apparently also have it wrong.
  • Replied 13 March 2022, 11:24 pm EST

    Hi Glen,

    Sorry to inform you that, we are not clear about your statement.
    Could you please clarify that what you have responded, with more information.

    Best Regards,
    Nitin
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels