Expand Tabs from Left side and resizing the rest

4 posts, 0 answers
  1. daddo
    daddo avatar
    4 posts
    Member since:
    Apr 2016

    Posted 07 Apr Link to this post

    Hi, 

    how can I make tabs on the left side that are per default collapsed (see picture) and which should expand to the right side resizing the rest of the window (Grids, etc). I've made the tab on the left side setting TabStrip left but I can't do the rest. there is no collapse property on the tab? 

     

    telerik:RadTabControl   Align="Right" BackgroundVisibility="Collapsed" TabStripPlacement="Left" Grid.RowSpan="4" Grid.Row="1" >
                <telerik:RadTabItem  Header="Something" >
                    <telerik:RadTreeView Grid.Row="1" IsDragDropEnabled="True"   Grid.RowSpan="4" >
                        <telerik:RadTreeViewItem Header="Football" />
                        <telerik:RadTreeViewItem Header="Tennis" />
                        <telerik:RadTreeViewItem Header="Cycling" />
                        <telerik:RadTreeViewItem Header="Basketball" />
                    </telerik:RadTreeView>
                </telerik:RadTabItem>
            </telerik:RadTabControl>

     

     

  2. Ivan
    Admin
    Ivan avatar
    44 posts

    Posted 11 Apr Link to this post

    Hello daddo,

    With the information provided so far we are not sure we understand the result that you want to achieve. Is your intention to collapse and expand the tab items by clicking on a button?

    If this is the case, that scenario is not supported out of the box by RadTabControl. However, you can do this by retemplating the control.

    Regards,
    Ivan
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  3. UI for WPF is Visual Studio 2017 Ready
  4. daddo
    daddo avatar
    4 posts
    Member since:
    Apr 2016

    Posted 12 Apr Link to this post

    Hi Ivan, thank you, i read about retemplating a control but i don't understand how to retemplate it to make the tab collapsable. It should work this way: when I click on the Tab (which is collapsed by default) it should expand to the right making TreeView visible (which is TabItem)  and resize the rest of the objects in the window so they are all visible but smaller. I made the Tab collapsable in the code behind (on mouse_DoubleClick event- still don't know how to do it one one mouse click) but when the TreeView expands from the Tab it doesn't make other elements in the window move and resize ( I have all Rows and Columns set to Auto). It should work similar to the Tools tab in Visual Studio which is on the side and when you click it a window appears (except in my case it's a TreeView and the rest of the Window should move to the right and resize accordingly)
  5. Ivan
    Admin
    Ivan avatar
    44 posts

    Posted 13 Apr Link to this post

    Hi daddo,

    RadTabControl does not support out of the box the behaviors desired by you. In order to achieve your requirement you will need to write custom code.

    Given your last clarifications, it seems that you can explore the option of using the RadDocking control instead of RadTabControl.

    The default behavior of the docking control is to open the tabs on mouse enter. However, with little customization the opening of the tabs can happen on mouse click. This is demonstrated in the attached project with the CustomFlyoutBehavior class.

    However this control also does not have built in functionality to resize the other elements when a tab is opened. The tabs are implemented as popups and for achieving the desired result you can manually resize the desired elements when a tab is opened.

    Regards,
    Ivan
    Telerik
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Back to Top