make flyout fixed

Question

Current I'm opening an Flyout on clicking of Button, This Flyout host a MediaElement control to play video i.e Media Element is child of Flyout( popup. When the user clicks on "FULL Screen" of MediaElement, Media Element Opens in Full Screen, but when i try to click on MediaElement like Seeking to Different Position in video or clicking back Full Screen button, Flyout control assumes that user has clicked outside of Flyout Scope,so it automatically closes the Flyout. My Flyout is of width 300 height 300. Is there any way either make Popup Flyout to remain Fixed Even after clicking outside of Flyout. Is there any event in MediaElement to capture whether it is Full Screen Mode change or not.

---

Mahender

Answer 1

Hi Mahender,

Guideline for flyout suggests some scenarios to use flyout control. In this case, I think you should change to use Popup control. The popup provides isOpen property for us to close the window when you want. I would recommend you define a UI to provide media control and a media element. Use Window.Current.Bounds to control the UI width and height to perform like full screen. Code snippet looks like the following.

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" >
                <Popup.ChildTransitions>
                    <TransitionCollection>
                        <PaneThemeTransition />
                    </TransitionCollection>
                </Popup.ChildTransitions>
                <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="2" Background="{StaticResource ApplicationPageBackgroundThemeBrush}" x:Name="RootPopupBorder">
                    <Grid x:Name="grid1">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"></RowDefinition>
                            <RowDefinition Height="auto"></RowDefinition>
                        </Grid.RowDefinitions>
                        <StackPanel Orientation="Horizontal">
                            <Button  Content="close" Click="Button_Click"></Button>
                            <Button Content="Stop"></Button>
                            <Button Content="Pre"></Button>
                            <Button Content="Next"></Button>
                        </StackPanel>
                        <MediaElement x:Name="media1" Grid.Row="1" Source="http://video.ch9.ms/ch9/3147/1285d576-e5d1-4186-93be-202c7e8d3147/GN31ParallelSTL.wmv"></MediaElement>
                    </Grid>
                </Border>
            </Popup>
        </Grid>
</Grid>

In XAML.cs

void btn_PointerEntered(object sender, PointerRoutedEventArgs e)
        {
            ShowFlyoutPopup(logincontrol1, new RoutedEventArgs());
        }
        private void ShowFlyoutPopup(object sender, RoutedEventArgs e)
        {
            if (!logincontrol1.IsOpen)
            {
                RootPopupBorder.Width = Window.Current.Bounds.Width;
                RootPopupBorder.Height = Window.Current.Bounds.Height;
                logincontrol1.HorizontalOffset = 0;
                logincontrol1.VerticalOffset = 0;
                logincontrol1.IsOpen = true;
            }
        }
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            logincontrol1.IsOpen = false;
        }

If you still have questions, please post more information about your scenario.

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.

Answer 2

Use attached Flyout:

<DataTemplate x:Key="ListItemTemplate">
    <Grid RightTapped="ListRightTapped" Tapped="ListTapped" Background="Transparent">
        <Grid>
            ...
        </Grid>
        <FlyoutBase.AttachedFlyout>
            <Flyout Closed="listFlyout_Closed">
                <StackPanel>
                    ...
                </StackPanel>
            </Flyout>
        </FlyoutBase.AttachedFlyout>
    </Grid>
</DataTemplate>

And the code:

private void ListRightTapped( object sender, RightTappedRoutedEventArgs e )
{
    FlyoutBase.ShowAttachedFlyout( sender as FrameworkElement );
}