概要

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

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

プロジェクトの作成

新しいプロジェクトの作成で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付きのスタイルをコントロールに適用するには、コントロール側で明示的にキーを指定する必要があります。

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

<!-- 既定のボタンスタイル -->
<Style TargetType="Button"
       BasedOn="{StaticResource StandardButtonStyle}" />

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

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

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

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

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

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

StackPanel内にButtonを配置します。

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

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

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

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

「Buttonの中のStackPanel」のOrientationをHorizontalに設定します。

ButtonにStyle="{StaticResource ImageButtonStyle}"を追加します。

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

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

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

↓↓↓↓↓

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

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

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

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

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

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

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

sizeに32pxを選択し、
colorにrgb(0, 209, 209)を入力し、
Download fileでPNGのボタンを押してダウンロードしてください。

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

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

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

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

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

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

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

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

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

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

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

↓↓↓↓↓

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

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

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

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

の手順がよいでしょう。

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

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

ウィンドウの設定

WindowのTitleに画像を見るを設定します。
Style="{StaticResource StandardWindowStyle}"を追加します。
FocusManager.FocusedElement="{Binding ElementName=OpenButton}"を追加します。
BackgroundにLightCyanを設定します。
Heightに100を、Widthに400を設定します。

復習ポイント

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