fc2ブログ

記事一覧

ScrollViewの現在のPositionの中央にContentViewを配置する方法 | Xamarin.Forms

 
今回はXamarinのScrollViewで画面中央にContentViewを表示する方法をご紹介いたします。ScrollViewは縦にスクロールするコンテンツですので、画面よりも大きいサイズの縦幅を保持します。当然画面の中央の座標(ポジション)で表示するように設定しても、スクロールすると位置がずれてしまいます。そこでRelativeLayoutと組み合わせてスクロールポジションを加味して座標を設定することでスクロールしたとしても正しく画面中央に表示ができるようになります。

xamarin_scrollview_center_01.png



前提条件
・Windows10 Pro 64Bit
・Visual Studio 2015 Community Update3
・Xamarin 4.4.0.34 (NuGet Xamarin.Forms 2.3.4.247)
・macOS Sierra 10.12.4 / Xcode8.3.1 / Xamarin.iOS 10.8.0.1



1.XAMLの設定方法

ScrollViewの中にRelativeLayoutと中央に表示するコンテンツを配置します。

TestPage.xaml
<ScrollView x:Name="scrollLayout"
                  Orientation = "Vertical"
                  VerticalOptions="FillAndExpand">
    <RelativeLayout x:Name="rtLayout"
                        VerticalOptions="FillAndExpand"
                        HorizontalOptions="FillAndExpand">
        <!--ここにコンテンツを配置します -->
        <ContentView x:Name="ctLayer" />
    </RelativeLayout>
</ScrollView>    




2.PCLでの記述方法

PCLのXAMLファイルにC#で記述します。
(※iOSとAndroidで共通の記述となります。)
座標の計算方法は以下のようになります。
・横位置=ScrollViewの横幅の半分-ContentViewの横幅の半分
・縦位置=画面の縦幅の半分+ScrollViewのスクロールY座標-ContentViewの縦幅の半分

TestPage.xaml.cs
private void Initialize()
{
    //centerLayoutの表示位置をスクロールポジションに合わせて表示する
    //横位置を計算します
    var centerX = Constraint.RelativeToParent(parent => (parent.Width / 2) - (this.ctLayer.Width / 2));
    //縦位置を計算します
    var centerY = Constraint.RelativeToParent(parent => (this.Height / 2) + this.scrollLayout.ScrollY - (this.ctLayer.Height / 2));
    //XAMLにて設定済みの場合は一度削除する
    rtLayout.Children.Remove(this.ctLayer);
    //再計算後の位置で描画する
    rtLayout.Children.Add(this.ctLayer, centerX, centerY);
}

※コンストラクタ内だとthis.Widthとthis.Heightが-1になって取得できない場合がありますので、ご注意ください。


2017/10/11追記
Xamarin.Forms 2.4.0.280 以降でこの方法が正しく動作しないことを確認しました。Xamarin.Forms 2.4.0.280 以降では以下の記述方法が有効のようです。

private void Initialize()
{
    RelativeLayout.SetBoundsConstraint(this.ctLayer,
        BoundsConstraint.FromExpression(
            () => new Rectangle(
                (this.rtLayout.Width / 2) - (this.ctLayer.Width / 2),
                (this.Height / 2) + this.scrollLayout.ScrollY - (this.ctLayer.Height / 2),
                this.ctLayer.Width,
                this.ctLayer.Height),
            null));
}




当ブログの内容をまとめた Xamarin逆引きメニュー は以下のURLからご覧になれます。
https://itblog.dynaspo.com/blog-entry-81.html


関連記事

コメント

コメントの投稿

※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。

 入力されていないコメントには返信しませんのであらかじめご了承くださいませ。

※ニックネームでも良いので必ずご入力ください。

    

※必ずご入力ください。

    
    

※必ずご入力ください。

※技術的な質問には環境やエラーについて正確かつ詳細にお教えください。

・正確なエラーの内容

・Windowsのバージョン番号

・Visual Studioのバージョン

・機器の型番

・アプリやソフトのバージョン

    

カテゴリ別記事一覧

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Catalina 10.15 / Mojave 10.14 / High Sierra 10.13 / Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
【データベース】
Oracle 10g/9i
SQLServer 2016/2008R2/2005/2000
SQLAnywhere 16/11/8
【BI/レポートツール】
Cognos ReportNet (IBM)
Microsoft PowerBI
ActiveReport (GrapeCity)
CrystalReport
【OCX関連】
GrapeCity InputMan SPREAD MultiRow GridView
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS jQuery IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。