概要
郵便番号を入力してボタンを押すと、Web APIを使って郵便番号から住所を取得し、下のテキストボックスに表示します。
プロジェクトの作成
新しいプロジェクトの作成でWPFアプリケーションを、プロジェクト名:ZipCodeSearch、フレームワーク:.NET 6.0で作成してください。
画面の作成
スタイルの作成1
App.xamlのApplication.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>
<!-- 標準的なテキストボックスのスタイル -->
<Style x:Key="StandardTextBoxStyle"
TargetType="TextBox">
<Setter Property="Margin"
Value="10" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
</Style>
<!-- 既定のテキストボックススタイル -->
<Style TargetType="TextBox"
BasedOn="{StaticResource StandardTextBoxStyle}" />
<!-- コード入力テキストボックスのスタイル -->
<Style x:Key="CodeTextBoxStyle"
TargetType="TextBox"
BasedOn="{StaticResource StandardTextBoxStyle}">
<!-- 等幅フォント -->
<Setter Property="FontFamily"
Value="Consolas" />
<!-- IME無効 -->
<Setter Property="InputMethod.IsInputMethodEnabled"
Value="False" />
</Style>
<!-- 全角入力テキストボックスのスタイル -->
<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.xamlにWindow.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に設定します。
MinWidthに80を設定します。
MaxLengthに7を設定します。
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の順で配置します。
ButtonのMarginに5,15,5,0を設定します。
ProgressBarの名前にSearchProgressを設定し、Width, Heightをリセットします。
これでプログレスバーがボタン内全体に広がります。
Foregroundに#FF4BB33Eを設定します。
VisibilityにCollapsedを設定して非表示にします。
IsIndeterminateにTrueを設定します。これは「xx% 完了」のような進捗状況ではなく、処理中であることだけを表示したいときに設定します。
BorderThicknessを0に設定して枠線を消します。
イメージがつきやすいようにd:VisibilityにVisibleを設定して、デザイン時はプログレスバーを表示しておきます。
📘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)
WindowのHeightを250に設定します。
復習ポイント
- IME制御
- プログレスボタン