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;
}
Related
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`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 using Galasoft's Light MVVM for my Siverlight project.
I have setup everything as instructed: the ViewModel is bound to View's DataContext;
I have a canvas named inkCanvas in the View.
When the ViewModel gets the updated project data, I need to reference inkCanvas to create a CanvasRender instance public CanvasRender(Canvas canvas, ProjectData pdata).
The problem is in MVVM, the ViewModel knows nothing about View, so how can I reference a control (inkCanvas) in View?
P.S. (Edited): The workaround I made is: when I pass the project data to the ViewModel, I also pass the inkCanvas from View's code-behind. hmmm, now my code-behind is not clean.
Per the comments above, one way to do this is to extend Canvas and keep the reference to CanvasRender inside that class.
public class MyCanvas : Canvas
{
private CanvasRender _canvasRender;
private ProjectData _data;
public ProjectData Data
{
get { return _data; }
set
{
_data = value;
_canvasRender = new CanvasRender(this, _data);
}
}
public MyCanvas() : base()
{
}
}
You'd probably want to also make ProjectData a Dependency Property so that it's bindable.
This allows you to maintain the MVVM pattern, because now you can write in XAML:
<local:MyCanvas ProjectData="{Binding ViewModel.ProjectData}" />
In MVVM Pattern, you won't reference a Control directly in ViewModel. In MVVM, all is "binding". You inkCanvas will be binding to a property in your ViewModel.
public class MyViewModel : INotifyPropertyChanged
{
private readonly StrokeCollection _mystrokes;
public MyViewModel ()
{
_mystrokes= new StrokeCollection();
(_mystrokesas INotifyCollectionChanged).CollectionChanged += delegate
{
//the strokes have changed
};
}
public event PropertyChangedEventHandler PropertyChanged;
public StrokeCollection MyStrokes
{
get
{
return _mystrokes;
}
}
private void OnPropertyChanged(string propertyName)
{
var handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
And XAML:
<InkCanvas Strokes="{Binding MyStrokes}"/>
Edit :
Maybe the workaround for your case is to use EventToCommand : this allow tobind an UI event to an ICommand directly in XAML ( and use Args to pass a ref to the inkCancas)
<i:Interaction.Triggers>
<i:EventTrigger EventName="Loaded">
<cmd:EventToCommand Command="{Binding Mode=OneWay, Path=LoadedCommand}"
PassEventArgsToCommand="True" />
</i:EventTrigger>
</i:Interaction.Triggers>
If your going to use the EventToCommand approach (which you tried in another answer), then instead of using the PassEventArgsToCommand property use the CommandParameter property and bind it to your Canvas.
<i:Interaction.Triggers>
<i:EventTrigger EventName="Loaded">
<cmd:EventToCommand Command="{Binding Path=CanvasLoadedCommand}"
CommandParameter="{Binding ElementName=inkCanvas}" />
</i:EventTrigger>
</i:Interaction.Triggers>
Then in your ViewModel:
public class ViewModel
{
private Canvas m_canvas;
public RelayCommand<Canvas> CanvasLoadedCommand { get; private set; }
public ViewModel()
{
CanvasLoadedCommand = new RelayCommand<Canvas>(canvas =>
{
m_canvas = canvas;
});
}
}
So as soon as your canvas is loaded, you should then have a reference to it saved in your view model.
I am trying to get the WPF AutoCompleteBox to raise the KeyDown event when I press the enter key. I am using the normal KeyDown hook, which works for everything but the enter key it seems. Does anyone know how I can fix this?
You could inherit the AutoCompleteBox, adding an event for Enter.
public class MyAutoCompleteBox : AutoCompleteBox
{
public override void OnKeyDown(KeyEventArgs e)
{
base.OnKeyDown(e);
if(e.Key == Key.Enter) RaiseEnterKeyDownEvent();
}
public event Action<object> EnterKeyDown;
private void RaiseEnterKeyDownEvent()
{
var handler = EnterKeyDown;
if(handler != null) handler(this);
}
}
In your consuming class, you can subscribe:
public void Subscribe()
{
autoCompleteBox.EnterKeyDown += DoSomethingWhenEnterPressed;
}
public void DoSomethingWhenEnterPressed(object sender)
{
}
Very late answer, but I faced this same problem that brought me to this question and finally solved it using PreviewKeyDown
<wpftoolkit:AutoCompleteBox Name="AutoCompleteBoxCardName"
Populating="LoadAutocomplete"
PreviewKeyDown="AutoCompleteBoxName_PreviewKeyDown"/>
and
private void AutoCompleteBoxName_PreviewKeyDown(object sender, KeyEventArgs e)
{
if (e.Key == Key.Enter)
{
//...
}
}
There is a slightly easier (and in my opinion more MVVM) way:
// This still goes in your code behind (yuck!)
protected override void OnKeyDown(KeyEventArgs e)
{
if (!IsDropDownOpen && SelectedItem != null && (e.Key == Key.Enter || e.Key == Key.Return))
{
// Drop down is closed so the item in the textbox should be submitted with a press of the Enter key
base.OnKeyDown(e); // This has to happen before we mark Handled = false
e.Handled = false; // Set Handled = false so the event bubbles up to your inputbindings
return;
}
// Drop down is open so user must be selecting an AutoComplete list item
base.OnKeyDown(e);
}
This minimizes the blasphemous code-behind and allows your key event to continue to bubble up to something like an input binding:
<UserControl.InputBindings>
<KeyBinding Key="Tab" Command="{Binding NextCommand}"/>
<KeyBinding Key="Tab" Modifiers="Shift" Command="{Binding LastCommand}"/>
<KeyBinding Key="Escape" Command="{Binding ClearCommand}"/>
<KeyBinding Key="Enter" Command="{Binding EnterCommand}"/>
</UserControl.InputBindings>
(I know this is a late answer, but I still think it's usefull for people who want to solve this issue, without code behind)
A good way to do this in MVVM
First add the reference:
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
and from the NuGet package (MVVMLight):
xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras"
Than in your View:
<wpftoolkit:AutoCompleteBox Name="AutoCompleteBoxName">
<i:Interaction.Triggers>
<i:EventTrigger EventName="PreviewKeyDown">
<cmd:EventToCommand Command="{Binding AutoCompleteEnter}" PassEventArgsToCommand="True"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</wpftoolkit:AutoCompleteBox>
and than in your ViewModel :
public ICommand AutoCompleteEnter { get { return new RelayCommand<System.Windows.Input.KeyEventArgs>(Auto_Complete_Enter); } }
public void Auto_Complete_Enter(System.Windows.Input.KeyEventArgs e)
{
//Detect if key is 'Enter/Return' key
if ((e.Key == Key.Enter) || (e.Key == Key.Return))
{
Console.WriteLine("U have pressed the enter key");
}
}
Hope this will still help some people out.
So, I've spend a lot of time trying to get this thing to work. Other responses are certainly helpful and will get you to destination, but i have following issues with implementation:
I needed MVVM solution with an ability to bind Enter to Command within ViewModel, which means that Event Handlers was undesirable option.
I was trying to avoid adding additional dependencies to fix single event in a single control, so no MVVMLight.
Solution:
Pull copy of DonNetProjects.Input.Toolkit from github
Navigate to AutoCompleteBox/System/Windows/Controls/AutoCompleteBox.cs
Change overload of OnKeyDown method to following:
if (IsDropDownOpen)
{
if (SelectionAdapter != null)
{
SelectionAdapter.HandleKeyDown(e);
if (e.Handled)
{
return;
}
}
if (e.Key == Key.Escape)
{
OnAdapterSelectionCanceled(this, new RoutedEventArgs());
//e.Handled = true;
}
}
else
{
// The drop down is not open, the Down key will toggle it open.
if (e.Key == Key.Down)
{
IsDropDownOpen = true;
//e.Handled = true;
}
}
// Standard drop down navigation
switch (e.Key)
{
case Key.F4:
IsDropDownOpen = !IsDropDownOpen;
e.Handled = true;
break;
case Key.Enter:
if (IsDropDownOpen)
{
OnAdapterSelectionComplete(this, new RoutedEventArgs());
e.Handled = true;
}
break;
default:
break;
}
base.OnKeyDown(e);
Recompile to new DLL and reference it instead of original WPFToolkit.
Result:
If new version used as following:
xmlns:tk="clr-namespace:System.Windows.Controls;assembly=DotNetProjects.Input.Toolkit"
<tk:AutoCompleteBox ItemsSource="{Binding AvailableValues}" SelectedItem="{Binding SelectedValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<tk:AutoCompleteBox.InputBindings>
<KeyBinding Key="Enter" Command="{Binding AddValue}"/>
</tk:AutoCompleteBox.InputBindings>
</tk:AutoCompleteBox>
Resulting behavior is: if dropdown is open, Enter would be rerouted to it to complete selection, if dropdown is closed it will fire command in KeyBinding.
Alternatively, when using Caliburn Micro, you can simply use:
<Controls:AutoCompleteBox ItemsSource="{Binding Keywords}"
ValueMemberPath="Name"
Text="{Binding EnteredText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
IsTextCompletionEnabled="True"
cal:Message.Attach="[Event PreviewKeyDown] = [Action AddTagOnEnter($eventArgs)]" />
Specifically, note the last line to attach your event. For some other method parameter options, see here.
Finally, define a public method in your ViewModel:
public void AddTagOnEnter(KeyEventArgs e)
{
if (e.Key != Key.Enter) return;
// Do something useful
}
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);