[Silverlight][Tips] ファイルダイアログを使用して画像を表示する

Silverlight

2014.10.31

今回は、ファイルダイアログを使用して画像を選択し、表示する方法について見ていきます。

デザインは以下のようにします。

XAMLは以下の通りです。

<Grid x:Name="LayoutRoot" Background="White">
    <Button x:Name="btnOpenFile" Content="Button" 
            HorizontalAlignment="Left" Margin="10,10,0,0" 
            VerticalAlignment="Top" Width="75" 
            Click="btnOpenFile_Click"/>
            
    <Image x:Name="imgPicture" HorizontalAlignment="Left" 
           Height="224" Margin="10,57,0,0" 
           VerticalAlignment="Top" Width="358"/>
</Grid>

ボタンクリック時のコードを以下に示します。

VB.NETの例

Imports System.Windows.Media.Imaging

Private Sub btnOpenFile_Click(sender As Object, e As RoutedEventArgs)
    Dim dlgOpen = New OpenFileDialog()

    If dlgOpen.ShowDialog() = True Then
        Dim image = New BitmapImage()
        image.SetSource(dlgOpen.File.OpenRead())
        imgPicture.Source = image
    End If
End Sub

C#の例

using System.Windows.Media.Imaging;

/// <summary>
/// ボタンクリック時の処理
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void btnOpenFile_Click(object sender, RoutedEventArgs e)
{
    var dlgOpen = new OpenFileDialog();

    if ( dlgOpen.ShowDialog() == true )
    {
        var image = new BitmapImage();
        image.SetSource(dlgOpen.File.OpenRead());
        imgPicture.Source = image;
    }
}

ファイルファイアログを使用するには OpenFileDialogクラスを使用し、ダイアログを表示するには ShowDialogメソッドを使用します。

ShowDialogメソッドは、ファイルが選択された場合に true を返します。

if 文を使用して、ファイルが選択されたことを判断したら、次にイメージを表示します。

コード中の image.SetSource の部分は、BitmapImageクラス（画像を取り扱うクラスです）のインスタンスの SetSourceメソッドにファイルダイアログで選択されたファイルのストリームを渡しています。

最後に、イメージの表示を行います。、MainPage.xamlに配置した Imageコントロールの Sourceプロパティに、先ほどのBitmapImageのインスタンスをセットします。

実行結果イメージは下記の通りです。