Avalondock MVVM Layout

有些话、适合烂在心里 提交于 2020-01-11 06:40:12

问题


So The Question has been asked before but not answered or not answered the way I would like

I know how to create the Layout I want to achive, using LayoutAnchorablePaneGroup, LayoutAnchorablePane and LayoutDocument in XAML, but I wanted to use Avalondock in a MVVM way, reducing my XAML to:

<avalonDock:DockingManager x:Name="dockingManager" 
                                       DataContext="{Binding DockManagerViewModel}"
                                       DocumentsSource="{Binding Documents}"
                                       AnchorablesSource="{Binding Anchorables}"
                                       Loaded="dockingManager_Loaded" 
                                       Unloaded="dockingManager_Unloaded">

Filling the Documents and Anchorables makes the desired windows appear in the dockingManager, but I don't see how I can secify the location in which they will appear.

How can I specify some rules ( prefferably in XAML ), to build a specific Layout, without loosing the MVVM separation?

E.G.: objects of Type A should all go togehter in a LayoutAnchorablePane on the right, Objects of type B all go together in a LayoutAnchorablePane on the left etc..

Thanks in advance.


回答1:


I went to the same situation. and found a solution which is tricky but works for me.

Followed the Solution on Code Project and implimented save and load the layout.

note that for the first time when the application starts it does not have the layout so you need to create a XML with your desired layout and later on you can load the saved layout. hope this helps.

Example Docking Manager :

  <xcad:DockingManager x:Name="DockingManagerDockView"
                         AnchorablesSource="{Binding AnchorableSource}" 
                         DocumentsSource="{Binding DocumentSource}" 
                         Utility:AvalonDockLayoutSerializer.SaveLayoutCommand="{Binding SaveLayoutCommandOnExit}"
                         Utility:AvalonDockLayoutSerializer.LoadLayoutCommand="{Binding LoadLayoutCommand}">       
    <xcad:DockingManager.Theme>
        <xcad:MetroTheme />
    </xcad:DockingManager.Theme>
    <xcad:DockingManager.LayoutUpdateStrategy>
        <Pane:LayoutInitializer/>
    </xcad:DockingManager.LayoutUpdateStrategy>
    <xcad:DockingManager.Resources>            
        <DataTemplate DataType="{x:Type ViewModels:ExplorerViewModel}">
            <Views:ExplorerView />
        </DataTemplate>            
        <DataTemplate DataType="{x:Type ViewModels:TableOfContentViewModel}">
            <Views:TableOfContentView x:Name="TOCView" Focusable="True">
                <Views:TableOfContentView.InputBindings>
                    <KeyBinding Key="F5" Command="{Binding GridF5Command}"/>
                </Views:TableOfContentView.InputBindings>
            </Views:TableOfContentView>
        </DataTemplate>
        <DataTemplate DataType="{x:Type ViewModels:PropertyViewModel}">
            <Views:PropertyView />
        </DataTemplate>           
        <DataTemplate DataType="{x:Type ViewModels:SearchViewModel}">
            <Views:SearchPanel />
        </DataTemplate>
        <DataTemplate DataType="{x:Type ViewModels:DocumentViewModel}">
            <Views:DocumentView />
        </DataTemplate>
        <DataTemplate DataType="{x:Type ViewModels:ReIndexPanelViewModel}">
            <Views:ReIndexPanel />
        </DataTemplate>
    </xcad:DockingManager.Resources>       
    <xcad:DockingManager.LayoutItemContainerStyleSelector>
        <Pane:PanesStyleSelector>
            <Pane:PanesStyleSelector.ToolStyle>
                <Style TargetType="{x:Type xcad:LayoutAnchorableItem}">
                    <Setter Property="Title" Value="{Binding Model.Title}"/>
                    <Setter Property="Visibility" Value="{Binding Model.IsVisible, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}, ConverterParameter={x:Static Visibility.Hidden}}"/>
                    <Setter Property="ContentId" Value="{Binding Model.ContentId}"/>
                    <Setter Property="FlowDirection" Value="LeftToRight"/>
                    <Setter Property="UseLayoutRounding" Value="False"/>
                    <Setter Property="IconSource" Value="{Binding Model.IconSource}"/>
                </Style>
            </Pane:PanesStyleSelector.ToolStyle>
            <Pane:PanesStyleSelector.FileStyle>
                <Style TargetType="{x:Type xcad:LayoutItem}">
                    <Setter Property="Title" Value="{Binding Model.Title}"/>
                    <Setter Property="ToolTip" Value="{Binding Model.FilePath}"/>
                    <Setter Property="ContentId" Value="{Binding Model.ContentId}"/>
                    <Setter Property="CanClose" Value="False"/>                        
                </Style>
            </Pane:PanesStyleSelector.FileStyle>
        </Pane:PanesStyleSelector>
    </xcad:DockingManager.LayoutItemContainerStyleSelector>
    <xcad:LayoutRoot>
        <xcad:LayoutPanel Orientation="Horizontal">                
                <xcad:LayoutAnchorablePaneGroup>
                    <xcad:LayoutAnchorablePane Name="Explorer" DockMinWidth="250"/> 
                    <xcad:LayoutAnchorablePane Name="TOC" DockMinWidth="500"/>
                    <xcad:LayoutAnchorablePane Name="Property" DockMinWidth="300" />
                    <xcad:LayoutAnchorablePane Name="Search" DockMinWidth="300" />
                    <xcad:LayoutAnchorablePane Name="ReIndex" DockMinHeight="300" />
                </xcad:LayoutAnchorablePaneGroup>
            <xcad:LayoutDocumentPaneGroup >
                <xcad:LayoutDocumentPane/>
            </xcad:LayoutDocumentPaneGroup>
        </xcad:LayoutPanel>            
    </xcad:LayoutRoot>
</xcad:DockingManager>


来源:https://stackoverflow.com/questions/35270439/avalondock-mvvm-layout

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!