Xamarin.Forms 콤보박스 컨트롤인 Picker 컨트롤에는 화살표시가 없습니다.

 

화살표시를 나타내기 위해서는 렌더러를 이용해야합니다.

우선 화살표 이미지를 먼저 구해야합니다. (전 아래 이미지로..)

  (downarrow)

사용할 이미지를 Android 프로젝트의 Resources/drawable 폴더에, iOS 프로젝트의 Resources 폴더에 추가합니다.

 

먼저 .Net Standard 프로젝트에

CustomPicker.cs 를 추가합니다.

using Xamarin.Forms;

namespace Test.Cntrol
{
    public class CustomPicker : Picker
    {
        public static readonly BindableProperty ImageProperty =
            BindableProperty.Create(nameof(Image), typeof(string), typeof(CustomPicker), string.Empty);

        public string Image
        {
            get { return (string)GetValue(ImageProperty); }
            set { SetValue(ImageProperty, value); }
        }

        public CustomPicker() : base()
        {
            Margin = 3;
        }
    }
}

 

Android 프로젝트에 CustomPickerRenderer.cs 를 추가합니다.

using Android.Content;
using Android.Graphics;
using Android.Graphics.Drawables;
using Android.Support.V4.Content;
using Test.Cntrol;
using Test.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(CustomPicker), typeof(CustomPickerRenderer))]
namespace Test.Droid
{
    public class CustomPickerRenderer : PickerRenderer
    {
        CustomPicker element;

        public CustomPickerRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
        {
            base.OnElementChanged(e);

            element = (CustomPicker)this.Element;

            if (Control != null && this.Element != null && !string.IsNullOrEmpty(element.Image))
                Control.Background = AddPickerStyles(element.Image);
        }

        public LayerDrawable AddPickerStyles(string imagePath)
        {
            ShapeDrawable border = new ShapeDrawable();
            border.Paint.Color = Android.Graphics.Color.Gray;
            border.SetPadding(10, 10, 10, 10);
            border.Paint.SetStyle(Paint.Style.Stroke);

            Drawable[] layers = { border, GetDrawable(imagePath) };
            LayerDrawable layerDrawable = new LayerDrawable(layers);
            layerDrawable.SetLayerInset(0, 0, 0, 0, 0);

            return layerDrawable;
        }

        private BitmapDrawable GetDrawable(string imagePath)
        {
            int resID = Resources.GetIdentifier(imagePath, "drawable", this.Context.PackageName);
            var drawable = ContextCompat.GetDrawable(this.Context, resID);
            var bitmap = ((BitmapDrawable)drawable).Bitmap;

            var result = new BitmapDrawable(Resources, Bitmap.CreateScaledBitmap(bitmap, 70, 70, true));
            result.Gravity = Android.Views.GravityFlags.Right;

            return result;
        }
    }
}

 

iOS 프로젝트에도 CustomPickerRenderer.cs 를 추가합니다.

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

using Foundation;
using Test.Cntrol;
using Test.iOS;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(CustomPicker), typeof(CustomPickerRenderer))]
namespace Test.iOS
{
    public class CustomPickerRenderer : PickerRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
        {
            base.OnElementChanged(e);

            var element = (CustomPicker)this.Element;

            if (this.Control != null && this.Element != null && !string.IsNullOrEmpty(element.Image))
            {
                var downarrow = UIImage.FromBundle(element.Image);
                Control.RightViewMode = UITextFieldViewMode.Always;
                Control.RightView = new UIImageView(downarrow);
            }
        }
    }
}

 

이제 화면 상에서 아래 처럼 컨트롤을 정의한후 데이터를 바인딩하면

<?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:cntrol="clr-namespace:Test.Cntrol"
             x:Class="Test.MainPage">
    <StackLayout Spacing="5">
      
      <cntrol:CustomPicker x:Name="customPicker"
                           HeightRequest="40"
                           Margin="10"
                           Image="downarrow"
                           Title="Custom Picker"/>
    </StackLayout>
</ContentPage>

아래처럼 화살표시가 Picker 에 표시됩니다.

 

 

 

이번시간에는 Picker 와 WebView 컨트롤을 알아보겠습니다.

(추가로 DisplayActionSheet 메서드 사용법도 알아볼께요)

 

Picker 는 윈폼으로 말하면 ComboBox 와 같은 형태로 여러 항목중에 하나를 선택할수 있는 컨트롤입니다.

https://developer.xamarin.com/api/type/Xamarin.Forms.Picker/

 

WebView 는 컨트롤 명에서도 유추할수 있듯이 웹페이지를 보는 컨트롤입니다.

WebView 에 url 을 넣어도 되지만 직접 html 코딩을 넣을수도 있습니다.

반드시 Android 에서 실행할때는 INTERNET 권한을 줘야합니다.

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

 

위 두 컨트롤의 예시 입니다.

WebPickerPage.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"
             x:Class="XamarinFormsStudy.WebPickerPage">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Picker"/>
            <Picker x:Name="picker" SelectedIndexChanged="picker_SelectedIndexChanged"/>
            <Button x:Name="button" Text="DisplayActionSheet" Clicked="button_Clicked"/>
            <Label Text="WebView"/>
            <WebView x:Name="webView" VerticalOptions="FillAndExpand"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

WebPickerPage.xaml.cs

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

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

namespace XamarinFormsStudy
{
 [XamlCompilation(XamlCompilationOptions.Compile)]
 public partial class WebPickerPage : ContentPage
 {
  public WebPickerPage()
  {
   InitializeComponent ();

            this.Padding = new Thickness(10, Device.OnPlatform(40, 20, 20), 10, 5);

            // Picker 에 데이터를 Add 합니다.
            this.picker.Items.Add("Easy");
            this.picker.Items.Add("Normal");
            this.picker.Items.Add("Hard");


            this.webView.Source = new UrlWebViewSource { Url = "http://m.naver.com" };
        }

        private void picker_SelectedIndexChanged(object sender, EventArgs e)
        {
            // 선택한 항목을 팝업으로 띄워줍니다.
            string selectData = this.picker.Items[this.picker.SelectedIndex];
            DisplayAlert(selectData, "SelectValue", "OK");
        }

        private async void button_Clicked(object sender, EventArgs e)
        {
            // 선택 팝업이 뜨고 선택한 항목에 따라 버튼 색을 바꿔줍니다.
            string color = await DisplayActionSheet("선택하세요", "취소", "닫기", "BLUE", "YELLOW", "RED", "GREEN");
            switch (color)
            {
                case "BLUE": this.button.BackgroundColor = Color.Blue; break;
                case "YELLOW": this.button.BackgroundColor = Color.Yellow; break;
                case "RED": this.button.BackgroundColor = Color.Red; break;
                case "GREEN": this.button.BackgroundColor = Color.Green; break;
            }
        }
    }
}

결과

Normal 을 선택한 경우

 

추가로 DisplayActionSheet 함수는 목록 데이터를 팝업으로 보여주고 선택할 수 있게 합니다.

선택에 따른 처리도 가능합니다.

* 아래처럼 선택 항목들이 나열되고 선택하게되면 버튼 색이 선택한 색으로 변경됩니다.

 

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

+ Recent posts