How to connect ICommand and VisualStateManager together - wpf

How can I let my controls on the window know that their states should be changed. I have to use ICommand and since controls can have different states (Enable/Disable , Checked/Unchecked ...) have to handle them with VisualStateManager.
This could be a possible scenario:
When Record button is clicked(Checked) the other controls in the window should be uncheckable and once the recording is finished they should be checkable and many other scenarios.
Any help would be really appreciated.
Thanks.

You can achieve it with the help of interaction and interactivity. See if it helps.
Add below references in your XAML
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
You can bind your ICommand and provide a VisualState name that will be applied when Button is clicked
<Button>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<i:InvokeCommandAction Command="{Binding YourICommand}" />
<ei:GoToStateAction StateName="YourVisualStateName" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
If you don't have Blend 4, you can install the Blend 4 SDK to get the current behavior assemblies.

Related

Same method for multiple controls when using Caliburn.Micro

In WPF MVVM application, I need same functionality for multiple controls - for example certain button does same thing as certain menu item. It is piece of cake with MVVM Light's RelayCommand, but I am now using Caliburn.Micro, where almost everything is based on conventions. So two controls can not have same x:Name="AddItem", which is used by CM to determine method for executing in ViewModel. Is there any simple way to solve this?
Yes, it's simple, but verbose. You need to use the "long format". Let's say you have one method IncrementCount on your ViewModel:
// Handling event
public void IncrementCount()
{
Count++;
}
And your View has:
<Button Name="ButtonOne">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<cal:ActionMessage MethodName="IncrementCount" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<Button Name="ButtonTwo">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<cal:ActionMessage MethodName="IncrementCount" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
Both buttons will call your IncrementCount method.
EDIT
Add these namespaces
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:cal="http://www.caliburnproject.org"
You may see this Caliburn starting project using the snippets above.

Attaching Command to ScrollViewer.ScrollChanged of ListView

The WPF ListView class can be set up to automatically handle scrolling without an external ScrollViewer and it's possible to register an event handler for the control's internal scrollbar by writing XAML like such:
<ListView ScrollViewer.ScrollChanged="ScrollChanged" />
How to attach it to MVVM light Command? I tried the following, but it doesn't work:
<ListView>
<i:Interaction.Triggers>
<i:EventTrigger EventName="ScrollViewer.ScrollChangedEvent">
<cmd:EventToCommand Command="{Binding ScrollCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</ListView>
Note: ScrollCommand - is a RelayCommand from my viewmodel.
EventTrigger doesn't trigger for routed events. You can use the solution proposed in this article
to create a RoutedEventTrigger class and use it instead of EventTrigger.
I recommend a Behavior for this. If you don't have Blend, you'll need to get the Blend SDK. But once you have that, you can follow this tutorial to extend the behavior of the ScrollViewer.

how to implement control events in wpf using MVVM?

I have a slider control in view i need to call the ValueChanged event of slider and update one property in model based on that. how i can implement this using MVVM pattern.
where I have to write the ValueChanged event? how i can connect ValueChanged event code with view?
i just take the answer from here cause i use it in my projects too:
You should use an EventTrigger in combination with InvokeCommandAction from the Windows.Interactivity namespace. Here is an example:
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding SelectedItemChangedCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>

Bind a ICommand to a WPF tabcontrol/tabitem using XAML (MVVM)

I have a WPF 3.5 app built using MVVM pattern. I have a tabcontrol and I want to excecute an ICommand on the view model when the user clicks a certain tab (jn my case the "Preview" tab).
How do I hook up my ICommand to the tabitem or tabcontrol using just the XAML? I am using MVVM so I dont want to use events and get filthy, dirty code in the code-behind.
I think Im missing something simple here!
Thanks,P
Please refer this article : hooking up commands to events
Or you can use this approach
You should use InvokeCommandAction, Looks like this:
<TabItem Header="TabItem">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<i:InvokeCommandAction Command="SomeCommand"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Grid />
</TabItem>
Be sure to include the xmlns in the top:
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
and of course to reference System.Windows.Interactivity (new in WPF4)

OnmouseOver on hyperlink showing image in mvvm mvvm light wpf

I want to use hyperlink in wpf xaml. Whenever mouse comes over the hyperlink, it should show image related to that hyperlink and when mouse gets away the image should disappear. How to go about this using bindings. I am using mvvm light.
Kindly Suggest.
Thanks
The basic framework of what you will need, if you want to accomplish this in an MVVM style is...
You will need to start by setting up a Behavior to Command the Hyperlinks MouseEnter MouseLeave events.
<Hyperlink NavigateUri="Uri">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<Command:EventToCommand Command="HoverCommand" PassEventArgs="True" />
</i:EventTrigger>
<i:Interaction.Triggers>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeave">
<Command:EventToCommand Command="HoverCommand" PassEventArgs="True" />
</i:EventTrigger>
<i:Interaction.Triggers>
Link text.
</Hyperlink>
Now setup a control that will hover when the its DataContext is not null
Use the command to set the controls DataContext on hover to the Uri of the image, on Leave set the datacontext to null.

Resources