MahApps.Metro Flyout 不覆盖列答案

【问题标题】：MahApps.Metro Flyout not overlaying a columnMahApps.Metro Flyout 不覆盖列
【发布时间】：2018-11-18 15:08:45
【问题描述】：

我有一个简单的布局，并试图放入一个弹出窗口以用作用户输入屏幕。这是xml：

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

问题是，浮出控件出现在第 1 列的左侧，而不是在它的顶部。但是，当我关闭弹出窗口时，它会在第 1 列上显示动画。我尝试交换“Controls:Flyout”和“Controls:FlyoutsControl”标签，因为我找不到关于它们应该走哪条路的一致指导，但无论哪种方式，它的作用都是一样的。我错过了什么吗？

【问题讨论】：

我确实看过那里，问题是，我认为他们的文档有点过时，因为“”不存在，这就是我去其他地方寻找的原因
是的，MetroWindow 存在，但 MetroWindow 中唯一的东西是 FlyoutStatusChanged 和 WindowTransitionCompleted。
它显示得很好，但它显示在第 1 列的左侧（请参阅我发布的代码），而不是覆盖窗口的整个右侧。我试过把它放在网格中，尝试改变标签的位置，等等。不知道为什么它没有覆盖第 1 列

标签： c# wpf xaml mahapps.metro

【解决方案1】：

如果您想要固定宽度而不是 Flyout，我将 Column 1 Width 设置为 Auto 添加此行 Grid.Column="0" Grid.ColumnSpan="2" 并删除 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>

【讨论】：

是的，这是预期的行为
好的，我在想你正在考虑弹出关闭事件，即使它在另一列上也会覆盖另一列
@linus72982 答案已更新