方法: Windows Phone の JPEG をデコードする

2012/02/09

このセクションでは、アプリケーション内で JPEG ファイルを WriteableBitmap オブジェクトにデコードする方法を示します。これを行う理由の 1 つは、アプリケーションが画像を編集できるようにするためです。次のタスクが実行されます。

  • 適切な名前空間を追加してサンプルのデザイン サーフェイスを作成

  • アプリケーション内に JPEG ファイルの URI とストリームを作成

  • DecodeJpeg(Stream) メソッドを使用して JPEG ファイルを WriteableBitmap オブジェクトにデコード

次の手順は、Visual Studio 2010 Express for Windows Phone 向けです。 Visual Studio 2010 Professional や Visual Studio 2010 Ultimate のアドインを使用している場合は、メニュー コマンドやウィンドウのレイアウトが多少異なる場合があります。  このトピックは、C# 開発を基にしていますが、Visual Basic のコードも提供しています。 

初めに、新しいオブジェクトを作成して必要な名前空間を追加する必要があります。

新しいプロジェクトを作成して名前空間を追加するには

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

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

  3. Windows Phone アプリケーション テンプレートを選択します。[名前] ボックスに選択した名前を入力します。

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

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

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

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

  8. メイン ページの分離コード ファイル MainPage.xaml.cs を開き、ページの先頭に次のディレクティブを追加します。

    using System.Windows.Resources;
    using System.Windows.Media.Imaging;
    using Microsoft.Phone;
    
    
    

デザイン サーフェイスを作成するには

  • 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="PHOTOS" 
                    Style="{StaticResource PhoneTextNormalStyle}"/>
                <TextBlock 
                    x:Name="PageTitle" Text="decode" 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">
                
                <Button 
                    Content="Load" 
                    Height="70" 
                    HorizontalAlignment="Left" 
                    Margin="159,407,0,0" 
                    Name="btnLoad" 
                    VerticalAlignment="Top" 
                    Width="152" />
                
                <Image 
                    Height="395" 
                    HorizontalAlignment="Left" 
                    Margin="6,6,0,0" 
                    Name="image1" 
                    Stretch="Fill" 
                    VerticalAlignment="Top" 
                    Width="468" />
                
            </Grid>
        </Grid>
    
    
    注注:

    このコードは、ページの上半分を占めるイメージ コントロールおよび btnLoad という名前のボタン コントロールを作成します。これらのコントロールの向きを、次の図に示します。

このセクションでは btnLoad クリック イベント ハンドラーにコードを追加し、JPEG ファイルを WriteableBitmap オブジェクトにデコードします。このプロセスにより、プロジェクトに追加する JPEG ファイルのストリームが作成されます。JPEG ストリームは WriteableBitmap オブジェクトにデコードされ、その結果はイメージ コントロールで表示します。

JPEG ファイルを WriteableBitmap にデコードする方法

  1. ソリューション エクスプローラーを使用してプロジェクトに JPEG ファイルを追加します。写真をオブジェクト名にドラッグすれば追加できます。この例では、TestImage.jpg という名前のファイルが使用されます。プロジェクト内のパスの場所がわかっていることを確認します。

  2. MainPage.xamlbtnLoad ボタンをダブルクリックして、クリック イベントにイベント ハンドラーを追加します。MainPage.xaml.cs ファイルが表示されます。

  3. MainPage.xaml.cs ファイルで、btnLoad_Click メソッドを次のコードに置き換えます。このコードで、[Application Name] をプロジェクトの名前に置き換えます。たとえば、プロジェクトの名前が CameraDecode で画像の名前が TestImage.jpg の場合、新しい URI の最初のパラメーターは "CameraEncode;component/TestImage.jpg" です。

    private void btnLoad_Click(object sender, RoutedEventArgs e)
            {
                // Create a stream for the JPEG file and assign it to StreamResourceInfo.
                // For [Application Name] in the URI, use the project name you entered in the previous steps.
                StreamResourceInfo sri = null;
                Uri jpegUri = new Uri("[Application Name];component/TestImage.jpg", UriKind.Relative);
                sri = Application.GetResourceStream(jpegUri);
    
    
                // Decode the JPEG stream.
                WriteableBitmap myBitmap = PictureDecoder.DecodeJpeg(sri.Stream);
    
    
                // Add WriteableBitmap object to image control.
                image1.Source = myBitmap;
             
            }
    
  4. [デバッグ]、[デバッグ開始] の順にメニュー コマンドを選択してアプリケーションを実行します。これによってエミュレーター ウィンドウが開き、アプリケーションが起動します。[ロード] ボタンを選択すると、イメージ コントロール内に書き込み可能なビットマップが表示されます。

AP_Con_DecodeSan

表示: