WPF学习笔记一之布局

1.Canvas 布局控件
Canvas主要用来画图,注意Canvas.Left/Right/Top/Bottom

<Canvas Margin="10,10,10,10" Background="White" >

        <Rectangle Name="rect" Canvas.Left="300" Canvas.Top="180" Fill="Black" Stroke="Red"  Width="200" Height="200"/>

        <Ellipse  Name="el" Canvas.Left="160" Canvas.Top="150" Fill="Azure" Stroke="Green" Width="180" Height="180"/>

    </Canvas>

2.StackPanel 布局控件
StackPanel就是将子元素按照堆栈的形式一一排列，可以通过设置StackPanel的Orientation属性设置两种排列方式：横排（Horizontal，该值为默认值）和竖排（Vertical）

3.WrapPanel 布局控件
WrapPanel面板在可能的空间中，一次以一行或一列的方式布置控件。默认情况下，WrapPanel.Orientation属性设置为Horizontal，控件从左向右进行排列，然后再在下一行中排列，但你可将WrapPanel.Orientation设置为Vertical，从而在多个列中放置元素。与StackPanel面板不同，WrapPanel面板实际上用来控制用户界面中一小部分的布局细节，并非用于控制整个窗口布局。

4.DockPanel 布局控件
DockPanel面板定义一个区域，在此区域中，你可以使子元素通过锚点的形式进行排列。DockPanel类似于WinForm中Dock属性的功能。对于在DockPanel中的元素的停靠可以通过Panel.Dock的附加属性来设置，如果设置LastChildFill属性为true，则最后一个元素将填充剩余的所有空间。

注意:DockPanel.Dock

5.Grid 布局控件
Grid比起其他Panel，功能是最多最为复杂的布局控件。它由<Grid.ColumnDefinitions>列元素集合和<Grid.RowDefinitions>行元素集合两种元素组成。而放在Grid面板中的元素必须显式采用附加属性定义其所在行和列，否则元素均默认放置在第0行第0列。

6.UniformGrid 布局控件
　UniformGrid是Grid简化版本，不像Grid面板，UniformGrid不需要预先定义行集合和列集合，反而，通过简单设置Rows和Columns属性来设置尺寸。每个单元格始终具有相同的大小。UniformGrid每个单元格只能容纳一个元素，将自动按照在其内部的元素个数，自动创建行和列，并通过保存相同的行列数。

7.ScrollViewer 控件
通常用户界面中的内容比计算机屏幕的显示区域大的时候，可以利用ScrollViewer控件可以方便地使应用程序中的内容具备滚动功能

<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Auto">

          <Rectangle Width="500" Height="400" Fill="Green"/>

</ScrollViewer>

8.自定义布局控件

在前面介绍过布局系统的工作原理是先测量后排列，测量即是确定面板需要多大空间，排列则是定义面板内子元素的排列规则。所以，要实现自定义布局控件，需要继承于Panel类并重写MeasureOverride和ArrangeOverride方法即可

namespace CustomLayoutControl

{

    public class CustomStackPanel: Panel

    {

        public CustomStackPanel()

            : base()

        {

        }

        // 重写默认的Measure方法

        // avaiableSize是自定义布局控件的可用大小

        protected override Size MeasureOverride(Size availableSize)

        {

            Size panelDesiredSize = new Size();

            foreach (UIElement child in this.InternalChildren)

            {

                child.Measure(availableSize);

                // 子元素的期望大小

                panelDesiredSize.Width += child.DesiredSize.Width;

                panelDesiredSize.Height += child.DesiredSize.Height;

            }

            return panelDesiredSize;

        }

        // 重写默认的Arrange方法

        protected override Size ArrangeOverride(Size finalSize)

        {

            double x = ;

            double y = ;

            foreach (UIElement child in this.InternalChildren)

            {

                // 排列子元素的位置

                child.Arrange(new Rect(new Point(x, y), new Size(finalSize.Width - , child.DesiredSize.Height)));

                y += child.RenderSize.Height + ;

            }

            return finalSize;

        }

    }

}

布局综合运用

<Window x:Class="WPFLayoutDemo.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        WindowStartupLocation="CenterScreen"

        Title="布局综合运用实例" Height="400" Width="480">

    <DockPanel Width="Auto" Height="Auto" LastChildFill="True">

        <!--顶部菜单区域-->

        <Menu Width="Auto" Height="20" Background="LightGray" DockPanel.Dock="Top">

            <!--File菜单项-->

            <MenuItem Header="文件">

                <MenuItem Header="保存"/>

                <Separator/>

                <MenuItem Header="退出"/>

            </MenuItem>

            <!--About 菜单项-->

            <MenuItem Header="帮助">

                <MenuItem Header="关于本产品"/>

            </MenuItem>

        </Menu>

        <!--状态栏-->

        <StackPanel Width="Auto" Height="25" Background="LightGray" Orientation="Horizontal" DockPanel.Dock="Bottom">

            <Label Width="Auto" Height="Auto" Content="状态栏" FontFamily="Arial" FontSize="12"/>

        </StackPanel>

        <!--Left-->

        <StackPanel Width="130" Height="Auto" Background="Gray" DockPanel.Dock="Left">

            <Button Margin="10" Width="Auto" Height="30" Content="导航栏"/>

            <Button Margin="10" Width="Auto" Height="30" Content="导航栏"/>

            <Button Margin="10" Width="Auto" Height="30" Content="导航栏"/>

        </StackPanel>

        <!--Right-->

        <Grid Width="Auto" Height="Auto" Background="White">

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="*"/>

                <ColumnDefinition Width="*"/>

            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>

                <RowDefinition Height="*"/>

                <RowDefinition Height="*"/>

            </Grid.RowDefinitions>

            <Rectangle Fill="Gray" Margin="10,10,10,10" Grid.Row="0" Grid.Column="0"/>

            <Rectangle Fill="Gray" Margin="10,10,10,10" Grid.Row="0" Grid.Column="1"/>

            <Rectangle Fill="Gray" Margin="10,10,10,10" Grid.Row="1" Grid.Column="0"/>

            <Rectangle Fill="Gray" Margin="10,10,10,10" Grid.Row="1" Grid.Column="1"/>

        </Grid>

    </DockPanel>

</Window>