Chapter 30

ステップ8-1: 画像ビューア

Apterygiformes-zenn
Apterygiformes-zenn
2021.12.29に更新

概要

画像ビューアを作ります。

  • 「画像を開く」ボタンでファイルを選択して画像ウィンドウを表示します。
  • 画像ウィンドウは複数表示できます。
  • ボタンにはアイコンを付けます。
  • 「すべての画像を閉じる」ボタンで、表示されている画像ウィンドウをすべて閉じます。

プロジェクトの作成

新しいプロジェクトの作成でWPFアプリケーションを、プロジェクト名:GazoMiru、フレームワーク:.NET 6.0で作成してください。

画面の作成

スタイルの作成

ソリューションエクスプローラーでApp.xamlを開きます。
Application.Resourcesの中に以下のスタイルを定義します。

ウィンドウのスタイル
<!-- 標準的なウィンドウのスタイル -->
<Style x:Key="StandardWindowStyle"
       TargetType="Window">
    <Setter Property="ResizeMode"
            Value="CanResizeWithGrip" />
</Style>

ステップ5ではTargetType指定だけの既定スタイルを使いました。
今回はx:Keyでスタイルに名前を付けたものが登場しました。
x:Key付きのスタイルをコントロールに適用するには、コントロール側で明示的にキーを指定する必要があります。

ボタンのスタイル1
<!-- 標準的なボタンのスタイル -->
<Style x:Key="StandardButtonStyle"
       TargetType="Button">
    <Setter Property="Margin"
            Value="10" />
    <Setter Property="Padding"
            Value="10,5" />
</Style>
ボタンのスタイル2
<!-- 既定のボタンスタイル -->
<Style TargetType="Button"
       BasedOn="{StaticResource StandardButtonStyle}" />

BasedOn指定で元にするスタイルとしてStandardButtonStyleを指定します。
x:Keyは付けていないのでこれがButtonの既定スタイルになります。

ボタンのスタイル3
<!-- 画像付きボタンのスタイル -->
<Style x:Key="ImageButtonStyle"
       TargetType="Button"
       BasedOn="{StaticResource StandardButtonStyle}">
    <Setter Property="Margin"
            Value="10,10,0,10" />
</Style>

BasedOnStandardButtonStyleのスタイルを取り込んだ後、Marginの設定を上書きしています。

画像ボタンテキストのスタイル
<!-- 画像付きボタンのテキストスタイル -->
<Style x:Key="ImageButtonTextStyle"
       TargetType="TextBlock">
    <Setter Property="Margin"
            Value="10,5" />
    <Setter Property="VerticalAlignment"
            Value="Center" />
</Style>

コントロールの配置・設定

デザイナーでGridを右クリックし、レイアウトの種類の変更 > StackPanelを選択します。
StackPanelOrientationHorizontalに設定します。

StackPanel内にButtonを配置します。

ツールボックスからStackPanelをデザイナーのButton上にドラッグ&ドロップします。

ツールボックスからImageをドキュメントアウトラインの「Buttonの中のStackPanel」にドラッグ&ドロップします。

ツールボックスからTextBlockをドキュメントアウトラインの「Buttonの中のStackPanel」にドラッグ&ドロップします。

これで画像とテキストをコンテンツとするボタンができました。

Buttonの中のStackPanel」のOrientationHorizontalに設定します。

ButtonStyle="{StaticResource ImageButtonStyle}"を追加します。

ImageButtonStyleApp.xamlで定義しています。
これがx:Key付きスタイルの利用の仕方です。

<!-- 画像付きボタンのスタイル -->
<Style x:Key="ImageButtonStyle"
       TargetType="Button"
       BasedOn="{StaticResource StandardButtonStyle}">
    <Setter Property="Margin"
            Value="10,10,0,10" />
</Style>

TextBlockStyle="{StaticResource ImageButtonTextStyle}"を追加します。
TextBlockは折り返さないのでリセットWrap指定を削除します。

↓↓↓↓↓

Buttonの開始タグから終了タグまでの行を範囲選択し、Ctrl + Cでコピーします。

Ctrl + Vで貼り付けてButtonをもう1つ増やします。
コメントも入れます。

TextBlockText画像を開く, すべての画像を閉じるに書き換えます。

次はボタンのアイコンを設定します。

今回はここから画像を持ってきました。

https://icon-rainbow.com/

検索ボックスにキーワードを入力し、虫眼鏡ボタンを押します。
開くボタン用のアイコンをキーワード フォルダ で検索しました。

下の方にあるアイコンを選びました。

size32pxを選択し、
colorrgb(0, 209, 209)を入力し、
Download filePNGのボタンを押してダウンロードしてください。

もう1つ、すべて閉じる用のアイコンもダウンロードします。
ごみでキーワード検索し、ゴミ箱のアイコンを選択します。

同じようにサイズ、色指定してPNG形式でダウンロードします。

ダウンロードした画像のファイル名をOpen.png, AllClose.pngにリネームします。

開くボタン用のImageを選択し、WidthHeight32を設定し、
Source...ボタンを押してOpen.pngを開きます。

プロジェクトにOpen.pngが追加され、画像が読み込まれました。

画像格納用のフォルダを作って移動します。
プロジェクトを右クリックし、追加 > 新しいフォルダーを選択します。

imgというフォルダ名にし、Open.pngimgフォルダにドラッグ&ドロップして移動します。

プロパティのビルドアクションがリソースになっていることも確認してください。

別の方法でも画像を追加してみます。
imgフォルダを右クリックし、追加 > 既存の項目を選択します。

ファイル選択ダイアログでは種類のコンボボックスからイメージファイルを選択し、AllClose.pngを追加してください。

ビルドアクションがなしになっているので、リソースに変更してください。

↓↓↓↓↓

閉じるボタン用のImageを選択し、WidthHeight32を設定し、
Sourceプロパティのドロップダウンを開き、AllClose.pngを選択します。
開くボタンのSourceプロパティは、プロジェクト直下ではなくimgフォルダ配下のOpen.pngを参照するよう修正します。

画像が読み込まれました。

画像をプロジェクト直下に配置しておくならSourceプロパティからのファイル参照で画像を追加する方法が
ビルドアクションの設定までやってくれるので楽です。
画像用フォルダを作ってまとめるなら、

  1. 画像フォルダに画像を「既存ファイル追加」
  2. ビルドアクションをリソースに設定
  3. Sourceプロパティのコンボボックスから画像選択

の手順がよいでしょう。

開く用のButtonを選択し、名前にOpenButtonを設定し、IsDefaultをONにしてください。

閉じる用のButtonを選択し、名前にAllCloseButtonを設定してください。

ウィンドウの設定

WindowTitle画像を見るを設定します。
Style="{StaticResource StandardWindowStyle}"を追加します。
FocusManager.FocusedElement="{Binding ElementName=OpenButton}"を追加します。
BackgroundLightCyanを設定します。
Height100を、Width400を設定します。

復習ポイント

  • 名前付きスタイル
  • 画像リソースの利用
  • 画像付きボタン