PR

画像の削除にあわせて自動的に並び替え+1つのサンプル

2013年1月18日(金)
薬師寺 国安

今回は2つのサンプルを紹介します。「サーバーからの画像を取得する」と「画像が削除された際自動的に並び変わる」の2つです。

まずは、「サーバーからの画像を取得する」を紹介します。

サーバーからの画像を取得する

前回の「CountDownControlでカメラのシャッターを切る」の中で、選択した画像をサーバーにアップする機能を付けていました。今回のサンプルでは、そのサーバーにアップした画像を一覧で表示させるサンプルです(図1)。サーバーは各自が用意したサーバーを指します。このサンプルは前回のCountDownControlでカメラのシャッターを切る」と関連していますので、その点ご留意ください。

図1:サーバーからの画像を一覧で表示している(クリックで拡大)

実際に動かした動画は下記のようになります。Windows Store Applicationの動画を撮るアプリケーションが存在していませんので、スマホで撮った動画です。見難い点はご了承願います。

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

プロジェクトの作成

VS 2012のメニューから[ファイル(F)/新規作成(N)/プロジェクト(P)]と選択します。次に、「テンプレート」から「Windows ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。「名前(N)」に任意のプロジェクト名を指定します。ここでは「Win8_LoadImageFileFromServer」という名前を付けています。

コントロールの配置

要素のWidthは、筆者のPCの解像度から1920と指定しています。

ツールボックスからデザイン画面上にScrollViewerコントロールと、その中にGridViewコントロールを1個ずつ配置します。ScrollViewerコントロールのHorizontalScrollBarVisibilityプロパティにVisibleを指定して水平スクロールバーの表示を可能にします。GridViewのWidthには1920、FlowDirectionにはLeftToRightと指定しておきます。「サーバーから画像を取得」と書かれたButtonコントロールも1個配置します。書き出されるXAMLコードはリスト1、レイアウトは図2のようになります。

リスト1 書き出されたXAMLコード(MainPage.xaml)

  • (1)要素を配置し、子要素として要素を配置しています。は、データを水平に表示する要素です。Widthには1920を指定し、FlowDirectionプロパティにはLeftToRightを指定しています。要素のHorizontalScrollBarVisibilityプロパティにはVisibleを指定して、水平スクロールバーの表示を可能にしています。
  • (2)「サーバーから画像を取得」用
<Page
  x:Class="Win8_LoadImageFileFromServer.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:Win8_LoadImageFileFromServer"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d" Width="1920">

  <Grid Background="{StaticResourceApplicationPageBackgroundThemeBrush}">
    <ScrollViewer   Width="2500" HorizontalScrollBarVisibility="Visible" >■(1)
      <GridViewx:Name="GridView1"  HorizontalAlignment="Left" VerticalAlignment="Center" FlowDirection="LeftToRight" Width="1920"/>■(1)
    </ScrollViewer>■(1)
    <Button x:Name="Button1" Content="サーバーから画像を取得" Margin="0,10,0,684" FontFamily="Meiryo UI" FontSize="36" Height="74"/>■(2)
  </Grid>
</Page>
図2:各コントロールを配置した(クリックで拡大)

ドキュメントライブラリへのアクセス許可

今回はドキュメントライブラリ内のImageFileList.xmlを読み込むために、ドキュメントライブラリのアクセス許可が必要になります。ソリューションエクスプローラー内にpackage.appxmanifestというファイルがありますので、このファイルをダブルクリックします。「機能」タブをクリックして、表示される「機能:」から、「ドキュメントライブラリ」にチェックを付けてください。

Windows ストアに申請する際、ドキュメントライブラリにチェックを付けたファイルは、アップロード時にはねられてしまいます。そのため、Windows ストアに公開する際は、ピクチャライブラリにサブフォルダを作って、その中にXMLファイルを作成し、読み込むようにしたほうが良いでしょう。このサンプルでは、ドキュメントライブラリで解説を進めます。

また、ドキュメントライブラリ内のXMLファイルを使用しますので、package.appxmanifestを開き、「宣言」タブをクリックして、表示される画面の左にある「使用可能な宣言」から、「ファイルの種類の関連付け」を選択し、[追加]ボタンをクリックします。すると右に「プロパティ」画面が表示されますので、赤いマークの付いている必須項目を入力します。ここでは、「名前」にxml、「サポートされるファイルの種類」の「ファイルの種類」に.xmlと指定します(図3)。

図3:package.appxmanifestを開き「宣言」タブから、ファイルの関連付けを設定する(クリックで拡大)
Think IT会員限定特典
  • サーバーからの画像を取得するWindows8サンプルアプリ

  • 画像が削除された際自動的に並び変わるWindows8サンプルアプリ

薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています