通用工业视觉软件设计之主窗口UI设计-设计主控件

一 使用命令空间

        xmlns:Avalon="https://github.com/Dirkster99/AvalonDock"

二 设计主体控件设计

1. 定义avalon:DockingManager
2. 设置布局avalon:LayoutRoot 
3. 设置总（父）容器avalon:LayoutPanel
4. 设置子容器（设置水平或者垂直布局）：avalon:LayoutPanel
5. 设置可停靠窗格类：Avalon:LayoutAnchorablePane
6. 可停靠面板类：LayoutAnchorable 
7. 设置显示控件

        <!--主界面-->
        <Avalon:DockingManager 
           x:Name="dockingManager" 
           Grid.Row="1" 
           Background="Gray" 
           AllowMixedOrientation="True">

            <!--表头的样式-->
            <Avalon:DockingManager.AnchorableTitleTemplate>
                <DataTemplate>
                    <Border Background="#212121">
                        <Label  Content="{Binding Title}" Foreground="White" VerticalAlignment="Center" FontSize="13" Height="24"/>
                    </Border>
                </DataTemplate>
            </Avalon:DockingManager.AnchorableTitleTemplate>

            <Avalon:LayoutRoot>

                <!--主容器-->
                <Avalon:LayoutPanel>
                    <!--容器水平布局-->
                    <Avalon:LayoutPanel Orientation="Horizontal">
                        <Avalon:LayoutAnchorablePaneGroup   DockMinWidth="240" FloatingWidth="240">
                            <Avalon:LayoutAnchorablePane x:Name="panelLeft">
                                <Avalon:LayoutAnchorable Title="项目栏" ContentId="1"  CanClose="False" CanHide="False" CanAutoHide="False">
                                    <!--项目栏-->
                                    <StackPanel Background="AliceBlue"></StackPanel>
                                </Avalon:LayoutAnchorable>

                                <Avalon:LayoutAnchorable Title="功能栏"   ContentId="1"  CanClose="False" CanHide="False" CanAutoHide="False">
                                    <!--功能栏-->
                                    <ScrollViewer VerticalScrollBarVisibility="Hidden" >
                                        <StackPanel Background="Red"></StackPanel>
                                    </ScrollViewer>
                                </Avalon:LayoutAnchorable>
                            </Avalon:LayoutAnchorablePane>
                        </Avalon:LayoutAnchorablePaneGroup>

                        <Avalon:LayoutPanel>
                            <!--流程栏-->
                            <Avalon:LayoutAnchorablePane x:Name="LayAnch2">
                                <Avalon:LayoutAnchorable Title="流程栏" ContentId="2"   CanClose="False" CanHide="False" CanAutoHide="False">
                                    <!--流程栏-->
                                    <StackPanel Background="Blue"></StackPanel>
                                </Avalon:LayoutAnchorable>
                            </Avalon:LayoutAnchorablePane>
                        </Avalon:LayoutPanel>

                    </Avalon:LayoutPanel>

                    <!--容器垂直布局-->
                    <Avalon:LayoutPanel Orientation="Vertical">
                        <!--图像显示-->
                        <Avalon:LayoutAnchorablePane>
                            <Avalon:LayoutAnchorable Title="图像显示" ContentId="123"  CanClose="False" CanHide="False" CanAutoHide="False">
                                <Grid Name="Border_Hwindow"/>
                            </Avalon:LayoutAnchorable>
                        </Avalon:LayoutAnchorablePane>

                        <Avalon:LayoutPanel Orientation="Horizontal" x:Name="LayAnch3">
                            <!--LOG日志-->
                            <Avalon:LayoutAnchorablePane>
                                <Avalon:LayoutAnchorable Title="LOG日志" ContentId="123"  CanClose="False" CanHide="False" CanAutoHide="False">
                                    <!--LOG日志-->
                                    <StackPanel Background="Pink"/>
                                </Avalon:LayoutAnchorable>
                            </Avalon:LayoutAnchorablePane>
                            <!--设备状态-->
                            <Avalon:LayoutAnchorablePane>
                                <Avalon:LayoutAnchorable Title="设备状态" ContentId="123"  CanClose="False" CanHide="False" CanAutoHide="False">
                                    <!--设备状态-->
                                    <StackPanel Background="Yellow"/>
                                </Avalon:LayoutAnchorable>
                            </Avalon:LayoutAnchorablePane>
                        </Avalon:LayoutPanel>
                    </Avalon:LayoutPanel>

                </Avalon:LayoutPanel>
            </Avalon:LayoutRoot>

        </Avalon:DockingManager>