XAML基本语法与例子

XAML (eXtensible Application Markup Language) 是一种基于 XML 的声明性语言，主要用于 WPF、UWP、Xamarin.Forms 和 MAUI 等框架中构建用户界面。

基本语法结构

1. 根元素和命名空间声明

<Page x:Class="MyNamespace.MyPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="clr-namespace:MyNamespace">
    <!-- 内容 -->
</Page>

2. 对象元素语法

<Button Content="点击我" />

3. 属性语法

<Button Content="点击我" Background="LightBlue" Width="100" Height="30" />

4. 属性元素语法

<Button Width="100" Height="30">
    <Button.Content>
        <StackPanel Orientation="Horizontal">
            <Image Source="icon.png" Width="16" Height="16"/>
            <TextBlock Text="点击我" Margin="5,0,0,0"/>
        </StackPanel>
    </Button.Content>
</Button>

5. 集合语法

<StackPanel>
    <StackPanel.Children>
        <Button Content="按钮1"/>
        <Button Content="按钮2"/>
        <Button Content="按钮3"/>
    </StackPanel.Children>
</StackPanel>

<!-- 简写形式 -->
<StackPanel>
    <Button Content="按钮1"/>
    <Button Content="按钮2"/>
    <Button Content="按钮3"/>
</StackPanel>

6. 内容属性语法

<!-- Label 的 Content 是内容属性 -->
<Label>这是一个标签</Label>

<!-- 等同于 -->
<Label Content="这是一个标签"/>

7. 标记扩展

<!-- 静态资源 -->
<Button Content="点击我" Background="{StaticResource MyBrush}"/>

<!-- 数据绑定 -->
<TextBlock Text="{Binding UserName}"/>

<!-- 相对源绑定 -->
<Button Content="确定" Command="{Binding DataContext.SubmitCommand, RelativeSource={RelativeSource AncestorType=Window}}"/>

8. 事件处理

<Button Content="点击我" Click="Button_Click"/>

完整示例

示例1: 简单窗口

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="主窗口" Height="350" Width="525">
    <Grid>
        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
            <TextBlock Text="欢迎使用XAML" FontSize="24" Margin="0,0,0,20"/>
            <TextBox x:Name="NameTextBox" Width="200" Margin="0,0,0,10"/>
            <Button Content="打招呼" Width="100" Click="GreetButton_Click"/>
        </StackPanel>
    </Grid>
</Window>

示例2: 数据绑定

<Window x:Class="WpfApp.DataBindingExample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="数据绑定示例" Height="300" Width="400">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        
        <TextBox Grid.Row="0" Text="{Binding UserName, UpdateSourceTrigger=PropertyChanged}" 
                 Margin="10" Width="200"/>
        
        <TextBlock Grid.Row="1" Text="{Binding Greeting}" Margin="10" FontSize="16"/>
        
        <Button Grid.Row="2" Content="清除" Command="{Binding ClearCommand}" 
                Width="100" Margin="10"/>
    </Grid>
</Window>

示例3: 样式和模板

<Window x:Class="WpfApp.StyleExample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="样式示例" Height="300" Width="400">
    <Window.Resources>
        <!-- 定义样式 -->
        <Style x:Key="MyButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="#FF0080FF"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="Padding" Value="10,5"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Background="{TemplateBinding Background}" 
                                CornerRadius="5" Padding="{TemplateBinding Padding}">
                            <ContentPresenter HorizontalAlignment="Center" 
                                            VerticalAlignment="Center"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    
    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
        <Button Content="样式按钮" Style="{StaticResource MyButtonStyle}" Width="150"/>
    </StackPanel>
</Window>

示例4: 资源字典

Resources.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <SolidColorBrush x:Key="PrimaryBrush" Color="#FF0080FF"/>
    <SolidColorBrush x:Key="SecondaryBrush" Color="#FF80FF00"/>
    
    <Style x:Key="HeaderTextStyle" TargetType="TextBlock">
        <Setter Property="FontSize" Value="24"/>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="Foreground" Value="{StaticResource PrimaryBrush}"/>
    </Style>
</ResourceDictionary>

MainWindow.xaml

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="资源字典示例" Height="300" Width="400">
    <Window.Resources>
        <ResourceDictionary Source="Resources.xaml"/>
    </Window.Resources>
    
    <StackPanel>
        <TextBlock Text="应用程序标题" Style="{StaticResource HeaderTextStyle}" 
                   Margin="10" HorizontalAlignment="Center"/>
        <Button Content="主要按钮" Background="{StaticResource PrimaryBrush}" 
                Foreground="White" Width="150" Margin="10"/>
    </StackPanel>
</Window>

高级特性

1. 附加属性

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    
    <TextBlock Grid.Row="0" Text="标题"/>
    <StackPanel Grid.Row="1">
        <!-- 内容 -->
    </StackPanel>
</Grid>

2. 类型转换器

<!-- 使用 Brush 类型转换器 -->
<Button Background="LightBlue"/>

<!-- 使用 Thickness 类型转换器 -->
<Border Padding="10,5,10,5"/>

<!-- 使用 FontWeight 类型转换器 -->
<TextBlock FontWeight="Bold"/>

3. x: 命名空间指令

<!-- x:Key 用于资源 -->
<Style x:Key="MyStyle" TargetType="Button">...</Style>

<!-- x:Name 用于元素命名 -->
<TextBox x:Name="UserNameTextBox"/>

<!-- x:Type 用于类型引用 -->
<DataTemplate DataType="{x:Type local:Customer}">...</DataTemplate>

<!-- x:Null 表示空值 -->
<Button Background="{x:Null}"/>

4. 自定义控件和用户控件

自定义控件

<local:CustomControl Property1="Value1" Property2="Value2"/>

用户控件

<UserControl x:Class="MyApp.MyUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <!-- 控件内容 -->
    </Grid>
</UserControl>

最佳实践

1. 使用适当的命名空间前缀

2. 将样式和资源放入资源字典

3. 使用数据绑定而不是直接操作UI元素

4. 遵循MVVM模式分离UI和业务逻辑

5. 使用适当的布局面板(如Grid、StackPanel等)

6. 为可重用组件创建用户控件或自定义控件

XAML的强大之处在于它能够清晰地分离界面定义和程序逻辑，同时提供丰富的声明式语法来描述复杂的用户界面。