Cannot make UWP button and WebView2 visible at same time

Question

I have a WebView2 that navigates correctly in a UWP app. The webview navigate uri is set in the page OnNavigatedTo event. I've added a button to the xaml form but I can see either the button or the webview but not both.

I see the button but not the WebView if I do this

<Grid Background="LightBlue">
    <StackPanel>
        <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>
        <WebView
                    Name="MyWebView"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"/>
    </StackPanel>
</Grid>

If I remove the StackPanel like this

<Grid Background="LightBlue">
        <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>
        <WebView
                    Name="MyWebView"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"/>
</Grid>

I see the WebView navigates correctly but the button is no longer visible. How do I show both?

Answer 1

If you want to add WebView2 in StackPanel, you need to define the Height and Width of WebView2. If it is not defined, UWP cannot calculate the position of WebView2 in the StackPanel, so WebView2 will not be displayed.

<StackPanel>
           ...
     <WebView
          Width="1000"
          Height="1000"
          Name="MyWebView"
          HorizontalAlignment="Stretch"
          VerticalAlignment="Stretch"
       Source="http://www.contoso.com"/>
</StackPanel>

In order to get a better display effect, it is recommended that you use the Grid layout like Grid.RowDefinitions and put the WebView2 in the specified row and column.

<Grid Background="LightBlue">
    <Grid.RowDefinitions>
        <RowDefinition Height="1*"/>
        <RowDefinition Height="9*"/>
    </Grid.RowDefinitions>
 
        <Button 
            Grid.Row="0"
        x:Name="MyButton"
            Width="100"
            Height="50"
        Padding="0,10"
        AccessKey="R"
        Click="MyButton_Click"
        ToolTipService.ToolTip="Do Stuff">
            <Button.KeyboardAccelerators>
                <KeyboardAccelerator Key="R" Modifiers="Control" />
            </Button.KeyboardAccelerators>
        </Button>
        <WebView
            Grid.Row="1"                
                Name="MyWebView"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
            Source="http://www.contoso.com"/>

</Grid>