Question

我想从viewmodel打开并关闭我的弹出窗口。

我正在使用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

Answer 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。它就在维基上，几乎所有的实际代码都包含在XAML中。

Answer 2

从1809年开始，您可以通过IsOpen属性来控制弹出。

如何在ViewModel中控制UWP弹出窗口？

2 个答案:

打开弹出动作

关闭弹出操作