SilverlightのTheme適用についてその3「テーマを選択して切り替える」

インデックス

はじめに

前回は1つのThemeをアプリケーションの開始時に設定していました。今回は複数のThemeの中から1つをユーザーに選択してもらいます。また、それだけでは前回のコードを利用して簡単にできるので、今回はMVVMパターンを適用してみたいと思います。
今回のサンプルプロジェクトは記事の最後に置いてあります。説明のコメントを書き込んでいますのでプロジェクトだけでもご覧いただければと思います。

MVVMって何？って方はMVVM星人の尾上さんの資料をご覧ください。

「MVVMパターンが必要な理由」啓蒙用資料公開 - the sea of fertility

全体像

プロジェクトの全体像は下記のようになっています。

名前空間を上から順に……

Infrastructures

インフラです。本来はLivetやMVVM Light Toolkit、Prismなどのライブラリを使うと楽だと思います。
（Livet、Prismはソースコードも見れるのでとても勉強になります。ちなみに、Toolkitもソースコード見れますよ！）

Models

MVVMのM（Model）にあたる層です。Themeのコレクションの生成や切り替えなど、ロジック部分を担当しています。

Themes

前回と同様にThemeのXAMLを格納しています。また、各Themeの名前を持った列挙型をintで定義しています。

ViewModels

MVVMのVM（ViewModel）にあたる層です。ViewとModelの橋渡しを行います。意識するのはインプットとアウトプットです。

Views

MVVMのV（View）にあたる層です。XAMLで画面を構成します。が、プロジェクトにありません。MainPageを移動するの忘れてました……orz

Theme列挙型からコレクションを生成

Themesに定義した列挙型からコレクションを生成します。Silverlightの軽量フレームワークにはEnum.GetValuesがなかったので、ReflectionとLinqを利用しました。

        private IEnumerable<Theme> CreateThemes()
        {
            return typeof(Themes.ThemeType).GetMembers(BindingFlags.Public | BindingFlags.Static)
                .Select(m =>
                {
                    Themes.ThemeType value;
                    Enum.TryParse<Themes.ThemeType>(m.Name, out value);
                    return value;
                })
                .Where(t => Enum.IsDefined(typeof(Themes.ThemeType), t))
                .Select(t => new Theme() { Name = t.ToString(), Value = t });
        }

コレクションをViewにバインド

先ほど生成したコレクションはModelで作られています。なので、それをViewModelがViewへ橋渡しします。変化を捕捉してViewの状態として保持していきます。

            // Model の 変化を捕捉
            _model.ThemeCollection.CollectionChanged += SyncToCollectionChanged;

        public void SyncToCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
        {
            if (e.Action == NotifyCollectionChangedAction.Add)
            {
                var themeModel = e.NewItems[0] as Models.Theme;
                if (themeModel != null)
                {
                    // UI スレッド以外から UI の変化が発生すると例外になります。
                    // 今回は非同期操作がないので問題ありませんが、Collection の操作は非同期で行われることが多々ありますので注意してください。
                    // 注意とは、具体的には System.Windows.Threading.Dispatcher を使います。
                    ThemeCollection.Add(new ThemeViewModel() { Name = themeModel.Name, Value = themeModel.Value });
                }
            }
        }

次にViewにListBoxを配置してItemsSourceにバインドします。また、選択したアイテムがPageViewModelのプロパティに流れるようにSelectedItemをTwoWayモードでバインドします。

<ListBox DisplayMemberPath="Name" ItemsSource="{Binding ThemeCollection, Mode=OneWay}" SelectedItem="{Binding SelectedTheme, Mode=TwoWay}"/>

最後にModelへインプットしてあげると、Modelが切り替えロジックを実行します。

        private ThemeViewModel _selectedTheme;
        public ThemeViewModel SelectedTheme
        {
            get
            {
                return _selectedTheme;
            }
            set
            {
                _selectedTheme = value;
                _model.SetApplicationTheme(value.Value);
            }
        }

SetApplicationThemeでは前回と同様にToolkitのThemeクラスのSetApplicationThemeUriを行っています。ちなみに、SetApplicationThemeUriではApp.Current.ResourcesのMergedDictionariesにテーマを追加することでテーマを切り替えています。そのとき、追加したテーマのインスタンスを保持しておき、新しいテーマを設定されたときに前回のテーマを削除しています。