Windows Phoneアプリケーション開発入門

第6回 Windows phoneでテキストエディタを作ろう!(4)

この記事を読むのに必要な時間:およそ 4 分

はじめに

「Windows phoneでテキストエディタを作ろう!」の4回目では,⁠検索」⁠置換」を実装します。

(テキストエディタと呼ばないかもしれませんが)Windows付属のメモ帳を参考に,デスクトップで動作しているテキストエディタの検索・置換と同等の機能を,どのようにしてWindows phoneアプリケーションに組み込むかを検討しながら実装を進めて行きましょう。

実装後のサンプルプログラムを用意しています。UIに手を入れていますので実際にVisual Studioのフォームデザイナを確認しながら追っていただければ,より理解が早いかと思います。

検索機能のUIを検討する

メモ帳のメニューから検索を選択すると,検索専用のダイアログが表示されます。

図1 メモ帳の検索ダイアログ

図1 メモ帳の検索ダイアログ

テキストエディタに触ったことはありますか? 検索を行う時には,大抵文章が表示されているフォームとは別に小さなダイアログを表示し,文章を確認しながら検索ワードや置換ワードを入力していたのではないでしょうか。

今作っているアプリケーションでもメモ帳と同様に,小さなダイアログを表示して検索機能を設けたいところですが,Windows phoneアプリケーションのダイアログと言えば「Windows phoneでテキストエディタを作ろう!」3回目で使用したOpenFileDialogのように全画面表示されてしまいます。

前述の通り,検索と置換は文章を確認しながら行いたいのでダイアログは使用せずに,テキストボックスの上部にパネルを用意し,そのパネル上から検索と置換の操作を行うようにしましょう。

検索・置換用のパネルの作成

フォームデザイナのツールボックスからPanelコントロールを選択し,TextBox上にPanelを配置します。Panelの以下のプロパティを変更します。

NamepanelSearch
DockTop
VisibleFalse

Visibleプロパティは,コントロールの表示・非表示を設定するプロパティです。アプリケーションの起動時点にこのパネルを表示させる必要はありませんので,Falseに設定します。

また,TextBoxよりもPanelを後に追加しているため,Panelが最前面に表示されTextBoxが隠れてしまっています。TextBoxを右クリックしポップアップから「最前面へ移動」を選択すると,TextBoxが適切に表示されます。

図2 PanelがTextBoxより前面に表示されている状態

図2 PanelがTextBoxより前面に表示されている状態

Panel上に検索ワード・置換ワードの入力欄や,実際に検索処理を行う為のボタン等のコントロールを配置しましょう。

図3 検索パネルへのコントロールの配置図

図3 検索パネルへのコントロールの配置図

それぞれのコントロールの名前は以下のように設定しました。

textSearchWord検索ワードの入力欄
textReplaceWord置換ワードの入力欄
btnSearch検索・置換処理ボタン
btnPanelCloseパネル閉ボタン

パネルの表示・非表示処理の実装

検索パネルへの各コントロールの配置が完了しましたので実装を進めて行きます。ここではパネルの表示・非表示処理の実装を行います。

検索と置換で同じパネルを共有して使いたいので,現在のモードを持って処理する内容を切り分けたいと思います。検索か置換かのパネルの状態を定義したPanelModeを定義し,現在の状態を持つPanelMode型の変数nowPanelModeを宣言します。

private enum PanelMode
{
    Search, // 検索モード
    Replace // 置換モード
}
private PanelMode nowPanelMode;

このnowPanelModeの状態に応じて処理を切り分けます。

著者プロフィール

和田健司(わだけんじ)

1982年10月12日生まれ。大阪で働くプログラマ。Microsoft MVP for Device Application Development(Jul 2010 - Jun 2011)。Windows Mobileに傾倒し今に至る。Windows Mobile向けのTipsを書いています。iPhoneアプリ開発を始めました。嫌いな食べ物はカレー。

URL: http://ch3cooh.jp/
Blog: http://d.hatena.ne.jp/ch3cooh393/

コメント

コメントの記入