WPFによるコマンドデータバインディングの書き方について

Question

こんにちは。
プロジェクトはModel、View、ViewModelの3つで構成されており、ViewModelがModelのインスタンスを保持してViewに公開しています。
その上で質問です。

View:

<Window x:Class="TestWpf.MainWindow"
		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:TestWpf"
		mc:Ignorable="d"
		Title="MainWindow" Height="350" Width="525">
	<Window.DataContext>
		<local:ViewModel/>
	</Window.DataContext>
	<Grid DataContext="{Binding M}">
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="0.5*"></ColumnDefinition>
			<ColumnDefinition Width="0.5*"></ColumnDefinition>
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="0.5*"></RowDefinition>
			<RowDefinition Height="0.5*"></RowDefinition>
		</Grid.RowDefinitions>
		<Grid Row="0" Column="0">
			<TextBlock Text="{Binding Name}"></TextBlock>
		</Grid>
		<Grid Row ="0" Column="1">
			<TextBlock Text="{Binding Name}"></TextBlock>
		</Grid>
		<Grid Row="1" Column="0">
			<TextBlock Text="{Binding Name}"></TextBlock>
		</Grid>
		<Grid Row="1" Column="1">
			<!-- コマンドを追加したい -->
		</Grid>
	</Grid>
</Window>

ViewModel:

	class ViewModel:INotifyPropertyChanged {
		public event PropertyChangedEventHandler PropertyChanged;

		private ICommand Command {
			get;
			set;
		}
		private Model _m;

		public Model M {
			get {
				return this._m;
			}
			set {
				this._m = value;
				OnPropertyChanged("M");
			}
		}

		public ViewModel() {
			this.M = new Model();
			this.M.Name = "nana";
			this.Command = new RoutedUICommand();
		}


		private void OnPropertyChanged( string name ) {
			var handler = this.PropertyChanged;
			handler?.Invoke( this, new PropertyChangedEventArgs( name ) );
		}
	}

Model:

	class Model :INotifyPropertyChanged {
		public event PropertyChangedEventHandler PropertyChanged;

		private string _name;

		public string Name {
			get {
				return this._name;
			}
			set {
				this._name = value;
				OnPropertyChanged("Name");
			}
		}


		private void OnPropertyChanged( string name ) {
			var handler = this.PropertyChanged;
			handler?.Invoke( this, new PropertyChangedEventArgs( name ) );
		}
	}

Viewは上記のような田の字に区画がわかれており、それを包括するGridでデータコンテキストにModelのインスタンスを設定しています。
そのうち田の字の一区画に

<Button Content="改名" Command="{Binding Command}"></Button>

のようなボタンを設置し、コマンドをBindingしたいと考えています。
ここで問題になるのが、12行目のDataContextの設定です。

<Grid DataContext="{Binding M}">

これのおかげでViewModel直下のプロパティであるCommandをBindingすることが出来ません。

この場合、それぞれの田の字の区画を構成するGrid一つ一つのDataContextにModelをBindingするべきなのでしょか。
出来ることなら他の全てのコントロールのBindingはModel下のプロパティに対するものなので、外側のGridでDataContext={Binding M}をしてしまい、ボタンのBindingのみ例外というような記述にしたいのですが、それは可能なのでしょうか。

それとも、MVVMやBindingの考え方から間違っているのでしょうか。
御指南御指摘よろしくお願いいたします。

Answer 1

RelativeSourceで、祖先を検索して、そのDataContextを使用するという事が可能です。

ex) Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.Command}"

MainWindow.xaml (Windowタグ内部のみ)

<Window.DataContext>
    <local:ViewModel/>
</Window.DataContext>
<Grid DataContext="{Binding M}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="0" Grid.Column="0"><TextBlock Text="{Binding Name}"></TextBlock></Grid>
    <Grid Grid.Row="1" Grid.Column="0"><TextBlock Text="{Binding Name}"></TextBlock></Grid>
    <Grid Grid.Row="0" Grid.Column="1"><TextBlock Text="{Binding Name}"></TextBlock></Grid>
    <Grid Grid.Row="1" Grid.Column="1">
        <Button Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.Command}"></Button>
    </Grid>
</Grid>

MainWindow.xaml.cs

namespace tt46441_WPF_AncestorCommand {
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
    }

    public class ViewModel {
        public ViewModel (){
            this.Command = new HelloWorldCommand();
            this.M = new ModelData { Name = "TeraTail" };
        }

        public ICommand Command { get; set; }

        class HelloWorldCommand : ICommand {
            public event EventHandler CanExecuteChanged;

            public bool CanExecute(object parameter) {
                return true;
            }
            public void Execute(object parameter) {
                MessageBox.Show("Hello, World");
            }
        }

        public class ModelData {
            private string name = "";
            public string Name { get { return name; } set { name = value; } }
        }
        public ModelData M { get; set; }
    }
}

Comments

[nanase]

ありがとうございます。まさに知りたかったことです。

Answer 2

<Grid DataContext="{Binding M}">
<!-- 省略 -->
    <Grid Row="0" Column="0">
        <TextBlock Text="{Binding Name}"></TextBlock>
    </Grid>
<!-- 省略 -->
    <Grid Row="1" Column="1">
        <!-- コマンドを追加したい -->
    </Grid>
</Grid>

と書いているところを、

<Grid>
<!-- 省略 -->
    <Grid Row="0" Column="0">
        <TextBlock Text="{Binding M.Name}"></TextBlock>
    </Grid>
<!-- 省略 -->
    <Grid Row="1" Column="1">
        <Button Content="改名" Command="{Binding Command}"></Button>
    </Grid>
</Grid>

と書くのはいかがでしょうか？