WPF开发布局

一、WPF

WPF（Windows Presentation Foundation）中文译为：Windows 展现框架。是.NET3.0 开始出现的，简单理解
就是新一代的桌面应用程序开发框架。和 Windows 相比，具有华丽的外表不说，更重要的是对不同设备的
适应能力大大增强。让开发界面和后台实现，完全分离。因为 WPF 有专门的设计工具 Blend Visual Studio
和 Visual Studio 是一起发布的，Blend 是给专业美工设计准备的。
XAML（Extensible Application Markup Language）可扩展应用程序标记语言，它是一种声明性标记语言。专
门用来构建应用程序 UI 的。
专业 WPF 开发的做法是：软件 UI 设计团队使用 Blend 美化界面，开发人员使用 VS 设计基本的 UI。

二、 第一个 WPF 程序的创建：WpfApplication1

2.1 命名空间的概念

xaml 命名空间概念和 C#代码中的 using 是一样的道理。
创建一个 WPF 项目，默认 Window 窗体生成如下代码。

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        
    </Grid>
</Window>

这个文档包括两个元素：
顶级的 Window 元素和一个 Grid 元素，Window 元素代表整个窗口，在 Grid 元素中可以放置所有的空间。
WPF 的顶级元素只能有 3 种：Windows、Page、Application
x:Class=“WpfApplication1.MainWindow”
代表本类的类限定名，是命名空间+类名。也就是当前 xmal 对应的后台代码文件。
xmlns=“http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns 是 XML Namespaces 的缩写，代表 xml 命名空间。这个命名空间是默认的命名空间。

2.2 后台代码文件（MainWindow.xaml.cs）：

   public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }

可以看出和 Winform 原理相同，都是部分类，但是这个类继承自 Window，而不是 Form。

三、WPF基本布局

3.1 WPF 的 UI 布局

3.1 布局的原则

第一、如果做屏幕适应的程序，不要显示的设置元素（控件）的尺寸，一般可以设置最小和最大尺寸。
第二、不应使用屏幕坐标指定元素位置，元素的位置应该由它所在的容器决定。
第三、布局容器可以嵌套。

3.2 布局的主要容器

Grid 面板、StackPanel 面板、Canvas 面板、DockPanel 面板、WrapPanel 面板

3.3 Grid 面板

Grid 面板，可以想象成 一个 table，行列布局。
布局特点
第一、可以定义任意数量的行、列，并且轻松跨行、跨列。
第二、行、列高度或者宽度可以设置绝对值、相对比例、自动调整等方式。
适用场合
第一、UI 的大布局设计。
第二、UI 需要整体尺寸改变时。

代码

<Grid>
        <Grid.RowDefinitions> 	<!--行，*代表比例-->
            <RowDefinition Height="30*"/>
            <RowDefinition Height="100*"/>
            <RowDefinition Height="30*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions> <!--列-->
            <ColumnDefinition Width="110*"/>
            <ColumnDefinition Width="148*"/>
            <ColumnDefinition Width="65*"/>
            <ColumnDefinition Width="65*"/>
        </Grid.ColumnDefinitions>
        <Label x:Name="label" Content="请输入您的留言："  Height="25" Margin="5,2" Grid.Column="0" Grid.Row="0"/> 	<!--Grid.Column="0" Grid.Row="0" 第0行，0列-->
        <ComboBox x:Name="cbbType" Grid.Column="1" Grid.Row="0"  Grid.ColumnSpan="3" Margin="5"/>
        <TextBox x:Name="txtContent" Grid.ColumnSpan="4"  Margin="5" Grid.Row="1" Grid.Column="0"/>
        <Button x:Name="btnSubmit" Content="提交" Grid.Column="2"  Grid.Row="2"  Margin="5"/>
        <Button x:Name="btnClear" Content="清除" Grid.Column="3"  Grid.Row="2"  Margin="5"/>
    </Grid>

3.4 StackPanel 面板

【1】布局特点
第一、可以把内部元素在纵向或者横向上紧凑排列，形成栈式布局，通俗来说就是把元素堆到一块。 堆积
第二、当把前面的元素去掉后，后面的会整体向前移动，占领原有元素空间。
【2】适用场合
第一、同类型原型需要紧凑排列（比如制作菜单或者列表）
第二、移除其中的元素后能够自动补缺的布局，或者动画。
【3】三个属性
第一、Orientaion 属性：决定内部元素是横向还是纵向积累。
第二、HorizontalAlignment 属性：决定内部元素水平方上的对齐方式。
第三、VerticalAlignment 属性：决定内部元素垂直方向上的对齐方式。

<GroupBox Header="请选择您喜欢的课程名称" BorderBrush="Black" Margin="10">
            <StackPanel Margin="5">  //默认垂直方向堆
                <CheckBox Content="A.C#面向对象编程"/>
                <CheckBox Content="B.WCF通信框架"/>
                <CheckBox Content="C.WPF快速编程"/>
                <CheckBox Content="D.ASP.NET-MVC"/>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button Name="btnSubmit" Content="提交" Width="60" Margin="5"/>
                    <Button Name="btnReset" Content="重选" Width="60" Margin="5"/>
                </StackPanel>
            </StackPanel>
        </GroupBox>

3.5 Canvas 面板（译文：画布）

【1】布局特点
第一、在面板内部，我们可以通过 x 和 y 的坐标属性，直接控制控件的位置，非常类似 winform 中的 top
和 left 定位。
第二、我们可以直接通过拖放的形式选择控件的位置。
【2】适用场合
第一、一经设计基本上不会有改动的小布局。
第二、需要使用绝对定位的布局。
第三、依赖于横纵坐标的动画。

 <Grid>
        <Canvas Margin="10">
            <Label x:Name="label" Content="用户名：" Canvas.Left="26" Canvas.Top="30"/>
            <TextBox x:Name="txtLoginId" VerticalContentAlignment="Center" Height="23" Canvas.Left="89"  Canvas.Top="30" Width="146"/>
            <Label x:Name="label1" Content="密码：" Canvas.Left="38" Canvas.Top="65"/>
            <PasswordBox x:Name="txtLoginPwd" Height="23" Canvas.Left="89"  Canvas.Top="67" Width="146"/>
            <Button x:Name="btnLogin" Content="登录" Canvas.Left="89" Canvas.Top="105" Width="70"/>
            <Button x:Name="btnExit" Content="关闭" Canvas.Left="165" Canvas.Top="105" Width="70"/>

        </Canvas>
    </Grid>

3.6 DockPanel 面板（停靠）

【1】布局特点
根据 Dock 属性值，元素向指定方向累积，切分 DockPanel 内部剩余空间，就像传播停靠一样。
【2】适用场合
需要自动填满剩余空间的布局。（最后一个元素自动填满 DockPanel 内的剩余空间）
适合布局导航栏，侧边栏。

<Grid>
        <DockPanel>
            <TextBox DockPanel.Dock="Top" Height="30" BorderBrush="Black" Text="111"/>
            <TreeView DockPanel.Dock="Left" Width="100" BorderBrush="Black" >222</TreeView>
            <ListView BorderBrush="Black">333</ListView>
        </DockPanel>
    </Grid>

3.7 WrapPanel 面板（流式布局，类似 web 中 div 的 float）

【1】布局特点
第一、在流延伸的方向上会排列尽可能多的控件，排列不下的控件会新起一行。
第二、使用 Orientaion 属性控制流延伸的方向。
【2】适用场合
需要根据容器大小动态排列控件的场合。

    Title="WrapPanel面板" Height="186.8" Width="445.2" WindowStartupLocation="CenterScreen">
    <Grid>
        <WrapPanel>
            <Button Content="1" Width="30" Height="30"/>
            <Button Content="1" Width="30" Height="30"/>
            <Button Content="1" Width="30" Height="30"/>
            <Button Content="1" Width="30" Height="30"/>
            <Button Content="1" Width="30" Height="30"/>
            <Button Content="1" Width="30" Height="30"/>
            <Button Content="1" Width="30" Height="30"/>
            <Button Content="1" Width="30" Height="30"/>
            <Button Content="1" Width="30" Height="30"/>
            <Button Content="1" Width="30" Height="30"/>
            <Button Content="1" Width="30" Height="30"/>
            <Button Content="1" Width="30" Height="30"/>
            <Button Content="1" Width="30" Height="30"/>
        </WrapPanel>
    </Grid>