Windows phone 8.1 Flyout hide with behaviour issue - xaml

Question

What's wrong with the following behavior xaml , nothing happens at run time ( not even a exception). I'm trying to close flyout without code behind logic.
<AppBarButton HorizontalAlignment="Left"
Label="Pin to dashboard"
x:Name="pinBtn">
<AppBarButton.Flyout>
<Flyout x:Name="flyout"
Placement="Full">
<StackPanel x:Name="stackPanel"
HorizontalAlignment="Center"
VerticalAlignment="Top">
<TextBlock Text="Save as"
HorizontalAlignment="Center"
FontSize="16" />
<TextBox Width="275"
Style="{StaticResource RoundedTextBox}"
FontFamily="Global User Interface" />
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center">
<Button Content="Save"
Width="50" />
<Button x:Name="button"
Content="Cancel"
Width="50"
Margin="10,0,0,0">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior x:Name="eventTriggerBehavior" EventName="Click">
<Core:CallMethodAction TargetObject="{Binding Flyout, ElementName=pinBtn}"
MethodName="Hide" />
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Button>
</StackPanel>
</StackPanel>
</Flyout>
</AppBarButton.Flyout>
</AppBarButton>

Answer 1

I recently wrote a blog post on how you can accomplish this with a custom behavior or action.
When the button is clicked, you'll want to walk up the visual tree until you find the FlyoutPresenter, then get it's Parent as a popup and set IsOpen to false;
var flyout = element.GetVisualParent<FlyoutPresenter>();
if (flyout != null)
{
var popup = flyout.Parent as Popup;
if (popup != null)
{
popup.IsOpen = false;
}
}

Answer 2

I got it working with a custom action and with the help of WinRT XAML Toolkit.
/// <summary>
/// Using MVVM to close a flyout
/// </summary>
public class CloseFlyoutAction : DependencyObject, IAction
{
/// <inheritdoc/>
public object Execute(object sender, object parameter)
{
var element = sender as DependencyObject;
var flyout = element.GetFirstAncestorOfType<FlyoutPresenter>();
var popup = flyout.Parent as Popup;
if (popup != null)
{
popup.IsOpen = false;
}
return null;
}
}
usage:
<Button HorizontalAlignment="Right" Content="Cancel">
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<common:CloseFlyoutAction />
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>

Answer 3

I am sure you have to handle the Save and Cancel button on code behind so why not close the flyout from code behind as well.
<Button x:Name="buttonCancel"
Content="Cancel" Width="50" Margin="10,0,0,0"
Click="buttonCancel_Click">
private void buttonCancel_Click(object sender, RoutedEventArgs e)
{
// Dismiss the Flyout after the action is confirmed.
pinBtn.Flyout.Hide();
}