[Xamarin.Mac] コレクションビューで選択状態を表示してみました

#Xamarin.Mac

#Xamarin

SIN

2020.12.10

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

1 はじめに

CX事業本部の平内（SIN）です。

Xamarin.Macを使用すると、C#でネイティブなMacのアプリが作成可能です。ここでは、私自身がXamarin.Macに入門して学習した事項を覚書として書かせて頂いています。

今回は、コレクションビューでアイテム選択時の動作を確認してみました。

なお、下記で作成した、コレクションビューを元にして作業を進めています。

2 Selectable

NSCollectionViewでアイテムの選択を有効にするには、Selectableにチェックを入れる必要があります。

3 ItemsSelected

NSCollectionViewに登録されたDelegateで、ItemsSelected() / ItemsDeselected()をオーバーライドすることで、アイテムが選択（選択解除）されたタイミングの処理を記述できます。

public class CollectionViewDelegate: NSCollectionViewDelegateFlowLayout {
        public CollectionViewDelegate() {
        }

        // アイテムが選択されたタイミングで呼ばれる
        public override void ItemsSelected(NSCollectionView collectionView, NSSet indexPaths) {
            var paths = indexPaths.ToArray<NSIndexPath>();
            var index = (int)paths[0].Item;
            Console.WriteLine($"{index} selected.");
        }

        // アイテムの選択が解除されたタイミングで呼ばれる
        public override void ItemsDeselected(NSCollectionView collectionView, NSSet indexPaths) {
            var paths = indexPaths.ToArray<NSIndexPath>();
            var index = (int)paths[0].Item;
            Console.WriteLine($"{index} deslected.");
        }
    }

上記の追加により、アイテムをクリックする度に、ログが表示されている事を確認できます。

4 Selected

アイテムのビュークラスで、Selectedプロパティが変化するタイミングで、表示を変化させる事で、選択された状態を表現することができます。

ImageViewとLabelの表示を変更するために、Outletを作成します。

Selectedプロパティをオーバーライドして、フォントや、枠線を変化させてみました。

public partial class PictureViewController : NSCollectionViewItem {

  public override bool Selected {
    get {
      return base.Selected;
    }
    set {
      base.Selected = value;

      if(value) {
        TextLabel.Font = NSFont.SystemFontOfSize(11, 1);
        TextLabel.TextColor = NSColor.Red;
        ImageView.Layer.BorderColor = NSColor.Red.CGColor;
        ImageView.Layer.BorderWidth = 3;
      } else {
        TextLabel.Font = NSFont.SystemFontOfSize(11, (nfloat)0.1);
        TextLabel.TextColor = NSColor.Black;
        ImageView.Layer.BorderWidth = 0;
      }
    }
  }

動作している様子です。トマト羊が選択状態にある事が視覚的に表現されています。