WInUI3関連記事
https://tera1707.com/entry/2022/02/06/144447#WinUI3
やりたいこと
普通のボタン(Microsoft.UI.Xaml.Controls.Button)にはFlyout
プロパティがあって、そこにFlyoutを入れてやると、
クリックしたときにフライアウトを出すことができる。
今回、トグルボタン(Microsoft.UI.Xaml.Controls.ToggleButton)でもクリックしたときにフライアウトを出したいのだが、トグルボタンには
Flyout
プロパティがなく、右クリックしたときに出るFlyoutをセットするためのContextFlyout
しかない。
ContextFlyout
をうまく使って、普通の(左クリックして出る)Flyoutっぽく動かせないか、やってみる。
前提
やり方
下記のような感じでやってみた。
- ToggleButtonを継承したクラスを作成し、
OnToggle()
をオーバーライドして、親クラスのOnToggleの処理(base.OnToggle())を行わないようにすることで、通常のToggleボタンを左クリックしたときのトグル(ONになったりOFFになったりする)動作が行われないようにする。- 代わりに、
OnToggle()
では、ContextFlyoutを自分の場所に表示する処理を行う。 - Toggle動作はFlyoutの中に入っているRadioButtonのONOFFを見て行うようにする。
- 画面のxamlでは、作ったクラスの
ContextFlyout
に、出したいフライアウトをセットしておく。
サンプルコード
フライアウトできるトグルボタンのコード
public class FlyoutToggleButton : ToggleButton { protected override void OnToggle() { //base.OnToggle(); this.ContextFlyout.ShowAt(this); } }
それを使う画面
<Grid> <local:FlyoutToggleButton Content="クリック時にFlyoutを出せるトグルボタン" IsChecked="{Binding IsChecked, ElementName=radio1}"> <local:FlyoutToggleButton.ContextFlyout> <Flyout> <StackPanel> <RadioButton x:Name="radio1" Content="選択1"/> <RadioButton x:Name="radio2" Content="選択2"/> </StackPanel> </Flyout> </local:FlyoutToggleButton.ContextFlyout> </local:FlyoutToggleButton> </Grid>
動作イメージ
参照
Button
ToggleButton