MahAppsでカラー設定の保存と利用

はじめに

Windows Template StudioからWPFアプリを作成すると、デフォルトでこんな画面が出来上がります

ちょっと前まで、XAMLIslandの項目なかったと思うのですが、投稿用にTemplateから作ってみたら、新しく追加されていました

で、今回の取り上げるのは、Settingの項目です

Settingにカラー設定を追加する

Templateから作成すると、Dark, Light, Defaultが選択できるようになっていますが、使用するカラーはApp.xamlで指定するようになっています。

<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Dark.Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" />

でも、動的にカラーを選びべるといいなと思い、あれこれと試行錯誤してみました。

ThemeSelectorService

ThemeSelectorServiceを見ると以下のようなコードがありました。

public class ThemeSelectorService : IThemeSelectorService
{
    public void InitializeTheme()
    {
        ThemeManager.Current.AddLibraryTheme(new LibraryTheme(new Uri(HcDarkTheme), MahAppsLibraryThemeProvider.DefaultInstance));
        ThemeManager.Current.AddLibraryTheme(new LibraryTheme(new Uri(HcLightTheme), MahAppsLibraryThemeProvider.DefaultInstance));

        var theme = GetCurrentTheme();
        SetTheme(theme);
    }

    public void SetTheme(AppTheme theme)
    {
        if (theme == AppTheme.Default)
        {
            ThemeManager.Current.ThemeSyncMode = ThemeSyncMode.SyncAll;
            ThemeManager.Current.SyncTheme();
        }
        else
        {
            ThemeManager.Current.ThemeSyncMode = ThemeSyncMode.SyncWithHighContrast;
            ThemeManager.Current.SyncTheme();
            ThemeManager.Current.ChangeTheme(Application.Current, $"{theme}.Blue", SystemParameters.HighContrast);
        }

        App.Current.Properties["Theme"] = theme.ToString();
    }

    public AppTheme GetCurrentTheme()
    {
        if (App.Current.Properties.Contains("Theme"))
        {
            var themeName = App.Current.Properties["Theme"].ToString();
            Enum.TryParse(themeName, out AppTheme theme);
            return theme;
        }

        return AppTheme.Default;
    }
}

GetCurrentTheme()で設定ファイルから"Theme"を呼び出し、SetTheme()で適用・保存をしているようです。
ということは、これをカラー設定もできるようにしてしまえばいいということでは？

ThemeSelectorService の変更

RuntimeThemeGeneratorを使用してなんとかなりました

    public void InitializeTheme()
    {
        ThemeManager.Current.AddLibraryTheme(new LibraryTheme(new Uri(HcDarkTheme), MahAppsLibraryThemeProvider.DefaultInstance));
        ThemeManager.Current.AddLibraryTheme(new LibraryTheme(new Uri(HcLightTheme), MahAppsLibraryThemeProvider.DefaultInstance));

        var theme = GetCurrentTheme();
        // colorを設定ファイルから呼び出します
        var color = GetCurrentColor();
        // SetTheme(theme); 
        // SetThemeの代わりにcolorも設定できるようにしたSetThemeAndColorを呼び出します
        SetThemeAndColor(theme, color);

    }

    // カラー設定を呼び出す
    public Color GetCurrentColor()
    {
        if (App.Current.Properties.Contains("Color"))
        {
            Color color = (Color)ColorConverter.ConvertFromString(App.Current.Properties["Color"].ToString());
            return color;
        }
        else
        {
            return Colors.Blue;
        }
    }

    // テーマ・カラーの両方を設定する
    public void SetThemeAndColor(AppTheme theme, Color color)
    {
        if (theme == AppTheme.Default)
        {
            ThemeManager.Current.ThemeSyncMode = ThemeSyncMode.SyncAll;
            ThemeManager.Current.SyncTheme();
            ThemeManager.Current.ChangeTheme(Application.Current, ThemeManager.Current.AddTheme(RuntimeThemeGenerator.Current.GenerateRuntimeTheme("Light", color)));
        }
        else
        {
            ThemeManager.Current.ThemeSyncMode = ThemeSyncMode.SyncWithHighContrast;
            ThemeManager.Current.SyncTheme();
            ThemeManager.Current.ChangeTheme(Application.Current, ThemeManager.Current.AddTheme(RuntimeThemeGenerator.Current.GenerateRuntimeTheme(theme.ToString(), color)));
        }

        App.Current.Properties["Theme"] = theme.ToString();
        App.Current.Properties["Color"] = color.ToString();
    }

指定したいカラーはComboBoxとか利用して取得すればいいかな