지난 포스팅에 이어 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

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   

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

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

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

 

 

'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 만 업데이트 했으나 여전히 에러가 발생되어 모든 항목을 체크하고 업데이트 진행해 보았다..

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

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

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

'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

'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

MsaterDetailPage 는 마스터 페이지와 마스터 정보에 대한 하위 수준의 세부 정보를 표시하는 세부 정보 페이지를 관리할때 사용됩니다.

쉽게 말하면 왼쪽 슬라이드 메뉴에 마스터 정보가 표시되고 해당 항목을 클릭하면 마스터의 세부정보가

전체 화면으로 보여지게되는 것입니다.

아래처럼 왼쪽 메뉴에 마스터 정보가 표시되고 Page1 마스터 항목을 클릭하게되면

아래 처럼 해당 항목에 대한 세부 내용이 표시되는 것입니다.

위 내용은 제가 만든게 아니라 프로젝트에서 추가>새항목>MasterDetailPage 을 하게되면 위처럼 화면에 표시가 되도록 기본 구성됩니다.

MasterDetailPage1Master : 마스터 정보(왼쪽 슬라이드 메뉴)의 구성을 나타냅니다. (page.Title 항목이 반드시 있어야합니다.)

MasterDetailPage1MenuItem : MasterDetailPage1Master 에서 사용되는 메뉴 구조가 정의됩니다.

MasterDetailPage1Detail : 마스터 정보가 선택되면 나타나는 세부 정보 입니다.

 

아래는 XAML 로만 구성한 방식입니다.

XamarinFormsStudy 의 MainPage (ContentPage) 를 세부 항목 창으로 사용하는 예제입니다.

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamarinFormsStudy.MasterDetailTestPage"
             xmlns:local="clr-namespace:XamarinFormsStudy">

    <MasterDetailPage.Master>
        <ContentPage Title="MasterDetailPage">
            <StackLayout Orientation="Vertical">
                <Button Text="자기소개"/>
                <Button Text="경력" />
                <Button Text="자격증"/>
                <Button Text="집주소"/>
            </StackLayout>
        </ContentPage>
    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <local:MainPage/>
    </MasterDetailPage.Detail>
   
</MasterDetailPage>

 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 MasterDetailTestPage : MasterDetailPage
    {
        public MasterDetailTestPage()
        {
            InitializeComponent();
        }
    }
}

 

참고

https://www.youtube.com/watch?v=yaC0-C942wk

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

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

'Xamarin' 카테고리의 다른 글

(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
(Xamarin) WiFi 접속하기  (0) 2017.06.18

오늘 부터 짬나는대로 Xamarin Forms 기초 내용부터 포스팅할 예정입니다.

오늘은 그 첫번째 시간으로 ContentPage 에 대해서 알아보겠습니다.

가장 기본인 화면뷰 로써 ContentPage 에는 어떤 컨트롤이든 위치시킬수 있습니다.

아래는 ContentPage Class 의 모습입니다.

    public class ContentPage : TemplatedPage
    {
        //
        // 요약:
        //     Backing store for the Xamarin.Forms.ContentPage.Content property.
        //
        // 설명:
        //     To be added.
        public static readonly BindableProperty ContentProperty;

        public ContentPage();

        //
        // 요약:
        //     Gets or sets the view that contains the content of the Page.
        public View Content { get; set; }

        //
        // 요약:
        //     Method that is called when the binding context changes.
        //
        // 설명:
        //     To be added.
        protected override void OnBindingContextChanged();
    }

 

크로스플랫폼 솔루션을 구성하면 기본적으로 MainPage 를 호출하도록 되어있는데요

        public App()
        {
            InitializeComponent();

            MainPage = new XamarinFormsStudy.MainPage();
        }

이 MainPage 가 ContentPage 로 구현되어있습니다.

    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }

라벨을 하나 추가하려면 아래처럼 Content 에 라벨을 하나 만들어 주면 됩니다.

        public MainPage()
        {
            InitializeComponent();
            Content = new Label
            {
                Text = "Hello, Forms!",
                VerticalOptions = LayoutOptions.CenterAndExpand,
                HorizontalOptions = LayoutOptions.CenterAndExpand,
            };
        }

결과

 

라벨만을 가지고 화면을 구성하는 경우는 드물기 때문에

아래처럼 윈폼의 Panel 과 같은 역할을 하는 Layout 을 먼저 선언하고

그안에 라벨을 넣어주는게 정석? 입니다.

        public MainPage()
        {
            InitializeComponent();

            Content = new StackLayout
            {
                VerticalOptions = LayoutOptions.CenterAndExpand,
                Children =
                {
                    new Label{
                                Text = "Hello, Forms!",
                                VerticalOptions = LayoutOptions.CenterAndExpand,
                                HorizontalOptions = LayoutOptions.CenterAndExpand,
                    }
                }
            };
        }

결과 화면은 위 결과화면과 동일합니다.


또한, XAML 형식으로도 화면정의가 가능합니다.

위 코드 내용을 모두 지우고 MainPage.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"
             x:Class="XamarinFormsStudy.MainPage">
    <StackLayout VerticalOptions="Center" >
        <Label Text="Hello, Forms!"
               VerticalOptions="Center"
               HorizontalOptions="Center" />
    </StackLayout>
</ContentPage>

 

참고 :

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

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

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

'Xamarin' 카테고리의 다른 글

(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
(Xamarin) WiFi 접속하기  (0) 2017.06.18
(Xamarin.Android) splash screen 넣기  (0) 2017.06.17

Xamarin Forms 에서 Timer 를 쓸려고 하는데 쓸수가 없다;

찾아보니 Xamarin.Foms 에 Device.StartTimer 라는게 있어 이걸 사용하면 된다고한다.

사용방법은 기존 타이머와 방식이 좀 다르다.

 

        public MainPage()
        {
            InitializeComponent(); 

            Device.StartTimer(TimeSpan.FromSeconds(3), () =>
            {
                // 호출할 메서드나 내용을 넣고
                GetDataAsync();

               // 리턴을 해주는데 True 이면 계속 반복, False 이면 정지 한다.
                return true;
            });
        }

        public async void GetDataAsync()
        {
            ....
        }

위 내용은 3초 단위로 타이머가 동작하면서 GetDataAsync() 함수를 호출하게된다.

 

참고 : https://xamarinhelp.com/xamarin-forms-timer/

'Xamarin' 카테고리의 다른 글

(Xamarin Forms) 2.MasterDetailPage  (0) 2017.06.30
(Xamarin Forms) 1.ContentPage  (0) 2017.06.29
(Xamarin Forms) StartTimer  (0) 2017.06.22
(Xamarin) WiFi 접속하기  (0) 2017.06.18
(Xamarin.Android) splash screen 넣기  (0) 2017.06.17
(Xamarin.Android) AdMob 광고 넣기 (2)  (3) 2017.06.15

    private void EnableWifi()
   
{
     
string networkSSID = "bbox-xxx";
     
string networkPass = "mypass";

     
WifiConfiguration wifiConfig = new WifiConfiguration();
      wifiConfig
.Ssid = string.Format("\"{0}\"", networkSSID);
      wifiConfig
.PreSharedKey = string.Format("\"{0}\"", networkPass);

     
WifiManager wifiManager = (WifiManager)Application.Context.GetSystemService(Context.WifiService);

     
// Use ID
     
int netId = wifiManager.AddNetwork(wifiConfig); wifiManager.Disconnect();
      wifiManager
.EnableNetwork(netId, true);
      wifiManager
.Reconnect();
   
}

 

 

참고

https://stackoverflow.com/questions/8818290/how-do-i-connect-to-a-specific-wi-fi-network-in-android-programmatically

https://gist.github.com/Cheesebaron/5844638

'Xamarin' 카테고리의 다른 글

(Xamarin Forms) 1.ContentPage  (0) 2017.06.29
(Xamarin Forms) StartTimer  (0) 2017.06.22
(Xamarin) WiFi 접속하기  (0) 2017.06.18
(Xamarin.Android) splash screen 넣기  (0) 2017.06.17
(Xamarin.Android) AdMob 광고 넣기 (2)  (3) 2017.06.15
(Xamarin.Android) AdMob 광고 넣기 (1)  (0) 2017.06.15

+ Recent posts