Close UWP flyout with listview item click - xaml

Question

I'm trying to close a flyout on a listview item click. The problem is that during runtime, the CallMethodAction can't find the hide method of the flyout menu. How can I fix this?
<Flyout x:Name="UnitFlyout">
<ListView x:Name="ArmyUnitListView" ItemsSource="{Binding Source={StaticResource ArmyUnitCollection}}" SelectionMode="Single" >
<ListView.GroupStyle>
<GroupStyle HidesIfEmpty="True" HeaderTemplate="{StaticResource ArmyListDataGroupTemplate}" />
</ListView.GroupStyle>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="SelectionChanged">
<core:InvokeCommandAction Command="{Binding AddUnitCommand}" CommandParameter="{Binding SelectedItem, ElementName=ArmyUnitListView}" />
<core:CallMethodAction TargetObject="UnitFlyout" MethodName="Hide"/>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</ListView>
</Flyout>

Answer 1

I made a demo and reproduced the problem.The reason lies on the ElementName binding to popups.
ElementName bindings do not work within Flyout’s and other popups
Please see this Case.
I found this blog, which offers a workaround to fix this problem. And I've tried it with a demo,which works fine.
In your case, you can copy the FlyoutHelpers (in blog) class to your project; And add IsFlyoutOpen and SendCommand to your ViewModel like below:
public class MainPageViewModel : ViewModelBase
{
public RelayCommand SendCommand { get; set; }// bind this to your xaml
public List<String> MyData { get; set; }
private bool isFlyoutOpen;
public bool IsFlyoutOpen// bind this to your xaml
{
get { return isFlyoutOpen; }
set { this.Set(() => IsFlyoutOpen, ref isFlyoutOpen, value); }
}
public MainPageViewModel()
{
SendCommand = new RelayCommand(() =>
{
// Doing processing...
IsFlyoutOpen = false;
});
MyData = new List<string> { "winffee", "123", "this Data" };//this is sample data
}
}
And Bind the commands and properties to your xaml:
<Flyout x:Name="UnitFlyout"
local:FlyoutHelpers.Parent="{Binding ElementName=myBtn}"
local:FlyoutHelpers.IsOpen="{Binding IsFlyoutOpen,Mode=TwoWay}">
<ListView x:Name="ArmyUnitListView" SelectionMode="Single" ItemsSource="{Binding MyData}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="SelectionChanged" SourceObject="{Binding ElementName=ArmyUnitListView}">
<!--<core:InvokeCommandAction Command="{Binding AddUnitCommand}" CommandParameter="{Binding SelectedItem, ElementName=ArmyUnitListView}" />-->
<core:InvokeCommandAction Command="{Binding SendCommand}" />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</ListView>
</Flyout>
Here is my entire Demo: FlyoutSample