• WPF 02

    Grid容器

    分行和分列

    1. <Grid>
    2.         <Grid.RowDefinitions>
    3.             <!--2*：此行是下面一行的两倍-->
    4.             <RowDefinition Height="2*"/>
    5.             <RowDefinition/>
    6.         </Grid.RowDefinitions>
    7.         <Grid.ColumnDefinitions>
    8.             <ColumnDefinition/>
    9.             <ColumnDefinition/>
    10.         </Grid.ColumnDefinitions>
    11.         <Border Background="blue"/>
    12.         <Border Grid.Row="1" Background="red"/>
    13.         <Border Grid.Column="1" Background="yellow"/>
    14.         <Border Grid.Row="1" Grid.Column="1"  Background="green"/>
    15.     </Grid>

    跨行和跨列

    2.         <Border Grid.ColumnSpan="2" Grid.RowSpan="2" Background="blue"/>

    stackPanel：默认垂直排列

    局部容器，一般修饰部分空间的元素排布

    1. <StackPanel>
    2. //<StackPanel Orientation="Horizontal">
    3.     <Button Height="50" Width="100"/>
    4.     <Button Height="50" Width="100"/>
    5.     <Button Height="50" Width="100"/>
    6.     <Button Height="50" Width="100"/>
    7.     <Button Height="50" Width="100"/>
    8. </StackPanel>

    WrapPanel ：默认水平排序且换行

    1. <WrapPanel Grid.Row="1">
    2.     <Button Height="50" Width="100"/>
    3.     <Button Height="50" Width="100"/>
    4.     <Button Height="50" Width="100"/>
    5.     <Button Height="50" Width="100"/>
    6.     <Button Height="50" Width="100"/>
    7. </WrapPanel>

    WrapPanel可以自动换行

    DockPanel：默认最后一个元素填充剩余所有空间

    1. <DockPanel>
    2.     <Button Height="50" Width="100"/>
    3.     <Button Height="50" Width="100"/>
    4.     <Button Height="50" Width="100"/>
    5.     <Button Height="50" Width="100"/>
    6.     <Button Height="50" Width="100"/>
    7. </DockPanel>

    取消最后一个元素填充剩余所有空间：

    DockPanel可以停靠

    1. <DockPanel LastChildFill="False"> 
    2.     <Button Height="50" Width="100" DockPanel.Dock="Bottom"/>
    3.     <Button Height="50" Width="100" DockPanel.Dock="Left"/>
    4.     <Button Height="50" Width="100" DockPanel.Dock="Right"/>
    5.     <Button Height="50" Width="100" DockPanel.Dock="Top"/>
    6.     <Button Height="50" Width="100" DockPanel.Dock="Bottom"/>
    7. </DockPanel>

    UniformGrid: 在有限的空间内根据控件均分剩余空间

    1. <UniformGrid Rows="3" Columns="3">
    2.     <Button/>
    3.     <Button/>
    4.     <Button/>
    5.     <Button/>
    6.     <Button/>
    7.     <Button/>
    8.     <Button/>
    9.     <Button/>
    10.     <Button/>
    11. </UniformGrid>

    ctrl+k+d：自动格式化代码

    课程案例1

    模块划分代码：

    1. <Window x:Class="WpfDay01.MainWindow"
    2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    6.         xmlns:local="clr-namespace:WpfDay01"
    7.         mc:Ignorable="d"
    8.         Title="MainWindow" Height="450" Width="800">
    9.     <Grid>
    10.         <Grid.RowDefinitions>
    11.             <RowDefinition Height="50"/>
    12.             <RowDefinition/>
    13.         </Grid.RowDefinitions>
    14.         <Border Background="#7378DB"/>
    15.         <Grid Grid.Row="1">
    16.             <Grid.ColumnDefinitions>
    17.                 <ColumnDefinition Width="200"/>
    18.                 <ColumnDefinition/>
    19.             </Grid.ColumnDefinitions>
    20.             <Border Margin="5" Background="blue"/>
    21.             <Grid Grid.Column="1">
    22.                 <Grid.ColumnDefinitions>
    23.                     <ColumnDefinition/>
    24.                     <ColumnDefinition/>
    25.                     <ColumnDefinition/>
    26.                     <ColumnDefinition/>
    27.                     <ColumnDefinition/>
    28.                 </Grid.ColumnDefinitions>
    29.                 <Grid.RowDefinitions>
    30.                     <RowDefinition/>
    31.                     <RowDefinition/>
    32.                     <RowDefinition/>
    33.                 </Grid.RowDefinitions>
    34.                 <Border Margin="5" Background="#7378DB"/>
    35.                 <Border Margin="5" Grid.Column="1" Background="#4598CE"/>
    36.                 <Border Margin="5" Grid.Column="2"  Background="#E080CE"/>
    37.                 <Border Margin="5" Grid.Column="3" Background="#50B9B8"/>
    38.                 <Border Margin="5" Grid.Column="4" Background="#E07A7D"/>
    39.                 <Border Margin="5"  Grid.Row="1" Grid.ColumnSpan="3" Background="green"/>
    40.                 <Border Margin="5"  Grid.Row="1" Grid.Column="3" Grid.ColumnSpan="2" Background="Yellow"/>
    41.                 <Border Margin="5"  Grid.Row="2" Grid.ColumnSpan="3" Background="red"/>
    42.                 <Border Margin="5"  Grid.Row="3" Grid.Column="3" Grid.ColumnSpan="2" Background="Blue"/>
    43.  
    44.             </Grid>
    45.         </Grid>
    46.     </Grid>
    47. </Window>

    练习案例1

    1. <!--<Window x:Class="WpfDay01.MainWindow"
    2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    6.         xmlns:local="clr-namespace:WpfDay01"
    7.         mc:Ignorable="d"
    8.         Title="MainWindow" Height="450" Width="800">
    9.     <Grid>
    10.         <Grid.RowDefinitions>
    11.             <RowDefinition Height="50"/>
    12.             <RowDefinition/>
    13.         </Grid.RowDefinitions>
    14.         <Border Background="#7378DB"/>
    15.         <Grid Grid.Row="1">
    16.             <Grid.ColumnDefinitions>
    17.                 <ColumnDefinition Width="200"/>
    18.                 <ColumnDefinition/>
    19.             </Grid.ColumnDefinitions>
    20.             <Border Margin="5" Background="blue"/>
    21.             <Grid Grid.Column="1">
    22.                 <Grid.ColumnDefinitions>
    23.                     <ColumnDefinition/>
    24.                     <ColumnDefinition/>
    25.                     <ColumnDefinition/>
    26.                     <ColumnDefinition/>
    27.                     <ColumnDefinition/>
    28.                 </Grid.ColumnDefinitions>
    29.                 <Grid.RowDefinitions>
    30.                     <RowDefinition/>
    31.                     <RowDefinition/>
    32.                     <RowDefinition/>
    33.                 </Grid.RowDefinitions>
    34.                 <Border Margin="5" Background="#7378DB"/>
    35.                 <Border Margin="5" Grid.Column="1" Background="#4598CE"/>
    36.                 <Border Margin="5" Grid.Column="2"  Background="#E080CE"/>
    37.                 <Border Margin="5" Grid.Column="3" Background="#50B9B8"/>
    38.                 <Border Margin="5" Grid.Column="4" Background="#E07A7D"/>
    39.                 <Border Margin="5"  Grid.Row="1" Grid.ColumnSpan="3" Background="green"/>
    40.                 <Border Margin="5"  Grid.Row="1" Grid.Column="3" Grid.ColumnSpan="2" Background="Yellow"/>
    41.                 <Border Margin="5"  Grid.Row="2" Grid.ColumnSpan="3" Background="red"/>
    42.                 <Border Margin="5"  Grid.Row="3" Grid.Column="3" Grid.ColumnSpan="2" Background="Blue"/>
    43.  
    44.             </Grid>
    45.         </Grid>
    46.     </Grid>
    47. </Window>-->
    48. <Window x:Class="WpfDay01.MainWindow"
    49.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    50.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    51.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    52.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    53.         xmlns:local="clr-namespace:WpfDay01"
    54.         mc:Ignorable="d"
    55.         Title="MainWindow" Height="450" Width="800">
    56.     <Grid>
    57.         <Grid.RowDefinitions>
    58.             <RowDefinition Height="50"/>
    59.             <RowDefinition Height="100"/>
    60.             <RowDefinition/>
    61.         </Grid.RowDefinitions>
    62.         <Border Background="LightCyan"/>
    63.         <Grid Grid.Row="1">
    64.             <Grid.ColumnDefinitions>
    65.                 <ColumnDefinition/>
    66.                 <ColumnDefinition/>
    67.                 <ColumnDefinition/>
    68.                 <ColumnDefinition/>
    69.                 <ColumnDefinition/>
    70.             </Grid.ColumnDefinitions>
    71.             <Border Margin="5" Background="#219AFB"/>
    72.             <Border Margin="5" Grid.Column="1" Background="#64B522"/>
    73.             <Border Margin="5" Grid.Column="2" Background="#FF9F00"/>
    74.             <Border Margin="5" Grid.Column="3" Background="#50B9B8"/>
    75.             <Border Margin="5" Grid.Column="4" Background="#E07A7D"/>
    76.         </Grid>
    77.         <Grid Grid.Row="2">
    78.             <Grid.ColumnDefinitions>
    79.                 <ColumnDefinition Width="0.667*"/>
    80.                 <ColumnDefinition/>
    81.             </Grid.ColumnDefinitions>
    82.             <Grid>
    83.                 <Grid.RowDefinitions>
    84.                     <RowDefinition/>
    85.                     <RowDefinition/>
    86.                     <RowDefinition/>
    87.                 </Grid.RowDefinitions>
    88.                 <Grid.ColumnDefinitions>
    89.                     <ColumnDefinition/>
    90.                     <ColumnDefinition/>
    91.                 </Grid.ColumnDefinitions>
    92.                 <Border Margin="5" Grid.ColumnSpan="2" Background="blue"/>
    93.                 <Border Margin="5" Grid.Row="1" Background="red"/>
    94.                 <Border Margin="5" Grid.Row="1" Grid.Column="1" Background="yellow"/>
    95.                 <Border Margin="5" Grid.Row="2" Background="pink"/>
    96.                 <Border Margin="5" Grid.Row="2" Grid.Column="1" Background="green"/>
    97.             </Grid>
    98.             <Grid Grid.Column="1">
    99.                 <Grid.RowDefinitions>
    100.                     <RowDefinition Height="1.5*"/>
    101.                     <RowDefinition/>
    102.                 </Grid.RowDefinitions>
    103.                 <Grid.ColumnDefinitions>
    104.                     <ColumnDefinition/>
    105.                     <ColumnDefinition/>
    106.                 </Grid.ColumnDefinitions>
    107.                 <Border Margin="5" Background="AntiqueWhite"/>
    108.                 <Border Margin="5" Grid.Column="1" Background="Gray"/>
    109.                 <Border Margin="5" Grid.Row="1" Grid.ColumnSpan="2" Background="SaddleBrown"/>
    110.             </Grid>
    111.         </Grid>
    112.     </Grid>
    113. </Window>

    样式的使用方法

    1. <Window x:Class="WpfDay01.MainWindow"
    2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    6.         xmlns:local="clr-namespace:WpfDay01"
    7.         mc:Ignorable="d"
    8.         Title="MainWindow" Height="450" Width="800">
    9.     <Window.Resources>
    10.         <Style x:Key="BaseButtonStyle" TargetType="Button">
    11.             <Setter Property="Foreground" Value="White"/>
    12.             <Setter Property="Background" Value="Blue"/>
    13.         </Style>
    14.         <Style x:Key="ButtonStyle" TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
    15.             <Setter Property="Content" Value="text"/>
    16.         </Style>
    17.     </Window.Resources>
    18.     <Grid>
    19.         <StackPanel>
    20.             <Button Content="button1" Background="Red" Style="{StaticResource ButtonStyle}"/>
    21.             <Button Content="button2" Style="{StaticResource ButtonStyle}"/>
    22.             <Button Content="button3" Style="{StaticResource ButtonStyle}"/>
    23.         </StackPanel>
    24.     </Grid>
    25. </Window>

    数据模板

    案例1

    MainWindow.xaml

    1. <Window x:Class="WpfDay01.MainWindow"
    2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    6.         xmlns:local="clr-namespace:WpfDay01"
    7.         mc:Ignorable="d"
    8.         Title="MainWindow" Height="450" Width="800">
    9.     
    10.     <Grid>
    11.         <ListBox x:Name="list">
    12.             <ListBox.ItemTemplate>
    13.                 <DataTemplate>
    14.                     <StackPanel Orientation="Horizontal">
    15.                         <Border Width="10" Height="10" Background="{Binding Code}"/>
    16.                         <TextBlock Margin="10, 0" Text="{Binding Name}"/>
    17.                     </StackPanel>
    18.                 </DataTemplate>
    19.             </ListBox.ItemTemplate>
    20.             
    21.         </ListBox>
    22.     </Grid>
    23. </Window>

    MainWindow.xaml.cs

    1. using System;
    2. using System.Collections.Generic;
    3. using System.Linq;
    4. using System.Text;
    5. using System.Threading.Tasks;
    6. using System.Windows;
    7. using System.Windows.Controls;
    8. using System.Windows.Data;
    9. using System.Windows.Documents;
    10. using System.Windows.Input;
    11. using System.Windows.Media;
    12. using System.Windows.Media.Imaging;
    13. using System.Windows.Navigation;
    14. using System.Windows.Shapes;
    15. namespace WpfDay01
    16. {
    17.     public partial class MainWindow : Window
    18.     {
    19.         public MainWindow()
    20.         {
    21.             InitializeComponent();
    22.             List<Color> test = new List<Color>();
    23.             test.Add(new Color() { Code= "#FF69B4", Name= "热情的粉红" });
    24.             test.Add(new Color() { Code= "#C71585", Name= "适中的紫罗兰红色" });
    25.             test.Add(new Color() { Code= "#DA70D6", Name= "兰花的紫色" });
    26.             list.ItemsSource = test;
    27.         }
    28.     }
    29.     public class Color
    30.     {
    31.         public string Code { get; set; }
    32.         public string Name { get; set; }
    33.     }
    34. }

    案例2

    MainWindow.xaml

    1. <Window x:Class="WpfDay01.MainWindow"
    2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    6.         xmlns:local="clr-namespace:WpfDay01"
    7.         mc:Ignorable="d"
    8.         Title="MainWindow" Height="450" Width="800">
    9.     <Grid>
    10.         <DataGrid x:Name="grid"
    11.                   AutoGenerateColumns="False"
    12.                   CanUserAddRows="False">
    13.             <DataGrid.Columns>
    14.                 <DataGridTextColumn Binding="{Binding Code}" Header="Code"/>
    15.                 <DataGridTextColumn Binding="{Binding Name}" Header="Name"/>
    16.  
    17.                 <DataGridTemplateColumn Header="操作">
    18.                     <DataGridTemplateColumn.CellTemplate>
    19.                         <DataTemplate>
    20.                             <StackPanel Orientation="Horizontal">
    21.                                 <Border Width="10" Height="10" Background="{Binding Code}"/>
    22.                                 <TextBlock Margin="10 0" Text="{Binding Name}"/>
    23.                             </StackPanel>
    24.                         </DataTemplate>
    25.                     </DataGridTemplateColumn.CellTemplate>
    26.                     
    27.                 </DataGridTemplateColumn>
    28.             </DataGrid.Columns>
    29.         </DataGrid>
    30.     </Grid>
    31. </Window>

    MainWindow.xaml.cs

    1. namespace WpfDay01
    2. {
    3.     public partial class MainWindow : Window
    4.     {
    5.         public MainWindow()
    6.         {
    7.  
    8.             InitializeComponent();
    9.             List<Color> test = new List<Color>();
    10.             test.Add(new Color() { Code= "#FF69B4", Name= "热情的粉红" });
    11.             test.Add(new Color() { Code= "#C71585", Name= "适中的紫罗兰红色" });
    12.             test.Add(new Color() { Code= "#DA70D6", Name= "兰花的紫色" });
    13.             grid.ItemsSource = test;
    14.         }
    15.     }
    16.     public class Color
    17.     {
    18.         public string Code { get; set; }
    19.         public string Name { get; set; }
    20.     }
    21. }

    修改dataTemplete

    1. <DataTemplate>
    2.     <!--<StackPanel Orientation="Horizontal">
    3.         <Border Width="10" Height="10" Background="{Binding Code}"/>
    4.         <TextBlock Margin="10 0" Text="{Binding Name}"/>
    5.     </StackPanel>-->
    6.     <StackPanel Orientation="Horizontal">
    7.         <Button Content="添加"/>
    8.         <Button Content="修改"/>
    9.         <Button Content="删除"/>
    10.     </StackPanel>
    11. </DataTemplate>

    绑定方法

    双向数据绑定关系

    1. <Window x:Class="WpfDay01.MainWindow"
    2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    6.         xmlns:local="clr-namespace:WpfDay01"
    7.         mc:Ignorable="d"
    8.         Title="MainWindow" Height="450" Width="800">
    9.     <Grid>
    10.         <StackPanel>
    11.             <Slider x:Name="slider" Margin="5"/>
    12.             <TextBox Text="{Binding ElementName=slider, Path=Value}" Margin="5"/>
    13.             <TextBox Text="{Binding ElementName=slider, Path=Value}" Margin="5"/>
    14.             <TextBox Text="{Binding ElementName=slider, Path=Value}" Margin="5"/>
    15.         </StackPanel>
    16.     </Grid>
    17. </Window>

    绑定模式

    1. <StackPanel>
    2.       <Slider x:Name="slider" Margin="5"/>
    3.       <TextBox Text="{Binding ElementName=slider, Path=Value, Mode=OneTime}" Margin="5"/>
    4.       <TextBox Text="{Binding ElementName=slider, Path=Value, Mode=OneWay}" Margin="5"/>
    5.       <TextBox Text="{Binding ElementName=slider, Path=Value, Mode=OneWayToSource}" Margin="5"/>
    6.       <TextBox Text="{Binding ElementName=slider, Path=Value, Mode=TwoWay}" Margin="5"/>
    7.   </StackPanel>

    TextBox数据绑定

    MainWindow.xaml

    1. <Window x:Class="WpfDay01.MainWindow"
    2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    6.         xmlns:local="clr-namespace:WpfDay01"
    7.         mc:Ignorable="d"
    8.         Title="MainWindow" Height="450" Width="800">
    9.     <Grid>
    10.         <StackPanel>
    11.             <TextBox Text="{Binding Name}" Margin="5"/>
    12.         </StackPanel>
    13.     </Grid>
    14. </Window>

    创建类test

    1. using System;
    2. using System.Collections.Generic;
    3. using System.Linq;
    4. using System.Text;
    5. using System.Threading.Tasks;
    6.  
    7. namespace WpfDay01
    8. {
    9.     class Test
    10.     {
    11.         public string Name { get; set; }
    12.     }
    13. }

    MainWindow.xaml.cs

    1. namespace WpfDay01
    2. {
    3.     public partial class MainWindow : Window
    4.     {
    5.         public MainWindow()
    6.         {
    7.             InitializeComponent();
    8.             this.DataContext = new Test()
    9.             {
    10.                 Name = "张三"
    11.             };
    12.         }
    13.     }
    14.     public class Color
    15.     {
    16.         public string Code { get; set; }
    17.         public string Name { get; set; }
    18.     }
    19. }

    ICommand使用方法

    业务逻辑代码：MainViewModel.cs

    UI代码：MainWindow.xaml

    实现ICommand中的接口：MyCommand.cs

    将View与ViewModel挂钩：MainWindow.xaml.cs

    MyCommand.cs

    1. using System;
    2. using System.Collections.Generic;
    3. using System.Linq;
    4. using System.Text;
    5. using System.Threading.Tasks;
    6. using System.Windows.Input;
    7.  
    8. namespace WpfDay01
    9. {
    10.     public class MyCommand : ICommand
    11.     {
    12.         Action executeAction;
    13.         Func<bool> canExecuteAction;
    14.         public MyCommand(Action action,Func<bool> canExcuteAction)
    15.         {
    16.             executeAction = action;
    17.             canExecuteAction = canExcuteAction;
    18.         }
    19.         public event EventHandler CanExecuteChanged;
    20.  
    21.         public bool CanExecute(object parameter)
    22.         {
    23.             return canExecuteAction();
    24.         }
    25.  
    26.         public void Execute(object parameter)
    27.         {
    28.             executeAction();
    29.         }
    30.     }
    31. }

    MainViewModel.cs

    1. using System;
    2. using System.Collections.Generic;
    3. using System.ComponentModel;
    4. using System.Linq;
    5. using System.Text;
    6. using System.Threading.Tasks;
    7. using System.Windows;
    8. namespace WpfDay01
    9. {
    10.     public class MainViewModel
    11.     {
    12.         public MainViewModel()
    13.         {
    14.             ShowCommand = new MyCommand(Show,canExcuteAction);
    15.             ShowCommand2 = new MyCommand(show2, canExcuteAction2);
    16.         }
    17.         private string myname="a";
    18.         public string MyName
    19.         {
    20.             get { return myname; }
    21.             set { myname = value; }
    22.         }
    23.  
    24.         private bool canExcuteAction()
    25.         {
    26.             if (string.IsNullOrEmpty(MyName))
    27.                 return false;
    28.             return true;
    29.         }
    30.         private bool canExcuteAction2()
    31.         {   
    32.             return true;
    33.         }
    34.         public MyCommand ShowCommand { get; set; }
    35.         public MyCommand ShowCommand2 { get; set; }
    36.         public void Show()
    37.         {
    38.             MessageBox.Show("点击了按钮！");
    39.         }
    40.         public void show2()
    41.         {
    42.             MyName = "b";
    43.             MessageBox.Show(MyName);
    44.         }
    45.     }
    46. }

    MainWindow.xaml

    1. <Window x:Class="WpfDay01.MainWindow"
    2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    6.         xmlns:local="clr-namespace:WpfDay01"
    7.         mc:Ignorable="d"
    8.         Title="MainWindow" Height="450" Width="800">
    9.     <StackPanel>
    10.         <TextBox Text="{Binding MyName}"></TextBox>
    11.         <Button Width="100" Height="100" Content="Button" Command="{Binding ShowCommand}"/>
    12.         <Button Width="100" Height="100" Content="Button" Command="{Binding ShowCommand2}"/>
    13.     </StackPanel>
    14. </Window>

    MainWindow.xaml.cs

    DataContext：连接View与ViewModel挂钩。

    1. public partial class MainWindow : Window
    2.     {
    3.         public MainWindow()
    4.         {
    5.  
    6.             InitializeComponent();
    7.             this.DataContext = new MainViewModel();
    8.         }
    9.  
    10.         private void Button_Click(object sender, RoutedEventArgs e)
    11.         {
    12.             MessageBox.Show("hhhh");
    13.         }
    14.     }

    更新UI界面：INotifyPropertyChanged

    业务逻辑代码：MainViewModel.cs

    UI代码：MainWindow.xaml

    实现ICommand中的接口：MyCommand.cs

    将View与ViewModel挂钩：MainWindow.xaml.cs

    INotifyPropertyChanged更新界面：ViewModelBase.cs

    ViewModelBase.cs

    1. using System;
    2. using System.Collections.Generic;
    3. using System.ComponentModel;
    4. using System.Linq;
    5. using System.Runtime.CompilerServices;
    6. using System.Text;
    7. using System.Threading.Tasks;
    8. namespace WpfDay01
    9. {
    10.     class ViewModelBase : INotifyPropertyChanged
    11.     {
    12.         public event PropertyChangedEventHandler PropertyChanged;
    13.         public void OnPropertyChanged([CallerMemberName]string propertyName="")
    14.         {
    15.             PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    16.         }
    17.     }
    18. }

    MyCommand.cs

    1. using System;
    2. using System.Collections.Generic;
    3. using System.Linq;
    4. using System.Text;
    5. using System.Threading.Tasks;
    6. using System.Windows.Input;
    7. namespace WpfDay01
    8. {
    9.     class MyCommand : ICommand
    10.     {
    11.         Action executeAction;
    12.         public MyCommand(Action action)
    13.         {
    14.             executeAction = action;     
    15.         }
    16.         public event EventHandler CanExecuteChanged;
    17.  
    18.         public bool CanExecute(object parameter)
    19.         {
    20.             return true;
    21.         }
    22.         public void Execute(object parameter)
    23.         {
    24.             executeAction();
    25.         }
    26.     }
    27. }

    MainViewModel.cs

    1. using System;
    2. using System.Collections.Generic;
    3. using System.ComponentModel;
    4. using System.Linq;
    5. using System.Text;
    6. using System.Threading.Tasks;
    7. using System.Windows;
    8.  
    9. namespace WpfDay01
    10. {
    11.     class MainViewModel: ViewModelBase
    12.     {
    13.         public MainViewModel()
    14.         {
    15.             MyName = "Hello";
    16.             ShowCommand = new MyCommand(Show);
    17.             ShowCommand2 = new MyCommand(show2);
    18.         }
    19.  
    20.         private string myname;
    21.         public string MyName
    22.         {
    23.             get { return myname; }
    24.             set { 
    25.                 myname = value;
    26.                 OnPropertyChanged();
    27.                 }
    28.         }
    29.  
    30.         private string myTitle;
    31.         public string MyTitle
    32.         {
    33.             get { return myTitle; }
    34.             set { myTitle = value; OnPropertyChanged(); }
    35.         }
    36.  
    37.  
    38.         public MyCommand ShowCommand { get; set; }
    39.         public MyCommand ShowCommand2 { get; set; }
    40.         
    41.         public void Show()
    42.         {
    43.             MyName = "点击了按钮";
    44.             MyTitle = "myTitle";
    45.             MessageBox.Show("点击了按钮！");
    46.         }
    47.         public void show2()
    48.         {
    49.             MyName = "b";
    50.             MyTitle = "myTitle2";
    51.             MessageBox.Show(MyName);
    52.         }
    53.     }
    54. }

    MainWindow.xaml

    1. <Window x:Class="WpfDay01.MainWindow"
    2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    6.         xmlns:local="clr-namespace:WpfDay01"
    7.         mc:Ignorable="d"
    8.         Title="MainWindow" Height="450" Width="800">
    9.     <StackPanel>
    10.         <TextBox Text="{Binding MyName}"></TextBox>
    11. 				<TextBox Text="{Binding MyTitle}"></TextBox>
    12.         <Button Width="100" Height="100" Content="Button" Command="{Binding ShowCommand}"/>
    13.         <Button Width="100" Height="100" Content="Button" Command="{Binding ShowCommand2}"/>
    14.     </StackPanel>
    15. </Window>

    MainWindow.xaml.cs

    1. using System;
    2. using System.Collections.Generic;
    3. using System.Linq;
    4. using System.Text;
    5. using System.Threading.Tasks;
    6. using System.Windows;
    7. using System.Windows.Controls;
    8. using System.Windows.Data;
    9. using System.Windows.Documents;
    10. using System.Windows.Input;
    11. using System.Windows.Media;
    12. using System.Windows.Media.Imaging;
    13. using System.Windows.Navigation;
    14. using System.Windows.Shapes;
    15. namespace WpfDay01
    16. {
    17.     public partial class MainWindow : Window
    18.     {
    19.         public MainWindow()
    20.         {
    21.             InitializeComponent();
    22.             this.DataContext = new MainViewModel();
    23.         }
    24.         private void Button_Click(object sender, RoutedEventArgs e)
    25.         {
    26.             MessageBox.Show("hhhh");
    27.         }
    28.     }
    29. }

    MvvmLight框架

    使用MvvmLight框架后不需要自定义MyCommand和ViewModelBase，直接调用即可。

    MainViewModel.cs

    1. using GalaSoft.MvvmLight;
    2. using GalaSoft.MvvmLight.Command;
    3. using System;
    4. using System.Collections.Generic;
    5. using System.Linq;
    6. using System.Text;
    7. using System.Threading.Tasks;
    8. using System.Windows;
    9. namespace WpfDay02
    10. {
    11.     class MainViewModel: ViewModelBase
    12.     {
    13.         public MainViewModel()
    14.         {
    15.             MyName = "hello!";
    16.             ShowCommand = new RelayCommand(Show);
    17.         }
    18.         public RelayCommand ShowCommand { get; }
    19.         private string myName;
    20.         public string MyName
    21.         {
    22.             get { return myName; }
    23.             set { myName = value; RaisePropertyChanged(); }
    24.         }
    25.         public void Show()
    26.         {
    27.             MyName = "按下了按钮！";
    28.             MessageBox.Show("按下了按钮！");
    29.         }
    30.     }
    31. }

    MainWindow.xaml

    1. <Window x:Class="WpfDay02.MainWindow"
    2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    6.         xmlns:local="clr-namespace:WpfDay02"
    7.         mc:Ignorable="d"
    8.         Title="MainWindow" Height="450" Width="800">
    9.     <Grid>
    10.         <TextBox Text="{Binding MyName}"></TextBox>
    11.         <Button Height="100" Width="100" Content="btn" Command="{Binding ShowCommand}"></Button>
    12.     </Grid>
    13. </Window>

    MainWindow.xaml.cs

    1. using System;
    2. using System.Collections.Generic;
    3. using System.Linq;
    4. using System.Text;
    5. using System.Threading.Tasks;
    6. using System.Windows;
    7. using System.Windows.Controls;
    8. using System.Windows.Data;
    9. using System.Windows.Documents;
    10. using System.Windows.Input;
    11. using System.Windows.Media;
    12. using System.Windows.Media.Imaging;
    13. using System.Windows.Navigation;
    14. using System.Windows.Shapes;
    15. namespace WpfDay02
    16. {
    17.     public partial class MainWindow : Window
    18.     {
    19.         public MainWindow()
    20.         {
    21.             InitializeComponent();
    22.             this.DataContext = new MainViewModel();
    23.         }
    24.     }
    25. }
    将某个控件的内容关联到另外控件上（泛型的使用）

    MainViewModel.cs

    1. using GalaSoft.MvvmLight;
    2. using GalaSoft.MvvmLight.Command;
    3. using System;
    4. using System.Collections.Generic;
    5. using System.Linq;
    6. using System.Text;
    7. using System.Threading.Tasks;
    8. using System.Windows;
    9. namespace WpfDay02
    10. {
    11.     class MainViewModel: ViewModelBase
    12.     {
    13.         public MainViewModel()
    14.         {
    15.             MyName = "hello!";
    16.             ShowCommand = new RelayCommand<string>(Show);
    17.         }
    18.         public RelayCommand<string> ShowCommand { get; }
    19.         private string myName;
    20.  
    21.         public string MyName
    22.         {
    23.             get { return myName; }
    24.             set { myName = value; RaisePropertyChanged(); }
    25.         }
    26.         public void Show(string content)
    27.         {
    28.             MyName = "按下了按钮！";
    29.             MessageBox.Show(content);
    30.         }
    31.     }
    32. }

    MainWindow.xaml

    1. <Window x:Class="WpfDay02.MainWindow"
    2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    6.         xmlns:local="clr-namespace:WpfDay02"
    7.         mc:Ignorable="d"
    8.         Title="MainWindow" Height="450" Width="800">
    9.     <Grid>
    10.         <StackPanel>
    11.             <TextBox Text="{Binding MyName}" Height="40" Margin="10"></TextBox>
    12.             <TextBox x:Name="txtInput" Height="40" Margin="10"></TextBox>
    13.             <Button Height="100" Width="100" Content="btn" Command="{Binding ShowCommand}"
    14.                 CommandParameter="{Binding ElementName=txtInput, Path=Text}"></Button>
    15.         </StackPanel>
    16.     </Grid>
    17. </Window>

    将textBox中的内容通过button按钮显示到messageBox中。

    使用Messenger注册接收消息

    修改部分：MainWindow.xaml.cs和MainViewModel.cs

    MainWindow.xaml.cs

    1. using GalaSoft.MvvmLight.Messaging;
    2. using System;
    3. using System.Collections.Generic;
    4. using System.Linq;
    5. using System.Text;
    6. using System.Threading.Tasks;
    7. using System.Windows;
    8. using System.Windows.Controls;
    9. using System.Windows.Data;
    10. using System.Windows.Documents;
    11. using System.Windows.Input;
    12. using System.Windows.Media;
    13. using System.Windows.Media.Imaging;
    14. using System.Windows.Navigation;
    15. using System.Windows.Shapes;
    16. namespace WpfDay02
    17. {
    18.     public partial class MainWindow : Window
    19.     {
    20.         public MainWindow()
    21.         {
    22.             InitializeComponent();
    23.             this.DataContext = new MainViewModel();
    24.             //注册一个接收string类型参数的消息，地址是Token1
    25.             Messenger.Default.Register<string>(this, "Token1", Show);
    26.         }
    27.         void Show(string value)
    28.         {
    29.             MessageBox.Show(value);
    30.         }
    31.     }
    32. }

    MainViewModel.cs

    1. using GalaSoft.MvvmLight;
    2. using GalaSoft.MvvmLight.Command;
    3. using GalaSoft.MvvmLight.Messaging;
    4. using System;
    5. using System.Collections.Generic;
    6. using System.Linq;
    7. using System.Text;
    8. using System.Threading.Tasks;
    9. using System.Windows;
    10. namespace WpfDay02
    11. {
    12.     class MainViewModel: ViewModelBase
    13.     {
    14.         public MainViewModel()
    15.         {
    16.             MyName = "hello!";
    17.             ShowCommand = new RelayCommand<string>(Show);
    18.         }
    19.         public RelayCommand<string> ShowCommand { get; }
    20.         private string myName;
    21.         public string MyName
    22.         {
    23.             get { return myName; }
    24.             set { myName = value; RaisePropertyChanged(); }
    25.         }
    26.         public void Show(string content)
    27.         {
    28.             MyName = "按下了按钮！";
    29.             //MessageBox.Show(content);
    30.             //给Token1的地址发送一个string类型的值 content
    31.             Messenger.Default.Send(content, "Token1");
    32.         }
    33.     }
    34. }

    效果与上面案例相同

    CommunityToolkit.Mvvm框架

    MainViewModel.cs

    1. using CommunityToolkit.Mvvm.ComponentModel;
    2. using CommunityToolkit.Mvvm.Input;
    3. using CommunityToolkit.Mvvm.Messaging;
    4. using System;
    5. using System.Collections.Generic;
    6. using System.Linq;
    7. using System.Text;
    8. using System.Threading.Tasks;
    9. using System.Windows;
    10.  
    11. namespace WpfDay02
    12. {
    13.     class MainViewModel: ObservableObject 
    14.     {
    15.         public MainViewModel()
    16.         {
    17.             MyName = "hello!";
    18.             ShowCommand = new RelayCommand<string>(Show);
    19.         }
    20.         public RelayCommand<string> ShowCommand { get; }
    21.         private string myName;
    22.  
    23.         public string MyName
    24.         {
    25.             get { return myName; }
    26.             set { myName = value; OnPropertyChanged(); }
    27.         }
    28.         public void Show(string content)
    29.         {
    30.             MyName = "按下了按钮！";
    31.             //MessageBox.Show(content);
    32.             WeakReferenceMessenger.Default.Send(content, "Token1");           
    33.         }
    34.     }
    35. }

    MainWindow.xaml.cs

    1. using CommunityToolkit.Mvvm.Messaging;
    2. using System;
    3. using System.Collections.Generic;
    4. using System.Linq;
    5. using System.Text;
    6. using System.Threading.Tasks;
    7. using System.Windows;
    8. using System.Windows.Controls;
    9. using System.Windows.Data;
    10. using System.Windows.Documents;
    11. using System.Windows.Input;
    12. using Sysatem.Windows.Media;
    13. using System.Windows.Media.Imaging;
    14. using System.Windows.Navigation;
    15. using System.Windows.Shapes;
    16. namespace WpfDay02
    17. {
    18.     public partial class MainWindow : Window
    19.     {
    20.         public MainWindow()
    21.         {
    22.             InitializeComponent();
    23.             this.DataContext = new MainViewModel();
    24.  
    25.             WeakReferenceMessenger.Default.Register<string, string>(this, "Token1", (s, e)=>
    26.             {
    27.                 MessageBox.Show(e);
    28.             });
    29.         } 
    30.     }
    31. }

    MainWindow.xaml

    1. <Window x:Class="WpfDay02.MainWindow"
    2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    6.         xmlns:local="clr-namespace:WpfDay02"
    7.         mc:Ignorable="d"
    8.         Title="MainWindow" Height="450" Width="800">
    9.     <Grid>
    10.         <StackPanel>
    11.             <TextBox Text="{Binding MyName}" Height="40" Margin="10"></TextBox>
    12.             <TextBox x:Name="txtInput" Height="40" Margin="10"></TextBox>
    13.             <Button Height="100" Width="100" Content="btn" Command="{Binding ShowCommand}"
    14.                 CommandParameter="{Binding ElementName=txtInput, Path=Text}"></Button>
    15.         </StackPanel>   
    16.     </Grid>
    17. </Window>
  • 相关阅读:
    【数据结构与算法】之回溯、滑动窗口、分治算法经典问题
    ps -xu | grep这个命令的用途
    编程笔记 Golang基础 020 流程控制
    STM32物联网项目-DMA使用介绍(ADC+DAC)
    CentOs/Ubuntu 一行指令安装Docker
    【机器学习】树模型预剪枝和后剪枝
    压力大，休息日都没有，更别说年休假了
    5G及其后的5G非地面网络：趋势和研究挑战-HARQ部分
    easyrecovery 2023最新数据恢复软件免费下载激活教程
    Ultra-Fast-Lane-Detection 车道线学习资料整理
  • 原文地址：https://blog.csdn.net/ThePaK/article/details/133440258