UWP: `webview` contents cut off if window is resized

Question

I want to resize webview with window. But, when I reduce the size of the window, the webview is cut off. (When I grow the size of the window it looks normal.)

    <Grid>
        <WebView x:Name="m_WebView" HorizontalAlignment="Left" Height="350" Margin="0,0,0,0" VerticalAlignment="Top" Width="568" ScriptNotify="m_WebView_ScriptNotify" NavigationCompleted="m_WebView_OnNavigationCompleted" x:FieldModifier="public"/>
        <ProgressRing x:Name="workingProgressRing" HorizontalAlignment="Center" VerticalAlignment="Center" Width="50" Height="50"/>

    </Grid>

        private void Page_onSizeChanged2(object sender, SizeChangedEventArgs e)
        {

            double widthRatio = e.NewSize.Width / (double)568;
            double heightRatio = e.NewSize.Height / (double)320;
            double newRatio = widthRatio < heightRatio ? widthRatio : heightRatio;
            double newWidth = 568 * newRatio;
            double newHeight = 320 * newRatio;

            m_WebView.RenderTransform = new CompositeTransform { ScaleX = newRatio, ScaleY = newRatio };

            ((CompositeTransform)m_WebView.RenderTransform).TranslateX = -(newWidth - 568 * widthRatio) / 2;
            ((CompositeTransform)m_WebView.RenderTransform).TranslateY = -(newHeight - 320 * heightRatio) / 2;


        }

Normal window picture.

Cut off webview picture.

How can I reduce the size together? Help me.. – Josephine L Nov 22 '18 at 07:46 — Josephine L, Nov 22 '18 at 07:46

score 1 · Answer 1 · answered Nov 22 '18 at 08:17

The proper way to size controls in UWP is scaling the automatically based on the layout instead of directly hardcoding Width and Height values.

In your case you could remove the Width and Height attributes, set HorizontalAlignment and VerticalAlignment to Stretch and let the WebView scale with the Grid instead.

UWP: `webview` contents cut off if window is resized

1 Answers1