Image Chenge



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

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

プロジェクトの作製

  1. Windows10 で Image コントロールを貼り付けて、ボタンのクリックで切り替えます。
    事前に C:\tmp\ に2枚の画像(ffx2s.jpg, ayu.jpg)を用意して下さい。
    2枚の画像は何でも良いので、適当なものを調達して下さい。
  2. Visual Studio で UWP(Universal Windows Platform) のプロジェクトを作成します。
    App1(規定値)でプロジェクトを生成します。
    プロジェクトの作成は XAML で図形を描画 を参照して下さい。
  3. ソリューションエクスプローラで App1 を選択して右クリックします。
    [追加][既存の項目]から C:\tmp\ffx2s.jpg, C:\tmp\ayu.jpg を取り込みます。
  4. MainPage.xaml のデザインを表示してツールボックスから Image Box と Button を2個貼り付けます。
    Image Box の名前を image にして下さい。
    ツールの貼り付けは Visual Studio Tool を参照して下さい。
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Image x:Name="image" Height="207" VerticalAlignment="Top" Margin="35,35,33,0"
                d:LayoutOverrides="LeftPosition, RightPosition"/>
            <Button x:Name="button" Content="Button" VerticalAlignment="Bottom"
                Margin="67,0,0,152" Click="Button_Clock1"/>
            <Button x:Name="button1" Content="Button" VerticalAlignment="Bottom"
                Margin="0,0,106,147" Click="Button_Click2" HorizontalAlignment="Right"/>
        </Grid>
    
  5. MainPage.xaml.cpp の MainPage() 関数で BitmapImage に画像をロードします。
    "ms-appx:///・・・" はプロジェクトに取り込んだリソースを示すシンボルのようです。
    Windows::UI::Xaml::Media::Imaging::BitmapImage^ bi1;
    Windows::UI::Xaml::Media::Imaging::BitmapImage^ bi2;
    
    MainPage::MainPage()
    {   InitializeComponent();
        Uri^ ui1 = ref new Uri("ms-appx:///ffx2s.jpg"); 
        bi1 = ref new Windows::UI::Xaml::Media::Imaging::BitmapImage(ui1); 
        Uri^ ui2 = ref new Uri("ms-appx:///ayu.jpg"); 
        bi2 = ref new Windows::UI::Xaml::Media::Imaging::BitmapImage(ui2); 
        image->Source = bi1;
    }
    
  6. Button を選択して稲妻アイコンから Button_Click1, Button_Click2 関数を設定します。
    クリックで画像を切り替える Button_Click1, Button_Click2 関数です。
    void App1::MainPage::Button_Click1(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
    {
        image->Source = bi1;
    }
    void App1::MainPage::Button_Click2(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
    {
        image->Source = bi2;
    }
    
  7. Button-1 のクリックで ffx2s.jpg が、Button-2 のクリックで ayu.jpg が表示されます。

超初心者のプログラム入門(C/C++)