2:WPF的界面布局

Canvas

定义一个区域，在该区域中可以使用相对于 Canvas 区域的坐标显式定位子元素。

它是一个存储元素的容器，它不会自动调整内部元素的排列及大小。不指定元素位置，元素将默认显示在画布的左上方。Canvas的主要用途是用来画图。Canvas默认不会自动裁减超过自身范围的内容，溢出的内容会显示在Canvas外面，因为默认 ClipToBounds="False"；我们可以设置ClipToBounds="True来裁剪多出的内容。

在窗体中建立三个canvas（ca，ca1，ca2），ca1和ca2包含在ca中。
设置ca填充色为黄色，ca1为绿色，ca2为红色。
在ca1中放入一个TextBlock，一个Button，一个Ellipse。TextBlock和Button完全包括在ca1中，Ellipse超出ca1。
设置ca2的ClipToBounds=”true”。
在ca2中放入一个Ellipse，使其超出ca2。

<Canvas Background="yellow" Name="ca">
        <Canvas Background="green" Height="158" Width="192" Name="ca1">
            <Button Content="Button" Canvas.Left="55" Canvas.Top="121" Width="75"/>
            <TextBlock Canvas.Left="80" TextWrapping="Wrap" Text="白菜" Canvas.Top="66"/>
            <Ellipse Fill="White" Height="87" Canvas.Left="136" Canvas.Top="90" Width="103" />
        </Canvas>
        <Canvas Height="119" Width="133" Background="red" ClipToBounds="True" Canvas.Left="316" Canvas.Top="157" Name="ca2">
            <Ellipse Fill="White" Height="87" Canvas.Left="58" Canvas.Top="67" Width="103"/>
        </Canvas>
    </Canvas>

StackPanel

StackPanel就是将子元素按照一行或者一列排列，通过设置Orientation属性设置横排（Horizontal）和竖排（Vertical默认）。纵向的StackPanel如果不设置子元素宽度，每个元素宽度与StackPanel一样宽，反之横向亦然。如果元素超过了StackPanel的空间，会截断多出的内容。元素的Margin属性用于使元素之间产生一定得间隔，当元素空间大于其内容的空间时，剩余空间将由HorizontalAlignment和VerticalAlignment属性来决定如何分配。

<StackPanel Margin="295,0,45,183" Background="Red">
            <Button Content="Button" Name="button1"/>
            <Button Content="Button" Height="23" Name="button2" Width="75" />
            <Button Content="Button" Height="43" Name="button3" Width="310" />
        </StackPanel>
        <StackPanel Margin="26,171,253,24" Name="stackPanel1" Orientation="Horizontal" Background="Red">
            <Button Content="Button"  Name="button4" Margin="10" />
            <Button Content="Button" Height="23" Name="button5" Width="75" Margin="10" />
        </StackPanel>

WrapPanel

从左至右或从上至下按顺序位置定位子元素，如果排满则自动换行至下一行或列继续排列。WrapPanel面板也提供了 Orientation属性设置排列方式，属性设置横排（Horizontal默认）和竖排（Vertical）

<WrapPanel Margin="25,12,247,207" Name="wrapPanel1" Background="Blue">
            <Button Content="Button" Height="23" Width="75" />
            <Button Content="Button" Height="23" Width="75" />
            <Button Content="Button" Height="23" Width="75" />
            <Button Content="Button" Height="23" Width="75" />
            <Button Content="Button" Height="23" Width="75" />
        </WrapPanel>
        <WrapPanel Height="180" Margin="290,119,0,0" Name="wrapPanel2" Width="168" Background="Blue" Orientation="Vertical">
            <Button Content="Button" Height="23" Width="75" />
            <Button Content="Button" Height="23" Width="75" />
            <Button Content="Button" Height="23" Width="75" />
            <Button Content="Button" Height="23" Width="75" />
            <Button Content="Button" Height="23" Width="75" />
            <Button Content="Button" Height="23" Width="75" />
            <Button Content="Button" Height="23" Width="75" />
            <Button Content="Button" Height="23" Width="75" />
            <Button Content="Button" Height="23" Width="75" />
            <Button Content="Button" Height="23" Width="75" />
        </WrapPanel>

DockPanel

DockPanel面板可以将子元素停靠在面板的上下左右。DockPanel会对每个子元素进行排序，并停靠在面板的一侧，多个停靠在同侧的元素则按顺序排序，最后一个元素填充这个Panel（这个需要设置LastChildFill属性为 True）。对于在DockPanel中的元素的停靠属性可以通过Panel.Dock的附加属性来设置.

<DockPanel Margin="0,0,255,145" Name="dockPanel1" Background="Yellow" LastChildFill="False">
            <Button Content="上1" Height="23" Name="button1" Width="75" DockPanel.Dock="Top" />
            <Button Content="上2" Height="23" Name="button1_1" Width="75" DockPanel.Dock="Top" />
            <Button Content="右" Height="23" Name="button2" Width="75" DockPanel.Dock="Right" />
            <Button Content="下" Height="23" Name="button3" Width="75" DockPanel.Dock="Bottom" />
            <Button Content="左" Height="23" Name="button4" Width="75" DockPanel.Dock="Left" />
            <Button Content="Last" Name="button5"/>
        </DockPanel>
        <DockPanel Margin="165,172,0,0" Name="dockPanel2" Background="Yellow">
            <Button Content="上1" Height="23" Name="button21" Width="75" DockPanel.Dock="Top" />
            <Button Content="上2" Height="23" Name="button21_1" Width="75" DockPanel.Dock="Top" />
            <Button Content="右" Height="23" Name="button22" Width="75" DockPanel.Dock="Right" />
            <Button Content="下" Height="23" Name="button23" Width="75" DockPanel.Dock="Bottom" />
            <Button Content="左" Height="23" Name="button24" Width="75" DockPanel.Dock="Left" />
            <Button Content="Last" Name="button25"/>
        </DockPanel>

Grid

Grid <Grid.ColumnDefinitions>列元素集和<Grid.RowDefinitions>行元素集合两种元素组成。类似于html的table。放在Grid面板中的控件元素都必须采用附加属性语法定义其放置所在的行和列，否则元素均默认放置在第0行第0列。

固定长度——宽度不够，会裁剪，单位pixel。
2.自动长度——自动匹配列中最长元素的宽度。
3.比例长度——*表示占用剩余的全部宽度；两行都是*，将平分剩余宽度；像上面的一个2*，一个*，表示前者2/3宽度。

使用Grid.ColumnSpan和Grid.RowSpan附加属性可以让相互间隔的行列合并

使用GridSplit控件结合Grid控件实现类似于WinForm中SplitContainer的功能

<Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="90"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <GridSplitter Width="10" Grid.Column="1" Grid.RowSpan="3"></GridSplitter>
        <Rectangle Fill="Green" Height="60" Width="60"/>
        <Rectangle Fill="Blue" Height="60" Width="60" Grid.Column="0" Grid.Row="3"/>
        <Rectangle Fill="Red" Grid.ColumnSpan="2" Grid.Row="1"/>
    </Grid>

UniformGrid

均布网格的是Grid的简化版本，每个单元格的大小相同，不用在定义行列集合。均布网格每个单元格只能容纳一个元素，将自动按照定义在其内部的元素个数，自动创建行列，并通常保持相同的行列数。

<UniformGrid>
        <Button Content="Button" Height="23" Name="button1" Width="75" />
        <Button Content="Button" Height="23" Name="button2" Width="75" />
        <Button Content="Button" Height="23" Name="button3" Width="75" />
        <Button Content="Button" Height="23" Name="button4" Width="75" />
        <Button Content="Button" Height="23" Name="button5" Width="75" />
    </UniformGrid>

ViewBox

ViewBox这个控件通常和其他控件结合起来使用，是WPF中非常有用的控制。定义一个内容容器，Stretch属性可拉伸和缩放单个子元素以填满可用空间。一个 Viewbox 只能具有一个 Child。

<Viewbox Stretch="UniformToFill">
            <Button Content="Button" Height="23" Name="button1" Width="75" />
        </Viewbox>

Border

Border 是一个装饰的控件，此控件绘制边框及背景，在 Border 中只能有一个子控件（这个子控件又可以包含多个子控件）。

ScrollViewer

用户界面中的内容比计算机屏幕的显示区域大，大出的部分就会破坏原有的布局。利用 ScrollViewer 控件可以方便地使应用程序中的内容具备滚动功能。在ScrollViewer中也只能包含一个子控件

<Border BorderBrush="Red" BorderThickness="5" Height="200" Margin="56,49,147,62" Name="border1" Width="300" Background="Blue">
            <ScrollViewer Height="100" Width="200" FlowDirection="LeftToRight" Background="Lime" HorizontalContentAlignment="Left" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
                <Button Content="Button" Height="58" Name="button1" Width="259" FlowDirection="LeftToRight" />
            </ScrollViewer>
        </Border>

打包下载

https://files.cnblogs.com/terryzh/WPF%E5%B8%83%E5%B1%80.7z