Xamarin.Froms Grid レイアウト

グリッドは、複数の子要素を、行・列に基づいて配置していくレイアウトです。

GridPage.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace GridPage01
{
public partial class GridPage : ContentPage
{
public GridPage()
{
// iPhoneにおいて、ステータスバーとの重なりを防ぐためパディングを調整する
Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);

var grid = new Grid();

grid.Children.Add(new Label()
{
Text = "(0,0)",
TextColor = Color.Blue,
FontSize = 40,
BackgroundColor = Color.Aqua
}, 0, 0);

grid.Children.Add(new Label()
{
Text = "(0,1)",
TextColor = Color.Blue,
FontSize = 40,
BackgroundColor = Color.Gray
}, 1, 0);

grid.Children.Add(new Label()
{
Text = "(1,0)",
TextColor = Color.Blue,
FontSize = 40,
BackgroundColor = Color.Yellow
}, 0, 1);

grid.Children.Add(new Label()
{
Text = "(1,1)",
TextColor = Color.Blue,
FontSize = 40,
BackgroundColor = Color.Pink
}, 1, 1);

// gridの配置
Content = grid;
}
}
}

GridPage2.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace GridPage01
{
public partial class GridPage2 : ContentPage
{
public GridPage2()
{
// iPhoneにおいて、ステータスバーとの重なりを防ぐためパディングを調整する
Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);

var grid = new Grid();

// 横方向 0 and 1 - 縦方向 0
grid.Children.Add(new Label()
{
Text = "(0,0)",
TextColor = Color.Blue,
FontSize = 40,
BackgroundColor = Color.Aqua
}, 0, 2, 0, 1);

// 横方向 0 and 1 - 縦方向 1
grid.Children.Add(new Label()
{
Text = "(1,0)",
TextColor = Color.Blue,
FontSize = 40,
BackgroundColor = Color.Gray
}, 0, 2, 1, 2);

// 横方向 2 -縦方向 0 and 1
grid.Children.Add(new Label()
{
Text = "(0,2)",
TextColor = Color.Blue,
FontSize = 40,
BackgroundColor = Color.Yellow
}, 2, 3, 0, 2);

// 横方向 0, 1 and 2 - 縦方向 2
grid.Children.Add(new Label()
{
Text = "(2,0)",
TextColor = Color.Blue,
FontSize = 40,
BackgroundColor = Color.Pink
}, 0, 3, 2, 3);

// gridの配置
Content = grid;
}
}
}

GridPage4.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace GridPage01
{
public partial class GridPage4 : ContentPage
{
public GridPage4()
{
// iPhoneにおいて、ステータスバーとの重なりを防ぐためパディングを調整する
Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);

var grid = new Grid();

grid.Children.Add(
new Image()
{
Source = Device.OnPlatform("Icon-60@2x.png", "icon.png", "icon.png")
}, 0, 0);

grid.Children.Add(new Label()
{
Text = "40",
TextColor = Color.Blue,
FontSize = 30,
BackgroundColor = Color.Yellow
}, 1, 0);

grid.Children.Add(new Label()
{
Text = "残り部分",
TextColor = Color.Blue,
FontSize = 30,
BackgroundColor = Color.Pink
}, 2, 0);

// 横方向のマスの数
grid.ColumnDefinitions.Add(new ColumnDefinition()
{
Width = new GridLength(1, GridUnitType.Auto)
});

// 横方向のマスの数
grid.ColumnDefinitions.Add(new ColumnDefinition()
{
Width = new GridLength(40, GridUnitType.Absolute)
});

// 横方向のマスの数
grid.ColumnDefinitions.Add(new ColumnDefinition()
{
Width = new GridLength(1, GridUnitType.Star)
});

// gridの配置
Content = grid;
}
}
}

GridPage5.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace GridPage01
{
public partial class GridPage5 : ContentPage
{
public GridPage5()
{

// iPhoneにおいて、ステータスバーとの重なりを防ぐためパディングを調整する
Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
var grid = new Grid();

grid.Children.Add(
// アイコン画像
new Image()
{
Source = Device.OnPlatform("Icon-60@2x.png", "icon.png", "icon.png")
}, 0, 0);

grid.Children.Add(new Label()
{
Text = "Height：40",
TextColor = Color.Blue,
FontSize = 30,
BackgroundColor = Color.Yellow
}, 0, 1);

grid.Children.Add(new Label()
{
Text = "残り部分",
TextColor = Color.Blue,
FontSize = 30,
BackgroundColor = Color.Pink
}, 0, 2);

// 縦方向のマスの数アイコン画像
grid.RowDefinitions.Add(new RowDefinition()
{
Height = new GridLength(1, GridUnitType.Auto)
});

// 縦方向のマスの数高さ４０
grid.RowDefinitions.Add(new RowDefinition()
{
Height = new GridLength(40, GridUnitType.Absolute)
});

// 縦方向のマスの数残り部分
grid.RowDefinitions.Add(new RowDefinition()
{
Height = new GridLength(1, GridUnitType.Star)
});

// gridの配置
Content = grid;
}
}
}

GridPage6.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace GridPage01
{
public partial class GridPage6 : ContentPage
{
public GridPage6()
{
BackgroundColor = Color.White;

var grid = new Grid
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.Center,

// 縦方向のマスの数
RowDefinitions =
{
new RowDefinition() { Height = GridLength.Auto }
},

// 横方向のマスの数
ColumnDefinitions =
{
// new GridLength(1, GridUnitType.Star)「4列とも同じ比率の幅とする」
// 比率を:2:1:1:1にしたければ、最初の列だけ2にすればよいです
new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) },
new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) },
new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) },
new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) },
}
};

// Button 1 (0:横列 , 0:縦列)
grid.Children.Add(new Button
{
Text = "1",
TextColor = Color.Black,
BackgroundColor = Color.Aqua,
}, 0, 0);

// Button 2 (1:横列 , 0:縦列)
grid.Children.Add(new Button
{
Text = "2",
TextColor = Color.Black,
BackgroundColor = Color.Fuschia,
}, 1, 0);

// Button 3 (2:横列 , 0:縦列)
grid.Children.Add(new Button
{
Text = "3",
TextColor = Color.Black,
BackgroundColor = Color.Lime,
}, 2, 0);

// Button 4 (3:横列 , 0:縦列)
grid.Children.Add(new Button
{
Text = "4",
TextColor = Color.Black,
BackgroundColor = Color.Red,
}, 3, 0);

// gridを配置
Content = grid;
}
}
}