WPF: Is it Possible to create Flyout on scrollable window using MahApps.Metro?

Question

Metro, I have used this few days back and Now wish to add Flyout on scrollable window on bottom like fix menu bar. Is it possible?

Below is the code of XAML page for flyout genration, For temporary purpose I have added on top now,

<Controls:FlyoutsControl>
            <Controls:Flyout Header="Actions" Name="TestFlyout" VerticalAlignment="Bottom" Position="Top" Width="990" Theme="Adapt">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="20*"></ColumnDefinition>
                        <ColumnDefinition Width="20*"></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <Button Content="Save" Width="70" Height="30" HorizontalAlignment="Left" Grid.Column="0"></Button>
                    <Button Content="Cancel" Width="70" Height="30" HorizontalAlignment="Left" Grid.Column="1"></Button>
                </Grid>
            </Controls:Flyout>
        </Controls:FlyoutsControl>

Answer 1

Maybe you forgot to put your flyout in the flyouts. And you should use Position="Bottom" not VerticalAlignment="Bottom" .

<Grid>
    <ScrollViewer Name="scrlMain"
                    CanContentScroll="True"
                    HorizontalScrollBarVisibility="Auto"
                    VerticalScrollBarVisibility="Auto"
                    VerticalAlignment="Stretch">

        <TextBlock Text="Test"></TextBlock>

    </ScrollViewer>

    <Controls:Flyout Header="Actions"
                        Name="TestFlyout"
                        IsOpen="True"
                        Position="Bottom"
                        Width="990"
                        Theme="Adapt">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="20*"></ColumnDefinition>
                <ColumnDefinition Width="20*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Button Content="Save"
                    Width="70"
                    Height="30"
                    HorizontalAlignment="Left"
                    Grid.Column="0"></Button>
            <Button Content="Cancel"
                    Width="70"
                    Height="30"
                    HorizontalAlignment="Left"
                    Grid.Column="1"></Button>
        </Grid>
    </Controls:Flyout>

</Grid>

Hope this helps.