[書籍]かんたんVisual Basic改訂2版

私が執筆をした「かんたんVisual Basic 改訂2版」が本日発売となりました。

本書は、プログラミング未経験の方向けに執筆しております。

最後の章を除いてコンソールアプリケーションでVisual Basicを学んで行くというスタイルで説明をしています。

是非、お手にとっていただければ幸いです。

[Xamarin][CrossPlatform][Control] ScrollView

ScrollViewコントロールを使用すると、画面からはみ出してしまうようなデザインでも、スクロールして表示することができます。

はみ出してしまいそうなデザインは<ScrollView>から</ScrollView>の内側に配置します。

また、ScrollToAsyncというメソッドを使用すると、任意の位置へスクロールさせることができます。

ScrollToAsyncのメソッドには以下のようなオーバーロードがあります。

書式1
scrollView.ScrollToAsync(スクロールさせたい位置にあるコントロール, スクロール先のコントロールの位置, アニメーションをするかどうか);

書式2
scrollView.ScrollToAsync(横方向のスクロール位置, 縦方向のスクロール位置, アニメーションをするかどうか)

以下にScrollViewの使用例を示します。

この例では縦方向に「ラベル」「ボックス」「ラベル」「ボックス」「ラベル」を配置しています。上部には3つのボタンが配置してあり、これらのボタンを押すことでコード内で指定した位置へスクロールをします。

<StackLayout Margin="10,30,10,10">
  
  <StackLayout Orientation="Horizontal">
    <Button x:Name="btnMoveMid" Text="Middleへ移動 "/>
    <Button x:Name="btnMove400" Text="400の位置へ移動 " />
    <Button x:Name="btnMoveBottom" Text="Bottomへ移動 " />
  </StackLayout>
  
  <ScrollView x:Name="scrollView">
    <StackLayout>
      <Label Text="Top" />

      <BoxView HeightRequest="600" 
        BackgroundColor="Blue" />
      
      <Label x:Name="lblMiddle" Text="Middle" />
               
      <BoxView HeightRequest="600" 
        BackgroundColor="Blue" />
      
      <Label x:Name="lblBottom" Text="Bottom" />
    </StackLayout>
  </ScrollView>

</StackLayout>
public MainPage()
{
 InitializeComponent();

 // [Middleへ移動]ボタンタップ時の処理
 btnMoveMid.Clicked += (sender, e) =>
 {
 scrollView.ScrollToAsync(lblMiddle,
 ScrollToPosition.Start, true);
 };
 // [400の位置へ移動]ボタンタップ時の処理
 btnMove400.Clicked += (sender, e) =>
 {
 scrollView.ScrollToAsync(0, 400, true);
 };
 // [Bottomへ移動]ボタンタップ時の処理
 btnMoveBottom.Clicked += (sender, e) =>
 {
 scrollView.ScrollToAsync(lblBottom,
 ScrollToPosition.Start, true);
 };
}

ScrollView

[Xamarin][CrossPlatform][Control] CarouselPage

今回はCarouselPageを見ていきましょう。

CarouselPageコントロールは、スワイプ操作によってページ切り替えを行うことができるようにするコントロールです。

新規でプロジェクトを作成するとメインのXAMLは以下のようにContentPageが配置されています。

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:CarouselPageSample" x:Class="TabbedPageSample.TabbedPageSamplePage">
	<Label Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>

CarouselPageを使用する場合は上記のContentPageをCarouselPageに変更し、その中に必要なページの数だけContentPageを配置します。

これによりページをスワイプで切り替えれらるようになります。ページに表示するデザインは、それぞれのContenPageの中で行います。

以下はCarouselPageの例です。

<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms" 
		xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
		xmlns:local="clr-namespace:CarouselPageSample" 
		x:Class="CarouselPageSample.CarouselPageSamplePage">
	<ContentPage Title="Page1">
		<Label Text="Welcome to Xamarin Forms1!" VerticalOptions="Center" HorizontalOptions="Center" />
	</ContentPage>
	<ContentPage Title="Page2">
		<Label Text="Welcome to Xamarin Forms2!" VerticalOptions="Center" HorizontalOptions="Center" />
	</ContentPage>
		<ContentPage Title="Page3">
		<Label Text="Welcome to Xamarin Forms3!" VerticalOptions="Center" HorizontalOptions="Center" />
	</ContentPage>
</CarouselPage>

また、XAMLのコードビハインドは以下のようにCarouselPageを継承するように変更をします。

using Xamarin.Forms;

namespace CarouselPageSample
{
	public partial class CarouselPageSamplePage : CarouselPage
	{
		public CarouselPageSamplePage()
		{
			InitializeComponent();
		}
	}
}

上記の実行例を以下に示します。

CarouselPageの例

関連記事