分析一段XAML语言代码

分析WPF的一段xaml代码:

 1 <UserControl x:Class="UserControl1"
 2              xmlns="..."
 3              xmlns:x="..."
 4              xmlns:mc="..."
 5              xmlns:d="..." 
 6              xmlns:local="clr-namespace:WpfApp3"  
 7              mc:Ignorable="d" 
 8              d:DesignHeight="450" d:DesignWidth="800">
 9     <Grid>
10         <Border BorderBrush="Blue" BorderThickness="2" Margin="5,3">
11             <ListBox ItemsSource="{Binding Datas}" SelectedItem="{Binding SelectedData}">
12                 <ListBox.ItemTemplate>
13                     <DataTemplate>
14                         <Border Background="LightGreen" BorderBrush="LightYellow" BorderThickness="1" Margin="1">
15                             <StackPanel Orientation="Horizontal">
16                                 <TextBlock Width="100" Text="{Binding Name}" />
17                                 <TextBlock Margin="10,0,0,0" Text="{Binding Age}" Width="100"/>
18                             </StackPanel>
19                         </Border>
20                     </DataTemplate>
21                 </ListBox.ItemTemplate>
22             </ListBox>
23         </Border>   
24     </Grid>
25 </UserControl>

代码

解释

xmlns:local="clr-namespace:WpfApp3"

包名

DesignHeight="450"

窗体的高

DesignWidth="800"

窗体的宽

Grid

链接二:

Grid.RowDefinitions属性将Grid控件分行,属性值为RowDefinition标签,每一个RowDefinition标签将该Grid对象分为一行;

Grid.ColumnDefinitions属性将Grid控件分列,属性值为ColumnDefinition标签,每一个ColumnDefinition标签将该Grid对象分为一列;

Grid方格布局

Border

边框样式

BorderBrush="Blue" 

绘制外部边框颜色

BorderThickness="2" 

边框厚度

Margin="1"

四个边距都是 1px

Margin="5,3"

上边距和下边距是 5px

右边距和左边距是 3px

Margin="10,5,15"(css写法:margin:10px 5px 15px;)

上边距是 10px

右边距和左边距是 5px

下边距是 15px

Margin="10,1,2,3"

左边距是 10px

上边距是 1px

右边距是 2px

下边距是 3px

ListBox ItemsSource="{Binding Datas}"

ItemsSource绑定数事件Datas

ListBox SelectedItem="{Binding SelectedData}"

SelectedItem 绑定事件SelectedData

<ListBox.ItemTemplate>

Item模版

<DataTemplate>

Data模版

Background

背景颜色

StackPanel


堆叠面板

<StackPanel Orientation="Horizontal">

堆叠面板,布局垂直

Orientation

布局属性

别引用:StackPanel、GroupBox、DockPanel、WrapPanel