Current filter:
                                You should refresh the page.
                                Support Center

                                How to: Build a dock UI using the MVVM pattern

                                2

                                This example shows how to build a dock UI using the MVVM pattern.

                                • David Lemieux 12.03.2013

                                  How come the view should be responsible of creating documents and panels? In a true MVVM design this should be the ViewModel's responsibility.

                                • David Lemieux 12.05.2013

                                  Is anyone from DevExpress monitoring comments on examples?

                                • Hello David,
                                  The View only creates root containers where dock panels are placed. This is a required step of creating the Docking UI.

                                • David Lemieux 12.16.2013

                                  Alex, I was refering to MainWindow.xaml.cs file. It has AddPanel_Click and AddDocument_Click methods, in which view models instances are created.

                                  If the purpose of the example is to demonstrate how DX docking can be used with the MVVM pattern, then the DockLayoutManagerViewModel class should be responsible for creating / adding documents. Giving this responsibility to the view class goes straight against MVVM design rules, IMHO.

                                • David, you're right. We have moved the code that creates Panels and Documents to View Models.

                                • David Lemieux 12.17.2013

                                  Thanks. You might want to clean up MainPage's code too. The DockLayoutManagerViewModel is instanciated in both the XAML and code behind. ;)

                                • Raju Muthu 01.06.2014

                                  Can this example extended to using PRISM regions? or is there an example already with this feature utilizing Prism?

                                • Gagan Kapoor 02.01.2014

                                  Hi, I need a dock UI with ability to host different types of views in Document Group (Tabs) at run time using Prism. Can you point me to an example of it ?

                                You must  log in  or  register  to leave comments
                                Select file
                                • MainPage.xaml
                                • MainWindow.xaml
                                • MainPage.xaml.cs
                                • MainWindow.xaml.cs
                                • ViewModel.cs
                                • ViewModel.cs
                                Select language
                                • C#
                                • VB.NET
                                Select version
                                • v2013 vol 2.5 - v2013 vol 2.9
                                • v2011 vol 2.10 - v2013 vol 1.10
                                <UserControl x:Class="DockingMVVM.SL.MainPage"
                                    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                                    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                                    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                                    xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
                                    xmlns:dxd="http://schemas.devexpress.com/winfx/2008/xaml/docking"
                                    xmlns:local="clr-namespace:DockingMVVM.SL"
                                    mc:Ignorable="d"
                                    d:DesignHeight="300" d:DesignWidth="400">
                                    
                                    <UserControl.DataContext>
                                        <local:DockLayoutManagerViewModel/>
                                    </UserControl.DataContext>
                                    
                                    <UserControl.Resources>
                                        <DataTemplate DataType="local:DocumentViewModel">
                                            <Border Background="#FFBEC8D9">
                                                <ContentPresenter Content="{Binding Content}" />
                                            </Border>
                                        </DataTemplate>
                                        <DataTemplate DataType="local:PanelViewModel">
                                            <Border Background="#FFDADFE4">
                                                <ContentPresenter Content="{Binding Content}" />
                                            </Border>
                                        </DataTemplate>
                                        <Style TargetType="dxd:LayoutPanel">
                                            <Setter Property="Caption" Value="{Binding DisplayName}" />
                                        </Style>
                                        <Style TargetType="dxd:DocumentPanel">
                                            <Setter Property="Caption" Value="{Binding DisplayName}" />
                                        </Style>
                                    </UserControl.Resources>
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto" />
                                            <RowDefinition />
                                        </Grid.RowDefinitions>
                                        <StackPanel Orientation="Horizontal">
                                            <Button Name="AddPanel" Content="Add Panel"  Command="{Binding AddPanelCommand}"/>
                                            <Button Name="AddDocument" Content="Add Document" Command="{Binding AddDocumentCommand}"/>
                                        </StackPanel>
                                        <dxb:BarManager Grid.Row="1">
                                            <dxd:DockLayoutManager ItemsSource="{Binding Workspaces}">
                                                <dxd:LayoutGroup>
                                                    <dxd:LayoutGroup Name="PanelHost" DestroyOnClosingChildren="False"/>
                                                    <dxd:DocumentGroup Name="DocumentHost" DestroyOnClosingChildren="False" />
                                                </dxd:LayoutGroup>
                                            </dxd:DockLayoutManager>
                                        </dxb:BarManager>
                                    </Grid>
                                </UserControl>

                                To start a chat you should create a support ticket


                                If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

                                FOLLOW US

                                DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, Silverlight, ASP.NET, WinForms, HTML5 or Windows 8, DevExpress tools help you build and deliver your best in the shortest time possible.

                                Copyright © 1998-2014 Developer Express Inc.
                                All trademarks or registered trademarks are property of their respective owners