WinUI 3如何将DropDownButton的Flyout宽度设为100%？

你遇到的问题是MenuFlyout默认不会继承DropDownButton的宽度，这里提供两种可行的解决方式：

方法1：绑定MenuFlyout宽度到按钮实际宽度 #

通过给MenuFlyout设置FlyoutPresenterStyle，把宽度绑定到DropDownButton的ActualWidth，就能让下拉面板和按钮宽度完全一致：

<DropDownButton Grid.Row="1" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left" ToolTipService.ToolTip="Select" Margin="0,7,0,0" x:Name="DropDownBtn">
    <TextBlock FontSize="14" Text="List of items" />
    <DropDownButton.Flyout>
        <MenuFlyout x:Name="SelectFlyout" Placement="BottomEdgeAlignedLeft">
            <MenuFlyout.FlyoutPresenterStyle>
                <Style TargetType="FlyoutPresenter">
                    <!-- 绑定宽度到按钮实际宽度 -->
                    <Setter Property="Width" Value="{Binding ElementName=DropDownBtn, Path=ActualWidth}" />
                    <!-- 可选：去掉默认内边距，让边缘完全对齐 -->
                    <Setter Property="Padding" Value="0" />
                </Style>
            </MenuFlyout.FlyoutPresenterStyle>
            <MenuFlyoutItem Text="Item 1" HorizontalAlignment="Stretch" />
            <MenuFlyoutItem Text="Item 2" HorizontalAlignment="Stretch" />
            <MenuFlyoutItem Text="Item 3" HorizontalAlignment="Stretch" />
        </MenuFlyout>
    </DropDownButton.Flyout>
</DropDownButton>

方法2：用Popup替代MenuFlyout（更灵活自定义） #

如果MenuFlyout的样式限制太多，直接用Popup实现下拉面板，宽度绑定逻辑更直观：

XAML代码 #

<DropDownButton Grid.Row="1" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left" ToolTipService.ToolTip="Select" Margin="0,7,0,0" x:Name="CustomDropDownBtn"
                Click="CustomDropDownBtn_Click">
    <TextBlock FontSize="14" Text="List of items" />
</DropDownButton>

<!-- 自定义下拉面板 -->
<Popup x:Name="DropDownPopup" PlacementTarget="{Binding ElementName=CustomDropDownBtn}" Placement="Bottom"
       IsOpen="False" Width="{Binding ElementName=CustomDropDownBtn, Path=ActualWidth}">
    <Border Background="White" BorderBrush="{ThemeResource SystemControlForegroundBaseMediumBrush}" BorderThickness="1">
        <StackPanel>
            <Button Content="Item 1" HorizontalAlignment="Stretch" Padding="12,8"/>
            <Button Content="Item 2" HorizontalAlignment="Stretch" Padding="12,8"/>
            <Button Content="Item 3" HorizontalAlignment="Stretch" Padding="12,8"/>
        </StackPanel>
    </Border>
</Popup>

后台代码（切换Popup显示状态） #

private void CustomDropDownBtn_Click(object sender, RoutedEventArgs e)
{
    DropDownPopup.IsOpen = !DropDownPopup.IsOpen;
}

额外提示 #

• 两种方法都支持容器宽度动态变化，因为绑定的是ActualWidth（控件实际渲染宽度）
• 方法1中如果不需要完全贴合边缘，可以去掉Padding的Setter，保留默认内边距

内容的提问来源于stack exchange，提问作者holycreeper