locked
display flyout control on Button mouse over

    Question

  • Dear Team,

                      i want to display a Flyout control on Button mouse over and diplay under bottom of the button.  kindly help


    Monday, October 27, 2014 5:27 PM

Answers

  • Hi Mann,

    Per my understanding, the Popup control is more appropriate for you to use. Flyout control has less properties to custom. Define the popup control in XAML, Use Button. PointerEntered event to handle the mouse comes into button. Use Button. PointerExited event to handle the mouse comes out. You can see the following code snippet.

    In XAML.

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
            <Grid>
    
                <StackPanel HorizontalAlignment="Center" Margin="0,50,0,0">
    
                    <TextBlock x:Name="MSG"></TextBlock>
    
                    <Button x:Name="btn" Content="Show Popup Flyout" />
    
                </StackPanel>
    
                <Popup x:Name="logincontrol1" IsOpen="False" IsLightDismissEnabled="True">
    
                    <Popup.ChildTransitions>
    
                        <TransitionCollection>
    
                            <PaneThemeTransition />
    
                        </TransitionCollection>
    
                    </Popup.ChildTransitions>
    
                    <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="2" Background="{StaticResource ApplicationPageBackgroundThemeBrush}" x:Name="RootPopupBorder">
    
                        <StackPanel Orientation="Vertical" Background="LightBlue" Height="400"  x:Name="pop" >
    
                            <StackPanel>
    
                                <TextBlock Text="Sign In With an Account"  HorizontalAlignment="Center" Foreground="White" FontSize="25" Margin="0,20,0,0" />
    
                            </StackPanel>
    
                            <StackPanel Orientation="Horizontal" Margin="0,50" HorizontalAlignment="Center">
    
                                <TextBlock Text="Email Id" Margin="10" Foreground="White" FontSize="25" />
    
                                <TextBox x:Name="id" IsSpellCheckEnabled="True" Height="40" Margin="13,1" Width="408" InputScope="EmailSmtpAddress" >
    
                                </TextBox>
    
                            </StackPanel>
    
                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
    
                                <TextBlock Text="Password" Foreground="White"  FontSize="25" />
    
                                <PasswordBox  x:Name="pwd"  IsPasswordRevealButtonEnabled="True" Height="40" Margin="5,1"  Width="408"/>
    
                            </StackPanel>
    
                            <StackPanel Orientation="Horizontal" Margin="0,30" HorizontalAlignment="Center">
    
                                <Button x:Name="loginclick"  Foreground="White"   Width="100" Content="Login"/>
    
                                <Button x:Name="cancel"    Foreground="White"  Width="100" Content="Cancel" />
    
                            </StackPanel>
    
                            <StackPanel HorizontalAlignment="Center">
    
                                <TextBlock Text=" Sign Up with a new Account" FontSize="25"/>
    
                            </StackPanel>
    
                        </StackPanel>
    
                    </Border>
    
                </Popup>
    
            </Grid>
    
    </Grid>
    

    In XAML.cs

     

     public sealed partial class MainPage : Page
    
        {
    
            public MainPage()
    
            {
    
                this.InitializeComponent();
    
                btn.PointerEntered += btn_PointerEntered;
    
                btn.PointerExited += btn_PointerExited;
    
            }
    
            void btn_PointerExited(object sender, PointerRoutedEventArgs e)
    
            {
    
                logincontrol1.IsOpen = false;
    
            }
    
            void btn_PointerEntered(object sender, PointerRoutedEventArgs e)
    
            {
    
                ShowFlyoutPopup(logincontrol1, new RoutedEventArgs());
    
            }
    
    
            private void ShowFlyoutPopup(object sender, RoutedEventArgs e)
    
            {
    
                if (!logincontrol1.IsOpen)
    
                {
    
                    var point = CalcOffsets((UIElement)sender);
    
                    RootPopupBorder.Width = 646;
    
                    logincontrol1.HorizontalOffset = point.X;
    
                    logincontrol1.VerticalOffset = point.Y + btn.ActualHeight;
    
                    logincontrol1.IsOpen = true;
    
                }
    
            }
    
            private Point CalcOffsets(UIElement elem)
    
            {
    
                var ttv = btn.TransformToVisual(Window.Current.Content);
    
                Point screenCoords = ttv.TransformPoint(new Point(0, 0));
    
                return screenCoords;
    
            }
    
    }
    

    If you still have questions, please feel free to let me know.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate the survey.

    • Marked as answer by mann madhan1 Tuesday, October 28, 2014 11:09 AM
    • Unmarked as answer by mann madhan1 Tuesday, October 28, 2014 2:45 PM
    • Marked as answer by mann madhan1 Thursday, October 30, 2014 4:20 PM
    Tuesday, October 28, 2014 7:34 AM
    Moderator
  • Hello,

    Remove the IsLightDismissEnabled property in Popup XAML will solve this issue.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate the survey.

    • Marked as answer by mann madhan1 Thursday, October 30, 2014 4:20 PM
    Thursday, October 30, 2014 1:55 AM
    Moderator

All replies

  • dear Team,

                          actually i want the result like above this..

    Thanks 

    Tuesday, October 28, 2014 7:05 AM
  • Hi Mann,

    Per my understanding, the Popup control is more appropriate for you to use. Flyout control has less properties to custom. Define the popup control in XAML, Use Button. PointerEntered event to handle the mouse comes into button. Use Button. PointerExited event to handle the mouse comes out. You can see the following code snippet.

    In XAML.

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
            <Grid>
    
                <StackPanel HorizontalAlignment="Center" Margin="0,50,0,0">
    
                    <TextBlock x:Name="MSG"></TextBlock>
    
                    <Button x:Name="btn" Content="Show Popup Flyout" />
    
                </StackPanel>
    
                <Popup x:Name="logincontrol1" IsOpen="False" IsLightDismissEnabled="True">
    
                    <Popup.ChildTransitions>
    
                        <TransitionCollection>
    
                            <PaneThemeTransition />
    
                        </TransitionCollection>
    
                    </Popup.ChildTransitions>
    
                    <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="2" Background="{StaticResource ApplicationPageBackgroundThemeBrush}" x:Name="RootPopupBorder">
    
                        <StackPanel Orientation="Vertical" Background="LightBlue" Height="400"  x:Name="pop" >
    
                            <StackPanel>
    
                                <TextBlock Text="Sign In With an Account"  HorizontalAlignment="Center" Foreground="White" FontSize="25" Margin="0,20,0,0" />
    
                            </StackPanel>
    
                            <StackPanel Orientation="Horizontal" Margin="0,50" HorizontalAlignment="Center">
    
                                <TextBlock Text="Email Id" Margin="10" Foreground="White" FontSize="25" />
    
                                <TextBox x:Name="id" IsSpellCheckEnabled="True" Height="40" Margin="13,1" Width="408" InputScope="EmailSmtpAddress" >
    
                                </TextBox>
    
                            </StackPanel>
    
                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
    
                                <TextBlock Text="Password" Foreground="White"  FontSize="25" />
    
                                <PasswordBox  x:Name="pwd"  IsPasswordRevealButtonEnabled="True" Height="40" Margin="5,1"  Width="408"/>
    
                            </StackPanel>
    
                            <StackPanel Orientation="Horizontal" Margin="0,30" HorizontalAlignment="Center">
    
                                <Button x:Name="loginclick"  Foreground="White"   Width="100" Content="Login"/>
    
                                <Button x:Name="cancel"    Foreground="White"  Width="100" Content="Cancel" />
    
                            </StackPanel>
    
                            <StackPanel HorizontalAlignment="Center">
    
                                <TextBlock Text=" Sign Up with a new Account" FontSize="25"/>
    
                            </StackPanel>
    
                        </StackPanel>
    
                    </Border>
    
                </Popup>
    
            </Grid>
    
    </Grid>
    

    In XAML.cs

     

     public sealed partial class MainPage : Page
    
        {
    
            public MainPage()
    
            {
    
                this.InitializeComponent();
    
                btn.PointerEntered += btn_PointerEntered;
    
                btn.PointerExited += btn_PointerExited;
    
            }
    
            void btn_PointerExited(object sender, PointerRoutedEventArgs e)
    
            {
    
                logincontrol1.IsOpen = false;
    
            }
    
            void btn_PointerEntered(object sender, PointerRoutedEventArgs e)
    
            {
    
                ShowFlyoutPopup(logincontrol1, new RoutedEventArgs());
    
            }
    
    
            private void ShowFlyoutPopup(object sender, RoutedEventArgs e)
    
            {
    
                if (!logincontrol1.IsOpen)
    
                {
    
                    var point = CalcOffsets((UIElement)sender);
    
                    RootPopupBorder.Width = 646;
    
                    logincontrol1.HorizontalOffset = point.X;
    
                    logincontrol1.VerticalOffset = point.Y + btn.ActualHeight;
    
                    logincontrol1.IsOpen = true;
    
                }
    
            }
    
            private Point CalcOffsets(UIElement elem)
    
            {
    
                var ttv = btn.TransformToVisual(Window.Current.Content);
    
                Point screenCoords = ttv.TransformPoint(new Point(0, 0));
    
                return screenCoords;
    
            }
    
    }
    

    If you still have questions, please feel free to let me know.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate the survey.

    • Marked as answer by mann madhan1 Tuesday, October 28, 2014 11:09 AM
    • Unmarked as answer by mann madhan1 Tuesday, October 28, 2014 2:45 PM
    • Marked as answer by mann madhan1 Thursday, October 30, 2014 4:20 PM
    Tuesday, October 28, 2014 7:34 AM
    Moderator
  • Thanks Herro wong,

               btn_PointerExited does n't work as i expect. after excluding the btn_PointerExited  it work perfectly

    Thanks a lot

    Tuesday, October 28, 2014 11:12 AM
  • Thanks Herro wong,

               btn_PointerExited does n't work as i expect. after excluding the btn_PointerExited  it work perfectly

    Thanks a lot

    when i am using the "btn_pointerExited" it starts to Blink

    kindly help.

    Tuesday, October 28, 2014 1:26 PM
  • for slight change in the mouse on that button it start to blink

    by using the following code

    Button b = (Button)sender;
                Log.Text = b.IsPointerOver.ToString();

    it is returning false. for every slight change in the mouse pointer it is returning false.

    so how i can over come this issue 

    kindly help me, i am waiting for your reply



    Tuesday, October 28, 2014 7:02 PM
  • Hello,

    Remove the IsLightDismissEnabled property in Popup XAML will solve this issue.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate the survey.

    • Marked as answer by mann madhan1 Thursday, October 30, 2014 4:20 PM
    Thursday, October 30, 2014 1:55 AM
    Moderator