テキスト、画像を配置したスクロールビューです。ScrollViewの縦サイズを設定できます。

Android Windows Phone エミレーター表示

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

ScrollView04

HomePage.cs 追加

HomePage.cs の書き換え

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

using Xamarin.Forms;

namespace ScrollView04
{
public partial class HomePage : ContentPage
{
public HomePage()
{
// 花火の紹介
StackLayout stackLayout01 = new StackLayout
{
Spacing = 20,

Children = {
new Label {
Text = "花火の紹介",
TextColor = Color.Black,
FontSize = 40,
//XAlign = TextAlignment.Center,
//BackgroundColor = Color.Red,
// 横並び中央
HorizontalOptions = LayoutOptions.Center
}
}
};

// 花火の画像 Image
StackLayout stackLayout02 = new StackLayout
{
// スペースを使用してレイアウトを囲む
Padding = 10,
// 間隔
//Spacing = 10,
// 横一列並べ
Orientation = StackOrientation.Horizontal,
// 横並び中央
HorizontalOptions = LayoutOptions.Center,

Children = {
new Image
{
Source = ImageSource.FromResource("ScrollView04.Images.icon640x640.png"),
// アスペクトを設定
Aspect = Aspect.AspectFit,
// 幅設定
WidthRequest = 80, // 160x160 1/2サイズ 320x320 1倍
},

// スペースボックス
new BoxView
{
Color = Color.Silver,// 塗りつぶし色
WidthRequest = 25,// 横のサイズ
},

new Image
{
Source = ImageSource.FromResource("ScrollView04.Images.icon640x640.png"),
// アスペクトを設定
Aspect = Aspect.AspectFit,
// 幅設定
WidthRequest = 80, // 180x180 1/2サイズ 360x360 1倍
},
}
};

// 花火の解説 Editor
StackLayout stackLayout03 = new StackLayout
{
Children ={
new Editor
{
Text = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\r\n

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\r\n",
TextColor = Color.Blue,
BackgroundColor = Color.Silver,
FontSize = 20,
// Read Only 読み取りのみ
IsEnabled = false,
// 幅設定
WidthRequest = 0,
// 高さ設定
HeightRequest = 110
},
}
};

// 花火の解説画像 Image
StackLayout stackLayout04 = new StackLayout
{
// スペースを使用してレイアウトを囲む
Padding = 10,
// 間隔
//Spacing = 10,
// 横一列並べ
Orientation = StackOrientation.Horizontal,
// 横並び中央
HorizontalOptions = LayoutOptions.Center,

Children = {
new Image
{
Source = ImageSource.FromResource("ScrollView04.Images.img01.png"),
// アスペクトを設定
Aspect = Aspect.AspectFit,
// 幅設定
WidthRequest = 360, // 180x180 1/2サイズ 360x360 1倍
}
}
};

// 花火の解説 Editor
StackLayout stackLayout05 = new StackLayout
{
Children ={
new Editor
{
  Text = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\r\n

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\r\n",

TextColor = Color.Blue,
BackgroundColor = Color.Silver,
FontSize = 20,
// Read Only 読み取りのみ
IsEnabled = false,
// 幅設定
WidthRequest = 0,
// 高さ設定
HeightRequest = 110
},
}
};

// 花火の解説画像 Image
StackLayout stackLayout06 = new StackLayout
{
// スペースを使用してレイアウトを囲む
Padding = 10,
// 間隔
//Spacing = 10,
// 横一列並べ
Orientation = StackOrientation.Horizontal,
// 横並び中央
HorizontalOptions = LayoutOptions.Center,

Children = {
new Image
{
Source = ImageSource.FromResource("ScrollView04.Images.img01.png"),
// アスペクトを設定
Aspect = Aspect.AspectFit,
// 幅設定
WidthRequest = 360, // 180x180 1/2サイズ 360x360 1倍
}
}
};

StackLayout stackLayout = new StackLayout
{
Children =
{
// 花火の紹介
stackLayout01,
// 花火の画像
stackLayout02,
// 花火の解説
stackLayout03,
// 花火の解説画像
stackLayout04,
// 花火の解説
stackLayout05,
// 花火の解説画像
stackLayout06,
},

// ScrollViewの縦サイズ
HeightRequest = 1000
};

ScrollView scrollView = new ScrollView
{
// バックグランドカラー
BackgroundColor = Color.Silver,
//
VerticalOptions = LayoutOptions.FillAndExpand,

// スタックレイアウトの配置
Content = stackLayout
};

BackgroundColor = Color.Black; //White

// Accomodate iPhone status bar.
this.Padding = new Thickness(10, Device.OnPlatform(20, 0, 0), 10, 5);

// スクロールの配置
Content = scrollView;
}
}
}

App.cs の書き換え

App.cs

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

using Xamarin.Forms;

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