WPF 主界面布局中DockPanel的停靠与默认填充

PF 主界面布局中DockPanel的停靠与默认填充

2014-03-10 18:01 4027人阅读 评论(0) 收藏 举报

分类：

WPF（18）

　在WPF中，通常的主界面大都是DockPanel 根元素，一次DockPanel .Top主菜单、DockPanel .Top Toolbar、DockPanel .Bottom Statusbar，中建Fill一个主区域，但在使用时往往有个误区，就是充满剩余空间的元素如何填充，因为DockPanel没有DockPanel.Fill属性。实际做法是先停靠Menu、Toolbar、Statusbar等等可以通过DockPanel .Top、DockPanel .Bottom、DockPanel .Left、DockPanel .Right停靠的子元素，然后，也就是最后，加入填充区元素，同时注意，不能设置此元素的DockPanel属性，这样，最后加入的元素就自动填充整个剩余空间了。

　　文档中对这一"技巧"没有任何说明，导致无谓的时间浪费，记录于此，希望对大家有所帮助。

 

<DockPanel Name="dockPanel1">
        <Menu Height="23" Name="menu1" DockPanel.Dock="Top">
            <MenuItem Header="用户管理">
                <MenuItem Header="修改密码"></MenuItem>
                <MenuItem Header="管理用户"></MenuItem>
            </MenuItem>
            <MenuItem Header="铁塔管理">
                <MenuItem Header="增加"></MenuItem>
                <MenuItem Header="修改"></MenuItem>
                <MenuItem Header="删除"></MenuItem>
            </MenuItem>
            <MenuItem Header="通信管理">
                <MenuItem Header="启动/停止巡测"></MenuItem>
                <MenuItem Header="通信测试"></MenuItem>
                <Separator/>
                <MenuItem Header="参数设置"></MenuItem>
            </MenuItem>
            <MenuItem Header="历史查询">
                <MenuItem Header="启动/停止巡测"></MenuItem>
                <MenuItem Header="通信测试"></MenuItem>
                <Separator/>
                <MenuItem Header="参数设置"></MenuItem>
            </MenuItem>
            <MenuItem Header="帮助"/>
        </Menu>
        <ToolBarPanel Height="26" Name="toolBarPanel1" DockPanel.Dock="Top" Orientation="Horizontal">
            <ToolBar>
                <Button>111</Button>
                <Button>222</Button>
            </ToolBar>
            <ToolBar Margin="350,0,0,0">
                <Button>111</Button>
                <Button>222</Button>
            </ToolBar>
        </ToolBarPanel>

        <StatusBar Height="23" Name="statusBar1" DockPanel.Dock="Bottom" VerticalAlignment="Bottom" />

 

 　　<!--注意Grid，没有设置任何DockPanel.Dock属性：-->

        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition/>
                <RowDefinition Height="240"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="240"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>

            <GridSplitter Grid.RowSpan="2" Grid.Column="1" HorizontalAlignment="Left" Width="5" Name="gridSplitter1" ResizeDirection="Columns"/>

            <WrapPanel>
                <RadioButton Margin="5">全部</RadioButton>
                <RadioButton Margin="5">三管塔</RadioButton>
                <RadioButton Margin="5">角钢塔</RadioButton>
                <RadioButton Margin="5">单管塔</RadioButton>
            </WrapPanel>
            <TreeView Name="treeView1" Grid.Row="1">
                <TreeViewItem Header="连云港市">
                    <TreeViewItem Header="塔1"></TreeViewItem>
                    <TreeViewItem Header="塔2"></TreeViewItem>
                    <TreeViewItem Header="塔3"></TreeViewItem>
                    <TreeViewItem Header="塔4"></TreeViewItem>
                </TreeViewItem>
                <TreeViewItem Header="XXX市"></TreeViewItem>

            </TreeView>

            <WindowsFormsHost Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" Name="windowsFormsHost1" OpacityMask="{x:Null}" Background="#FF190000" />

            <Image Grid.Row="2"></Image>

        </Grid>
    </DockPanel>

 

　　如果“Dockstyle.Dock”属性设置为 Top 或 Bottom，请将控件的“Width”属性设置为 Auto。同样，如果“Dockstyle.Dock”属性设置为 Left 或 Right，请将控件的“Height”属性设置为 Auto。

　　默认情况下 DockPanel 设置为 LastChildFill，这表示添加到 DockPanel 的最后一个子控件将使其 DockPanel.Dock 属性设置为 Fill。若要更改此行为，请设置 DockPanel 的 LastChildFill 属性。