CODEWITHSUNDEEP
c#xamluwpblendflyout
Carlos Rodriguez
Carlos Rodriguez

Reputation: 97

Blend UWP flyout tool not staying open

I am currently making a UWP in Blend in Visual Studio 2017 but I am having trouble with the flyout tool. I was hoping to manually control when it opens and when it closes essentially disabling the feature when it closes by itself when it loses focus so that I may be able to interact with other tools or objects in the app before closing the flyout. I have tried adding some C# codes to attempt this but I have had no success. I'm not sure either if this would need to be altered in the template or if it can be done from XAML or preferably C#. I have attached the flyout to a stackpanel and added a button click event in a separate location with the following code:

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

I was hoping this would work to keep the flyout open but it doesn't. I have another button that I had in mind to close it with the following C# code:

flyout.Hide();

But it would seem that it is not necessary because it closes automatically still regardless of the code. Does anyone have any suggestions?

Upvotes: 1

Views: 1015

Answers (1)

Nico Zhu
Nico Zhu

Reputation: 32775

Represents a control that displays lightweight UI that is either information, or requires user interaction. Unlike a dialog, a Flyout can be light dismissed by clicking or tapping outside of it, pressing the device’s back button, or pressing the ‘Esc’ key.

For your scenario, the Flyout control is not reasonable choice. You could achieve this by using ContentDialog. And the following code realizes the feature of 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>

This the official code sample about UWP UI basic that you can refer to. If you insist on using Flyout contorl. You could refer to my code sample. However it is not suggested by the official.

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

Upvotes: 1

Related Questions