Windows Phone Caliburn Micro HyperLink click event - c#

I am using Caliburn Micro for a Windows Phone app. I have a hyperlink control for which I want to bind the click event to my View Model. Below is the sample code
XAML, MyPage.xaml
<TextBlock>
<Run>Got to</Run>
<Hyperlink micro:Message.Attach="[Event Click] = [Action OpenAnotherPage]">
My Page</Hyperlink><Run Text="."></Run></TextBlock>
ViewModel MyPageViewModel.cs
public void OpenAnotherPage()
{
// some code
}
When I tap on the link, I get an exception
System.Exception: No target found for method
What could be the problem?
Update 1: Tried setting micro:Action.TargetWithoutContext="{Binding ElementName=MyPage, Path=DataContext}" on the Hyperlink control, but it didn't work

Give the TextBlock a name and use that as the ElementName since you have the Hyperlink nested into that control. Then Update1 should work.

Try following XAML (untested):
<Hyperlink>My Page
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ec:CallMethodAction TargetObject="{Binding}" MethodName="OpenAnotherPage" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Hyperlink>
The namespaces are following (you'll need to reference those 2 assemblies, they're by Microsoft and shipped with MS Expression Blend)
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:ec="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"

Related

WPF + Caliburn Micro: how to catch Window Close event?

I am new in Caliburn Micro and learn it from this helloworld example. In the example there are only 2 views (.xaml) of type Application and UserControl, and 1 view model.
I avoid to use code behind. Therefore I have only view and view model. I want to know how to catch the window close event of my helloworld application so I can handle it in view model. My target: when user is going to close the app by pressing close [x] button on top-right corner the app gives feedback to the user.
I have read about IViewAware and IScreen, but I find no specific example related to my question.
A simple sample code for view and view model are highly appreciated. Thanks in advance.
PS. I use VS2013, C#.
What you can do is in your View you can attach Caliburn Micro by using
cal:Message.Attach="[Event Closing] = [Action OnClose($eventArgs)]"
So it will look like
<Window cal:Message.Attach="[Event Closing] = [Action OnClose($eventArgs)]">
And on your ViewModel you can just define a public method that says OnClose with CancelEventArgs as the parameter and you can handle it from there.
If your ViewModel inherits Screen, Caliburn Micro has some methods that you can override like
protected override void OnDeactivate(bool close);
this is called when a screen is closed or deactivated or
public override void CanClose(Action<bool> callback)
you can check CanClose usage here
If you are using the BootstrapperBase class you can use:
protected override void OnExit(object sender, EventArgs e)
You're looking for a way to bind an Event to a Command. The typical approach here is to use the EventToCommand behavior from MVVMLight.
Example usage (from the linked article):
<StackPanel Background="Transparent">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<command:EventToCommand
Command="{Binding Main.NavigateToArticleCommand,
Mode=OneWay,
Source={StaticResource Locator}}"
CommandParameter="{Binding Mode=OneWay}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<!--...-->
</StackPanel>
For your specific scenario, you are not using MVVMLight. Since that framework is open-source, you could copy the implementation of EventToCommand into your own project, or - more simply - you can use the InvokeCommandAction, which is part of the System.Windows.Interactivity.dll library, included with Expression Blend.
Example of InvokeCommandAction:
<TextBox x:Name="TicketNumber">
<i:Interaction.Triggers>
<i:EventTrigger EventName="KeyDown">
<i:InvokeCommandAction Command="{Binding OpenTicketCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
Lastly, this entire MVVM dogma that you "can't have any code behind" has been shot down time | and | time again (that last link is particularly relevant). MVVM is supposed to be unit-testable, and separates the "View logic" from the "Business logic." The "Close" event is admittedly a bit of a gray area between View and Business logic. But, if you can write an event handler in your code behind, which invokes your ViewModel's appropriate method or command, and if you can unit test that code, then you're as good as gold. Don't worry about removing all traces of code-behind from your project.

Problems adding Blend behavior to DatePicker

I'm trying to add a Blend behavior to a DatePicker control to bind an MVVM-Light RelayCommand to the DateChanged event like so:
<DatePicker Date="{Binding SelectedDate, Mode=TwoWay}">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="DateChanged">
<Core:InvokeCommandAction Command="{Binding DateChangedCommand, Mode=OneWay}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</DatePicker>
I'm using the following definitions:
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
However, I keep getting the following error:
WinRT information: Cannot add instance of type
'Microsoft.Xaml.Interactions.Core.EventTriggerBehavior' to a collection of type
'Microsoft.Xaml.Interactivity.BehaviorCollection'.
I have successfully used Blend behaviors in this way many other times in my project (and with other controls in the same Xaml file) to bind an event to a command, and the DatePicker control is the only one that has thrown an error. Is there another way to accomplish this or are WinRT DatePickers limited in this way?

Binding in page navigation

I have another question with windows phone 7 dev. I'm creating listbox with items and one textblock, which is something like link to another page. Each link will have another "page" variable value.
<TextBlock Tap="TextBlock_Tap" Foreground="#FF40AA2F" Text="View details">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<ec:NavigateToPageAction TargetPage="/details.xaml?page={Binding Index}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBlock>
But it doesn't work with current value in targetpage, because Visual Studio taking it like normal string. How can I embed this binding in page variable? Thank you
Try using StringFormat:
<ec:NavigateToPageAction TargetPage="{Binding Path=Index, StringFormat='/details.xaml?page={0}'}" />
Do the navigation, not on a trigger but in the code behind of the MouseLeftButtonDown event of the Text Block and extract the target page from the current selection of the listbox.

Similar EventToCommand (behavior's) on Android

Does exist a similar EventToCommand (behavior's) on Android?
Example Silverlight/WPF:
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<Commanding:EventToCommand Command="{Binding DataContext.EditEventTypeCommand,
RelativeSource={RelativeSource AncestorType=telerik:RadGridView}}"
CommandParameter="{Binding}"
PassEventArgsToCommand="True" />
</i:EventTrigger>
</i:Interaction.Triggers>
If you are using mvvmcross, then bindings exist for all events which have EventHandler signatures - so you can just use bindings like:
'Click':{'Path':'MyViewModelCommand'}
There are plenty of examples of this in the samples, plus there are several questions oh here - search for MvvmCross and click.
If you need to bind to an event which has an EventHandler<T> signature then you can add this yourself - see mvvmcross touch command binding in android
I'm not sure I have understood your question (I don't know Silverlight) but you can do as follows:
In your XML:
<Button ...
android:onClick="onMyButtonClicked".../>
In your java file
public void onMyButtonClicked(View sender) { ... }
There are no other ways to specify event handlers in Android XML, I think. You can specify a lot of properties though.

How would you know which element of an ItemsControl sends an event in MVVM?

Let's say I currently have an ItemsControl whose DataTemplate is a bunch of buttons. I'm wiring up these buttons' click events, but how am I to know which button was clicked? Should I not use a ItemsControl?
I'm trying to have no code-behind, but being pragmatic may be necessary.
<ItemsControl>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Margin="10">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding ItemsControlButtonClicked, Mode=OneWay}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
If you want to know what Item was clicked, then pass {Binding } as the CommandParameter and it will pass the selected object to your Command
If you want to know what Button was clicked, I would do that in the code-behind since ViewModels do not need to know anything about the UI, and that includes buttons.
Also since your control is a Button, you should use the Command property instead of a Click trigger.
<Button Command="{Binding ItemsControlButtonClicked}" />
You can send parameters along with the command and based on these parameters you can find out which button was clicked
In my project I also use the MVVM Light I has an dropdown with collection of items, and a button which user press and action depend on selected item from drop down
you should create a Relay command with parameter look at the example from my code
public RelayCommand<Project> StartTimer { get; private set; }//declare command
StartTimer = new RelayCommand<Project>(OnStartTimer);
private void OnStartTimer(Project project)
{
if (project != null)
{
currentProject = project;
if (!timer.IsTimerStopped)
{
timer.StopTimer();
}
else
{
Caption = "Stop";
timer.StartTimer();
}
}
on the view I bind the drop down with collection of class Project
and for button command parameter I bind the selected item form drop down
look at the code
<ComboBox Name="projectcomboBox" ItemsSource="{Binding Path=Projects}" IsSynchronizedWithCurrentItem="True" DisplayMemberPath="FullName"
SelectedValuePath="Name" SelectedIndex="0" >
</ComboBox>
<Button Name="timerButton" Content="{Binding Path=Caption}" Command="{Binding Path=StartTimer}"
CommandParameter="{Binding ElementName=projectcomboBox, Path=SelectedItem}" ></Button>
pay attention to Command and CommandParameter binding
also you can use this approache not only for drop down
Well, you can use the Sender.DataContext which is the actual data.
Create command properties in your view model class (using Josh Smith's RelayCommand pattern is the simplest way to do this) and bind each button's Command to the appropriate one. Not only is this straightforward to do and simple to maintain, it also gives you an easy way of implementing the enable/disable behavior when you need to.

Categories

Resources