[셰어텍] 5. 앱 디자인 완성!

환영합니다, Rolling Ress의 카루입니다.

​

시험이 끝나니 살 것 같네요. 여러분들 보고서 쓰고 계실 동안.. 저는 부리나케 앱 개발을 마무리 지었습니다.

참고로 이 앱은 이런 식의 화면 구성을 갖고 있습니다.

 

MainPage.xaml (메인페이지)

앱을 실행하면 가장 먼저 보이는 페이지입니다. 큰 두 개의 버튼으로 구성되어 있으며, 둘 중 아무 버튼을 누르면 다음 페이지로 넘어갑니다. 선택한 버튼에 따라서 표시되는 컨텐츠가 다릅니다.

코드는 이렇습니다.

 

NavigationPage.xaml (내부 페이지의 틀)

이건 그냥 아무 기능도 하지 않습니다. 틀을 가지는 페이지인데, 이 안에서 이제 탐색이 진행됩니다.

디자인 코드는 위와 같습니다. 별 건 없어요.

public sealed partial class NavigationPage : Page 
{
    public static int? NavigateToIndex { get; set; } = null; 
    public NavigationPage() 
    { 
        this.InitializeComponent(); 
        if (NavigateToIndex is not null) 
        { 
            ContentFrame.Navigate( 
                NavigateToIndex switch 
                {
                    0 => typeof(FirstPage), 
                    1 => typeof(TmiBoard), 
                    _ => throw new Exception("NavigationPage: Got invalid value from MainPage.")
                }, null, new DrillInNavigationTransitionInfo()); 
                Navigation.SelectedItem = Navigation.MenuItems[NavigateToIndex.Value]; 
                NavigateToIndex = null; 
            }
        }
        
    private void Navigation_ItemInvoked(muxc.NavigationView sender, 
        muxc.NavigationViewItemInvokedEventArgs args) 
        { 
            if (Navigation.SelectedItem is not muxc.NavigationViewItem ItemContent) 
                return; 
            
            ContentFrame.Navigate(ItemContent.Tag switch
            {
                "FirstPage" => typeof(FirstPage), 
                "SecondPage" => typeof(TmiBoard), 
                "Settings" => typeof(FirstPage), 
                _ => throw new Exception("Navigation item value error") 
            }, null, args.RecommendedNavigationTransitionInfo); 
        } 
        
        private void Navigation_BackRequested(muxc.NavigationView sender, 
            muxc.NavigationViewBackRequestedEventArgs args) 
        { 
            var page = ContentFrame.SourcePageType; 
            if (page == typeof(FirstPage) || page == typeof(TmiBoard)) 
                Frame.Navigate(typeof(MainPage), null, new DrillInNavigationTransitionInfo()); 
                
            else if (page == typeof(PostPage)) 
                ContentFrame.Navigate(typeof(TmiBoard)); 
        }
    }

내부 코드도 간단합니다. 그냥 선택 받고 넘기고.. 하는 과정입니다.

 

TmiBoard.xaml (TMI 게시판)

위 보이는 게시글은 제가 임의로 만들어서 넣어둔 겁니다. 실제로 사용할 땐 다른 사람들이 글을 작성하겠죠. 참고로 저 글 목록도 모두 다 버튼입니다.

 

참고로 저 버튼은 저렇게 생겼습니다. 이게 XAML에서 디자인을 하면 쉬운데... 동적 버튼이라 C#에서 해야 합니다. 그래서 조금(?) 길어요. 그래도 한 번 만들어두면 재탕할 수가 있으니 효율은 나쁘지 않습니다.

 

---

 

대략적인 디자인은 끝났습니다. 이제 저 안에서 자유롭게 이동할 수 있고, 우리가 해야 할 일은 "게시글 페이지 디자인", "왼쪽 버튼 기능 추가" 등입니다. 자세한 건 다음 회의 때 얘기하도록 합시다. 오늘은 그냥 짤막한 브리핑이었습니다.