Chapter 40

ステップ11-3: 続き2

Apterygiformes-zenn
Apterygiformes-zenn
2022.01.26に更新

設定読み書き

5)

App.xaml.csを開き、以下のように編集します。

App.xaml.cs
using System;
using System.IO;
using System.Windows;

namespace DarkLightMode_1
{
    /// <summary>
    /// Interaction logic for App.xaml
    /// </summary>
    public partial class App : Application
    {
        /// <summary>
        /// アプリケーション設定ファイル名
        /// </summary>
        public const string SettingsFileName = "settings.json";

        /// <summary>
        /// アプリケーション設定ファイルパス取得
        /// </summary>
        /// <returns></returns>
        /// <exception cref="DirectoryNotFoundException"></exception>
        public static string GetSettingsFilePath()
        {
            string? appPath = AppContext.BaseDirectory;
            if (appPath is null)
            {
                throw new DirectoryNotFoundException("実行ファイルのパス取得失敗");
            }

            return Path.Combine(appPath, SettingsFileName);
        }
    }
}

6)

SettingsPage.xaml.csReadSettingsメソッドを以下のように編集します。
設定ページが表示されたときに動く処理です。
エラーが出ているところはいつものように対処します。

/// <summary>
/// 設定ファイル読み込み
/// </summary>
private void ReadSettings()
{
    AppThemeToScreenSettings();

    var sr = new SettingsReader(App.GetSettingsFilePath());
    var settings = sr.ReadFromFile();

    Option1.IsOn = settings.Option1;
    Option2.IsOn = settings.Option2;
}
/// <summary>
/// アプリケーションテーマを画面の設定に反映
/// </summary>
private void AppThemeToScreenSettings()
{
    if (ThemeManager.Current.ApplicationTheme == ApplicationTheme.Dark)
    {
        ThemeDark.IsChecked = true;
    }
    else if (ThemeManager.Current.ApplicationTheme == ApplicationTheme.Light)
    {
        ThemeLight.IsChecked = true;
    }
    else
    {
        ThemeSystem.IsChecked = true;
    }
}

7)

SettingsPage.xaml.csWriteSettingsメソッドを以下のように編集します。
設定ページから他のページに切り替わったり、アプリ自体を終了したときに動く処理です。

/// <summary>
/// 設定ファイル書き込み
/// </summary>
private void WriteSettings()
{
    var settings = new Settings.Settings
    {
        Option1 = Option1.IsOn,
        Option2 = Option2.IsOn,
        Theme = GetAppThemeString(),
    };

    var sw = new SettingsWriter(App.GetSettingsFilePath());
    sw.WriteToFile(settings);
}
/// <summary>
/// アプリケーションテーマの文字列取得
/// </summary>
/// <returns></returns>
private string? GetAppThemeString()
{
    if (ThemeManager.Current.ApplicationTheme == ApplicationTheme.Dark)
    {
        return "Dark";
    }
    else if (ThemeManager.Current.ApplicationTheme == ApplicationTheme.Light)
    {
        return "Light";
    }
    else
    {
        return null;
    }
}

8)

最後に、アプリ起動時に設定ファイルから配色テーマを読み込んで適用する処理を書きます。

MainWindow.xamlWindowSourceInitializedイベントのイベントハンドラを作成し、以下を書きます。

try
{
    ReadSettings();
}
catch (Exception ex)
{
    MessageBox.Show(ex.ToString());
}

ReadSettingsメソッドは以下のように書きます。

/// <summary>
/// 設定読み込み
/// </summary>
private void ReadSettings()
{
    var sr = new Settings.SettingsReader(App.GetSettingsFilePath());
    var settings = sr.ReadFromFile();

    if (settings.Theme == "Dark")
    {
        // ダークテーマに設定
        ThemeManager.Current.ApplicationTheme = ApplicationTheme.Dark;
    }
    else if (settings.Theme == "Light")
    {
        // ライトテーマに設定
        ThemeManager.Current.ApplicationTheme = ApplicationTheme.Light;
    }
    else
    {
        // システムのテーマに従う
        ThemeManager.Current.ApplicationTheme = null;
    }
}

メイン画面設定

MainWindow.xamlWindowのプロパティを以下のように設定します。

プロパティ 設定値
Height 550
Width 700
ResizeMode CanResizeWithGrip

実行

実行してみます。
設定ページを開いてみます。
テーマはWindowsテーマを使用が選択されていて、その他のオプションは1がオンになっています。

これはSettingsクラスの初期値が反映されているためです。

Settings.cs
/// <summary>
/// アプリケーション設定
/// </summary>
public class Settings
{
    /// <summary>
    /// テーマ
    /// </summary>
    public string? Theme { get; set; } = null;

    /// <summary>
    /// 何かの設定1
    /// </summary>
    public bool Option1 { get; set; } = true;

    /// <summary>
    /// 何かの設定2
    /// </summary>
    public bool Option2 { get; set; } = false;
}

設定を変更してデバッグ実行を終了します。

実行ファイルのあるフォルダを開くと、settings.jsonというファイルが作成されています。
きちんと設定画面で設定した値が保存されていました。

EXEを直接起動してみます。
DarkLightMode_1.exeを起動すると、設定が読み込まれて画面に反映されました。

🎞動作イメージ

復習ポイント

  • NavigationViewコントロール
  • 設定ファイル読み書き