WPF 全面指南#

1
graph LR
2
    subgraph View 视图
3
        XAML[XAML 界面 UI]
4
    end
5
    subgraph ViewModel 视图模型
6
        VM[ViewModel: INotifyPropertyChanged / Commands]
7
    end
8
    subgraph Model 模型
9
        M[Data Model & Business Logic]
10
    end
11

12
    XAML <-->|DataBinding / Command Binding| VM
13
    VM <-->|Notification & Data Processing| M

1
<!-- 元素 = 类，属性 = 类的属性 -->
2
<Button Content="Click Me" Width="100" Height="30" />
3

4
<!-- 等同于 C# 代码 -->
5
// Button button = new Button();
6
// button.Content = "Click Me";
7
// button.Width = 100;
8
// button.Height = 30;

1
<Grid>
2
    <Button Content="Click Me" />
3
</Grid>
4

5
<!-- 等同于 C# 代码 -->
6
// Grid grid = new Grid();
7
// Button button = new Button();
8
// button.Content = "Click Me";
9
// grid.Children.Add(button);

1
<Window x:Class="MyWpfApp.MainWindow"
2
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4
        xmlns:local="clr-namespace:MyWpfApp"
5
        Title="MainWindow" Height="450" Width="800">
6
    <!-- 内容 -->
7
</Window>

1
<Grid>
2
    <!-- 定义列 -->
3
    <Grid.ColumnDefinitions>
4
        <ColumnDefinition Width="100" /> <!-- 固定宽度 -->
5
        <ColumnDefinition Width="*" /> <!-- 自适应宽度 -->
6
        <ColumnDefinition Width="2*" /> <!-- 自适应宽度，是前一列的两倍 -->
7
    </Grid.ColumnDefinitions>
8

9
    <!-- 定义行 -->
10
    <Grid.RowDefinitions>
11
        <RowDefinition Height="50" /> <!-- 固定高度 -->
12
        <RowDefinition Height="*" /> <!-- 自适应高度 -->
13
        <RowDefinition Height="40" /> <!-- 固定高度 -->
14
    </Grid.RowDefinitions>
15

16
    <!-- 放置控件 -->
17
    <Label Content="用户名:" Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" />
18
    <TextBox Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="2" Margin="5" />
19

20
    <Label Content="密码:" Grid.Column="0" Grid.Row="1" VerticalAlignment="Top" Margin="0,5,0,0" />
21
    <PasswordBox Grid.Column="1" Grid.Row="1" Grid.ColumnSpan="2" Margin="5" />
22

23
    <Button Content="登录" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Right" Margin="5" />
24
    <Button Content="取消" Grid.Column="2" Grid.Row="2" HorizontalAlignment="Left" Margin="5" />
25
</Grid>

1
<!-- 垂直排列 -->
2
<StackPanel Orientation="Vertical" Margin="10" Padding="10" Background="LightGray">
3
    <TextBlock Text="个人信息" FontSize="16" FontWeight="Bold" Margin="0,0,0,10" />
4
    <StackPanel Orientation="Horizontal" Margin="0,5,0,5">
5
        <TextBlock Text="姓名:" Width="80" VerticalAlignment="Center" />
6
        <TextBox Width="200" />
7
    </StackPanel>
8
    <StackPanel Orientation="Horizontal" Margin="0,5,0,5">
9
        <TextBlock Text="年龄:" Width="80" VerticalAlignment="Center" />
10
        <TextBox Width="200" />
11
    </StackPanel>
12
    <StackPanel Orientation="Horizontal" Margin="0,10,0,0" HorizontalAlignment="Right">
13
        <Button Content="保存" Margin="0,0,10,0" />
14
        <Button Content="取消" />
15
    </StackPanel>
16
</StackPanel>

1
<WrapPanel Orientation="Horizontal" Margin="10" Padding="10" Background="LightGray">
2
    <Button Content="按钮 1" Margin="5" Width="100" />
3
    <Button Content="按钮 2" Margin="5" Width="100" />
4
    <Button Content="按钮 3" Margin="5" Width="100" />
5
    <Button Content="按钮 4" Margin="5" Width="100" />
6
    <Button Content="按钮 5" Margin="5" Width="100" />
7
    <Button Content="按钮 6" Margin="5" Width="100" />
8
</WrapPanel>

1
<DockPanel LastChildFill="True">
2
    <Menu DockPanel.Dock="Top">
3
        <MenuItem Header="文件">
4
            <MenuItem Header="新建" />
5
            <MenuItem Header="打开" />
6
            <MenuItem Header="保存" />
7
        </MenuItem>
8
        <MenuItem Header="编辑">
9
            <MenuItem Header="复制" />
10
            <MenuItem Header="粘贴" />
11
        </MenuItem>
12
    </Menu>
13

14
    <ToolBar DockPanel.Dock="Top">
15
        <Button Content="新建" />
16
        <Button Content="打开" />
17
        <Button Content="保存" />
18
    </ToolBar>
19

20
    <StatusBar DockPanel.Dock="Bottom">
21
        <TextBlock>状态栏信息</TextBlock>
22
    </StatusBar>
23

24
    <StackPanel DockPanel.Dock="Left" Width="200" Background="LightGray">
25
        <TextBlock Text="导航菜单" Margin="10" FontWeight="Bold" />
26
        <Button Content="首页" Margin="10" />
27
        <Button Content="设置" Margin="10" />
28
        <Button Content="帮助" Margin="10" />
29
    </StackPanel>
30

31
    <Grid Background="White">
32
        <TextBlock Text="主内容区域" HorizontalAlignment="Center" VerticalAlignment="Center" />
33
    </Grid>
34
</DockPanel>

1
<Canvas Width="400" Height="300" Background="LightGray">
2
    <Ellipse Canvas.Left="50" Canvas.Top="50" Width="100" Height="100" Fill="Red" />
3
    <Rectangle Canvas.Left="200" Canvas.Top="100" Width="120" Height="80" Fill="Blue" />
4
    <TextBlock Canvas.Left="70" Canvas.Top="90" FontSize="16" Foreground="White">红色圆形</TextBlock>
5
    <TextBlock Canvas.Left="220" Canvas.Top="130" FontSize="16" Foreground="White">蓝色矩形</TextBlock>
6
</Canvas>

1
<Grid ShowGridLines="True" Grid.IsSharedSizeScope="True">
2
    <Grid.ColumnDefinitions>
3
        <ColumnDefinition Width="Auto" SharedSizeGroup="LabelColumn" />
4
        <ColumnDefinition Width="*" />
5
    </Grid.ColumnDefinitions>
6

7
    <TextBlock Text="姓名:" Grid.Row="0" Grid.Column="0" Margin="5" />
8
    <TextBox Grid.Row="0" Grid.Column="1" Margin="5" />
9

10
    <TextBlock Text="年龄:" Grid.Row="1" Grid.Column="0" Margin="5" />
11
    <TextBox Grid.Row="1" Grid.Column="1" Margin="5" />
12
</Grid>

1
<Button>
2
    <StackPanel Orientation="Horizontal">
3
        <Image Source="icon.png" Width="20" Height="20" />
4
        <TextBlock Text="带有图标的按钮" Margin="5,0,0,0" />
5
    </StackPanel>
6
</Button>
7

8
<Label>
9
    <StackPanel Orientation="Vertical">
10
        <TextBlock Text="标题" FontSize="16" FontWeight="Bold" />
11
        <TextBlock Text="副标题" FontSize="12" Foreground="Gray" />
12
    </StackPanel>
13
</Label>

1
<!-- 直接添加项目 -->
2
<ListBox>
3
    <ListBoxItem>项目 1</ListBoxItem>
4
    <ListBoxItem>项目 2</ListBoxItem>
5
    <ListBoxItem>项目 3</ListBoxItem>
6
</ListBox>
7

8
<!-- 绑定集合数据 -->
9
<ListBox ItemsSource="{Binding Items}" DisplayMemberPath="Name" />
10

11
<!-- 使用数据模板 -->
12
<ListBox ItemsSource="{Binding Items}">
13
    <ListBox.ItemTemplate>
14
        <DataTemplate>
15
            <StackPanel Orientation="Horizontal">
16
                <Image Source="{Binding Icon}" Width="20" Height="20" />
17
                <TextBlock Text="{Binding Name}" Margin="5,0,0,0" />
18
                <TextBlock Text="{Binding Description}" Margin="10,0,0,0" Foreground="Gray" />
19
            </StackPanel>
20
        </DataTemplate>
21
    </ListBox.ItemTemplate>
22
</ListBox>

1
<StackPanel Margin="10">
2
    <TextBox Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
3
        <TextBox.Style>
4
            <Style TargetType="TextBox">
5
                <Setter Property="BorderBrush" Value="Gray" />
6
                <Style.Triggers>
7
                    <Trigger Property="Validation.HasError" Value="True">
8
                        <Setter Property="BorderBrush" Value="Red" />
9
                        <Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}" />
10
                    </Trigger>
11
                </Style.Triggers>
12
            </Style>
13
        </TextBox.Style>
14
    </TextBox>
15

16
    <PasswordBox Password="{Binding Password, Mode=TwoWay}" Margin="0,10,0,0" />
17

18
    <CheckBox IsChecked="{Binding RememberMe, Mode=TwoWay}" Content="记住我" Margin="0,10,0,0" />
19

20
    <Button Content="登录" Command="{Binding LoginCommand}" Margin="0,10,0,0" />
21
</StackPanel>

1
<Button Content="保存" Command="{Binding SaveCommand}" CommandParameter="{Binding SelectedItem}" />
2

3
<MenuItem Header="复制" Command="ApplicationCommands.Copy" />
4
<MenuItem Header="粘贴" Command="ApplicationCommands.Paste" />
5

6
<ListBox ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem}">
7
    <ListBox.ItemContainerStyle>
8
        <Style TargetType="ListBoxItem">
9
            <Setter Property="Command" Value="{Binding DataContext.ItemCommand, RelativeSource={RelativeSource AncestorType=ListBox}}" />
10
            <Setter Property="CommandParameter" Value="{Binding}" />
11
        </Style>
12
    </ListBox.ItemContainerStyle>
13
</ListBox>

1
<Grid>
2
    <Button Grid.Row="1" Grid.Column="2" Content="我是按钮" />
3
</Grid>

1
<!-- 在外层的骨架容器里，我们通过路由机制，挂载一个全局大网雷达 Button.Click -->
2
<StackPanel Button.Click="OnAnyChildButtonClicked_Handler">
3

4
    <!-- 这里面的任何一个可怜的小按钮被普通点击，震波都会像水底丢核弹一样浮上并炸毁监控总网 -->
5
    <Button Content="删除文件 A" Tag="A" />
6
    <Button Content="删除文件 B" Tag="B" />
7

8
    <Grid>
9
       <Button Content="埋得很深的文件 C" Tag="C" />
10
    </Grid>
11

12
</StackPanel>

1
// 在后台代码里：
2
private void OnAnyChildButtonClicked_Handler(object sender, RoutedEventArgs e)
3
{
4
    // sender：是谁挂载了这个监听总网？是那个外层至高无上的大 StackPanel 皇帝
5
    // e.OriginalSource：是谁真正发射了这颗起爆核弹指令？是我们想要的深处的小按钮！
6

7
    if (e.OriginalSource is Button clickedBtn)
8
    {
9
        string fileToDel = clickedBtn.Tag.ToString();
10
        MessageBox.Show($"长官，我拦截到了总网下的深层动作，它要删文件：{fileToDel}");
11

12
        // 这一句捏爆水泡。如果外头还有更高层的 Window.Click 雷达，别想再收到了！
13
        e.Handled = true;
14
    }
15
}

1
<!-- 基本数据绑定 -->
2
<TextBox Text="{Binding Name}" />
3
<TextBlock Text="{Binding Age}" />
4
<Button Content="{Binding ButtonText}" Command="{Binding ClickCommand}" />

1
// 日期转换器示例
2
public class DateConverter : IValueConverter
3
{
4
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
5
    {
6
        if (value is DateTime date)
7
        {
8
            return date.ToString("yyyy-MM-dd");
9
        }
10
        return string.Empty;
11
    }
12

13
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
14
    {
15
        if (value is string str && DateTime.TryParse(str, out DateTime date))
16
        {
17
            return date;
18
        }
19
        return DateTime.Now;
20
    }
21
}

1
<Window.Resources>
2
    <local:DateConverter x:Key="DateConverter" />
3
</Window.Resources>
4

5
<TextBlock Text="{Binding BirthDate, Converter={StaticResource DateConverter}}" />
6
<TextBox Text="{Binding BirthDate, Converter={StaticResource DateConverter}, Mode=TwoWay}" />

1
// 使用 ObservableCollection 实现自动更新
2
public class ViewModel
3
{
4
    public ObservableCollection<Person> People { get; set; }
5

6
    public ViewModel()
7
    {
8
        People = new ObservableCollection<Person>
9
        {
10
            new Person { Name = "张三", Age = 25 },
11
            new Person { Name = "李四", Age = 30 },
12
            new Person { Name = "王五", Age = 35 }
13
        };
14

15
        // 添加项
16
        People.Add(new Person { Name = "赵六", Age = 40 });
17

18
        // 删除项
19
        People.RemoveAt(0);
20
    }
21
}

1
<ListBox ItemsSource="{Binding People}">
2
    <ListBox.ItemTemplate>
3
        <DataTemplate>
4
            <StackPanel Orientation="Horizontal">
5
                <TextBlock Text="{Binding Name}" Width="100" />
6
                <TextBlock Text="{Binding Age}" />
7
            </StackPanel>
8
        </DataTemplate>
9
    </ListBox.ItemTemplate>
10
</ListBox>

1
<TextBox Text="{Binding UserName,
2
                        Mode=TwoWay,
3
                        UpdateSourceTrigger=PropertyChanged,
4
                        ValidatesOnDataErrors=True,
5
                        NotifyOnValidationError=True}" />

1
<TextBlock Text="{Binding OrderTotal,
2
                          Mode=OneWay,
3
                          StringFormat='总金额：{0:C2}'}" />

1
<ControlTemplate TargetType="Button">
2
    <Border Background="{TemplateBinding Background}">
3
        <TextBlock Text="{Binding DataContext.ButtonCaption,
4
                                  RelativeSource={RelativeSource TemplatedParent}}" />
5
    </Border>
6
</ControlTemplate>

1
<TextBlock Text="{Binding Progress,
2
                          Converter={StaticResource ProgressToPercentConverter},
3
                          ConverterParameter='0'}" />

1
public class Person : INotifyPropertyChanged
2
{
3
    private string _name;
4
    private int _age;
5

6
    public string Name
7
    {
8
        get { return _name; }
9
        set
10
        {
11
            if (_name != value)
12
            {
13
                _name = value;
14
                OnPropertyChanged(nameof(Name));
15
            }
16
        }
17
    }
18

19
    public int Age
20
    {
21
        get { return _age; }
22
        set
23
        {
24
            if (_age != value)
25
            {
26
                _age = value;
27
                OnPropertyChanged(nameof(Age));
28
            }
29
        }
30
    }
31

32
    public event PropertyChangedEventHandler PropertyChanged;
33

34
    protected virtual void OnPropertyChanged(string propertyName)
35
    {
36
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
37
    }
38
}

1
public class RelayCommand : ICommand
2
{
3
    private readonly Action<object> _execute;
4
    private readonly Func<object, bool> _canExecute;
5

6
    public event EventHandler CanExecuteChanged;
7

8
    public RelayCommand(Action<object> execute, Func<object, bool> canExecute = null)
9
    {
10
        _execute = execute;
11
        _canExecute = canExecute;
12
    }
13

14
    public bool CanExecute(object parameter)
15
    {
16
        return _canExecute == null || _canExecute(parameter);
17
    }
18

19
    public void Execute(object parameter)
20
    {
21
        _execute(parameter);
22
    }
23

24
    public void RaiseCanExecuteChanged()
25
    {
26
        CanExecuteChanged?.Invoke(this, EventArgs.Empty);
27
    }
28
}

1
public class ViewModel
2
{
3
    public ICommand SaveCommand { get; set; }
4
    public ICommand DeleteCommand { get; set; }
5

6
    public ViewModel()
7
    {
8
        SaveCommand = new RelayCommand(Save, CanSave);
9
        DeleteCommand = new RelayCommand(Delete, CanDelete);
10
    }
11

12
    private void Save(object parameter)
13
    {
14
        // 保存逻辑
15
    }
16

17
    private bool CanSave(object parameter)
18
    {
19
        // 检查是否可以保存
20
        return true;
21
    }
22

23
    private void Delete(object parameter)
24
    {
25
        // 删除逻辑
26
    }
27

28
    private bool CanDelete(object parameter)
29
    {
30
        // 检查是否可以删除
31
        return true;
32
    }
33
}

1
<!-- View -->
2
<Window x:Class="MyWpfApp.MainWindow"
3
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5
        xmlns:local="clr-namespace:MyWpfApp"
6
        Title="MVVM示例" Height="450" Width="800">
7
    <Window.DataContext>
8
        <local:MainViewModel />
9
    </Window.DataContext>
10

11
    <Grid>
12
        <StackPanel Margin="20">
13
            <TextBlock Text="用户管理" FontSize="20" FontWeight="Bold" Margin="0,0,0,20" />
14

15
            <ListBox ItemsSource="{Binding Users}" SelectedItem="{Binding SelectedUser}" Margin="0,0,0,20">
16
                <ListBox.ItemTemplate>
17
                    <DataTemplate>
18
                        <StackPanel Orientation="Horizontal">
19
                            <TextBlock Text="{Binding Name}" Width="100" />
20
                            <TextBlock Text="{Binding Age}" Width="50" />
21
                            <TextBlock Text="{Binding Email}" />
22
                        </StackPanel>
23
                    </DataTemplate>
24
                </ListBox.ItemTemplate>
25
            </ListBox>
26

27
            <Grid>
28
                <Grid.ColumnDefinitions>
29
                    <ColumnDefinition Width="100" />
30
                    <ColumnDefinition Width="*" />
31
                </Grid.ColumnDefinitions>
32
                <Grid.RowDefinitions>
33
                    <RowDefinition Height="30" />
34
                    <RowDefinition Height="30" />
35
                    <RowDefinition Height="30" />
36
                    <RowDefinition Height="40" />
37
                </Grid.RowDefinitions>
38

39
                <TextBlock Text="姓名:" Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" />
40
                <TextBox Text="{Binding SelectedUser.Name, Mode=TwoWay}" Grid.Column="1" Grid.Row="0" />
41

42
                <TextBlock Text="年龄:" Grid.Column="0" Grid.Row="1" VerticalAlignment="Center" />
43
                <TextBox Text="{Binding SelectedUser.Age, Mode=TwoWay}" Grid.Column="1" Grid.Row="1" />
44

45
                <TextBlock Text="邮箱:" Grid.Column="0" Grid.Row="2" VerticalAlignment="Center" />
46
                <TextBox Text="{Binding SelectedUser.Email, Mode=TwoWay}" Grid.Column="1" Grid.Row="2" />
47

48
                <StackPanel Orientation="Horizontal" Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="2" HorizontalAlignment="Right" Margin="0,10,0,0">
49
                    <Button Content="添加" Command="{Binding AddCommand}" Margin="0,0,10,0" />
50
                    <Button Content="保存" Command="{Binding SaveCommand}" Margin="0,0,10,0" />
51
                    <Button Content="删除" Command="{Binding DeleteCommand}" />
52
                </StackPanel>
53
            </Grid>
54
        </StackPanel>
55
    </Grid>
56
</Window>