locked
Need design advice on successive Flyout positioning. RRS feed

  • Question

  • I have a row of thumbnails.  Pressing and holding a thumbnail activates a Tasks flyout with some task choices, one of them is to delete the thumbnail.  If they choose Delete, I have a MenuFlyout to confirm the choice.

    The problem is positioning.  Both flyouts have Placement set to "Top".  The Tasks flyout appears beautifully over the Thumbnail.  However, the menu flyout to confirm the choice appears to float well above the thumbnail.  This is of course because it is positioning itself over the Tasks flyout which is now no longer visible.

    I want to position the confirm choice MenuFlyout directly over the thumbnail.  But I don't know an elegant way to structure my XAML so that the confirm choice flyout is actually attached to the thumbnail instead of the Tasks flyout Delete choice that triggers it.

    Any tips?


    -- roschler

    Wednesday, February 5, 2014 4:53 PM

Answers

  • Hi roschler,

    Take a look at the post http://social.msdn.microsoft.com/Forums/windowsapps/en-US/5b67df23-2865-44ff-8c99-62035ae79a99/how-do-i-change-the-width-of-a-flyout?forum=winappswithcsharp#5b67df23-2865-44ff-8c99-62035ae79a99

    You could use Setter to set a Margin for your Flyout, for instance:

                            <Flyout Opened="flyout_Opened">
                                <Flyout.FlyoutPresenterStyle>
                                    <Style TargetType="FlyoutPresenter">
                                        <Setter Property="Margin" Value="30,30,0,0"/>
                                        <Setter Property="ScrollViewer.ZoomMode" Value="Enabled"/>
                                        <Setter Property="Background" Value="Black"/>
                                        <Setter Property="BorderBrush" Value="Gray"/>
                                        <Setter Property="BorderThickness" Value="5"/>
                                        <Setter Property="MinHeight" Value="300"/>
                                        <Setter Property="MinWidth" Value="300"/>
                                    </Style>
                                </Flyout.FlyoutPresenterStyle>
                                <StackPanel Width="1500">
                                    <TextBlock Style="{StaticResource BasicTextStyle}">Do you really want to buy this item?</TextBlock>
                                    <Button x:Name="confirmPurchase" Click="confirmPurchase_Click">Confirm Purchase</Button>
                                </StackPanel>
                            </Flyout>
    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by roschler Thursday, February 6, 2014 12:16 PM
    Thursday, February 6, 2014 6:46 AM
    Moderator

All replies

  • Hi roschler,

    Take a look at the post http://social.msdn.microsoft.com/Forums/windowsapps/en-US/5b67df23-2865-44ff-8c99-62035ae79a99/how-do-i-change-the-width-of-a-flyout?forum=winappswithcsharp#5b67df23-2865-44ff-8c99-62035ae79a99

    You could use Setter to set a Margin for your Flyout, for instance:

                            <Flyout Opened="flyout_Opened">
                                <Flyout.FlyoutPresenterStyle>
                                    <Style TargetType="FlyoutPresenter">
                                        <Setter Property="Margin" Value="30,30,0,0"/>
                                        <Setter Property="ScrollViewer.ZoomMode" Value="Enabled"/>
                                        <Setter Property="Background" Value="Black"/>
                                        <Setter Property="BorderBrush" Value="Gray"/>
                                        <Setter Property="BorderThickness" Value="5"/>
                                        <Setter Property="MinHeight" Value="300"/>
                                        <Setter Property="MinWidth" Value="300"/>
                                    </Style>
                                </Flyout.FlyoutPresenterStyle>
                                <StackPanel Width="1500">
                                    <TextBlock Style="{StaticResource BasicTextStyle}">Do you really want to buy this item?</TextBlock>
                                    <Button x:Name="confirmPurchase" Click="confirmPurchase_Click">Confirm Purchase</Button>
                                </StackPanel>
                            </Flyout>
    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by roschler Thursday, February 6, 2014 12:16 PM
    Thursday, February 6, 2014 6:46 AM
    Moderator
  • Hello James,

    Thanks.  Just to confirm my understanding, you're suggesting that I compensate for the height difference by altering the secondary flyout's height?  I guess that means implicitly there's no way to make a flyout behave as if it's attached to another item?  

    If that's true, I  hope in a future release MS extends the Flyout show method to have a Target element parameter (just wishing out loud).


    -- roschler

    Thursday, February 6, 2014 12:19 PM