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

看了一周多了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>

参考

• http://www.codeproject.com/KB/WPF/wpf2.aspx

• http://www.codeguru.com/csharp/csharp/cs_misc/designtechniques/article.php/c13585__1/Changing-Layout-Dynamically-in-Windows-Forms.htm

• http://blogs.msdn.com/b/wpfsldesigner/archive/2010/06/04/layout-techniques-for-windows-forms-developers.aspx