Change Background color of flyout (UWP)

Question

I have a Flyout control on my page and I want to change the background color of it. How can I achieve this?

 <Button x:Name="btn"  Background="Transparent">
            <Image HorizontalAlignment="Center" />
            <Button.Flyout  >
                <Flyout Placement="Left" >
                    <ListView  ItemsSource="{x:Bind DDLItemsSource, Mode=OneWay}" Background="Green" VerticalAlignment="Stretch"  
                               SelectionChanged="StudentsList_SelectionChanged" x:Name="StudentsList" SelectionMode="Extended"  HorizontalAlignment="Stretch"  >
                        <Style TargetType="ListViewItem">
                            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                        </Style>
                    </ListView>
                </Flyout>
            </Button.Flyout>
        </Button>

If I give Background for child element, It gives a margin between flyout and child element, so it's not acceptable. Presently look like this

You'll need a custom MenuFlyoutPresenterStyle; see the example at https://stackoverflow.com/questions/57519359/how-to-change-the-background-color-of-flyout-in-uwp — archiTech, May 13 '20 at 00:36

score 2 · Accepted Answer · answered May 13 '20 at 01:57

To change the background color of Flyout, you can try to style the properties of the internal FlyoutPresenter that is presenting the Content of a Flyout. For example:

<Button.Flyout>
    <Flyout Placement="Left">

        <Flyout.FlyoutPresenterStyle>
            <Style TargetType="FlyoutPresenter">
                <Setter Property="Background" Value="Green"/>
            </Style>
        </Flyout.FlyoutPresenterStyle>

        <ListView ItemsSource="{x:Bind DDLItemsSource, Mode=OneWay}" Background="Green" VerticalAlignment="Stretch"  SelectionChanged="StudentsList_SelectionChanged" x:Name="StudentsList" SelectionMode="Extended"  HorizontalAlignment="Stretch"  >
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListView>
    </Flyout>
</Button.Flyout>

Change Background color of flyout (UWP)

1 Answers1