学会C#要多久,学会c#要多久,c#学习之30分钟学会XAML

一个界面程序的核心无疑是界面和后台代码，而xaml是微软为了构建应用程序界面而创造的描述性语言，也就是说这个东西是给界面用的。

1.狂妄的WPF

与传统的Windows图形编程相比，它需要做很多复杂的工作，引用很多不同的API。例如：WinForm(带控件的窗体)、GDI (2D图形)、DirectX API(3D图形)、流媒体和流文档等。都需要不同的API来构建应用。

WPF是看着上面复杂难受的操作，决定自己当老大的技术，想用DirectX技术覆盖一切，所以想把上面的东西都集成到自己身上，降低复杂度，让编程变酷。

不可否认，虽然WPF很傲慢，但这项技术仍有许多可圈可点的地方。支撑WPF傲慢的资本是可以脱离其背景代码的XAML技术。让我们在接下来的30分钟里谈谈XAML。

2.什么是XAML

一个界面程序的核心无疑是界面和后台代码，xaml是微软为构建应用程序界面而创建的描述性语言。也就是说这个东西是给接口用的。

前面的xaml代码：

窗口x:Class='MyXaml。窗口1 '

xmlns=' http://schemas . Microsoft . com/winfx/2006/xaml/presentation '

xmlns:x=' http://schemas . Microsoft . com/winfx/2006/xaml '

title=' MyXaml ' Height=' 150 ' Width=' 300 '

格子

网格。行定义

RowDefinition Height='30'/

/网格。行定义

网格。列定义

ColumnDefinition Width='Auto'/

ColumnDefinition宽度='*'/

/网格。列定义

text block grid . column=' 0 ' grid . row=' 0 ' font weight=' bold ' text=' name:' Width=' 30 '/

text block grid . column=' 0 ' grid . row=' 1 ' font weight=' bold ' width=' 30 ' Gender:/text block

text block grid . column=' 0 ' grid . row=' 2 ' font weight=' bold ' width=' 30 ' text=' age '/text block

文本框网格。Column='1 '网格。row=' 0 ' font weight=' Bold ' Width=' 100 '/

文本框网格。Column='1 '网格。row=' 1 ' font weight=' Bold ' Width=' 100 '/

文本框网格。Column='1 '网格。row=' 2 ' font weight=' Bold ' Width=' 100 '/

/网格

/窗口

上面的xaml是我设计的三行两列的界面。运行后，显示如下：

在这里，我没有写一行c#代码，但是它实际上是可以运行的，所以可以说它也是一种编程语言。只是它更注重界面上的东西。

那么它的运行是怎么来的呢？看看下面的东西：

X: class=' myxaml.window1' 3354使用class属性指定c#类名(后台c#代码)

xmlns:x=3358schemas.microsoft.com/winfx/2006/XAML3354这意味着xaml的名称空间被x .替换，用于包含特定的关键字和System中类型的子集。窗口.标记

xmlns=3358schemas.microsoft.com/winfx/2006/xaml/presentation——另一个名称空间。映射很多wpf.net命名空间(system.windows.xxx，一对多映射，主要封装了三个程序集，WindowsBase.dll、PresentationFramework.dll和PresentationFramework.dll)。

2.1 启动

程序的启动位置实际上是在程序的App.xaml文件中：

应用程序x:Class='MyXaml。应用程序

xmlns=' http://schemas . Microsoft . com/winfx/2006/xaml/presentation '

xmlns:x=' http://schemas . Microsoft . com/winfx/2006/xaml '

StartupUri='Window1.xaml '

申请。资源

/应用。资源

/应用程序

看下面这句话：

StartupUri='Window1.xaml '

是这个节目的切入点。运行程序后，我们将在显示屏上显示window1。

3.XAML语法概述

在上面的xaml中，显示的核心布局之一是以下代码：

格子

网格。行定义

RowDefinition Height='30'/

/网格。行定义

网格。列定义

ColumnDefinition Width='Auto'/

ColumnDefinition宽度='*'/

/网格。列定义

text block grid . column=' 0 ' grid . row=' 0 ' font weight=' bold ' text=' name:' Width=' 30 '/

text block grid . column=' 0 ' grid . row=' 1 ' font weight=' bold ' width=' 30 ' Gender:/text block

text block grid . column=' 0 ' grid . row=' 2 ' font weight=' bold ' width=' 30 ' text=' age '/text block

文本框网格。Column='1 '网格。row=' 0 ' font weight=' Bold ' Width=' 100 '/

文本框网格。Column='1 '网格。row=' 1 ' font weight=' Bold ' Width=' 100 '/

文本框网格。Column='1 '网格。row=' 2 ' font weight=' Bold ' Width=' 100 '/

/网格

1.看网格控件。这是wpf中的一个布局控件，就像给单元格设置一个窗体一样。但是，您可以根据其行和列属性设置行和列。上面设置了三行两列的布局。

2.看看TextBlock和TextBox控件。这些是一些显示控件、显示栏和文本框。此外，wpf中还有许多控件。

首先需要重新确认的是，在C#中一切都是对象。这样，就很好理解了。

XAML的这些各种控件，其实都是类，我们应用它们的时候，应用的是对象，其中定义的一些宽度、高度等属性，都是封装在这些类中的一些属性字段。

当然还有网格等属性。Column='1 '网格。上面TextBox和TextBlock中的Row='2 '实际上不属于这两个类中的属性和字段。

而让他们拥有这样属性的东西，无疑是外部网格布局控件赋予的。在WPF，这样的功能实现被称为附加属性，是从属属性的一种特殊用法。从属属性将在后面详细讨论。

第一个总结

WPF的XAML语法实际上可以理解为另一种形式的编程语言。它的语法类似于XML的语法，但是它更严格，并且需要准确性。

XAML主要包括布局和控件，以构建各种形式的应用程序。除此之外，还有很多新的强大的东西让它更加灵活方便，比如依靠属性。

3.1 布局

WPF中有五种常用的布局：Canvas、Grid、StackPanel、DockPanel和WrapPanel。下面来说说这五个布局控件的使用方法。

1、画布

要说Canvas，先看下面的xaml代码：

帆布

button Name=' Bt n1 ' Height=' 100 ' Width=' 100 ' Content=' Bt n1 ' Margin=' 10 '/

button Name=' Bt N2 ' Height=' 100 ' Width=' 100 ' Content=' Bt N2 ' Margin=' 10 '/

/画布

然后，查看Canvas canvas上生成的屏幕，如下所示：

为什么不显示btn1？因为两个按钮重叠，所以只显示顶部的控件(控件越靠近结束标签/画布，如果两个按钮的位置颠倒，就会出现btn1)。

Canvas的布局基本和之前的Winform一样，以左上角为中心，以离左上角的上下距离为标准。如果你想改变按钮的位置，你应该设置画布的四个属性。左边，画布。顶部，帆布。底部和画布。右为按钮控制。

所以Canvas要以绝对布局为主，对于要求不高的界面和相对固定的界面，用这种方式拖拽控件布局。

2、 Grid

WPF表单程序的默认布局是一个网格，先看下面的代码：

格子

button Name=' Bt n1 ' Height=' 100 ' Width=' 100 ' Content=' Bt n1 ' Margin=' 10 '/

button Name=' Bt N2 ' Height=' 100 ' Width=' 100 ' Content=' Bt N2 ' Margin=' 10 '/

/网格

看到这里，你可能会说，这不跟上面的Canvas一样吗？但是真的一样吗？它们的形式如下：

我肯定你能看见它。是的，与Canvas不同，网格表单的默认显示是居中的，与Canvas不同，Canvas的布局是基于左上角的。

那么网格布局有什么好处呢？查看以下代码：

格子

网格。行定义

RowDefinition Height='*'/

/网格。行定义

网格。列定义

ColumnDefinition宽度='*'/

/网格。列定义

button Name=' Bt n1 ' Height=' 40 ' Width=' 40 ' Content=' Bt n1 '/

按钮网格。Row='1 '网格。column=' 1 ' Name=' Bt N2 ' Height=' 40 ' Width=' 40 ' Content=' Bt N2 '/

/网格

然后查看生成的窗口：

我相信你能理解，grid就是把表单分成块的网格，而划分的功能是由两组属性定义的：Grid。行定义和网格。ColumnDefinitions，其中分别定义了行和列，并将表单分成若干行和列。可以根据Width属性设置行高和列宽。

如上图，xaml定义了一个两行两列的网格，btn1放在第0行第0列(如果没有显示定义，默认将拖动的控件放在这个网格中。)，btn2放在第1行第1列。

关于网格属性做以下几个说明。

RowDefinition表示网格的行，它只有一个Height属性，没有Width属性。*表示该行占据了窗体的所有剩余高度，如果两者都设置为*，则窗体被等分。如上图，也可以做成3:1的形式，只需将两条线定义分别设为3*和*即可。

ColumnDefinition表示网格的列，其中只有一个Width属性，没有Height属性。*符号的用法与RowDefinition相同，但相对于RowDefinition划分表单的高度，这里*表示划分表单的宽度。

可以说Grid实现了网格布局，功能相当强大，使用起来也很灵活。

3、 StackPanel

堆栈布局遵循从窗口中间、从顶部、从上到下排列控件的默认原则。先看下面的代码：

堆栈面板

button Name=' Bt n1 ' Height=' 40 ' Width=' 40 ' Content=' Bt n1 '/

button Name=' Bt N2 ' Height=' 40 ' Width=' 40 ' Content=' Bt N2 '/

/堆栈面板

显示的表单如下：

如上图所示，控件的布局默认是垂直的，那么如何设置控件的水平布局呢？我们只需要设置StackPanel的Orientation属性：

Orientation='Horizontal '水平布局，控件从窗体的中间和左侧从左到右排列。

Orientation='Vertical '垂直布局，默认属性。

水平布局的示例如下：

堆栈面板方向='水平'

button Name=' Bt n1 ' Height=' 40 ' Width=' 40 ' Content=' Bt n1 '/

button Name=' Bt N2 ' Height=' 40 ' Width=' 40 ' Content=' Bt N2 '/

/堆栈面板

窗口显示：

4、 DockPanel

Dock默认布局原则，从左中位置开始，控件依次排列，最后一个控件从中央开始填充剩余区域。请看下面的代码：

DockPanel

button Name=' Bt n1 ' Height=' 40 ' Width=' 40 ' Content=' Bt n1 '/

按钮高度='40 '宽度='40 '内容='btn2' /

/DockPanel

该布局的形式如下所示：

与StackPanel不同，Dockpanel布局依赖于附加到其他控件的四个附加属性。请参见下表：

停靠面板。码头属性

解释

顶端

顶部，如果设置的话，从中间顶部开始，按照上面的原则进行布局。

左边的

左侧，默认布局

对吧

右边部分，如果设置的话，按照上面的原则从中间右侧开始布局。

纽扣

底部，如果设置的话，从中间底部开始，按照上面的原则进行布局。

请看下面的例子，xaml代码：

DockPanel

按钮停靠面板。dock=' Bottom ' Name=' Bt n1 ' Height=' 40 ' Width=' 40 ' Content=' Bt n1 '/

按钮停靠面板。dock=' Bottom ' Height=' 40 ' Width=' 40 ' Content=' Bt N2 '/

按钮高度='40 '宽度='40 '内容='btn2' /

/DockPanel

界面如下：

根据上面的描述代码，在这里，StackPanel从底部开始布局两个BTN，在剩余的空间(窗口的上部)，然后从默认位置的左边部分放置BTN，最后的BTN填充最后的剩余空间。

5、 WrapPanel

WrapPanel布局遵循从窗体左上角开始对多个控件进行自动换行的原则。和StackPanel一样，它也有表示垂直和水平方向的方向属性。请看下面的xaml代码：

包装面板

button Name=' Bt n1 ' Height=' 40 ' Width=' 40 ' Content=' Bt n1 '/

按钮高度='40 '宽度='40 '内容='btn2' /

/WrapPanel

生成的界面如下：

因此，WrapPanel的默认布局是横向。当右边没有空间时，其余的控件将从第二行开始重新排列。

如果其Orientation属性设置为Vertical，则从左上角开始，从上到下排列，如果下面没有空间，则从第二行开始从上到下重新排列。Xaml如下：

WrapPanel方向='垂直'

button Name=' Bt n1 ' Height=' 40 ' Width=' 40 ' Content=' Bt n1 '/

按钮高度='30 '宽度='40 '内容='btn2' /

/WrapPanel

表单布局如下所示：

从上面可以看出，WrapPanel提供的主要功能是从表单的左上角开始对多个控件的行进行换行。

第二个总结：

除此之外，WPF还有以下布局：AB Panel、ToolbarOverflowPanel、ToolbarPanel、Uniform Grid、Virtualizing Panel、Virtualizing StackPanel，都是从Panel的抽象类派生出来的，内容属性子级可以添加多个控件。它们控制控件的布局。

3.2 控件

其实布局也是控件的一种，只是单独列出来了。因为布局在WPF占有极其重要的地位。接下来主要说说其他控件。一般来说，布局以外的控件可以分为以下三类。

第一类：核心用户输入控件，用户界面创建的核心。其中常用的有Button、RadioButton、ComboBox、CheckBox、DataGrid、ListBox、ListView、TreeView、TextBlock、TextBox、Label。

第二类：窗口装饰控件。这些元素用于装饰窗口对象的框架。菜单、工具栏、状态栏、工具提示和进度条是常用的。

第三类：媒体控制，支持音视频播放和图像显示。常用的控件有Image、MediaElement和SoundPlayerAction。

下面分别说说每类控件的基本功能。

一、核心用户输入控件

1.Button、RadioButton和Button控件的基本用法主要是按钮被点击时对click事件的处理方式。按钮的Click事件由click特性声明，主要有三种方式：

当按下并释放Release:按钮时，会发生click事件。

悬停：鼠标悬停在按钮上以引发单击事件。

Press:单击按钮时会引发click事件。

我们可以使用按钮点击事件的模式来设置点击我们想要的控件的效果。

Button是一个内容控件，我们可以为它的内容设置其他的东西，比如下面的代码，就是为一个Button按钮设置一个图片：

按钮x:Name=' ImageButton ' Margin=' 3 ' Grid。row=' 1 ' horizontal alignment=' Left '

堆栈面板边距='1 '方向='水平'宽度='620 '

image Source=' back . BMP ' Stretch=' UniformToFill ' Width=' 160 '/

TextBlock Width='130' /

Texttext='图片按钮' Margin='1，15，1，1'/

/堆栈面板

/按钮

除此之外，我们还可以为按钮设置不同的样式，使其看起来更好。涉及到样式，模板，触发器，这里就不多说了。

两个radio RadioButton都继承自Buttonbase类，具有相同的基本属性和相似的用法。

2.ComboBox控件是指带有下拉列表的选择控件，通过单击控件上的箭头可以显示或隐藏下拉列表。用法如下：

组合框

美国汽车协会

/ComboBox

Item表示下拉项，可以自行设置，也可以绑定获取。编辑器在ComboBox的属性中有一个Items集合，用于设置ComboBox的选项。用于绑定的属性是ItemsSource属性。效果如下：

ComboBox控件选择事件，并可以从其选定项的SelectedItem属性绑定事件处理逻辑。

3.复选框控件，这意味着用户可以选择和清除的控件。其使用形式如下：

检验盒

内容

/复选框

效果如下图所示：

CheckBox控件主要用于处理三个事件。检查选中和未选中的事件，以及影响外观的不确定事件。三个事件的处理逻辑可以在后台显示。

复选框x:Name='cb1 '网格。Row='1' Margin='5，0，0，0 '

Content='三态复选框' IsThreeState=' True '

已检查='HandleCheck '未检查='HandleUnchecked '

不确定='HandleThirdState' /

4.DataGrid、ListBox、ListView和TreeView都是用于在行和列中显示的控件。前三个是几行和几列的形式，而最后一个TreeView显示一个树形结构。

以上控件可用于绑定xml数据或数据库，每种数据或数据库都有不同的形式。的基本显示图如下：

树形视图：

TextBox还可以用于数据绑定，并可以与其他控件对象相关联，以达到所需的效果。

除了上面列出的以外，还有许多核心的用户输入控件，比如日历、滑块、TabControl等。它们共同构成了WPF完整的输入控件家族，是用户创建界面的核心。

二、窗口修饰控件

1.菜单控件，菜单控件，相信大家都很熟悉。首先看下面的xaml:

格子

菜单

MenuItem Header='First '

MenuItem Header='second'/

MenuItem Header='secend '

MenuItem Header=' third ' Click=' Handler '/

/MenuItem

/菜单

/网格

显示的界面：

可以看出，menu控件通过使用MenuItem子项形成了层次结构，可以为每个菜单项设置Click事件。上面的例子没有设置菜单的高度，所以菜单覆盖了全世界。

菜单项有几个属性需要注意。从上图可以看出，一个子菜单有三个主要部分，其中一个是显示内容，内容前面有一个空格(是图标Icon的占位符)，子项后面有一个黑色的三角形箭头。

图标：可以设置菜单的图标，其内容可以是一个图像空间。其用法如下：

菜单项。图标

Image Source='Delete.png'/

/MenuItem。图标

其中source指向要显示为图标的图片。

Header:菜单的内容如上面的xaml所示进行设置。

2.工具栏控件，工具栏菜单。工具栏是一个HeaderedItemsControl。它的内容属性是Items和ItemsSource，它的Header属性是Header。有关基本用法，请参见以下xaml:

工具栏Tray Background='White '

工具栏Band='10' BandIndex='10 '

纽扣

图片来源='Ore.jpg' /

/按钮

分隔符/

纽扣

图片来源='Ore.jpg' /

/按钮

/工具栏

/ToolBarTray

Separator代表separator，它可以为工具栏中的每个按钮设计click事件来打开一个程序。

默认情况下，工具栏水平显示。如果要垂直显示，需要设置工具栏的Orientation属性。

工具栏大致如下所示：

4.工具提示控件。工具提示控件是一个简单但非常有用的控件。它可以为我们的软件提供非常漂亮的提示信息，提高软件的可用性，给用户更好的体验。在xaml上：

按钮Height='25' Content='提示工具演示' HorizontalAlignment='Center '

按钮。工具提示

工具提示背景='#60AA4030 '前景='白色'有阴影='假'

位置='鼠标'

堆栈面板

Textmargin=' 3 '提示：这是什么？/文本块

！-Image Source=' black . jpg ' Stretch=' Fill '/-

传说中的3亿个网站。/文本块

/堆栈面板

/工具提示

/按钮。工具提示

/按钮

5.进度条控件，进度条。进度条有两个属性，最小值和最大值，可以用来绑定事件，实现进度条的进度操作。一般来说，进度条是通过等待较长的启动时间，给用户带来的一种视觉加载效果。

有一个is infinite属性设置进度条的进度动画。如果设置为TRUE，将显示进度信息。默认值为FALSE。

三、媒体控件

2.媒体元素控件。在WPF，你可以使用MediaElement给应用添加媒体播放控件，完成播放音频和视频的功能。由于MediaElement属于UIElement，所以也支持鼠标和键盘的操作。

参考例子。

3.SoundPlayAction控件。WPF定义了一个SoundPlayAction类(继承自TriggerAction)，它以友好的方式封装了SoundPlayer类。这样做的好处是可以在控件的EventTrigger中添加SoundPlayerAciton动作，然后就可以播放音频文件了。

例如：

按钮内容='西日翰林'

按钮。扳机

event trigger routed event=' Button。点击

SoundPlayerAction Source='BLOW。WAV'/

/事件触发器

/按钮。扳机

/按钮

使用SoundPlayerAction类的一个好处是，您不必在后台编写代码来播放音频文件。不过这样的好处也会给你带来限制，因为你根本无法控制SoundPlayerAction和SoundPlayer之间的交互。

点击按钮，会创建SoundPlayeAction对象，在SoundPlayeAction内部构建SoundPlayer的一个实例，将SoundPlayeAction的Source属性值传递给SoundPlayer的实例，调用SoundPlayer的Play。事实上，由于没有预先加载音频文件，您在点击时将听不到声音。因此，使用SoundPlayerAction类的限制包括无法提前加载文件、循环播放的设置等。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

相关文章阅读