前回の ウィンドウ幅に応じて列数が変化する GridView - しっぽを追いかけて をさらに拡張して、3 列未満になるウィンドウ幅の場合はタイルの大きさを小さく表示する GridView を作ってみようと思います
前回の GridView では幅が狭くなったときもタイルが同じ大きさのままでしたが、これを列数に応じて小さく表示すればよいわけです
VariableSizedWrapGrid.SizeChanged イベントハンドラの処理を下記のように書き換えます
/// <summary> /// GridView 内部の VariableSizedWrapGrid のサイズ変更イベントハンドラ /// </summary> /// <param name="sender">イベント発行者</param> /// <param name="e">イベント引数</param> public void OnVariableSizedWrapGridSizeChanged(object sender, SizeChangedEventArgs e) { var wrapGrid = sender as VariableSizedWrapGrid; if (wrapGrid == null) { return; } switch (wrapGrid.Orientation) { // Z字型の並び順の場合 case Orientation.Horizontal: var maxColumn = (int)Math.Floor(e.NewSize.Width / 250); // 列数が3列未満になる場合はタイルを小さくする if (maxColumn < 3) { wrapGrid.ItemWidth = 160; wrapGrid.ItemHeight = 180; maxColumn = (int)Math.Floor(e.NewSize.Width / wrapGrid.ItemWidth); } else { wrapGrid.ItemWidth = 250; wrapGrid.ItemHeight = 285; } wrapGrid.MaximumRowsOrColumns = maxColumn; break; // И字型の並び順の場合 case Orientation.Vertical: var maxRow = (int)Math.Floor(e.NewSize.Height / 285); // 行数が3行未満になる場合はタイルを小さくする if (maxRow < 3) { wrapGrid.ItemWidth = 160; wrapGrid.ItemHeight = 180; maxRow = (int)Math.Floor(e.NewSize.Height / wrapGrid.ItemHeight); } else { wrapGrid.ItemWidth = 250; wrapGrid.ItemHeight = 285; } wrapGrid.MaximumRowsOrColumns = maxRow; break; } }
これだけ直すだけで・・・
できました!
少し複雑になったので Behavior クラス化して VariableSizedGridView にアタッチしてもいいかもしれないですね