22
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

XAMLデザイナ専用ViewModelコンストラクタの作り方

Last updated at Posted at 2017-04-19

#概要
XAMLデザイナでデザイナ用インスタンスを指定すると、実行時の結果が表示されるので、デザイン作業が捗ります。
しかし、デザイン用インスタンスには制限があるので、実際に使用するViewModelは使えないことがあります。
そこでデザイナ専用のViewModelコンストラクタを別途作ります。
そして、デザイナ以外からのこのコンストラクタ呼び出しを防止します。

#変更前
スクリーンショット 2017-04-07 00.14.45.png
こんなアプリを題材にします。
実行すると、ファイルから文字列を読み込んで表示するだけのソフトです。
今回は話に関係ないのでINotifyPropertyChangedは実装していません。

##View
View層はWindowの中心にUserControl、その中心にTextBlockが置いてあるだけです。

MainWindow.xaml
<Window x:Class="WpfDesignOnlyConstruter.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfDesignOnlyConstruter"
        Background="SkyBlue"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MainWindowViewModel/>
    </Window.DataContext>
    <local:MyUserControl DataContext="{Binding MyUserControlVM}" Margin="100"/>
</Window>
MyUserControl.xaml
<UserControl x:Class="WpfDesignOnlyConstruter.MyUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfDesignOnlyConstruter"
             Background="Coral"
             
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300"
             d:DataContext="{d:DesignInstance {x:Type local:MyUserControlViewModel},IsDesignTimeCreatable=True}">
    <TextBlock Text="{Binding Text}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</UserControl>

##Model

Model層では生成時に指定されたファイルパスを読み取り、プロパティに設定します。

MyModel.cs(一部)
public MyModel(string path)
{
    this.Text = File.ReadAllText(path);
}

##ViewModel
ViewModel層ではMainWindowViewModelでModel・子ViewModelの生成をしています。

MainWindowViewModel.cs(一部)
public MainWindowViewModel()
{
    this.model = new MyModel("input.txt");
    this.MyUserControlVM = new MyUserControlViewModel(model);
}

子ViewModelではModelのファイルから読まれた文字を受け取って表示用プロパティに設定しています。

MyUserControlViewModel.cs(一部)
public string Text { get; set; }
public MyUserControlViewModel(MyModel model)
{
    this.Text = model.Text;
}

#問題点

実行時の動作には問題ありませんが、XAMLデザイナーで結果が表示されません。
ユーザーコントロールのXAMLデザイナーですが、真ん中にあるはずの文字が表示されません。

d:DataContext="{d:DesignInstance {x:Type local:MyUserControlViewModel},IsDesignTimeCreatable=True}"

の部分でデザイン用インスタンスとしてViewModelを生成しています。
スクリーンショット 2017-04-19 23.18.53.png
しかしViewModelに引数なしのコンストラクタが無いとXAMLデザイナーに結果が表示されません。

スクリーンショット 2017-04-19 23.22.37.png
また引数なしコンストラクタがあっても内部でファイルアクセスなどを実行していると、やはりXAMLデザイナーに結果は表示されません。

この状態ですと実行時と違うので、デザインがしづらいです。
清く正しい解決策は
d:DataContextでデザイナ用にViewModelを設定する
のようにデザイナ用データをXAMLで作って渡すことです。

#解決方法
しかし、膨大な表示項目があった場合、ViewModelのダミーをデザイナのためだけに作るのは正直めんどうです。
そこで簡単に済ませるために、ViewModelに(必要であればModelにも)デザイナー用のコンストラクタを作ってしまいます。

MyUserControlViewModel.cs(一部)
/// <summary>
/// !!!!XAMLデザイナー用!!!!呼び出しダメ。ゼッタイ。
/// </summary>
public MyUserControlViewModel() : this(new MyModel()) { }
MyModel.cs(一部)
/// <summary>
/// !!!!XAMLデザイナー用!!!!呼び出しダメ。ゼッタイ。
/// </summary>
public MyModel()
{
    this.Text = "Designer only text";
}

スクリーンショット 2017-04-19 23.25.14.png
こうして、XAMLデザイナ専用の引数なしViewModelコンストラクタを作ることで、XAMLデザイナに結果が表示できました。

#新しい問題
スクリーンショット 2017-04-07 00.09.26.png
しかしXAMLデザイナー以外からもこのコンストラクタは呼び出せます。
どんなにヘルパーテキストで警告したところで、読まない人は読みません。

#新しい解決方法
そこでObsolete属性を使用してコードからの呼び出しを防ぎます。
XAMLデザイナー用のViewModelコンストラクタをこうします。

MyUserControlViewModel.cs(一部)
/// <summary>
/// デザイナー用です コードからは呼べません
/// </summary>
[Obsolete("Designer only", true)]
public MyUserControlViewModel() : this(new MyModel()) { }

スクリーンショット 2017-04-07 00.10.40.png

呼び出すとコンパイルエラーになります。警告文も平和になりました。
第2引数をtrueにしてObsolete属性をマークすると、コードから呼ばれた際にコンパイルエラーを起こします。
ただし、Obsolete属性がついたメソッド内でObsolete属性がついたコードを呼ぶことは出来ます。
つまりデザイナ専用viewModelコンストラクタでデザイナ専用Modelコンストラクタを呼ぶことは問題ありません。

コードから呼べないObsolete属性ですが、XAMLデザイナーはこれを無視します。
ですのでXAMLデザイナー側は何も変える必要はありません。
めでたしめでたし。

#注意点

  • 廃止属性なのに廃止されない
  • デザイナ限定属性などにしたいが、廃止属性は継承できず、他の方法も見つからない。
  • デザイナーのためのコードがViewModelやModelにあるのはいかがなものか。
  • XAMLデザイナーがObsoleteAttributeを無視するのが仕様なのか解らないので、
    今後のアップデートなどで変わるかも。
  • 邪道感ある

#環境
VisualStudio2015
VisualStudio2017
.NET Framework 4.6
C#6

22
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?