MVVMを使用してボタンをクリックしたときのフレームコンテンツを設定します

Question

MVVMパターンを初めて使用しましたが、その一部を理解しています。私が現在持っている問題は、MVVMパターンを使用して、ボタンが押されたときにページを開きたいということです。 6つのボタンのうちの1つが押されると、押されたボタンの名前をコマンドから得ることができます。私の問題は、ボタンを押したときにフレームの内容を設定する方法がわからないことです。

<StackPanel> 
     <Button Content="Page 1" x:Name="Page1" 
       Command="{Binding SimpleCommand, Source={StaticResource ViewModelBase}}" 
       CommandParameter="{Binding Name, ElementName=Page1}"/> 
     <Button Content="Page 2" x:Name="Page2" 
       Command="{Binding SimpleCommand, Source={StaticResource ViewModelBase}}" 
       CommandParameter="{Binding Name, ElementName=Page2}"/> 
    </StackPanel> 

上記は現在XAMLコードです。単純なコマンドは、ボタンの名前を書き出すだけです。

<Frame x:Name="MainFrame" Grid.Column="1" Grid.Row="1" 
      Content="{Binding Name, Converter={StaticResource Converter}, ElementName=Page1}" 
      NavigationUIVisibility="Hidden"/> 

上記の内容を変更したいフレームがあります。コンパイル時には、開くべきページを設定することができます。実行時にコンテンツを設定したいのですが、ボタン名を使用します。 コンバータはIValueConverterで、表示するページを設定します。

Answer 1

私がこれにアプローチした方法は、フレームを使用するのではなく、ContentPresenterを使用していました。 Frameの中にいつでもContentPresenterを挿入することができます。 FrameはDataContextを継承しないので、使用しないでください。
ビューの開始点にはBaseViewModelを作成してみましょう。この時点で

public class MainViewModel : BaseViewModel 
{ 
    private BaseViewModel selectedViewModle; 

    public BaseViewModel SelectedViewModel 
    { 
     get { return selectedViewModle; } 
     set { selectedViewModle = value; OnPropertyChanged(nameof(SelectedViewModel)); } 
    } 
} 

当社MainViewModelこれは私達が私達のナビゲーションのために使用しようとしているものですSelectedViewModelと性質を持っています

public class BaseViewModel : INotifyPropertyChanged 
{ 
    public event PropertyChangedEventHandler PropertyChanged; 

    protected virtual void OnPropertyChanged(string propertyName = null) 
    { 
     PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); 
    } 
} 

は、今、私たちが持っているベースはのはMainViewModelを作成してみましょう。
仮定
私はあなたがコマンドに関する実践的な知識とそれらの使い方を持っていると仮定しています。ここで
は、あなたの移動commandする方法のコード例です：

void navigate(object parameter) 
{ 
    SelectedViewModel = new DetailsViewModel(); 
} 

そして、ここではDetailsViewModelのコードです：

public class DetailsViewModel : BaseViewModel 
{ 
    //your code with properties and methods here 
} 

---

今度は、ビューを設定しましょう：

<UserControl ...> 
    <Grid> 
     <ContentPresenter Content="{Binding .}"/> 
    </Grid> 
</UserControl> 

UserControlのリソースタグあなたが画面上にあなたのために提示されたデータ・テンプレートの内容を持つことになります。この時点で、

<DataTemplate DataType="{x:Type vm:DetailsViewModel}"> 
    <Grid .../> 
</DataTemplate> 

：DataTemplateが含まれます。