Переключение стековой панели в одной ViewModel с помощью кнопки «Назад / Далее» WPF

Question

У меня есть WPF с формой с несколькими вопросами, необходимыми пользователю. Я создал 2 панели стека, которые имеют похожий макет, первая форма (Stackpanel) позволит пользователю заполнить информацию. В то время как вторая форма (Stackpanel) будет формой предварительного просмотра для пользователя перед отправкой.

Код XAML

<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>

==============

Просмотреть код раздела модели

==============

приватный 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

======== ======

Мне нужна помощь с представлением кода модели, где, если я нажму NextCommandBtn , все данные будут отображаться в виде заполненной формы из первой панели стека просмотра и когда я выбираю BackCommandBtn я могу редактировать форму.

Answer 1

Вы можете думать об этом так:

У вас есть два представления (StackPanels), и только один может отображаться одновременно.

Так что в вашей модели представления вам нужен свойство, которое говорит вам, какой вид активен. Простое свойство bool для каждого представления будет работать. Поскольку существует только два представления, технически вы можете просто использовать одно свойство, но использование двух сделает привязку данных XAML немного проще.

Примеры:

• IsFormActive
• IsPreviewActive

В вашем XAML вам необходимо управлять свойством Visibility ваших двух StackPanel элементов управления на основе ваших свойств IsFormActive и IsPreviewActive в вашей модели представления. Вы можете сделать это с помощью преобразователя значений, в частности, BooleanToVisibilityConverter .

<StackPanel Visibility="{Binding IsFormActive, 
    Converter={StaticResource BooleanToVisibilityConverter}">
  ...
</StackPanel>

<StackPanel Visibility="{Binding IsPreviewActive, 
    Converter={StaticResource BooleanToVisibilityConverter}">
  ...
</StackPanel>

. И обратно в вашей модели представления вы можете управлять состоянием IsFormActive и IsPreviewActive, когда кнопки «Далее» и «Назад» и т. д. c.

Надеюсь, это поможет вам понять, как действовать.