🖥️
WPFで黒背景×緑文字のターミナル風UIを本気で作るテクニック集
WPFで黒背景×緑文字のターミナル風UIを本気で作る
「ターミナルっぽい見た目のアプリが作りたい」
エンジニアなら一度は思ったことがあるはず。黒背景に緑の文字、あのハッカー映画みたいなやつ。
個人開発のタスク管理ツール「tsk」で、それを WPFで本気でやった。
やってみると、想像以上に奥が深い。
👉 実際にやって分かった実践テクニックのまとめ。
完成形
┌─ tsk ──────────────────── 📌 ─ ×
│
│ > TODAY (3)
│ ▸ [ ] 0508 メール返信 #仕事
│ [x] 0508 日報提出 #仕事
│ [ ] 0504 議事録確認 ⚠+4d #仕事
│ > THIS WEEK (2)
│ [ ] 0509 設計書レビュー 📝▼ #仕事
│ 📝 A棟3F 会議室B 14:00〜
│ [ ] 0509 週報提出 #仕事
│ > SOMEDAY (1)
│ [ ] ---- 本棚の整理 #プライベート
│ ▲
│ █
│ │
│ ▼
│ ─────────────────────────────────
│ > 金 レビュー #仕事
└── 5/8 (木) 3/8 done ⚠1 ── tsk
1. フォント選定：埋め込みピクセルフォントという選択
ターミナル風UIの生命線は 等幅フォント。
👉 ここを外すと全部崩れる。
結論
PixelMplus12 を埋め込む。
👉 日英等幅＋ドット感＋環境依存なし
なぜ埋め込みか
- 環境に依存しない
- 見た目が完全固定される
- フォント未インストール問題が消える
👉 「見た目を支配できる」
なぜ他フォントがダメか
- Consolas → ドット感が弱い
- Yu Gothic → 幅が揃わない
- Cascadia → 日本語が崩れる
👉 PixelMplus12 一択
2. ウィンドウ：タイトルバーを殺す
デフォルトは邪魔。
👉 まず消す。
WindowStyle=None
AllowsTransparency=true
👉 自前で作る
3. ListBoxを捨てた
最初は使うつもりだった。
👉 無理だった。
- 勝手に青くなる
- ホバーで壊れる
- 思い通りに制御できない
👉 余計なことをする
結論
全部捨てた。
👉 Grid + TextBlock
4. RenderDisplay
UIは全部ここ。
👉 毎回作り直す
👉 1箇所で完結
なぜこれでいいか
- データ量が少ない
- シンプル
- 全体が見える
👉 Bindingより楽
5. スクロールバー
デフォルトは使わない。
▲
█
│
▼
👉 文字で描く
6. テーマ
色はまとめる。
👉 ThemeColorsで一元管理
重要ポイント
👉 Overdue色はテーマごとに変える
→ 見分けがつかなくなるため
7. タグ色
hash % パレット
👉 同じタグは同じ色
8. 入力欄
👉 透明TextBox
👉 CaretBrush忘れると終わる
9. ContextMenuの地雷
👉 デフォルトテンプレートが白
👉 Styleでは消えない
解決方針
👉 無理に戦わない
👉 サブメニューを消す
10. ステータスバー
👉 普段は静か
👉 異常時だけ主張
全体構造
👉 Window + Grid + TextBlock + TextBox
👉 それだけ
コツまとめ
- フォントが最重要
- ListBoxは捨てる
- UIは全部自分で描く
- 中途半端が一番つらい
👉 やるなら全部やる
まとめ
WPFは自由。
👉 ただし全部責任が来る
ダウンロード
GitHub
tsk_vXXX.zip をダウンロードして展開 → tsk.exe で起動
作者：mitsukida
お問い合わせ：mmitsuki0806@gmail.com
🔗 次の記事
Discussion