XAML デザイナーで ViewModel のメンバを Intellisense 候補とする

(2017/04/26 7:52:28 created.)

(2017/05/24 15:51:20 modified.)

Visual Studio の Intellisense 機能によって、コーディングするときに候補が表示されたり、入力を省略できたりするようになり、非常に便利になってきています。しかし、XAML コードを編集する場合、データバインディングなどで ViewModel のクラスのメンバを入力することがありますが、この場合、Intellisense 機能による候補に独自のクラスが含まれないため、Intellisense の恩恵を受けることができません。

そこで、XAML コードに次のようなコードを追加することで、Intellisense 機能に ViewModel のメンバが含まれるようになります。

MainViewModel.cs

```
namespace Tips_XamlDesigner.ViewModels
```
```
{
```
```
    using Tips_XamlDesigner.Models;
```
```
 
```

    public class MainViewModel : NotificationObject

```
    {
```

        private Person _person = new Person() { Name = "田中太郎" };

```
        /// <summary>
```

        /// 人物データを取得または設定します。

```
        /// </summary>
```
```
        public Person Person
```
```
        {
```

            get { return this._person; }

            set { SetProperty(ref this._person, value); }

```
        }
```
```
    }
```
```
}
```

MainView.xaml

<Window x:Class="Tips_XamlDesigner.Views.MainView"

        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:vm="clr-namespace:Tips_XamlDesigner.ViewModels;assembly=Tips_XamlDesigner"

        d:DataContext="{d:DesignInstance {x:Type vm:MainViewModel}}"

```
        mc:Ignorable="d"
```

        Title="MainView" Height="300" Width="300">

```
    <StackPanel>
```

        <TextBlock Text="{Binding Person.Name}" />

```
        <TextBlock Text="test" />
```
```
    </StackPanel>
```
```
</Window>
```

デザインモード時に関する設定を名前空間のエイリアス d で設定できるようにしています。エイリアス d を使用してデザインモード時の DataContext に MainViewModel を指定しています。また、エイリアス d による設定は実際に実行する場合には関係のない設定のため、名前空間のエイリアス mc によって、エイリアス d による設定は無視するように mc:Ignorable に d を設定しています。

こうすることで、XAML コードを編集するとき、MainViewModel クラスのメンバも Intellisense 機能の候補に含まれるようになります。例えば、11 行目で Person プロパティを入力するとき、"Binding " まで入力するといくつか入力候補が表示されますが、その中に "Person" が含まれるようになります。

ところで、ここでは XAML コードに mc や d などのエイリアスを手入力しましたが、Visual Studio の GUI 上から自動的に挿入することもできます。

XAML デザイナー上でルート要素のウィンドウを選択した状態で、「書式」メニューの「デザイン時の DataContext の設定(D)…」という項目を選択します。

すると、次のようなダイアログが表示されるため、DataContext の型として DesignInstance を選択し、設定したい ViewModel のクラスをツリーから選択して「OK」ボタンを押します。