情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

方法: Windows Phone のアプリ コネクトでピクチャ ビューアを拡張する

2012/02/09

アプリ コネクトによって、画像ビューアーで [アプリ] リンクをクリックしてアプリケーションを起動し、ユーザーが表示していた画像に基づいてリッチなユーザー エクスペリエンスを提供できます。このトピックは、画像ビューアーから起動できるアプリケーションの作成方法と、ディープ リンク URI から対応する画像トークンを抽出する方法を説明します。画像の拡張の詳細については、「Windows Phone の画像の機能拡張の概要」を参照してください。

重要な注重要な注:

画像の機能拡張は Windows Phone OS 7.1 で変更されました。Windows Phone OS 7.0 で実行するアプリケーションの画像の拡張方法については、ここ の Windows Phone OS 7.0 開発者向けドキュメントを参照してください。

Windows Phone SDK 7.1 では、Extras.xml ファイルは必要ありません。アプリケーションをアップグレードして画像ビューアーを Windows Phone OS 7.1 に拡張する場合は、このファイルを削除し、このトピックで説明する新しい拡張方法を使用します。

このリリースの Windows Phone SDK では、このトピックは、デバイスでのみ実行でき、Windows Phone Emulator では実行できません。現在のバージョンのエミュレーターでは、デバイスの Pictures ハブにアクセスできません。

このトピックは、C# 開発を基にしていますが、Visual Basic のコードも提供しています。

このセクションでは、アプリケーションを作成して画像ビューアーの拡張子を宣言し、アプリケーションの起動に対応する画像を表示するピクチャ コントロールを追加します。

画像ビューアー拡張機能を宣言するには

  1. Visual Studio 2010 Express for Windows Phone で、[ファイル] メニューの [新しいプロジェクト] をクリックして新しいプロジェクトを作成します。

  2. [新しいプロジェクト] ウィンドウが表示されます。Visual C# のテンプレートを展開してから、Silverlight for Windows Phone のテンプレートを選択します。

  3. Windows Phone アプリケーション テンプレートを選択します。[名前] ボックスに選択した名前を入力します。この名前は、ピクチャ ビューアーの [apps] ページに既定で表示されます

  4. [OK] をクリックします。[新しい Windows Phone アプリケーション] ウィンドウが表示されます。

  5. [ターゲットの Windows Phone のバージョン] メニューで、Windows Phone 7.1 が選択されていることを確認します。

  6. [OK] をクリックします。新しいプロジェクトが作成され、Visual Studio のデザイナー ウィンドウに MainPage.xaml が表示されます。

  7. [プロジェクト] メニューの [参照の追加] をクリックします。[.NET] タブで、[Microsoft.Xna.Framework] を選択し、[OK] をクリックします。

  8. アプリケーション マニフェスト ファイル WMAppManifest.xml を開き、次のコードを App 要素に子として追加します。これにより、画像ビューアーからアプリケーションを起動できます。

    <Extensions>
          <Extension ExtensionName="Photos_Extra_Viewer" ConsumerID="{5B04B775-356B-4AA0-AAF8-6491FFEA5632}" TaskID="_default" />
    </Extensions>
    
    
  9. メイン ページの分離コード ファイル MainPage.xaml.cs を開き、ページの先頭に次のディレクティブを追加します。

    using System.Windows.Media.Imaging;
    using Microsoft.Phone;
    using System.IO;
    using Microsoft.Xna.Framework.Media;
    using System.Windows.Navigation;
    
    
  10. MainPage.xaml で、次のコードを使用して LayoutRoot という名前の Grid を置き換えます。

        <!--LayoutRoot is the root grid where all page content is placed.-->
        <Grid x:Name="LayoutRoot" Background="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <!--TitlePanel contains the name of the application and page title.-->
            <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
                <TextBlock 
                    x:Name="ApplicationTitle" Text="APP CONNECT EXAMPLE" 
                    Style="{StaticResource PhoneTextNormalStyle}"/>
                <TextBlock 
                    x:Name="PageTitle" Text="picture app" Margin="9,-7,0,0" 
                    Style="{StaticResource PhoneTextTitle1Style}"/>
            </StackPanel>
    
            <!--ContentPanel - place additional content here-->
            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                <Image 
                    Height="350" 
                    HorizontalAlignment="Left" 
                    Margin="6,18,0,0" 
                    Name="retrievePic" 
                    Stretch="Fill" 
                    VerticalAlignment="Top" 
                    Width="450" />
            </Grid>
        </Grid>
    
    

このセクションでは、ディープ リンク URI から token パラメーターの値を抽出します。パラメーター値、つまりトークンはアプリケーションの起動元の画像に対応します。このトークンを使用して、イメージ コントロールに画像が表示されます。

トークン パラメーターの抽出方法

  • MainPage.xaml.cs で、次のコードを MainPage クラスに追加します。このコードは OnNavigatedTo(NavigationEventArgs) メソッドを実装し、アプリケーションを起動した URI 内で token パラメーターを検索します。token パラメーターが存在する場合、アプリケーションはメディア ライブラリから対応する画像を取り出し、そのビットマップ画像を作成し、イメージ コントロールに表示します。このイメージ コントロールは retrievePic と呼ばれます。

       protected override void OnNavigatedTo(NavigationEventArgs e)
            {
                // Get a dictionary of query string keys and values.
                IDictionary<string, string> queryStrings = this.NavigationContext.QueryString;
    
    
                // Ensure that there is at least one key in the query string, and check whether the "token" key is present.
                if (queryStrings.ContainsKey("token"))
                {
                    
                    // Retrieve the picture from the media library using the token passed to the application.
                    MediaLibrary library = new MediaLibrary();
                    Picture picture = library.GetPictureFromToken(queryStrings["token"]);
    
    
                    // Create a WriteableBitmap object and add it to the Image control Source property.
                    BitmapImage bitmap = new BitmapImage();
                    bitmap.CreateOptions = BitmapCreateOptions.None;
                    bitmap.SetSource(picture.GetImage());
    
                    WriteableBitmap picLibraryImage = new WriteableBitmap(bitmap);
                    retrievePic.Source = picLibraryImage;
                }
    
            }
    
    
    
    重要な注重要な注:

    アプリケーションで [写真の選択タスク] を使用すると、アプリケーションが非アクティブ化されます。アプリケーションを再アクティブ化すると、OnNavigatedTo メソッドが呼び出されます。アプリケーションが正しい画像を表示していることを確認します。正しい画像が表示されない場合、アプリケーションのパフォーマンスに問題が発生し、クラッシュする可能性があります。また、直前のコードは、Silverlight アプリケーション用のトークン パラメーターの取得方法を指示します。XNA Framework ベースのアプリケーションでは、Microsoft.Xna.Framework Game クラスの LaunchParameter プロパティを使用してトークンを取得できます。例: string token = LaunchParameters["token"];

デバイスをコンピューターにつないでいる場合、Pictures ハブを使用して、画像ビューアーからアプリケーションを起動できません。ただし、アプリケーションを読み込むには、デバイスをコンピューターにつなぐ必要があります。この手順では、アプリケーションをデバイスに転送して、テストする方法について説明します。

デバイスでアプリ コネクトをテストするには

  1. デバイスで、カメラを使用して写真を撮ります。

  2. デバイスをコンピューターにつなぎ、Zune ソフトウェアによって認識されるまで待ちます。アプリケーションが [Windows Phone デバイス] に展開されるように設定されていることを確認し、メニューから [デバッグ] を選択し、[デバッグ開始] を選択します。アプリケーションが表示されたら、[デバッグ] メニューに戻り、[デバッグの停止] を選択します。コンピューターからデバイスを取り外して、スタート画面に移動します。

  3. スタート画面で、[Pictures] アプリケーションをタップし、[すべて] をタップします。[カメラロール] セクションをタップして写真を検索し、写真のサムネイルをタップして写真を拡大します。

  4. アプリケーション バーのページの下部の 3 つのドットをタップします。リスト下部には、[アプリ] リンクとメニューが表示されます。[アプリ] を選択します。

  5. [アプリ] ページで、アプリケーションの名前を選択します。アプリケーションが開き、[イメージ] コントロールに画像が表示されます。

次の画像は、フォト アプリ という名前のアプリケーションを画像ビューアーから起動する方法を左から順に示しています。

AP_Con_PhotoExtras

表示:
© 2014 Microsoft