WPF下的布局(Layout、Panel)小记

最新推荐文章于 2024-11-04 20:27:32 发布

原创最新推荐文章于 2024-11-04 20:27:32 发布 · 1.3w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#wpf #layout #textbox #webbrowser #qt #alignment

C#/.NET 专栏收录该内容

9 篇文章

订阅专栏

本文详细解析了WPF中的控件与布局机制，包括控件的继承关系、常见控件介绍、布局组件及其用法，以及如何利用布局组件实现不同布局效果。通过实例展示了如何使用Canvas、DockPanel、Grid、StackPanel、VirtualizingPanel和WrapPanel进行界面布局，并阐述了在WPF中控件位置与大小的调整方式。

看了一周多了C#和.NET了，还没有搞清楚 visual C# 中WPF的界面设计器的布局怎么弄，以及常用的控件分别有哪些。

接下来看看WPF中的控件与布局。

继承关系？

没有图片，用表格凑活一下

继承关系		该类继承的Interface
\| \| V \| \| V	ContentControl	IAddChild	--> Window、Button等各类控件都派生自这儿
	Control
	FrameworkElement	IFrameworkInputElement IInputElement ISupportInitialize IHaveResources IQueryAmbient	-->布局Panel，各类形状Shape 都派生自这儿
	UIElement	IAnimatable IInputElement
	Visual	DUCE.IResource
	DependencyObject
	DispatcherObject

布局

在WPF中，这些东西被称为Panel。在Qt中称为 Layout

Canvas	画布，感觉上，这个东西应该不算布局了，需要手动指定其上各个控件的位置和大小。（WPF，每一个控件中只能指定一个子控件？）
DockPanel	水平或竖直地布局子元素，相对于另一个
Grid	网格状布局，类比Qt中的QGridLayout
StackPanel	水平或竖直布局所有子元素，类比 Qt中的 QBoxLayout，而和QStackedLayout没有共同点
VirtualizingPanel	使部分子元素可见(抽象类)
WrapPanel	子元素可以自动换行，类比Qt中的 Flow Layout

在Qt中，每个Widget都有一个被称为QSizePolicy的东西，用来控制自己在布局中的变化的意愿。在 WPF 中，类似的东西称为Alignment(对齐)

HorizontalAlignment	Left Right Center Stretch
VerticalAlignment	Top Center Bottom Stretch

除此外，每个控件还有两个重要属性

Margin
Padding

Grid

1个2X2的网格布局，

首先定义行和列的属性(自动，固定，按比例)
放置各个控件（控件通过自己的附加属性来告诉布局额外的信息）

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
         </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Slider Name="slider1"  VerticalAlignment="Center" />
        <Slider Name="slider2"  VerticalAlignment="Center" Grid.Row="1" />
        <TextBox Name="textBox1" VerticalAlignment="Center" Grid.Column="1" />
        <TextBox Name="textBox2" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" />
    </Grid>

StackPanel

相当于Qt中QBoxLayout，重要属性就是方向：水平、竖直

    <StackPanel Orientation="Horizontal">
        <ListBox Name="listBox1"  Width="100" />
        <TabControl  Name="tabControl1" Width="200">
            <TabItem Header="tabItem1" Name="tabItem1">
                <Grid />
            </TabItem>
        </TabControl>
    </StackPanel>

DockPanel

这个东西比较有意思，应该也是很有用了。由于每个控件都要Top/Botton/Left/Right这样靠在一个边上，所以剩下的空间总是一个矩形，而后来的控件占据该矩形一边后，又形成一个新的矩形。

    <DockPanel Name="dockPanel1">
        <ProgressBar Height="20" Name="progressBar1" DockPanel.Dock="Top" VerticalAlignment="Top" />
        <MediaElement Name="mediaElement1" Width="160" HorizontalAlignment="Left" />
        <ScrollBar Name="scrollBar1" Orientation="Horizontal" Height="20" VerticalAlignment="Bottom" />
        <WebBrowser Name="webBrowser1" />
    </DockPanel>

一个重要属性是：LastChildFill

其他

类似于Qt中的QSplitter，WPF中有个GridSplitter

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <GridSplitter Grid.Column="0" Grid.RowSpan="2" Width="10" Background="Red" />
        <Slider Name="slider1"  VerticalAlignment="Center" />
        <Slider Name="slider2"  VerticalAlignment="Center" Grid.Row="1" />
        <TextBox Name="textBox1" VerticalAlignment="Center" Grid.Column="1" />
        <TextBox Name="textBox2" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1" />
    </Grid>