三月 23, 2010

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

Written by

  在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 属性。

 

 

 

Category : WPF

Tags :

发表评论

电子邮件地址不会被公开。

Proudly powered by WordPress and Sweet Tech Theme