Windows phone 8.1 Flyout hide with behaviour issue

问题

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>

回答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;
    }
}

回答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>

回答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();
    }

来源：https://stackoverflow.com/questions/24066687/windows-phone-8-1-flyout-hide-with-behaviour-issue