読者です 読者をやめる 読者になる 読者になる

しっぽを追いかけて

ぐるぐるしながら考えています

Unity と猫の話題が中心   掲載内容は個人の私見であり、所属組織の見解ではありません

3 列未満になるウィンドウ幅の場合はタイルの大きさを小さく表示する GridView

前回の ウィンドウ幅に応じて列数が変化する GridView - しっぽを追いかけて をさらに拡張して、3 列未満になるウィンドウ幅の場合はタイルの大きさを小さく表示する GridView を作ってみようと思います

f:id:matatabi_ux:20140628202251p:plain

前回の 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;
    }
}

これだけ直すだけで・・・

f:id:matatabi_ux:20140628220005p:plain

できました!

少し複雑になったので Behavior クラス化して VariableSizedGridView にアタッチしてもいいかもしれないですね