如何在 ViewModel 中控制 UWP Flyout？答案

【问题标题】：How to control UWP Flyout in ViewModel?如何在 ViewModel 中控制 UWP Flyout？
【发布时间】：2017-09-24 17:04:41
【问题描述】：

我想从视图模型中打开和关闭我的弹出窗口。

我正在使用 UWP 和 Template10。我打算使用 Template10 OpenFlyoutAction 和 Template10 CloseFlyoutAction。

我创建了一个 bool 属性来存储打开或关闭状态。不知道如何在这里调用 OpenFlyoutAction。

    bool _IsFlyoutOpen = default(bool);
    public bool IsFlyoutOpen
    {
        get { return _IsFlyoutOpen; }
        set
        {
            var ofa = new OpenFlyoutAction();
            if (_IsFlyoutOpen)
            {
                // what should i call here to open flyout
            }
            else
            {
                // what should i call here to close flyout
            }
            Set(ref _IsFlyoutOpen, value);
        }
    }

我创建了 2 个命令来通过更改字段来打开和关闭弹出窗口。

    DelegateCommand _CloseFlyout;
    public DelegateCommand CloseFlyout
       => _CloseFlyout ?? (_CloseFlyout = new DelegateCommand(() =>
       {
           _IsFlyoutOpen = false;
       }, () => true));


    DelegateCommand _OpenFlyout;
    public DelegateCommand OpenFlyout
       => _OpenFlyout ?? (_OpenFlyout = new DelegateCommand(() =>
       {
           _IsFlyoutOpen = true;
       }, () => true));

在 xaml 中，我使用 DataTriggerBehaviour 来监控 IsFlyoutOpen 属性并采取相应措施。不确定这是否正确。

        <Button Content="Open flyout" Command="{x:Bind ViewModel.OpenFlyout}">
            <FlyoutBase.AttachedFlyout>
                <Flyout Placement="Full">
                    <StackPanel>
                        <TextBlock Text="Awesome Flyout!" />
                        <Button Content="Close flyout" Command="{x:Bind ViewModel.CloseFlyout}"/>
                    </StackPanel>
                </Flyout>
            </FlyoutBase.AttachedFlyout>
            <Interactivity:Interaction.Behaviors>
                <Core:DataTriggerBehavior Binding="{x:Bind ViewModel.IsFlyoutOpen}" ComparisonCondition="Equal" Value="True">
                    <Behaviors:OpenFlyoutAction />
                </Core:DataTriggerBehavior>

                <Core:DataTriggerBehavior Binding="{x:Bind ViewModel.IsFlyoutOpen}" ComparisonCondition="Equal" Value="False">
                    <Behaviors:CloseFlyoutAction />
                </Core:DataTriggerBehavior>
            </Interactivity:Interaction.Behaviors>
        </Button>

完整的源代码可以在这里。 Template10 Flyout Viewmodel

【问题讨论】：

您想什么时候打开浮出控件？你能告诉我用户操作吗？

标签： mvvm uwp viewmodel template10 flyout

【解决方案1】：

我想这就是你要找的东西

<Button Content="Open flyout">
  <FlyoutBase.AttachedFlyout>
    <Flyout>
      <StackPanel>
                    <TextBlock Text="Something Useful" />
                    <Button Content="Close">
                        <!-- Call CloseFlyoutAction -->
                    </Button>
      </StackPanel>
     </Flyout>
 </FlyoutBase.AttachedFlyout>
 <Interactivity:Interaction.Behaviors>
    <Core:EventTriggerBehavior EventName="Tapped">
        <Behaviors:OpenFlyoutAction />
    </Core:EventTriggerBehavior>
 </Interactivity:Interaction.Behaviors>
 </Button>

打开弹出操作

https://github.com/Windows-XAML/Template10/wiki/Behaviors-and-Actions#openflyoutaction

关闭弹出操作

https://github.com/Windows-XAML/Template10/wiki/Behaviors-and-Actions#closeflyoutaction

您也可以输入ConditionalAction 来表示必须满足某个条件才能调用CloseFlyoutAction。它全部在 wiki 上，几乎所有实际代码都包含在 XAML 中。

【讨论】：