WPF DockPanel中布局 [英] WPF DockPanel Layout

问题描述

我要改变我的DockPanel中的定位，而我遇到了一些麻烦。我是比较新的WPF，这样可以解释它

不管怎样，下面是当前的布局：

 <主题：bottomPanel DockPanel.Dock =底部X：NAME =bottomPanelClipToBounds =FALSESnapsToDevicePixels =FALSE的Horizo​​ntalAlignment =中心HEIGHT =145 /> 
<主题：rightPanel DockPanel.Dock =右X：NAME =rightPanelClipToBounds =FALSESnapsToDevicePixels =FALSE/> 
<主题：leftPanel DockPanel.Dock =左X：NAME =leftPanelClipToBounds =FALSESnapsToDevicePixels =FALSE/> 
<主题：MapPanel DockPanel.Dock =评出的X：NAME =mapPanelClipToBounds =FALSESnapsToDevicePixels =FALSE/> 
  

在涂料可视化（笑）：

我想改变布局，类似如下：

这可能吗？如果是这样，你会推荐什么办法？任何指导将是有益的！谢谢

顺便说一句：有没有任何让我看到我的应用程序布局应用程序的运行（即添加网格线到每个面板或东西）应用程序？

不管怎么说，谢谢！

解决方案

 <网格和GT; 
< Grid.RowDefinitions> 
< RowDefinition /> 
< RowDefinition高度=自动/> 
< /Grid.RowDefinitions> 
 
< Grid.ColumnDefinitions> 
< ColumnDefinition /> 
< ColumnDefinition /> 
< ColumnDefinition WIDTH =自动/> 
< /Grid.ColumnDefinitions> 
 
< BORDER =背景灰色Grid.ColumnSpan =3> 
< TextBlock的文本=顶部区域/> 
< /边框> 
 
<边框背景=洋红Grid.Row =1HEIGHT =200> 
< TextBlock的文本=左侧区域/> 
< /边框> 
 
< BORDER =背景的红Grid.Row =1Grid.Column =1HEIGHT =200> 
< TextBlock的文本=底部区域/> 
< /边框> 
 
<边框背景=青色Grid.Column =2Grid.RowSpan =2保证金=0,200,0,0WIDTH =200> 
< TextBlock的文本=右侧区域/> 
< /边框> 
< /网格和GT; 
  

I want to change the alignment of my dockPanel, and I'm having some trouble. I'm relatively new to WPF, so that may explain it.

Anyways, here is the current layout:

    <theme:bottomPanel DockPanel.Dock="Bottom" x:Name="bottomPanel" ClipToBounds="False" SnapsToDevicePixels="False" HorizontalAlignment="Center" Height="145" />
    <theme:rightPanel DockPanel.Dock="Right" x:Name="rightPanel" ClipToBounds="False" SnapsToDevicePixels="False"/>
    <theme:leftPanel DockPanel.Dock="Left" x:Name="leftPanel" ClipToBounds="False" SnapsToDevicePixels="False" />
    <theme:MapPanel DockPanel.Dock="Top" x:Name="mapPanel" ClipToBounds="False" SnapsToDevicePixels="False" />

Visualized in Paint (lol) :

I would like to change the layout to something like the following:

Is this possible? If so, what approach would you recommend? Any guidance would be helpful! Thank you.

As an aside: is there any application that allows me to see my application layout as the app runs (i.e. add gridlines to each panel or something)?

Anyways, thanks!

解决方案

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <Border Background="Gray" Grid.ColumnSpan="3">
        <TextBlock Text="Top Area"/>
    </Border>

    <Border Background="Magenta" Grid.Row="1" Height="200">
        <TextBlock Text="Left Area"/>
    </Border>

    <Border Background="Red" Grid.Row="1" Grid.Column="1" Height="200">
        <TextBlock Text="Bottom Area"/>
    </Border>

    <Border Background="Cyan" Grid.Column="2" Grid.RowSpan="2" Margin="0,200,0,0" Width="200">
        <TextBlock Text="Right Area"/>
    </Border>
</Grid>

这篇关于WPF DockPanel中布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！