WPF入门:XAML

XAML是WPF技术中专门用于设计UI的语言

XAML优点最大的优点是将UI与逻辑代码剥离

创建第一个WPF应用程序

WPF入门:XAML

VS默认生成的WPF项目解决方案

WPF入门:XAML

  • Properties:里面主要包含了程序用到的一些资源和配置
  • App.xaml:程序入口(Main方法就包含在该类中)
  • MainWindow.xaml:默认的主窗体

XAML代码

<Window x:Class="MyWpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MyWpfApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>

    </Grid>
</Window>

XAML是一种继承自XML的语言,所以很多XML的概念是通用语XAML的,如使用标签声明一个元素。使用

<Tag Attribute1=Value1 Attribute2=Value2>Content</Tag><!--非空标签-->
<Tag Attribute1=Value1 Attribute2=Value2/><!--空标签-->

XML是一种声明式语言,一个标签对应了一个对象,对象之间的关系要么并列、要么是包含关系。标签内的元素相当于对象的属性。通过xmlns定义名称空间,xmlns语法

xmlns[:可选的映射前缀]="名称空间"

http://schemas.microsoft.com/winfx/2006/xaml/presentation名称空间对应的是与绘制UI相关的程序集,如System.Windows,System.Windows.Controls,System.Windows.Data,System.Windows.Media等等。http://schemas.microsoft.com/winfx/2006/xaml对应的是语言解析处理相关的程序集

通过 x:Class="MyWpfApp.MainWindow"与逻辑代码建立关联,XAML代码编译后会生成与后台代码相关联的partial类。

XAML使用树型逻辑结构来描述UI

 <Grid>
     <StackPanel>
         <TextBox></TextBox>
         <Button></Button>
     </StackPanel>
 </Grid>

初始化标签属性值

 <Rectangle x:Name="rect" Height="50" Width="100" Fill="LightBlue" ></Rectangle>

标记扩展

WPF允许将一个对象的属性值依赖在其他对象的某个属性之上。

  <StackPanel>
      <TextBox Text="{Binding ElementName=slider1,Path=Value,Mode=OneWay}"></TextBox>
      <Slider x:Name="slider1" Margin="5"></Slider>
  </StackPanel>

其实标记扩展也只是一种简写而已。只有继承了MarkupExtension的类才可以使用标记扩展语法来创建对象。

   <StackPanel>
       <TextBox>
           <TextBox.Text>
               <Binding ElementName="slider1" Path="Value"></Binding>
           </TextBox.Text>
       </TextBox>
    <Slider x:Name="slider1" Margin="5"></Slider>

通过x:Code标签转义标签

x:Code可以将后置代码(Code-Behind)嵌入到XAML代码中

 <Button Height="50" Click="Button_Click"></Button>
 <x:Code>
     <![CDATA[
         private void Button_Click(object sender, RoutedEventArgs e)
         {

         }
     ]]>
 </x:Code>

导入其他程序集语法

xmlns:映射名="clr-namespace:类库中的名称空间的名字;assimbly=类库文件名"
上一篇:【工作细节记录】维护项目中前端JS组件丢失后,应如何维护开发之启发


下一篇:es6 中let与const的简析