数据绑定
元素绑定
<StackPanel> <Slider x:Name="slider1" Width="200" ></Slider> <TextBox Name="txt" Text="{Binding ElementName=slider1,Path=Value,UpdateSourceTrigger=PropertyChanged ,Mode=TwoWay}"/> <TextBox>text</TextBox> </StackPanel>
参数说明:
UpdateSourceTrigger: 两个元素的值是实时同步,还是失去焦点后同步
Mode:单向绑定或双向绑定
静态资源绑定
<Window.Resources> <TextBox x:Key="txt">Hello</TextBox> </Window.Resources> <Grid> <StackPanel> <TextBox Text="{Binding Source={StaticResource txt}, Path=Text}"/> </StackPanel> </Grid>
控件数据上下文 DataContext 绑定(单向绑定)
<Grid> <StackPanel> <TextBox x:Name="txt" Text="{Binding Name,FallbackValue='默认值'}" FontSize="30" /> </StackPanel> </Grid>
private void Window_Loaded(object sender, RoutedEventArgs e) { txt.DataContext=new Person() { Name="LiCi",Age=18}; } public class Person { public string Name { get; set; } public int Age { get; set; } }
窗体数据上下文 DataContext 绑定(单向绑定)
public class MainViewModel { public MainViewModel() { Name = "Hello"; } public string Name { get; set; } }
<Grid> <StackPanel> <TextBox x:Name="txt" Text="{Binding Name,FallbackValue='默认值'}" FontSize="30" /> </StackPanel> </Grid>
public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); this.DataContext = new MainViewModel(); } }
窗体数据上下文 DataContext 绑定,实现 INotifyPropertyChanged 接口达到双向绑定(双向绑定)
public class MainViewModel : INotifyPropertyChanged { public MainViewModel() { Name = "Hello"; } private string name; public string Name { get { return name; } set { name = value; OnPropertyChanged(nameof(Name)); } } public event PropertyChangedEventHandler? PropertyChanged; protected void OnPropertyChanged(string properName) { if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(properName)); } }
<Grid> <StackPanel> <TextBox x:Name="txt" Text="{Binding Name,FallbackValue='默认值'}" FontSize="30" /> <Button Click="Button_Click">butt1</Button> </StackPanel> </Grid>
public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); this.DataContext = new MainViewModel(); } private void Button_Click(object sender, RoutedEventArgs e) { var model=(MainViewModel)this.DataContext; model.Name = "New Name"; } }
窗体数据上下文 DataContext 绑定,使用 MvvmLight 程序包达到双向绑定(双向绑定)
public class MainViewModel : ViewModelBase { public MainViewModel() { Name = "Hello"; } private string name; public string Name { get { return name; } set { name = value; RaisePropertyChanged(); } } }
绑定事件
public class MainViewModel : ViewModelBase { public MainViewModel() { Name = "Hello"; SaveCommand = new RelayCommand(() => { Name = "事件已触发"; }); } private string name; public string Name { get { return name; } set { name = value; RaisePropertyChanged(); } } public RelayCommand SaveCommand { get; private set; } }
<Grid> <StackPanel> <TextBox x:Name="txt" Text="{Binding Name,FallbackValue='默认值'}" FontSize="30" /> <Button Command="{Binding SaveCommand}" >butt1</Button> </StackPanel> </Grid>
public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); this.DataContext = new MainViewModel(); } }