WPF 的 DockPanel 分隔条控件

• 下载演示项目 - 26.16 KB

引言

此控件为 DockPanel 中的元素添加了大小调整功能，就像 GridSplitter 可以调整 Grid 中列和行的大小一样。当调整父容器大小时，除非将 ProportionalResize 属性设置为 False，否则元素将按比例调整大小。

Using the Code

添加 OpenSourceControls 命名空间，并在希望调整的每个面板之后添加一个 DockPanelSplitter 控件。DockPanel.Dock 属性控制分隔线在面板的哪个边缘工作。

<Window x:Class="DockPanelSplitterDemo.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:osc="clr-namespace:OpenSourceControls"
    Title="DockPanelSplitter demo" Height="400" Width="600">
    <DockPanel>
        <Grid Name="LeftPane" DockPanel.Dock="Left" 
                      Width="200" MinWidth="40">
            <Rectangle Fill="LightBlue"/>
        </Grid>
        <osc:DockPanelSplitter DockPanel.Dock="Left" Width="4"/>
 
        <Grid Name="RightPane" DockPanel.Dock="Right" Width="80">
            <Rectangle Fill="Yellow"/>
        </Grid>
        <osc:DockPanelSplitter DockPanel.Dock="Right" Width="4"/>
        
        <Grid Name="TopPane" DockPanel.Dock="Top" 
                     Height="80" MinHeight="20">
            <Rectangle Fill="LightGreen"/>
        </Grid>
        <osc:DockPanelSplitter DockPanel.Dock="Top" Height="4"/>
        
        <Grid Name="BottomPane" DockPanel.Dock="Bottom" Height="70">
            <Rectangle Fill="LightPink"/>
        </Grid>
        <osc:DockPanelSplitter DockPanel.Dock="Bottom" Height="4"/>
        
        <Grid Name="MainPane" Background="Coral" >
            <Rectangle Fill="Coral"/>
        </Grid>
    </DockPanel>
</Window>

可以通过将 ProprtionalResize 依赖属性设置为 False 来关闭比例大小调整模式。

<osc:DockPanelSplitter DockPanel.Dock="Right" Width="4" ProportionalResize="False"/>

相关项目链接

• WpfContrib DockSplitter (无法在 ProportionalResize 依赖属性中找到设置为 False 的选项。创建带有分割条的可调整大小的面板（链接似乎无法工作??)
• Thumb 示例

未来的增强

• 使用 Thumb 控件代替捕获鼠标事件

历史

• 2009年3月21日 - 首次发布
• 2009年5月25日 - 添加了比例调整大小功能
• 2009年8月9日 - 更改为自定义控件，添加了模板演示，限制了客户端区域的大小