Question

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

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

我希望这可以保持弹出窗口打开，但它没有。我有另一个按钮，我想用以下C＃代码关闭它：

flyout.Hide();

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

Answer 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>

这是关于您可以参考的UWP UI基础的官方code sample。如果你坚持使用Flyout控制。你可以参考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();
 }

混合UWP弹出工具不会保持打开状态

1 个答案: