ToggleButton + AttchedFlyout によるオン切替時のみ追加設定するUIパターン

モチベーション

• 編集UIが複雑になった場合、一つの機能文脈を基にUIをシンプルにしたい
• 小規模な設定UIはFlyoutに逃がすのも手段としてありえる

動作の様子

実装

<ToggleButton IsChecked="{x:Bind _vm.IsDisplayOnionSkin, Mode=TwoWay}"
              Checked="OnionSkinToggleButton_Checked"
              x:Name="OnionSkinToggleButton"
              >
  <TextBlock Text="ｵﾆｵﾝｽｷﾝ" />

  <FlyoutBase.AttachedFlyout>
    <Flyout>
      <StackPanel Orientation="Vertical">
        <Slider x:Name="OnionSkinOpacitySlider"
                Header="不透明度"
                Maximum="1"
                Minimum="0"
                Value="{x:Bind _vm.OnionSkinOpacity, Mode=TwoWay}"
                TickFrequency="0.01"
                StepFrequency="0.01"
                ThumbToolTipValueConverter="{StaticResource ToPercentStringConverter}"
                HorizontalAlignment="Stretch" />
        
      </StackPanel>
    </Flyout>
  </FlyoutBase.AttachedFlyout>
</ToggleButton>

private void OnionSkinToggleButton_Checked(object sender, RoutedEventArgs e)
{
    var target = sender as FrameworkElement;
    if (FlyoutBase.GetAttachedFlyout(target) is { } flyout)
    {
        flyout.ShowAt(target);
    }
}

適用できそうな場面

• 有効・無効を切替えて使うケース（使わないシーンもある）（任意のタイミングで使いたい）
• たまに使う機能で追加設定UIも表示したいが、頻繁に使うわけでもないため設定UIに画面を専有させたくもない