How to control UWP Flyout in ViewModel? - mvvm

Question

I want to open and close my flyout from viewmodel.
Im using UWP and Template10. I intent to use Template10 OpenFlyoutAction and Template10 CloseFlyoutAction.
I created a bool property that stores open or close state. Not sure how to call OpenFlyoutAction in here.
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);
}
}
I created 2 Command to open and close flyout by changing the field.
DelegateCommand _CloseFlyout;
public DelegateCommand CloseFlyout
=> _CloseFlyout ?? (_CloseFlyout = new DelegateCommand(() =>
{
_IsFlyoutOpen = false;
}, () => true));
DelegateCommand _OpenFlyout;
public DelegateCommand OpenFlyout
=> _OpenFlyout ?? (_OpenFlyout = new DelegateCommand(() =>
{
_IsFlyoutOpen = true;
}, () => true));
In xaml, i use DataTriggerBehaviour to monitor IsFlyoutOpen property and act accordingly. Not sure if this is the right way.
<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>
Full source code can be had here. Template10 Flyout Viewmodel

Answer 1

I think this is what you are looking for
<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>
Open Flyout Action
https://github.com/Windows-XAML/Template10/wiki/Behaviors-and-Actions#openflyoutaction
Close Flyout Action
https://github.com/Windows-XAML/Template10/wiki/Behaviors-and-Actions#closeflyoutaction
You can also throw in a ConditionalAction to indicate that a condition has to be met before you can call CloseFlyoutAction. Its all there on the wiki, almost all of the actual code is contained in XAML.