Chapter 34

ステップ9-1: 郵便番号検索

Apterygiformes-zenn
Apterygiformes-zenn
2022.01.13に更新

概要

郵便番号を入力してボタンを押すと、Web APIを使って郵便番号から住所を取得し、下のテキストボックスに表示します。

プロジェクトの作成

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

画面の作成

スタイルの作成1

App.xamlApplication.Resourcesの中に以下のスタイルを定義します。

ウィンドウのスタイル
<!-- 標準的なウィンドウのスタイル -->
<Style x:Key="StandardWindowStyle"
        TargetType="Window">
    <Setter Property="ResizeMode"
            Value="CanResizeWithGrip" />
    <Setter Property="FontSize"
            Value="16" />
</Style>
ラベルのスタイル
<!-- 標準的なラベルのスタイル -->
<Style x:Key="StandardLabelStyle"
        TargetType="Label">
    <Setter Property="Margin"
            Value="10" />
    <Setter Property="Padding"
            Value="0" />
    <Setter Property="VerticalContentAlignment"
            Value="Center" />
</Style>
テキストボックスのスタイル1
<!-- 標準的なテキストボックスのスタイル -->
<Style x:Key="StandardTextBoxStyle"
        TargetType="TextBox">
    <Setter Property="Margin"
            Value="10" />
    <Setter Property="VerticalContentAlignment"
            Value="Center" />
</Style>
テキストボックスのスタイル2
<!-- 既定のテキストボックススタイル -->
<Style TargetType="TextBox"
        BasedOn="{StaticResource StandardTextBoxStyle}" />
テキストボックスのスタイル3
<!-- コード入力テキストボックスのスタイル -->
<Style x:Key="CodeTextBoxStyle"
        TargetType="TextBox"
        BasedOn="{StaticResource StandardTextBoxStyle}">
    <!-- 等幅フォント -->
    <Setter Property="FontFamily"
            Value="Consolas" />
    <!-- IME無効 -->
    <Setter Property="InputMethod.IsInputMethodEnabled"
            Value="False" />
</Style>
テキストボックスのスタイル4
<!-- 全角入力テキストボックスのスタイル -->
<Style x:Key="FullWidthCharTextBoxStyle"
        TargetType="TextBox"
        BasedOn="{StaticResource StandardTextBoxStyle}">
    <!-- IMEひらがな -->
    <Setter Property="InputMethod.PreferredImeState"
            Value="On" />
    <Setter Property="InputMethod.PreferredImeConversionMode"
            Value="FullShape,Native" />
</Style>

スタイルの作成2

MainWindow.xamlWindow.Resourcesを作成し、スタイルを定義します。

ラベルのスタイル
<Window.Resources>
    <!-- 項目ラベルのスタイル -->
    <Style x:Key="ItemLabelStyle"
            TargetType="Label"
            BasedOn="{StaticResource StandardLabelStyle}">
        <Setter Property="Foreground"
                Value="White" />
    </Style>
</Window.Resources>

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

1)

Gridを行分割します。

後で調整するので大体半分ぐらいで分割します。

Gridの上の行にStackPanelを配置します。
StackPanelの中にさらにStackPanelを、横並び設定で配置します。

2)

ドキュメントアウトラインで最下層のStackPanelにツールボックスからLabel, TextBox, Buttonの順にドラッグ&ドロップします。

3)

TextBoxの名前をZipCodeに設定します。
Text, TextWrapping, Widthのリセットボタンを押します。
Margin(左)を5に、Margin(上)を15に、Margin(右)を5に、Margin(下)を0に設定します。

MinWidth80を設定します。

MaxLength7を設定します。

Style="{StaticResource CodeTextBoxStyle}"を設定します。

4)

Windowのプロパティを設定します。

プロパティ 設定値
Background #FFCC0000
FocusManager.FocusedElement {Binding ElementName=ZipCode}
Style {StaticResource StandardWindowStyle}
Title 郵便番号検索

5)

Labelのプロパティを設定します。

プロパティ 設定値
Content 郵便番号
Style {StaticResource ItemLabelStyle}
Margin(左,上,右,下) 15,15,5,0

6)

ドキュメントアウトラインでButtonの中にGridを配置し、
そのGridの中にProgressBar, TextBlockの順で配置します。

ButtonMargin5,15,5,0を設定します。

ProgressBarの名前にSearchProgressを設定し、Width, Heightをリセットします。
これでプログレスバーがボタン内全体に広がります。

Foreground#FF4BB33Eを設定します。

VisibilityCollapsedを設定して非表示にします。
IsIndeterminateTrueを設定します。これは「xx% 完了」のような進捗状況ではなく、処理中であることだけを表示したいときに設定します。

BorderThickness0に設定して枠線を消します。
イメージがつきやすいようにd:VisibilityVisibleを設定して、デザイン時はプログレスバーを表示しておきます。

📘Visibilityプロパティ

Visibilityプロパティは2種類の非表示方法があります。
Collapsedは非表示にしたコントロールの領域を確保しません。
Hiddenは領域を確保した状態で非表示にします。

Buttonの中のTextBlockのプロパティを設定します。

プロパティ 設定値
Text 住所検索
Margin(左右,上下) 20,0

7)

ツールボックスのLabelをドキュメントアウトラインの最上位のStackPanelにドラッグ&ドロップします。

プロパティを以下のように設定します。

プロパティ 設定値
Content 住所
Margin(左,上,右,下) 15,15,15,0
Style {StaticResource ItemLabelStyle}

8)

Gridの下の行にTextBoxをドラッグ&ドロップします。
TextBoxを右クリックし、レイアウト > すべてリセットを選択します。

9)

Gridの上の行をAutoに設定します。

10)

住所を表示するTextBoxの名前をResultTextに設定し、以下のプロパティを設定します。

プロパティ 設定値
Margin(左,上,右,下) 15,0,15,15
Style {StaticResource FullWidthCharTextBoxStyle}
AcceptsReturn True
VerticalContentAlignment Top
VerticalScrollBarVisibility Auto
Text 空欄

11)

WindowHeight250に設定します。

復習ポイント

  • IME制御
  • プログレスボタン