yamlファイルでは-をつけて配列を表現します。そしてこれはよく使われるので、今回はC#で作成したyamlオブジェクトの配列をyamlファイルとして保存する処理を記載していきます。

まずは前提として配列の要素数は不変であるということです。つまり追加したり削除したりできます。

通常の配列では要素の数を変更することができないのでコレクションを使います。

頭の整理も兼ねて少し遠回りな記載になってしまいましたが、ご了承ください。

VVM

動きを確認するために簡単なバインディングを試してみます。ビューモデルを作成してxamlのDataContextに設定します。

<Grid>
        <Label Content="ファイルを開いてYAMLファイルを作成しましょう" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <ListBox ItemsSource="{Binding List}" Width="250" Margin="0,5,0,10" />
    </Grid>

このListBoxにBindさせるListを持つViewModelを作成します。

listを返すListを定義しています。また、コンストラクタで値を初期化しています。

class YamlViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    string[] list;

    public string[] List
    {
        get
        {
            return this.list;
        }
        set
        {

        }
    }

    public YamlViewModel()
    {
       list =new string[] { "ちさと", "かのん", "まんまる", "ギャラクシー", "丸なんだyo♪" };
    }

}

これを使うためPage.xaml.csを修正します。

public Page1()
     {
         InitializeComponent();

         this.DataContext = YamlManager.getInstance().yamlData;

         var viewmodel = new YamlViewModel();
         this.DataContext = viewmodel;

     }

モデルを作成していないですが、イメージ通りのバインドができていました。

Listにしてシングルトンクラスにする

今はただの配列になっていますが、List型にします。なぜなら要素を追加削除したいので、便利なList型にしておきます。

また、ViewModelっぽいものをシングルトンクラスにしちゃいます。

class YamlViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private static YamlViewModel instance = new YamlViewModel();

    public static YamlViewModel getInstance()
    {
        return instance;
    }

    List<string> list;

    public List<string> List
    {
        get
        {
            return this.list;
        }
        set
        {

        }
    }

    private YamlViewModel()
    {
        list = new List<string>();
        list.Add("かのん");
        list.Add("くぅくぅ");
        list.Add("すみれ");
        list.Add("ちさと");
        list.Add("れん");
    }
}

要素を追加する

テキストボックスとボタンをxamlに追加して、要素を追加できるようにしましょう。

<Grid>
        <Label Content="ファイルを開いてYAMLファイルを作成しましょう" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <ListBox ItemsSource="{Binding List}" Width="250" Margin="0,5,0,10" />
        <Label Content="Label" HorizontalAlignment="Left" Margin="41,146,0,0" VerticalAlignment="Top"/>
        <TextBox x:Name="addbox" HorizontalAlignment="Left" Margin="41,123,0,0" Text="TextBox" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
        <Button Content="Add" Click="addItem" HorizontalAlignment="Left" Margin="39,177,0,0" VerticalAlignment="Top"/>
    </Grid>

追加する処理を記載します。

private void addItem(object sender, RoutedEventArgs e)
        {
            var newItem = addbox.Text;

            var list = YamlViewModel.getInstance().List;
            list.Add(newItem);
            MessageBox.Show("追加しました");
        }

実行しても、画面上は追加されません。

というのも変更したことをViewが判断できないのです。そこで、簡単に変更を通知できるObservableCollectionを使います。

といってもListからObservableCollectionに変更するだけでOKです。

class YamlViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private static YamlViewModel instance = new YamlViewModel();

        public static YamlViewModel getInstance()
        {
            return instance;
        }

        ObservableCollection<string> list;

        public ObservableCollection<string> List
        {
            get
            {
                return this.list;
            }
            set
            {
            }
           
        }

        private YamlViewModel()
        {
            list = new ObservableCollection<string>();
            list.Add("かのん");
            list.Add("くぅくぅ");
            list.Add("すみれ");
            list.Add("ちさと");
            list.Add("れん");
        }
    }

Listと使い方は同じですが、Addメソッドをコールした段階で通知がいくようで、Viewに即時反映されています。

リストの要素を削除する

まずはListBoxにアクセスできるように名前をつけて、さらに削除ボタンを追加します。

<Grid>
        <Label Content="ファイルを開いてYAMLファイルを作成しましょう" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <ListBox x:Name="mylistbox" ItemsSource="{Binding List}" Width="250" Margin="0,5,0,10" />
        <Label Content="Label" HorizontalAlignment="Left" Margin="41,146,0,0" VerticalAlignment="Top"/>
        <TextBox x:Name="addbox" HorizontalAlignment="Left" Margin="41,123,0,0" Text="TextBox" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
        <Button Content="Add" Click="addItem" HorizontalAlignment="Left" Margin="39,177,0,0" VerticalAlignment="Top"/>
        <Button Content="Delete" Click="DeleteItem" HorizontalAlignment="Left" Margin="32,225,0,0" VerticalAlignment="Top"/>
    </Grid>

削除するメソッドを追加します。

private void DeleteItem(object sender, RoutedEventArgs e)
        {
            if(mylistbox.SelectedItem == null)
            {
                return;
            }
            int index = mylistbox.SelectedIndex;
            var list = YamlViewModel.getInstance().List;
            list.RemoveAt(index);
        }

要素を選択してDeleteボタンを押すと、その要素が削除されるようになりました。

Yamlファイルに書き出す

yamlファイルに書き出します。

試験的に作っているので画面ぐちゃぐちゃになってしまっています。

保存するときは、YamlDataに反映させて保存すればOKです。

YamlDataについては前回の記事で記載しております。

まずはTextBoxの内容をYamlDataに反映させるためのSaveボタンを用意します。

<Grid>
        <Label Content="ファイルを開いてYAMLファイルを作成しましょう" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <ListBox x:Name="mylistbox" ItemsSource="{Binding List}" Width="250" Margin="0,5,0,10" />
        <Label Content="Label" HorizontalAlignment="Left" Margin="41,146,0,0" VerticalAlignment="Top"/>
        <TextBox x:Name="addbox" HorizontalAlignment="Left" Margin="41,123,0,0" Text="TextBox" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
        <Button Content="Add" Click="addItem" HorizontalAlignment="Left" Margin="39,177,0,0" VerticalAlignment="Top"/>
        <Button Content="Delete" Click="DeleteItem" HorizontalAlignment="Left" Margin="32,225,0,0" VerticalAlignment="Top"/>
        <Button Content="Save"  Click="SaveItem" HorizontalAlignment="Left" Margin="52,291,0,0" VerticalAlignment="Top"/>

    </Grid>

Saveボタンを押したときの処理を記載しますが、通常のListだと配列に変換もToArrayでいけるようですが、ObservableCollectionを配列に変換するメソッドは無さそうでした？

そこでLinqを使います。C#の強力なお友達を使えば一撃でした。するとToArrayメソッドが使えるようになります。

using System.Linq;

private void SaveItem(object sender, RoutedEventArgs e)
{
    var yamlManager = YamlManager.getInstance();
    var list = YamlViewModel.getInstance().List;
    var new_array = list.ToArray();
    yamlManager.yamlData.list = new_array;
    MessageBox.Show("反映しました");
}

保存されたyamlファイルを確認します。

sample: 澁谷かのん
dbname: 
list:
- かのん
- くぅくぅ
- すみれ
- ちさと
- れん

完璧です！

番外編　| 辞書型を使う

辞書型は使えますが、key情報をいちいち設定しないといけないので、連番管理テーブルなどで管理する場合はいいですが、少し不都合が起きます。

ただ、xamlでvalueを表示するのに少し手入れが必要なので、メモします。

class YamlViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    Dictionary<String,String> list;

    public Dictionary<String, String> List
    {
        get
        {
            return this.list;
        }
        set
        {

        }
    }

    public YamlViewModel()
    {
        list = new Dictionary<string, string>();
        list.Add("たこやき","ちさと");
        list.Add("クレープ", "くぅくぅ");
        list.Add("コーラフロート", "かのん");
    }

}

この結果を見ると、key情報も出力されていますが、問題なく動作しています。

valueだけを表示させたい場合はxamlを以下のように修正します。

<Grid>
        <Label Content="ファイルを開いてYAMLファイルを作成しましょう" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <ListBox ItemsSource="{Binding List}" Width="250" Margin="0,5,0,10" SelectedValuePath="Key" DisplayMemberPath="Value"/>
    </Grid>

終わりに

私はメソッド名とかキャメルケースで書く癖があるのですが、C#では大文字始まりが慣例のようです。

C# | 配列をyamlファイルとして保存する