WPF学习历程1
x命名空间中的Attribute
x:Class
x:ClassModifier
x:Name 可申明变量
<TextBox x:Name="txt_Name" Width="100" Margin="5" />
后台代码可直接调用
x:FiledModifier 设置访问级别，默认值是interal(只能在程序集访问)；值public可跨程序集访问
x:Key 作用是为资源贴上用于检索的索引,资源集合,设置重复使用的内容,类似CSS
xaml代码
<Window.Resources>
<sys:String x:Key="myString">姓名</sys:String>
</Window.Resources>
<Label Content="{StaticResource ResourceKey=myString}" Width="100" BorderBrush="Blue" Background="#e6e628"></Label>
C#代码
string str = this.FindResource("myString") as string;
this.txtBox.Text = str;
x:Share 一定要与x:key配合使用，系统默认x:Share=”true”
x命名空间中的标记扩展
x:Type
x:Null
x:Array
x:Static 访问后台定义的静态static成员
Text="{x:Static local:MainWindow.ShowText}
XAML指令元素
x:code 可以包含一些后置代码的C#代码（不提倡）
x:XData 专用于提供XML化的数据
控件与布局
WPF的UI元素的类型
ContentControl 单一内容控件
HeaderedContentControl 带标题的单一内容控件
ItemsControl 以条目集合为内容的控件
HeaderedItemsControl 带标题的以条目集合为内容的控件
Decorator 控件装饰元素
Panel 面板类元素
Adorner 文字点缀元素
Flow Text 流式文本元素
TextBox 文本输入框
TextBlock 静态文本
Shape 图形元素
ContentControl
只能由单一元素充当内容（可用布局控件将多元素包装，再将布局控件作为单一元素写进去）
|
Button |
ButtonBase |
CheckBox |
ComboBoxItem |
|
ContentControl |
Frame |
GridViewColumnHeader |
GroupItem |
|
Lable |
ListBoxItem |
ListViewItem |
NavigationWindow |
|
RadioButton |
RepeatButton |
ScrollViewer |
StatusBarItem |
|
ToggleButton |
ToolTip |
UserControl |
Window |
HeaderedContentControl
内容属性为Content和Header，都只能容纳一个元素作为其内容
|
Expander |
GroupBox |
HeaderedContentControl |
TabItem |
ItemsControl
用于显示列表化的数据
内容属性为Items或ItemsSourse
每种ItemsControl都对应有自己的条目容器（Item Container）
|
Menu |
MenuBase |
ContextMenu |
ComboBox |
|
ItemsControl |
ListBox |
ListView |
TabControl |
|
TreeView |
Selector |
StatusBar |
|
ListBox可添加更多的元素checkbox,button等（区别于WinForm,Asp.NET）
ListBox
public MainWindow()
{
InitializeComponent();
this.ListBoxEmployee.DisplayMemberPath = "Name";
this.ListBoxEmployee.SelectedValuePath = "ID";
this.ListBoxEmployee.ItemsSource = empList;
}
public class Employee
{
public int ID { set; get; }
public string Name { get; set; }
public int Age { get; set; }
}
List<Employee> empList = new List<Employee>()
{
new Employee(){ID=1,Name="盖茨",Age=55},
new Employee(){ID=2,Name="乔布斯",Age=57},
new Employee(){ID=3,Name="扎克伯格",Age=28},
};
|
ItemsControl名称 |
对应的Item container |
|
Combox |
Com |
|
ContextMenu |
MenuItem |
|
ListBox |
ListBoxItem |
|
listView |
ListViewItem |
|
Menu |
MenuItem |
|
StatusBar |
StatusBarItem |
|
TabControl |
TabItem |
|
TreeView |
TreeViewItem |
HeaderedItemsControl
内容属性有Items，ItemsSourse，Header
|
MenuItem |
TreeViewItem |
ToolBar |
Decorator
改类元素在UI上起装饰效果
内容属性 Child
只能由单一元素充当内容
|
ButtonChrome |
ClassicBorderDecorator |
ListBoxChrom |
SystemDropShadowChrome |
|
Border |
InlPresenter |
BulletDecorator |
Viewbox |
|
AdornerDecorator |
|
|
|
TextBlock和TextBox
TextBlock不可编辑（静态文本框），可使用丰富的印刷级的格式控制标记显示专业的排版效果
内容属性有Inlines(“行”)，Text
Shape
用于2D图形绘制
无内容属性
使用Fill属性设置填充，使用Stroke属性设置边线
不是控件，只是简单的视觉元素，专门用来在UI上绘图的一类元素
Panel
所有用于UI布局的元素都属于这一族
内容属性Children
内容可以是多个元素，Panel元素将控制他们的布局
|
Canvas |
DockPanel |
Grid |
TabPanel |
|
ToolBarOverflowPanel |
StackPanel |
ToolBarpanel |
UniformGrid |
|
VirtualizingPanel |
VirtualizingStackPanel |
WrapPanel |
|
Grid
属性ColumnDefinitions，RowDefinitions，分别是ColumnDefinition，RowDefinition的集合
静态布局：
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
动态布局（c#）
this.gridMain.ColumnDefinitions.Add(new ColumnDefinition());
this.gridMain.RowDefinitions.Add(new RowDefinition());
this.gridMain.ShowGridLines = true;//显示横线
Grid的高度和宽度
*绝对值
*比例值 数值后加（“*”）
*自动值
例子（xaml）
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="120"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="80"></ColumnDefinition>
<ColumnDefinition Width="4"></ColumnDefinition>
<ColumnDefinition Width="80"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="4"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="4"></RowDefinition>
<RowDefinition Height="25"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="请选择您的部门并留言:" Grid.Column="0" Grid.Row="0" VerticalAlignment="Center"></TextBlock>
<ComboBox Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="4">
</ComboBox>
<TextBox Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="5" BorderBrush="blue"></TextBox>
<Button Content="提交" Grid.Column="2" Grid.Row="4"></Button>
<Button Content="清除" Grid.Column="4" Grid.Row="4"></Button>
</Grid>
StackPanel
同类元素需要经凑排列（如制作菜单或列表）
移动其中的元素后能够自动补缺的布局或动画
属性有三个：Orientation，HorizontalAlignment和VerticalAlignment
|
属性名称 |
数据类型 |
可取值 |
描述 |
|
Orientation |
Orientation枚举 |
Horizontal Vertical |
决定内部元素是横向累积还是纵向累积 |
|
HorizontalAlignment |
HorizontalAlignment枚举 |
Left,Center Right,Strech |
决定内部元素水平方向上的对齐方式 |
|
VerticalAlignment |
VerticalAlignment 枚举 |
Top,Center Bottom,stretch |
决定内部元素竖直方向上的对齐方式 |
<Grid>
<GroupBox Header="请选择没有错别字的成语" BorderBrush="Blue" Margin="5"></GroupBox>
<StackPanel Margin="5">
<CheckBox Content="A.iPhone5" Margin="0 20 0 0"></CheckBox>
<CheckBox Content="B.Lumia900"></CheckBox>
<CheckBox Content="C.HTC"></CheckBox>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Content="确定" Width="60" Margin="5"></Button>
<Button Content="清空" Width="60" Margin="5"></Button>
</StackPanel>
</StackPanel>
</Grid>
Canvas
译成“画布“
一经设计基本上不会再有改动的小型布局（如图标）
艺术性比较强的布局
需要大量使用横纵坐标进行绝对点定位的布局
依赖横纵坐标的动画
属性有 Canvas.X，Canvas.Y
eg(xaml)
<Canvas>
<TextBlock Text="用户名：" Canvas.Left="12" Canvas.Top="12"></TextBlock>
<TextBox Width="200" Canvas.Left="65" Canvas.Top="9"></TextBox>
<TextBlock Text="密码：" Canvas.Left="12" Canvas.Top="41" Height="16" Width="36"></TextBlock>
<TextBox Width="200" Canvas.Left="65" Canvas.Top="38"></TextBox>
</Canvas>
DockPanel
属性：DockPanel.Dock 枚举 Left，Top，Right，Bottom
根据Dock属性值，DockPanel内的元素会向指定方向积累，切分DockPanel内部的剩余空间
最后一个元素的DockPanel.Dock被忽略，最后填满剩余空间
还有的就是DockPanel的LastChildFill属性，默认值为true，决定最后元素是否填充
<Grid>
<DockPanel>
<TextBox DockPanel.Dock="Top" Height="25" Background="Black"></TextBox>
<TextBox DockPanel.Dock="Left" Width="150" Background="Blue"></TextBox>
<TextBox Background="Yellow"></TextBox>
</DockPanel>
</Grid>
补充：(实现可拖曳的分隔栏，让用户能调整TextBox的宽度，DockPanel不具备这样的功能，使用Grid和GridSplitter实现)
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBox Grid.ColumnSpan="3" Background="Black"></TextBox>
<TextBox Grid.Row="1" Background="Blue"></TextBox>
<GridSplitter Grid.Row="1" Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Center"
Width="5" Background="Red" ShowsPreview="True"></GridSplitter>
<TextBox Grid.Row="1" Grid.Column="2" Background="Yellow"></TextBox>
</Grid>
WrapPanel
内部采用的是流式布局
属性Orientation控制流延伸的方向
属性HorizontalAlignment和VerticalAlignment控制内部控件的对齐
子啊流延伸的方向上，WrapPanel会用尽可能多的控件，排不下的控件将会新起一行或一列继续排列
<WrapPanel>
<Button Content="OK" Width="80" Height="30"></Button>
<Button Content="OK" Width="80" Height="30"></Button>
<Button Content="OK" Width="80" Height="30"></Button>
<Button Content="OK" Width="80" Height="30"></Button>
<Button Content="OK" Width="80" Height="30"></Button>
</WrapPanel>
