[Xamarin][CrossPlatform][Control] ScrollView

CrossPlatform

2016.11.29

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);
 };
}