Image Picker2

Picker で抽出されたファイルの詳細を表示します。

前田稔の超初心者のプログラム入門

プログラムの説明

  1. Picker で抽出されたファイルの詳細を Image 領域を使って表示します。
    MainPage.xaml に、ボタン一個と Image コントロールを張り付けて下さい。
    プロジェクトの作成とツールの貼り付けは C# Store Application を参照して下さい。
  2. MainPage.xaml です。
    <Page
        x:Class="App1.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App1"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
            <Button Content="Button" HorizontalAlignment="Left" Margin="38,36,0,0" 
                VerticalAlignment="Top" Width="139" Height="54" Click="ButtonClick"/>
            <Image x:Name="image" HorizontalAlignment="Left" Height="300" Margin="50,150,0,-350" 
                VerticalAlignment="Top" Width="400" Source="ms-appx:///Assets/placeholder-sdk.png"/>
        </Grid>
    </Page>
    
  3. MainPage.xaml.cs の ButtonClick に Picker を使ってファイルを選択するコードを書きます。
    ドットで図形を描画から修正したので、不要な物も含まれています。
    writeablebitmap は image.Source に関連付けられた領域です。
    using Windows.Foundation;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Navigation;
    using Windows.UI.Xaml.Media.Imaging;
    using System;
    using System.IO;
    using System.Numerics;
    using System.Runtime.InteropServices.WindowsRuntime;
    using System.Threading.Tasks;
    using Windows.Graphics.Imaging;
    using Windows.Storage.Pickers;
    using Windows.Storage;
    using Windows.Storage.Streams;
    using Windows.System.Threading;
    
    namespace App1
    {
        public sealed partial class MainPage : Page
        {
            private WriteableBitmap writeablebitmap;
    
            public MainPage()
            {
                this.InitializeComponent();
                writeablebitmap = new WriteableBitmap((int)image.Width, (int)image.Height);
                image.Source = writeablebitmap;
            }
    
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
            }
    
            async private void ButtonClick(object sender, RoutedEventArgs e)
            {
                FileOpenPicker picker = new FileOpenPicker();
                picker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
                picker.FileTypeFilter.Clear();
                picker.FileTypeFilter.Add(".png");
                picker.FileTypeFilter.Add(".jpeg");
                picker.FileTypeFilter.Add(".jpg");
                picker.FileTypeFilter.Add(".bmp");
    
                StorageFile file = await picker.PickSingleFileAsync();
    
                // Ensure a file was selected
                if (file != null)
                {
                    using (IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read))
                    {
                        try
                        {
                            await writeablebitmap.SetSourceAsync(fileStream);
                        }
                        catch (TaskCanceledException)
                        {
                            // The async action to set the WriteableBitmap's source may be canceled if the user clicks the button repeatedly
                        }
                    }
                }
            }
        }
    }
    
  4. ボタンをクリックすると Picker で抽出されたファイル(フォルダ)の詳細が Image 領域に表示されます。
    フォルダをたどり画像を選択すると、選ばれた画像が大きく描画されます。

超初心者のプログラム入門(C# Frame Work)