Seoul Bus Info Search App Dev 9

방금 기본적인 기능은 모두 완성을 했다. 아주 멋진 디자인은 아니지만, 가뭄에 단비가 내리는 정도로도 기쁘듯이, 그동안 버스 엡을 기다려온 윈폰 유저에게는 좋은 소식이 될 것 같다. 강좌를 마치고 나머지 마무리 작업을 해서 마켓플레이스에 올리도록 하겠다. 금주 내로 올리면 다음주에는 다운 받을 수 있을 것이라 생각한다.

 

1. 로딩 화면을 추가해 보자

목표 화면이다.

 

Windows Phone 7 Toolkit을 References 추가해서, 그곳에 있는 PerformanceProgressBar를 사용 하도록 하겠다. 우선 기본 도구에도 ProgressBar가 존재 하지만, 구글링을 해보았을 때 프로그램 성능 저하를 줄 수 있다고 해서 대부분 PerformanceProgressBar를 이용해서 로딩 화면을 구성하는 것을 권장 하고 있으니, 따라 가도록 하겠다.

 

1) Windows Phone 7 Toolkit 추가 방법 1, 직접 빌드해서 추가한다.

Silverlight for Windows Phone Toolkit - Feb 2011

http://silverlight.codeplex.com/releases/view/60291

Recommended Download -> 클릭 -> Download

 

Using WP7 Toolkit Controls in Windows Phone 7.1 Mango

http://windowsphonegeek.com/tips/Using-WP7-Toolkit-Controls-in-Windows-Phone-7-1-Mango

페이지를 참고해서 Microsoft.Phone.Controls.Toolkit 프로젝트만 빌드를 해서 Microsoft.Phone.Controls.Toolkit.dll을 만든 후 프로젝트에 추가한다.

 

2) Windows Phone 7 Toolkit 추가 방법 2, Manage NuGet Packages를 이용해서 설치한다.

VS2010 -> Tools -> Library Package Manager -> Manage NuGet Packages…클릭

검색에 windows phone toolkit을 입력하면 Silverlight for Windows Phone Toolkit이라는 항목이 나온다.

선택 후 Install을 클릭하면 설치된다.

 

참고로 NuGet으로 추가하면 여러 가지 파일들이 함께 프로젝트에 추가가 된다.

 

2. LoadingView.xaml 만들기

 

Views폴더에

Add -> New Item -> Windows Phone User Control -> Name : LoadingView.xaml

F6을 누른 후 Blend로 이동한다.

 

 

완성된 로딩 화면 소스이다.

 

<UserControl

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

           x:Class="BusInfo.Views.LoadingView"

    mc:Ignorable="d"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}"

    d:DesignHeight="480" d:DesignWidth="480" Height="800" Width="480">

   

    <Grid x:Name="LayoutRoot">

 

          <Border BorderBrush="Black" BorderThickness="1" Opacity="0.5" Background="Black"/>

          <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="잠시만 기다려 주세요" VerticalAlignment="Center" Margin="0,0,0,50"/>

 

          <toolkit:PerformanceProgressBar Margin="0" IsIndeterminate="True" RenderTransformOrigin="0.5,0.5"/>

 

    </Grid>

</UserControl>

 

3. MainPageViewModel.cs 추가

 

/// <summary>

/// 스플래쉬 팝업

/// </summary>

Popup Splash;

 

생성자에 추가

//스플래쉬 팝업 생성

Splash = new Popup() { IsOpen = false, Child = new LoadingView() };

 

SelectionChangedCommand, RefreshCommand, GetBusRouteListCommand 에

Splash.IsOpen = true; // 추가 위치는 하단에

 

wc_DownloadStringCompleted에

Splash.IsOpen = false; // 추가 위치는 하단에

 

여기 까지 작성 한 후 테스트를 해보자. 너무 순식간에 지나간다면.. Splash.IsOpen = false; 문장을 잠깐 주석 처리 해서 확인 한다.

 

4. 버스 목록 정렬

버스 검색 했을 때 여러 대가 나올 때 정렬이 되어 있지 않아 찾기가 쉽지 않다. 그래서 정렬하는 코드를 추가한다.

BusRouteCollection = new ObservableCollection<BusRouteModel>(rows);

위의 코드를 찾아서 아래와 같이 수정한다.

BusRouteCollection = new ObservableCollection<BusRouteModel>(rows.OrderBy(p => p.BusRouteNm));

 

*즐겨 찾기 기능까지 완성된 화면

5. 즐겨 찾기 기능까지
설명을 하면 좋은데 지금 시간이 너무 늦어서..오늘은 이만 줄여야 할 것 같다. 내용이 너무 많아서 내일이나 모래 정리를 해서 올리도록 하겠다. 그럼 남은 시간 행복하게..