locked
How do I change the width of a Flyout? RRS feed

  • Question

  • I am using several flyouts in my app.  Oddly enough, I can't figure out how to change the Flyout's width.  If I change the Flyout Placement to Full, I get a big white box in the center of my app, 450 pixels wide.  No matter what I try to do, I can't make it any wider.  I have similar issues with the other placements.  The Flyout object doesn't seem to have any sizing properties, and changing the size of the child controls ends up extending them off the visible area of the Flyout or leading to a scrolling condition.

    How can I make the Flyout the height and width that I want?  I need the following two layous:

    1) A long horizontal strip at the bottom of the screen (just above the appbar if it's open, a the bottom if not).

    2) A wide horizontal strip about 800 pixels wide and 400 pixels tall.


    -- roschler

    Wednesday, February 5, 2014 8:50 PM

Answers

  • Hi roschler,

    Yes you can, by re-design the style of Flyout, take a look at Quickstart: Adding a Flyout

    For instance I would like to modify the style of my Flyout, I would use following code, the bold text are the part to define the style:

                            <Flyout Opened="flyout_Opened">
                                <Flyout.FlyoutPresenterStyle>
                                    <Style TargetType="FlyoutPresenter">
                                        <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="1300"/>
                                    </Style>
                                </Flyout.FlyoutPresenterStyle>
                                <StackPanel>
                                    <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.


    Thursday, February 6, 2014 2:28 AM
    Moderator

All replies

  • Hi roschler,

    Yes you can, by re-design the style of Flyout, take a look at Quickstart: Adding a Flyout

    For instance I would like to modify the style of my Flyout, I would use following code, the bold text are the part to define the style:

                            <Flyout Opened="flyout_Opened">
                                <Flyout.FlyoutPresenterStyle>
                                    <Style TargetType="FlyoutPresenter">
                                        <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="1300"/>
                                    </Style>
                                </Flyout.FlyoutPresenterStyle>
                                <StackPanel>
                                    <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.


    Thursday, February 6, 2014 2:28 AM
    Moderator
  • Thanks Jamies Hez, that worked great!

    Any way to get rounded corners?  I searched the FlyoutPresenter properties for "radius" and I didn't find anything.


    -- roschler


    • Edited by roschler Thursday, February 6, 2014 5:09 PM
    Thursday, February 6, 2014 5:03 PM
  • Hi roschler,

    Good question, for Flyout itself I don't think its possible, but we can style the item that in the Flyout.

    As we know the border does have a CornerRadius property which could be a great thing for rounded corner, and I will set the border and background for Flyout as Transparent.

    I will re-style the flyout as following:

                        <Button.Flyout>
                            <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="Transparent"/>
                                        <Setter Property="BorderBrush" Value="Transparent"/>
                                        <Setter Property="BorderThickness" Value="0"/>
                                        <Setter Property="MinHeight" Value="300"/>
                                        <Setter Property="MinWidth" Value="300"/>
                                    </Style>
                                </Flyout.FlyoutPresenterStyle>
                                <Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Center"  Height="200" Margin="0,0,0,0" VerticalAlignment="center" Width="300" CornerRadius="10">
                                    <StackPanel Width="300">
                                        <TextBlock Style="{StaticResource BasicTextStyle}">Do you really want to buy this item?</TextBlock>
                                        <Button x:Name="confirmPurchase" Click="confirmPurchase_Click">Confirm Purchase</Button>
                                    </StackPanel>
                                </Border>
                            </Flyout>
                        </Button.Flyout>

    The result could be:

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


    Friday, February 7, 2014 2:30 AM
    Moderator
  • Nice thinking!  So you hid the Flyout's border and added your own.

    Thanks. :)


    -- roschler

    Friday, February 7, 2014 3:02 AM