WPF关键组件代码示例

通过一个综合示例代码，展示WPF的关键组件，包括XAML、控件、数据绑定、样式和模板以及动画。这个示例创建一个简单的WPF应用程序，包含一个文本框、按钮和列表框，实现数据绑定、自定义样式和模板，以及按钮点击后的动画效果。

示例代码

1. XAML文件（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="MainWindow" Height="400" Width="600"><Window.Resources><!-- 样式定义 --><Style TargetType="Button"><Setter Property="Background" Value="LightBlue"/><Setter Property="FontSize" Value="16"/><Setter Property="Margin" Value="10"/></Style><!-- 数据模板 --><DataTemplate x:Key="ListBoxItemTemplate"><StackPanel Orientation="Horizontal"><TextBlock Text="{Binding Name}" FontWeight="Bold"/><TextBlock Text=" - " /><TextBlock Text="{Binding Age}" /></StackPanel></DataTemplate></Window.Resources><Grid><Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="Auto"/><RowDefinition Height="*"/></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><!-- 文本框 --><TextBox x:Name="txtName" Grid.Row="0" Width="200" Margin="10" PlaceholderText="Enter your name" /><!-- 按钮 --><Button Grid.Row="1" Content="Add to List" Click="Button_Click"/><!-- 列表框 --><ListBox Grid.Row="2" x:Name="lstPeople" ItemTemplate="{StaticResource ListBoxItemTemplate}" /><!-- 动画效果 --><Button Grid.Row="3" Content="Animate" Click="AnimateButton_Click" HorizontalAlignment="Center"/></Grid>
</Window>

2. 后台代码（MainWindow.xaml.cs）

using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Media.Animation;namespace WpfApp
{public partial class MainWindow : Window{public ObservableCollection<Person> People { get; set; }public MainWindow(){InitializeComponent();People = new ObservableCollection<Person>();lstPeople.ItemsSource = People;}private void Button_Click(object sender, RoutedEventArgs e){if (!string.IsNullOrWhiteSpace(txtName.Text)){People.Add(new Person { Name = txtName.Text, Age = 30 });txtName.Clear();}}private void AnimateButton_Click(object sender, RoutedEventArgs e){DoubleAnimation animation = new DoubleAnimation{From = 1.0,To = 0.0,Duration = new Duration(TimeSpan.FromSeconds(1)),AutoReverse = true};((Button)sender).BeginAnimation(OpacityProperty, animation);}}public class Person{public string Name { get; set; }public int Age { get; set; }}
}

关键组件详解

a. XAML

XAML文件定义了整个用户界面的布局和结构。通过XAML，可以直观地看到界面的组织方式和控件的排列。

b. 控件（Controls）

示例中使用了TextBox、Button和ListBox控件。TextBox用于用户输入，Button用于触发事件，ListBox用于显示数据列表。

c. 数据绑定（Data Binding）

在后台代码中，使用ObservableCollection<Person>作为数据源，并绑定到ListBox控件的ItemsSource属性。通过这种方式，数据变化会自动反映在界面上。

People = new ObservableCollection<Person>();
lstPeople.ItemsSource = People;

d. 样式和模板（Styles and Templates）

在XAML文件的资源中定义了样式和数据模板。样式定义了按钮的外观，数据模板定义了列表框项的显示方式。

<Style TargetType="Button"><Setter Property="Background" Value="LightBlue"/><Setter Property="FontSize" Value="16"/><Setter Property="Margin" Value="10"/>
</Style><DataTemplate x:Key="ListBoxItemTemplate"><StackPanel Orientation="Horizontal"><TextBlock Text="{Binding Name}" FontWeight="Bold"/><TextBlock Text=" - " /><TextBlock Text="{Binding Age}" /></StackPanel>
</DataTemplate>

e. 动画（Animations）

在按钮点击事件处理程序中，定义了一个简单的双精度动画（DoubleAnimation），用于改变按钮的不透明度，实现淡入淡出的效果。

private void AnimateButton_Click(object sender, RoutedEventArgs e)
{DoubleAnimation animation = new DoubleAnimation{From = 1.0,To = 0.0,Duration = new Duration(TimeSpan.FromSeconds(1)),AutoReverse = true};((Button)sender).BeginAnimation(OpacityProperty, animation);
}