wpf学习笔记

wpf学习笔记

XAML

是微软公司为构建应用程序用户界面而创建的一种新的“可扩展应用程序标记语言”,提供了一种便于扩展和定位的语法来定义和程序逻辑分离的用户界面。

XAML是一种基于XML的,格式组织良好的标记语言(比HTML要严格和准确)。其支持快速高效实现应用程序用户界面。

特点:
定义应用程序的界面元素
显示的声明WPF资源(样式、模板、动画等)
可扩展性(自定义UI控件)
集中关注于界面的设计和实现

XAML命名空间的语法:
xmlns[:可选映射前缀]="命名空间描述"
注意:没有加可选映射前缀的xmlns是WPF默认的命名空间,一个xaml文件只能有一个默认的命名空间
一个完整的xaml文件,必须具备两个命名空间。

 
    

 
   

以上代码呈现为一个包括按钮控件的窗口。代码中包括三个元素:

(1)处于顶层的Window元素,它呈现为整个窗口;

(2)Grid元素用于实现布局,其中可放置任何控件;

(3)Button元素表示按钮控件。

虽然这些代码很简单,但是包含了XAML的多个核心概念,例如基本语法规则、Window及其他根元素、命名空间和Code-Behind类,属性和事件等。

属性设置

  等同于  hh

Window及其他根元素

开发人员常用的根元素包括Window、Page、StackPanel、Canvas、Grid等。下面简单介绍一下这些根元素:

元素

该元素对应的是System.Windows.Window类,其呈现为与用户交互的,最常用的标准窗口。使用该元素呈现的窗口显示了客户区域、最大化最小化关闭按钮、图标、系统菜单、边框等。

元素

该元素对应的是System.Windows.Controls.Page类,其封装了一个可实现导航的内容页,该内容页可宿主在Window、 NavigationWindow、Frame、UserControl等对象中。该元素对应的基类是 System.Windows.Controls.Panel。

元素

该元素对应的是System.Windows.Controls.StackPanel类,其能够将子元素置于可垂直或者水平排列的单行中。与< StackPanel>类似的还有等 元素,它们的基类都是System.Windows.Controls.Panel。

元素

该元素对应的是System.Windows.Controls.Canvas类,其定义了一个可使用相对坐标(相对于Canvas定义的区域)显式定位 子元素的区域,例如使用属性Top、Left、Bottom、Right。该元素对应的基类是 System.Windows.Controls.Panel。

元素

该元素对应的是System.Windows.Controls.Grid类,其允许开发人员自定义一个包括行和列的表格区域。接着,可在单元格中放入其他子元素。该元素对应的基类是System.Windows.Controls.Panel。

通常情况下,在使用根元素时,必须引用适当的命名空间。在下面一节中将介绍有关命名空间的知识。

布局

应用程序界面设计中,合理的元素布局至关重要,它可以方便用户使用,并将信息清晰合理地展现给用户。在WPF中非常抵制基于坐标的布局,而是注重创建更灵活的布局,使布局能够适应内容的变化、不同的语言以及各种窗口尺寸。WPF提供了一套功能强大的工具-面板(Panel),来控制用户界面的布局。你可以使用这些面板控件来排布元素。如果内置布局控件不能满足需要的话,还可以创建自定义的布局元素。

遵循以下几条重要原则:
不应显式设定元素(如控件)的尺寸。元素应当可以改变尺寸以适合它们的内容。例如当添加更多的文本时按钮应当能够扩展。可通过设置最大和最小尺寸来限制可以接受的控件尺寸范围。
不应使用屏幕坐标指定元素的位置。元素应当由它们的容器根据它们的尺寸、顺序以及(可选的)其他特定于具体布局容器的信息进行排列。如果需要在元素之间添加空白空间,可使用 Margin属性。
布局容器的子元素“共享”可用的空间。如果空间允许,布局容器会根据每个元素的内容尽可能为元素设置更合理的尺寸。它们还会向一个或多个子元素分配多余的空间。
可嵌套的布局容器。典型的用户界面使用Grid面板作为开始,Grid面板是WPF中功能最强大的容器,Grd面板可包含其他布局容器,包含的这些容器以更小的分组排列元素,比如带有标题的文本框、列表框中的项、工具栏上的图标以及一列按钮等。

如果创建WPF应用程序时遵循了这些原则,将会创建出更好的、更灵活的用户界面。如果不遵循这些原则,最终将得到不是很适合WPF的并且难以维护的用户界面。

常用布局属性

属性名称 说明
HorizontalAlignment(水平对齐) 布局中子元素定位,可选值:Center、Left、Right、Stretch(延伸)
VerticalAlignment(垂直对齐) 布局中子元素定位,可选值:Center、Top、Bottom、Stretch(延伸)
Margin(边距) 元素周围边距:左、上、右、下
Min Width 和 Min Height 元素最小尺寸
Max Width 和 Max Height 元素最大尺寸
Width 和 Height 显示设置元素尺寸

面板(Panel)

WPF用于布局的面板主要有6个,StackPanel(栈面板)、WrapPanel(环绕面板)。DockPanel(停靠面板)、Canvas(画布)、Grid(网格面板)和UniformGrid(均布网格)。

名称 说明
StackPanel 在水平或垂直的堆栈中放置元素。这个布局容器通常用于更大、更复杂窗口中的一些小区域
WrapPancl 在一系列可换行的行中放置元素。在水平方向上, Wrappanel 面板从左向右放置条目,然后在随后的行中放置元素。在垂直方向上, Wrappanel I面板在自上而下的列中放置元素,并使用附加的列放置剩余的条目
DockPanel 根据容器的整个边界调整元素
Grid 根据不可见的表格在行和列中排列元素,这是最灵活、最常用的容器之一
UniformGrid 在不可见但是强制所有单元格具有相同尺寸的表中放置元素,这个布局容器不常用
Canvas 使用固定坐标绝对定位元素。这个布局容器与传统 Windows窗体应用程序最相似,但没有提供锚定或停靠功能。因此,对于尺寸可变的窗口,该布局容器不是合适的选择。如果选择的话,需要另外做一些工作

StackPanel:栈面板

栈面板,可以将元素排列成一行或者一列,其特点是:每个元素各占一行或者一列

属性:

Orientation(定向)属性指定排列方式:Vertical(垂直)【默认】、Horizontal(水平)

默认情况下,水平排列时,每个元素都与面板一样高;垂直排列时,每个元素都与面板一样宽。如果包含的元素超过了面板空间,它只会截断多出的内容。

Margin(边距)属性用于使元素之间产生一定得间隔,当元素空间大于其内容的空间时,剩余空间将由HorizontalAlignment和 VerticalAlignment属性来决定如何分配。

HorizontalAlignment/VerticalAlignment,指自身相对于父元素的位置。

wpf学习笔记_第1张图片


    
    
    
    
    

WrapPanel:环绕面板

WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列,当长度或高度不够时就会自动调整进行换行,后续排序按照从上至下或从左至右的顺序进行。

Orientation——根据内容自动换行。当Orientation属性的值设置为 Horizontal:元素是从左向右排列的,然后自上至下自动换行。当Orientation属性的值设置为Vertical:元素是从上向下排列的,然后从左至右自动换行。

ItemHeight——所有子元素都一致的高度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Height属性等。任何比ItemHeight高的元素都将被截断。

ItemWidth——所有子元素都一致的宽度。每个子元素填充高度的方式取决于它的VerticalAlignment属性、Width属性等。任何比ItemWidth高的元素都将被截断。

示例效果图如下所示,图1是窗体宽度较小时候的效果,图2是窗体宽度拉大以后的效果
在这里插入图片描述
在这里插入图片描述


    
    
    
    
    
    

DockPanel:停靠面板

DockPanel会对每个子元素进行排序,并将根据指定的边进行停靠,多个停靠在同侧的元素则按顺序排序。在DockPanel中,指定停靠边的控件,会根据定义的顺序占领边角,所有控件绝不会交叠。

默认情况下,后添加的元素只能使用剩余空间,无论对DockPanel的最后一个子元素设置任何停靠值,该子元素都将始终填满剩余的空间。如果不希望最后一个元素填充剩余区域,可以将DockPanel属性LastChildFill设置为false,还必须为最后一个子元素显式指定停靠方向。

1、填充整个剩余空间
wpf学习笔记_第2张图片


    
    
    
    
    

2、最后元素不填充剩余空间
wpf学习笔记_第3张图片


    
    
    
    
    

Canvas:画布面板

画布,用于完全控制每个元素的精确位置。他是布局控件中最为简单的一种,直接将元素放到指定位置,主要来布置图面。使用Canvas,必须指定一个子元素的位置(相对于画布),否则所有元素都将出现在画布的左上角。调整位置用Left、Right、Top和Bottom四个附加属性。如果Canvas是窗口主元素(即最外层的布局面板是Canvas),用户改变窗口大小时,Canvas也会随之变化,子元素的位置也会随之移动,以保证相对于Canvas的位置属性不变。

Canvas允许子元素的部分或全部超过其边界,默认不会裁剪子元素,同时可以使用负坐标,即溢出的内容会显示在Canvas外面,这是因为默认 ClipToBounds=”False”,因此画布不需要指定大小。

Z顺序
如果 Canvas面板中有多个互相重叠的元素,可通过设置 Canvas. Zindex附加属性来控制它们的层叠方式。
添加的所有元素通常都具有相同的 Zindex值-0。如果元素具有相同的Index值,后放入的显示在上面。

wpf学习笔记_第4张图片


        
        
        
        
        

InkCanvas
wpf学习笔记_第5张图片
wpf学习笔记_第6张图片

Grid:网格面板

Grid顾名思义就是“网格”,以表格形式布局元素,对于整个面板上的元素进行布局,它的子控件被放在一个一个事先定义好的小格子里面,整齐配列。 Grid和其他各个Panel比较起来,功能最多也最为复杂。

要使用Grid,首先要向RowDefinitions(行)和ColumnDefinitions(列)属性中添加一定数量的RowDefinition和 ColumnDefinition元素,从而定义行数和列数。而放置在Grid面板中的控件元素都必须显示采用Row和Column附加属性定义其放置所在的行和列,这两个属性的值都是从0开始的索引数,如果没有显式设置任何行或列,Grid将会隐式地将控件加入在第0行第0列。

注意:尽管Grid面板被设计成不可见的,但可将Grid.ShowGridLines属性设置为True,从而更清晰的观察Grid面板,方便调试,可以更准确地控制Grid面板如何选择列宽和行高。
wpf学习笔记_第7张图片


    
        
        
    
    
        
        
        
    
    
    
    

调整行高和列宽

如果Grid面板只是按比例分配尺寸的行和列的集合,它也就没有什么用处了。为了充分发挥Grid面板的潜能,可更改每一行和每一列的尺寸设置方式。

Grid面板支持以下三种设置尺寸的方式:

名称 说明
绝对设置尺寸方式 使用设备无关单位准确地设置尺寸,就是给一个实际的数字,但通常将此值指定为整数。这是最无用的策略,因为这种策略不够灵活,难以适应内容大小和容器大小的改变,而且难以处理本地化。
自动设置尺寸方式 值为Auto,实际作用就是取实际控件所需的最小值,每行和每列的尺寸刚好满足需要,这是最有用的尺寸设置方式。
按比例设置尺寸方式 按比例将空间分割到一组行和列中。这是对所有行和列的标准设置。通常值为*或N*,实际作用就是取尽可能大的值,当某一列或行被定义为*则是尽可能大,当出现多列或行被定义为*则是代表几者之间按比例方设置尺寸。

为了获得最大的灵活性,可混合使用这三种尺寸设置方式。例如,创建几个自动设置尺寸的行,然后通过按比例设置尺寸的方式让最后的一行或两行充满剩余的空间,这通常是很有用的。

可通过设置ColumnDefinition对象的Width属性或者RowDefinition对象的Height属性来确定尺寸设置方式。

多行和多列 : 使元素跨越多个单元格,这两个属性是RowSpan和ColumnSpan。



    
        
        
        
        
        
        
        
        
        
    
    
        
        
        
    
    
    

wpf学习笔记_第8张图片

分割窗口

每个Windows用户都见过分隔条—能将窗口的一部分与另一部分分类的可拖动分割器。例如,当使用Windows资源管理器时,会看到一系列文件夹(在左边)和一系列文件(在右边)。可拖动它们之间的分隔条来确定每部分占据窗口的比例。

在WPF中,分隔条由GridSplitter类表示,它是Grid面板的功能之一。通过为Grid面板添加GridSplitter对象,用户就可以改变行和列的尺寸。例如:

wpf学习笔记_第9张图片
wpf学习笔记_第10张图片



    
    	
    
    
    	
        
        
    
    
    文本框
    

注意:为了成功地创建GridSplitter对象,务必为VerticalAlignment(垂直对齐方式)、HorizontalAlignment(水平对齐方式)以及width属性(或Height属性)提供相应的属性值。

理解如何使用GridSplitter类,从而得到所期望的效果需要一定的经验,下面列出几条指导原则:

(1)GridSplitter对象必须放在Grid单元格中,可与以及存在的内容一并放到单元格中,这时需要调整边距设置,使他们不相互重叠。更好的方法是预留一列或一行专门用于放置GridSplitter对象,并将预留行或列的Height或Width属性的值设置为Auto。

(2)GridSplitter对象总是改变整行或整列的尺寸(而非改变单个单元格的尺寸)。为使GridSplitter对象的外观和行为保持一致,需要拉伸GridSplitter对象使其穿越整行或整列,而不是将其限制在单元格中。为此,可使用RowSpan或ColumnSpan属性。例如,上面的例子中GridSplitter对象的RowSpan属性设置为2,因此被拉伸充满整列。如果不使用该设置,GridSplitter对象会显示在顶行(放置它的行)中,即使这样,拖动分隔条时也会改变整列的尺寸。

(3)GridSplitter对象很小不易看见,为了使其更可用,需要为其设置最小尺寸。在上面的例子中,对于垂直分隔条,需要将VerticalAlignment属性设置为Stretch(使分隔条填满区域的整个高度),并将Width设置为固定值。对于水平分隔条,需要设置HorizontalAlignment属性来拉伸,并将Height属性设置为固定值。

(4)GridSplitter对齐方式还决定了分隔条是水平的(用于改变行的尺寸)还是竖直的(用于改变列的尺寸)。对于水平分隔条,需要将VerticalAlignment属性设置为Center(这也是默认值),以指明拖动分隔条改变上面行和下面行的尺寸。对于垂直分隔条,需要将HorizontalAlignment属性设置为Center,以改变分隔条两侧列的尺寸。

(5) 在上面的例子中还包含了一处额外的细节。在声明GridSplitter对象时,将ShowPreview属性设置为false,因此,当把分隔条从一边拖到另一边时,会立即改变列的尺寸。但是如果将ShowPreview属性设置为true,当拖到分隔条时就会看到一个灰色的阴影跟随鼠标指针,用于显示将在何处进行分割。并且直到释放了鼠标键之后列的尺寸才改变。

UniformGrid面板

通过简单地设置Rows和Columns属性来设置其尺寸。每个单元格始终具有相同的大小,Uniformgrid面板很少使用,许多WPF开发人员可能永远不会使用 Uniformgrid面板。


    
    
    
    

wpf学习笔记_第11张图片

Border控件

Border控件不是布局面板,而是非常便于使用的元素,经常与布局面板一起使用。Border类非常简单。它只能包含一段嵌套内容(通常是布局面板),并为其添加背景或在其周围添加边框。

名称 说明
Background(背景) 使用 Brush对象设置边框中所有内容后面的背景。可使用固定颜色背景,也可使用其他更特殊的背景
Borderbrush和BroderThickness(边框) 使用 Brush对象设置位于 Border对象边缘的边框的颜色,并设置边框的宽度。为显示边框,必须设置这两个属性
CornerRadius(圆角) 该属性可使边框具有雅致的圆角。 CornerRadius的值越大,圆角效果就越明显
Padding(内边距) 该属性在边框和内部的内容之间添加空间(与此相对, Margin属性在边框之外添加空间)

属性

属性使用

1、简单使用


2、复杂使用


    #FFC1EDB3          

依赖属性

依赖属性就是一种自己可以没有值,并且可以通过绑定从其他数据源获取值。依赖属性可支持WPF中的样式设置、数据绑定、继承、动画及默认值。

1、属性变更通知

示例:当鼠标移动到Button按钮上面时,文字的前景色变为红色,离开时变为默认颜色黑色

wpf学习笔记_第12张图片


2、属性值继承

是指属性值自顶向下沿着元素树进行传递

wpf学习笔记_第13张图片

 
     我使用的是继承的fontsize
     我使用的是自己的fontsize

3、节省内存空间

依赖属性和CLR属性在内存的使用上是截然不同的,每个CLR属性都包含一个非static的字段,因此当我们实例化一个类型的时候,就会创建该类型所拥有的所有CLR属性,也就是说一个对象所占用的内存在调用new操作进行实例化的时候就已经决定了、而wpf允许对象在创建的时候并不包含用于存储数据的空间,只保留在需要用到数据的时候能够获得该默认值,即用其他对象数据或者实时分配空间的能力。

三、如何自定控件、自定义依赖属性

自定义用户控件

1、自定义用户控件MyUserControl,继承UserControl。
2、在MyUserControl.xaml中设计控件


        我是自定义的依赖属性

自定义依赖属性

1、声明依赖属性变量。依赖属性的声明都是通过public static来公开一个静态变量,变量的类型必须是DependencyProperty
2、在属性系统中进行注册。使用DependencyProperty.Register方法来注册依赖属性,或者是使用DependencyProperty.RegisterReadOnly方法来注册
3、使用.NET属性包装依赖属性

//1、声明依赖属性变量
public static DependencyProperty TextProperty;
//2、在属性系统中进行注册
TextProperty =DependencyProperty.Register("MyText", //属性名称
    typeof(string), //属性类型
    typeof(TestDependencyPropertyWindow), //该属性所有者,即将该属性注册到那个类上
    new PropertyMetadata("")); //属性默认值
//3、使用.NET属性包装依赖属性:属性名称与注册时候的名称必须一致,即属性名MyText对应注册时的MyText
public string MyText
{
       
   get {
    return (string)GetValue(TextProperty); }
   set {
    SetValue(TextProperty, value); }
}
// 参数:
//   defaultValue:
//     依赖项属性,作为某种特定类型的值通常提供默认值。
//   propertyChangedCallback:
//     对是有效的属性值发生更改时由属性系统调用的处理程序实现的引用。
public PropertyMetadata(object defaultValue, PropertyChangedCallback propertyChangedCallback);
//1、声明依赖属性变量
public static readonly DependencyProperty MyColorProperty;

//2、在属性系统中进行注册
static MyUserControl()
{
   
    MyColorProperty = DependencyProperty.Register("MyColor", typeof(string), typeof(MyUserControl),
       new PropertyMetadata("Red", (s, e) =>
        {
   
            var mdp = s as MyUserControl;
            if (mdp != null)
            {
   
                try
                {
   
                    var color = (Color)ColorConverter.ConvertFromString(e.NewValue.ToString());
                    mdp.Foreground = new SolidColorBrush(color);
                }
                catch
                {
   
                    mdp.Foreground = new SolidColorBrush(Colors.Black);
                }
            }

        }));
}

//3、使用.NET属性包装依赖属性:属性名称与注册时候的名称必须一致,
//即属性名MyColor对应注册时的MyColor
public string MyColor
{
   
    get{
   return (string)GetValue(MyColorProperty);}
    set{
   SetValue(MyColorProperty, value

你可能感兴趣的:(WPF)