MahApps.Metro Flyout not overlaying a column

Question

I have a simple layout and am trying to put in a flyout to use as a user input screen. Here's the xaml:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="9*"/>
        <ColumnDefinition Width="1*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="0">
        <Button Content="Add New Task" Command="{Binding NewTaskCommand}" Margin="{StaticResource CenteredToolMargin}"/>
        <Button Content="Archive Tasks" Command="{Binding ArchiveTasksCommand}" Margin="{StaticResource CenteredToolMargin}"/>
        <Button Content="Complete Tasks" Command="{Binding CompleteTasksCommand}" Margin="{StaticResource CenteredToolMargin}"/>
    </StackPanel>
    <Controls:Flyout Header="Flyout" Position="Right" Width="200" IsOpen="True">
        <Controls:FlyoutsControl>
            <TextBlock FontSize="24">Hello World</TextBlock>
        </Controls:FlyoutsControl>
    </Controls:Flyout>
</Grid>

The problem is, the flyout appears to the left of column 1 instead of on top of it. When I close the flyout, it animates over column 1, though. I tried swapping the "Controls:Flyout" and "Controls:FlyoutsControl" tags as I can't find consistent guidance on which way they should go, but it acts the same, either way. Am I missing something?

Answer 1

I set the Column 1 Width to Auto if you want your fixed width than in Flyout add this line Grid.Column="0" Grid.ColumnSpan="2" and remove Grid.Column="1"

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>


    <StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="0">
        <Button Content="Add New Task" />
        <Button Content="Archive Tasks" />
        <Button Content="Complete Tasks" />
    </StackPanel>

    <Controls:Flyout Grid.Column="1" Header="Flyout" Position="Right" Width="200" IsOpen="True">
        <Controls:FlyoutsControl>
            <TextBlock FontSize="24">Hello World</TextBlock>
        </Controls:FlyoutsControl>
    </Controls:Flyout>
</Grid>