var tgr = new TapGestureRecognizer { NumberOfTapsRequired = 1 };

tgr.Tapped += (sender, args) =>

{

    // 처리할 내용

};

 

this.grid.GestureRecognizers.Add(tgr);

 

 

- NumberOfTapsRequired : tab수로 2로 설정한 경우 두번 tab 한 경우 이벤트가 발생된다.

 

위와 같은 형식으로 Image 도 아래처럼 Click 이벤트를 처리할수 있다.

 

var tgr = new TapGestureRecognizer { NumberOfTapsRequired = 1 };

tgr.Tapped += (sender, args) =>

{

    // 처리할 내용

};

 

this.image.GestureRecognizers.Add(tgr);

 

WebView 에 Html 소스 코드를 이용 아래처럼 이미지를 넣었는데

string html = $@"
        <html>
        	<body bgcolor='black'>
        		<div style='width: 300px; height: 160px; overflow: hidden; position: relative; align-items:center;justify-content:center;'>
        			<img src='{이미지경로}' style='position: absolute; top:0px; left:-40px; width:380px; height: 180px;'/>
        		</div>
        	</body>
        </html>";
        
this.localWebView.Source = new HtmlWebViewSource() { Html = html };

아래 처럼 물음표가 떴다.

안드로이드에서는 아무 이상없이 표시 되었던 항목이 표시가 안되었다.

이를 해결하긴 위해서는 Info.plist 에 아래 항목을 추가해야한다.

	<key>NSAppTransportSecurity</key>
	<dict>
		<key>NSAllowsArbitraryLoads </key>
		<true/>
		<key>NSAllowsArbitraryLoadsInWebContent</key>
		<true/>
	</dict>


위항목을 추가하니 아래처럼 이미지가 제대로 표시가 되었다.

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

+ Recent posts