【WPF】マウスクリックでフォーカスされるようにする

WPFではWindows.Formと異なり、UIコントロールをボタンでクリックしてもフォーカス表示にならないし、そもそもフォーカス自体されないようです。Tabボタンでしかフォーカスできません。
でもそれじゃあUIとして不便というか、不親切なので、マウスクリックでもフォーカスされるようにしたいよね、というのが今回の内容です。

Githubのコードはこちら

実際の動作

動作確認もかねて、まずは適当なUIコントロールを持つ画面を作ります。
今回はTextBlockをBorderで囲ったものを上下に並べました。

Tabキーを押下するとフォーカスが遷移する。

ところがマウスクリックで選択してもフォーカスされない!
(マウスの軌道の色が変わっているのはキャプチャツールによるものです)

実装

stackoverflowの以下の記事が参考になりました。

Achieving FocusVisualStyle with both Mouse and Keyboard Focus
WhatI'mTryingtoAchieveForsimplicity,IhaveagridofcellsandI'mtryingtoaddtheFocusVisualStyledashedrectangletoeachcellwhenitisfocused.Howeverthestyleonlyworkswhenth...

FocusAdorner.csファイルを作成し、以下を記載。
Tabキーのフォーカスデザインと合わせるために、OnRender内の数値を調整しています。
Microsoft コントロールのフォーカススタイルより)

.xaml.csに以下のメソッドを作成します。
元の回答の方ではStackPanelを指定していますが、様々なUIパーツに使用できるよう、UIElementとしています。

これらを.xamlの方で呼び出すようにします。
回答の方ではPreviwMouseDownを使用していますが、PreviewMouseUpで呼びます。

さあこれでクリックでもフォーカスが出るようになった……

あれ?なんかコントロールのサイズに合ってないぞ?
というわけで修正します。

ズレを修正

あまり詳しくなくて恐縮なのですが、どうも親要素、祖先要素などの関係で上記のようなサイズのズレが生じるようです。
こちらの件についてもstackoverflowにお世話になりました。

TransformToAncestor giving me the wrong transform
I'mnewtoWPFsothismaybeanewbiequestion.I'mworkingonsomekindofdiagrameditor,andwanttoconnectsomeelementswithlines.Someoftheseelementswillbenestedinsideotherelemen...

ForcusAdorner.csのOnRenderの処理前半を修正します。

完成!

無事にマウスクリックでフォーカスされるようになりました!
Tabキーでも変わらずフォーカスされます。

コメント

タイトルとURLをコピーしました