2016年

5月

12日

Xamarin.Froms イメージ表示

画像表示方法の手順についてもとめています。

Androidエミレーター表示

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

プロジェクト XFContenPageを右クリック --> 追加(D) --> 新しい項目(W)...をクリック

Cross-Platform --> code --> Forms Xaml Page を選択 名前:MayPage 追加

MayPage.xamlを書き換える。

MyPage.xaml

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

using Xamarin.Forms;

namespace XFImageApp01
{
    public partial class MyPage : ContentPage
    {
        public MyPage()
        {
            InitializeComponent();

            Content = new Image
            {
                Source = "classmethod.png"

                //この書き方でもOK
                //Source = ImageSource.FromFile("classmethod.png")

                //この書き方でもOK
                //Source = FileImageSource.FromFile("classmethod.png")
            };
        }
    }
}

App.cs MainPageの書き換え

App.cs

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

using Xamarin.Forms;

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

            //{
            //    Content = new StackLayout
            //    {
            //        VerticalOptions = LayoutOptions.Center,
            //        Children = {
            //             new Label {
            //                 HorizontalTextAlignment = TextAlignment.Center,
            //                 Text = "Welcome to Xamarin Forms!"
            //             }
            //         }
            //    }
            //};
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

ローカルの画像ファイルは、Androidの場合は、Resources/Drawableの階層下、iOSの場合は、Resourcesの階層下に配置します。WindowsPhoneではカレントになりますが、特定のフォルダにまとめることも可能です。

なおコードは、PCL(一か所)で書けますが、画像ファイルは、プラットフォームごと(3か所)に置く必要があります。

Image 画像のチェンジ方法例

Image00.Source = "iscs_02.png";

 

var Image00 = new Image
{
   Source = "iscs_01.png",
   Aspect = Aspect.AspectFit,
};

 

// クリック時のイベント

button.Clicked += (s, e) => {
    // 画像を変更する
    Image00.Source = "iscs_02.png";
};

▫️参考ページ

Xamarin.Forms イメージ

 

目 次