混合 UWP 弹出工具未保持打开状态答案

【问题标题】：Blend UWP flyout tool not staying open混合 UWP 弹出工具未保持打开状态
【发布时间】：2017-09-09 23:06:35
【问题描述】：

我目前正在 Visual Studio 2017 中的 Blend 中制作 UWP，但我在使用弹出工具时遇到了问题。我希望手动控制它何时打开和何时关闭，当它失去焦点时它会自行关闭时基本上禁用该功能，以便我可以在关闭浮出控件之前与应用程序中的其他工具或对象进行交互。我曾尝试添加一些 C# 代码来尝试此操作，但没有成功。我不确定这是否需要在模板中进行更改，或者是否可以通过 XAML 或最好是 C# 来完成。我已将弹出窗口附加到堆栈面板，并使用以下代码在单独的位置添加了一个按钮单击事件：

flyout.AllowFocusOnInteraction = true;
flyout.AllowFocusWhenDisabled = true;
flyout.ShowAt(stackpanel);

我希望这可以使弹出窗口保持打开状态，但事实并非如此。我有另一个按钮，我想用以下 C# 代码关闭它：

flyout.Hide();

但似乎没有必要，因为无论代码如何，它都会自动关闭。有人有什么建议吗？

【问题讨论】：

如果答案对您有帮助并解决了您的问题，请mark 接受答案。非常感谢！

标签： c# xaml uwp blend flyout

【解决方案1】：

表示一个显示轻量级 UI 的控件，该 UI 要么是信息，要么需要用户交互。与对话框不同，Flyout 可以通过单击或点击其外部、按设备的后退按钮或按“Esc”键来轻松关闭。

对于您的方案，Flyout 控件不是合理的选择。您可以通过使用ContentDialog 来实现这一点。下面的代码实现了contentDialog的功能。

<ContentDialog
x:Class="AppUIBasics.ControlPages.ContentDialogExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppUIBasics.ControlPages"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="SIGN IN"
PrimaryButtonText="sign in"
SecondaryButtonText="cancel"
PrimaryButtonClick="ContentDialog_PrimaryButtonClick"
SecondaryButtonClick="ContentDialog_SecondaryButtonClick">
<StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<TextBox Name="userNameTextBox" Header="User name"/>
<PasswordBox Name="passwordTextBox" Header="Password" IsPasswordRevealButtonEnabled="True"/>
<CheckBox Name="saveUserNameCheckBox" Content="Save user name"/>
<TextBlock x:Name="errorTextBlock" />
<TextBlock Text="Lorem ipsum dolor sit amet, consectetur adipisicing elit." TextWrapping="Wrap" />
</StackPanel>
</ContentDialog>

这个官方code sample关于UWP UI基础的可以参考。如果你坚持使用 Flyout contorl。您可以参考my code sample。不过官方并没有建议。

MainPage.xaml

<Button Content="Show Flyout">
     <Button.Flyout>
         <Flyout  x:Name="flyout" Closing="flyout_Closing"  >
             <StackPanel>
                 <TextBox x:Name="MyTextBox" Text="You can edit this text by tapping it."/>
                 <Button Content="close" Click="Button_Click"/>
             </StackPanel>
         </Flyout>
     </Button.Flyout>
 </Button>

MainPage.xaml.cs

private bool manual = false;

 private void flyout_Closing(FlyoutBase sender, FlyoutBaseClosingEventArgs args)
 {
     if(manual == true)
     {
         args.Cancel = false;
     }
     else
     {
         args.Cancel = true;

     }
     manual = false;
 }

 private void Button_Click(object sender, RoutedEventArgs e)
 {
     manual = true;
     flyout.Hide();
 }

【讨论】：