XAML基础之集合语法

在WPF开发中，XAML的集合语法是一个非常重要的概念。它允许我们以声明式的方式定义和初始化各种集合类型的属性。本文将详细介绍XAML中的集合语法使用方法。

基本集合语法

XAML中的集合主要有两种表示方法：

标签语法（Property Element Syntax）
集合初始化语法（Collection Initialization Syntax）

标签语法示例

text
<StackPanel>
    <!-- 使用标签语法添加子元素 -->
    <StackPanel.Children>
        <Button Content="按钮1"/>
        <Button Content="按钮2"/>
        <TextBlock Text="文本块"/>
    </StackPanel.Children>
</StackPanel>

集合初始化语法示例

text
<!-- 直接在容器中添加子元素 -->
<StackPanel>
    <Button Content="按钮1"/>
    <Button Content="按钮2"/>
    <TextBlock Text="文本块"/>
</StackPanel>

特殊集合类型

ResourceDictionary集合

text
<Window.Resources>
    <!-- 资源字典集合 -->
    <ResourceDictionary>
        <!-- 定义颜色资源 -->
        <SolidColorBrush x:Key="PrimaryBrush" Color="Blue"/>
        <!-- 定义样式资源 -->
        <Style x:Key="ButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="{StaticResource PrimaryBrush}"/>
        </Style>
    </ResourceDictionary>
</Window.Resources>
<StackPanel>
     <!-- 按钮控件 -->
     <Button Content="Button" Style="{StaticResource ButtonStyle}"/>
</StackPanel>

合并资源字典

text
<Window.Resources>
    <ResourceDictionary>
        <!-- 合并多个资源字典 -->
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/Themes/Colors.xaml"/>
            <ResourceDictionary Source="/Themes/Styles.xaml"/>
        </ResourceDictionary.MergedDictionaries>
        
        <!-- 本地资源定义 -->
        <SolidColorBrush x:Key="LocalBrush" Color="Red"/>
    </ResourceDictionary>
</Window.Resources>

这个在写资源文件时会再详细写一遍。

集合属性的特殊用法

ItemsControl的Items集合

text
<ItemsControl>
    <!-- 使用Items属性元素语法 -->
    <ItemsControl.Items>
        <ListBoxItem Content="项目1"/>
        <ListBoxItem Content="项目2"/>
        <ListBoxItem Content="项目3"/>
    </ItemsControl.Items>
</ItemsControl>

<!-- 或者使用简写形式 -->
<ItemsControl>
    <ListBoxItem Content="项目1"/>
    <ListBoxItem Content="项目2"/>
    <ListBoxItem Content="项目3"/>
</ItemsControl>

这个其实就样winform下ListBox下的Items

Grid的行列定义

text
<Grid>
    <!-- 定义行集合 -->
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="2*"/>
    </Grid.RowDefinitions>
    
    <!-- 定义列集合 -->
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    
    <!-- 在网格中放置元素 -->
    <Button Grid.Row="0" Grid.Column="0" Content="按钮1"/>
    <TextBox Grid.Row="0" Grid.Column="1" Text="文本框"/>
    <ListBox Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
        <ListBoxItem Content="列表项1"/>
        <ListBoxItem Content="列表项2"/>
    </ListBox>
</Grid>

触发器集合

样式触发器

text
<Window.Resources>
    <Style TargetType="Button">
        <!-- 触发器集合 -->
        <Style.Triggers>
            <!-- 属性触发器 -->
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="LightBlue"/>
            </Trigger>
            <!-- 数据触发器 -->
            <DataTrigger Binding="{Binding IsEnabled}" Value="False">
                <Setter Property="Opacity" Value="0.5"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Window.Resources>
<StackPanel>
    <Button Content="Click Me" IsEnabled="False"></Button>
</StackPanel>

控件触发器

text
<Button Content="测试按钮">
    <Button.Triggers>
        <!-- 事件触发器 -->
        <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation 
                        Storyboard.TargetProperty="Opacity"
                        From="1.0" To="0.0" Duration="0:0:1"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>

点击后，Button会慢慢消失

动画集合

text
<Window.Resources>
    <Storyboard x:Key="FadeAnimation">
        <DoubleAnimation   
            Storyboard.TargetProperty="Opacity"  
            From="1.0" To="0.0" Duration="0:0:1"/>
        <ColorAnimation   
            Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"  
            To="Red" Duration="0:0:1"/>
    </Storyboard>
</Window.Resources>

<Grid>
    <Button Content="点击我" Width="100" Height="30"  
            Name="AnimatedButton">
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <BeginStoryboard Storyboard="{StaticResource FadeAnimation}"/>
            </EventTrigger>
        </Button.Triggers>
    </Button>
</Grid>

按钮的透明度从1.0渐变到0.0（完全透明）
按钮的背景色渐变为红色

命令绑定集合

text
<Window.CommandBindings>
    <!-- 命令绑定集合 -->
    <CommandBinding 
        Command="ApplicationCommands.New" 
        Executed="NewCommand_Executed"
        CanExecute="NewCommand_CanExecute"/>
    <CommandBinding 
        Command="ApplicationCommands.Save" 
        Executed="SaveCommand_Executed"/>
</Window.CommandBindings>

这块在后面需详细说明

实际应用示例

复杂布局示例

text
<DockPanel>
    <!-- 菜单栏 -->
    <Menu DockPanel.Dock="Top">
        <MenuItem Header="文件">
            <MenuItem Header="新建" Command="New"/>
            <MenuItem Header="打开" Command="Open"/>
            <Separator/>
            <MenuItem Header="退出"/>
        </MenuItem>
        <MenuItem Header="编辑">
            <MenuItem Header="复制"/>
            <MenuItem Header="粘贴"/>
        </MenuItem>
    </Menu>
    
    <!-- 工具栏 -->
    <ToolBarTray DockPanel.Dock="Top">
        <ToolBar>
            <Button Content="新建"/>
            <Button Content="保存"/>
            <Separator/>
            <Button Content="剪切"/>
            <Button Content="复制"/>
        </ToolBar>
    </ToolBarTray>
    
    <!-- 状态栏 -->
    <StatusBar DockPanel.Dock="Bottom">
        <StatusBarItem>
            <TextBlock Text="就绪"/>
        </StatusBarItem>
        <Separator/>
        <StatusBarItem>
            <ProgressBar Width="100" Height="15" Value="50"/>
        </StatusBarItem>
    </StatusBar>
    
    <!-- 主内容区 -->
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        
        <!-- 左侧导航 -->
        <TreeView Grid.Column="0">
            <TreeViewItem Header="项目1">
                <TreeViewItem Header="子项1"/>
                <TreeViewItem Header="子项2"/>
            </TreeViewItem>
            <TreeViewItem Header="项目2"/>
        </TreeView>
        
        <!-- 右侧内容 -->
        <TabControl Grid.Column="1">
            <TabItem Header="选项卡1">
                <StackPanel>
                    <TextBlock Text="内容1"/>
                    <Button Content="测试按钮"/>
                </StackPanel>
            </TabItem>
            <TabItem Header="选项卡2">
                <ListBox>
                    <ListBoxItem Content="列表项1"/>
                    <ListBoxItem Content="列表项2"/>
                </ListBox>
            </TabItem>
        </TabControl>
    </Grid>
</DockPanel>

这个布局后面会具体写每个控件怎么用，如果保留Winform的思维就比较别扭了，这块接近HTML+CSS。

总结

XAML的集合语法提供了一种声明式的方式来定义和初始化各种类型的集合。通过本文的示例，我们可以看到：

集合可以使用标签语法或简写语法来定义
不同类型的控件和容器有其特定的集合用法
集合语法在样式、触发器、动画等场景中都有广泛应用
合理使用集合语法可以使XAML代码更加清晰和易于维护

掌握XAML的集合语法对于WPF开发来说是非常重要的，它能帮助我们更好地组织和管理UI元素，创建更复杂的用户界面。

目录