I'm currently taking a good look at the excellent toolkit from Laurent and I have the following question.
From Blend 4, I have added an EventTrigger for the Loaded event, in my ViewModel I have the following:
public RelayCommand rcAutoGeneratingColumn { get; private set; }
In the constructor I have:
rcAutoGeneratingColumn =
new RelayCommand(o => DataGridAutoGeneratingColumn(o));
Also in the ViewModel, I have the method which I wish to be invoked by the RelayCommand:
private void DataGridAutoGeneratingColumn(Object o)
{
DataGrid grid = (DataGrid)o;
foreach (DataGridTextColumn col in grid.Columns)
{
if (col.Header.ToString().ToLower() == "id")
{
col.Visibility = System.Windows.Visibility.Hidden;
}
}
}
My XAML contains the following (for the DataGrid):
<i:Interaction.Triggers>
<i:EventTrigger EventName="Loaded">
<GalaSoft_MvvmLight_Command:EventToCommand
Command="{Binding rcAutoGeneratingColumn, Mode=OneWay}"
CommandParameter="{Binding ElementName=dataGrid1, Mode=OneWay}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
There is NO PROBLEM here the code works just fine, but obviously the event used to hide certain columns should be the AutoGeneratingColumn event and not Loaded.
I have used to Loaded event as a getaround.
I was hoping that I could relay any event offered by the control so that, in this case, the following would work instead:
<i:Interaction.Triggers>
<i:EventTrigger EventName="AutoGeneratingColumn">
<GalaSoft_MvvmLight_Command:EventToCommand
Command="{Binding rcAutoGeneratingColumn, Mode=OneWay}"
CommandParameter="{Binding ElementName=dataGrid1, Mode=OneWay}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
I am unable to get the AutoGeneratingColumn event to trigger, and I'm hoping that I've overlooked something and appreciate any advice given!
This behaviour is the same with the GridControl from DevExpress, in that the Loaded event is triggered whereas the ColumnsPopulated event (this being the equivalent of the AutoGeneratingColumn event) is not.
DevExpress offered the following information with regard to my question:
"We have reviewed this question, and come to an interesting conclusion. It looks like the visual tree is not being built at the moment when the Interaction.Triggers are being processed"
If this is true, and there is no other way in which to invoke the events within the ViewModel, then one would have to go ahead and - by using trial and error - note which of the DataGrid events (of which there are over 100) can be invoked in this way and which cannot!
One would like to think that every event which is available in the code-behind, can also be reached when applying the MVVM pattern.
I have searched for an answer but I cannot rule out that I have overlooked something, so if this is to be the case, then please accept my apologies!
You don't have to use evil code behind ;-) You can do this using an attached behaviour...
public class AutoGeneratingColumnEventToCommandBehaviour
{
public static readonly DependencyProperty CommandProperty =
DependencyProperty.RegisterAttached(
"Command",
typeof(ICommand),
typeof(AutoGeneratingColumnEventToCommandBehaviour),
new PropertyMetadata(
null,
CommandPropertyChanged));
public static void SetCommand(DependencyObject o, ICommand value)
{
o.SetValue(CommandProperty, value);
}
public static ICommand GetCommand(DependencyObject o)
{
return o.GetValue(CommandProperty) as ICommand;
}
private static void CommandPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var dataGrid = d as DataGrid;
if (dataGrid != null)
{
if (e.OldValue != null)
{
dataGrid.AutoGeneratingColumn -= OnAutoGeneratingColumn;
}
if (e.NewValue != null)
{
dataGrid.AutoGeneratingColumn += OnAutoGeneratingColumn;
}
}
}
private static void OnAutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
{
var dependencyObject = sender as DependencyObject;
if (dependencyObject != null)
{
var command = dependencyObject.GetValue(CommandProperty) as ICommand;
if (command != null && command.CanExecute(e))
{
command.Execute(e);
}
}
}
}
Then use it in XAML like this...
<DataGrid ItemsSource="{Binding MyGridSource}"
AttachedCommand:AutoGeneratingColumnEventToCommandBehaviour.Command="{Binding CreateColumnsCommand}">
</DataGrid>
Just set EventTrigger.SourceObject property.
<DataGrid
x:Name="DataGrid"
AutoGenerateColumns="True"
IsReadOnly="True"
ItemsSource="{Binding Data}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="AutoGeneratingColumn" SourceObject="{Binding ElementName=DataGrid}">
<local:EventToCommand
Command="{Binding ColumnGeneratingCommand}"
PassEventArgsToCommand="True" />
</i:EventTrigger>
</i:Interaction.Triggers>
</DataGrid>
As MVVMLight from Galasoft is deprecated now, we can use CommunityToolkit.Mvvm package and use it like this:
<DataGrid AutoGenerateColumns="True"
Name="DataGrid"
ItemsSource="{Binding Items}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="AutoGeneratingColumn" SourceObject="{Binding ElementName=DataGrid}">
<i:InvokeCommandAction Command="{Binding AutoGeneratingColumnCommand}" PassEventArgsToCommand="True"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</DataGrid>
Note that Items property is a simple List, It could be an ObservableCollection or whatever.
The trick to get the fired event is to load your data after the window is loaded, or raise OnpropertyChanged on Items property after loaded.
<Window ...>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Loaded">
<i:InvokeCommandAction Command="{Binding LoadedCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Window>
In your View Model:
private RelayCommand<DataGridAutoGeneratingColumnEventArgs> myAutoGeneratingColumnCommand;
public RelayCommand<DataGridAutoGeneratingColumnEventArgs> AutoGeneratingColumnCommand
{
get
{
if (myAutoGeneratingColumnCommand == null)
myAutoGeneratingColumnCommand = new RelayCommand<DataGridAutoGeneratingColumnEventArgs>(AutoGeneratingColumnCommandAction);
return myAutoGeneratingColumnCommand;
}
}
private void AutoGeneratingColumnCommandAction(DataGridAutoGeneratingColumnEventArgs e)
{
if (e.PropertyName == "Id")
{
e.Column.Width = 60;
}
else if (e.PropertyName == "Name")
{
e.Column.Header = "myName";
e.Column.Width = new DataGridLength(1, DataGridLengthUnitType.Star);
}
else
e.Cancel = true; // ignore all other properties and remove their column
}
RelayCommand myLoadedCommand;
public RelayCommand LoadedCommand
{
get
{
if (myLoadedCommand == null)
myLoadedCommand = new RelayCommand(LoadedCommandAction);
return myLoadedCommand;
}
}
private void LoadedCommandAction()
{
Load(); // Populate the Items List
}
During the course of developing a project with MVVM you're going to have circumstances where you must handle events in your view's code-behind and EventToCommand just plain doesn't work. You especially find this with Silverlight, but I assume from your question that you're using WPF. It's okay to do some event handling in your view's code-behind, just don't put any business logic there. You can even leave the command in your view model, just call it directly from your event handler.
((YourViewModel)this.DataContext).rcAutoGeneratingColumn.Execute(sender);
Related
How to bind RichTextBox to a flag (true/false value). For example i want the flag to be true if the text in the RTB is edited. And also the binding should be two-way.
You have to use two things to solve your problem.
You have to add System.Windows.Interactivity reference and use this link in your xaml:
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
Here is an xaml (view part) example:
<Window ...
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity">
...
<RichTextBox>
<i:Interaction.Triggers>
<i:EventTrigger EventName="TextChanged">
<i:InvokeCommandAction Command="{Binding TextChangedCommand}"
x:Name="textChangedCommand" />
</i:EventTrigger>
</i:Interaction.Triggers>
</RichTextBox>
...
After this, you have to use an ICommand implementation in your ViewModel:
Here is a simple example to use in "ViewModel" part:
public partial class MainWindow : Window
{
RelayCommand _textChangedCommand;
public RelayCommand TextChangedCommand
{
get
{
if (_textChangedCommand == null)
_textChangedCommand = new RelayCommand(() => IsEdited = true);
return _textChangedCommand;
}
}
private bool _isEdited;
public bool IsEdited
{
get
{
return _isEdited;
}
set
{
_isEdited = value;
}
}
public MainWindow()
{
InitializeComponent();
//Use the following code if you want to use xaml.cs as ViewModel but It is not recommended, it is not correct MVVM pattern only simple example.
DataContext = this;
}
}
There are several way to implement the ICommand interface.
Here you can find one with description.
Should I put all events in views code behind or there is a more proper way, like place commands in ViewModel?
For example, I want to open Tab on double click on the datagrid row, where should I handle this event?
No you should not put events in code behind. In MVVM (Model-View-ViewModel) design pattern, the view model is the component that is responsible for handling the application's presentation logic and state. This means that your view's code-behind file should contain no code to handle events that are raised from any user interface (UI) element.
for eg if you have button in your xaml
<Button Content="OK" Click="btn_Click"/>
protected void btn_Click(object sender, RoutedEventArgs e)
{
/* This is not MVVM! */
}
Instead you can use WPF Command.All you have to do is bind to its Execute and CanExecute delegates and invoke your command.
So your code will now be
public class ViewModel
{
private readonly DelegateCommand<string> _clickCommand;
public ViewModel()
{
_clickCommand = new DelegateCommand(
(s) => { /* perform some action */ }, //Execute
null
} //CanExecute );
public DelegateCommand ButtonClickCommand
{
get { return _clickCommand; }
}
}
<Button Content="COOL" Command="ButtonClickCommand"/>
Kyle is correct in that your handlers should appear in the view model. If a command property doesn't exist then you can use an interaction trigger instead:
<DataGrid>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseDoubleClick">
<i:InvokeCommandAction Command="{Binding Mode=OneWay, Path=OpenClientCommand}" CommandParameter="{Binding ElementName=searchResults, Path=SelectedItems}" />
</i:EventTrigger>
</i:Interaction.Triggers>
... other stuff goes here ...
</DataGrid>
Or you can use MVVM Lite's EventToCommand, which also allows you to pass in the message parameters:
<i:Interaction.Triggers>
<i:EventTrigger EventName="Closing">
<cmd:EventToCommand Command="{Binding ClosingCommand}" PassEventArgsToCommand="True" />
</i:EventTrigger>
</i:Interaction.Triggers>
Which is used in in this case to cancel the window close event in response to the "Are you sure you want to quit?" dialog:
public ICommand ClosingCommand { get { return new RelayCommand<CancelEventArgs>(OnClosing); } }
private void OnClosing(CancelEventArgs args)
{
if (UserCancelsClose())
args.Cancel = true;
}
Relevant namespaces are as follows:
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:cmd ="http://www.galasoft.ch/mvvmlight"
I have grid control and I need to pass MouseWheel event to view model.
Now I'm doing this like that
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseWheel">
<i:InvokeCommandAction Command="{Binding MouseWheelCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
but I need to do different actions on mouse scroll up and mouse scroll down.
How to do that?
Can I do that without code in view and without extern libraries? Im using c#, wpf, visual studio 2010 express.
You can use input bindings with a custom mouse gesture, which is very easy to implement:
public class MouseWheelUp : MouseGesture
{
public MouseWheelUp(): base(MouseAction.WheelClick)
{
}
public MouseWheelUp(ModifierKeys modifiers) : base(MouseAction.WheelClick, modifiers)
{
}
public override bool Matches(object targetElement, InputEventArgs inputEventArgs)
{
if (!base.Matches(targetElement, inputEventArgs)) return false;
if (!(inputEventArgs is MouseWheelEventArgs)) return false;
var args = (MouseWheelEventArgs)inputEventArgs;
return args.Delta > 0;
}
}
and then use it like this:
<TextBlock>
<TextBlock.InputBindings>
<MouseBinding Command="{Binding Command}">
<MouseBinding.Gesture>
<me:MouseWheelUp />
</MouseBinding.Gesture>
</MouseBinding>
</TextBlock.InputBindings>
ABCEFG
</TextBlock>
For this you need MouseWheelEventArgs in your MVVM. So Pass this EventArgs as commandParamter.
You can refer this link ---
Passing EventArgs as CommandParameter
Then in your View-Model Class you can use this event args as follow
void Scroll_MouseWheel(MouseWheelEventArgs e)
{
if (e.Delta > 0)
{
// Mouse Wheel Up Action
}
else
{
// Mouse Wheel Down Action
}
e.Handled = true;
}
I`m quite begginer at WPF.
I have checkBox and I want that every check changes will excecute a command that gets IsChecked parameter and do some action.
I have the next code in my XAML file:
At my viewModel I have the next code:
private ICommand _addSelectedItemsCommand;
public ICommand AddSelectedItemsCommand
{
get
{
if (_addSelectedItemsCommand == null)
{
_addSelectedItemsCommand = new RelayCommand(param => this.AddSelectedItems());
}
return _addSelectedItemsCommand;
}
}
private void AddSelectedItems()
{
Do something...
}
But for "Do somthing" I need IsChecked parameter, How can i get it?
Thanks
In Your ViewModel RelayCommand Look Like
private RelayCommand<string> AddSelectedItemsCommand{get;set;}
And in your ViewModel Constructor code look like
AddSelectedItemsCommand=new RelayCommand<string>(AddSelectedItemsMethod);
void AddSelectedItemsMethod(string AddItem)
{
Your Code Goes Here.
}
You should use InvokeCommandAction class. You can find it in Expression Blend SDK or you can simply add this NuGet package to your project.
<CheckBox
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Checked">
<ei:InvokeCommandAction Command="{Binding AddSelectedItemsCommand}" CommandParameter="..." />
</i:EventTrigger>
</i:Interaction.Triggers>
</CheckBox>
I'm trying to capture the Enter key being pressed on a text box, so that I can kick off an update to the server. It's not working, and so I've reduced the problem to it's simplist elemetns.
In this example, it seems that the binding is not happening per keystroke, but at sometime later. I need to the binding to be completed by the time the enter key is pressed. Consider the following XAML and function from the VM.
Here's the XAML of the textbox
<TextBox Text="{Binding TextValue, Mode=TwoWay}" Height="23" Width="300">
<i:Interaction.Triggers>
<i:EventTrigger EventName="KeyDown">
<cmd:EventToCommand Command="{Binding KeyDownCommand}"
PassEventArgsToCommand="True" />
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
The KeyDownCommand fire as expected, howerver the value is not yet in the TextValue property. If I hit enter a second time then the value is in the property? Here's the KeyDownCommand. The constructor of the ViewModel sets the keyDownCommand correctly.
public RelayCommand<RoutedEventArgs> KeyDownCommand { get; private set; }
private void KeyDownAction(RoutedEventArgs eventArg)
{
var source = eventArg.OriginalSource as FrameworkElement;
var e = eventArg as KeyEventArgs;
if (source != null && e != null && e.Key== Key.Enter)
{
e.Handled = true;
MessageBox.Show(TextValue);
}
}
It seems that what I need is a way to "post" the Text of the TextBox back to the TextValue property of the VM when the Enter key is pressed. Or is there something else I'm missing.
Try setting UpdateSourceTrigger to PropertyChanged on binding, like this:
<TextBox Text="{Binding TextValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Height="23" Width="300">
Now the view model property will be update every time the text is changed.
Update:
For Silverlight, as an alternative to UpdateSourceTrigger, you can use the following simple behavior that updates binding source whenever text changes:
public class TextChangedUpdateSourceBehavior : Behavior<TextBox>
{
protected override void OnAttached()
{
base.OnAttached();
AssociatedObject.TextChanged += OnTextChanged;
}
private void OnTextChanged(object sender, TextChangedEventArgs e)
{
var bindingExpression = AssociatedObject.GetBindingExpression(TextBox.TextProperty);
if (bindingExpression != null)
{
bindingExpression.UpdateSource();
}
}
}
Use it like this:
<TextBox Text="{Binding TextValue, Mode=TwoWay}" Height="23" Width="300">
<i:Interaction.Behaviors>
<b:TextChangedUpdateSourceBehavior />
</i:Interaction.Behaviors>
</TextBox>
No sooner did I post the question, than I hit upon the answer.
Here's the corrected KeyDownAction
private void KeyDownAction(RoutedEventArgs eventArg)
{
var source = eventArg.OriginalSource as FrameworkElement;
source.GetBindingExpression(TextBox.TextProperty).UpdateSource();
var e = eventArg as KeyEventArgs;
if (source != null && e != null && e.Key== Key.Enter)
{
e.Handled = true;
MessageBox.Show(TextValue);
}
}
Of now as I type this I realize that I'm "breaking" the pattern, in as much as now my ViewModel knows more about the View that it should.