프로그래밍/Xamarin .Forms: 2개의 글

Xamarin.Forms 화면간 이동 기능 구현

Posted by 고 고특파원
2019. 3. 12. 23:25 프로그래밍/Xamarin .Forms

Xamarin.Froms에서의 화면간 이동 기능 구현을 할것이다.

 

일단 Xamarin 메뉴얼을 보면 정확하게 개념을 확인 할수 있다.

 

아래 링크를 확인하자.

 

https://docs.microsoft.com/ko-kr/xamarin/xamarin-forms/app-fundamentals/navigation/hierarchical

대충 요약해 보자면, 계층적 탐색을 하고 Page를 Push 하게 되면 페이지 위에 페이지가 올라가는 구조이고, Page를 Pop하게 되면 최상단 페이지가 사라지게 된다.

 

 

 

1. App.xaml.cs 수정

 

App.xaml.cs의 페인 페이지를 수정한다.

NavigationPage

 

public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
            


            MainPage = new NavigationPage(new MainPage());
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }


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:MoveTest"

             x:Class="MoveTest.MainPage">


    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="50"/>

            <RowDefinition Height="50"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="*"/>

        </Grid.ColumnDefinitions>


        <Entry Grid.Row="0" Grid.Column="0" Text="첫번째 페이지에요!"/>

        <Button Grid.Row="1" Grid.Column="0" 

                x:Name="btnMoveSecond" Clicked="BtnMoveSecond_Clicked" 

                Text="다음페이지 이동"/>


    </Grid>


</ContentPage>


MainPage.xaml.cs



//두번째 페이지로 이동

        private async void BtnMoveSecond_Clicked(object sender, EventArgs e)

        {

            //두번째 페이지 Push 계층적 탐색

            await Navigation.PushAsync(new SecondView());

        }



여기에서 중점으로 봐야할 부분은 Navigation.PushAsync() 이부분이다.

Push를 하고 있는 부분임.



SecondView.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="MoveTest.SecondView">

    <ContentPage.Content>


        <Grid>

            <Grid.RowDefinitions>

                <RowDefinition Height="50"/>

                <RowDefinition Height="50"/>

                <RowDefinition Height="*"/>

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="150"/>

                <ColumnDefinition Width="*"/>

                <ColumnDefinition Width="150"/>

            </Grid.ColumnDefinitions>


            <Entry Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Text="두번째 페이지에요!"/>

            <Button Grid.Row="1" Grid.Column="0" 

                x:Name="btnBack" Clicked="BtnBack_Clicked" 

                Text="뒤로 이동"/>

            <Button Grid.Row="1" Grid.Column="2" 

                x:Name="btnMoveThird" Clicked="BtnMoveThird_Clicked" 

                Text="다음페이지 이동"/>


        </Grid>


    </ContentPage.Content>

</ContentPage>


SecondView.xaml.cs


async void BtnBack_Clicked(object sender, EventArgs e)

        {

            //첫번째 페이지로 이동하는것이기 때문에 Pop

            //첫번째 페이지 Pop 계층적 탐색

            await Navigation.PopAsync();

        }


        async void BtnMoveThird_Clicked(object sender, EventArgs e)

        {

            //세번째 페이지 이동 Push

            await Navigation.PushAsync(new ThirdView());

        } 


현재 페이지는 두번쨰 페이지이므로 첫번째 페이지로 Pop을 할 수 있고, 아니면 Push를 통해 세번째 페이지로 이동 한다.



ThirdView.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="MoveTest.ThirdView">

    <ContentPage.Content>


        <Grid>

            <Grid.RowDefinitions>

                <RowDefinition Height="50"/>

                <RowDefinition Height="50"/>

                <RowDefinition Height="*"/>

            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="*"/>

            </Grid.ColumnDefinitions>


            <Entry Grid.Row="0" Grid.Column="0" Text="마지막 페이지에요!"/>

            <Button Grid.Row="1" Grid.Column="0" 

                x:Name="btnFirst" Clicked="BtnFirst_Clicked" 

                Text="처음으로"/>


        </Grid>

        

    </ContentPage.Content>

</ContentPage>


ThirdView.xaml.cs


async void BtnFirst_Clicked(object sender, EventArgs e)

        {

            //첫번째 Root로 이동

            await Navigation.PopToRootAsync();

        }


세번째에서 첫번째로 이동하기 위해서 PopToRootAsync() 함수를 호출한다.


Root페이지로 이동을 하게 되며 중간에 계층으로 쌓인 페이지들은 사라진다.



결과를 사진으로 확인해보자.




정상적으로 잘 동작한다!






이 댓글을 비밀 댓글로

Xamarin Forms 개발환경 설정 및 기본 프로젝트 생성

Posted by 고 고특파원
2019. 3. 11. 19:16 프로그래밍/Xamarin .Forms

개발환경 설정


개발 OS : Windows7

개발 툴 : VisualStudio 2017 Community

디버깅 기기 : 갤럭시S7


VisualStudio 2017 Community은 MS 사이트에서 받으면 되므로 간단히 생략한다.





개발자 옵션에서 USB 디버깅 허용으로 체크!


이렇게 한다고 연결이 되지 않을 경우가 있는데 그럴때에는 삼성 갤럭시7 기준으로,,


[Android USB Driver for Windows]

https://developer.samsung.com/galaxy/others/android-usb-driver-for-windows



해당 링크에서 usb 드라이버를 설치해보자.



Android SDK 및 도구


Google USB Driver 도 설치해야함.


참고로 VisualStudio는 지속적으로 업데이트를 해주는것을 권장한다.

C:\Program Files (x86)\Microsoft Visual Studio\Installer 

경로 안의 vs_installer.exe


현재는 더이상 업데이트할 내용이 없는것으로 보인다.



Xamrin.Forms는 지속적으로 업데이트가 되어있으므로 안정화 되어있는 최신버전으로 업데이트를 하도록 한다. 업데이트는 Nuget 솔루션 패키지 관리에서 업데이트를 하면 된다.








프로젝트 생성


파일 -> 새로만들기 -> 프로젝트 -> Cross-Platform



플랫폼은 안드로이드 , iOS로 할것이고 UWP는 생략(윈도우10용 앱)

여기에서 코드 공유전략은 .NET Standard로 고정..!


공유 프로젝트도 있긴 하지만 차이점은 사실 잘 모르겠음. 왜 나누었을까


개발환경이 설정되었으므로 기본 생성된 템플릿으로 빌드를 해서 결과를 확인한다.






이 댓글을 비밀 댓글로