MVVMコードビハインドまたはビューモデルを使用してビューを操作する

Question

MVVMを使用してアプリケーションをコーディングしていますが、コードビハインドを使用してViewを操作する必要がある場合は質問があります。私がしたいことは、ユーザーがボタンをクリックすると、隠しビューが滑り落ちることです。現時点で私はビューモデルでこれをやっています。ここに私のコードは次のとおりです。

これは私のビューです：

<Window.DataContext> 
     <ViewModels:MainWindowViewModel/> 
    </Window.DataContext> 
    <Window.Resources> 
    <Style x:Key="DockPanelStyle" TargetType="{x:Type DockPanel}" > 
     <Setter Property="OverridesDefaultStyle" Value="true"/> 
     <Setter Property="Background" Value="AliceBlue"/> 
     <Style.Triggers> 
      <DataTrigger 
         Binding="{Binding showView}" 
         Value="true"> 
       <DataTrigger.EnterActions> 
        <BeginStoryboard> 
         <Storyboard> 
          <ThicknessAnimation 
               Storyboard.TargetProperty="Margin" 
               To="0,0,0,0" 
               AccelerationRatio=".25" 
               DecelerationRatio=".25" 
               Duration="0:0:0.5" 
               /> 
         </Storyboard> 
        </BeginStoryboard> 
       </DataTrigger.EnterActions> 
       <DataTrigger.ExitActions> 
        <BeginStoryboard> 
         <Storyboard> 
          <ThicknessAnimation 
               Storyboard.TargetProperty="Margin" 
               To="0,0,-400,0" 
               DecelerationRatio=".25" 
               AccelerationRatio=".25" 
               Duration="0:0:0.5" 
               /> 
         </Storyboard> 
        </BeginStoryboard> 
       </DataTrigger.ExitActions> 
      </DataTrigger> 
     </Style.Triggers> 
    </Style> 
    </Window.Resources> 

    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*"/> 
      <ColumnDefinition Width="Auto"/> 
     </Grid.ColumnDefinitions> 
     <StackPanel 
      Grid.Column="0"> 
      <Label Content="Main view" HorizontalAlignment="Center" FontSize="42"/> 
      <Button Command="{Binding SlideOutCommand}" Content="Show view" FontSize="42"/> 
     </StackPanel> 
     <DockPanel 
      Grid.Column="1" 
      Margin="0,0,-400,0" 
      Style="{StaticResource DockPanelStyle}"> 
      <Label Content="Sliding view" HorizontalAlignment="Center" FontSize="42"/> 
     </DockPanel> 
    </Grid> 
</Window> 

コードビハインド空れます。 これは私のViewModelです：

public class MainWindowViewModel : INotifyPropertyChanged 
    {  
     public MainWindowViewModel() 
     { 
      showView = false; 
     } 

     public ICommand SlideOutCommand 
     { 
      get { return new ActionCommand(action => ShowView()); } 
     } 

     private void ShowView() 
     { 
      showView = true; 
      //Do some extra logic 
     } 

     private bool _showView; 
     public bool showView 
     { 
      get { return _showView; } 
      set 
      { 
       _showView = value; 
       OnPropertyChanged(); 
      } 
     } 

     public event PropertyChangedEventHandler PropertyChanged; 
     virtual protected void OnPropertyChanged([CallerMemberName]string propName = "") 
     { 
      PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName)); 
     } 


    } 

または私はこのようなソリューションで行く必要があります。

ビュー：

<Window.DataContext> 
     <ViewModels:MainWindowViewModel/> 
    </Window.DataContext> 
    <Window.Resources> 
    <Style x:Key="DockPanelStyle" TargetType="{x:Type DockPanel}" > 
     <Setter Property="OverridesDefaultStyle" Value="true"/> 
     <Setter Property="Background" Value="AliceBlue"/> 
     <Style.Triggers> 
      <DataTrigger 
         Binding="{Binding Path=Tag, RelativeSource={RelativeSource Self}}" 
         Value="true"> 
       <DataTrigger.EnterActions> 
        <BeginStoryboard> 
         <Storyboard> 
          <ThicknessAnimation 
               Storyboard.TargetProperty="Margin" 
               To="0,0,0,0" 
               AccelerationRatio=".25" 
               DecelerationRatio=".25" 
               Duration="0:0:0.5" 
               /> 
         </Storyboard> 
        </BeginStoryboard> 
       </DataTrigger.EnterActions> 
       <DataTrigger.ExitActions> 
        <BeginStoryboard> 
         <Storyboard> 
          <ThicknessAnimation 
               Storyboard.TargetProperty="Margin" 
               To="0,0,-400,0" 
               DecelerationRatio=".25" 
               AccelerationRatio=".25" 
               Duration="0:0:0.5" 
               /> 
         </Storyboard> 
        </BeginStoryboard> 
       </DataTrigger.ExitActions> 
      </DataTrigger> 
     </Style.Triggers> 
    </Style> 
    </Window.Resources> 

    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*"/> 
      <ColumnDefinition Width="Auto"/> 
     </Grid.ColumnDefinitions> 
     <StackPanel 
      Grid.Column="0"> 
      <Label Content="Main view" HorizontalAlignment="Center" FontSize="42"/> 
      <Button Command="{Binding SlideOutCommand}" Content="Show view" FontSize="42" Click="Button_Click"/> 
     </StackPanel> 
     <DockPanel 
      x:Name="SlideView" 
      Grid.Column="1" 
      Margin="0,0,-400,0" 
      Style="{StaticResource DockPanelStyle}" 
      Tag="{Binding Path=showView,RelativeSource={RelativeSource AncestorType=Window}}"> 
      <Label Content="Sliding view" HorizontalAlignment="Center" FontSize="42"/> 
     </DockPanel> 
    </Grid> 
</Window> 

コードビハインド：

public partial class MainWindowView : Window, INotifyPropertyChanged 
    { 
     public MainWindowView() 
     { 
      InitializeComponent(); 
      showView = false; 
     } 

     private void Button_Click(object sender, RoutedEventArgs e) 
     { 
      showView = true; 
     } 

     private bool _showView; 
     public bool showView 
     { 
      get { return _showView; } 
      set 
      { 
       _showView = value; 
       OnPropertyChanged(); 
      } 
     } 


     public event PropertyChangedEventHandler PropertyChanged; 
     virtual protected void OnPropertyChanged([CallerMemberName]string propName = "") 
     { 
      PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName)); 
     } 
    } 

とのViewModel：

public class MainWindowViewModel : INotifyPropertyChanged 
    { 

     public MainWindowViewModel() 
     { 
     } 

     public ICommand SlideOutCommand 
     { 
      get { return new ActionCommand(action => ShowView()); } 
     } 

     private void ShowView() 
     { 
      //Do some extra logic 
     } 


     public event PropertyChangedEventHandler PropertyChanged; 
     virtual protected void OnPropertyChanged([CallerMemberName]string propName = "") 
     { 
      PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName)); 
     } 


    } 

MVVMパターンではどのようなアプローチが適していますか？

Answer 1

ViewModelはモデルとビューとのやり取りをしてくれますが、私はそれらの1つではありません。

あなたがしなければならないことは、純粋に化粧品であり、どのモデルデータにも依存しない場合は、ビューとそのコードビハインドでのみ扱うべきだと言います。

このような種類のビューのみのデータをビューモデルに入れておくと、ビューが少し洗練されていればかなり恐ろしくなることがあります。これは、私にとっては、ちょっと、すべてのレイヤーを分離し、すべてをできるだけきれいに保つという点を打ち負かしています。

Answer 2

私にとって、ViewModelはデータに接続されたロジックを処理する必要があります。たとえば ：ここ

public class OrderViewModel 
{ 
    /* 
    Other fields and properties 
    */ 

    public decimal Total 
    { 
     get 
     { 
     return this.Price * this.Quantity; 
     } 
    } 
} 

ViewModelには、注文の合計金額を計算するためのロジックが含まれています。しかし、どのような視覚的表現もここにはないはずです。 データの視覚的表現は、ビューにあり、どこにもありません。