常用网站开发技术和工具,郑州企业网站推广外包,深圳标识设计公司,cp网站开发多少钱在DataGrid 等控件中, 有很多这种带闪电符号的触发事件. 如果用传统的事件驱动, 则直接在后台中建立 一个private PropertyChanged(Sender s, EventAgars Args) 即可. 但是如果需要绑定到ViewModel的话? 应该怎么做? 带闪电符号的触发事件
实现viewModel绑定前端触发事件的…在DataGrid 等控件中, 有很多这种带闪电符号的触发事件. 如果用传统的事件驱动, 则直接在后台中建立 一个private PropertyChanged(Sender s, EventAgars Args) 即可. 但是如果需要绑定到ViewModel的话? 应该怎么做? 带闪电符号的触发事件
实现viewModel绑定前端触发事件的写法: DataGridx:NamemyDataGridAlternationCount2AutoGenerateColumnsFalseFontSize24ItemsSource{Binding Students}SelectedItem{Binding SelectStudent}SelectionModeExtendedi:Interaction.Triggersi:EventTrigger EventNameSelectionChangedi:InvokeCommandAction Command{Binding DataGridSelectedCommand} CommandParameter{Binding ElementNamemyDataGrid, PathSelectedItems} //i:EventTrigger/i:Interaction.TriggersDataGrid.ColumnHeaderStyleStyle TargetTypeDataGridColumnHeaderSetter PropertyBorderThickness Value0,0,0,3 /Setter PropertyCursor ValueHand /Setter PropertyFontWeight ValueSemiBold /Setter PropertyHorizontalContentAlignment ValueCenter /Setter PropertyMargin Value0 /Setter PropertyMinHeight Value25 /Setter PropertyMinWidth Value0 /Setter PropertyBackground Value#2B2C31 /Setter PropertySnapsToDevicePixels ValueTrue //Style/DataGrid.ColumnHeaderStyleDataGrid.CellStyleStyle TargetTypeDataGridCellSetter PropertyHorizontalContentAlignment ValueCenter /Setter PropertyVerticalContentAlignment ValueCenter /Setter PropertyTemplateSetter.ValueControlTemplate TargetTypeDataGridCellGrid Background{TemplateBinding Background}ContentPresenter HorizontalAlignmentCenter VerticalAlignmentCenter //Grid/ControlTemplate/Setter.Value/Setter/Style/DataGrid.CellStyleDataGrid.ColumnsDataGridTextColumnWidth*Binding{Binding Id}HeaderId /DataGridTextColumnWidth*Binding{Binding Age}Header年龄 /DataGridTextColumnWidth*Binding{Binding Name}Header姓名 /DataGridTemplateColumn Header操作DataGridTemplateColumn.CellTemplateDataTemplateStackPanel OrientationHorizontalTextBlockMargin5HorizontalAlignmentRightVerticalAlignmentCenterBackgroundWhiteFontFamily{StaticResource fontAwesome}FontSize24Tag修改Text#xf14b;i:Interaction.Triggersi:EventTrigger EventNameMouseUpi:InvokeCommandAction Command{Binding RelativeSource{RelativeSource AncestorTypeUserControl}, PathDataContext.DataGridUpDateCommand} CommandParameter{Binding} //i:EventTrigger/i:Interaction.TriggersTextBlock.StyleStyle TargetTypeTextBlockStyle.TriggersTrigger PropertyIsMouseOver ValueTrueSetter PropertyCursor ValueHand /Setter PropertyForeground ValueOrange //TriggerTrigger PropertyIsMouseOver ValueFalseSetter PropertyForeground ValueBlack //Trigger/Style.Triggers/Style/TextBlock.Style/TextBlockTextBlockMargin5HorizontalAlignmentRightVerticalAlignmentCenterBackgroundWhiteFontFamily{StaticResource fontAwesome}Tag删除Text#xf056;i:Interaction.Triggersi:EventTrigger EventNameMouseUpi:InvokeCommandAction Command{Binding DataContext.DataGridDeleteCommand, RelativeSource{RelativeSource AncestorTypeUserControl}} CommandParameter{Binding} //i:EventTrigger/i:Interaction.TriggersTextBlock.StyleStyle TargetTypeTextBlockStyle.TriggersTrigger PropertyIsMouseOver ValueTrueSetter PropertyCursor ValueHand /Setter PropertyForeground ValueRed //TriggerTrigger PropertyIsMouseOver ValueFalseSetter PropertyForeground ValueBlack //Trigger/Style.Triggers/Style/TextBlock.Style/TextBlock/StackPanel/DataTemplate/DataGridTemplateColumn.CellTemplate/DataGridTemplateColumn/DataGrid.Columns/DataGrid分析核心代码: i:Interaction.Triggersi:EventTrigger EventNameSelectionChangedi:InvokeCommandAction Command{Binding DataGridSelectedCommand} CommandParameter{Binding ElementNamemyDataGrid, PathSelectedItems} //i:EventTrigger/i:Interaction.Triggersi的命名空间 : xmlns:i“http://schemas.microsoft.com/xaml/behaviors”
使用触发器, 事件触发器, 将前端的触发事件写在EventName中 SelectionChanged. 然后把事件绑定到后台, 将多选的Student 以CommandParameter的形式传入后端
后端代码:
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using MathNet.Numerics.Distributions;
using NavTest.Eneities;
using SqlSugar;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;namespace NavTest.ViewModels
{public partial class Page3ViewModel:ObservableObject{[ObservableProperty]private ObservableCollectionStudent students new();public Page3ViewModel(){for (int i 0; i 15; i){Students.Add(new(){Id i 1,Name $StudentName{i},Age ${i}10,Description $str{i}});}}[RelayCommand]public void DataGridDelete(Student student){}//[RelayCommand]//public void DataGridUpDate(Student student)//{//}public RelayCommandStudent DataGridUpDateCommand new RelayCommandStudent((arg) {});[RelayCommand]public void DataGridSelected(IListobject objs){MyStudents new();foreach (var item in objs){if (item is Student stu){MyStudents.Add(stu);}}Student stu1 SelectStudent;}[RelayCommand]public void ItemControlCmd(Student student){}[ObservableProperty]private ObservableCollectionStudent myStudents new ();[ObservableProperty]private Student selectStudent new();}
}
完整的前端代码:
UserControlx:ClassNavTest.Views.Page3xmlnshttp://schemas.microsoft.com/winfx/2006/xaml/presentationxmlns:xhttp://schemas.microsoft.com/winfx/2006/xamlxmlns:dhttp://schemas.microsoft.com/expression/blend/2008xmlns:hchttps://handyorg.github.io/handycontrolxmlns:ihttp://schemas.microsoft.com/xaml/behaviorsxmlns:localclr-namespace:NavTest.Viewsxmlns:mchttp://schemas.openxmlformats.org/markup-compatibility/2006xmlns:mvclr-namespace:NavTest.ViewModelsxmlns:sysclr-namespace:System;assemblymscorlibxmlns:ttclr-namespace:NavTest.Eneitiesxmlns:vcclr-namespace:NavTest.Componentsd:DataContext{d:DesignInstance mv:Page3ViewModel}d:DesignHeight450d:DesignWidth800FontSize24mc:IgnorabledGridGrid.ColumnDefinitionsColumnDefinition /ColumnDefinition //Grid.ColumnDefinitionsGrid.RowDefinitionsRowDefinition /RowDefinition //Grid.RowDefinitionsDataGridx:NamemyDataGridAlternationCount2AutoGenerateColumnsFalseFontSize24ItemsSource{Binding Students}SelectedItem{Binding SelectStudent}SelectionModeExtendedi:Interaction.Triggersi:EventTrigger EventNameSelectionChangedi:InvokeCommandAction Command{Binding DataGridSelectedCommand} CommandParameter{Binding ElementNamemyDataGrid, PathSelectedItems} //i:EventTrigger/i:Interaction.TriggersDataGrid.ColumnHeaderStyleStyle TargetTypeDataGridColumnHeaderSetter PropertyBorderThickness Value0,0,0,3 /Setter PropertyCursor ValueHand /Setter PropertyFontWeight ValueSemiBold /Setter PropertyHorizontalContentAlignment ValueCenter /Setter PropertyMargin Value0 /Setter PropertyMinHeight Value25 /Setter PropertyMinWidth Value0 /Setter PropertyBackground Value#2B2C31 /Setter PropertySnapsToDevicePixels ValueTrue //Style/DataGrid.ColumnHeaderStyleDataGrid.CellStyleStyle TargetTypeDataGridCellSetter PropertyHorizontalContentAlignment ValueCenter /Setter PropertyVerticalContentAlignment ValueCenter /Setter PropertyTemplateSetter.ValueControlTemplate TargetTypeDataGridCellGrid Background{TemplateBinding Background}ContentPresenter HorizontalAlignmentCenter VerticalAlignmentCenter //Grid/ControlTemplate/Setter.Value/Setter/Style/DataGrid.CellStyleDataGrid.ColumnsDataGridTextColumnWidth*Binding{Binding Id}HeaderId /DataGridTextColumnWidth*Binding{Binding Age}Header年龄 /DataGridTextColumnWidth*Binding{Binding Name}Header姓名 /DataGridTemplateColumn Header操作DataGridTemplateColumn.CellTemplateDataTemplateStackPanel OrientationHorizontalTextBlockMargin5HorizontalAlignmentRightVerticalAlignmentCenterBackgroundWhiteFontFamily{StaticResource fontAwesome}FontSize24Tag修改Text#xf14b;i:Interaction.Triggersi:EventTrigger EventNameMouseUpi:InvokeCommandAction Command{Binding RelativeSource{RelativeSource AncestorTypeUserControl}, PathDataContext.DataGridUpDateCommand} CommandParameter{Binding} //i:EventTrigger/i:Interaction.TriggersTextBlock.StyleStyle TargetTypeTextBlockStyle.TriggersTrigger PropertyIsMouseOver ValueTrueSetter PropertyCursor ValueHand /Setter PropertyForeground ValueOrange //TriggerTrigger PropertyIsMouseOver ValueFalseSetter PropertyForeground ValueBlack //Trigger/Style.Triggers/Style/TextBlock.Style/TextBlockTextBlockMargin5HorizontalAlignmentRightVerticalAlignmentCenterBackgroundWhiteFontFamily{StaticResource fontAwesome}Tag删除Text#xf056;i:Interaction.Triggersi:EventTrigger EventNameMouseUpi:InvokeCommandAction Command{Binding DataContext.DataGridDeleteCommand, RelativeSource{RelativeSource AncestorTypeUserControl}} CommandParameter{Binding} //i:EventTrigger/i:Interaction.TriggersTextBlock.StyleStyle TargetTypeTextBlockStyle.TriggersTrigger PropertyIsMouseOver ValueTrueSetter PropertyCursor ValueHand /Setter PropertyForeground ValueRed //TriggerTrigger PropertyIsMouseOver ValueFalseSetter PropertyForeground ValueBlack //Trigger/Style.Triggers/Style/TextBlock.Style/TextBlock/StackPanel/DataTemplate/DataGridTemplateColumn.CellTemplate/DataGridTemplateColumn/DataGrid.Columns/DataGridWrapPanelGrid.Row1HorizontalAlignmentCenterVerticalAlignmentCenterOrientationHorizontalTextBlockMargin5,5,5,5ForegroundWhiteText测试1 /TextBlockMargin5,5,5,5ForegroundWhiteText测试2 /TextBlockMargin5,5,5,5ForegroundWhiteText测试3 /TextBlockMargin5,5,5,5ForegroundWhiteText测试4 /TextBlockMargin5,5,5,5ForegroundWhiteText测试5 /TextBlockMargin5,5,5,5ForegroundWhiteText测试6 //WrapPanelGrid Grid.Row1 Grid.Column1ItemsControl AlternationCount2 ItemsSource{Binding MyStudents}ItemsControl.ItemsPanelItemsPanelTemplateWrapPanel //ItemsPanelTemplate/ItemsControl.ItemsPanelItemsControl.ItemTemplateDataTemplateBorder x:Nameborder Padding2StackPanelTextBlock ForegroundWhite Text{Binding Name} /TextBlock ForegroundWhite Text{Binding Age} /ButtonCommand{Binding RelativeSource{RelativeSource AncestorTypeUserControl}, PathDataContext.ItemControlCmdCommand}CommandParameter{Binding}Content{Binding Description}ForegroundWhite //StackPanel/BorderDataTemplate.TriggersTrigger PropertyItemsControl.AlternationIndex Value1Setter TargetNameborder PropertyBackground Valuered //Trigger/DataTemplate.Triggers/DataTemplate/ItemsControl.ItemTemplate/ItemsControl/Grid/Grid
/UserControl
如果在一个有ItemSource的控件内找不到 后台的Property 和command, 可以尝试 binding ElementName 和binding Relationsource
例如command 可以 binding Relationsource {RelationSource AncestorType window} path datacontext. xxxcommand commandparameter{binding} 返回单个class为数据源
CommandParameter“{Binding ElementNamemyDataGrid, PathSelectedItems}” 绑定别的控件上的属性 或者 用child的方式
一些补充的内容:
除了BooleanToVisibilityConverter之外WPF框架还提供了许多其他的内置转换器。以下是一些常用的系统现有转换器的示例BooleanToVisibilityConverter: 将bool值转换为Visibility枚举值。
InverseBooleanConverter: 反转bool值将true转换为false将false转换为true。
StringFormatConverter: 格式化字符串可以将值与指定的格式字符串进行组合。
DateTimeConverter: 将DateTime对象转换为不同格式的字符串或者将字符串转换为DateTime对象。
BrushConverter: 将字符串表示的颜色转换为Brush对象。
ValueConverterGroup: 将多个转换器组合成一个组按照顺序依次进行转换。
EnumToStringConverter: 将枚举值转换为对应的字符串表示。
NumericUpDownConverter: 用于增加和减少数值类型的转换器。
CollectionViewSource: 用于在集合和视图之间进行转换和筛选。
这只是一些常见的示例WPF框架提供了更多的内置转换器可以满足各种转换需求。你可以根据具体的场景和需求选择合适的转换器来使用。eventTrriger
DataTrigger常用触发器CallMethodAction
ChangePropertyAction
InvokeCommandActionCallMethodAction 和 InvokeCommandAction 是在 WPF 中用于触发操作的两种不同方式它们有一些区别并且在特定的情况下可能不可互相替代。CallMethodActionCallMethodAction 允许你直接调用指定的方法。你可以通过设置 TargetObject 属性指定要调用方法的对象并使用 MethodName 属性指定要调用的方法名称。这种方式适用于简单的、特定于 UI 的操作例如在按钮点击或其他事件发生时执行某个方法。它可以方便地将事件触发与方法调用关联起来但缺点是它与 UI 逻辑紧耦合并且无法利用 WPF 中的命令系统。InvokeCommandActionInvokeCommandAction 允许你通过绑定一个命令来执行操作。你可以使用 Command 属性绑定到一个实现了 ICommand 接口的命令对象。当触发与行为关联的事件时命令的 Execute 方法将被调用而命令的 CanExecute 方法决定是否可以执行。这种方式更符合 MVVM 架构和解耦原则它将 UI 逻辑与业务逻辑分离并提供了更好的可测试性和可重用性。虽然 CallMethodAction 和 InvokeCommandAction 实现了类似的功能但在大多数情况下推荐使用 InvokeCommandAction 和命令模式来处理用户交互。它更符合 MVVM 设计模式的理念并且提供了更好的灵活性和可扩展性。但在一些简单的场景下CallMethodAction 也可以作为一种快速临时解决方案。因此根据具体的需求和架构设计你可以选择使用 CallMethodAction 或 InvokeCommandAction 来触发操作。在 WPF 中CallMethodAction 是一种交互行为Interaction Behavior它允许你通过 XAML 触发调用特定方法。它是 System.Windows.Interactivity 命名空间下的一个类需要通过添加对 System.Windows.Interactivity 程序集的引用才能使用。CallMethodAction 可以用于任何具有无参数的方法。它与事件触发器EventTrigger一起使用当特定事件发生时将触发并调用绑定的方法。以下是使用 CallMethodAction 的示例CallMethodAction StackPanelButton ContentClick Mei:Interaction.Triggersi:EventTrigger EventNameClicki:CallMethodAction TargetObject{Binding} MethodNameHandleButtonClick //i:EventTrigger/i:Interaction.Triggers/Button
/StackPanel关闭窗口用到window的close方法ButtonBackgroundRedContent#xe653;Style{StaticResource ControlButtonStyle}ToolTipClosei:Interaction.Triggersi:EventTrigger EventNameClicki:CallMethodAction MethodNameClose TargetObject{Binding RelativeSource{RelativeSource AncestorTypeWindow}} //i:EventTrigger/i:Interaction.Triggers/ButtonChangePropertyAction
例如TargetObject{Binding} 返回了DataContext就是ViewModel它的PropertyName就是里面的属性IsMarkeri:Interaction.Triggersi:EventTrigger EventNameLoadedi:ChangePropertyAction PropertyNameIsMarker ValueTrue TargetObject{Binding}//i:EventTriggeri:EventTrigger EventNameClosingi:ChangePropertyAction PropertyNameIsMarker ValueFalse TargetObject{Binding}//i:EventTrigger/i:Interaction.Triggers最小化用到window的Minimized属性ButtonBackground#22FFFFFFContent#xe7e6;Style{StaticResource ControlButtonStyle}ToolTipMinimizei:Interaction.Triggersi:EventTrigger EventNameClicki:ChangePropertyActionPropertyNameWindowStateTargetObject{Binding RelativeSource{RelativeSource AncestorTypeWindow}}ValueMinimized //i:EventTrigger/i:Interaction.Triggers/ButtonButton ContentChange Backgroundi:Interaction.Triggersi:EventTrigger EventNameClicki:ChangePropertyAction TargetObject{Binding ElementNameMyBorder}PropertyNameBackgroundValueRed //i:EventTrigger/i:Interaction.Triggers
/Button
Border x:NameMyBorder Width100 Height100 BackgroundGreen /Button ContentChange Backgroundi:Interaction.Triggersi:EventTrigger EventNameClicki:ChangePropertyAction TargetObject{Binding RelativeSource{RelativeSource ModeFindAncestor, AncestorTypeWindow}}PropertyNameBackgroundValueRed //i:EventTrigger/i:Interaction.Triggers
/ButtonRadioButtonWidth200Height50Content连接PLCFontSize18ForegroundWhiteStyle{DynamicResource RadioButtonMenuStyle}Tag#xf11c;i:Interaction.Triggersi:EventTrigger EventNameCheckedi:InvokeCommandAction Command{Binding ConnCommand} CommandParameter{Binding RelativeSource{RelativeSource ModeFindAncestor, AncestorTypeRadioButton}} //i:EventTrigger/i:Interaction.Triggers/RadioButton在 i:EventTrigger 元素中可以使用不同的 EventName 属性来指定常见事件的名称以触发相应的动作或触发器。以下是一些常用的 EventName 值示例Loaded当元素加载完成时触发。
Unloaded当元素卸载时触发。
MouseEnter当鼠标指针进入元素时触发。
MouseLeave当鼠标指针离开元素时触发。
MouseDown当鼠标按下按钮时触发。
MouseUp当鼠标释放按钮时触发。
Click当元素被点击时触发。
Checked当复选框或单选按钮的选中状态改变时触发。
TextChanged当文本框的文本内容改变时触发。
PreviewMouseMove鼠标在元素上移动。
PreviewMouseUp鼠标释放按钮。
MouseEnter鼠标进入元素。
MouseLeave鼠标离开元素。
PreviewMouseWheel滚动鼠标滚轮。
键盘事件PreviewKeyDown按下键盘上的键。
PreviewKeyUp释放键盘上的键。
KeyDown按下键盘上的键冒泡事件。
KeyUp释放键盘上的键冒泡事件。SelectionChanged当下拉列表、列表框或其他选择控件的选择项发生改变时触发。
这只是一些常见的 EventName 值示例实际上可以根据具体的控件和需求选择适合的事件名称。根据控件的类型和事件的定义可以在相关文档或控件的事件文档中找到更多可用的 EventName 值。Button ContentToggle Size Width100 Height30i:Interaction.Triggersi:EventTrigger EventNameClicki:Interaction.Behaviorsei:ChangePropertyAction TargetObject{Binding RelativeSource{RelativeSource AncestorTypeWindow}}PropertyNameWindowStateei:ChangePropertyAction.ValueSystem:WindowStateSystem:WindowState x:FactoryMethodFromValueSystem:WindowState.Normal /System:WindowState.Maximized //System:WindowState/System:WindowState/ei:ChangePropertyAction.Value/ei:ChangePropertyAction/i:Interaction.Behaviors/i:EventTrigger/i:Interaction.Triggers
/Buttoni:DataTrigger{Binding RelativeSource {RelativeSource Self}
{Binding RelativeSource {RelativeSource AncestorTypeButton}} {Binding ElementNameTestTBlock, PathName}Button ContentClick Mei:Interaction.Triggersi:DataTrigger Binding{Binding RelativeSource{RelativeSource Self}, Path IsMouseOver} ValueFalsei:ChangePropertyAction TargetObject{Binding RelativeSource{RelativeSource Self}}PropertyNameBackGroundValueRed //i:DataTrigger/i:Interaction.Triggers
/Button
