(Xamarin Forms) 4.Image

Image 는 사진이나 그림파일을 보여주도록 하는 컨트롤입니다.

보통 Image 는 각각의 장치 프로젝트 별로 그림 파일이 존재해야하고

그에따라 코딩이 좀 변화가 있어야합니다.

예를들면 아래처럼 각 장치별로 위치가 다르기 때문에 처리가 필요합니다.

beachImage.Source =  Device.OnPlatform(
            iOS: ImageSource.FromFile("Images/waterfront.jpg"),
            Android:  ImageSource.FromFile("waterfront.jpg"),
            WinPhone: ImageSource.FromFile("Images/waterfront.png"));

하지만 저희는 이를 한곳으로 몰아놓고 사용하고 싶기때문에 그 방법을 공유하고자 합니다.

우선 이식가능 프로젝트에 원하는 이미지를 넣습니다.

전 위처럼 3가지 이미지를 넣었습니다.

그리고 각각 이미지를 선택하면 아래 속성에서 빌드 작업이 '내용' 으로 되어있는데 '포함 리소스' 로 변경합니다.

위 작업까지만 하면 코딩단에서는 아래처럼 코드하여 이미지를 각 장치에 상관없이 바인딩 할수 있습니다.

Image image1 = new Image() { Source = ImageSource.FromResource("XamarinFormsStudy.bottom.png") };

하지만 xaml 파일에서도 사용하기 위해서는 추가 작업이 필요합니다.

먼저 클래스를 하나 추가하여 아래처럼 코딩합니다.

using System;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace XamarinFormsStudy
{
    [ContentProperty("Source")]
    public class ImageResourceExtension : IMarkupExtension
    {
        public string Source { get; set; }

        public object ProvideValue(IServiceProvider serviceProvider)
        {
            if (Source == null)
            {
                return null;
            }
           
            var imageSource = ImageSource.FromResource(Source);

            return imageSource;
        }
    }
}

위 내용은 xaml 파일에서 이미지를 가져와서 바인딩 하고자 할때 위 ProvideValue 메서드를 타도록 해줍니다.

xaml 파일에서는 아래처럼 코딩하면 됩니다.

<?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:XamarinFormsStudy;assembly=XamarinFormsStudy"
             x:Class="XamarinFormsStudy.AbsoluteLayoutPage">
    <ContentPage.Content>
        <AbsoluteLayout Padding="15">
            <Image AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100" Rotation="30" Source="{local:ImageResource XamarinFormsStudy.bottom.png}" />
            <Image AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100" Rotation="60" Source="{local:ImageResource XamarinFormsStudy.middle.png}" />
            <Image AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100" Source="{local:ImageResource XamarinFormsStudy.cover.png}" />
        </AbsoluteLayout>
    </ContentPage.Content>
</ContentPage>

>위 내용의 결과

안드로이드

IOS

 

UWP

 

참고

https://developer.xamarin.com/guides/xamarin-forms/user-interface/images/

GitHub > https://github.com/knagjun/XamarinForms