Input Library for WPF
FilePicker クイックスタート
Input for WPF > FilePicker > FilePicker クイックスタート

このクイックスタートは、FilePicker for WPF を初めて使用するユーザーのために用意されています。このクイックスタートでは、C1FilePickerコントロールを使用して新しいVisual Studioプロジェクトを作成し、画像ファイルを選択して別のコントロールに表示します。

アプリケーションの作成

  1. In Visual Studio, select File | New | Project.Visual Studio で、［ファイル］→［新規作成］→［プロジェクト］を選択します。
  2. In the New Project dialog box, select WPF Application.[新しいプロジェクト]ダイアログボックスで、[WPFアプリケーション]を選択します。
  3. プロジェクトの名前と場所を入力し、[OK]をクリックして新しいアプリケーションを作成します。
  4. プロジェクトの XAML ウィンドウで、カーソルを <Grid> タグと </Grid> タグの間に置き、１回クリックします。
  5. 次の XAML マークアップを MainWindow.xaml ファイルの <Grid> タグと </Grid> タグの間に追加します。
    XAML
    コードのコピー 
    <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition />
    <RowDefinition Height="Auto" />
</Grid.RowDefinitions>
  6. ツールボックスに移動し、［C1FilePicker］アイコンをダブルクリックして、コントロールをアプリケーションに追加します。
  7. C1FilePicker タグを次のように編集します。
    XAML
    コードのコピー 
    <c1:C1FilePicker x:Name="C1FilePicker1" Grid.Row="0" Margin="15" Height="30" SelectedFilesChanged="C1FilePicker_SelectedFilesChanged" />

    このマークアップは、コントロールの名前を決定し、コントロールが表示されるグリッド行を指定します。また、コントロールの高さとコントロール周囲のマージンを設定し、SelectedFilesChanged イベントのイベントハンドラを指定します。イベントハンドラコードは後の手順で追加します。
  8. 次の XAML マークアップを MainPage.xaml ファイルの <c1:C1FilePicker> タグと </Grid> タグの間に追加します。
    XAML
    コードのコピー 
    <ScrollViewer Grid.Row="1" Margin="15,0,15,0">
    <ListBox x:Name="ListBox" />
</ScrollViewer>
<StackPanel Grid.Row="2" Name="stackPanel1" Orientation="Horizontal" HorizontalAlignment="Center">
    <Button Content="ファイル選択を解除" Height="30" Margin="0,15,15,15" Name="button1" Width="150" Grid.Row="2" Click="button1_Click" />
    <Button Content="リスト項目を削除" Height="30" Margin="15,15,0,15" Name="button2" Width="150" Grid.Row="2" Click="button2_Click" />
</StackPanel>
    このマークアップは、ListBox コントロールを追加します。これで、C1FilePicker を使用して選択したローカル画像を表示できるようになります。また、このマークアップにより、C1FilePicker コントロールのコンテンツをクリアするボタンと ListBox のコンテンツをクリアするボタンも追加されます。   

アプリケーションへのコードの追加

前の手順では、WPF アプリケーションを設定しました。ただし、この時点でアプリケーションを実行しても、コントロールは動作しません。 この手順では、引き続き、機能を追加するコードをアプリケーションに追加します。

次の手順に従います。

  1. ソリューションエクスプローラに移動し、 MainPage.xaml ファイルまたはMainWindow.xaml ファイルを右クリックして［コードの表示］を選択し、コードビューに切り替えます。
  2. コードビューで、次の import 文をページの先頭に追加します（ページに含まれていない場合）。
Visual Basic
コードのコピー 
Imports System.Windows.Media.Imaging
Imports C1.WPF.Input

C#
コードのコピー 
using System.Windows.Media.Imaging;
using C1.WPF.Input;
  1. MainWindow.xaml.cs（または .vb）またはMainWindow.xaml.cs　（または .vb）ファイルで、MainPage クラスの他のすべてのメソッドより下に、次のイベントハンドラを追加します。
Visual Basic
コードのコピー 
Private Sub C1FilePicker_SelectedFilesChanged(sender As Object, e As EventArgs)
    If C1FilePicker1.SelectedFile IsNot Nothing Then
        Dim stream = C1FilePicker1.SelectedFile.OpenRead()
        Dim source = New BitmapImage()
        source.SetSource(stream)
        Dim image = New Image()
        image.Source = source
        image.Stretch = Stretch.Uniform
        image.Height = 100
        ListBox.Items.Add(image)
    End If
End Sub

C#
コードのコピー 
private void C1FilePicker_SelectedFilesChanged(object sender, EventArgs e)
{
    if (C1FilePicker1.SelectedFile != null)
    {
        var stream = C1FilePicker1.SelectedFile.OpenRead();
        var source = new BitmapImage();
        source.SetSource(stream);
        var image = new Image();
        image.Source = source;
        image.Stretch = Stretch.Uniform;
        image.Height = 100;
        ListBox.Items.Add(image);
    }
}

このコードにより、SelectedFilesChanged イベントが処理されます。ユーザーが C1FilePicker コントロールを使用して画像を選択すると、その画像はカスタマイズされて ListBox コントロールに追加されます。

  1. Button コントロールの Click イベントを処理する次のコードをページに追加します。
Visual Basic
コードのコピー 
Private Sub button1_Click(sender As Object, e As RoutedEventArgs)
    C1FilePicker1.ClearSelection()
End Sub
Private Sub button2_Click(sender As Object, e As RoutedEventArgs)
    ListBox.Items.Clear()
End Sub

C#
コードのコピー 
private void button1_Click(object sender, RoutedEventArgs e)
{
    C1FilePicker1.ClearSelection();
}
private void button2_Click(object sender, RoutedEventArgs e)
{
    ListBox.Items.Clear();
}

アプリケーションの実行

WPF アプリケーション を作成して設定し、機能を追加するコードをアプリケーションに追加しました。最後に、アプリケーションを実行します。アプリケーションの実行時の操作を確認するには、次の手順に従います。

  1. メニューから［デバッグ］→［デバッグ開始］を選択して、アプリケーションを実行します。アプリケーションは次の図のように表示されます。
  1. C1FilePicker コントロールで省略符ボタン（...）をクリックします。［開く］ダイアログボックスが表示されます。
  2. ［開く］ダイアログボックスで画像を探して選択し、［開く］をクリックして、選択した画像を開きます。
  1. 選択した画像がリストボックスに表示され、ファイルの名前が C1FilePicker コントロールに表示されます。
  1. ［ファイル選択を削除］ボタンをクリックします。C1FilePicker コントロールにファイルの名前が表示されなくなります。
  1. C1FilePicker コントロールで省略符ボタンをもう一度クリックします。［開く］ダイアログボックスが表示されます。
  2. ［開く］ダイアログボックスで、複数の画像を選択してみます。ここでは、複数の画像を選択できません。これは、デフォルトでは、Multiselect  プロパティが False に設定されているためです。複数のファイルを一度に選択するには、Multiselect プロパティを「True」に設定する必要があります。
  3. ［開く］ダイアログボックスでファイルを選択し、［開く］をクリックします。２番目のファイルが C1FilePicker コントロールにリストされ、リストボックスに追加されていることに注意してください。

  1. ［リスト項目を削除］ボタンをクリックします。ファイルのリストがクリアされます。

ここまでの結果

おめでとうございます。これで FilePicker for WPF クイックスタートは終了です。FilePicker for WPF を使用して画像ファイルを選択する簡単なアプリケーションを作成しました。ここで選択された画像は他のコントロールに表示されます。

 

 

Copyright © MESCIUS inc. All rights reserved.