Multiple windows in WPF and the ability to tile them

Question

I am writing a terminal in WPF, which communicates the host with an embedded device through RS232. I want to be able to open multiple connections that will reside on different tabs, I believe that for that purpose WPF's tabContorl is sufficient, However the customer wants to be able to tile the different tabs on the screen, and as I understand the basic tabControl doesn't allow you to do that.

Any ideas how can this be done?

any help will be appreciated, Thanks in advance.

score 2 · Accepted Answer · answered Dec 24 '14 at 09:41

2

Maybe it's overkill, but I would give a try to Avalon Dock from the WPF Toolkit, it's free. With that, you will be able to move terminals around, dock them wherever you wish and even have only opened at a time if you unpin others.

enter image description here

answered Dec 24 '14 at 09:41

Ondrej Janacek

12,486
14
59
93

(My full comment)First of all thank you for taking the time. I'll probably gonna use the AvalonDock, But I was wondering do you know another recommendation for a third party control (not necesseraly free). plus I am looking for a simple example just to get me started.. if you have a good reference it will be great. tnx. – user2429022 Dec 29 '14 at 08:28
Check http://www.telerik.com/products/wpf/overview.aspx if there's something similar like AvalonDock. As for the example, there's one at http://wpftoolkit.codeplex.com/wikipage?title=AvalonDock&referringTitle=Home – Ondrej Janacek Dec 29 '14 at 19:46

score 1 · Answer 2 · edited May 23 '17 at 12:14

I have made a custom WPF control called ModalContentPresenter that allows you to display modal content which I think will be suitable. The control allows you to conditionally display additional content on top of your primary content.

Your application window will comprise a single ModalContentPresenter which will contain your TabControl in it's primary content and an ItemsControl in it's modal content.

<c:ModalContentPresenter IsModal="{Binding IsTiling}">

    <DockPanel>
        <Button Content="Show tiled view" 
                Command={Binding ShowTiledViewCommand}
                DockPanel.Dock="Top"/>
        <TabControl ItemsSource="{Binding Connections}"> />
    </DockPanel>

    <c:ModalContentPresenter.ModalContent>
        <DockPanel>
            <Button Content="Hide tiled view" 
                    Command={Binding HideTiledViewCommand}
                    DockPanel.Dock="Top"/>
            <Itemscontrol ItemsSource="{Binding Connections}" />        
        </DockPanel>
    </c:ModalContentPresenter.ModalContent>

</c:ModalContentPresenter>

By default the modal content will not be displayed so all the user will see is the TabControl.
Both the TabControl and ItemsControl are bound to the same collection of data in your viewModel ensuring that the tiled view is in sync with the items in the tab control.
Your viewModel must have a Boolean property called IsTiling which should return true when you want the 'tiled' view to be shown and false when it is hidden.
When the tiled view is displayed users will be unable to interact with the primary content.
You can change the layout panel used by the ItemsControl to change how the collection of data is 'tiled'.

See this answer for an additional example of how to use the control.

The interface of your viewModel will look something like this:

public interface ViewModel {
    public ObservableCollection<Connection> Connections { get; }
    public boolean IsTiling { get; }
    public ICommand ShowTiledViewCommand { get; }
    public ICommand HideTiledViewCommand { get; }
}

Once you have this working you can add some additional enhancements to improve the look and feel of the user interface.

I would start by assigning a custom control template to the TabControl so that a Button is displayed in the 'header' area. This Button is bound to a command in your viewModel which is responsible for changing the IsTiling property to true.

This question provides a link to an answer which explores ways of achieving this.

A second enhancement is to remove the button from the modal content and call the HideTiledViewCommand command when the user selects an item in the items control. You can then add some additional logic which selects the correct tab when the tiled view is closed. I think this can be achieved by having an additional property in your viewModel representing the selected connection.

Multiple windows in WPF and the ability to tile them

2 Answers2