Swiching the Stackpanel in single ViewModel Using Back/Next Button WPF - wpf

Question

I have a WPF, with Form with multiple user required questions. I have created 2 Stackpanels which have similar layout, first form (Stackpanel) will let the user to fill up information.While second form (Stackpanel) would be preview form for the user before he submits.
XAML Code
<Window x:Class="NinjaLIB.View.SSOEMWarrantyButtonExtension"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:NinjaLIB.View"
xmlns:lex="http://wpflocalizeextension.codeplex.com"
lex:LocalizeDictionary.DesignCulture="en"
lex:ResxLocalizationProvider.DefaultAssembly="NinjaLIB"
lex:ResxLocalizationProvider.DefaultDictionary="Resources"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
DataContext="{Binding Path=RMAView, Source={StaticResource Locator}}"
mc:Ignorable="d"
Title="Request RMA" Height="600" Width="1000"
xmlns:mvvmlight="http://www.galasoft.ch/mvvmlight"
xmlns:converter="clr-namespace:NinjaLIB.Converter"
WindowStartupLocation="CenterScreen" ResizeMode="NoResize">
<i:Interaction.Triggers>
<!--<i:EventTrigger EventName="Closed">
<mvvmlight:EventToCommand Command="{Binding GetRMAWindowClosed}" PassEventArgsToCommand="True" />
</i:EventTrigger>-->
<!--<i:EventTrigger EventName="Loaded">
<mvvmlight:EventToCommand Command="{Binding GetWarrantyWindowLoaded}" PassEventArgsToCommand="True" />
</i:EventTrigger>-->
</i:Interaction.Triggers>
<Grid Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!--Some QUestions asked to the User-->
<Grid Grid.Row="2">
<!--View Form Fill-->
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<StackPanel Orientation="Vertical">
<StackPanel.Style>
<Style TargetType="StackPanel">
<Setter Property="Visibility" Value="Visible"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ViewState}" Value="FormFillViewState">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
**<!--Some QUestions asked to the User-->**
</StackPanel >
</ScrollViewer>
**<!--View Preview Form-->**
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<StackPanel>
<StackPanel.Style>
<Style TargetType="StackPanel">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ViewState}" Value = "PreviewFillState" >
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</StackPanel.Style>
**<!--Some QUestions asked to the User-->**
</StackPanel>
</ScrollViewer>
</Grid>
<Grid Grid.Row="3">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!--Buttons-->
<Button Grid.Row="0" Content="Next"
IsEnabled="{Binding IsConnected}"
Command="{Binding NextCommandBtn}"
FontWeight="Normal"
HorizontalContentAlignment="Center"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Height="30"
Width="80"
Margin="780,0,0,2"
Padding="3,0"/>
<Button Grid.Row="0" Content="Back"
IsEnabled="{Binding IsConnected}"
Command="{Binding BackCommandBtn}"
FontWeight="Normal"
HorizontalContentAlignment="Center"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Height="30"
Width="80"
Margin="420,0,0,2"
Padding="3,0"/>
</Window>
==============
View Model Section Code
==============
private RMAViewModel RMAView;
private readonly ResourceManager rm;
public RMAViewModel()
{
rm = new ResourceManager("NinjaLIB.Properties.Resources", Assembly.GetExecutingAssembly());
}
//Properties for the Window (Date and Text) for FormFillViewState
//Properties for the Window (Date and Text) for PreviewFillState
==============
I wanted some help with view Model code, where if I click NextCommandBtn all the data will appear as filled up form from first stackpanel view and when I select BackCommandBtn i can edit the form.

Answer 1

You can think about it like this:
You have two views (StackPanels) and only one can be displayed at a time.
So in your view-model, you need a property that tells you which view is active. A simple bool property for each view would work. Since there are only two views, you could technically just use a single property, but using two will make your XAML data binding a little easier.
Examples:
IsFormActive
IsPreviewActive
In your XAML, you need to control the Visibility property of your two StackPanel controls based on your IsFormActive and IsPreviewActive properties in your view-model. You can do this with a value converter, specifically the BooleanToVisibilityConverter.
<StackPanel Visibility="{Binding IsFormActive,
Converter={StaticResource BooleanToVisibilityConverter}">
...
</StackPanel>
<StackPanel Visibility="{Binding IsPreviewActive,
Converter={StaticResource BooleanToVisibilityConverter}">
...
</StackPanel>
And back in your view-model you can control the state of IsFormActive and IsPreviewActive when the next and back buttons are clicked, etc.
I hope this helps you get an idea of how to proceed.