はじめにWindows Phone 8開発：レッスン2：ローカルアプリケーションストレージへのアクセス
はじめにWindows Phone 8開発：レッスン3.ページナビゲーションと受け渡しの設定
はじめにWindows Phone 8開発：レッスン4：サービスへの接続とデータへのバインド
約束どおり、このレッスンの終わりまでには、Windows Phone 8の本当の開発者のように感じるでしょう。 これで、XAMLを使用してGUIを構築する方法、イベントハンドラーを作成する方法、ページをナビゲートする方法、ローカルストレージにデータを保存する方法をすでに知っています。 実際のアプリケーションを作成するためにマスターする必要があるのは、データバインディングとサービス間の相互作用だけです。
データバインディングとは
レッスン3のニュースアプリの説明を覚えていますか？ ユーザーに表示する必要がある多くのニュースがあります。 最初に理解することは、ニュースがどのように見えるか、そしてどのようにそれをユーザーに見せるかです。 私に関しては、ニュースは見出し、簡単な説明、おそらく写真、そして詳細ボタンのようなもので構成する必要があります。
ニュースをUI（ユーザーインターフェイス）にバインドするプロセス-これはデータをバインドするプロセスです。
ただし、よく知られた理由により、ユーザーがすべてを読むために十分に長いスクロールを使用する必要があるため、1ページにすべての詳細を含むすべてのニュースをすぐに表示することはできません。 これは、2つのページを使用して解決されます-1つはニュースのリストのみ、もう1つは選択されたニュースの詳細です。
データをバインドする方法は？
まず、リストボックスを定義します。 ListBox.ItemTemplateタグ内でリストの外観を指定できることに注意してください。 DataTemplateにはデータバインディングプランが含まれます。 コントロールをバインドするには、まず、バインドする属性、たとえば画像（イメージ）をImageコントロールに見つけ、テキストをTextBlockコントロールに添付します。
コード
<ListBox x:Name="NewsList" Height="490" HorizontalAlignment="Left" Margin="5,25,0,0" VerticalAlignment="Top" Width="444" SelectionChanged="NewsList_SelectionChange" > <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal" VerticalAlignment="Top" > <Image Sourse="{Binding Thumb}" Height="60" Stretch="Fill" > <TextBlock Text="{Binding Title}" FontSize="20" TextWrapping="Wrap" > </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox>
ここでは、コンテンツアイテムのテンプレートにStackPanelを使用します。画像、その横にTextBlockです。 次のようになります。
WCFサービスを使用する
WCFについては説明しませんが、このサービスの機能については説明します。 コードの遅延読み込みとチェック。 プロパティTitle、Content、Thumbを含むWindowsPhoneLessonNewsというクラスがあります。 また、2つの操作があります。1つはすべてのニュースをダウンロードするためのもので、もう1つはインデックスによってニュースをダウンロードするためのものです。
使用できるように、サービスへのリンクを追加します。 「参照」を右クリックして、「サービス参照の追加」を選択します。
私のサービスはポート8080のローカルサービスでホストされています。サービスに移動して選択します。 サービスの名前はLesson4PhoneNewsServiceです。
サービスへのリンクを追加したので、使用を開始できます。 はじめに、ページが読み込まれたときに何が起こるかを考えてみましょう。 ほとんどの場合、すべてのニュースを受信するために非同期呼び出しを使用していることにすでに気づいています。 非同期呼び出しを使用するため、サービスから応答を取得するまでGUIをブロックしないようにする必要があります。
コード
private void PhoneApplicationPage_Loaded_1(object sender, RoutedEventArgs e) { NewsServiceClient newsClient = new NewsServiceClient; newsClient.GetAllNewsCompleted += newsClient_GetAllNewsCompleted; newsClient.GetAllNewsAsync(); ProgressLoader.Visibility = Visibility.Visible; ProgressLoader.IsIndeterminate = true; }
ダウンロードがユーザーにとってさほど退屈ではないことを確認するために、ロードバーを追加します。データの受信中はアニメーション化されますが、データの受信がない場合、ストリップは非表示になります。
コード
</ListBox.ItemTemplate> </listBox> <ProgressBar x:namespace="ProgressLoader" Height="10" Visibility="Collapsed"/>
非同期プログラミングのもう1つの機能は、サービスから応答を受け取った後に何をするかをアプリケーションに伝える必要があることです。 ListBoxのItemsSourceを、サービスから取得した応答の結果に割り当て、ダウンロードバーを非表示にします。
コード
void newsClient_GetAllNewsCompleted(object sender, GetAllNewsCompletedEventArgs e) { NewsList.ItemSourse = e.Result; NewsList.SelectedIndex = -1; ProgressLoader.Visibility = Visibility.Collapsed; ProgressLoader.IsIndeterminate = false; }
また、サービスがリストを返すこともわかっているため、すぐに応答をListBoxに添付します。
そして、ニュースをクリックするとどうなりますか？
ニュースをクリックしたときにイベントハンドラを作成しましょう。 インデックスの有効性を確認し、ユーザーをページにリダイレクトします。その際、パラメーターとしてインデックスを渡し、完全な情報が表示されます。 したがって、NewsDetailsページでは、どのニュースを完全に表示するかを決定できます。
コード
private void News_List_SelectionChanged(object sender, SelectionChangedEventArgs e) { if(NewsList.SelectedIndex != 1) NavigationService.Navigate(new Uri(string.Format("/NewsDetails.xaml?NewsId={0}", NewsList.SelectedIndex.ToString()), UriKind.Relative)); }
コード
private void PhoneApplicationPage_Loaded_1(object sender, RoutedEventArgs e) { NewsServiceClient client = new NewsServiceClient(); client.GetNewsByIDCompleted += client_GetNewsByIDCompleted; client.GetNewsByIDAsunc(int.Parse(NavigationContext.QueryString["NewsID"].ToString())); }
非同期呼び出しの場合もほぼ同じです。
コード
void client_GetNewsByIDCompleted(object sender, GetNewsByIDCompletedEventArgs e) { List<WindowsPhoneLessonNews> selectedNews = new List<WindowsPhoneLessonNews>(); selectedNews.Add(e.Result); NewsList.ItemSource = selectedNews; }
前のページに戻るには、電話の[戻る]ボタンを押します。
外観に取り組みます
以下は、コンテンツがWebサービスなどから取得されることを示すTextBlockで構成されるメインページのレイアウトです。
コード
<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <TextBlock Text="List is being populated from the web service, tap" TextWrapping="Wrap" Padding="0,0,10,0"> </Textlock> <ListBox x:Name="WewsList" Height="490" HorizontalAlignment="Left" Margin="5,25,0,0" VerticalAlignment="Top" Width="444" SelectionChanged="WewsList_SelectionChanged" > <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal" VerticalAlignment="Top"> <Image Source="{Binding Thumb}" Height="60" Stretch="Fill"/> <TextBlock Text="{Binding Title}" FontSize="20" TextWrapping="Wrap"/> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> <ProgressBar x:Name="ProgressLoader" Height="10" Visibility="Collapsed"/> </StackPanel>
NewsDetailsページ。 メインページのXAMLとほぼ同じです。 StackPanelの向きが垂直に変更され、写真が切り取られ、ニュースコンテンツが追加されます。 また、タイトルのフォントサイズを40に変更しました。
テスト中！
必要なニュースをクリックすると、詳細情報のページが開きます。
4つのレッスンすべてを要約するには
したがって、XAML、ビジュアルページエディター、レイアウト、イベントハンドラー、ナビゲーション、データバインディングを使用して、Windows Phone 8用のアプリケーションを作成するための十分な知識が得られました。
私のレッスンがお役に立てば幸いです。そして、それらから始めて、自己啓発と改善ができることを願っています。
がんばって。