블로그 이미지
* Microsoft MVP - Windows Development 2014 ~ 2020 http://youtube.com/FutureOfDotNet kaki104

카테고리

List All (607)
Visual Studio (7)
Blazor (2)
Windows App(Universa.. (104)
Xamarin Forms (4)
Bot Framework (19)
Azure (9)
Windows 10 (53)
WPF (7)
Facebook News & Tips (158)
Windows 8&8.1 (113)
Windows Phone 8 (42)
Silverlight (37)
HTML5 & MVC4 (16)
Portable Class Library (2)
Uncategorised Tips a.. (3)
Kinect for Windows (2)
ETC (12)
kaki104 Scrap (4)
App News (11)
Total548,251
Today7
Yesterday33

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

 

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

'Windows Phone 8 > Korea Bus Information' 카테고리의 다른 글

Seoul Bus Info Search App Dev 11  (0) 2012.01.13
Seoul Bus Info Search App Dev 10  (0) 2012.01.13
Seoul Bus Info Search App Dev 9  (0) 2012.01.12
My BusInfo app deploy  (0) 2012.01.08
Seoul Bus Info Search App Dev 7  (0) 2012.01.07
Seoul Bus Info Search App Dev 6  (0) 2012.01.07
Posted by MVP kaki104

댓글을 달아 주세요