Как связать команду для перемещения между страницами?

Question

Я учусь навигации с MVVM, как показано здесь:

Navigation with MVVM

В этом учебнике, связывание команды для кнопки реализуется управления с помощью ItemsControl так:

<Window.Resources> 
    <DataTemplate DataType="{x:Type local:HomeViewModel}"> 
     <local:HomeView /> 
    </DataTemplate> 
    <DataTemplate DataType="{x:Type local:ProductsViewModel}"> 
     <local:ProductsView /> 
    </DataTemplate> 
</Window.Resources> 

<DockPanel> 
    <Border DockPanel.Dock="Left" BorderBrush="Black" BorderThickness="0,0,1,0"> 
     <ItemsControl ItemsSource="{Binding PageViewModels}"> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <Button Content="{Binding Name}" 
          Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" 
          CommandParameter="{Binding }" 
          Margin="2,5"/> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
     </ItemsControl> 
    </Border> 

    <ContentControl Content="{Binding CurrentPageViewModel}" /> 
</DockPanel> 

Если я правильно ее понимаю, он выполняет итерацию через сборку PageViewModels и связывает команду кнопки для каждой VIewModel. Этот пример отлично работает, и я могу без проблем переключаться между страницами.

Однако я не хочу создавать кнопки итеративно. Я хочу иметь две кнопки внутри сетки с той же командой, которая переключает представления, как в примере выше. Что-то вроде этого:

<Window.Resources> 
    <DataTemplate DataType="{x:Type local:HomeViewModel}"> 
     <local:HomeView /> 
    </DataTemplate> 
    <DataTemplate DataType="{x:Type local:ProductsViewModel}"> 
     <local:ProductsView /> 
    </DataTemplate> 
</Window.Resources> 

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="5*"/> 
    </Grid.ColumnDefinitions> 

    <Button Grid.Column="0" 
     Content="{Binding HomeView.Name}" 
     Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" 
     CommandParameter="{Binding }"/> 

    <Button Grid.Column="1" 
     Content="{Binding ProductsView.Name}" 
     Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" 
     CommandParameter="{Binding }"/> 
</Grid> 

Но это не работает, как я ожидал. Я могу связать имена View, но не Command. Нажатие кнопок ничего не делает. DataContext установлен в экземпляр моего ApplicationViewModel. Что может быть проблемой здесь?

Answer 1

Проблема в CommandParameter="{Binding }", в первом примере это привязка указывает на ItemsSource="{Binding PageViewModels}". Во втором примере эта часть отсутствует, поэтому привязка не выполняется.

EDIT >>>>

Для уточнения, необходимо связать параметр команды к инстанциирован ViewModel в вашем DataContext.

ViewModel:

public IPageViewModel homeViewModel{get; set;} 
public IPageViewModel productsViewModel{get; set;} 

... 

IPageViewModel homeViewModel = new HomeViewModel(); 
IPageViewModel productsViewModel = new ProductsViewModel(); 

Вид:

CommandParameter="{Binding DataContext.homeViewModel, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" 

Я не имею редактор кода прямо сейчас, но надеюсь, что это помогает.