SQLite 다루는 참고 동영상 링크

https://www.youtube.com/watch?v=t3w8HIdBFiA

 

이번 시간에는 DataBase 관련 첫번째 시간으로 SQLite 를 알아보도록 하겠습니다.

보통 서버와 연결하지 않고 로컬로만 어떤 데이터를 다룰 때는 SQLite 가 가장 편한 것 같습니다.

이번에 소개할건 PlugIn.SQLite 입니다. (Nuget 에서 받을수 있습니다.)

 

프로젝트를 열고 솔루션의 NutGet 패키지 관리로 들어갑니다.

PlugIn.SQLite 로 검색하면 아래처럼 하나가 나옵니다.

오른쪽에 모두 체크하고 설치를 클릭합니다.

확인을 하게되면

각각 프로젝트 별로 (UWP 제외) SQLite 폴더가 생성되고 내부에 코딩이 자동으로 들어가 있게됩니다.

각각 프로젝트에 맞게 namespace 등은 변경해 주어야합니다.

[ Android ]

코드 내용 (프로젝트에 맞게 변경이 완료된 내용입니다.)

using System.IO;
using SQLite;
using Xamarin.Forms;
using XamarinFormsStudy.Android;

[assembly: Dependency(typeof(SQLite_Android))]

namespace XamarinFormsStudy.Android
{
    public class SQLite_Android : ISQLite
    {
        public SQLite_Android() { }
        public SQLiteConnection GetConnection()
        {
            var sqliteFilename = "MySQLiteDB.db3";
            string documentsPath = System.Environment.GetFolderPath(System.Environment.SpecialFolder.Personal); // Documents folder
            var path = Path.Combine(documentsPath, sqliteFilename);
            // Create the connection
            var conn = new SQLiteConnection(path);
            // Return the database connection
            return conn;
        }
    }
}

[ iOS ]

코드내용 (프로젝트에 맞게 변경이 완료된 내용입니다.)

using System;
using System.IO;
using SQLite;
using Xamarin.Forms;
using XamarinFormsStudy.iOS;

[assembly: Dependency(typeof(SQLite_iOS))]

namespace XamarinFormsStudy.iOS
{
    public class SQLite_iOS : ISQLite
    {

        public SQLite_iOS()
        {
        }

        public SQLiteConnection GetConnection()
        {
            var sqliteFilename = "MySQLiteDB.db3";
            string documentsPath = Environment.GetFolderPath(Environment.SpecialFolder.Personal); // Documents folder
            string libraryPath = Path.Combine(documentsPath, "..", "Library"); // Library folder
            var path = Path.Combine(libraryPath, sqliteFilename);
            // Create the connection
            var conn = new SQLiteConnection(path);
            // Return the database connection
            return conn;
        }
    }
}

[ UWP ]

UWP 는 참조는 추가 되나 관련 파일이 자동으로 추가되지 않습니다.

수동으로 추가해 주어야합니다.

이식가능 프로젝트에 보면 'SQLite-AppSample' 폴더에 readme.txt 파일이 있는데 여기에 UWP 에 넣어야할 코딩이 나와있습니다.

UWP 프로젝트에서 클래스를 추가하고 위 코딩을 넣습니다.

당연히 프로젝트에 맞에 수정을 해야합니다.

코드 내용 (프로젝트에 맞게 변경이 완료된 내용입니다.)

using System.IO;
using Windows.Storage;
using SQLite;
using Xamarin.Forms;
using XamarinFormsStudy.UWP;

[assembly: Dependency(typeof(SQLite_Uwp))]

namespace XamarinFormsStudy.UWP
{
    public class SQLite_Uwp : ISQLite
    {
        public SQLite_Uwp()
        {
        }

        public SQLiteConnection GetConnection()
        {
            var sqliteFilename = "MySQLiteDB.db3";
            string documentsPath = ApplicationData.Current.LocalFolder.Path;
            var path = Path.Combine(documentsPath, sqliteFilename);
            // Create the connection
            var conn = new SQLiteConnection(path);
            // Return the database connection
            return conn;
        }
    }
}

 

[ 이식가능 프로젝트(PCL) ]

이식가능에 추가된 SQLite 관련된 파일중 TodoItem 은 테스트할 데이터에 대한 테이블의 형태가 정의되어있습니다.

using SQLite;

namespace XamarinFormsStudy
{
    public class TodoItem
    {

        // 키 정보이며 하나씩 증가합니다.
        [PrimaryKey, AutoIncrement]
        public int ID { get; set; }

        public string Text { get; set; }

        public bool Done { get; set; }

        public override string ToString()
        {
            return string.Format("Done : {0}, Text : {1}", Done, Text);
        }
    }
}

그리고 SQLiteSamplePage 에서는 CRUD 관련 코딩 예시가 나와있습니다.

또한 ContentPage 도 제공해 주어 바로 실행하여 확인도 가능합니다.

App.xaml 파일에서 아래 처럼 호출되도록 하고 실행해 보면

MainPage = new SQLiteSamplePage().GetSampleContentPage();

아래 와 같은 결과가 나옵니다.

데이터는 입력항목과 스위치 버튼의 true,false 값이 Add 하면 저장되고 Refresh 하게되면 저장된 값이 아래로 나열됩니다.

 

 

참고

https://www.youtube.com/watch?v=nrXmA-0NoOE&index=26&list=PLpbcUe4chE7-5t2mlamz6yB0qzAfO5Yln

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

 

 

블루투스 참고용 링크

https://github.com/aritchie/bluetoothle

 

ListView 는 데이터를 나열하여 표시해주는 컨트롤입니다.

더이상 설명은 필요 없을것 같으니 바로 시작하겠습니다.

신규 ContentPage 를 생성하여 ListViewPage.xaml 를 만듭니다.

ListViewPage.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.ListViewPage">
    <ListView x:Name="MainListView" HasUnevenRows="True">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout Orientation="Horizontal" Padding="10">
                        <Label Text="{Binding ID}"/>
                        <StackLayout VerticalOptions="Center">
                            <Label Text="{Binding Name}" Font="Large"/>
                            <Label Text="{Binding Age}" />
                            <Label Text="{Binding Dept}" Font="Bold" Opacity="0.6"/>
                            <Label Text="{Binding Desc}" Font="Small"/>
                        </StackLayout>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>

위 내용을 설명하자면 ListView.ItemTemplate 은 리스트뷰에 바인딩될 항목에 대해서 일정한 모양으로 바인딩 될수 있도록 해주는

템플릿을 정의하기 위한 것이라고 보면됩니다.

<DataTemplate> <ViewCell > 의 내부에 데이터가 바인딩될 구조를 미리 정의 하면 데이터가 그 구조에 맞게 바인딩됩니다.

디자인 코드를 보면 ID는 왼쪽 끝으로 위치하고 다른 항목들 (Name,Age등) 은 오른쪽에 위치시켜 아래로 쭉 나열하여 위치시킨 것을 알수 있습니다.

이제 ListViewPage.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 ListViewPage : ContentPage
    {
        public ListViewPage()
        {
            InitializeComponent();

            //MainListView.ItemsSource = new List<string> { "AA", "BB", "CC" };

            // 데이터들을 정의합니다.
            ListViewTestData data1 = new ListViewTestData() { ID = 1, Name = "user1", Age = 34, Dept = "Povice", Desc = "TestUser1" };
            ListViewTestData data2 = new ListViewTestData() { ID = 2, Name = "user2", Age = 31, Dept = "Povice", Desc = "TestUser2" };
            ListViewTestData data3 = new ListViewTestData() { ID = 3, Name = "user3", Age = 30, Dept = "Povice", Desc = "TestUser3" };
            ListViewTestData data4 = new ListViewTestData() { ID = 4, Name = "user4", Age = 40, Dept = "kjun", Desc = "TestUser4" };

            List<ListViewTestData> testData = new List<ListViewTestData>();
            testData.Add(data1);
            testData.Add(data2);
            testData.Add(data3);
            testData.Add(data4);

            // ListView 의 Source 에 적용하면 디자인 코드의 itemtemplate 에 바인딩될 항목을들 찾아 바인딩됩니다.
            MainListView.ItemsSource = testData;
        }
    }

    /// <summary>
    ///  ListView 에 바인딩될 데이터입니다.
    /// </summary>
    public class ListViewTestData
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
        public string Dept { get; set; }
        public string Desc { get; set; }
    }
}

 

결과는 아래와 같습니다.

 

LisView 는 디자인을 어떻게 하냐에 따라서 정말 달라보입니다.

Styling 하는 방법도 시간이 된다면 포스팅 할 예정입니다.

 

참고

http://blog.naver.com/goldrushing/220668652665

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

https://www.youtube.com/watch?v=N0e3fPisIw8&list=PLpbcUe4chE7-5t2mlamz6yB0qzAfO5Yln&index=9

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

'C#.NET > Xamarin' 카테고리의 다른 글

(Xamarin Forms) 7.SQLite - PlugIn.SQLite  (0) 2017.07.12
(Xamarin Forms) Bluetooth - 링크  (0) 2017.07.11
(Xamarin Forms) 6.ListView  (0) 2017.07.11
(Xamarin Forms) 5.Chart - OxyPlot (Line Chart)  (0) 2017.07.11
(Xamarin Forms) 5.Chart - OxyPlot  (0) 2017.07.10
(Xamarin Forms) 4.Image  (0) 2017.07.06

지난 포스팅에 이어 http://kjcoder.tistory.com/327

OxyPlot 차트로 라인 차트를 하나 그려보도록 하겠습니다.

차트의 x축은 시간이고 y 축은 숫자 값입니다.

또한 각 포인트에 라벨로 표시를 해주고 동그란 점으로 포인트를 찍을 예정입니다.

신규로 ContentPage 를 하나 만들어 OxyPlotLineChartPage.xaml 를 생성합니다.

xaml파일에는 아래 처럼 이전 포스팅과 동일하게 PlotView 컨트롤을 위치시킵니다.

<?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:oxy="clr-namespace:OxyPlot.Xamarin.Forms;assembly=OxyPlot.Xamarin.Forms"
             x:Class="XamarinFormsStudy.OxyPlotLineChartPage">
        <Grid>
            <oxy:PlotView x:Name ="PlotChart"
                      VerticalOptions="Center"
                      HorizontalOptions="Center"/>
        </Grid>
</ContentPage>

OxyPlotLineChartPage.xaml.cs 파일에서 아래 처럼 코딩해 줍니다.

(설명은 주석에 있습니다.)

using OxyPlot;
using OxyPlot.Annotations;
using OxyPlot.Axes;
using OxyPlot.Series;
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 OxyPlotLineChartPage : ContentPage
    {
        public OxyPlotLineChartPage()
        {
            InitializeComponent();

            Random r = new Random();
            // 차트에 표현해줄 데이터 입니다.
            Dictionary<DateTime, double> data = new Dictionary<DateTime, double>();
            data.Add(new DateTime(2017, 7, 10, 09, 30, 00), r.NextDouble());
            data.Add(new DateTime(2017, 7, 10, 10, 30, 00), r.NextDouble());
            data.Add(new DateTime(2017, 7, 10, 11, 30, 00), r.NextDouble());
            data.Add(new DateTime(2017, 7, 10, 12, 30, 00), r.NextDouble());

            .........

            CreateBarChart(false,"OxyPlot Line Chart", data);
        }

        private void CreateBarChart(bool stacked, string title, Dictionary<DateTime, double> dataList)
        {
            // 차트에 바인딩될 데이터 Model 입니다.
            var model = new PlotModel
            {
                Title = title,
                PlotType = PlotType.XY,
            };

            // x축은 시간이 보이도록 설정합니다.
            model.Axes.Add(new DateTimeAxis
            {
                Title = "시간",
                Position = AxisPosition.Bottom,
                StringFormat = "HH:mm:ss"
            });

            // Y 축은 값입니다.
            model.Axes.Add(new LinearAxis
            {
                Title = "값",
                Position = AxisPosition.Left
            });

            // 각 포인트의 데이터를 model 에 add 합니다.
            // 여기서 PointAnnotation 는 각 포인트에 라벨을 표시하기 위함입니다.
            var Points = new List<DataPoint>();
            //int idx = 0;
            foreach (var i in dataList)
            {
                var pointAnnotation = new PointAnnotation();
                pointAnnotation.X = TimeSpanAxis.ToDouble(i.Key);
                pointAnnotation.Y = i.Value;
                pointAnnotation.TextVerticalAlignment = VerticalAlignment.Top;
                pointAnnotation.TextHorizontalAlignment = HorizontalAlignment.Center;
                pointAnnotation.Text = (i.Value).ToString("#.00");
                // 실제 데이터 값을 포인트에 add 합니다.
                Points.Add(new DataPoint(TimeSpanAxis.ToDouble(i.Key), i.Value));
                // 해당 포인트에 대한 라벨표시값도 추가합니다.
                model.Annotations.Add(pointAnnotation);
            }

            // Line 차트를 그리기 위한 라인시리즈를 정의합니다.
            var s = new LineSeries();

            // 각 포인트에 동그란 점으로 표시하게 합니다.
            s.MarkerType = MarkerType.Circle;
            // 정의한 포이트 데이터들을 라인시리즈의 소스로 적용합니다.
            s.ItemsSource = Points;
            // 차트에 적용할 model 에 추가합니다.
            model.Series.Add(s);

            // 위에서 정의한 model 을 차트에 적용합니다.
            PlotChart.Model = model;
        }
       
    }
}

PlotType 에는 XY, Cartesian, Polar 3가지가 있습니다.

XY 는 보통 저희가 많이 보는 x축과 y축을 가지는 차트입니다.

Cartesian직교 좌표로 1분면 부터 4분면 까지 있는 차트입니다.

Polar 는 극좌표로 3차원 그래프입니다.

위 코드 실행 결과는 아래와 같습니다.

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

차트 컨트롤은 데이터의 추이 및 통계데이터를 볼때 사용됩니다.

차트는 많은 컴포넌트들이 있으며 유료도 존재합니다.

제가 여기서 소개할것은 무료인 OxyPlot 차트 입니다.

oxyplot 는 자마린 뿐만 아니라 윈폼용, WPF 용도 있습니다.

제가 테스트해본 결과는 ios, android, uwp 모두 잘 동작합니다.

이번 포스팅에서는 간단하게 바(bar)차트를 하나 그려보겠습니다.

추후 차트쪽은 계속 포스팅이 될수도 있을것 같습니다.

 

1. 이식가능 프로젝트에 oxyplot 를 nuget 에서 설치합니다.

oxyplot 로 검색하면 OxyPlot.Xamarin.Forms 가 있습니다. 이걸 설치합니다.

'확인' 하고

 

설치완료.

 

2. Android , IOS, UWP 등의 각 프로젝트에도 Nuget 을 통해 OxyPlot.Xamarin.Forms 를 설치합니다.

Android

iOS

UWP

 

3. 각 장치에 따른 코딩 추가

이식 가능 프로젝틑 제외한 각 장치 프로젝트에서 OxyPlot 을 초기화하는 함수를 반드시 호출해 주어야합니다.

Android (MainActivity.cs)

        protected override void OnCreate(Bundle bundle)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(bundle);

            global::Xamarin.Forms.Forms.Init(this, bundle);
            OxyPlot.Xamarin.Forms.Platform.Android.PlotViewRenderer.Init();
            LoadApplication(new App());
        }

iOS (AppDelegate.cs)

        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            global::Xamarin.Forms.Forms.Init();
            OxyPlot.Xamarin.Forms.Platform.iOS.PlotViewRenderer.Init();
            LoadApplication(new App());

            return base.FinishedLaunching(app, options);
        }

UWP (App.xaml)

protected override void OnLaunched(LaunchActivatedEventArgs e)
        {

#if DEBUG
            if (System.Diagnostics.Debugger.IsAttached)
            {
                this.DebugSettings.EnableFrameRateCounter = true;
            }
#endif

            Frame rootFrame = Window.Current.Content as Frame;

            // Do not repeat app initialization when the Window already has content,
            // just ensure that the window is active
            if (rootFrame == null)
            {
                // Create a Frame to act as the navigation context and navigate to the first page
                rootFrame = new Frame();

                rootFrame.NavigationFailed += OnNavigationFailed;

                Xamarin.Forms.Forms.Init(e);
                OxyPlot.Xamarin.Forms.Platform.UWP.PlotViewRenderer.Init();

                if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
                {
                    //TODO: Load state from previously suspended application
                }

                // Place the frame in the current Window
                Window.Current.Content = rootFrame;
            }

            if (rootFrame.Content == null)
            {
                // When the navigation stack isn't restored navigate to the first page,
                // configuring the new page by passing required information as a navigation
                // parameter
                rootFrame.Navigate(typeof(MainPage), e.Arguments);
            }
            // Ensure the current window is active
            Window.Current.Activate();
        }

이제 환경구성은 완료

 

4. 차트를 생성합니다.

Content Page 를 하나 만듭니다.  (OxyPlottPage.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:oxy="clr-namespace:OxyPlot.Xamarin.Forms;assembly=OxyPlot.Xamarin.Forms"
             x:Class="XamarinFormsStudy.OxyPlotPage">
        <Grid>
            <oxy:PlotView x:Name ="PlotChart"
                      VerticalOptions="Center"
                      HorizontalOptions="Center"/>
        </Grid>
</ContentPage>

차트에 데이터를 채웁니다.

using OxyPlot;
using OxyPlot.Axes;
using OxyPlot.Series;
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 OxyPlotPage : ContentPage
    {
        public OxyPlotPage()
        {
            InitializeComponent();
            CreateBarChart(false,"OxyPlot BarChart");
        }

        private void CreateBarChart(bool stacked, string title)
        {
            var model = new PlotModel
            {
                Title = title,
                LegendPlacement = LegendPlacement.Outside,
                LegendPosition = LegendPosition.BottomCenter,
                LegendOrientation = LegendOrientation.Horizontal,
                LegendBorderThickness = 0
            };

            var s1 = new BarSeries { Title = "Series 1", IsStacked = stacked, StrokeColor = OxyColors.Black, StrokeThickness = 1 };
            s1.Items.Add(new BarItem { Value = 25 });
            s1.Items.Add(new BarItem { Value = 137 });
            s1.Items.Add(new BarItem { Value = 18 });
            s1.Items.Add(new BarItem { Value = 40 });

            var s2 = new BarSeries { Title = "Series 2", IsStacked = stacked, StrokeColor = OxyColors.Black, StrokeThickness = 1 };
            s2.Items.Add(new BarItem { Value = 12 });
            s2.Items.Add(new BarItem { Value = 14 });
            s2.Items.Add(new BarItem { Value = 120 });
            s2.Items.Add(new BarItem { Value = 26 });

            var categoryAxis = new CategoryAxis { Position = CategoryAxisPosition() };
            categoryAxis.Labels.Add("Category A");
            categoryAxis.Labels.Add("Category B");
            categoryAxis.Labels.Add("Category C");
            categoryAxis.Labels.Add("Category D");
            var valueAxis = new LinearAxis { Position = ValueAxisPosition(), MinimumPadding = 0, MaximumPadding = 0.06, AbsoluteMinimum = 0 };
            model.Series.Add(s1);
            model.Series.Add(s2);
            model.Axes.Add(categoryAxis);
            model.Axes.Add(valueAxis);

            PlotChart.Model = model;
        }

        private AxisPosition CategoryAxisPosition()
        {
            if (typeof(BarSeries) == typeof(ColumnSeries))
            {
                return AxisPosition.Bottom;
            }

            return AxisPosition.Left;
        }

        private AxisPosition ValueAxisPosition()
        {
            if (typeof(BarSeries) == typeof(ColumnSeries))
            {
                return AxisPosition.Left;
            }

            return AxisPosition.Bottom;
        }
    }
}

App.xaml 에서 이제 위에서 만든 XplotPage.xaml 를 호출해 줘야겠죠

        public App()
        {
            InitializeComponent();

            MainPage = new XamarinFormsStudy.OxyPlotPage();
        }

결과

 

각각의 세부설명은 추후 포스팅에서 더 다루도록 하겠습니다.

 

참고

https://www.codeproject.com/Articles/1167724/Using-OxyPlot-with-Xamarin-Forms

http://docs.oxyplot.org/en/latest/getting-started/hello-xamarin-forms.html

https://github.com/oxyplot/oxyplot

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

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

'C#.NET > Xamarin' 카테고리의 다른 글

(Xamarin Forms) 5.Chart - OxyPlot (Line Chart)  (0) 2017.07.11
(Xamarin Forms) 5.Chart - OxyPlot  (0) 2017.07.10
(Xamarin Forms) 4.Image  (0) 2017.07.06
(Xamarin Forms) Error - ResolveLibraryProjectImports  (0) 2017.07.05
(Xamarin Forms) Error - XamlCTask  (0) 2017.07.05
(Xamarin Forms) 3.Layout  (0) 2017.07.05

ResolveLibraryProjectImports 에러가 발생되었다. 이건 또머야..;

오류항목을 복사 붙여넣기 하니 내용은 아래와 같았다.

심각도 코드 설명 프로젝트 파일 줄 비표시 오류(Suppression) 상태
오류  "ResolveLibraryProjectImports" 작업에서 예기치 않은 오류가 발생했습니다.
System.IO.PathTooLongException: 지정한 경로 및/또는 파일 이름이 너무 깁니다. 정규화된 파일 이름은 260자 미만이어야 하며 디렉터리 이름은 248자 미만이어야 합니다.
   위치: System.IO.PathHelper.GetFullPathName()
   위치: System.IO.Path.LegacyNormalizePath(String path, Boolean fullCheck, Int32 maxPathLength, Boolean expandShortPaths)
   위치: System.IO.Path.NormalizePath(String path, Boolean fullCheck, Int32 maxPathLength, Boolean expandShortPaths)
   위치: System.IO.Path.NormalizePath(String path, Boolean fullCheck, Int32 maxPathLength)
   위치: System.IO.FileStream.Init(String path, FileMode mode, FileAccess access, Int32 rights, Boolean useRights, FileShare share, Int32 bufferSize, FileOptions options, SECURITY_ATTRIBUTES secAttrs, String msgPath, Boolean bFromProxy, Boolean useLongPath, Boolean checkHost)
   위치: System.IO.FileStream..ctor(String path, FileMode mode, FileAccess access, FileShare share)
   위치: System.IO.File.Open(String path, FileMode mode)
   위치: Xamarin.Tools.Zip.ZipEntry.DoExtract(IntPtr zipFile, String destinationPath, FileMode outputFileMode, EntryExtractEventArgs args)
   위치: Xamarin.Tools.Zip.ZipEntry.Extract(String destinationDir, String destinationFileName, FileMode outputFileMode)
   위치: Xamarin.Android.Tools.Files.ExtractAll(ZipArchive zip, String destination, Action`2 progressCallback)
   위치: Xamarin.Android.Tasks.ResolveLibraryProjectImports.Extract(DirectoryAssemblyResolver res, ICollection`1 jars, ICollection`1 resolvedResourceDirectories, ICollection`1 resolvedAssetDirectories, ICollection`1 resolvedEnvironments)
   위치: Xamarin.Android.Tasks.ResolveLibraryProjectImports.Execute()
   위치: Microsoft.Build.BackEnd.TaskExecutionHost.Microsoft.Build.BackEnd.ITaskExecutionHost.Execute()
   위치: Microsoft.Build.BackEnd.TaskBuilder.<ExecuteInstantiatedTask>d__26.MoveNext() XamarinFormsStudy.Android   

현재 솔루션이 내 문서에 있는데 솔루션 및 프로젝트 명이 길어

전체 경로가 너무 길어져 에러가 나는 것 같았다.

그래서 솔루션 경로를 이동하여 주니 해결되었다. 끝.

 

 

'C#.NET > Xamarin' 카테고리의 다른 글

(Xamarin Forms) 5.Chart - OxyPlot  (0) 2017.07.10
(Xamarin Forms) 4.Image  (0) 2017.07.06
(Xamarin Forms) Error - ResolveLibraryProjectImports  (0) 2017.07.05
(Xamarin Forms) Error - XamlCTask  (0) 2017.07.05
(Xamarin Forms) 3.Layout  (0) 2017.07.05
(Xamarin Forms) 2.MasterDetailPage  (0) 2017.06.30

전날까지 잘 실행되던 솔루션이 오늘 빌드를 하니 에러가 발생되었다.

심각도 코드 설명 프로젝트 파일 줄 비표시 오류(Suppression) 상태
오류  "XamlCTask" 작업에서 "DebugType" 매개 변수를 지원하지 않습니다. 해당 매개 변수가 작업에 있는지 그리고 설정 가능한 public 인스턴스 속성인지 확인하세요. XamarinFormsStudy   
오류  해당 입력 매개 변수를 사용하여 "XamlCTask" 작업을 초기화할 수 없습니다. XamarinFormsStudy   
오류  "XamlCTask" 작업에서 "DebugType" 매개 변수를 지원하지 않습니다. 해당 매개 변수가 작업에 있는지 그리고 설정 가능한 public 인스턴스 속성인지 확인하세요. XamarinFormsStudy.Android   
오류  해당 입력 매개 변수를 사용하여 "XamlCTask" 작업을 초기화할 수 없습니다. XamarinFormsStudy.Android 

일단 구글링을 해보니

https://forums.xamarin.com/discussion/54790/the-xamlctask-task-failed-unexpectedly

위 링크에서 솔루션용 NuGet 패키지 관리에서 Xamarin Forms 를 지웠다 다시 깔라는데....

일단 들어가 보았다.

들어가니 아래처럼 업데이트 할 항목이 수두룩했다.

처음에는 Xamarin.Forms 만 업데이트 했으나 여전히 에러가 발생되어 모든 항목을 체크하고 업데이트 진행해 보았다..

비쥬얼스튜디오를 껐다 켜야한다.

재실행하니 에러가 사라졌다!!!

업데이트 하고 되는걸 보니 먼가 버전이 안맞거나 하면 나는 에러로 보인다.

'C#.NET > Xamarin' 카테고리의 다른 글

(Xamarin Forms) 4.Image  (0) 2017.07.06
(Xamarin Forms) Error - ResolveLibraryProjectImports  (0) 2017.07.05
(Xamarin Forms) Error - XamlCTask  (0) 2017.07.05
(Xamarin Forms) 3.Layout  (0) 2017.07.05
(Xamarin Forms) 2.MasterDetailPage  (0) 2017.06.30
(Xamarin Forms) 1.ContentPage  (0) 2017.06.29


Xamarin.Forms는 화면상의 컨텐츠 위치를 결정하는 몇가지 레이아웃 및 기능들을 제공하고 있습니다.

각 레이아웃 컨트롤은 다음과 같습니다.

StackLayout 
: 수평이나 수직 방향으로 순차적으로 정렬을 원할때 사용합니다.
  StackLayout에서 뷰들은 중앙, 왼쪽, 오른쪽으로 정렬될 수 있습니다.

<StackLayout Orientation="Horizontal">
  <Label HorizontalOptions="StartAndExpand" Text="Label" />
  <Button HorizontalOptions="End" Text="Button" />
</StackLayout>

AbsoluteLayout 
: 절대 값이나 절대 비율을 기준으로 좌표 및 크기를 설정하여 뷰들을 정렬할때 사용됩니다. 
  AbsoluteLayout은 레이어 뷰들을 왼쪽, 오른쪽, 중앙으로 고정시킬 때 사용이 가능합니다.

아래 예제를 실행하기 위해선 이미지를 가져와야합니다.
Image 포스팅 참고해주세요 => http://kjcoder.tistory.com/325

위 작업이 마무리 되면 아래처럼 xaml 을 작성합니다.

<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>

 

 RelativeLayout
: 뷰들의 부모의 차원 및 위치에 대한 상대적인 제약을 설정하여 정렬할 때 사용됩니다.

<RelativeLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
  <BoxView Color="Blue" HeightRequest="50" WidthRequest="50"
    RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = 0}"
    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor = 0}" />
  <BoxView Color="Red" HeightRequest="50" WidthRequest="50"
    RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = .9}"
    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor = 0}" />
  <BoxView Color="Gray" WidthRequest="15" x:Name="pole"
    RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.75}"
    RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToParent, Property=Width, Factor = .45}"
    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor = .25}" />
  <BoxView Color="Green"
    RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=.10, Constant=10}"
    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,Property=Width, Factor=.2, Constant=20}"
    RelativeLayout.XConstraint= "{ConstraintExpression Type=RelativeToView, ElementName=pole, Property=X, Constant=15}"
    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=pole, Property=Y, Constant=0}" />
</RelativeLayout>

Grid
: 그리드 형태로 뷰들을 정렬할 때 사용됩니다.
  Row와 Column은 절대 값이나 비율을 기준으로 정해질 수 있습니다.

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
  <Button Text="1" Grid.Row="0" Grid.Column="0" />
  <Button Text="2" Grid.Row="0" Grid.Column="1" />
  <Button Text="3" Grid.Row="0" Grid.Column="2" />
  <Button Text="4" Grid.Row="1" Grid.Column="0" />
  <Button Text="5" Grid.Row="1" Grid.Column="1" />
  <Button Text="6" Grid.Row="1" Grid.Column="2" />
  <Button Text="7" Grid.Row="2" Grid.Column="0" />
  <Button Text="8" Grid.Row="2" Grid.Column="1" />
  <Button Text="9" Grid.Row="2" Grid.Column="2" />
  <Button Text="0" Grid.Row="3" Grid.Column="1" />
  <Button Text="*" Grid.Row="3" Grid.Column="2" />
</Grid>

 

ScrollView 
: 뷰들이 화면의 영역내에 전체가 표시될 수 없을 때 스크롤을 제공하기 위해 사용됩니다.

 

참고

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

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

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

'C#.NET > Xamarin' 카테고리의 다른 글

(Xamarin Forms) Error - ResolveLibraryProjectImports  (0) 2017.07.05
(Xamarin Forms) Error - XamlCTask  (0) 2017.07.05
(Xamarin Forms) 3.Layout  (0) 2017.07.05
(Xamarin Forms) 2.MasterDetailPage  (0) 2017.06.30
(Xamarin Forms) 1.ContentPage  (0) 2017.06.29
(Xamarin Forms) StartTimer  (0) 2017.06.22

+ Recent posts