WPF基础学习

    WPF（Windows Presentation Foundation）是微软推出的基于Windows Vista的用户界面框架，属于。NET Framework 3.0的一部分。它提供了统一的编程模型、语言和框架，真正做到了分离界面设计人员与开发人员的工作；同时它提供了全新的多媒体交互用户图形界面。

WPF中的常用布局

1、Canvas布局
Canvas是一个类似于坐标系的面板，所有的元素通过设置坐标来决定其在坐标系中的位置。具体表现为使用Left、Top、Right、 Bottom附加属性在Canvas中定位控件。

2、StackPanel布局
StackPanel将控件按照行或列来顺序排列，但不会换行。通过设置面板的Orientation属性设置了两种排列方式：横排（Horizontal默认的）和竖排（Vertical），默认为竖排（Vertical）。

3、DockPanel布局
DockPanel支持让元素简单地停靠在整个面板的某一条边上，然后拉伸元素以填满全部宽度或高度。它也支持让一个元素填充其他已停靠元素没有占用的剩余空间。
DockPanel有一个Dock附加属性，因此子元素用4个值来控制她们的停靠：Left、Top、Right、Bottom。Dock没有Fill值。作为替代，最后的子元素将加入一个DockPanel并填满所有剩余的空间，除非DockPanel的LastChildFill属性为false，它将朝某个方向停靠。

4、WrapPanel布局
WrapPanel布局面板将各个控件按照一定方向罗列，当长度或高度不够时自动调整进行换行换列。
Orientation="Horizontal"时各控件从左至右罗列，当面板长度不够时，子控件就会自动换行，继续按照从左至右的顺序排列。
Orientation="Vertical"时各控件从上至下罗列，当面板高度不够时，子控件就会自动换列，继续按照从上至下的顺序排列。

5、Grid布局
Grid允许我们通过自定义行列来进行布局,这类似于表格.通过定义Grid的RowDifinitions和ColumnDifinitions来实现对于表格行和列的定义，元素根据附加属性Grid.Row和Grid.Column确定自己的位置。
1）Grid的列宽与行高可采用固定、自动、按比列三种方式定义
第一种，固定长度——值为一个确定的数字
第二种，自动长度——值为Auto，实际作用就是取实际控件所需的最小值
第三种，比例长度——*表示占用剩余的全部宽度；两行都是*，将平分剩余宽度；一个2*，一个*，则前者占剩余全部宽度的2/3，后者占1/3；依此类推
2） 合并行或列
3）GridSplitter重新分布Grid控件的列间距或行间距。（类似于WinForm中SplitContainer）

6、UniformGrid布局
UniformGrid就是Grid的简化版，每个单元格的大小相同，不需要定义行列集合。每个单元格始终具有相同的大小，每个单元格只能容纳一个控件。
若不设置RowsColums，则按照定义在其内部的元素个数，自动创建行列，并通常保持相同的行列数。若只设置Rows则固定行数，自动扩展列数。若只设置Colums则固定列数，自动扩展行数。
UniformGrid 中没有Row和Column附加属性，也没有空白单元格。

7、ScrollViewer布局
ScrollViewer是带有滚动条的面板。在ScrollViewer中只能有一个子控件，若要显示多个子控件，需要将一个附加的 Panel控件放置在父 ScrollViewer中。然后可以将子控件放置在该控件中。
HorizontalScrollBarVisibility水平滚动条是否显示默认为Hidden
VerticalScrollBarVisibility垂直滚动条是否显示 默认为Visible。
一般我们都会设置 HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
意思是：当内容超出可视范围时，才显示横向/纵向滚动条

8、ViewBox布局
Viewbox的作用是拉伸或延展位于其中的组件，以填满可用空间。在Viewbox中只能有一个子控件，若要显示多个子控件，需要将一个附加的Panel控件放置在父Viewbox中。然后可以将子控件放置在该控件中。
常用属性：
Stretch：获取或设置拉伸模式以决定该组件中的内容以怎样的形式填充该组件的已有空间。具体设置值如下：
None：不进行拉伸，按子元素设置的长宽显示。
Uniform：按原比例缩放子元素，使得一边不足，另一边恰好填充
Fill：缩放子元素，使得子元素的长变为Viewbox的长，宽变为Viewbox的宽
UniformToFill：按原比例缩放子元素，使得子元素一边恰好填充，另一边超出Viewbox的区域
Stretch默认值为Uniform。

9、Border
Border 是一个装饰的控件，此控件用于绘制边框及背景，在Border中只能有一个子控件，若要显示多个子控件，需要将一个附加的Panel控件放置在父Border中。然后可以将子控件放置在该 Panel控件中。
常用属性：
Background: 背景色 ；
BorderBrush: 边框色 ；
BorderThickness: 边框宽度；
CornerRadius: 各个角 圆的半径；

WPF常用控件：

1、WrapPanel布局控件：可以实现当空间不足时子控件自动往下一行布局，空间充足时又会自动调整行布局。常用布局控件还有StackPanel（设置其子元素是垂直排列还是水平排列）、Grid（通过定义行和列来绘制出一个表格）、Canvas（通过指定相对于其的坐标来指定子控件的位置）、DockPanel（设置其子元素如何停靠，DockPanel.Left、DockPanel.Right、DockPanel.Top、DockPanel.Bottom）。

2、ScrollViewer：滚动条，当内容显示不完整时可以通过滚动条查看余下内容。

3、ListBox：队列布局控件，可在其中添加队列内容，绑定数据，也可实现分页效果，也可添加其余控件。

4、Label：文本显示控件，快速获取少量数据。

5、Button：按钮控件，四种状态ClickMode：Hover：鼠标悬停在按钮上方引发单击事件；

                                       Press：当单击按钮时引发单击事件；

                                       Release：被按下然后松开时发生单击事件，默认为此。

6、CheckBox：bool，选择按钮，默认不选择，通过IsChecked="True"使其默认选择，Indeterminate达到选择按钮模糊。

7、RadioButton：与CheckBox类似，一般用于单选。

8、TextBox：文本显示，与Lable类似，但Lable不可用户不可在界面编辑，TextBox默认用户可编辑，也可设置为只读。

9、Password：密码显示框，输入字符后默认显示“*”。

10、DatePicker：日期控件，选择日期。

11、Calendar：日历控件，选择日期。

12、Slider：滑块，Slider控件继承自RangeBase类型，同继承自RangeBase的控件还有ProgressBar和ScrollBar，这类控件都是在一定数值范围内表示一个值的用途。

13、ToolBar：工具条，是一组通常在功能上相关的命令或控件的容器，在ToolBar中可添加button、textbox、image、comboBox等等控件。

14、TreeViewStyle：树形控件，可在其中添加节点。

15、DataGrid：数据表控件，表头数据类型有DataGridTextColumn、DataGridComboBoxColumn、DataGridCheckBoxColumn、DataGridHyperlinkColumn，其属性设置比较多，如SelectionUnit：包含Cell、FullRow 和CellOrRowHeader 三种单元选择模式。 Cell：选择单元格；FullRow：选择全行；CellOrRowHeader：可选择单元格，也可以通过点击行首选择全行。 

16、Style：风格，可以使用Style来设置控件的某些属性值，并使该设置影响到指定范围内的所有该类控件或影响指定的某一控件。

WPF常用属性：

精确定位的常用属性
在设计UI时，WPF为我们提供了一些属性用于精确定位元素，其中最常用的有三个：Alignment(包括水平，垂直)，Margin，Padding，具体用法如下：

HorizontalAlignment： 子元素在水平方向的对齐方式，有左对齐，右对齐，中间对齐，拉伸填充等四种方式。

VerticalAlignment：子元素在垂直方向的对齐方式，有顶端对齐，底部对齐，中间对齐，拉伸填充等四种方式。

Margin：用于指定元素与其父级或同级之间的距离，包括上下左右四个值。也可通过使用 Margin="20"同时指定四个值。

Padding：用于指定元素与其子级之间的距离，包括上下左右四个值。也可通过使用Padding="20"同时指定四个值。

静态资源(StaticResource)指的是在程序载入内存时对资源的一次性使用，之后就不再访问这个资源了；动态资源(DynamicResource)使用指的是在程序运行过程中然会去访问资源。

触发器的使用：

使用触发器，可以动态地更改控件的外观，因为一些属性值改变了。例如，用户把鼠标移动到按钮上，按钮就会改变其外观。

XAML有几个触发器。

属性触发器：在属性值改变时激活。
Trigger：根据某一个依赖属性的变化，用Setter更改某些样式,
  <Style TargetType="Button">
             <Style.Triggers>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="FontSize" Value="28"></Setter>
                     <Setter Property="BorderBrush" Value="Red"></Setter>
                    <Setter Property="BorderThickness" Value="2"></Setter>
                </Trigger>
            </Style.Triggers>
  </Style>
 当Button的IsPressed的Value为True时，会用Setter完成FontSize，BorderBrush和BorderThickness的设置。

多触发器：基于多个属性值。
MultiTrigger：只有多个依赖属性的的变化同时都满足时，触发器才会生效。
 <Style TargetType="Button">
                <Style.Triggers>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="Background" Value="Black"></Condition>
                            <Condition Property="IsPressed" Value="True"></Condition>
                        </MultiTrigger.Conditions>
                        <MultiTrigger.Setters>
                            <Setter Property="FontSize" Value="28"></Setter>
                        </MultiTrigger.Setters>
                    </MultiTrigger>
                </Style.Triggers>
 </Style>
只有当Button的Background为Black并且IsPressed为True时，才会更改Button的Content的FontSize为28.

数据触发器：在绑定的数据改变时激活。
DataTrigger：可以完成Trigger的所有功能，也可以完成对非依赖属性的监听。DataTrigger一共引入了三个参数：Binding，Value和Setters。当需要设置数据触发器侦听的数据源时，通过绑定对Binding属性赋值的方式来完成。
public class TestButton : Button {
        public int Index { set; get; }
    }

 <Style TargetType="local:TestButton">
            <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Index}" Value="2">
                    <Setter Property="Foreground" Value="Red"/>
                </DataTrigger>
            </Style.Triggers>
</Style>
  TestButton 的Index属性是非依赖属性，用Trigger监听的时候，是会报错的。所以要用DataTrigger。

多数据触发器：基于多个属性值。
 MultiDataTrigger：只有多个属性的的变化同时都满足时，触发器才会生效。 
public class TestButton : Button {
        public int Index { set; get; }
        public string Text { set; get; }
    }

   <Style TargetType="local:TestButton">
            <Style.Triggers>
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=Index}" Value="2" />
                        <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=Text}" Value="HI" />
                    </MultiDataTrigger.Conditions>
                    <Setter Property="Background" Value="Red" />
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>
 当Index=2，Text=“HI”同时成立时，设置Background为Red。

事件触发器：在事件发生时激活。
EventTrigger：事件被触发时完成一个动画。
<Style TargetType="Button">
                   <Style.Triggers>
                      <EventTrigger RoutedEvent="Mouse.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(Button.Width)"  To="200"></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="Mouse.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(Button.Width)" ></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
当MouseEnter事件被触发时，Button的Width会慢慢变为200，当MouseLeave事件被触发时，Button的Width慢慢恢复到最初的大小