UWP中无法同时显示Button与WebView2的问题咨询

问题根源 #

1. 使用StackPanel的情况：StackPanel默认根据子元素内容高度布局，WebView2（你代码里写的<WebView>应为<WebView2>）初始未加载内容时高度为0，因此被隐藏。
2. 直接放入Grid的情况：WebView2设置了Stretch会占满整个Grid，而Grid默认所有子元素处于同一单元格，WebView2会覆盖在Button上方，导致Button不可见。

解决方案1：上下布局（Button在顶部，WebView2占下方空间） #

用Grid的行定义分配空间，让按钮和WebView2各占一行：

<Grid Background="LightBlue">
    <Grid.RowDefinitions>
        <!-- 按钮行：高度自适应内容 -->
        <RowDefinition Height="Auto"/>
        <!-- WebView2行：占剩余全部空间 -->
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Button
        x:Name="MyButton"
        Padding="0,10"
        AccessKey="R"
        Click="DoStuff"
        Style="{StaticResource StuffButton}"
        ToolTipService.ToolTip="Do Stuff">
        <Button.KeyboardAccelerators>
            <KeyboardAccelerator Key="R" Modifiers="Control" />
        </Button.KeyboardAccelerators>
    </Button>

    <WebView2
        Name="MyWebView"
        Grid.Row="1"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"/>
</Grid>

解决方案2：悬浮布局（Button在WebView2上方） #

让Button悬浮在WebView2的指定位置（比如右上角），不遮挡核心内容：

<Grid Background="LightBlue">
    <!-- WebView2先放，占满整个Grid -->
    <WebView2
        Name="MyWebView"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"/>

    <!-- Button后放，处于WebView2上层，设置对齐方式和边距 -->
    <Button
        x:Name="MyButton"
        Margin="10"
        Padding="0,10"
        AccessKey="R"
        Click="DoStuff"
        Style="{StaticResource StuffButton}"
        ToolTipService.ToolTip="Do Stuff"
        HorizontalAlignment="Right"
        VerticalAlignment="Top">
        <Button.KeyboardAccelerators>
            <KeyboardAccelerator Key="R" Modifiers="Control" />
        </Button.KeyboardAccelerators>
    </Button>
</Grid>

注意事项 #

你代码中使用的<WebView>是旧版WebView控件，若你实际用的是WebView2，务必替换为<WebView2>，避免控件特性差异导致的问题。

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