当前位置：首页 > news >正文

XAML基本语法与例子

news 来源：原创 2025/4/22 9:32:07

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>