WPF零基础入门系列(三) XAML基础

WPF零基础入门系列(三) XAML基础

创建项目

打开vs,左上角文件-新建项目,选择WPF应用



然后会生成一个项目

初识XAML

XAML是一种类似于XML的标记语言,在MainWindow.XAML里可以看见如下内容

<Window x:Class="WpfApp1.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:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>

</Grid>
</Window>

它的主体结构是这样的

<Window>
<Grid>
</Grid>
</Window>

中间这一长串是Window的attribute和property,类似网址的东西其实是命名空间

x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp1"
Title="MainWindow" Height="350" Width="525"

x:Class=”WpfApp1.MainWindow”

x:Class=”WpfApp1.MainWindow”,意思这段xaml代码对应WpfApp1命名空间里的MainWindow类

按f7转到后台代码

namespace WpfApp1
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
}

MainWindow声明的时候使用了partial关键字,编译的时候再将其整合起来.

这在一定程度上实现了页面设计和后台逻辑的分离.

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

默认的命名空间,自带的控件等都存在这里

假如把它改成xmlns:a=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

那上述XAML就要这样引用

<a:Window>
<a:Grid>
</a:Grid>
</a:Window>

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

xaml的命名空间

举个例子,我们在前台(XAML里)设置TextBlock的x:Name属性

<TextBlock x:Name="tbk_test"/>

在后台就可以操作这个TextBlock对象

tbk_test.Text="Hello XAML";

xmlns:local=”clr-namespace:WpfApp1”

WpfApp1命名空间

Title=”MainWindow”

设置标题

Height=”350”

设置窗口高度

Width=”525”

设置窗口宽度

XAML结构解析

XAML用树形结构来描述UI

<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<DockPanel>
<TextBlock Text="Hello XAML"/>
<RadioButton/>
<CheckBox/>
</DockPanel>
<Border Grid.Column="1">
<Button Content="Hello XAML" Width="100" Height="40"/>
</Border>
<TextBox Grid.Column="0" Grid.Row="1" Width="100" Height="40"/>
<StackPanel Grid.Column="1" Grid.Row="1">
<Rectangle Width="100" Height="40" Fill="Blue" />
<Ellipse Width="100" Height="100" Fill="Red"/>
</StackPanel>
</Grid>
</Window>

<Window>
<Grid>
<DockPanel>
<TextBlock/>
<RadioButton/>
<CheckBox/>
</DockPanel>
<Border>
<Button/>
</Border>
<TextBox/>
<StackPanel>
<Rectangle/>
<Ellipse/>
</StackPanel>
</Grid>
</Window>

通过观察我们可以发现,有的对象只能包含一个子对象(Window,Border),有的对象能包含多个,比如面板(Grid,StackPanel,DockPanel)

XAML的本质

XAML里的一个标签转换成后台代码就是一个对象,所以上面的XAML也可以写成这样

public MainWindow()
{
InitializeComponent();

Grid grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition());
grid.RowDefinitions.Add(new RowDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());

DockPanel dockPanel = new DockPanel();
dockPanel.Children.Add(new TextBlock { Text = "Hello XAML" });
dockPanel.Children.Add(new RadioButton());
dockPanel.Children.Add(new CheckBox());

Border border = new Border
{
Child = new Button
{
Content = "Hello XAML",
Width = 100,
Height = 40
}
};
border.SetValue(Grid.ColumnProperty, 1);

TextBox tbx = new TextBox
{
Width = 100,
Height = 40
};
tbx.SetValue(Grid.ColumnProperty, 0);
tbx.SetValue(Grid.RowProperty, 1);

StackPanel stackPanel = new StackPanel();
stackPanel.Children.Add(new Rectangle() { Width = 100, Height = 40, Fill = new SolidColorBrush(Colors.Blue) });
stackPanel.Children.Add(new Ellipse() { Width = 100, Height = 40, Fill = new SolidColorBrush(Colors.Red) });
stackPanel.SetValue(Grid.ColumnProperty, 1);
stackPanel.SetValue(Grid.RowProperty, 1);

grid.Children.Add(dockPanel);
grid.Children.Add(border);
grid.Children.Add(tbx);
grid.Children.Add(stackPanel);

this.Content = grid;
}

相比这种写法,XAML支持实时预览,并且使得软件架构更清晰.