How to programmatically navigate to screen after validation on click

Question

I have inherited a Sketchflow-prototyped WPF application. I am in the process of adding functionality to the UI.

As it currently is, navigation from screen to screen is defined in XAML as an event as follows:

<i:Interaction.Triggers>
    <i:EventTrigger EventName="Click">
    <pi:NavigateToScreenAction TargetScreen="WpfPrototype1Screens.Screen_1_2"/>
    </i:EventTrigger>
</i:Interaction.Triggers>

This works, but the problem is that it doesn't allow me to validate user input before navigating to the new screen.

What I would like to know, is how can I programmatically navigate to the new screen from within the button's click event handler in C#?

For instance:

private void Button1_Click_1(object sender, RoutedEventArgs e)
{
    if (userInputValid)
    {
        NavigateToScreen_1_2();
    }
}

Jordy van Eijk · Accepted Answer · 2013-04-29T09:16:15.990

This strongly depends on how your next screen is used. If it is a UserControl (View) that is inserted in another part of the application lets say an ContentControl then you can just change the content of the Content control to your new screen.

Take a look at Commands in WPF in combination with MVVM. This can help you with your problem. Instead of having an OnClick event you define an execute function inside your Views ViewModel and have a public property which you can bind to your buttons Command property

like this.

Have a simple class:

public class MainViewModel
{
    public MainViewModel()
    {
        NextViewCommand = new DelegateCommand(NextView);
    }

    public ICommand NextViewCommand {get;set;}
    public UserControl NewView {get;set;}

    public void NextView()
    {
         NewView = new UserControl() //set your NewView property to your new usercontrol 
         //Apply validation on all your binded properties you want to validate.
    }
}

DelegateCommands

Wire up the ViewModel to your View using:

this.DataContext = new MainViewModel();

And connect your command to your button using:

<Button content="Next view" Command="{Binding NextViewCommand}"/>

I think this is the best way to go, and helps you.

How to programmatically navigate to screen after validation on click

1 Answers1