DockPanel布局

最新推荐文章于 2023-12-29 21:09:40 发布

FlyingColors_Snow

最新推荐文章于 2023-12-29 21:09:40 发布

阅读量1.8k

点赞数

分类专栏：技术解决方法文章标签： border header image wpf file

本文链接：https://blog.youkuaiyun.com/FlyingColors_Snow/article/details/1493019

版权

技术解决方法专栏收录该内容

6 篇文章

订阅专栏

WPF基本来说是一个做界面的新技术，它把source同界面分离。

DockPanel：用于设计界面布局

可以在Window中设置多个DockPanel将Window分成若干个区域（DockPanel支持嵌套）

eg：

<DockPanel Width="20" Background="Cornsilk"/>
  <DockPanel Width="800" Height="600">
   <Border DockPanel.Dock="Top">
    <Image Margin="10" Name="currentImage" />
   </Border>
  </DockPanel>
</DockPanel>
这样就将Window分成了两个区域

Border

在DockPanel中可以用DockPanel和Border对DockPanel进行分割

<DockPanel Background="DarkSeaGreen" LastChildFill="True">
  <Border DockPanel.Dock="Right" Width="200" Margin="10" Background="Green">
    <Border Style="{StaticResource DarkVerGradient}">
     <TextBlock Style="{StaticResource Header1}" Text="Select An Image:" />
    </Border>
    ...

    <StackPanel Background="#E5E5E5" Margin="0,10,0,10">
     <Border Style="{StaticResource DarkVerGradient}">
      <TextBlock Style="{StaticResource Header1}" Text="METADATA" />
     </Border>
     <TextBlock Style="{StaticResource Header2}" Text="Image Size"/>
     <TextBlock Style="{StaticResource Normal}" Name="imageSize" />
     <TextBlock Style="{StaticResource Header2}" Text="Pixel Format"/>
     <TextBlock Style="{StaticResource Normal}" Name="imageFormat" />
     <TextBlock Style="{StaticResource Header2}" Text="File Size"/>
     <TextBlock Style="{StaticResource Normal}" Name="fileSize" />
    </StackPanel>
   </StackPanel>
  </Border>
    <Border DockPanel.Dock="Left" Width="20" Background="Chocolate"/>

    <DockPanel Width="20" Background="Cornsilk"/>

  <DockPanel Width="800" Height="600" Background="Maroon">
   <Border DockPanel.Dock="Top">
    <Image Margin="10" Name="currentImage" />
   </Border>
  </DockPanel>

</DockPanel>
Border 也可以进行嵌套