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>