Go to Qiita Advent Calendar 2024 Top
LoginSignup
8
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@Kosen-amai(Qiiwi)

Windows GUIプログラミング入門22 画像ビューア

Last updated at Posted at 2020-01-03

■はじめに

今回は画像ビューアを作ります。
00.png

キーワード：画像表示, 複数画面表示, ファイル選択ダイアログ, 子画面全終了, マウスホイール

[注意]
これまでの回で説明済みの操作方法等は、説明を省略したり簡略化している場合があります。

■開発環境

  • Windows 10
  • Visual Studio Community 2019 （Version 16.4.2）
  • .NET Framework 4.5.2 / .NET Core 3.1

■作ってみる

◇プロジェクトの作成

WPFアプリの.NET Frameworkまたは.NET Coreを選択してプロジェクトを作成します。
どちらを選ぶかは こちらの記事 を参考に。
この記事では.NET Frameworkを選択しました。
※.NET Core版でも動作することは確認済みです。

12.png

◇メイン画面：レイアウト作成

メイン画面のレイアウト用コントロールをGridからViewboxに変更します。

01.png

StackPanel, Buttonを配置してプロパティやスタイルの設定をします。

02.png

MainWindow.xaml
<Window x:Class="ImageView.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ImageView"
        mc:Ignorable="d"
        Title="画像ビューア" 
        Height="150" Width="450" 
        MinHeight="100" MinWidth="150"
        ResizeMode="CanResizeWithGrip">
    <Window.Resources>
        <!-- ボタンの既定スタイル -->
        <Style TargetType="Button">
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Padding" Value="5"/>
        </Style>
    </Window.Resources>
    <Viewbox>
        <StackPanel Orientation="Horizontal">
            <Button Content="画像を開く" IsDefault="True"/>
            <Button Content="画像をすべて閉じる"/>
        </StackPanel>
    </Viewbox>
</Window>

◇画像表示用画面：レイアウト作成

ソリューションエクスプローラーでプロジェクトを右クリックし、ウィンドウを追加します。
名前はImageWindowにします。

03.png

Imageコントロールやボタン等を配置、プロパティ設定をします。
+, -ボタンはリピートボタンを使います。ボタンを押し続けている間、Clickイベントが連続して発生します。
RepeatButtonはツールボックスに無いのでタグを手打ちしてください。

04_.png

ImageWindow.xaml
<Window x:Class="ImageView.ImageWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ImageView"
        mc:Ignorable="d"
        Title="ImageWindow" Height="220" Width="200" 
        MinHeight="100" MinWidth="100"
        ResizeMode="CanResizeWithGrip">
    <Window.Resources>
        <!-- リピートボタンの既定スタイル -->
        <Style TargetType="RepeatButton">
            <Setter Property="Margin" Value="2"/>
            <Setter Property="Width" Value="20"/>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal">
            <RepeatButton x:Name="plusButton" Content="+"/>
            <RepeatButton x:Name="minusButton" Content="-"/>
            <Button x:Name="closeButton" Content="閉じる" Margin="2" IsCancel="True"/>
        </StackPanel>
        
        <Image x:Name="img" Grid.Row="1"/>
    </Grid>
</Window>

◇画像表示用画面：ロジック作成

画像を指定して表示する処理、各ボタンクリック（Clickイベント）、ウィンドウのマウスホイール回転（MouseWheelイベント）、ウィンドウのマウス左ボタンダウン処理（MouseLeftButtonDownイベント）を書きます。
マウスホイール回転時に拡大または縮小するようにします。
左ボタンダウン時の処理は、タイトルバーだけでなく画像部分をドラッグしてもウィンドウを移動できるようにします。

ImageWindow.xaml.cs
using System;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media.Imaging;

namespace ImageView
{
    /// <summary>
    /// ImageWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class ImageWindow : Window
    {
        /// <summary>
        /// コンストラクタ
        /// </summary>
        public ImageWindow()
        {
            InitializeComponent();
        }

        /// <summary>
        /// 画像設定処理（他の画面からこれを呼ぶ）
        /// </summary>
        /// <param name="filePath">画像ファイルパス</param>
        /// <returns>読み込み成功時true</returns>
        public bool SetImage(string filePath)
        {
            // パスが空
            if (string.IsNullOrEmpty(filePath))
            {
                return false;
            }

            var bmp = new BitmapImage();
            bmp.BeginInit();
            bmp.UriSource = new Uri(filePath);
            bmp.EndInit();
            // 画像設定
            img.Source = bmp;

            // タイトルバーにファイル名設定
            this.Title = System.IO.Path.GetFileName(filePath);

            return true;
        }

        /// <summary>
        /// ウィンドウサイズ拡大・縮小
        /// </summary>
        /// <param name="isZoom">true:拡大, false:縮小</param>
        private void ChangeWindowSize(bool isZoom)
        {
            int plusMinus = isZoom ? 1 : -1;

            // ウィンドウサイズを10%単位で変更
            this.Height += (this.Height * 0.1) * plusMinus;
            this.Width += (this.Width * 0.1) * plusMinus;

            // ウィンドウサイズが小さくなりすぎた場合、最小値に戻す
            if (this.Height < this.MinHeight ||
                this.Width < this.MinWidth)
            {
                this.Height = this.MinHeight;
                this.Width = this.MinWidth;
            }
        }

        /// <summary>
        /// 拡大ボタンクリック時
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void plusButton_Click(object sender, RoutedEventArgs e)
        {
            // ウィンドウサイズ拡大
            ChangeWindowSize(true);
        }

        /// <summary>
        /// 縮小ボタンクリック時
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void minusButton_Click(object sender, RoutedEventArgs e)
        {
            // ウィンドウサイズ縮小
            ChangeWindowSize(false);
        }

        /// <summary>
        /// 閉じるボタンクリック時
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void closeButton_Click(object sender, RoutedEventArgs e)
        {
            this.Close();
        }

        /// <summary>
        /// マウスホイール回転時
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Window_MouseWheel(object sender, MouseWheelEventArgs e)
        {
            // ウィンドウサイズ拡大・縮小
            ChangeWindowSize(e.Delta > 0);
        }

        /// <summary>
        /// マウス左ボタンダウン時の処理
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            // タイトルバー以外でもウィンドウ移動を可能にする
            DragMove();
        }
    }
}

最終的にXamlは以下のようになりました。

ImageWindow.xaml
<Window x:Class="ImageView.ImageWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ImageView"
        mc:Ignorable="d"
        Title="ImageWindow" Height="220" Width="200" 
        MinHeight="100" MinWidth="100"
        ResizeMode="CanResizeWithGrip"
        MouseWheel="Window_MouseWheel"
        MouseLeftButtonDown="Window_MouseLeftButtonDown">
    <Window.Resources>
        <!-- リピートボタンの既定スタイル -->
        <Style TargetType="RepeatButton">
            <Setter Property="Margin" Value="2"/>
            <Setter Property="Width" Value="20"/>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal">
            <RepeatButton x:Name="plusButton" Content="+" Click="plusButton_Click"/>
            <RepeatButton x:Name="minusButton" Content="-" Click="minusButton_Click"/>
            <Button x:Name="closeButton" Content="閉じる" Margin="2" IsCancel="True" Click="closeButton_Click"/>
        </StackPanel>

        <Image x:Name="img" Grid.Row="1"/>
    </Grid>
</Window>

◇メイン画面：ロジック作成

画像表示用画面を使って画像表示する処理、画像表示用画面を一括で閉じる処理、ウィンドウ終了時の処理（Closedイベント）を書きます。

MainWindow.xaml.cs
using System;
using System.Windows;

namespace ImageView
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        /// <summary>
        /// コンストラクタ
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();
        }

        /// <summary>
        /// 画像ファイルを選択し、表示
        /// </summary>
        private void OpenImageFile()
        {
            var dlg = new Microsoft.Win32.OpenFileDialog();
            dlg.Title = "画像を選択してください。";
            dlg.Filter = "画像ファイル|*.gif;*.png;*.jpeg;*.jpg;*.bmp|すべてのファイル|*.*";
            // ファイル選択ダイアログ表示
            if (dlg.ShowDialog() == true)
            {
                // 画像表示画面生成
                var window = new ImageWindow();

                // 画像表示画面に画像設定
                if (window.SetImage(dlg.FileName))
                {
                    // 画面表示
                    window.Show();
                }
            }
        }

        /// <summary>
        /// 画像を開くボタンクリック時
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            OpenImageFile();
        }

        /// <summary>
        /// 子画面全終了
        /// </summary>
        private void CloseSubWindows()
        {
            foreach (Window w in App.Current.Windows)
            {
                if (w != this)
                {
                    // 自身（メイン画面）以外なら終了させる
                    w.Close();
                }
            }
        }

        /// <summary>
        /// 画像をすべて閉じるボタンクリック時
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            // 子画面全終了
            CloseSubWindows();
        }

        /// <summary>
        /// ウィンドウ終了時
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Window_Closed(object sender, EventArgs e)
        {
            // 開きっぱなしの子画面があったら終了
            CloseSubWindows();
        }
    }
}

最終的にXamlは以下のようになりました。

MainWindow.xaml
<Window x:Class="ImageView.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ImageView"
        mc:Ignorable="d"
        Title="画像ビューア" 
        Height="150" Width="450" 
        MinHeight="100" MinWidth="150"
        ResizeMode="CanResizeWithGrip"
        Closed="Window_Closed">
    <Window.Resources>
        <!-- ボタンの既定スタイル -->
        <Style TargetType="Button">
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Padding" Value="5"/>
        </Style>
    </Window.Resources>
    <Viewbox>
        <StackPanel Orientation="Horizontal">
            <Button Content="画像を開く" IsDefault="True" Click="Button_Click"/>
            <Button Content="画像をすべて閉じる" Click="Button_Click_1"/>
        </StackPanel>
    </Viewbox>
</Window>

■動かしてみる

起動してみます。
05.png

ウィンドウサイズを小さくしてみます。
06.png

ウィンドウサイズを大きくしてみます。
07.png
Viewboxを使っているのでレイアウトはそのままに、きれいに拡大縮小されます。

「画像を開く」ボタンを押すと、ファイル選択ダイアログが表示されるので、画像を選択します。
08.png

表示されました。
09.png

続けて他にも画像を開いてみます。
10.png
画像の上でマウスホイールを奥に回すと拡大、手前に回すと縮小します。
+ボタン、-ボタンでも拡大、縮小できます。このボタンは長押しに対応しています。

「画像をすべて閉じる」ボタンを押すと、画像ウィンドウが一気に全部閉じます。
11.png

おしまい

＜＜ 最初の記事 　 ＜ 前の記事 　 次の記事 ＞

8
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?