05日 6月 2016

Xamarin.Froms ScrollView （A～Z ボタン一覧）

A～Zのボタンを縦に並べスクロール機能を付加しています。

Android Windows Phone エミレーター表示

ファイル --> 新規作成 --> プロジェクト(P)... --> Cross-Platform --> Xamarin-Forms で作成

ScrollView03

HomePage.cs 追加

HomePage.cs の書き換え

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

using Xamarin.Forms;

namespace ScrollView03
{
public partial class HomePage : ContentPage
{
public HomePage()
{
BackgroundColor = Color.White;

var layout = new StackLayout
{
Orientation = StackOrientation.Vertical,
Padding = 0,
// A～Zのボタン
Children = {
new Button { Text = "A" , FontSize = 30, BackgroundColor = Color.Blue },
new Button { Text = "B" , FontSize = 30, BackgroundColor = Color.Yellow },
new Button { Text = "C" , FontSize = 30, BackgroundColor = Color.Red },
new Button { Text = "D" , FontSize = 30, BackgroundColor = Color.Blue },
new Button { Text = "E" , FontSize = 30, BackgroundColor = Color.Yellow },
new Button { Text = "F" , FontSize = 30, BackgroundColor = Color.Red },
new Button { Text = "G" , FontSize = 30, BackgroundColor = Color.Blue },
new Button { Text = "H" , FontSize = 30, BackgroundColor = Color.Yellow },
new Button { Text = "I" , FontSize = 30, BackgroundColor = Color.Red },
new Button { Text = "J" , FontSize = 30, BackgroundColor = Color.Blue },
new Button { Text = "K" , FontSize = 30, BackgroundColor = Color.Yellow },
new Button { Text = "L" , FontSize = 30, BackgroundColor = Color.Red },
new Button { Text = "M" , FontSize = 30, BackgroundColor = Color.Blue },
new Button { Text = "N" , FontSize = 30, BackgroundColor = Color.Yellow },
new Button { Text = "O" , FontSize = 30, BackgroundColor = Color.Red },
new Button { Text = "P" , FontSize = 30, BackgroundColor = Color.Blue },
new Button { Text = "Q" , FontSize = 30, BackgroundColor = Color.Yellow },
new Button { Text = "R" , FontSize = 30, BackgroundColor = Color.Red },
new Button { Text = "S" , FontSize = 30, BackgroundColor = Color.Blue },
new Button { Text = "T" , FontSize = 30, BackgroundColor = Color.Yellow },
new Button { Text = "U" , FontSize = 30, BackgroundColor = Color.Red },
new Button { Text = "V" , FontSize = 30, BackgroundColor = Color.Blue },
new Button { Text = "W" , FontSize = 30, BackgroundColor = Color.Yellow },
new Button { Text = "X" , FontSize = 30, BackgroundColor = Color.Red },
new Button { Text = "Y" , FontSize = 30, BackgroundColor = Color.Blue },
new Button { Text = "Z" , FontSize = 30, BackgroundColor = Color.Yellow },
},
};

// scrollViewの生成
var scrollView = new ScrollView { Content = layout };

// scrollViewを配置
Content = scrollView;

}
}
}

App.cs の書き換え

App.cs

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

using Xamarin.Forms;

namespace ScrollView03
{
public class App : Application
{
public App()
{
// The root page of your application
MainPage = new HomePage();
}
}
}