MahApp Flyout CloseCommand and IsOpen are not bound properly

I am following the strict MVVM schema.

In mine, FlyoutControl

I have linked the following:

        <controls:Flyout IsOpen="{Binding FlyoutIsOpen, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
                         CloseCommand="{Binding CloseFlyoutCommand}">


I have two scripts both of which are not working:

Scenario 1:

I set FlyoutIsOpen

to true

in my constructor ViewModel

, and I bind CloseFlyoutCommand

to DelegateCommand

, which takes a method that sets FlyoutIsOpen

to false


In this case, my view is loaded with it Flyout

already open (as expected). However, when I click the Flyout

close button , nothing happens unless I click again. If I print the output of my method, I can confirm that the command is setting FlyoutIsOpen

to false

, but for some reason I need a second click (after being FlyoutIsOpen

set to false

) to actually close Flyout


Scenario 2:

I have set FlyoutIsOpen

to false

(or uninitialized) in my constructor. I am binding another button to DelegateCommand

that takes a method that sets FlyoutIsOpen

in true


The view is loaded with closed Flyout

(as expected). However, when I click on the button associated with the method that sets FlyoutIsOpen

in true

, nothing happens and Flyout

does not appear.

Has anyone faced the same unresponsive issues with FlyoutsControl

? If so, how did you resolve it?


source to share

1 answer

I also had problems binding to the property isOpen

, but I managed to style ItemContainer

and bind isOpen

there instead of inside mine Flyout

. I don't need it anymore CloseCommand

, setting Visible

to false in my viewmodel closes the popup.


where I define the bindings ItemContainer


    <controls:FlyoutsControl ItemsSource="{Binding Flyouts}">
            <view:FlyoutPositionConverter x:Key="FlyoutPositionConverter"/>
            <DataTemplate DataType="{x:Type viewModel:SettingsViewModel}">
            <Style BasedOn="{StaticResource {x:Type controls:Flyout}}"
               TargetType="{x:Type controls:Flyout}">
                <Setter Property="Header"
                    Value="{Binding Header}" />
                <Setter Property="IsOpen"
                    Value="{Binding Visible}" />
                <Setter Property="Position"
                    Value="{Binding Position, Converter={StaticResource FlyoutPositionConverter}}" />
                <Setter Property="IsModal"
                    Value="{Binding IsModal}" />
                <Setter Property="Theme" Value="Accent" />


The mainviewmodel is ObservableCollection<IFlyoutViewModel>

named Flyouts

and contains all my viewtodels to fly out. Of course they have to implement IFlyoutViewModel


using System.ComponentModel;

namespace MyApplication.ViewModel
    internal interface IFlyoutViewModel : INotifyPropertyChanged
        string Header { get; }
        bool Visible { get; set; }
        Position Position { get; set; }
        bool IsModal { get; set; }

    public enum Position



- it's just a mapping between my position enum and MahApps.Metro.Controls.Position

because I didn't want to use real positon in my viewmodel interface.



All Articles