Image Chenge

ボタンクリックで画像を切り替えます。

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

プログラムの説明

  1. Windows10 で Image コントロールを貼り付けて、ボタンのクリックで切り替えます。
    事前に表示する2枚の画像(c:\tmp\ffx2s.jpg, c:\tmp\geo.jpg)を準備して下さい。
    適当なサイズであれば、どんな画像でもかまいません。
  2. Visual Studio で新規プロジェクトから[空白アプリ(ユニバーサル Windows)]を生成します。
    MainPage.xaml のデザイン画面を表示して、ツールから Image と Button を2個張り付けてサイズを整えます。
    Image Box の名前を image にして下さい。
        <Grid>
            <Image x:Name="image" HorizontalAlignment="Left" Height="240"
                Margin="50,120,0,0" VerticalAlignment="Top" Width="480"/>
            <Button x:Name="button" Content="Image-1" VerticalAlignment="Bottom"
                Margin="100,0,0,170" Click="Button_Click1"/>
            <Button x:Name="button1" Content="Image-2" VerticalAlignment="Bottom"
                Margin="300,0,0,170" Click="Button_Click2"/>
        </Grid>
    
  3. 2枚の画像ファイルをプロジェクトに加えて下さい。
    プロジェクトの作成とツールの貼り付けは C# Store Application を参照して下さい。
  4. MainPage() 関数に BitmapImage を定義して画像を設定します。
    "ms-appx:///・・・" はプロジェクトに取り込んだリソースを示すシンボルのようです。
    最初は bi1 の画像を描画します。
        Windows.UI.Xaml.Media.Imaging.BitmapImage bi1;
        Windows.UI.Xaml.Media.Imaging.BitmapImage bi2;
        public MainPage()
        {
            this.InitializeComponent();
            bi1 = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appx:///ffx2s.jpg"));
            bi2 = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appx:///ayu.jpg"));
            image.Source = bi1;
        }
    
  5. Button に Button_Click1, Button_Click2 関数を設定して画像を切り替えます。
        private void Button_Click1(object sender, RoutedEventArgs e)
        {
            image.Source = bi1;
        }
        private void Button_Click2(object sender, RoutedEventArgs e)
        {
            image.Source = bi2;
        }
    
  6. メニューの[デバッグ]から[デバッグ開始]でコンパイル&実行すると "ffx2s.jpg" の画像が描画されます。
    Button-1 のクリックで ffx2s.jpg が、Button-2 のクリックで ayu.jpg が表示されます。

Version UP


  1. 2019/08/24 VS Professional 2019 16.2.3 にアップしたのですが VS Professional 16.1.2 のプロジェクトが起動できません。 (^_^;)
    そこで改めて Professional 2019 16.2.3 で作成することにします。
    プロジェクトの作成方法は変わりませんが、ちょっとだけ面倒なところもあります。
  2. 事前に表示する2枚の画像(c:\tmp\ffx2s.jpg, c:\tmp\geo.jpg)を準備して下さい。
    適当なサイズであれば、どんな画像でもかまいません。
  3. Visual Studio で新規プロジェクトから[空白アプリ(ユニバーサル Windows)]を生成します。
    メニューの[プロジェクト][既存の項目の追加]から C:\tmp\ffx2s.jpg, C:\tmp\ayu.jpg を加えます。
  4. デザイン画面を表示すると次のメッセージが表示されました。
    Visual Studio でこのコンテンツを表示するには、新しいバージョンの Windows が必要です。
    Windows 10, version 1903(10.0.18362.0) 以降に更新してください。
    
  5. 当面は MainPage.xaml のソースコードを直接編集します。
        <Grid>
            <Image x:Name="image" HorizontalAlignment="Left" Height="240"
                Margin="50,120,0,0" VerticalAlignment="Top" Width="480"/>
            <Button x:Name="button" Content="Image-1" VerticalAlignment="Bottom"
                Margin="100,0,0,170" Click="Button_Click1"/>
            <Button x:Name="button1" Content="Image-2" VerticalAlignment="Bottom"
                Margin="300,0,0,170" Click="Button_Click2"/>
        </Grid>
    
  6. MainPage.xaml.cs のソースコードを修正します。
        public sealed partial class MainPage : Page
        {   Windows.UI.Xaml.Media.Imaging.BitmapImage bi1;
            Windows.UI.Xaml.Media.Imaging.BitmapImage bi2;
            public MainPage()
            {   this.InitializeComponent();
                bi1 = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appx:///ffx2s.jpg"));
                bi2 = new Windows.UI.Xaml.Media.Imaging.BitmapImage(new Uri("ms-appx:///ayu.jpg"));
                image.Source = bi1;
            }
    
            private void Button_Click1(object sender, RoutedEventArgs e)
            {   image.Source = bi1;  }
    
            private void Button_Click2(object sender, RoutedEventArgs e)
            {   image.Source = bi2;   }
        }
    
  7. 初めてプログラムを実行すると DialogBox が表示されます。
    DialogBox から開発者モードに設定して下さい。

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