wpf xaml page navigation without code behind - wpf

Question

I am designing a prototype and want to navigate between pages in a wpf application.
Currently I am using code behind by handling events f.e.
private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
Page2 page = new Page2();
this.NavigationService.Navigate(page);
}
This works, but it is unpleasant if you think of using MVVM later.
Is there a way to do this directly in xaml considering using a buttons click event?

Answer 1

Below code will show Page1 and Page2 in the Frame upon clicking the buttons.
It also shows Page2 on startup in the Frame.
Change namespace name in the Source of Frame below.
<Frame x:Name="frame" Content="Frame" Margin="80,80,144,122" Source="/WpfNavigation;component/Page2.xaml"/>
<Button x:Name="button" Content="Page1" HorizontalAlignment="Left" Margin="80,40,0,0" VerticalAlignment="Top" Width="75" Background="#FFF9F9F9">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:ChangePropertyAction PropertyName="Source" TargetObject="{Binding ElementName=frame}">
<ei:ChangePropertyAction.Value>
<System:Uri>Page1.xaml</System:Uri>
</ei:ChangePropertyAction.Value>
</ei:ChangePropertyAction>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<Button x:Name="button1" Content="Page2" HorizontalAlignment="Left" Margin="192,40,0,0" VerticalAlignment="Top" Width="75">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:ChangePropertyAction TargetObject="{Binding ElementName=frame}" PropertyName="Source">
<ei:ChangePropertyAction.Value>
<System:Uri>Page2.xaml</System:Uri>
</ei:ChangePropertyAction.Value>
</ei:ChangePropertyAction>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
To use Blend assemblies :
Add reference to System.Windows.Interactivity and Microsoft.Expression.Interactions and following namespaces :
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
If we want to navigate using Button present in the Page itself, then we can do that using Source property of NavigationService object of Page class.
Page1.xaml :
<Button Content="Go to page2">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:ChangePropertyAction PropertyName="Source" TargetObject="{Binding NavigationService, RelativeSource={RelativeSource AncestorType={x:Type Page}, Mode=FindAncestor}}">
<ei:ChangePropertyAction.Value>
<System:Uri>Page2.xaml</System:Uri>
</ei:ChangePropertyAction.Value>
</ei:ChangePropertyAction>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>

Answer 2

If you are using a button you can use a command binding. Your view model will have a property ICommand that does your navigate for you
<Button Command="{Binding Navigate}"/>