how to changed tab flow direction in DocumentHost when add

[Gregorio]

Hi.

The Pane tab header's flow direction is left to right when it added in DocumentHost.
it means that the Pane tab headers are laid out at rear side last added tab header when it add in DocumentHost.
I want to change the flow direction in DocumentHost, but I can't find it.
To be precise, I want to control the tab headers are laid out order flow direction(add to First or Last) when it add.
If I set "FlowtDirection=RightToLeft" or "HorizontalAlignment=Right", it would also apply to inner Tab content. That's not What I want.
I just want to control flow direction in TabStrip.

Could you get me help how can I do that?

[Martin Ivanov]

Hello Gregorio,

I think the easiest way for achieving your requirement would be to stick with your original approach with setting the FlowDirection to RightToLeft on the pane group and then explicitly set the FlowDirection LeftToRight of the panes content. For example:

<telerik:RadDocking>
    <telerik:RadDocking.DocumentHost>
        <telerik:RadSplitContainer>
            <telerik:RadPaneGroup FlowDirection="RightToLeft">
                <telerik:RadPane Header="Item 1">
                    <Grid FlowDirection="LeftToRight">
                        <TextBlock Text="Some text here"/>
                    </Grid>
                </telerik:RadPane>
                <telerik:RadPane Header="Item 2">
                    <Grid FlowDirection="LeftToRight">
                        <TextBlock Text="Some text here"/>
                    </Grid>
                </telerik:RadPane>
            </telerik:RadPaneGroup>
        </telerik:RadSplitContainer>
    </telerik:RadDocking.DocumentHost>
</telerik:RadDocking>

I hope that works for you.

Regards,
Martin Ivanov
Progress Telerik

[Gregorio]

Hi Martin,

Thank you for reply.

But your answer is not what I want. Sorry, there was not enough explain.

So, I atteched image files to understand what I want.


Please see that.

Thanks.

[Gregorio]

And, there are some conditions.
- In Pane's Content, don't use FlowDirection property.
<Grid FlowDirection="LeftToRight"> <-- don't
    <TextBlock Text="Some text here"/>
</Grid>
I created Pane content separated control to reuse. so it's not appropriate set the FlowDirection property in content.

- Don't use Reflection or VisualTreeHelper.
I used reflection and VisualTreeHelper to get the TabStripPanel in previous post I atteched image file "iwant.png".
Becuase it couldn't access the TabStripPanel.
so, I wanna support this function from the RadDocking control without user modify using reflection or VisualTreeHelper.


Is it possible?

[Martin Ivanov]

Hi Gregorio,

This is not supported out of the box. However, you can achieve such behavior by changing the order of the RadPane elements in the corresponding pane group. For example, if the flow direction should be left to right, order the panes in the following order:

<telerik:RadDocking>
    <telerik:RadDocking.DocumentHost>
        <telerik:RadSplitContainer>
            <telerik:RadPaneGroup>
                <telerik:RadPane Header="Item 1" />
                <telerik:RadPane Header="Item 2" />
                <telerik:RadPane Header="Item 3" />
            </telerik:RadPaneGroup>
        </telerik:RadSplitContainer>
    </telerik:RadDocking.DocumentHost>
</telerik:RadDocking>

If the flow direction is right to left use the following layout.

<telerik:RadDocking>
    <telerik:RadDocking.DocumentHost>
        <telerik:RadSplitContainer>
            <telerik:RadPaneGroup>
                <telerik:RadPane Header="Item 3" />
                <telerik:RadPane Header="Item 2" />
                <telerik:RadPane Header="Item 1" />
            </telerik:RadPaneGroup>
        </telerik:RadSplitContainer>
    </telerik:RadDocking.DocumentHost>
</telerik:RadDocking>

You can do that in code via the Items property of the RadPaneGroup object. When you change the flow direction you can re-order the collection. Note that by flow direction I don't mean the FlowDirection property but some custom mechanism that indicates how the items should be ordered.

Regards,
Martin Ivanov
Progress Telerik

[Gregorio]

Hi Martin

Actually I wonder exactly what is supported this function in RadDocking. There were some problems when I used.
At first, in MVVM pattern, this way could not handled Pane in the ViewModel class when it was added or removed.
It's talk about out of focus, the Telerik implemented MVVM pattern is some weird I think.

There is using the View object(RadPane control) in the ViewModel.

So, I used like that,

[Serializable]
[XmlRoot("BasePaneViewModel")]
[XmlInclude(typeof(BaseToolPaneViewModel))]
public class BasePaneViewModel : BaseViewModel
{
    public BasePaneViewModel() // to serialize / deserialize
    {
    }

    [XmlAttribute]
    public string Header { get; set; }

    [XmlAttribute]
    public DockStates InitialPosition { get; set; }

    [XmlAttribute]
    public bool IsActive { get; set; }

    [XmlAttribute]
    public bool IsHidden { get; set; }

    [XmlAttribute]
    public bool IsDocument { get; set; }
}

public class MainViewModel : WindowContentViewModel
{
    public ObservableCollection<BasePaneViewModel> Panes { get; } = new ObservableCollection<BasePaneViewModel>();
}


<DataTemplate DataType="{x:Type screen:BasePaneViewModel}">
    <view:SomeView/>
</DataTemplate>


<telerikDocking:RadDocking  PanesSource="{Binding Panes}" >
    ...
</telerikDocking:RadDocking>

(of course, this is pseudo-code)
    

and then, I wanna handle it in the ViewModel class, but your answer and also I thuoght that is not possible.
(Panes.Insert(0, pane) not worked.)

Second problem is, also I want to left to right order from floating to docked panes, I couldn't find the way.
It could't handle when restore the pane from floating window.(especially in the ViewModel.)

But, your answer was hint for me, I solved like that,

<telerikDocking:RadDocking    PanesSource="{Binding Panes}" >
        <i:Interaction.Behaviors>
                <behaviors:DockingBehavior />
        </i:Interaction.Behaviors>
</telerikDocking:RadDocking>

    public class DockingBehavior : Behavior<RadDocking>
    {
        protected override void OnAttached()
        {
            base.OnAttached();

            this.AssociatedObject.PaneStateChange += AssociatedObject_PaneStateChange;
        }

        private bool _isPaneReordered;

        private void AssociatedObject_PaneStateChange(object sender, Telerik.Windows.RadRoutedEventArgs e)
        {
            if (this._isPaneReordered)
            {
                this._isPaneReordered = false;
                return;
            }

            var pane = e.OriginalSource as RadDocumentPane;
            if (pane == null)
            {
                return;
            }

            if (pane.IsFloating)
            {
                return;
            }

            var spliteContainer = this.AssociatedObject.DocumentHost as RadSplitContainer;
            var lastGroup = spliteContainer?.Items.OfType<RadPaneGroup>().LastOrDefault();
            if (lastGroup == null)
            {
                return;
            }

            if (lastGroup.Items.Count == 1)
            {
                this._isPaneReordered = false;
                return;
            }

            var lastAddPane = lastGroup.Items.OfType<RadPane>().LastOrDefault();
            if (lastAddPane == null)
            {
                return;
            }

            if (lastAddPane.Equals(e.OriginalSource))
            {
                if (lastAddPane.PaneGroup == null) // when it's restore from floating.
                {
                    return;
                }

                this._isPaneReordered = true;
                lastGroup.Items.Remove(pane);
                lastGroup.Items.Insert(0, pane);

                return;
            }

            this._isPaneReordered = false;
        }
    }

I implemented this code to solve my problem, however I think this way is not grace and need so many codes.

So, I asked you the RadDocking supported this function.

 

I think it is very useful to support this function in RadDocking, and I hope.

Anyway, It was very helpful. Thank you Martin.